Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Formations en ligne à Excel, Word, Office, Teams... Formez-vous en toute autonomie. Je les découvre !
  1. Livres et vidéos
  2. Responsive Web Design, mises en page et grilles - Les techniques modernes de conception web (2e édition)

Responsive Web Design, mises en page et grilles Les techniques modernes de conception web (2e édition)

Responsive Web Design, mises en page et grilles - Les techniques modernes de conception web (2e édition)

Informations

Livraison possible dès le 05 octobre 2023
  • Livraison à partir de 0,01 €
  • Version en ligne offerte pendant 1 an
Livres rédigés par des auteurs francophones et imprimés à Nantes

Caractéristiques

  • Livre (broché) - 17 x 21 cm
  • ISBN : 978-2-409-00590-9
  • EAN : 9782409005909
  • Ref. ENI : OW2RWD5HTM

Informations

  • Consultable en ligne immédiatement après validation du paiement et pour une durée de 10 ans.
  • Version HTML
Livres rédigés par des auteurs francophones et imprimés à Nantes

Caractéristiques

  • HTML
  • ISBN : 978-2-409-00676-0
  • EAN : 9782409006760
  • Ref. ENI : LNOW2RWD5HTM
Les techniques de mise en page des sites web ont beaucoup évolué ces dernières années avec l'utilisation du Responsive Web Design et des requêtes de média ; récemment, de nouveaux modules du W3C ont fait leur apparition pour concevoir des mises en page flexibles, en multi colonnes et en grille. Ce livre débute par une présentation des différents problèmes de compatibilité qui subsistent...
Consulter des extraits du livre en ligne Aperçu du livre papier
  • Niveau Initié à Confirmé
  • Nombre de pages 360 pages
  • Parution décembre 2016
  • Niveau Initié à Confirmé
  • Parution décembre 2016
Les techniques de mise en page des sites web ont beaucoup évolué ces dernières années avec l'utilisation du Responsive Web Design et des requêtes de média ; récemment, de nouveaux modules du W3C ont fait leur apparition pour concevoir des mises en page flexibles, en multi colonnes et en grille.

Ce livre débute par une présentation des différents problèmes de compatibilité qui subsistent aujourd’hui. Nous ferons ensuite un rappel sur les méthodes de mise en page "classiques" et leur limitation avant d'introduire la technique de mise en page basée sur l'utilisation des tableaux et des CSS3.

Le Responsive Web Design est essentiellement basé sur les requêtes de média CSS3, les Media Queries : nous apprendrons à maîtriser cette technique à l'aide de nombreux exemples. Nous verrons ensuite les différents aspects de la mise en page responsive : les grilles, les images et la typographie. En nous basant sur de nombreux exemples, nous détaillerons les nouveaux modules du W3C : la mise en page flexible (module Flexible Box Layout ou Flexbox), la mise en page en multi colonnes (module Multi-column Layout) et la mise en page en grille (Grid Layout).

Pour nous aider à travailler plus efficacement, nous apprendrons à utiliser les bases de certains frameworks CSS qui permettent d'utiliser toute une série de composants HTML5/CSS3 pour concevoir efficacement des sites responsive.

Enfin nous terminerons en vous présentant les futures techniques avancées de mise en page qui sont en cours d'étude actuellement par le W3C.

Téléchargements

Introduction
  1. Le design Web aujourd'hui
  2. Le Responsive Web Design
  3. Les approches dans la conception
  4. Les objectifs du livre
  5. Les outils de l’intégrateur web
    1. 1. Les objectifs
    2. 2. Mozilla Firefox
    3. 3. Google Chrome
    4. 4. Apple Safari
    5. 5. Microsoft Internet Explorer et Edge
  6. Télécharger les exemples
Des solutions pour la compatibilité
  1. La disparité des navigateurs
  2. Pour une meilleure compatibilité
  3. Le rendu initial des navigateurs
  4. Normalize.css
    1. 1. Le projet
    2. 2. Télécharger Normalize.css
    3. 3. Installer Normalize.css
  5. Le HTML5 et html5shiv.js
    1. 1. L’objectif
    2. 2. Le fichier d’exemple
    3. 3. La librairie html5shiv.js
  6. Les requêtes de média et respond.js
    1. 1. L’objectif
    2. 2. Le fichier d’exemple
    3. 3. La librairie respond.js
  7. Les solutions de rechange et Modernizr.js
    1. 1. L’objectif
    2. 2. Télécharger Modernizr
    3. 3. Créer une page d’exemple
    4. 4. Installer et lier le script Modernizr
    5. 5. Mettre en action Modernizr
    6. 6. Utiliser les classes de Modernizr
  8. Les règles @supports
    1. 1. L’objectif
    2. 2. Utiliser les règles @supports
    3. 3. Les opérateurs
La mise en page classique
  1. Les designers et les intégrateurs
  2. Le modèle des boîtes
  3. Les marges des éléments
  4. L'affichage des éléments
  5. L'affichage dans le flux courant
  6. L'affichage en position absolue
  7. L'affichage en position fixée
  8. L'affichage en position relative
  9. Utiliser l'affichage en position relative et absolue
  10. L'affichage des boîtes flottantes
    1. 1. Le positionnement flottant
    2. 2. Placer des boîtes côte à côte
    3. 3. Interdire le flottement
    4. 4. Un exemple avec quatre boîtes
    5. 5. Une mise en page simpliste
    6. 6. Conclusion sur la mise en page en élémentflottant
La mise en page à l'aide des tableaux
  1. L'objectif
  2. La propriété display
  3. Une mise en page simple avec un tableau
  4. La largeur d'affichage du tableau
  5. Les éléments anonymes
  6. D'autres éléments pour les tableaux
    1. 1. Les paragraphes en cellule
    2. 2. Les listes en tableau
  7. L'affichage des lignes
  8. Définir la largeur des cellules
    1. 1. Les largeurs fixes
    2. 2. Les largeurs en pourcentage
  9. Une mise en page avec un tableau plus structuré
  10. Les autres propriétés d'affichage
    1. 1. La propriété table-layout
    2. 2. La propriété border-collapse
    3. 3. La propriété border-spacing
    4. 4. La propriété empty-cells
    5. 5. La propriété caption-side
  11. L'alignement vertical
  12. Conclusion
Les requêtes de média
  1. L'objectif
  2. Les origines
  3. Utiliser les requêtes de média
  4. La syntaxe des requêtes de média
  5. Les fonctionnalités à tester
  6. Où placer les requêtes de média
  7. La taille des écrans des mobiles
  8. La notion de viewport
  9. Un exemple très simple
    1. 1. La maquette
    2. 2. Le code HTML et CSS
  10. Les propriétés CSS pour des images responsive
    1. 1. Les images de premier plan
    2. 2. Les images d’arrière-plan
  11. Adapter les dimensions au viewport
  12. Une mise en page fluide
    1. 1. L’objectif
    2. 2. La mise en page fixe
    3. 3. La mise en page fluide
    4. 4. La largeur fluide des autres éléments
    5. 5. Les largeurs des images fluides
    6. 6. Afficher et redimensionner la page
    7. 7. Le code complet de la page
  13. Le script Response.js
    1. 1. Utiliser le JavaScript
    2. 2. Télécharger les JavaScript
    3. 3. Les liaisons aux JavaScript
    4. 4. Préparer les images
    5. 5. Le code de la page
    6. 6. Le fonctionnement du script
    7. 7. Optimiser les légendes
    8. 8. Le code complet de la page
  14. Les propositions d'avenir
    1. 1. Les nouveaux attributs pour <img>
    2. 2. L’attribut srcset pour des tailles d’image fixes
    3. 3. L’attribut srcset pour des largeurs disponibles
    4. 4. L’attribut size
    5. 5. Les nouveaux éléments <picture>et <source></picture>
  15. La typographie responsive
    1. 1. L’objectif
    2. 2. Les unités utilisées
    3. 3. L’unité em et la cascade
    4. 4. L’unité rem et la cascade
    5. 5. La typographie responsive et l’unité rem
    6. 6. La typographie responsive et les polices de caractère
    7. 7. Les unités liées au viewport
  16. Exemples de sites avec des requêtes de média
La mise en page multicolonne en CSS3
  1. Le module Multi-column Layout du W3C
  2. La compatibilité des navigateurs
  3. La conception en colonnes multiples
    1. 1. Le nombre de colonnes
    2. 2. La largeur des colonnes
    3. 3. La syntaxe courte
  4. L'espace entre les colonnes
    1. 1. La gouttière
    2. 2. Le filet de séparation
  5. La justification du texte
  6. Les sauts de colonne
  7. Les éléments transversaux
  8. La gestion du texte dans les colonnes
    1. 1. Le remplissage des colonnes
    2. 2. Le contenu trop large
    3. 3. Le débordement du contenu
  9. Le multicolonnage et le Responsive Web Design
    1. 1. Les requêtes de média
    2. 2. Une mise en page en colonnes multiples responsive
    3. 3. Un menu responsive en colonnes multiples
La mise en page flexible en CSS3
  1. Le module Flexible Box Layout du W3C
  2. La compatibilité des navigateurs
  3. La conception de mise en page flexible
  4. Le conteneur flexible
    1. 1. La définition du contexte flexible
    2. 2. La distribution des items flexibles
    3. 3. Le passage à la ligne
    4. 4. La syntaxe courte pour la distribution et le passage à laligne
    5. 5. La justification horizontale dans les lignes
    6. 6. La justification verticale dans les colonnes
    7. 7. L’alignement vertical dans les lignes
    8. 8. L’alignement horizontal dans les colonnes
    9. 9. Le passage à la ligne et l’alignement
  5. Les items flexibles
    1. 1. Le contexte des items flexibles
    2. 2. Modifier l’ordre d’affichage des items
    3. 3. L’alignement d’un item
    4. 4. L’agrandissement des items
    5. 5. La réduction des items
    6. 6. La largeur ou hauteur indicative
    7. 7. La syntaxe courte du redimensionnement
    8. 8. Définir la taille fixe des items avec flex
    9. 9. Définir la taille flexible des items avecflex
  6. Des exemples de mises en page
    1. 1. Une mise en page très simple
    2. 2. Une mise en page plus élaborée
    3. 3. Placer un item toujours en bas de son conteneur
  7. La mise en page flexible et le Responsive Web Design
La mise en page en grille CSS3
  1. Le module Grid Layout du W3C
  2. La compatibilité des navigateurs
    1. 1. Les navigateurs
    2. 2. Forcer la reconnaissance
    3. 3. Google Chrome
    4. 4. Mozilla Firefox
    5. 5. Apple Safari
  3. La terminologie de la grille
  4. La création d'une grille régulière
    1. 1. Les largeurs fixes des colonnes
    2. 2. Les largeurs disponibles des colonnes
    3. 3. Les largeurs relatives des colonnes
    4. 4. Les largeurs automatiques des colonnes
    5. 5. Les répétitions
    6. 6. Les hauteurs de rangées
  5. Nommer les zones de la grille
    1. 1. Nommer toutes les cellules
    2. 2. Le cas des cellules vides
    3. 3. Nommer des zones de cellules horizontalement
    4. 4. Nommer des zones de cellules verticalement
    5. 5. Nommer les lignes en une grille simple
    6. 6. Nommer les lignes en une grille élaborée
  6. La gestion des espaces de la grille
  7. Les justifications et alignements
    1. 1. La justification dans les colonnes
    2. 2. L’alignement dans les rangées
    3. 3. La justification et l’alignement dans les cellules
  8. La justification et l'alignement dans le conteneur
    1. 1. La justification horizontale
    2. 2. L’alignement vertical
  9. Le placement automatique
Les grilles de mise en page
  1. Les objectifs
  2. La grille Gridlex
    1. 1. Implémenter la grille
    2. 2. Les points de rupture
    3. 3. Placer trois blocs dans la grille
    4. 4. Créer une grille responsive avec les blocs
    5. 5. Placer les blocs dans la grille
    6. 6. Créer une grille responsive
    7. 7. Le positionnement automatique
    8. 8. Les gouttières
    9. 9. Une grille sur trois lignes
    10. 10. Les autres fonctionnalités de Gridlex
  3. La grille Grillade
    1. 1. Implémenter la grille
    2. 2. Les points de rupture
    3. 3. Une grille simple
    4. 4. Insérer une gouttière
    5. 5. Dimensionner les blocs sur la grille
    6. 6. Utiliser une grille multiligne
    7. 7. Pousser un bloc
  4. La grille Simple Grid
    1. 1. Implémenter la grille
    2. 2. Le point de rupture
    3. 3. Une mise en page avec une seule ligne
    4. 4. Une mise en page avec une plusieurs lignes
    5. 5. La mise en page en colonnes
    6. 6. Décaler des blocs
    7. 7. Des exceptions pour les smartphones
Les frameworks CSS
  1. Utiliser les frameworks CSS
  2. Des frameworks CSS
  3. Le framework Uikit
    1. 1. Utiliser Uikit
    2. 2. Télécharger le framework
    3. 3. Télécharger jQuery
    4. 4. Installer le framework
    5. 5. Créer une grille fluide
    6. 6. Utiliser la grille fluide
    7. 7. Utiliser la grille responsive d’Uikit
    8. 8. Créer une barre de navigation
    9. 9. Créer un tableau mis en forme
  4. Le framework Kube
    1. 1. Utiliser Kube
    2. 2. Télécharger le framework
    3. 3. Installer le framework
    4. 4. Créer une grille flexible
    5. 5. Exploiter une grille flexible
    6. 6. Insérer un formulaire
  5. Le framework Material Design Lite
    1. 1. Utiliser Material Design Lite
    2. 2. Les templates
    3. 3. Les liaisons pour les composants
    4. 4. Utiliser les composants
    5. 5. Les styles CSS pour la typographie
    6. 6. Personnaliser les couleurs
Le futur de la mise en page
  1. Les modules du W3C
  2. L'habillage
  3. Les modèles de page
  4. La mise en page des documents structurés
  5. Les régions
Auteur : Christophe AUBRY

Christophe AUBRY

Responsable pédagogique dans un centre de formation et formateur sur les technologies Web et les Arts graphiques pendant plus de quinze ans, Christophe AUBRY est aujourd’hui dirigeant de la société netPlume spécialisée dans la rédaction pédagogique et la création de sites internet. Auteur de nombreux livres aux Editions ENI notamment sur Dreamweaver, WordPress, Drupal, HTML et CSS, il reste au fait des nouveautés concernant la conception des sites web, en effectuant une veille technologique régulière et en intervenant dans de nombreux forums.   

Christophe AUBRY est le créateur de la chaîne YouTube " LaTeX et la plume ".


En savoir plus

Découvrir tous ses livres

  • Bootstrap 5 Un framework pour concevoir vos sites web
  • LaTeX Concevez vos premiers documents élaborés et structurés
  • Bootstrap 5 pour l'intégrateur web Concevez des sites au design moderne
  • WordPress Créer et gérer blogs et sites web
  • Photoshop, Illustrator et InDesign 2021 Les fondamentaux
  • WordPress Livre avec complément vidéo : Création et mise en valeur des contenus
  • HTML5, CSS3 et JavaScript Coffret de 2 livres : Apprenez à développer votre interface Front End (2e édition)
  • InDesign 2021 Les fondamentaux de la mise en page
  • Drupal 9 Créer des sites structurés
  • InDesign 2021 Livre avec complément vidéo : Les blocs dans une composition
  • Photoshop, Illustrator et InDesign 2021 Coffret de 3 livres : Maîtrisez la suite graphique Adobe
  • WordPress Un CMS pour créer et gérer blogs et sites web
  • LaTeX Conception de documents élaborés et structurés
  • InDesign 2021 Pour PC/Mac
  • LaTeX Concevez des documents élaborés et structurés
  • Développement Fullstack Coffret de 3 livres : HTML5, CSS3, C#8 et ASP.Net Core - Version en ligne
  • HTML5 et CSS3 Maîtrisez les standards de la création de sites web (2e édition)
  • Affinity Photo Maîtrisez la retouche et le montage photos
  • HTML5, CSS3 et Bootstrap 4 Coffret 2 livres
  • WordPress et WooCommerce (2e édition) Créer votre boutique en ligne
  • WordPress Conception et personnalisation des thèmes (4e édition)
  • WordPress 5 Complément vidéo : Création et mise en valeur des contenus - Version en ligne
  • Flexbox et Grid Créer des sites modernes et responsives
  • InDesign CC pour PC/Mac (édition 2019) Les fonctions essentielles
  • HTML5 et CSS3 Faites évoluer le design de vos sites web (4e édition)
  • JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
  • Dreamweaver CC pour PC/Mac (édition 2018) Concevoir des sites interactifs et attractifs
  • Créez votre premier site web De la conception à la réalisation (3e édition)
  • jQuery Le framework JavaScript pour des sites dynamiques et interactifs (4e édition)
  • Créez votre premier site web De la conception à la réalisation
  • HTML5 et CSS3 Découvrez les nouveaux standards du web
  • Responsive Web Design Les techniques modernes de mise en page
  • Réseaux sociaux Comprendre et maîtriser Facebook, Twitter, LinkedIn et Viadeo
  • Illustrator CS6
  • InDesign CS6 Les fonctions PAO essentielles
  • Photoshop CS6 Les fonctions essentielles de retouche et montage photo
  • WordPress Un CMS pour créer et gérer blogs et sites web (2e édition)

Nos nouveautés

voir plus