CSS 2 – Pratique du design web
© Groupe Eyrolles, 2005
XVI
Structure de l’en-tête . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Mise en forme CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Style du conteneur général . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Style de l’image décorative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Style du titre général . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Style du slogan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
CHAPITRE 17
Concevoir les éléments de navigation..................................... 215
Les moyens de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Le menu général . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Le plan du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Un moteur de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Les accès rapides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Les liens d’évitement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Un fil d’Ariane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Une Foire aux Questions (FAQ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Le retour en haut de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Les liens internes, les ancres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Un menu thématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Réalisation pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Le menu horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Le menu vertical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Le formulaire de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
CHAPITRE 18
Insérer le contenu du document .............................................. 225
Structure générale du contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Titres et sous-titres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Encart des événements récents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Contenu textuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Bilan sur les codes utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
CHAPITRE 19
Aller plus loin avec les CSS ....................................................... 237
Insérer du contenu dynamiquement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Proposer des styles alternatifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Proposer une version imprimable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
© Groupe Eyrolles, 2005
XVI
Structure de l’en-tête . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Mise en forme CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Style du conteneur général . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Style de l’image décorative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Style du titre général . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Style du slogan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
CHAPITRE 17
Concevoir les éléments de navigation..................................... 215
Les moyens de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Le menu général . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Le plan du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Un moteur de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Les accès rapides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Les liens d’évitement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Un fil d’Ariane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Une Foire aux Questions (FAQ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Le retour en haut de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Les liens internes, les ancres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Un menu thématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Réalisation pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Le menu horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Le menu vertical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Le formulaire de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
CHAPITRE 18
Insérer le contenu du document .............................................. 225
Structure générale du contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Titres et sous-titres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Encart des événements récents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Contenu textuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Bilan sur les codes utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
CHAPITRE 19
Aller plus loin avec les CSS ....................................................... 237
Insérer du contenu dynamiquement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Proposer des styles alternatifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Proposer une version imprimable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239