162
Maîtrise des CSS
de.motifs.dans.la.structure.de.la.page.ou.de.la.manière.dont.certains.éléments.se.répètent.
dans.l’ensemble.du.site..La.représentation.visuelle.ne.doit.pas.encore.particulièrement.vous.
préoccuper. à. ce. stade.. Intéressez-vous. plutôt. à. la. structure. et. à. la. signification.. Pour. ma.
part,.j’imprime.généralement.chaque.maquette.de.page.et.je.repère.les.motifs.puis.j’annote.
chaque.page.(voir.Figure 8.1)..J’ai.aussi.vu.certaines.personnes.annoter.directement.leurs.
fichiers.Photoshop.ou.leurs.structures.en.blocs.
Figure 8.1
Guides pour le
balisage.
Commencez.par.décomposer.vos.pages.en.leurs.principales.zones.structurelles,.comme.la.
zone.conteneur,.l’en-tête,.la.zone.de.contenu.et.le.pied.de.page..Ces.zones.restent.généralement.uniformes.dans.l’ensemble.du.site.et.ne.changent.que.rarement..Il.s’agit.en.quelque.
sorte.des.murs.externes.de.votre.bâtiment.
Ensuite,.portez.votre.attention.sur.la.zone.de.contenu.elle-même.et.commencez.à.construire.
la. structure. de. grille.. Combien. de. zones. de. contenu. différentes. y. a-t-il. et. en. quoi. diffèrent-elles ?.Les.zones.de.contenu.sont-elles.si.différentes.ou.peuvent-elles.être.traitées.de.
la.même.manière.du.point.de.vue.de.la.mise.en.page ?.La.plupart.des.mises.en.page.ne.
contiennent.que.deux.zones.de.contenu.uniques :.concentrez-vous.donc.plutôt.sur.les.points.
communs.que.sur.les.différences.visuelles..Vous.pouvez.considérer.ces.zones.de.contenu.
comme.les.murs.porteurs.à.l’intérieur.de.votre.bâtiment..
Pour.finir,.examinez.les.différentes.structures.de.mise.en.page.qui.apparaissent.dans.les.différentes.zones.de.contenu..Devez-vous.présenter.certains.types.d’informations.dans.deux,.
trois.ou.quatre.colonnes ?.À la.différence.des.précédentes,.ces.structures.de.mise.en.page.
tendent.à.être.très.flexibles.et.changent.de.page.en.page..Vous.pouvez.les.considérer.comme.
les.murs.de.cloisonnement..Combinés.avec.l’étape.précédente,.ils.aident.à.former.le.plan.
des.salles.d’un.étage.de.l’immeuble..À ce.stade,.vous.pouvez.vous.saisir.du.crayon.et.des.
marqueurs.et.commencer.à.matérialiser.plus.précisément.la.structure.et.les.dimensions.(voir.
Figure 8.2)..
Maîtrise des CSS
de.motifs.dans.la.structure.de.la.page.ou.de.la.manière.dont.certains.éléments.se.répètent.
dans.l’ensemble.du.site..La.représentation.visuelle.ne.doit.pas.encore.particulièrement.vous.
préoccuper. à. ce. stade.. Intéressez-vous. plutôt. à. la. structure. et. à. la. signification.. Pour. ma.
part,.j’imprime.généralement.chaque.maquette.de.page.et.je.repère.les.motifs.puis.j’annote.
chaque.page.(voir.Figure 8.1)..J’ai.aussi.vu.certaines.personnes.annoter.directement.leurs.
fichiers.Photoshop.ou.leurs.structures.en.blocs.
Figure 8.1
Guides pour le
balisage.
Commencez.par.décomposer.vos.pages.en.leurs.principales.zones.structurelles,.comme.la.
zone.conteneur,.l’en-tête,.la.zone.de.contenu.et.le.pied.de.page..Ces.zones.restent.généralement.uniformes.dans.l’ensemble.du.site.et.ne.changent.que.rarement..Il.s’agit.en.quelque.
sorte.des.murs.externes.de.votre.bâtiment.
Ensuite,.portez.votre.attention.sur.la.zone.de.contenu.elle-même.et.commencez.à.construire.
la. structure. de. grille.. Combien. de. zones. de. contenu. différentes. y. a-t-il. et. en. quoi. diffèrent-elles ?.Les.zones.de.contenu.sont-elles.si.différentes.ou.peuvent-elles.être.traitées.de.
la.même.manière.du.point.de.vue.de.la.mise.en.page ?.La.plupart.des.mises.en.page.ne.
contiennent.que.deux.zones.de.contenu.uniques :.concentrez-vous.donc.plutôt.sur.les.points.
communs.que.sur.les.différences.visuelles..Vous.pouvez.considérer.ces.zones.de.contenu.
comme.les.murs.porteurs.à.l’intérieur.de.votre.bâtiment..
Pour.finir,.examinez.les.différentes.structures.de.mise.en.page.qui.apparaissent.dans.les.différentes.zones.de.contenu..Devez-vous.présenter.certains.types.d’informations.dans.deux,.
trois.ou.quatre.colonnes ?.À la.différence.des.précédentes,.ces.structures.de.mise.en.page.
tendent.à.être.très.flexibles.et.changent.de.page.en.page..Vous.pouvez.les.considérer.comme.
les.murs.de.cloisonnement..Combinés.avec.l’étape.précédente,.ils.aident.à.former.le.plan.
des.salles.d’un.étage.de.l’immeuble..À ce.stade,.vous.pouvez.vous.saisir.du.crayon.et.des.
marqueurs.et.commencer.à.matérialiser.plus.précisément.la.structure.et.les.dimensions.(voir.
Figure 8.2)..