Il est désormais possible de créer des chartes graphiques uniquement grâce aux CSS et c'est même conseillé d'utiliser cette méthode si vous utiliser le XHTML ou le XML.
Objectif principal, séparer le contenu du visuel, alléger le poids des fichiers.
Pour cela, je vous propose une méthode simple à suivre pour créer un style graphique en CSS.
La méthode que je vais vous présenté n'est peut-être pas forcement la
meilleure, mais au moins elle fonctionne, le principe c'est de penser
en ligne, je m'explique, pour déterminer
chaque éléments,
et son contenu, il faut travailler par une succession de zones, sachant
qu'une zone peut contenir plusieurs éléments.
Une zone représente une partie de l'aspect visuel de votre page
tel que l'entête, la partie centrale, le pied de page...
, en règle
générale
elle est invisible et, elle ne sert qu'a délimiter son contenu.
La balise à utiliser est : <div id="nom de la zone">...</div>
zone 1 |
zone 2 |
... |
NB : je recommande l'utilisation d'une ID plutôt qu'une classe pour
ces balises parce qu'elle ne risque pas de se répéter plusieurs fois
dans la page.
Sachez également que suivant le type de mise en page voulu, on peut s'en
passer.
Dans une zone on peut donc trouver un ou plusieurs éléments
servant à placer
le logo,un élément graphique, du texte, une image...
Les balises à utiliser sont : DIV,
P, H1 à H6, UL, OL, TABLE, PRE, etc..
|
|||
|
|||
|
|||
Elément 8 | |||
... |
La disposition d'un ou plusieurs éléments dans une zone est déterminé
par deux choses, la premières, si c'est une élément de la charte graphique
du
site (logo,
colonne pour le menu...) ou de son positionnement et la seconde si ça
concerne le contenu du site (textes, images).
Sachez qu'il est tout à fait possible de créer des colonnes avec une
simple balise P et
une classe dans une feuille de style.
Voici un exemple de code HTML pour créer une mise en page :
<div id="conteneur"> <div id="entete"> <div>entête 1</div> <div>entête 2</div> </div> <div id="centre"> <div id="menu">le menu</div> <div id="corps">zone de contenu</div> </div> <div id="bas">bas de page</div> </div>
Vous avez ici trois zones plus une zone globale, le Conteneur, qui sert à la définition de la page (hauteur, largeur, alignement).
A ce stade, le code ne sert strictement à rien si vous ne lui associez pas une feuille de style.
#conteneur, #entete, #centre, #bas width: 760px; margin: 0; padding: 0; } #entete { height: 40px; } #centre { height: 350px; padding: 2px; } #menu { width: 150px; height: 340px; float: left; } #corps { width: 599px; height: 340px; float: left; margin-left: 5px; padding-left: 5px; } #bas { height: 20px; border: 1px solid red; }
Voir l'exemple
Voici d'autres exemples de mise en page grâce au XHTML et aux CSS :
Vous découvrirez vite en utilisant cette méthode, qu'il est possible de créer de nombreuses variations en fonctions de ses besoins.
Je ne vais pas dire que cette méthode est la plus simple, elle nécessite de nombreux balbutiements avant d'arriver au résultat escompté, mais sont grand avantage c'est la possibiliter de changer le visuelle d'un site uniquement en changeant la feuille de style. Fini le temps ou il fallait modifier toutes les pages d'un site pour changer sont aspect visuel, désormais un seule fichier est à corriger.
Lors de la déclaration d'un style vous avez le choix entre ID ou CLASS.
Les deux peuvents être inséré dans une balise mais l'ID ne doit en aucun
cas être déclaré plus d'une fois.
En effet, une ID est unique au contraire d'une classe qui peut se répéter
plusieurs fois.
Lors de l'attribution des ID et des CLASS aux différentes balises
de votre page, vérifiez bien que chaque ID est unique. Si ce n'est
pas le cas, vous devrez peut-être la changer en CLASS.
Pour en savoir plus sur les CSS, cliquez ici