Aller au contenu

découper un design


Guest narcisse

Sujets conseillés

Guest narcisse

Bonjour,

Il y a quelques temps, je concevais mes design avec photoshop et les découpaient avec imageReady ou Fireworks.

L'incionvénient est que ces tableaux sont constituaient de Table, il est évidemment possible de configuarer ces logiciels pour le XHTML, avec fermeture de balises.

Mais j'aimerais maintenant faire la même chose pour des sites Tabeless.

Alors pouvez vous m'orienter sur la marche à suivre et logiciels à utiliser si logiciel il y a ?

Merci d'avance.

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

Un premier conseil : tu oublies complétement cette notion de découpage :rolleyes:

Un deuxième conseil : tu lis attentivement Les coulisses d'un design où Golden Mean (web designer de renom) explique sa technique pour monter un design pour Jardin Zen CSS.

Un troisième conseil : ta lecture terminée, tu pourras poser des questions plus précises, ce que tu ne devras pas hésiter à faire B)

Lien vers le commentaire
Partager sur d’autres sites

Je rejoins Monique dans sa réponse. Je me permets également de répondre à ta question à propos des logiciels. Tu n'as pas besoin de rien de plus qu'un éditeur HTML (que tu possèdes assurément déjà) et de ta créativité pour construire des sites tableless. Bon, ça prend quand même un éditeur graphique, comme ton photoshop, mais tu ne l'utiliseras plus de la même manière, sois-en assuré. ^_^

C'est simplement que ta pensée doit s'organiser différemment. D'ailleurs, quand tu auras terminé les lectures proposées par Monique, je t'invite fortement à lire les tutos de l'ami Sibelius (lui aussi membre du Hub) qui sont excellent et qui t'aideront grandement à y voir plus clair.

Bonne lecture, bon courage et surtout, à bientôt.

Lien vers le commentaire
Partager sur d’autres sites

Guest narcisse

Lecture terminée

Bon et bien j'ai lu tous ces conseils et finalement je n'en ai pas retiré grand-chose, si ce n'est que Golden Mean à plus d'imagination et de temps que moi surement.

Je trouve son header magnifique mais aprés le reste sans vouloir le dénigrer ou qui que ce soit, ça reste trés classique.

Je pense que même si c'est une évidence aujourd'hui qu'il faut utiliser et abuser des CSS afin de séparer le contenu de la forme, on arrive pas encore à restituer ce qui se faisait avant ou du moins la majorité des codeurs/créateurs.

Le seul que j'ai vu pour le moment réaliser des beaux exploits, c'est Kloobik chez Kooliss, ces réalisations en XHTML sont trés proches de celles en HTML à la différence qu'elles sont Tabeless, comment fait il ?

Mystère et boule de gomme....

Il ne le dira pas et c'est tout à fait normal mais cela m'étonnerait qu'il code tout à l'aide du bloc note, il s'inspire forcément de ces créations tabeless et en HTML, pour les convertir en non Tabelles et XHTML.

A l'aide de quoi ?

Il ne le fait pas manuellement j'en suis presque persuadé, j'ai moi même essayé de reprendre de vieille réalisation pour les convertir en XHTML - CSS mais cela est trés long et difficiel.

Bizarre, bizarre avez vous dit, je le pense également.

La grande question est est ce que les concepteurs doivent penser comme avant et essayer de réaliser des sites comme auparavant mais tabelless et XHTML ou alors, ils doivent radicalement changer de lignes de conduite et s'orienter vers ce qu'il se fait sur Le Jardin Zen ???

Pour ma part je préfére ce que l'on appelait Kit Graphique.

Lien vers le commentaire
Partager sur d’autres sites

Et bien le moins que l'on puisse dire, c'est que tu lis très vite. À peine une heure pour tout lire et tout absober le savoir qui se trouvait à ces endroits, je ne suis pas trop surpris que tu te poses encore toutes ces questions maintenant. ;)

Enfin, les réalisations époustouflantes construites en pur CSS se font de plus en plus fréquentes, tout simplement parce qu'il y a de plus en plus de gens qui font l'effort de maîtriser les subtilités de cette technologie. Si Kooliss en est un exemple, il en existe plusieurs autres... généralement, le génie derrière ces designs, c'est qu'ils n'ont pas l'air d'être construits ainsi...

Les propositions des Jardins CSS sont pour la très grandes majorités des exemples extraordinaires prouvant que créativité et compétences peuvent créer des résultats hallucinants. Il faut smplement accepter que tout ne se maitrise pas en une heure, en survolant rapidement quelques textes. Je te suggère donc de lire, relire, expérimenter, tester, coder, décoder et, quans tu auras l'impression de commencer à comprendre, tout jeter par la fenêtre et recommencer encore.

Au bout de quelques semaines, tu commenceras à voir quelques résultats. Mais dis-toi bien que même nous qui jouons avec les CSS et les normesdepuis des années ne sommes pas encore capables de tout faire...

Lien vers le commentaire
Partager sur d’autres sites

Si je puis me permettre de te proposer des liens que je connais bien (ils sont sur Alsa) et qui feront peut-être pencher la balance :

Un extrait de ce billet : http://www.alsacreations.com/blog/index.ph...otiques-des-css

La Cellulite ravageuse :

    Cette forme de maladie (qui n'est pas uniquement réservée au femmes webmastrices) est héritée de nos origines à concevoir des sites web à l'aide de tableaux et de cellules.

    Cette ancienne technique impliquait de multiples découpes des éléments en petites cellules, chacune contenant un morceau d'image de l'arrière-plan ou une partie du contenu.

    Symptômes : On considère le patient atteint de cellulite ravageuse à son obsession à vouloir tout découper, imbriquer et "celluliser".

    Par exemple, un site comme Alsacréations (http://www.alsacreations.com) sera immédiatement perçu comme un enchevêtrement basique de multiples cellules auxquelles seront appliqués des équivalents de rowspan et colspan (cf illustration).

    Autre symptôme fréquent : le souffrant continue de découper toutes ses images d'arrière-plan en plusieurs fichiers, se compliquant la tâche pour l'intégration de son code.

    Conséquences : Tout comme la Classite, la Cellulite ravageuse implique une prise de poids conséquente chez le malade mais aussi et surtout une structure inextricable complètement opaque même pour un utilisateur averti.

    Avec le temps et l'évolution de la maladie, le souffreteux ne comprendra même plus son propre code, sans oublier que les navigateurs, vu la complexité, auront une certaine tendance à mal interprêter le document.

    Traitement : Le traitement de cette affection lourde nécessite une complète remise en cause de ses propres conceptions et de son expérience de webmaster.

    Plutôt que de regarder les mises en page "à plat", il faudra apprendre au patient à prendre du recul, à distinguer la profondeur des éléments : cette image n'est pas incrustée dans le design, elle est au-dessus, cet arrière-plan ne fait pas partie du menu, il est sur un autre niveau de profondeur, etc.

    Toute la différence est là : les objets ne sont pas les uns à côté des autres, ils sont souvent à un autre niveau ou superposés.

    Il faut également lui expliquer que le fait de découper les grandes images en multiples petites images est loin d'être intéressant contrairement à ce que l'on croit.

    Chaque fichier a dans son code un entête dont la taille est invariable et qui donne des renseignements sur ce fichier (nom, taille, format, ...).

    Donc en faisant de multiples découpes, il crée des fichiers qui au final pèseront entre 20% et 40% plus lourd que l'image initiale.

    Par exemple : une image de 30ko découpée en 3 images.. au final, les 3 images pèseront sans-doute au-moins 40ko.

Autres liens :

- Tableau / Div : un exemple concrêt : http://www.alsacreations.com/articles/tableaux/

- Faire une mise en page en CSS : http://www.alsacreations.com/articles/design/

A Noter bien évidemment que le principe de base est d'apprendre à positionner les éléments en CSS : http://openweb.eu.org/mise_en_page/

Tu découvriras bien vite que les possibilités des CSS sont bien plus larges et plus intuitives que celles offertes par les tableaux :

- des mises en pages de toute sorte : http://www.alsacreations.com/articles/modeles/

- des menus évolués sans javascript : http://www.alsacreations.com/articles/modelesmenus/

etc.

Modifié par Sibelius
Lien vers le commentaire
Partager sur d’autres sites

eehhhh bien voilà quelqu'un qui n'a pas gouté aux joies de la créations de sites tabless e mis en forme grâces aux CSS.

Personnelement, j'ai toujours codés mes sites à la main grâce à un editeur html (ultra edit, Scite, bloc note (si si au début)), et je n'échangerais mes outils (3Mo en moyenne) pour rien au monde (entendez par là editeurs ousi ouigue comme dreamweaver (400Mo) ou même contre une appli de graphisme exportant du html (c'est selon moi une abération)).

Je n'ai pas beaucoup utilisé les table, et oui coder des multiples tables impbriquées à la main, ca devient vite lassant ;p et je suis persuadé d'aller plus vite à la main en xhtml/css que quelqu'un avec son dreamachin chose et ses tableaux. Pourquoi ? parceque ! plus serieusement, la quatité de code est bien moindre en xhtml/css propre qu'en html avec tableaux imbriqués, on va donc plus vite, et l'habitude fait que l'on va tres vite, ou même on peut simplement reprendre des modèles de page html et il ne reste ensuite qu'a créer le fichier css et basta, avec quelques adaptations minimes du code html.

Mais il faut savoir qu'on ne fait pas ça du jour au lendemain, ca fait personnelement plus de 6 mois que j'ai commencé à essayé de coder en xhtml et css et je suis loin de faire des trucs parfaits. Mais je suis persuadé que c'est mieux que des sites extremement lourd plein de tables imbriquées et de balises <font> à tout va.

Pour ce qui est de l'exemple cité (via pompage.net) ce n'est pas la complexité (il y a des realisations sur le css zen garden plus complexes et techniques) qui est à regarder mais la DEMARCHE de création du code. Car toute la différence est là, la "decoupe" n'est pas du tout la même, la façon de procéder non plus.

Selon moi, si tu souhaites passer au full css et tabless pour rendre tes pages moins lourdes fait le progressivement, rapelle toi tes débuts en html, tu ne faisais pas des monstres de sites d'entrée de jeu. Mais au moins là tu y passera moins de temps puisque la méthode et la démarche sont plus facile grâce à la séparation contenu mise en forme.

@++

Modifié par ElMoustiko
Lien vers le commentaire
Partager sur d’autres sites

Guest narcisse
eehhhh bien voilà quelqu'un qui n'a pas gouté aux joies de la créations de sites tabless e mis en forme grâces aux CSS.

Je vous rassure, ça fait plus de un an que je me suis mis au CSS et XHTML même si je n'en vois pas l'intérêt pour ce dernier.

Donc, je n'en suis pas à mes débuts et je matrise relativement les CSS 1 et je n'éprouve pas le besoin d'allez plus loin tant que IE existera sous cette forme.

Par contre, ce que je déplore c'est que je retrouve rarement la créativité que l'on avait auparavant.

Enfin, je bouquine je bouquine.....

Lien vers le commentaire
Partager sur d’autres sites

Hmm pour la créativité, je ne suis résoluement pas d'accord, il n'y a qu'a voir les css zen garden, css vault, style gala et autres...

A mon avis c'est plus tendance à faire plus simple et plus sobre et non un rapport avec la facon de coder. C'est plus un courant de conception au niveau du design, c'est la mode de faire plus simple.

Enfin il faudrait que tu nous donnes un exemple de ce que tu trouves complexe ;p

Sinon le xhtml n'a pas de réel interet en sois. (enfin c'est tout de même mieux de respecter une syntaxe stricte comme pour tout langage qui se respecte)

Ce qui importe réellement c'est le respect de la sémantique web.

La séparation contenu/mise en forme permet une pertinence accrue des pages, un allégement des pages, ...

Enfin je laisse les experts me reprendre si je me goure.

Sinon l'interet d'utiliser du xhtml strict plutot que du html transitionnal, c'est d'avoir des bornes, des regles plus strictes facilitant le respect de la sémantique web.

En tout les cas c'est comme ça que je vois les choses actuellement (etant en perpetuel apprentissage, mon point de vue change de temps en temps ;p)

Sinon tu voulais certainement parler des css2 et non css1, parceque css1 c'est de la gnognotte ;p

@++

Lien vers le commentaire
Partager sur d’autres sites

Guest narcisse
Enfin il faudrait que tu nous donnes un exemple de ce que tu trouves complexe

Par exemple, les kits de kooliss me plaisent car il rapelle vraiment les design que l'on faisaient auparavant avec des tableaux.

Il ne se content pas de tout ce que l'on voit en ce moment en XHTML/CSS, c'est à dire site trés clair en 2 ou 3 colonnes avec des background....

Sinon le xhtml n'a pas de réel interet en sois

Je suis d'accord concernant la sémantique ainsi que la séparation contenu/mise en forme mais il n'est pas necessaire d'utiliser le XHTML, on peut aussi bien le faire avec le HTML Strict tant les documentations sur le XHTML sont floues et pas encore reconnues et expliquent vraiment mal les avantages de faire la transitions.

Mais ce n'est pas le débat ici bien que je ne vois pas l'utilité de passer au XHTML (bien que je ne connaisse pas assez le sujet) si ce n'est que pour fermer les balises uniques.

Sinon tu voulais certainement parler des css2 et non css1, parceque css1 c'est de la gnognotte

Je parlais bien de CSS 1 car je ne connais pas CSS 2 et encore moins CSS 3.

A ce sujet, si vous avez de bonnes documentations en Français concernant les évolutions de CCS 2 par rapport à CSS 1.

Ce qui a été ajouté (propriétés/valeurs) et autres.

Merci beaucoup pour vos réponses.

Lien vers le commentaire
Partager sur d’autres sites

Euh bah :hover par exemple c'est CSS2 (sauf si je raconte encore une annerie), la plupart des pseudo classes aussi, enfin pas mal de trucs très pratiques et avancés c'est en fait CSS2, a mon avis tu utilises sans t'en rendre compte.

Pour les sites kooliss bah les design sont normaux selon moi, rien d'extremement technique, et c'est donc une bonne preuve que l'utilisation du html lié au css n'empeche pas la créativité, bien au contraire.

Pour ce qui est de la simplicité aparente des sites, a n'est pas dû aux css, c'est une mode, un passage ... je m'etais posé la question d'ailleur : http://www.elmoustikoblog.net/read_article.php?id=19

et les réponses à ma question semblaient abonder dans ce sens.

Pour ce qui est du xhtml, oui je n'ai pas dit qu'on ne pouvais pas separé contenu et mise en forme et respecter la sémantique en html !

Et oui tu as raison comme me l'as indiqué Laurent Denis, c'est le passage du transitionnel au strict qui permet cela. En tout cas je ne trouve pas les specs xhtml floues... on utilise juste la syntaxe xml. Autant le faire puisque le xml nous promet de belles choses et nous permet deja de belles choses.

Modifié par ElMoustiko
Lien vers le commentaire
Partager sur d’autres sites

Guest narcisse

Effectivement, hover doit être une des spécifité de CSS 2 que j'avais omis tellement c'est bien pris en compte par tous les navigateurs (du moins sur l'élément a).

Par contre, les pseudos classes, je ne connais pas bien que ce soit rapidement abordé dans CSS 1.

CSS 1 prend en compte les speudos éléments comme :

first letter que j'aime bien.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...