CSS 2 : pratique du design web

Les feuilles de style CSS, dont la norme actuelle est CSS 2, sont l'un des gages de qualit de toute conception web moderne : on peut grce elles crer des sites lgants et lgers, conformes aux standards du Web et accessibles tous.La normalisation des langages HTML, XHTML et CSS permet peu peu de s'assurer de l'universalit des documents web et il est devenu capital de concevoir des sites compatibles tous navigateurs et sparant parfaitement le contenu de la prsentation.Ce livre explique sans dtours comment concevoir en XHTML et CSS des sites web modernes et accessibles tous, fonctionnant aussi bien sous Internet Explorer que Mozilla Firefox, Opera, Safari et autres navigateurs conformes. Il aborde les grands classiques de la conception de feuilles de style CSS et leurs problmatiques concrtes : flux et positionnement (suppression des tableaux), prchargement, priorit de dclaration de classes CSS, gestion de la couleur, typographie, bordures et arrire-plan, menus et images ractives, cadres, etc. Plusieurs variantes sont proposes, ainsi que la manire de contourner les bogues des navigateurs (commentaires conditionnels, comportement Haslayout...). Des exemples de gabarits prts l'emploi sont donns en fin d'ouvrage ainsi qu'une liste des proprits CSS et un comparatif par navigateur des limites d'interprtation de ces proprits.Cette troisime dition mise jour tient compte des nouveauts dans la prise en charge des CSS par les navigateurs Internet Explorer 8 et Firefox 3. qui s'adresse cet ouvrage ?- tous les concepteurs de sites souhaitant passer aux feuilles de style CSS et rendre leur site conforme ; - Aux webmestres professionnels cherchant une rfrence pratique sur les CSS. 2e édition Préface 7 Table des matières 11 Avant-propos 21 Les CSS, technique incontournable du design web 21 Pourquoi ce livre ? 22 Ce livre ne va pas vous mentir 23 À qui s’adresse cet ouvrage ? 24 Périmètre de l’ouvrage 25 Structure de l’ouvrage 25 Mises à jour de la seconde édition 26 Remerciements 27 PREMIÈRE PARTIE - Standards HTML et XHTML : quelle différence ? 28 1 - Le W3C et les standards du Web 30 Ce qui fait tourner le Web en coulisses : les standards 31 Les navigateurs parlent la même langue 32 Pour un Web accessible à tous 34 En résumé : avantages des standards et d’une sémantique sur le Web 37 HTML ou XHTML ? 40 Syntaxe générale du XHTML 40 Indiquer la grammaire au navigateur 41 Indiquer la langue et l’encodage du document : lang et charset 42 Valider son site avec le W3C 43 Testez vos connaissances 46 2 - Séparer le fond et la forme avec HTML et CSS 48 La base du HTML : les balises 49 Les attributs 50 L’imbrication des éléments 50 La structure des éléments 51 Les éléments en ligne 54 Les éléments de type bloc 54 Les principales balises HTML standards 55 Séparer le contenu de la mise en forme 58 DEUXIÈME PARTIE - Les feuilles de styles CSS 64 3 - Introduction aux feuilles de styles CSS 66 Table des matières 11 Présentation 66 La syntaxe de base des CSS 68 Appliquer les styles CSS 69 Insérer des styles dans l’en-tête du document 69 Lier les styles à partir d’une feuille séparée 69 Incorporer les styles dans la balise 72 Les sélecteurs de styles 73 Syntaxes de regroupements 77 Les sélecteurs et l’arborescence 78 Mise en situation 84 4 - Gestion de la couleur en CSS 86 Harmonie des couleurs 87 La couleur et le thème du site 87 Choisir des couleurs harmonieuses 90 Représentation de la couleur 91 L’espace de couleurs RGB 91 La notation RGB 92 La notation hexadécimale 92 La notation hexadécimale courte 93 Les mots-clés de couleurs 93 Tableau récapitulatif 93 Quelques ressources sur le Web 94 Application pratique 95 5 - La typographie et la mise en forme de caractères 96 Les polices de caractères 96 Polices standards et exotiques 97 Les unités de taille de polices 101 Styles et effets sur les caractères 104 Les styles et effets sur les mots et paragraphes 107 La notation raccourcie 109 Application pratique 110 6 - Les bordures, arrière-plans et images 112 Mettre en forme les bordures 112 Les différents styles de bordures 112 L’épaisseur des bordures 114 La couleur des bordures 114 Notation raccourcie 115 Applications pratiques 115 Arrière-plans et images de fond 117 Application pratique 122 7 - Le positionnement en CSS 124 Introduction au positionnement en CSS 124 Comprendre le modèle de boîte 125 Les dimensions des boîtes 126 Différents modèles de boîtes 126 Éléments ancêtres, parents, enfants et frères 129 Comprendre la notion de flux du document 130 Positionner les éléments en CSS 131 Positionner dans le flux courant 131 Le positionnement relatif 134 Les positionnements absolu et fixe 135 Le positionnement flottant 141 Quel positionnement adopter ? 146 Quand positionner dans le flux ? 146 Quand positionner en relatif ? 146 Quand positionner en absolu ou en fixe ? 147 Quand positionner en flottant ? 147 Tableau récapitulatif 148 Application pratique 148 TROISIÈME PARTIE - Travaux pratiques 150 8 - Centrage des éléments en CSS 152 Centrage des éléments de contenu 152 Centrage horizontal des éléments de contenu 153 Centrage vertical des éléments de contenu 154 Centrage des blocs et conteneurs 155 Centrage horizontal des conteneurs 155 Centrage vertical des conteneurs 159 Application pratique 160 9 - Précharger des images 162 Principe et utilité 162 Masquer les images 163 Application à une image 163 Application à un ensemble d’images 163 L’affichage hors de la zone de visualisation 164 Accessibilité de ces techniques 166 Application pratique 167 10 - Lettrines 168 Méthode standard : le pseudo-élément :first-letter 168 Variante pour anciens navigateurs 171 Application pratique 174 11 - Afficher et masquer 176 Les comportements dynamiques en CSS 176 Afficher et masquer des éléments 177 Limitations dues aux navigateurs 177 Première application pratique 177 Autres applications et perspectives 180 Commenter le survol des menus 180 Des infobulles personnalisées 182 Légender le survol de photos 183 Application pratique 185 12 - Construire un menu en CSS 186 Les différents systèmes de navigation 186 Utilisation de listes non ordonnées 187 Créer un menu vertical 188 Créer un menu sous forme de boutons 191 Produire un effet de relief sur les boutons 193 Créer un menu horizontal 195 Alignement avec la propriété display 196 Alignement avec la propriété float 197 Créer un menu avec puces 198 Puces graphiques personnalisées 198 Recourir aux images d’arrière-plan 199 Pour aller plus loin 200 Application pratique 201 13 - Images réactives et menus graphiques 204 Une image réactive : première méthode 204 Accessibilité de cette technique 205 Temps de latence et préchargement 207 Une image réactive : seconde méthode 208 Application à un menu graphique 210 Application pratique 215 14 - Créer un cadre arrondi 216 Principe et méthodologie 216 Cadre de largeur fixe 217 Variante : habillage d’un menu 219 Variante : emploi des pseudo-éléments before et after 220 Cadre élastique dans les deux dimensions 222 Application pratique 225 QUATRIÈME PARTIE - Mise en oeuvre dans un projet professionnel 226 15 - Méthodologie générale 228 Un site compatible avec tous les navigateurs 228 Un travail en trois étapes et tester sous tous les navigateurs 229 Méthodologie de correction de bogues 230 Internet Explorer et le Haslayout 231 Les commentaires conditionnels 232 Mise en page de base ou gabarit 233 Présentation du projet professionnel 234 16 - En-tête du document 236 Découpe et préparation 236 Un astucieux décor 236 Contenu de l’en-tête 237 Réalisation pratique 237 Structure du document 237 Structure de l’en-tête 238 Mise en forme CSS 239 17 - Concevoir les éléments de navigation 242 Les moyens de navigation 242 Le menu général 243 Le plan du site 243 Un moteur de recherche 243 Les accès rapides 243 Les liens d’évitement 243 Un fil d’Ariane 243 Une Foire aux Questions (FAQ) 244 Le retour en haut de page 244 Les liens internes, les ancres 244 Un menu thématique 245 Réalisation pratique 245 Le menu horizontal 246 Le menu vertical 247 Le formulaire de recherche 250 18 - Insérer le contenu du document 252 Structure générale du contenu 252 Titres et sous-titres 254 Encart des événements récents 254 Contenu textuel 257 Bilan sur les codes utilisés 257 19 - Aller plus loin avec les CSS 264 Insérer du contenu dynamiquement 264 Proposer des styles alternatifs 265 Proposer une version imprimable 266 Internet Explorer 7 et les CSS 267 Conclusion 268 ANNEXES - Sites et ressources 270 A - Liste des propriétés CSS 272 B - Exemples de gabarits 286 Gabarit à deux colonnes et de largeur fixe 287 Gabarit à deux colonnes et de largeur adaptable 290 Gabarit à trois colonnes et de largeur fixe 292 C - Ressources sur le Web 296 Sites en français 296 Sites en anglais 298 Blogs, carnets et magazines web 299 Galerie de sites en CSS 301 D - Les sites professionnels conformes 304 Sites en français 304 Sites en anglais 306 E - Bibliographie 310 Livres en français 310 Livres en anglais 311 F - Compatibilité des navigateurs 312 Interprétation des tableaux 312 Apports de la version web 313 Navigateurs étudiés 313 Version détaillée 313 Notation des fonctionnalités 314 HTML 314 CSS 317 DOM 323 Divers 327 Bilan 329 Webographie 330 Autres navigateurs 330 Mentions légales 331 Index 332 Préface......Page 7 Table des matières......Page 11 Les CSS, technique incontournable du design web......Page 21 Pourquoi ce livre ?......Page 22 Ce livre ne va pas vous mentir......Page 23 À qui s’adresse cet ouvrage ?......Page 24 Structure de l’ouvrage......Page 25 Mises à jour de la seconde édition......Page 26 Remerciements......Page 27 PREMIÈRE PARTIE - Standards HTML et XHTML : quelle différence ?......Page 28 1 - Le W3C et les standards du Web......Page 30 Ce qui fait tourner le Web en coulisses : les standards......Page 31 Les navigateurs parlent la même langue......Page 32 Pour un Web accessible à tous......Page 34 En résumé : avantages des standards et d’une sémantique sur le Web......Page 37 Syntaxe générale du XHTML......Page 40 Indiquer la grammaire au navigateur......Page 41 Indiquer la langue et l’encodage du document : lang et charset......Page 42 Valider son site avec le W3C......Page 43 Testez vos connaissances......Page 46 2 - Séparer le fond et la forme avec HTML et CSS......Page 48 La base du HTML : les balises......Page 49 L’imbrication des éléments......Page 50 La structure des éléments......Page 51 Les éléments de type bloc......Page 54 Les principales balises HTML standards......Page 55 Séparer le contenu de la mise en forme......Page 58 DEUXIÈME PARTIE - Les feuilles de styles CSS......Page 64 Présentation......Page 66 La syntaxe de base des CSS......Page 68 Lier les styles à partir d’une feuille séparée......Page 69 Incorporer les styles dans la balise......Page 72 Les sélecteurs de styles......Page 73 Syntaxes de regroupements......Page 77 Les sélecteurs et l’arborescence......Page 78 Mise en situation......Page 84 4 - Gestion de la couleur en CSS......Page 86 La couleur et le thème du site......Page 87 Choisir des couleurs harmonieuses......Page 90 L’espace de couleurs RGB......Page 91 La notation hexadécimale......Page 92 Tableau récapitulatif......Page 93 Quelques ressources sur le Web......Page 94 Application pratique......Page 95 Les polices de caractères......Page 96 Polices standards et exotiques......Page 97 Les unités de taille de polices......Page 101 Styles et effets sur les caractères......Page 104 Les styles et effets sur les mots et paragraphes......Page 107 La notation raccourcie......Page 109 Application pratique......Page 110 Les différents styles de bordures......Page 112 La couleur des bordures......Page 114 Applications pratiques......Page 115 Arrière-plans et images de fond......Page 117 Application pratique......Page 122 Introduction au positionnement en CSS......Page 124 Comprendre le modèle de boîte......Page 125 Différents modèles de boîtes......Page 126 Éléments ancêtres, parents, enfants et frères......Page 129 Comprendre la notion de flux du document......Page 130 Positionner dans le flux courant......Page 131 Le positionnement relatif......Page 134 Les positionnements absolu et fixe......Page 135 Le positionnement flottant......Page 141 Quand positionner en relatif ?......Page 146 Quand positionner en flottant ?......Page 147 Application pratique......Page 148 TROISIÈME PARTIE - Travaux pratiques......Page 150 Centrage des éléments de contenu......Page 152 Centrage horizontal des éléments de contenu......Page 153 Centrage vertical des éléments de contenu......Page 154 Centrage horizontal des conteneurs......Page 155 Centrage vertical des conteneurs......Page 159 Application pratique......Page 160 Principe et utilité......Page 162 Application à un ensemble d’images......Page 163 L’affichage hors de la zone de visualisation......Page 164 Accessibilité de ces techniques......Page 166 Application pratique......Page 167 Méthode standard : le pseudo-élément :first-letter......Page 168 Variante pour anciens navigateurs......Page 171 Application pratique......Page 174 Les comportements dynamiques en CSS......Page 176 Première application pratique......Page 177 Commenter le survol des menus......Page 180 Des infobulles personnalisées......Page 182 Légender le survol de photos......Page 183 Application pratique......Page 185 Les différents systèmes de navigation......Page 186 Utilisation de listes non ordonnées......Page 187 Créer un menu vertical......Page 188 Créer un menu sous forme de boutons......Page 191 Produire un effet de relief sur les boutons......Page 193 Créer un menu horizontal......Page 195 Alignement avec la propriété display......Page 196 Alignement avec la propriété float......Page 197 Puces graphiques personnalisées......Page 198 Recourir aux images d’arrière-plan......Page 199 Pour aller plus loin......Page 200 Application pratique......Page 201 Une image réactive : première méthode......Page 204 Accessibilité de cette technique......Page 205 Temps de latence et préchargement......Page 207 Une image réactive : seconde méthode......Page 208 Application à un menu graphique......Page 210 Application pratique......Page 215 Principe et méthodologie......Page 216 Cadre de largeur fixe......Page 217 Variante : habillage d’un menu......Page 219 Variante : emploi des pseudo-éléments before et after......Page 220 Cadre élastique dans les deux dimensions......Page 222 Application pratique......Page 225 QUATRIÈME PARTIE - Mise en oeuvre dans un projet professionnel......Page 226 Un site compatible avec tous les navigateurs......Page 228 Un travail en trois étapes et tester sous tous les navigateurs......Page 229 Méthodologie de correction de bogues......Page 230 Internet Explorer et le Haslayout......Page 231 Les commentaires conditionnels......Page 232 Mise en page de base ou gabarit......Page 233 Présentation du projet professionnel......Page 234 Un astucieux décor......Page 236 Structure du document......Page 237 Structure de l’en-tête......Page 238 Mise en forme CSS......Page 239 Les moyens de navigation......Page 242 Un fil d’Ariane......Page 243 Les liens internes, les ancres......Page 244 Réalisation pratique......Page 245 Le menu horizontal......Page 246 Le menu vertical......Page 247 Le formulaire de recherche......Page 250 Structure générale du contenu......Page 252 Encart des événements récents......Page 254 Bilan sur les codes utilisés......Page 257 Insérer du contenu dynamiquement......Page 264 Proposer des styles alternatifs......Page 265 Proposer une version imprimable......Page 266 Internet Explorer 7 et les CSS......Page 267 Conclusion......Page 268 ANNEXES - Sites et ressources......Page 270 A - Liste des propriétés CSS......Page 272 B - Exemples de gabarits......Page 286 Gabarit à deux colonnes et de largeur fixe......Page 287 Gabarit à deux colonnes et de largeur adaptable......Page 290 Gabarit à trois colonnes et de largeur fixe......Page 292 Sites en français......Page 296 Sites en anglais......Page 298 Blogs, carnets et magazines web......Page 299 Galerie de sites en CSS......Page 301 Sites en français......Page 304 Sites en anglais......Page 306 Livres en français......Page 310 Livres en anglais......Page 311 Interprétation des tableaux......Page 312 Version détaillée......Page 313 HTML......Page 314 CSS......Page 317 DOM......Page 323 Divers......Page 327 Bilan......Page 329 Autres navigateurs......Page 330 Mentions légales......Page 331 Index......Page 332 "Les feuilles de styles CSS, dont la norme actuelle est CSS 2, sont l'un des gages de qualité de toute conception web moderne : on peut grâce à elles créer des sites élégants et légers, conformes aux standards du Web et accessibles à tous. La normalisation des langages HTML, XHTML et CSS permet peu à peu de s'assurer de l'universalité des documents web et il est devenu capital de concevoir des sites compatibles tous navigateurs et séparant parfaitement le contenu de la présentation. Ce livre explique sans détours comment concevoir en XHTML et CSS des sites web modernes et accessibles à tous, fonctionnant aussi bien sous Internet Explorer que Mozilla Firefox, Opera, Safari et autres navigateurs conformes. Il aborde les grands classiques de la conception de feuilles de styles CSS et leurs problématiques concrètes : flux et positionnement (suppression des tableaux), préchargement, priorité de déclaration de classes CSS, gestion de la couleur, typographie, bordures et arrière-plan, menus et images réactives, cadres, etc. Plusieurs variantes sont proposées, ainsi que la manière de contourner les bogues des navigateurs. Des exemples de gabarits prêts à l'emploi sont donnés en fin d'ouvrage ainsi qu'une liste des propriétés CSS et un comparatif par navigateur des limites d'interprétation de ces propriétés. Cette deuxième édition, mise à jour et augmentée, décrit les fonctionnalités apportées par le navigateur Internet Explorer 7 ainsi que les différents Doctypes. Elle approfondit la gestion des erreurs des navigateurs et explique comment les isoler et les résoudre (commentaires conditionnels, comportement Haslayout ...)