Les CSS par l'exemple
Par Mox Folder le jeudi, avril 10 2008, 06:00 - Design - Lien permanent
Dans mon entourage professionnel, des graphistes print totalement étrangers au design web me demandent régulièrement de leur expliquer brièvement comment créer des pages web, c'est quoi le HTML, etc. La question qui revient le plus souvent c'est de savoir si avec Dreamweaver on peut créer un site Internet sans connaitre le HTML. Là, ma réponse est systématiquement la même : Oubliez Dreamweaver !!!
. En effet le logiciel de feu-Macromedia est devenu une telle usine à gaz, que si on veut apprendre à faire du web c'est sûrement pas par là qu'il faut commencer. Un graphiste pense souvent à tort que s'il maitriste Quark X-Press ou InDesign sur le bout des ongles, il peut donc se familiariser en quelques heures avec Dreamweaver et arriver à produire des page web.
Alors, oui il y arrivera sûrement avec un peu de détermination - après tout un logiciel reste un logiciel. Cependant je ne pense pas que ce soit la bonne solution.
Back to Basics
Comme pour tout, il faut revenir aux basics, on ne se met pas à résoudre des équations si on ne connaît pas les principes élémentaires d'algèbre. La plupart des graphistes print voudraient résoudre leur équation sans même apprendre à compter, la première vérité c'est qu'il ne veulent pas mettre les mains dans le cambouis... tellement habitués qu'ils sont au confort de leur interface WYSIWYG... alors que dans le fond il y a peu de différence entre une page Quark X-Press et un fichier HTML. La seconde vérité c'est que ÉNORMÉMENT de graphistes ont trop peu de méthodologie, genre les feuilles de style j'en ai entendu parler, je sais ce que c'est, je sais que c'est utile mais je m'en sers jamais
, pire ... je ne sais pas m'en servir
.
Parti de là, on comprend bien vite que parler à un artiste graphiste de balisage de texte ça va vite le barber. Pourtant, qu'on face de la PAO (avec X-Press ou InDesign), du traitement de texte (avec Word), ou encore qu'on face du HTML on fait tous du balisage de texte. Quand je slectionne un mot (au passage je vous rappelle des raccourcis bien pratiques ;o) et que je clique sur B
pour le mettre en Bold
je fais du balisage de texte, de même que lorsque j'enveloppe un mot d'une d'une balise <strong>
.
CSS
Ce qu'il faut donc retenir de cette longue mais nécessaire introduction c'est qu'une page HTML n'est plus ni moins qu'un agencement d'éléments dans un page. Sur X-Press ou InDesign on agencera sa page par boites (box) alors qu'en HTML agencera sa page par balises. Dans les 2 cas on stylisera sa page grâce et des feuilles des style.
En HTML, les feuilles sont ce qu'on appelle CSS pour Cascading Style Sheet et ce qui est vraiment tripant par rapport à de la mise en page traditionnelle (traitement de texte ou PAO) c'est que c'est beaucoup plus puissant. Alors que dans les logiciels de mise en page traditionnels les feuilles de style n'agissent que sur le texte (ou presque). En HTML avec les CSS on peut paramétrer tous les éléments qui servent de balise, que ce soit un <DIV> (l'équivalent d'une boite) ou un <EM> (l'équivalent de l'italique - pour qui par exemple on peut attribuer un autre style que l'italique pour les esprits les plus tordus).
Bref tout ça c'est bien théorique, en fait plutôt que tout ce blabla j'aurais bien pu me contenter de ces derniers mots. Je vais donc conclure par un exemple des plus parlant, avec une représentation de diagrammes uniquement en CSS et HTML. Sur l'image ci dessous à gauche, la mise en page en HTML sans style, à droite la même mis en page HTML avec les styles appliqués.

Voir le code associé et toute l'explication sur le blog de l'auteur de cette démonstration.
Commentaires