Blog ENI : Toute la veille numérique !
🎃 Jusqu'à -30% sur les
livres en ligne, vidéos et e-formations.
Code : GHOST30.
Cliquez ici !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Flexbox et Grid - Créer des sites modernes et responsives

Flexbox et Grid Créer des sites modernes et responsives

3 avis

Informations

Livraison possible dès le 17 octobre 2024
  • 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-02086-5
  • EAN : 9782409020865
  • Ref. ENI : OWFLGR

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-02087-2
  • EAN : 9782409020872
  • Ref. ENI : LNOWFLGR
Avec l'utilisation du Responsive Web Design, les techniques de mise en page des sites web ont beaucoup évolué ces dernières années ; de nouveaux modules du W3C ont fait leur apparition tels que Flexbox pour concevoir des mises en page flexibles et Grid pour des mises en page en grille. Ce livre s'adresse aux concepteurs de sites web et aux designers web ayant déjà la maîtrise de l'HTML5 et des CSS 3 qui souhaitent apprendre à utiliser...
Consulter des extraits du livre en ligne Aperçu du livre papier
  • Niveau Confirmé à Expert
  • Nombre de pages 274 pages
  • Parution octobre 2019
  • Niveau Initié à Confirmé
  • Parution octobre 2019
Avec l'utilisation du Responsive Web Design, les techniques de mise en page des sites web ont beaucoup évolué ces dernières années ; de nouveaux modules du W3C ont fait leur apparition tels que Flexbox pour concevoir des mises en page flexibles et Grid pour des mises en page en grille.

Ce livre s'adresse aux concepteurs de sites web et aux designers web ayant déjà la maîtrise de l'HTML5 et des CSS 3 qui souhaitent apprendre à utiliser Flexbox et Grid pour les aider à concevoir des sites web modernes et responsives.

La première partie est consacrée au module CSS Flexible Box Layout (usuellement nommé Flexbox) qui va vous permettre de créer des composants flexibles pour vos mises en page : des barres de navigation, des formulaires, des galeries photo, des mises en page avec des cartes, etc. Dans un premier temps, nous aborderons la création du conteneur parent qui va déterminer la direction d'affichage de ses éléments enfants. Puis, nous étudierons toutes les propriétés d'alignement des éléments enfants constituant la mise en page avec les nombreuses propriétés CSS dédiées. Nous terminerons cette première partie par la conception de nombreux composants et mises en page responsives.

La deuxième partie porte sur le module CSS Grid Layout (couramment nommé Grid). Ce module CSS va vous permettre de concevoir des mises en page sous forme de grille très élaborée. Nous étudierons la création du conteneur de grille parent avec les lignes, les colonnes et les gouttières. Nous étudierons aussi les propriétés de positionnement dans cette grille. Nous apprendrons à placer et à aligner les éléments enfants dans ces grilles afin de créer des mises en page bien structurées et responsives. Nous terminerons cette partie par l'étude concrète de nombreux exemples de mises en page avec des grilles fluides, responsives et imbriquées.

Les exemples de code utilisés dans le livre sont disponibles en téléchargement sur le site des Editions ENI www.editions-eni.fr.

Téléchargements

Introduction
  1. Introduction
Les mises en page flexibles
  1. Utiliser le module CSS Flexible Box Layout
    1. 1. La mise en page flexible
    2. 2. La spécification du W3C
  2. Les conteneurs flexibles
    1. 1. Le conteneur parent et les enfants flexibles
    2. 2. Le conteneur avec un affichage en blocs
    3. 3. Le conteneur avec un affichage en blocs en ligne
Le flux des enfants flexibles
  1. Définir la direction
    1. 1. La propriété de direction
    2. 2. La direction horizontale en ligne
    3. 3. La direction verticale en colonne
  2. Contrôler le flux des éléments enfants
    1. 1. Gérer le passage à la ligne
    2. 2. La propriété pour aller à laligne
    3. 3. La propriété raccourcie
  3. Le flux des éléments en blocs
Les alignements des enfants flexibles
  1. Les alignements sur l'axe principal
    1. 1. Les alignements sur l’axe horizontal
    2. 2. Les alignements sur l’axe vertical
  2. Les alignements sur l'axe secondaire
    1. 1. Les alignements sur l’axe vertical
    2. 2. Les alignements sur l’axe horizontal
  3. Les alignements et le passage à la ligne
  4. Les alignements sur les deux axes
    1. 1. Détermination des axes
    2. 2. L’axe principal horizontal
    3. 3. L’axe principal vertical
Les propriétés des enfants flexibles
  1. Introduction
  2. Modifier l'ordre d'affichage des enfants
  3. Modifier l'alignement des enfants
  4. Autoriser l'agrandissement des enfants
  5. Autoriser le rétrécissement des éléments enfants
  6. Définir la largeur des éléments enfants
  7. La syntaxe raccourcie des propriétés individuelles
  8. Créer une mise en page fluide
    1. 1. La structure initiale
    2. 2. Autoriser l’agrandissement des enfants
    3. 3. Créer un comportement flexible individuel
  9. Les dimensions appliquées
Des exemples de composants flexibles
  1. Créer des barres de navigation
    1. 1. Création d’une barre de menu simple
    2. 2. Création d’une barre de menu responsive
    3. 3. Création d’une barre de menu avec des icônes
  2. Exploiter les alignements des blocs
    1. 1. Centrer un élément enfant dans unparent
    2. 2. Aligner une image et du texte
    3. 3. Répartir uniformément des élémentsverticalement
    4. 4. Aligner régulièrement des images
  3. Créer des formulaires
    1. 1. Créer un champ de recherche de taille adaptée
    2. 2. Créer un formulaire complet
Des exemples de mise en page flexible
  1. Une mise en page plein écran et responsive
    1. 1. Les affichages obtenus
    2. 2. La structure flexible de la mise en page
    3. 3. Les propriétés pour l’élément<body></body>
    4. 4. Les propriétés pour l’élément<main></main>
    5. 5. Les propriétés CSS pour la miseen forme générale
    6. 6. La mise en page responsive
    7. 7. Le code complet de l’exemple
  2. Une autre mise en page plein écran
    1. 1. La structure de la mise en page
    2. 2. La règle CSS de <body></body>
    3. 3. Les règles CSS de <nav></nav>
    4. 4. La règle CSS de la boîte du contenu
    5. 5. La règle CSS de l’en-tête et dupied de page
    6. 6. La règle CSS de la zone principale
    7. 7. La règle CSS de l’article
    8. 8. La règle CSS pour la colonne latérale
    9. 9. Les autres règles CSS pour la mise en forme
    10. 10. Le code complet de cet exemple
  3. Créer une mise en page avec des cartes
    1. 1. Les affichages de la page
    2. 2. La structure de la page
    3. 3. Les règles CSS générales
    4. 4. La mise en page flexible et responsive
    5. 5. La gestion des liens
    6. 6. Le code complet de cet exemple
Les mises en page en grille
  1. La conception de grille de mise en page
  2. Le vocabulaire des grilles
  3. Une mise en page très simple en grille
  4. Les outils pour les concepteurs
    1. 1. Utiliser Mozilla Firefox
    2. 2. Les outils dédiés aux grilles
La structure de la grille
  1. Le conteneur de grille
  2. La déclaration des colonnes
  3. La déclaration des lignes
  4. La syntaxe raccourcie
  5. Utiliser l'unité fraction
  6. Utiliser des valeurs minimales et maximales
  7. Utiliser des valeurs répétées
  8. Insérer des gouttières
    1. 1. Définir des gouttières
    2. 2. Les gouttières horizontales
    3. 3. Les gouttières verticales
    4. 4. La syntaxe raccourcie pour les gouttières
  9. Le remplissage interne du conteneur
  10. La couleur d'arrière-plan du conteneur
Le positionnement dans la grille
  1. Positionner automatiquement les éléments dans la grille
    1. 1. La position des enfants
    2. 2. Les enfants supplémentaires
    3. 3. La largeur des colonnes supplémentaires
    4. 4. La hauteur des lignes supplémentaires
  2. Placer les éléments sur les lignes
    1. 1. La structure de la mise en page souhaitée
    2. 2. Placer les éléments sur les lignesde la grille
    3. 3. Rendre la grille responsive
  3. Exploiter toutes les numérotations des lignes
    1. 1. La structure HTML et les CSS initiales
    2. 2. Utiliser les numéros négatifs
    3. 3. Utiliser les numéros implicites
  4. Nommer les lignes de la grille
  5. Nommer des zones de la grille
  6. Fusionner des cellules
Gérer les éléments enfants dans la grille
  1. Modifier l'ordre d'affichage des enfants dans la grille
  2. Aligner les cellules dans la grille
    1. 1. Le module CSS pour les alignements
    2. 2. La structure et les CSS utilisées
    3. 3. Les alignements sur l’axe horizontal
    4. 4. Les alignements sur l’axe vertical
  3. Aligner les enfants dans la grille
    1. 1. Aligner horizontalement les enfants dans leur cellule
    2. 2. Aligner verticalement les élémentsenfants dans leur cellule
    3. 3. Aligner les éléments enfants surles deux axes dans leur cellule
  4. Aligner un élément enfant dans la grille
Exemples de mise en page avec des grilles
  1. Une mise en page responsive
    1. 1. Les affichages responsives
    2. 2. La structure HTML de la grille
    3. 3. Les styles CSS en Mobile First
    4. 4. La requête de média pour les écransdes tablettes
    5. 5. La requête de média pour les grands écrans
    6. 6. Le code complet de la grille responsive
  2. Une mise en page avec deux grilles imbriquées
    1. 1. La structure HTML de la grille imbriquée
    2. 2. Les règles CSS de la grille parente
    3. 3. Les règles CSS de la grille imbriquée
    4. 4. Le code complet des grilles imbriquées
  3. Une galerie d'images fluide
    1. 1. La structure HTML de la galerie
    2. 2. La règle CSS pour le conteneur de la grille
    3. 3. Les règles CSS pour le positionnement desimages
    4. 4. Les règles CSS pour la mise en forme
    5. 5. Le code complet de la galerie
  4. Une mise en page fluide avec des cartes
    1. 1. Les affichages fluides
    2. 2. La structure de la mise en page
    3. 3. Les styles pour la grille
    4. 4. La mise en forme des cartes
    5. 5. Les styles pour la mise en forme
    6. 6. Le code complet de cette mise en page
  5. Une mise en page fluide avec des fusions de cellules
    1. 1. Les affichages fluides de la grille
    2. 2. La structure de la grille
    3. 3. Le style CSS pour la grille
    4. 4. Les styles CSS pour placer les élémentsde la grille
    5. 5. Les autres styles de mise en forme
    6. 6. Le code complet de la grille fluide
5/5 3 avis

Superbe

Nathalie a

Très bien

Anonyme

explications claires avec beaucoup d exemples.

Anonyme
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 et vidéos aux Editions ENI (HTML/CSS, RWD, WordPress, Drupal, Joomla…), il reste au fait des nouveautés concernant la conception des sites web en effectuant une veille technologique régulière. Il est également le créateur de la chaîne YouTube LaTeX et la plume.

En savoir plus

Découvrir tous ses livres

  • HTML5 et CSS 3 Exploiter les standards du Web (5e édition)
  • InDesign 2023 Les fondamentaux de la mise en page
  • HTML5 et CSS 3 Maîtrisez les standards de la création de sites web (3e édition)
  • Photoshop, Illustrator et InDesign 2023 Coffret de 3 livres : Maîtrisez la suite graphique Adobe
  • Photoshop, Illustrator et InDesign 2023 Les fondamentaux
  • InDesign 2023 Pour PC et Mac
  • WordPress Un CMS pour créer et gérer blogs et sites web (2e édition)
  • 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
  • Drupal 9 Créer des sites structurés
  • 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
  • Affinity Photo Maîtrisez la retouche et le montage photos
  • WordPress et WooCommerce (2e édition) Créer votre boutique en ligne
  • WordPress 5 Complément vidéo : Création et mise en valeur des contenus - Version en ligne
  • InDesign CC pour PC/Mac (édition 2019) Les fonctions essentielles
  • 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
  • Responsive Web Design Les techniques modernes de mise en page
  • Illustrator CS6
  • InDesign CS6 Les fonctions PAO essentielles
  • Photoshop CS6 Les fonctions essentielles de retouche et montage photo
  • Développement Fullstack Coffret de 3 livres : HTML5, CSS3, C#12 et ASP.Net Core MVC (2e édition)

Nos nouveautés

voir plus