257
Étude de cas : Climb the Mountains
CONTENU ---------1. BODY
2. STYLES PAR DÉFAUT
3. TITRES
4. LIENS
5. IMAGES
6. MISE EN PAGE
7. LOGO/EN-TÊTE
8. NAVIGATION
9. INFO SITE/PIED DE PAGE
10. ÉLÉMENTS GLOBAUX
10.1 IMAGE À LÉGENDE
10.2 ÉLÉVATION
10.3 DISTANCE/ÉLÉVATION PARAGRAPHE
11. PAGE D’ACCUEIL
11.1 CONTENU PRINCIPAL
11.2 CONTENU SECONDAIRE
11.3 CONTENU TERTIAIRE
*/
La.présentation.exacte.de.ces.notes.dépend.de.la.personne.ou.de.l’équipe.qui.s’en.charge..
Dans.l’exemple.précédent,.j’ai.utilisé.une.structure.composée.de.retours.chariot.et.de.tabulations. pour. créer. une. table. des. matières. très. lisible.. L’important. est. de. mettre. à. jour. le.
contenu.et.d’y.revenir.chaque.fois.que.vous.ajoutez.des.règles.à.la.feuille.de.styles,.que.vous.
en.supprimez.ou.que.vous.en.déplacez..
Réinitialisation
Le.but,.avec.une.feuille.de.styles.reset.css,.est.de.constituer.une.table.nette.pour.tous.les.
navigateurs.et.périphériques..Par.exemple,.certains.navigateurs.ont.une.feuille.de.styles.par.
défaut.qui.définit.des.valeurs.de.marges,.de.remplissage,.de.tailles.de.police.pour.les.titres,.
de.hauteur.de.ligne,.etc.,.différemment.des.autres.navigateurs..
Nous.insérons.la.feuille.reset.css.dans.la.cascade.avec.la.ligne.suivante.dans.screen.css :
@import url(reset.css); /* CSS DE REINITIALISATION */
On.peut.ainsi.continuer.en.sachant.que.l’on.a.affaire.à.des.éléments.XHTML.qui.n’ont.
pas. de. marge,. pas. de. remplissage,. pas. de. hauteur. de. ligne,. pas. de. taille. de. police,. etc..
Il est. ainsi. possible. de. travailler. en. confiance. dans. screen.css,. en. appliquant. les. valeurs.
souhaitées.sans.se.soucier.du.risque.d’hériter.de.valeurs.provenant.de.la.feuille.de.styles.
du.navigateur..
Le.maître.en.CSS.Eric.Meyer.propose.ce.qu’il.appelle.un."point.de.départ,.et.non.une.boîte.
noire.autonome.à.laquelle.on.ne.touche.pas".à.l’adresse.http://meyerweb.com/eric/tools/
css/reset/..Cette.feuille.a.été.mon.point.de.départ.pour.le.site.CTM,.avec.quelques.ajustements.et.ajouts.mineurs..
Étude de cas : Climb the Mountains
CONTENU ---------1. BODY
2. STYLES PAR DÉFAUT
3. TITRES
4. LIENS
5. IMAGES
6. MISE EN PAGE
7. LOGO/EN-TÊTE
8. NAVIGATION
9. INFO SITE/PIED DE PAGE
10. ÉLÉMENTS GLOBAUX
10.1 IMAGE À LÉGENDE
10.2 ÉLÉVATION
10.3 DISTANCE/ÉLÉVATION PARAGRAPHE
11. PAGE D’ACCUEIL
11.1 CONTENU PRINCIPAL
11.2 CONTENU SECONDAIRE
11.3 CONTENU TERTIAIRE
*/
La.présentation.exacte.de.ces.notes.dépend.de.la.personne.ou.de.l’équipe.qui.s’en.charge..
Dans.l’exemple.précédent,.j’ai.utilisé.une.structure.composée.de.retours.chariot.et.de.tabulations. pour. créer. une. table. des. matières. très. lisible.. L’important. est. de. mettre. à. jour. le.
contenu.et.d’y.revenir.chaque.fois.que.vous.ajoutez.des.règles.à.la.feuille.de.styles,.que.vous.
en.supprimez.ou.que.vous.en.déplacez..
Réinitialisation
Le.but,.avec.une.feuille.de.styles.reset.css,.est.de.constituer.une.table.nette.pour.tous.les.
navigateurs.et.périphériques..Par.exemple,.certains.navigateurs.ont.une.feuille.de.styles.par.
défaut.qui.définit.des.valeurs.de.marges,.de.remplissage,.de.tailles.de.police.pour.les.titres,.
de.hauteur.de.ligne,.etc.,.différemment.des.autres.navigateurs..
Nous.insérons.la.feuille.reset.css.dans.la.cascade.avec.la.ligne.suivante.dans.screen.css :
@import url(reset.css); /* CSS DE REINITIALISATION */
On.peut.ainsi.continuer.en.sachant.que.l’on.a.affaire.à.des.éléments.XHTML.qui.n’ont.
pas. de. marge,. pas. de. remplissage,. pas. de. hauteur. de. ligne,. pas. de. taille. de. police,. etc..
Il est. ainsi. possible. de. travailler. en. confiance. dans. screen.css,. en. appliquant. les. valeurs.
souhaitées.sans.se.soucier.du.risque.d’hériter.de.valeurs.provenant.de.la.feuille.de.styles.
du.navigateur..
Le.maître.en.CSS.Eric.Meyer.propose.ce.qu’il.appelle.un."point.de.départ,.et.non.une.boîte.
noire.autonome.à.laquelle.on.ne.touche.pas".à.l’adresse.http://meyerweb.com/eric/tools/
css/reset/..Cette.feuille.a.été.mon.point.de.départ.pour.le.site.CTM,.avec.quelques.ajustements.et.ajouts.mineurs..