Accueil

Tutoriaux - Créer une charte graphique

Uniquement avec des feuilles de style

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 1

Elément 2

Elément 3

Elément 4

Elément 5

Elément 6

Elément 7

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.

ID ou CLASS tel est la question ?

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

Haut de page