La mise en page : oubliez les tableaux, pensez aux feuilles de style CSS
Le CSS
A l’origine, pour résoudre les questions de mise en page, les créateurs de site avaient recours à une facilité : ils utilisaient des tableaux. Cette solution, complètement dépassée aujourd’hui, a été remplacée par le CSS.
Le CSS permet de définir toutes les propriétés de mise en page : polices utilisées, couleurs, marges, arrière-plans, positionnement et bien d’autres choses.
Le CSS s’est imposé car il présente de nombreux avantages :
- un positionnement des éléments beaucoup plus précis,
- une stricte séparation du contenu HTML et des informations de mise en page,
- une uniformisation de l’apparence du site à l’aide d’une feuille de style unique,
- un allègement considérable du code source des pages web,
- un gain de temps substantiel,
- une présentation différente selon les médias (écran, imprimante…).
Si vous doutez de la puissance du CSS, visitez donc le site Css Zen Garden. Vous constaterez que
- toutes les pages utilisent le même code source,
- leur apparence change radicalement, du fait du CSS.
Définitions
Pour rendre la couleur du texte des éléments
h1bleu, vous pouvez écrire la règle de feuille de style suivante:h1 {color: blue}
- Une règle CSS
- consiste en deux parties principales : un sélecteur
h1et une déclarationcolor: blue. Celle-ci se compose à son tour de deux parties : une propriétécoloret une valeurblue.
- Un bloc de déclaration {bloc}
- commence par une accolade gauche
{et se termine par l'accolade droite}correspondante. On doit placer entre celles-ci une liste de déclarations séparées par des points-virgules (;) ou, sinon, ne rien y mettre.- Un sélecteur
- consiste en tout ce qu'il y a jusqu'à la première accolade gauche, celle-ci exclue. Un sélecteur est toujours accompagné d'un {bloc}. Quand un agent utilisateur ne peut interpréter un sélecteur (par exemple, parce que celui-ci est invalide pour CSS2), il doit de ce fait en ignorer le {bloc}.
Source : Introduction au CSS 2
Apprendre le CSS
Le meilleur tutoriel disponible en français pour apprendre le CSS est à mon sens celui proposé par Html.net. Un autre site valable en la matière est celui de Mammouthland. Là aussi, il ne me paraît pas nécessaire de réécrire ce qui existe, dans la mesure où ces deux sites offrent des explications de qualité.
Ensuite, vous pourrez vous référer aux standards (version 2.1) rédigés par l’organisme de normalisation du web, le W3C, également traduits en français (version 2.0).
En complément, vous pourrez
- afficher les feuilles de style des sites que vous naviguez en utilisant la fonction DRAGONFLY du navigateur OPERA (Outils / avancé / outils de développeurs),
ou le module complémentaire FIREBUG du navigateur MOZILLA FIREFOX,
Video : Découvrir une feuille de style CSS OPERA DRAGONFLY
- disséquer des templates,
- Éplucher les tutoriels, les articles spécialisés et le forum d'Alsacréations. Vous y trouverez des informations pratiques qui pourraient bien répondre à vos besoins immédiats ou même vous donner des idées de présentation.
Il est en effet probable que d’autres avant vous se soient confronté aux mêmes problèmes.
Si vous vous interrogez sur le sens d’une propriété, vous pouvez également consulter l'annexe F - index des propriétés des standards.
Deux conseils gratuits :
- n’abusez pas des
<div id>qui s'appliquent à un sélecteur unique et préférez recourir à l'attributclassqui s'applique à un ensemble de sélecteurs aux propriétés identiques.Notez bien que les class peuvent se cumuler, autrement dit un élément peut se voir appliquer plusieurs class.
Exemple : Avec
<p class="intro important"></p>, il sera appliqué à ce paragraphe les propriétés CSS que vous aurez fixées pour la classe.intro(retrait, police etc.) et celles de la classe.important(exemple : couleur rouge) - ne vous acharnez pas à prévoir un design au pixel près, la présentation de votre site à l’écran dépendra aussi d’autres paramètres. (Cf. article de Laurent Denis (Openweb.eu.org) : Styles auteur, utilisateur et agent utilisateur : 3 raisons de lâcher prise sur votre design )
Le CSS, si puissant soit-il, ne dispense toutefois pas d’intégrer des images (photos ou dessins) à votre site. Comment ? C’est ce que nous allons voir dans la note suivante.