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...
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.
4. La requête de média pour les écransdes tablettes
5. La requête de média pour les grands écrans
6. Le code complet de la grille responsive
Une mise en page avec deux grilles imbriquées
1. La structure HTML de la grille imbriquée
2. Les règles CSS de la grille parente
3. Les règles CSS de la grille imbriquée
4. Le code complet des grilles imbriquées
Une galerie d'images fluide
1. La structure HTML de la galerie
2. La règle CSS pour le conteneur de la grille
3. Les règles CSS pour le positionnement desimages
4. Les règles CSS pour la mise en forme
5. Le code complet de la galerie
Une mise en page fluide avec des cartes
1. Les affichages fluides
2. La structure de la mise en page
3. Les styles pour la grille
4. La mise en forme des cartes
5. Les styles pour la mise en forme
6. Le code complet de cette mise en page
Une mise en page fluide avec des fusions de cellules
1. Les affichages fluides de la grille
2. La structure de la grille
3. Le style CSS pour la grille
4. Les styles CSS pour placer les élémentsde la grille
5. Les autres styles de mise en forme
6. Le code complet de la grille fluide
Superbe
Nathalie a
Très bien
Anonyme
explications claires avec beaucoup d exemples.
Anonyme
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.