|
| Titre : | HTML5 et CSS3 : faites évoluer le design de vos sites web | | Type de document : | texte imprime | | Auteurs : | Christophe Aubry, Auteur | | Editeur : | St Herblain : Éditions ENI | | Année de publication : | cop. 2012 | | Collection : | Objectif web | | Importance : | 1 vol. (492 p.) | | Présentation : | ill., couv. ill. en coul. | | Format : | 22 cm | | ISBN/ISSN/EAN : | 978-2-7460-7107-0 | | Prix : | 26,50 EUR | | Note générale : | Édition récente voir le lien
Index | | Mots-clés : | HTML (langage de balisage) Feuilles de style en cascade Langages de programmation Internet | | Résumé : |
Pour maîtriser les langages fondateurs que sont le HTML et le CSS, la nouvelle syntaxe, les nouveaux éléments de structure sémantique du HTML et les nouveaux sélecteurs, la mise en forme du texte et les conteneurs de CSS3
Pour les designers Web, la conception des sites Web passe par la maîtrise des langages fondateurs que sont l'HTML (HyperText Markup Language) et les CSS (Cascading Style Sheets). Ces deux piliers de la conception de sites Web arrivent dans des nouvelles versions majeures, HTML5 et CSS3, qui vont faire évoluer la manière de concevoir les sites Web.
Ce livre s'adresse aux concepteurs de sites Web et aux designers Web ayant déjà la connaissance de l'HTML 4 et des CSS 2.1, qui veulent faire évoluer leurs créations et créer des sites Web intégrant ces nouveaux standards.
Dans la partir consacrée à l'HTML5, vous étudierez la nouvelle syntaxe, les nouveaux éléments de structure sémantique (en-tête, section, navigation...) et les formulaires interactifs.
Dans celle consacrée aux CSS3, vous apprendrez à utiliser les nouveaux sélecteurs, la mise en forme du texte et les conteneurs (ombre portée, coins arrondis, dégradés, bordures en motif...).
Vous découvrirez le fort potentiel des nouveaux effets de transformation, de transition et d'animation et, bien sûr, vous utiliserez une des grandes nouveautés : l'insertion native du multimédia (audio et vidéo).
Un chapitre est consacré au Design adaptatif (Responsive Web Design) qui permet d'adapter vos sites Web aux différents supports de diffusion (écrans d'ordinateur, tablettes et smartphones).
Le dernier chapitre vous présente des applications concrètes de design Web par l'étude de templates de site Web intégralement conçus en HTML5 et CSS3. | | Note de contenu : | Introduction
A. La création de site Web 20
B. Les langages 20
C. Le livre 20
1. Pour les designers Web 20
2. Le contenu 20
Chapitre 1 : L'évolution de l'HTML et des CSS
A. Rapide historique de l'Internet 24
B. L'évolution de l'HTML 26
1. Les travaux du W3C 26
2. Le HyperText Markup Language 26
3. L'évolution avec le XHTML 26
4. Les dissidents du WHATWG 28
5. L'avènement du HTML 5 29
6. Les documents HTML5 du W3C 30
7. L'évolution des recommandations 34
8. Peut-on utiliser l'HTML5 ? 34
9. Ce livre et l'évolution de l'HTML5 35
C. L'évolution des CSS 35
1. L'apparition des CSS 35
2. L'utilité des CSS 35
3. Les versions des CSS 35
4. L'avènement des CSS3 36
5. L'arrivée des CSS4 36
Chapitre 2 : La nouvelle syntaxe HTML5
A. La doctype 38
1. La syntaxe en HTML 4 et XHTML 1.0 38
2. La syntaxe en HTML5 38
B. Le document HTML 39
1. La syntaxe en XHTML 1.0 39
2. La syntaxe en HTML5 39
C. L'encodage des caractères 39
1. La syntaxe en HTML 4 ET XHTML 1.0 39
2. La syntaxe en HTML5 39
D. Les scripts 39
E. Les styles CSS 40
F. La syntaxe des éléments 40
1. L'objectif 40
2. Les guillemets 40
3. Les éléments avec la seule balise d'ouverture 40
4. Les éléments à balise de fermeture optionnelle 41
5. La casse 41
6. Les attributs booléens 41
7. Les éléments HTML, head et body 42
8. La syntaxe à adopter 43
G. Les éléments obsolètes 43
1. Qu'est-ce un élément obsolète ? 43
2. Pour une meilleure accessibilité 43
3. Les éléments inutilisés et confus 44
H. Les éléments redéfinis 44
I. Les attributs obsolètes 44
J. De nouveaux éléments 44
K. L'élément <hgroup> 44
1. En HTML 4 44
2. En HTML5 45
L. L'élément <time> 45
M. L'élément <mark> 45
N. L'élément <meter> 46
O. Les éléments <détails> et <summary> 46
P. L'élément <wbr> 47
Q. L'élément <bdi> 47
R. L'élément <progress> 48
S. Les éléments liés aux langues asiatiques 48
T. Les modèles de contenu des éléments 48
U. L'affichage des éléments 49
1. En HTML 4 49
2. En HTML5 50
Chapitre 3 : Les éléments de structure HTML5
A. Les éléments de structure en HTML 4 52
1. Les boîtes <div> 52
2. La « divite » 53
3. Un contenu non sémantique 53
B. Les éléments de structure en HTML5 54
1. Les nouveaux éléments de structure 54
2. L'élément <header> 54
3. L'élément <footer> 54
4. L'élément <nav> 54
5. L'élément <section> 55
6. L'élément <article> 55
7. L'élément <aside> 55
8. L'élément <figure> 55
9. Les boîtes <div> 56
C. L'attribut sémantique role 56
D. Exemples de structure HTML5 57
1. Une structure simple 57
2. Une structure plus élaborée 58
3. La structure d'un article 59
E. Les techniques de mise en page 59
Chapitre 4 : Des modèles de sites HTML5
A. Des modèles de pages en HTML5 62
B. Le modèle ArchiteXture 62
1. La Source 62
2. L'affichage du site 62
3. La structure générale 63
4. Le code de la structure 64
5. La barre de navigation 64
6. La bandeau d'information 65
7. La partie centrale 65
8. Le pied de page 67
C. Le modèle DaFrontPage 68
1. La source 68
2. L'affichage du site 68
3. La structure générale 69
4. Le titre du site 71
5. La barre de navigation 71
6. L'en-tête du site 72
7. La partie centrale 72
8. Le pied de page 74
D. Le modèle Learning Center 76
1. La source 76
2. L'affichage du site 76
3. La structure générale 77
4. L'en-tête 79
5. La barre de navigation 80
6. La suite de l'en-tête 81
7. Les articles mis en évidence 81
8. La suite de la partie centrale 82
9. Le pied de page 83
E. WordPress et les thèmes HTML5 83
F. Le thème basic 83
1. Le concepteur 83
2. L'affichage du site 84
3. La structure générale 85
4. Le bandeau supérieur 85
5. La partie centrale 87
6. Affichage d'un article 89
7. La barre latérale 90
8. Les rôles 91
G. Le thème Orange Flower 92
1. La source 92
2. La structure générale 93
3. L'en-tête 94
4. La partie centrale 95
5. Le pied de page 96
H. Joomla ! et les templates HTML5 97
I. Le template Extralab 97
1. La source 97
2. La structure générale 98
3. L'en-tête 99
4. La barre de navigation 99
5. La partie centrale 99
6. La colonne latérale 99
7. Le pied de page 100
J. Le template ht5live 100
1. La source 100
2. La structure générale 100
3. L'en-tête du site 101
4. La partie centrale du site 101
Chapitre 5 : Évoluer vers les CSS3
A. L'état des lieux 104
1. Les modules en travaux 104
2. Afficher les spécifications 105
B. Les préfixes des navigateurs 107
1. Les spécifications et recommandations 107
2. Les navigateurs et les CSS3 107
3. Les préfixeurs en ligne 108
4. Net Tuts Prefixr 109
5. -prefix-my CSS 110
6. CSSPrefixer 110
7. Le cas Internet Explorer 111
8. Un préfixeur JavaScript 111
C. L'interprétation des CSS3 par les navigateurs 115
1. Quelles propriétés utiliser ? 115
2. FindmebyIP - HTML5 & CSS3 Support 115
3. When can I use 115
4. Tester les sélecteurs 117
5. CSS3 Please 119
6. Browser Support Checklist CSS3 120
Chapitre 6 : Les nouveaux sélecteurs CSS3
A. Les sélecteurs 122
1. L'objectif 122
2. Les sélecteurs CSS 2 122
3. Les pseudo-classes 122
4. Les pseudo-éléments 123
5. Les groupes de sélecteurs 123
B. Les nouveaux sélecteurs CSS3 123
C. Le sélecteur adjacent général 124
D. Le sélecteur d'attribut 125
1. L'objectif 125
2. Des liens vers une adresse mail 125
3. Des liens de téléchargement 126
E. La pseudo-classe d'ancre 127
1. L'objectif 127
2. La mise en place 127
3. L'utilisation 128
F. Les pseudo-classes de structure 129
1. L'objectif 129
2. La racine de la page 129
3. Le dernier élément enfant 129
4. Les éléments enfants 131
5. Les derniers éléments enfants 136
6. Les premiers et derniers éléments d'un type donné 136
7. Les premiers éléments d'un type donné 138
8. Les éléments seuls 138
9. Les éléments seuls d'un type donné 139
10. Les éléments vides 140
11. Tous les éléments sauf celui spécifié 140
Chapitre 7 : La mise en forme CSS3 des boîtes
A. Les nouvelles propriétés CSS3 144
B. La largeur des boîtes 144
1. Avec les CSS 2.1 144
2. Avec les CSS3 145
C. Le débordement du contenu 146
D. Les couleurs d'arrière-plan 148
1. Le module des couleurs 148
2. Le mode TSL 148
3. Le mode TSL transparent 149
4. Le mode RVB transparent 150
5. Un éditeur RGBA en ligne 150
6. La transparence 151
E. L'état des lieux des arrière-plans et des bordures 151
F. Les coins arrondis 152
1. Les préfixes 152
2. Des coins identiques 152
3. Des coins arrondis différents 153
4. Des ellipses dans les coins 154
5. Les générateurs en ligne 155
G. Les bordures fantaisistes 157
1. La syntaxe du W3C 157
2. Un générateur en ligne 159
H. Les ombres portées 160
1. L'état des lieux 160
2. Créer une ombre portée 160
3. Différents exemples d'ombres portées 161
4. Appliquer plusieurs ombres portées 163
5. Les générateurs en ligne 164
I. Les dégradés 166
1. L'état des lieux 166
2. Les dégradés pour Mozilla Firefox 166
3. Les dégradés pour WebKit 168
4. Les dégradés par le W3C 169
5. Les générateurs en ligne 169
J. Les arrière-plans multiples 172
1. L'objectif 172
2. Un exemple simple 172
K. Les autres propriétés d'arrière-plan 174
1. L'origine d'une image 174
2. Rogner une image 176
3. La taille de l'arrière-plan 177
L. Des générateurs CSS3 en ligne 179
1. L'objectif 179
2. WestCIV 179
3. CSS 3.0 Maker 180
4. CSS3 Generator 181
5. CSS3 Playground 182
6. CSS3 Generator 183
7. Layer Style 184
M. Exemple d'un tableau aux coins arrondis 185
1. L'objectif 185
2. La structure du tableau 186
3. La mise en forme du tableau 187
4. Les cellules du tableau 188
5. Les cellules d'en-tête 188
6. L'arrondi des cellules 189
7. Le survol des lignes 190
N. Exemple d'ombre sur la page 191
Chapitre 8 : L'HTML5 et les CSS3 pour le texte
A. Les éléments de texte obsolètes 194
1. La spécification HTML5 194
2. Les éléments inutilisés et confus 194
3. La mise en forme du texte 194
B. Les éléments de texte redéfinis 194
1. La spécification HTML5 194
2. L'élément <b> 194
3. L'élément <strong> 195
4. L'élément <i> 195
5. L'élément <em> 195
6. L'élément <small> 195
7. L'élément <cite> 195
8. L'élément <dl> 196
9. L'élément <ol> 196
10. L'élément <hr> 196
11. L'élément <a> 196
C. Des nouvelles mises en forme de texte 197
1. Les nouveautés CSS3 197
2. Les colonnes 197
3. La coupure des mots 201
4. Les points de suspension 203
D. Les polices de caractères 203
1. L'utilisation des polices 203
2. Embarquer les polices 203
3. La compatibilité des navigateurs 204
4. La règle @font-face 204
5. Le nom des polices 205
6. Les polices locales 205
7. Indiquer plusieurs sources 206
8. Les styles typographiques 206
9. Un générateur de polices avec @font-face 206
10. Les polices Web en ligne 207
11. Convertir des polices 210
12. Choisir des polices de caractères 211
E. La taille des polices 212
1. Les différentes tailles 212
2. Le problème de la cascade 212
3. La nouvelle unité rem 213
F. L'ombre portée sur le texte 214
1. Les valeurs de la propriété 214
2. Des outils en ligne 215
3. Quelques exemples de design 217
G. La typographie avancée 219
1. L'état des lieux 219
2. La graisse des caractères 219
3. La largeur des caractères 220
4. Ajuster la taille des caractères 220
5. D'autres propriétés 221
Chapitre 9 : L'HTML5 et les CSS3 pour les formulaires
A. L'objectif 224
B. Les méthodes d'envoi 224
C. L'élément <form> 224
D. Les nouveaux champs 224
1. L'affichage des nouveaux champs 224
2. Le champ pour les e-mails 225
3. Le champ pour les numéros de téléphone 226
4. Le champ pour les URL 227
5. Les champs pour les dates et les heures 228
6. Le champ pour les valeurs numériques 229
7. Les réglettes avec curseur 230
8. Les champs de recherche 230
9. Le champ de saisie suggérée 231
10. Le choix d'une couleur 231
11. Les clés publiques 232
E. La validation des formulaires 232
1. La validation côté client 232
2. Désactiver la validation 233
3. Rendre un champ obligatoire 233
4. Les saisies autorisées 234
F. Les expressions régulières 235
1. Des lettres autorisées 235
2. Un intervalle de lettres autorisées 236
3. Des lettres autres que 236
4. La casse des lettres 237
5. La condition ou 237
6. Des mots autorisés 237
7. Autoriser des chiffres 237
8. Un nombre limité de caractères 238
9. Les saisies multiples 239
10. Les paramètres spéciaux 239
G. Aider l'utilisateur dans le formulaire 240
1. L'aide à la saisie 240
2. Activer un champ 240
3. Le remplissage automatique 241
4. Redimensionner un champ 241
H. Des pseudo-classes pour les formulaires 243
1. Les objectifs des pseudo-classes 243
2. Le formulaire et les styles 243
3. L'utilisation 244
4. Une autre pseudo-classe 246
5. Les champs requis et optionnels 246
6. La mise en forme du :focus 247
I. La validation des saisies 247
1. Objectif 247
2. Le formulaire 248
3. La mise en forme du formulaire 248
4. Les champs non valides 249
5. Les messages d'erreur 250
6. Les champs valides 252
7. Les valeurs hors limites 253
J. Un premier exemple simple de formulaire 254
1. L'objectif 254
2. La structure du formulaire 255
3. Les styles généraux 256
4. Le fond de la page 256
5. Le formulaire 256
6. Les étiquettes 257
7. Les champs de saisie 258
8. Le champ multiligne 259
9. Le focus sur les champs 260
10. Le bouton d'envoi 260
K. Un deuxième exemple très sobre de formulaire 261
1. L'objectif 261
2. La structure initiale du formulaire 262
3. L'ombre portée du formulaire 262
4. L'effet de pointillés 263
5. Le titre du formulaire 264
6. Les filets décoratifs 264
7. Les champs de saisie 265
8. Le bouton de connexion 267
9. L'utilisation du bouton 268
10. Les autres liens 268
11. Le rendu final 269
L. Un exemple interactif de formulaire 269
1. L'objectif 269
2. La structure initiale du formulaire 271
3. Les options supplémentaires 271
4. Le bouton d'envoi 272
5. Le message de confirmation 272
6. Les styles généraux 272
7. La mise en forme du formulaire 273
8. Les étiquettes 274
9. Les champs de saisie 274
10. La liste déroulante 275
11. Le bouton d'envoi 276
12. La gestion des options 277
13. L'affichage initial 277
14. Afficher les options 278
15. Masquer les options 279
16. Le message de confirmation 279
M. Un dernier exemple élaboré de formulaire 280
1. L'objectif 280
2. La structure du formulaire 281
3. Les objets HTML5 282
4. Le code complet du formulaire 284
5. L'affichage brut 286
6. La mise en forme générale 287
7. La mise en forme du formulaire 287
8. La mise en forme des différentes parties 288
9. La mise en forme des items de liste 290
10. La mise en forme des étiquettes 290
11. Les champs de type <input> 291
12. Le bouton d'envoi du formulaire 292
N. Créer des boutons avec des symboles 293
1. L'objectif 293
2. Le formulaire 293
3. Créer la classe des boutons 294
4. Le pseudo-élément ::before 294
5. Le contenu du pseudo-élément ::before 295
6. Appliquer les classes 295
7. L'affichage du formulaire 296
8. D'autres exemples similaires 296
O. Les générateurs de boutons en ligne 296
1. L'objectif 296
2. CSS3 Button 297
3. CSS3 Button Generator 297
4. CSS Drive Button Generator 299
5. CSS3 Button Creator 300
Chapitre 10 : Les transformations CSS3
A. L'état des lieux et l'objectif 302
B. La transformation 302
1. La propriété 302
2. Le point de référence 302
C. Le déplacement 304
1. Sur les deux axes 304
2. Sur un seul axe 304
D. La mise à l'échelle 305
1. La mise à l'échelle proportionnelle 305
2. La mise à l'échelle non proportionnelle 305
3. La mise à l'échelle dans une seule direction 306
E. La rotation 306
F. La déformation 307
1. La déformation sur les deux axes 307
2. La déformation sur un seul axe 307
G. Appliquer toutes les transformations 308
H. Les générateurs en ligne 309
1. CSS 3.0 Maker 309
2. CSS3 Generator 309
3. WestCIV 310
I. Exemple d'un menu 310
1. L'objectif 310
2. La structure du menu 310
3. La mise en forme 311
4. L'affichage 311
J. Exemple d'une galerie de Polaroid 312
1. L'objectif 312
2. La structure de la galerie 312
3. La mise en forme de la galerie 312
4. La mise en forme des photos 313
5. La transformation 314
6. L'affichage 315
K. Exemple de relief sur une image 316
1. L'objectif 316
2. La photo 317
3. Les ombres sous la photo 317
Chapitre 11 : Les transitions CSS3
A. L'état des lieux et l'objectif 322
B. Mettre en place les transitions 322
1. Les transitions 322
2. Les propriétés CSS 322
C. Effectuer une transition de déplacement 324
1. L'objectif 324
2. Le code nécessaire 324
3. Les propriétés de la transition 325
4. Le rendu 325
D. Les autres propriétés des transitions 326
1. La cinétique 326
2. Le démarrage de la transition 327
3. La syntaxe courte 328
4. Les transitions multiples 328
E. Les générateurs en ligne 330
1. CSS3 Generator 330
2. CSS 3.0 Maker 331
3. Créer vos courbes de Bézier 332
F. Exemple d'un menu interactif 332
1. L'objectif 332
2. La mise en forme du menu 333
3. Les transitions 333
4. L'affichage 334
G. Exemple d'un diaporama interactif 335
1. L'objectif 335
2. La structure du diaporama 335
3. Les transformations 336
4. Les transitions 337
5. L'affichage 338
H. Exemple de menu à tiroirs 339
1. L'objectif 339
2. La structure du menu 340
3. La mise en forme du menu 341
4. La mise en forme des tiroirs 342
5. L'affichage initial 343
6. Les transitions 343
7. L'affichage 344
8. Des menus « flashy » 345
I. Exemple d'accordéon 345
1. L'objectif 345
2. La structure de l'accordéon 345
3. La mise en forme de l'accordéon 346
4. La mise en forme des zones d'affichage de l'accordéon 347
5. L'affichage 347
Chapitre 12 : Les animations CSS3
A. L'état des lieux et l'objectif 350
B. La construction d'une animation 350
C. Un simple déplacement 351
1. L'objectif 351
2. La structure 351
3. L'animation 352
4. L'affichage 354
D. Une rotation et une transparence 354
1. L'objectif 354
2. La structure 354
3. L'animation 354
4. L'affichage 356
E. Un formulaire qui clignote 356
1. L'objectif 356
2. La structure du formulaire 356
3. La mise en forme 357
4. L'animation 357
5. L'affichage 358
F. Une fenêtre modale 358
1. L'objectif 358
2. Le bouton 358
3. La fenêtre modale 359
4. Le bouton de fermeture 361
5. Masquer le corps de la page 362
6. L'animation à l'ouverture 363
7. Déclencher l'animation d'ouverture 364
8. Appliquer le masque 364
9. L'animation de fermeture 365
10. Déclencher l'animation de fermeture 365
11. Le code complet 365
12. L'affichage de la page 370
Chapitre 13 : Le multimédia : audio et vidéo
A. L'état des lieux 372
B. Insérer de l'audio 372
1. L'élément audio 372
2. Les contrôles audio 372
3. L'apparence du lecteur audio 373
4. Les attributs pour l'audio 373
5. Les formats audio 374
6. Créez vos contrôles 375
7. Les anciens navigateurs 376
C. Insérer de la vidéo 376
1. L'élément vidéo 376
2. Les attributs pour la vidéo 376
3. L'apparence du lecteur vidéo 377
4. Les formats vidéo 379
5. Convertir les vidéos 380
Chapitre 14 : Le canevas de dessin
A. La création bitmap en JavaScript 382
B. Les techniques proposées 382
C. Dessiner un rectangle 382
1. Le canevas 382
2. Le rectangle 383
3. Le code complet et l'affichage 384
4. Ajouter une couleur de remplissage 385
5. Ajouter une ombre portée 385
D. Dessiner un cercle 386
E. Dessiner des tracés 387
F. Dessiner des contours 387
G. Ajouter du texte 388
H. Ajouter un dégradé 389
I. Les transformations 390
J. La manipulation des objets 390
Chapitre 15 : Le design Web adaptatif
A. L'état des lieux et l'objectif 392
B. Les requêtes de média 392
1. L'objectif 392
2. Avec l'HTML 4 et les CSS 2.1 392
3. Les critères des requêtes de média CSS3 393
4. La syntaxe des requêtes de média 394
5. Les valeurs minimales et maximales 394
6. Les opérateurs logiques 395
7. Des requêtes pour différents supports 396
C. La taille des écrans 397
1. La problématique actuelle 397
2. La taille du viewport 398
3. Les zooms à l'écran 401
4. Tester l'affichage sur des écrans 402
D. Les grilles fluides 407
1. Les techniques 407
2. Un exemple simple 407
3. Un exemple d'un site simple 409
4. Réaliser un design adaptatif simple 414
5. Des grilles adaptatives 419
E. Des images adaptatives 419
1. Le débordement des images 419
2. Imposer une largeur maximale 420
F. Créer du design adaptatif 423
1. Les deux stratégies 423
2. Concevoir un site adaptatif 424
3. D'autres exemples de design adaptatif 425
G. Le site Food Sense 425
1. Les affichages 425
2. La structure principale 428
3. Le viewport 431
4. L'affichage pour les grands écrans 431
5. L'affichage pour les tablettes 433
6. L'affichage pour les smartphones 436
H. Des thèmes WordPress adaptatifs 439
Chapitre 16 : Un design HTML5/CSS3 : The Cat Template
A. La source 442
B. La structure HTML5 443
1. Les deux parties 443
2. Le conteneur principal 443
3. L'en-tête 444
4. Le diaporama 445
5. Le message 446
6. Les quatre articles 447
7. L'article seul 448
8. Le pied de page 448
C. La mise en forme CSS3 449
1. L'objectif 449
2. Le diaporama 449
3. Les photos des articles 450
4. Le survol des photos des articles 451
5. Les boutons Read more 451
Chapitre 17 : Un design HTML5/CSS3 : Flip Thru
A. La source 454
B. La structure HTML5 455
1. La boîte principale 455
2. La barre de navigation 455
3. L'en-tête 456
4. La zone centrale 456
5. Le pied de page 457
C. La mise en forme CSS3 458
1. Le conteneur principal 458
2. Les images des articles 458
D. L'accordéon 459
1. Le fonctionnement 459
2. La structure 459
3. Le fond de l'accordéon 460
4. La liste <ul> 461
5. Les titres <h3> 461
6. Les articles 462
7. Les images des articles 463
8. Les survols 463
9. L'apparition des articles 464
Chapitre 18 : Un design HTML5/CSS3 : dConstruct 2011
A. La source 468
B. La structure HTML5 469
1. La structure principale 469
2. L'en-tête 469
3. Les orateurs 470
4. Les sponsors 471
5. Le pied de page 471
C. La mise en forme CSS3 472
1. Les polices incorporées 472
2. Les ombres portées sur les textes 474
3. Les ombres portées sur les conteneurs 475
D. Les effets de survol sur les orateurs 475
1. Le fonctionnement 475
2. La structure 477
3. Les styles initiaux 477
4. Le survol du lien 478
E. Le design adaptatif 479
1. L'affichage modifié 480
2. La barre de navigation principale 481
3. Le titre et le slogan 482
4. Les images des orateurs 483
Index 485
| | En ligne : | https://www.amazon.fr/HTML5-CSS3-Faites-%C3%A9voluer-%C3%A9dition/dp/2409003834/ [...] | | Permalink : | ./index.php?lvl=notice_display&id=32808 |
HTML5 et CSS3 : faites évoluer le design de vos sites web [texte imprime] / Christophe Aubry, Auteur . - St Herblain : Éditions ENI, cop. 2012 . - 1 vol. (492 p.) : ill., couv. ill. en coul. ; 22 cm. - ( Objectif web) . ISBN : 978-2-7460-7107-0 : 26,50 EUR Édition récente voir le lien
Index | Mots-clés : | HTML (langage de balisage) Feuilles de style en cascade Langages de programmation Internet | | Résumé : |
Pour maîtriser les langages fondateurs que sont le HTML et le CSS, la nouvelle syntaxe, les nouveaux éléments de structure sémantique du HTML et les nouveaux sélecteurs, la mise en forme du texte et les conteneurs de CSS3
Pour les designers Web, la conception des sites Web passe par la maîtrise des langages fondateurs que sont l'HTML (HyperText Markup Language) et les CSS (Cascading Style Sheets). Ces deux piliers de la conception de sites Web arrivent dans des nouvelles versions majeures, HTML5 et CSS3, qui vont faire évoluer la manière de concevoir les sites Web.
Ce livre s'adresse aux concepteurs de sites Web et aux designers Web ayant déjà la connaissance de l'HTML 4 et des CSS 2.1, qui veulent faire évoluer leurs créations et créer des sites Web intégrant ces nouveaux standards.
Dans la partir consacrée à l'HTML5, vous étudierez la nouvelle syntaxe, les nouveaux éléments de structure sémantique (en-tête, section, navigation...) et les formulaires interactifs.
Dans celle consacrée aux CSS3, vous apprendrez à utiliser les nouveaux sélecteurs, la mise en forme du texte et les conteneurs (ombre portée, coins arrondis, dégradés, bordures en motif...).
Vous découvrirez le fort potentiel des nouveaux effets de transformation, de transition et d'animation et, bien sûr, vous utiliserez une des grandes nouveautés : l'insertion native du multimédia (audio et vidéo).
Un chapitre est consacré au Design adaptatif (Responsive Web Design) qui permet d'adapter vos sites Web aux différents supports de diffusion (écrans d'ordinateur, tablettes et smartphones).
Le dernier chapitre vous présente des applications concrètes de design Web par l'étude de templates de site Web intégralement conçus en HTML5 et CSS3. | | Note de contenu : | Introduction
A. La création de site Web 20
B. Les langages 20
C. Le livre 20
1. Pour les designers Web 20
2. Le contenu 20
Chapitre 1 : L'évolution de l'HTML et des CSS
A. Rapide historique de l'Internet 24
B. L'évolution de l'HTML 26
1. Les travaux du W3C 26
2. Le HyperText Markup Language 26
3. L'évolution avec le XHTML 26
4. Les dissidents du WHATWG 28
5. L'avènement du HTML 5 29
6. Les documents HTML5 du W3C 30
7. L'évolution des recommandations 34
8. Peut-on utiliser l'HTML5 ? 34
9. Ce livre et l'évolution de l'HTML5 35
C. L'évolution des CSS 35
1. L'apparition des CSS 35
2. L'utilité des CSS 35
3. Les versions des CSS 35
4. L'avènement des CSS3 36
5. L'arrivée des CSS4 36
Chapitre 2 : La nouvelle syntaxe HTML5
A. La doctype 38
1. La syntaxe en HTML 4 et XHTML 1.0 38
2. La syntaxe en HTML5 38
B. Le document HTML 39
1. La syntaxe en XHTML 1.0 39
2. La syntaxe en HTML5 39
C. L'encodage des caractères 39
1. La syntaxe en HTML 4 ET XHTML 1.0 39
2. La syntaxe en HTML5 39
D. Les scripts 39
E. Les styles CSS 40
F. La syntaxe des éléments 40
1. L'objectif 40
2. Les guillemets 40
3. Les éléments avec la seule balise d'ouverture 40
4. Les éléments à balise de fermeture optionnelle 41
5. La casse 41
6. Les attributs booléens 41
7. Les éléments HTML, head et body 42
8. La syntaxe à adopter 43
G. Les éléments obsolètes 43
1. Qu'est-ce un élément obsolète ? 43
2. Pour une meilleure accessibilité 43
3. Les éléments inutilisés et confus 44
H. Les éléments redéfinis 44
I. Les attributs obsolètes 44
J. De nouveaux éléments 44
K. L'élément <hgroup> 44
1. En HTML 4 44
2. En HTML5 45
L. L'élément <time> 45
M. L'élément <mark> 45
N. L'élément <meter> 46
O. Les éléments <détails> et <summary> 46
P. L'élément <wbr> 47
Q. L'élément <bdi> 47
R. L'élément <progress> 48
S. Les éléments liés aux langues asiatiques 48
T. Les modèles de contenu des éléments 48
U. L'affichage des éléments 49
1. En HTML 4 49
2. En HTML5 50
Chapitre 3 : Les éléments de structure HTML5
A. Les éléments de structure en HTML 4 52
1. Les boîtes <div> 52
2. La « divite » 53
3. Un contenu non sémantique 53
B. Les éléments de structure en HTML5 54
1. Les nouveaux éléments de structure 54
2. L'élément <header> 54
3. L'élément <footer> 54
4. L'élément <nav> 54
5. L'élément <section> 55
6. L'élément <article> 55
7. L'élément <aside> 55
8. L'élément <figure> 55
9. Les boîtes <div> 56
C. L'attribut sémantique role 56
D. Exemples de structure HTML5 57
1. Une structure simple 57
2. Une structure plus élaborée 58
3. La structure d'un article 59
E. Les techniques de mise en page 59
Chapitre 4 : Des modèles de sites HTML5
A. Des modèles de pages en HTML5 62
B. Le modèle ArchiteXture 62
1. La Source 62
2. L'affichage du site 62
3. La structure générale 63
4. Le code de la structure 64
5. La barre de navigation 64
6. La bandeau d'information 65
7. La partie centrale 65
8. Le pied de page 67
C. Le modèle DaFrontPage 68
1. La source 68
2. L'affichage du site 68
3. La structure générale 69
4. Le titre du site 71
5. La barre de navigation 71
6. L'en-tête du site 72
7. La partie centrale 72
8. Le pied de page 74
D. Le modèle Learning Center 76
1. La source 76
2. L'affichage du site 76
3. La structure générale 77
4. L'en-tête 79
5. La barre de navigation 80
6. La suite de l'en-tête 81
7. Les articles mis en évidence 81
8. La suite de la partie centrale 82
9. Le pied de page 83
E. WordPress et les thèmes HTML5 83
F. Le thème basic 83
1. Le concepteur 83
2. L'affichage du site 84
3. La structure générale 85
4. Le bandeau supérieur 85
5. La partie centrale 87
6. Affichage d'un article 89
7. La barre latérale 90
8. Les rôles 91
G. Le thème Orange Flower 92
1. La source 92
2. La structure générale 93
3. L'en-tête 94
4. La partie centrale 95
5. Le pied de page 96
H. Joomla ! et les templates HTML5 97
I. Le template Extralab 97
1. La source 97
2. La structure générale 98
3. L'en-tête 99
4. La barre de navigation 99
5. La partie centrale 99
6. La colonne latérale 99
7. Le pied de page 100
J. Le template ht5live 100
1. La source 100
2. La structure générale 100
3. L'en-tête du site 101
4. La partie centrale du site 101
Chapitre 5 : Évoluer vers les CSS3
A. L'état des lieux 104
1. Les modules en travaux 104
2. Afficher les spécifications 105
B. Les préfixes des navigateurs 107
1. Les spécifications et recommandations 107
2. Les navigateurs et les CSS3 107
3. Les préfixeurs en ligne 108
4. Net Tuts Prefixr 109
5. -prefix-my CSS 110
6. CSSPrefixer 110
7. Le cas Internet Explorer 111
8. Un préfixeur JavaScript 111
C. L'interprétation des CSS3 par les navigateurs 115
1. Quelles propriétés utiliser ? 115
2. FindmebyIP - HTML5 & CSS3 Support 115
3. When can I use 115
4. Tester les sélecteurs 117
5. CSS3 Please 119
6. Browser Support Checklist CSS3 120
Chapitre 6 : Les nouveaux sélecteurs CSS3
A. Les sélecteurs 122
1. L'objectif 122
2. Les sélecteurs CSS 2 122
3. Les pseudo-classes 122
4. Les pseudo-éléments 123
5. Les groupes de sélecteurs 123
B. Les nouveaux sélecteurs CSS3 123
C. Le sélecteur adjacent général 124
D. Le sélecteur d'attribut 125
1. L'objectif 125
2. Des liens vers une adresse mail 125
3. Des liens de téléchargement 126
E. La pseudo-classe d'ancre 127
1. L'objectif 127
2. La mise en place 127
3. L'utilisation 128
F. Les pseudo-classes de structure 129
1. L'objectif 129
2. La racine de la page 129
3. Le dernier élément enfant 129
4. Les éléments enfants 131
5. Les derniers éléments enfants 136
6. Les premiers et derniers éléments d'un type donné 136
7. Les premiers éléments d'un type donné 138
8. Les éléments seuls 138
9. Les éléments seuls d'un type donné 139
10. Les éléments vides 140
11. Tous les éléments sauf celui spécifié 140
Chapitre 7 : La mise en forme CSS3 des boîtes
A. Les nouvelles propriétés CSS3 144
B. La largeur des boîtes 144
1. Avec les CSS 2.1 144
2. Avec les CSS3 145
C. Le débordement du contenu 146
D. Les couleurs d'arrière-plan 148
1. Le module des couleurs 148
2. Le mode TSL 148
3. Le mode TSL transparent 149
4. Le mode RVB transparent 150
5. Un éditeur RGBA en ligne 150
6. La transparence 151
E. L'état des lieux des arrière-plans et des bordures 151
F. Les coins arrondis 152
1. Les préfixes 152
2. Des coins identiques 152
3. Des coins arrondis différents 153
4. Des ellipses dans les coins 154
5. Les générateurs en ligne 155
G. Les bordures fantaisistes 157
1. La syntaxe du W3C 157
2. Un générateur en ligne 159
H. Les ombres portées 160
1. L'état des lieux 160
2. Créer une ombre portée 160
3. Différents exemples d'ombres portées 161
4. Appliquer plusieurs ombres portées 163
5. Les générateurs en ligne 164
I. Les dégradés 166
1. L'état des lieux 166
2. Les dégradés pour Mozilla Firefox 166
3. Les dégradés pour WebKit 168
4. Les dégradés par le W3C 169
5. Les générateurs en ligne 169
J. Les arrière-plans multiples 172
1. L'objectif 172
2. Un exemple simple 172
K. Les autres propriétés d'arrière-plan 174
1. L'origine d'une image 174
2. Rogner une image 176
3. La taille de l'arrière-plan 177
L. Des générateurs CSS3 en ligne 179
1. L'objectif 179
2. WestCIV 179
3. CSS 3.0 Maker 180
4. CSS3 Generator 181
5. CSS3 Playground 182
6. CSS3 Generator 183
7. Layer Style 184
M. Exemple d'un tableau aux coins arrondis 185
1. L'objectif 185
2. La structure du tableau 186
3. La mise en forme du tableau 187
4. Les cellules du tableau 188
5. Les cellules d'en-tête 188
6. L'arrondi des cellules 189
7. Le survol des lignes 190
N. Exemple d'ombre sur la page 191
Chapitre 8 : L'HTML5 et les CSS3 pour le texte
A. Les éléments de texte obsolètes 194
1. La spécification HTML5 194
2. Les éléments inutilisés et confus 194
3. La mise en forme du texte 194
B. Les éléments de texte redéfinis 194
1. La spécification HTML5 194
2. L'élément <b> 194
3. L'élément <strong> 195
4. L'élément <i> 195
5. L'élément <em> 195
6. L'élément <small> 195
7. L'élément <cite> 195
8. L'élément <dl> 196
9. L'élément <ol> 196
10. L'élément <hr> 196
11. L'élément <a> 196
C. Des nouvelles mises en forme de texte 197
1. Les nouveautés CSS3 197
2. Les colonnes 197
3. La coupure des mots 201
4. Les points de suspension 203
D. Les polices de caractères 203
1. L'utilisation des polices 203
2. Embarquer les polices 203
3. La compatibilité des navigateurs 204
4. La règle @font-face 204
5. Le nom des polices 205
6. Les polices locales 205
7. Indiquer plusieurs sources 206
8. Les styles typographiques 206
9. Un générateur de polices avec @font-face 206
10. Les polices Web en ligne 207
11. Convertir des polices 210
12. Choisir des polices de caractères 211
E. La taille des polices 212
1. Les différentes tailles 212
2. Le problème de la cascade 212
3. La nouvelle unité rem 213
F. L'ombre portée sur le texte 214
1. Les valeurs de la propriété 214
2. Des outils en ligne 215
3. Quelques exemples de design 217
G. La typographie avancée 219
1. L'état des lieux 219
2. La graisse des caractères 219
3. La largeur des caractères 220
4. Ajuster la taille des caractères 220
5. D'autres propriétés 221
Chapitre 9 : L'HTML5 et les CSS3 pour les formulaires
A. L'objectif 224
B. Les méthodes d'envoi 224
C. L'élément <form> 224
D. Les nouveaux champs 224
1. L'affichage des nouveaux champs 224
2. Le champ pour les e-mails 225
3. Le champ pour les numéros de téléphone 226
4. Le champ pour les URL 227
5. Les champs pour les dates et les heures 228
6. Le champ pour les valeurs numériques 229
7. Les réglettes avec curseur 230
8. Les champs de recherche 230
9. Le champ de saisie suggérée 231
10. Le choix d'une couleur 231
11. Les clés publiques 232
E. La validation des formulaires 232
1. La validation côté client 232
2. Désactiver la validation 233
3. Rendre un champ obligatoire 233
4. Les saisies autorisées 234
F. Les expressions régulières 235
1. Des lettres autorisées 235
2. Un intervalle de lettres autorisées 236
3. Des lettres autres que 236
4. La casse des lettres 237
5. La condition ou 237
6. Des mots autorisés 237
7. Autoriser des chiffres 237
8. Un nombre limité de caractères 238
9. Les saisies multiples 239
10. Les paramètres spéciaux 239
G. Aider l'utilisateur dans le formulaire 240
1. L'aide à la saisie 240
2. Activer un champ 240
3. Le remplissage automatique 241
4. Redimensionner un champ 241
H. Des pseudo-classes pour les formulaires 243
1. Les objectifs des pseudo-classes 243
2. Le formulaire et les styles 243
3. L'utilisation 244
4. Une autre pseudo-classe 246
5. Les champs requis et optionnels 246
6. La mise en forme du :focus 247
I. La validation des saisies 247
1. Objectif 247
2. Le formulaire 248
3. La mise en forme du formulaire 248
4. Les champs non valides 249
5. Les messages d'erreur 250
6. Les champs valides 252
7. Les valeurs hors limites 253
J. Un premier exemple simple de formulaire 254
1. L'objectif 254
2. La structure du formulaire 255
3. Les styles généraux 256
4. Le fond de la page 256
5. Le formulaire 256
6. Les étiquettes 257
7. Les champs de saisie 258
8. Le champ multiligne 259
9. Le focus sur les champs 260
10. Le bouton d'envoi 260
K. Un deuxième exemple très sobre de formulaire 261
1. L'objectif 261
2. La structure initiale du formulaire 262
3. L'ombre portée du formulaire 262
4. L'effet de pointillés 263
5. Le titre du formulaire 264
6. Les filets décoratifs 264
7. Les champs de saisie 265
8. Le bouton de connexion 267
9. L'utilisation du bouton 268
10. Les autres liens 268
11. Le rendu final 269
L. Un exemple interactif de formulaire 269
1. L'objectif 269
2. La structure initiale du formulaire 271
3. Les options supplémentaires 271
4. Le bouton d'envoi 272
5. Le message de confirmation 272
6. Les styles généraux 272
7. La mise en forme du formulaire 273
8. Les étiquettes 274
9. Les champs de saisie 274
10. La liste déroulante 275
11. Le bouton d'envoi 276
12. La gestion des options 277
13. L'affichage initial 277
14. Afficher les options 278
15. Masquer les options 279
16. Le message de confirmation 279
M. Un dernier exemple élaboré de formulaire 280
1. L'objectif 280
2. La structure du formulaire 281
3. Les objets HTML5 282
4. Le code complet du formulaire 284
5. L'affichage brut 286
6. La mise en forme générale 287
7. La mise en forme du formulaire 287
8. La mise en forme des différentes parties 288
9. La mise en forme des items de liste 290
10. La mise en forme des étiquettes 290
11. Les champs de type <input> 291
12. Le bouton d'envoi du formulaire 292
N. Créer des boutons avec des symboles 293
1. L'objectif 293
2. Le formulaire 293
3. Créer la classe des boutons 294
4. Le pseudo-élément ::before 294
5. Le contenu du pseudo-élément ::before 295
6. Appliquer les classes 295
7. L'affichage du formulaire 296
8. D'autres exemples similaires 296
O. Les générateurs de boutons en ligne 296
1. L'objectif 296
2. CSS3 Button 297
3. CSS3 Button Generator 297
4. CSS Drive Button Generator 299
5. CSS3 Button Creator 300
Chapitre 10 : Les transformations CSS3
A. L'état des lieux et l'objectif 302
B. La transformation 302
1. La propriété 302
2. Le point de référence 302
C. Le déplacement 304
1. Sur les deux axes 304
2. Sur un seul axe 304
D. La mise à l'échelle 305
1. La mise à l'échelle proportionnelle 305
2. La mise à l'échelle non proportionnelle 305
3. La mise à l'échelle dans une seule direction 306
E. La rotation 306
F. La déformation 307
1. La déformation sur les deux axes 307
2. La déformation sur un seul axe 307
G. Appliquer toutes les transformations 308
H. Les générateurs en ligne 309
1. CSS 3.0 Maker 309
2. CSS3 Generator 309
3. WestCIV 310
I. Exemple d'un menu 310
1. L'objectif 310
2. La structure du menu 310
3. La mise en forme 311
4. L'affichage 311
J. Exemple d'une galerie de Polaroid 312
1. L'objectif 312
2. La structure de la galerie 312
3. La mise en forme de la galerie 312
4. La mise en forme des photos 313
5. La transformation 314
6. L'affichage 315
K. Exemple de relief sur une image 316
1. L'objectif 316
2. La photo 317
3. Les ombres sous la photo 317
Chapitre 11 : Les transitions CSS3
A. L'état des lieux et l'objectif 322
B. Mettre en place les transitions 322
1. Les transitions 322
2. Les propriétés CSS 322
C. Effectuer une transition de déplacement 324
1. L'objectif 324
2. Le code nécessaire 324
3. Les propriétés de la transition 325
4. Le rendu 325
D. Les autres propriétés des transitions 326
1. La cinétique 326
2. Le démarrage de la transition 327
3. La syntaxe courte 328
4. Les transitions multiples 328
E. Les générateurs en ligne 330
1. CSS3 Generator 330
2. CSS 3.0 Maker 331
3. Créer vos courbes de Bézier 332
F. Exemple d'un menu interactif 332
1. L'objectif 332
2. La mise en forme du menu 333
3. Les transitions 333
4. L'affichage 334
G. Exemple d'un diaporama interactif 335
1. L'objectif 335
2. La structure du diaporama 335
3. Les transformations 336
4. Les transitions 337
5. L'affichage 338
H. Exemple de menu à tiroirs 339
1. L'objectif 339
2. La structure du menu 340
3. La mise en forme du menu 341
4. La mise en forme des tiroirs 342
5. L'affichage initial 343
6. Les transitions 343
7. L'affichage 344
8. Des menus « flashy » 345
I. Exemple d'accordéon 345
1. L'objectif 345
2. La structure de l'accordéon 345
3. La mise en forme de l'accordéon 346
4. La mise en forme des zones d'affichage de l'accordéon 347
5. L'affichage 347
Chapitre 12 : Les animations CSS3
A. L'état des lieux et l'objectif 350
B. La construction d'une animation 350
C. Un simple déplacement 351
1. L'objectif 351
2. La structure 351
3. L'animation 352
4. L'affichage 354
D. Une rotation et une transparence 354
1. L'objectif 354
2. La structure 354
3. L'animation 354
4. L'affichage 356
E. Un formulaire qui clignote 356
1. L'objectif 356
2. La structure du formulaire 356
3. La mise en forme 357
4. L'animation 357
5. L'affichage 358
F. Une fenêtre modale 358
1. L'objectif 358
2. Le bouton 358
3. La fenêtre modale 359
4. Le bouton de fermeture 361
5. Masquer le corps de la page 362
6. L'animation à l'ouverture 363
7. Déclencher l'animation d'ouverture 364
8. Appliquer le masque 364
9. L'animation de fermeture 365
10. Déclencher l'animation de fermeture 365
11. Le code complet 365
12. L'affichage de la page 370
Chapitre 13 : Le multimédia : audio et vidéo
A. L'état des lieux 372
B. Insérer de l'audio 372
1. L'élément audio 372
2. Les contrôles audio 372
3. L'apparence du lecteur audio 373
4. Les attributs pour l'audio 373
5. Les formats audio 374
6. Créez vos contrôles 375
7. Les anciens navigateurs 376
C. Insérer de la vidéo 376
1. L'élément vidéo 376
2. Les attributs pour la vidéo 376
3. L'apparence du lecteur vidéo 377
4. Les formats vidéo 379
5. Convertir les vidéos 380
Chapitre 14 : Le canevas de dessin
A. La création bitmap en JavaScript 382
B. Les techniques proposées 382
C. Dessiner un rectangle 382
1. Le canevas 382
2. Le rectangle 383
3. Le code complet et l'affichage 384
4. Ajouter une couleur de remplissage 385
5. Ajouter une ombre portée 385
D. Dessiner un cercle 386
E. Dessiner des tracés 387
F. Dessiner des contours 387
G. Ajouter du texte 388
H. Ajouter un dégradé 389
I. Les transformations 390
J. La manipulation des objets 390
Chapitre 15 : Le design Web adaptatif
A. L'état des lieux et l'objectif 392
B. Les requêtes de média 392
1. L'objectif 392
2. Avec l'HTML 4 et les CSS 2.1 392
3. Les critères des requêtes de média CSS3 393
4. La syntaxe des requêtes de média 394
5. Les valeurs minimales et maximales 394
6. Les opérateurs logiques 395
7. Des requêtes pour différents supports 396
C. La taille des écrans 397
1. La problématique actuelle 397
2. La taille du viewport 398
3. Les zooms à l'écran 401
4. Tester l'affichage sur des écrans 402
D. Les grilles fluides 407
1. Les techniques 407
2. Un exemple simple 407
3. Un exemple d'un site simple 409
4. Réaliser un design adaptatif simple 414
5. Des grilles adaptatives 419
E. Des images adaptatives 419
1. Le débordement des images 419
2. Imposer une largeur maximale 420
F. Créer du design adaptatif 423
1. Les deux stratégies 423
2. Concevoir un site adaptatif 424
3. D'autres exemples de design adaptatif 425
G. Le site Food Sense 425
1. Les affichages 425
2. La structure principale 428
3. Le viewport 431
4. L'affichage pour les grands écrans 431
5. L'affichage pour les tablettes 433
6. L'affichage pour les smartphones 436
H. Des thèmes WordPress adaptatifs 439
Chapitre 16 : Un design HTML5/CSS3 : The Cat Template
A. La source 442
B. La structure HTML5 443
1. Les deux parties 443
2. Le conteneur principal 443
3. L'en-tête 444
4. Le diaporama 445
5. Le message 446
6. Les quatre articles 447
7. L'article seul 448
8. Le pied de page 448
C. La mise en forme CSS3 449
1. L'objectif 449
2. Le diaporama 449
3. Les photos des articles 450
4. Le survol des photos des articles 451
5. Les boutons Read more 451
Chapitre 17 : Un design HTML5/CSS3 : Flip Thru
A. La source 454
B. La structure HTML5 455
1. La boîte principale 455
2. La barre de navigation 455
3. L'en-tête 456
4. La zone centrale 456
5. Le pied de page 457
C. La mise en forme CSS3 458
1. Le conteneur principal 458
2. Les images des articles 458
D. L'accordéon 459
1. Le fonctionnement 459
2. La structure 459
3. Le fond de l'accordéon 460
4. La liste <ul> 461
5. Les titres <h3> 461
6. Les articles 462
7. Les images des articles 463
8. Les survols 463
9. L'apparition des articles 464
Chapitre 18 : Un design HTML5/CSS3 : dConstruct 2011
A. La source 468
B. La structure HTML5 469
1. La structure principale 469
2. L'en-tête 469
3. Les orateurs 470
4. Les sponsors 471
5. Le pied de page 471
C. La mise en forme CSS3 472
1. Les polices incorporées 472
2. Les ombres portées sur les textes 474
3. Les ombres portées sur les conteneurs 475
D. Les effets de survol sur les orateurs 475
1. Le fonctionnement 475
2. La structure 477
3. Les styles initiaux 477
4. Le survol du lien 478
E. Le design adaptatif 479
1. L'affichage modifié 480
2. La barre de navigation principale 481
3. Le titre et le slogan 482
4. Les images des orateurs 483
Index 485
| | En ligne : | https://www.amazon.fr/HTML5-CSS3-Faites-%C3%A9voluer-%C3%A9dition/dp/2409003834/ [...] | | Permalink : | ./index.php?lvl=notice_display&id=32808 |
|  |
Ajouter le résultat dans votre panier Faire une suggestion Affiner la recherche Interroger des sources externesHTML5 et CSS3 / Christophe Aubry (cop. 2012)
