L’un.des.principaux.intérêts.des.CSS.tient.à.ce.qu’elles.permettent.de.contrôler.la.mise.en.
page.sans.utiliser.de.balise.de.présentation.dans.le.code.HTML..Les.mises.en.page.CSS.ont.
cependant.la.réputation.d’être.difficiles,.notamment.pour.les.débutants..Cette.réputation.est.
due,.en.partie,.au.manque.d’uniformité.dans.le.traitement.des.navigateurs,.mais.surtout.à.
la.prolifération.des.différentes.techniques.de.mise.en.page.disponibles.sur.le.Web..Chaque.
auteur.CSS.semble.avoir.adopté.sa.manière.de.faire.pour.les.mises.en.page.multicolonnes.
et.les.nouveaux.développeurs.CSS.reprennent.bien.souvent.des.techniques.sans.vraiment.
comprendre.ce.qu’ils.font..Cette.situation.a.empiré.avec.l’arrivée.des.frameworks CSS,.qui.
visent.à.faciliter.la.mise.en.page.CSS.en.créant.un.couplage.étroit.entre.le.balisage.et.la.présentation.–.le.défaut.même.qui.nous.avait.pourtant.poussés.à.abandonner.les.mises.en.page.
à.tableaux..Cette.façon.de.traiter.les.CSS.comme.une.boîte.noire.peut.avoir.son.efficacité.s’il.
s’agit.d’obtenir.des.résultats.rapides,.mais.elle.empêche,.en.fin.de.compte,.le.développeur.de.
comprendre.le.langage.et.d’appliquer.des.modifications..
Toutes.ces.techniques.de.mise.en.page.CSS.s’appuient.sur.trois.concepts.élémentaires :.le.
positionnement,.le.flottement.et.la.manipulation.des.marges..Ces.techniques.ne.diffèrent.pas.
tant.que.cela.et,.si.vous.saisissez.les.concepts.essentiels,.vous.créerez.assez.facilement.vos.
propres.mises.en.page..En.fait,.la.mise.en.page.est.bien.souvent.la.partie.la.plus.simple.des.
CSS..Ce.sont.toutes.les.opérations.d’ajustement.qui.prennent.du.temps..
Au.cours.de.ce.chapitre,.vous.apprendrez.à :
•. centrer.horizontalement.une.mise.en.page.dans.le.navigateur ;.
•. créer.des.mises.en.page.à.deux.ou.trois.colonnes.flottantes ;
•. créer.des.mises.en.page.à.largeur.fixe,.liquides.et.élastiques ;
•. créer.des.colonnes.de.hauteurs.égales ;.
•. comparer.les.frameworks.CSS.et.les.systèmes.CSS.
Planification de la mise en page
Au.moment.de.transformer.les.maquettes.graphiques.en.pages.entièrement.fonctionnelles,.
il.peut.être.très.tentant.de.se.jeter.directement.à.l’eau.et.de.commencer.à.placer.des.balises.
dans.une.page.ou.à.découper.des.images..On.se.retrouve.cependant.vite.coincé..Il.est.préférable,.en.réalité,.de.prendre.quelques.instants.pour.se.charger.de.la.planification.afin.d’éviter.
bien.des.soucis.par.la.suite..C’est.le.dicton.des.couturières :."On.peut.mesurer.deux.fois,.
mais.on.ne.coupe.qu’une.seule.fois."
La.première.étape.pour.créer.un.système.CSS.évolutif.et.facile.à.gérer.consiste.à.examiner.les.maquettes.graphiques.afin.d’y.rechercher.des.motifs.qui.se.répètent..Il.peut.s’agir.
Mise en page
8
page.sans.utiliser.de.balise.de.présentation.dans.le.code.HTML..Les.mises.en.page.CSS.ont.
cependant.la.réputation.d’être.difficiles,.notamment.pour.les.débutants..Cette.réputation.est.
due,.en.partie,.au.manque.d’uniformité.dans.le.traitement.des.navigateurs,.mais.surtout.à.
la.prolifération.des.différentes.techniques.de.mise.en.page.disponibles.sur.le.Web..Chaque.
auteur.CSS.semble.avoir.adopté.sa.manière.de.faire.pour.les.mises.en.page.multicolonnes.
et.les.nouveaux.développeurs.CSS.reprennent.bien.souvent.des.techniques.sans.vraiment.
comprendre.ce.qu’ils.font..Cette.situation.a.empiré.avec.l’arrivée.des.frameworks CSS,.qui.
visent.à.faciliter.la.mise.en.page.CSS.en.créant.un.couplage.étroit.entre.le.balisage.et.la.présentation.–.le.défaut.même.qui.nous.avait.pourtant.poussés.à.abandonner.les.mises.en.page.
à.tableaux..Cette.façon.de.traiter.les.CSS.comme.une.boîte.noire.peut.avoir.son.efficacité.s’il.
s’agit.d’obtenir.des.résultats.rapides,.mais.elle.empêche,.en.fin.de.compte,.le.développeur.de.
comprendre.le.langage.et.d’appliquer.des.modifications..
Toutes.ces.techniques.de.mise.en.page.CSS.s’appuient.sur.trois.concepts.élémentaires :.le.
positionnement,.le.flottement.et.la.manipulation.des.marges..Ces.techniques.ne.diffèrent.pas.
tant.que.cela.et,.si.vous.saisissez.les.concepts.essentiels,.vous.créerez.assez.facilement.vos.
propres.mises.en.page..En.fait,.la.mise.en.page.est.bien.souvent.la.partie.la.plus.simple.des.
CSS..Ce.sont.toutes.les.opérations.d’ajustement.qui.prennent.du.temps..
Au.cours.de.ce.chapitre,.vous.apprendrez.à :
•. centrer.horizontalement.une.mise.en.page.dans.le.navigateur ;.
•. créer.des.mises.en.page.à.deux.ou.trois.colonnes.flottantes ;
•. créer.des.mises.en.page.à.largeur.fixe,.liquides.et.élastiques ;
•. créer.des.colonnes.de.hauteurs.égales ;.
•. comparer.les.frameworks.CSS.et.les.systèmes.CSS.
Planification de la mise en page
Au.moment.de.transformer.les.maquettes.graphiques.en.pages.entièrement.fonctionnelles,.
il.peut.être.très.tentant.de.se.jeter.directement.à.l’eau.et.de.commencer.à.placer.des.balises.
dans.une.page.ou.à.découper.des.images..On.se.retrouve.cependant.vite.coincé..Il.est.préférable,.en.réalité,.de.prendre.quelques.instants.pour.se.charger.de.la.planification.afin.d’éviter.
bien.des.soucis.par.la.suite..C’est.le.dicton.des.couturières :."On.peut.mesurer.deux.fois,.
mais.on.ne.coupe.qu’une.seule.fois."
La.première.étape.pour.créer.un.système.CSS.évolutif.et.facile.à.gérer.consiste.à.examiner.les.maquettes.graphiques.afin.d’y.rechercher.des.motifs.qui.se.répètent..Il.peut.s’agir.
Mise en page
8