CSS 2 Pratique du design web

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