228
Maîtrise des CSS
Utilisation des grilles pour la conception web
Les.grilles.sont.utilisées.en.conception.graphique.depuis.des.décennies,.mais.ce.n’est.qu’au.
cours.des.dernières.années.qu’elles.ont.véritablement.reçu.les.faveurs.des.concepteurs.web.
–.et,.enfin,.pour.de.bonnes.raisons..Wikipédia.propose.une.description.succincte.de.la.grille.
et.de.ses.mérites :."Une.grille.topographique.est.une.structure.à.deux.dimensions.constituée. d’une. série. d’axes. verticaux. et. horizontaux. entrecroisés. utilisée. pour. structurer. du.
contenu..La.grille.est.utilisée.comme.une.armature.sur.laquelle.le.concepteur.peut.organiser.
le. texte. et. les. images. de. manière. rationnelle. et. intuitive". (http://en.wikipedia.org/wiki/
Grid_(page_layout)).
Les.grilles.sont.composées.d’éléments.tels.que.des.colonnes,.des.lignes,.des.marges,.des.
gouttières.(l’espace.entre.les.colonnes.ou.entre.les.lignes),.de.lignes.de.flux.(les.divisions.
horizontales).et.d’autres.composants..Sur.un.support.comme.le.papier,.la.largeur.et.la.hauteur.de.chacun.de.ces.composants.sont.liées.à.la.taille.finale.du.document ;.les.dimensions.
peuvent. aisément. être. calculées. par. le. graphiste.. Dans. le. cas. de. la. conception. web,. les.
dimensions.de.largeur.sont.plus.simples.à.calculer.que.les.dimensions.de.hauteur,.les.pages.
étant.par.nature.amenées.à.défiler.
L’armature.du.site.Roma.Italia.se.focalise.donc.sur.les.divisions.verticales..La.Figure 10.2.
présente.la.grille.du.site..
Figure 10.2
La grille à 12 divisions utilisée pour concevoir le site.
Vous.pouvez.activer.et.désactiver.cette.grille.en.commentant.et.décommentant.les.balises.
suivantes :
bug.pour.Firefox.(http://getfirebug.com/).qui.permet.de.modifier.temporairement.le.balisage. du. document. dans. le. navigateur.. Lorsque. Firebug. est. ouvert,. double-cliquez. sur. la.
balise.body.pour.révéler.le.commentaire.et.éditer.le.code.HTML.directement.à.cet.endroit.
dans.Firebug.
Maîtrise des CSS
Utilisation des grilles pour la conception web
Les.grilles.sont.utilisées.en.conception.graphique.depuis.des.décennies,.mais.ce.n’est.qu’au.
cours.des.dernières.années.qu’elles.ont.véritablement.reçu.les.faveurs.des.concepteurs.web.
–.et,.enfin,.pour.de.bonnes.raisons..Wikipédia.propose.une.description.succincte.de.la.grille.
et.de.ses.mérites :."Une.grille.topographique.est.une.structure.à.deux.dimensions.constituée. d’une. série. d’axes. verticaux. et. horizontaux. entrecroisés. utilisée. pour. structurer. du.
contenu..La.grille.est.utilisée.comme.une.armature.sur.laquelle.le.concepteur.peut.organiser.
le. texte. et. les. images. de. manière. rationnelle. et. intuitive". (http://en.wikipedia.org/wiki/
Grid_(page_layout)).
Les.grilles.sont.composées.d’éléments.tels.que.des.colonnes,.des.lignes,.des.marges,.des.
gouttières.(l’espace.entre.les.colonnes.ou.entre.les.lignes),.de.lignes.de.flux.(les.divisions.
horizontales).et.d’autres.composants..Sur.un.support.comme.le.papier,.la.largeur.et.la.hauteur.de.chacun.de.ces.composants.sont.liées.à.la.taille.finale.du.document ;.les.dimensions.
peuvent. aisément. être. calculées. par. le. graphiste.. Dans. le. cas. de. la. conception. web,. les.
dimensions.de.largeur.sont.plus.simples.à.calculer.que.les.dimensions.de.hauteur,.les.pages.
étant.par.nature.amenées.à.défiler.
L’armature.du.site.Roma.Italia.se.focalise.donc.sur.les.divisions.verticales..La.Figure 10.2.
présente.la.grille.du.site..
Figure 10.2
La grille à 12 divisions utilisée pour concevoir le site.
Vous.pouvez.activer.et.désactiver.cette.grille.en.commentant.et.décommentant.les.balises.
suivantes :
bug.pour.Firefox.(http://getfirebug.com/).qui.permet.de.modifier.temporairement.le.balisage. du. document. dans. le. navigateur.. Lorsque. Firebug. est. ouvert,. double-cliquez. sur. la.
balise.body.pour.révéler.le.commentaire.et.éditer.le.code.HTML.directement.à.cet.endroit.
dans.Firebug.