TP M1106 n°3 - Partie 1 sur 2 - Durée 2h
Sites web adaptatifs HTML 5 / CSS 3 avec une grille 12 colonnes
Résumé des épisodes précédents...
- Durant la première partie de la séance TP n°1 [TP1 partie 1], vous avez vu comment construire des pages web HTML 5 valide W3C autour des balises les plus courantes dont celles associées à la création de titres et paragraphes, de listes, de tableaux et de formulaires.
- Vous avez alors vu [TP1 partie 2 et TP2 partie 1] comment habiller avec le langage CSS ces éléments.
- Enfin, dans la deuxième partie de la séance TP n°2 [TP2 partie 2], vous avez revu les positionnements CSS (à connaître par ❤️😉!), et vous avez réalisé des menus horizontaux et verticaux en habillant (CSS) des listes de liens (HTML).
Objectifs de cette première partie de TP
- Dans cette première partie de cette séance TP n°3, vous allez voir comment construire un site web adaptatif HTML 5 / CSS 3.
- On pourrait préciser un site web adaptatif vitrine ou non dynamique, c'est-à-dire sans interaction avec l'utilisateur. Les sites web dynamiques seront vus au S2 en M2105.
- Plus précisément, vous allez réaliser ce site avec des positionnements flottants et une grille de 12 colonnes (méthode classique également utilisée par Bootstrap par exemple), et vous verrez comment rendre un site web adaptatif grâce aux viewport HTML 5 et media queries CSS 3.
- Cette construction est inspirée de ce tutoriel w3school.
Et après...
- Dans la deuxième partie de ce TP, vous verrez comment faire un site web adaptatif en utilisant cette fois le système de grille CSS Grid Layout.
- La séance TP n°4 sera dédiée à la réalisation de votre site web adaptatif personnel HTML 5 / CSS 3.
- La séance TP n°5 sera dédiée à la réalisation de votre second site web adaptatif personnel en utilisant le framework Bootstrap 4.
Dépôt de votre archive d'un répertoire contenant vos fichiers TP
- Vous êtes logué(e) sur une machine personnelle (Linux, Windows, Mac) et utilisé(e) l'éditeur qui vous convient (Sublime Text par exemple).
Vous déposerez alors en fin de séance une archive zip de ce répertoire sur Moodle (dépôt de vos archives zip TP). Un seul dépôt (une seule archive) pour les parties 1 et 2 de ce TP.
Propriété CSS box-sizing et dimensionnement des blocs CSS
Vous avez déjà utilisé cette propriété pour l'habillage d'un formulaire dans la première partie du TP n°2 (Démo MDN box-sizing). Nous revenons ici sur cette propriété, car elle est importante à connaître.
Par défaut - résultat obtenu avec box-sizing: content-box; - la largeur et la hauteur d'un élément sont calculées comme ceci (C'est le modèle classique de boîte CSS - Box Model en anglais) :
width + padding + border = largeur réelle d'un élément
hauteur + padding + border = hauteur réelle d'un élément
- Créez une page testDimensions.html contenant le code suivant pour tester cette propriété.
<!DOCTYPE html> <html> <head> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 20px; border: 1px solid red; } </style> </head> <body> <div class="div1">Un div de largeur 300px et hauteur 100px avec une bordure bleue continue de 1px. </div> <br/> <div class="div2">Un div de largeur 300px et hauteur 100px avec une bordure rouge continue de 1px <strong>et une marge interne de 20px</strong>.</div> </body> </html>
En modifiant la propriété box-sizing avec box-sizing: border-box; le navigateur compte la marge interne et la bordure dans la largeur et la hauteur d'un bloc.
En résumé (images issues de la doc MDN) :
- Modifiez le CSS de votre page testDimensions.html en ajoutant la propriété box-sizing: border-box; dans chacune des classes div1 et div2.
- Examinez ensuite les dimensions réelles des blocs div1 et div2 avec l'inspecteur Firefox.
Pour plus de précisions sur la propriété box-sizing, vous pouvez lire au besoin les docs MDN box-sizing et w3schools box-sizing.
Cette précision étant faite, vous allez maintenant réaliser un premier site web adaptatif avec une grille en pourcentage pour placer les blocs plus facilement.
Un premier site web adaptatif avec une grille en pourcentage
Vous avez dit site web adaptatif / responsive web design ?
De nos jours un site web peut se consulter sur de nombreux appareils : écrans d'ordinateurs fixes ou portables, tablettes, téléphones mobiles, liseuses, interfaces mode texte / consoles, ... Aussi pour rappel (cf TP1), un site web adaptatif ("responsive" en anglais) est un site permettant une bonne expérience de lecture et de navigation sur n'importe quel appareil.
Les documentations w3schools et MDN sur la création de site web adaptatif (ou "responsive web design" en anglais) sont respectivement là (w3schools) et là (MDN).
Mobile-first design
Le Mobile-first design est une philosophie de création de site web qui consiste à développer un site en commençant par les petits écrans puis les plus grands. Il aide à garantir que l'expérience de vos utilisateurs est homogène sur n'importe quel appareil. En outre, les sites sont de plus en plus consultés sur les téléphones mobiles (Transports en commun, facilités d'accès et d'utilisation, moindres coûts, ...).
Présentation du site web adaptatif à créer
On souhaite réaliser le site web illustré sur les images suivantes dans le cas d'un petit écran (plus petit que 600px de large / Téléphone mobile).
- Le site comporte 3 pages.
- Le bandeau d'en-tête, le menu, le bloc de texte annexe et le bandeau de pied de page sont commun à toutes les pages. Le contenu de chaque page ne varie donc que par le bloc contenu.
- La police d'écriture (font) pour tout le site est Lucida Sans, ou sans-serif sinon.
- Les couleurs employées sont :
- #003466 pour la couleur de fond des bandeaux d'en-tête et pied de page ;
- #28d0d0 pour la couleur de fond des items de menu et du bloc annexe ;
- #0D6889 pour la couleur de fond de l'item de menu de la page active (c'est-à-dire la page sur laquelle l'utilisateur se trouve) ;
- #F23000 pour la couleur de fond de l'item de menu survolé.
On souhaite ensuite avoir l'affichage suivant dès que l'écran (ou plutôt la "fenêtre de visualisation" ou la région visible de l'utilisateur) fait au moins 600px de large (Une tablette par exemple).
Enfin dès que la fenêtre de visualisation de l'utilisateur possède une largeur d'au minimum 768px (un ordinateur par exemple), on souhaite obtenir l'affichage suivant :
Pour réaliser ce site, nous vous présentons dans la suite deux choses :
- Comment utiliser un système de grille CSS de 12 colonnes pour agencer les blocs.
- Comment modifier l'organisation des blocs (le design du site) en fonction de la taille de la fenêtre du navigateur.
Vous pourrez alors réaliser le site après.
Positionnements flottants et taille en pourcentage avec une grille de 12 colonnes.
Pour réaliser ce site, on choisit de découper la largeur de l'écran en 12 colonnes (une méthode classique également utilisée par Bootstrap par exemple). Chaque colonne a donc une largeur exprimée en pourcentage de 100/12=8,33%.
Chaque ligne du site sera ainsi constituée de blocs occupant les 12 colonnes. Par exemple :
- une ligne avec un bloc occupant 4 colonnes et un bloc de 8 colonnes,
- ou une ligne composée de 4 blocs de 3 colonnes,
- ou encore une ligne composée d'un bloc de 12 colonnes.
Vous pouvez voir une illustration de cette grille dans la documentation w3schools. Cette partie de TP en est inspirée.
On a donc les organisations de blocs suivantes en fonction de la largeur de la taille du navigateur :
- Si la largeur est plus petite que 600px (Affichage "téléphone mobile"), le site comporte 5 lignes couvrant chacune les 12 colonnes
- La première ligne contient le bloc titre.
- La deuxième ligne contient le bloc menu.
- La troisième ligne contient le bloc contenu.
- La quatrième ligne comporte le bloc "blabla annexe".
- La cinquième ligne comporte le bloc bas de page.
- Si la largeur est d'au minimum 600px (affichage type "tablette"), le site comporte 4 lignes
- La première ligne contient le titre sur les 12 colonnes.
- La deuxième ligne comporte :
- Le bloc menu sur 3 colonnes.
- Le bloc contenu de la page sur 9 colonnes. (la somme fait 12)
- La troisième ligne comporte le bloc "blabla annexe" sur 12 colonnes.
- La quatrième ligne comporte le bloc bas de page sur 12 colonnes.
- Enfin, si la largeur est d'au minimum 768px (affichage type "ordinateur"), le site comporte 3 lignes
- La première ligne contient le bloc titre (contenant "Mon site") sur les 12 colonnes.
- La deuxième ligne est composée de 3 blocs :
- Le bloc menu sur 3 colonnes.
- Le bloc contenu de la page sur 6 colonnes.
- Le bloc "blabla annexe" sur 3 colonnes. (la somme fait 12)
- La troisième ligne contient le bloc bas de page (contenant "Blabla bas de page") sur les 12 colonnes.
Pour réaliser ces colonnes, vous allez vous servir des propriétés CSS suivantes déclarant des classes de bloc de largeurs de 1 à 12 colonnes.
.col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}
Par exemple un bloc de classe col-3 occupera 3 colonnes en largeur, un bloc de classe col-5 occupera 5 colonnes en largeur, ...
La propriété [class*="col-"] (Pour rappel "toutes les classes contenant "col-") vous permettra alors de configurer toutes les propriétés communes à ces blocs. Dans notre cas, ce sera un positionnement flottant à gauche - pour les avoir les unes à la suite des autres - et un peu de marge interne :
[class*="col-"] { float: left; padding: 15px; }
Dans un fichier HTML vous pourrez alors par exemple créer une ligne (row) avec un premier bloc couvrant 3 colonnes et un deuxième bloc couvrant 9 colonnes (la somme devant faire 12 colonnes et 100% de la largeur de la page) ainsi :
<div class="row"> <div class="col-3">...</div> <!-- 25% de largeur de page --> <div class="col-9">...</div> <!-- 75% de largeur de page --> </div>
Enfin pour que chaque ligne se finisse bien par un retour à la ligne (arrêt du positionnement flottant) et l'espace soit bien occupé (display:block) voici les propriétés qu'il faudra mettre pour la classe row :
.row::after { content: ""; clear: both; display: block; }
On aborde maintenant comment modifier le design du site (l'organisation des blocs) en fonction de la taille de la fenêtre du navigateur (Adaptivité du site).
Site web adaptatif / Responsive web design
HTML viewport
Pour que votre site s'adapte à l'écran, vous devrez d'abord ajouter la balise meta suivante à vos pages :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Le "viewport" (qu'on pourrait traduire en français par "fenêtre de visualisation") correspond à la région visible de l'utilisateur.
La propriété width=device-width demande à ce que la page s'adapte à la taille de l'écran de l'appareil de l'utilisateur.
La propriété initial-scale=1.0 fixe le niveau de zoom initial à l'ouverture de la page.
La documentation w3school est ici.
Vous pourrez ensuite ajuster votre design de site en fonction de la taille de la fenêtre du navigateur grâce aux règles @media ("media queries").
CSS media queries
Une règle @media permet d'exécuter un bloc de propriétés CSS (et donc définir un habillage) seulement si une certaine condition est vraie.
Voici la règle pour les fenêtres de visualisation de largeur maximum 600px (i.e. d'une largeur plus petite ou égale à 600px) (vous pourrez facilement généraliser pour n'importe quelle taille)
@media only screen and (max-width: 600px) { ... /* Règles CSS pour ce cas */ ... }
Voici la règle pour les fenêtres de visualisation de largeur minimum 600px (i.e. d'une largeur plus grande ou égale à 600px) (vous pourrez facilement généraliser pour n'importe quelle taille)
@media only screen and (min-width: 600px) {...}
Pour notre cas, en suivant l'approche mobile-first design, on part de l'habillage téléphone (pour un petit écran) puis on va ajouter des media queries concernant les modifications CSS dès que la fenêtre de visualisation dépasse 600px (~tablette) et dès que la fenêtre de visualisation dépasse 768px (les écrans plus grands). Ainsi le code CSS va ressembler à :
/* Design général en particulier pour les fenêtres plus petites que 600px; */ @media only screen and (min-width: 600px) { /* Modifications du design pour les fenêtres plus larges que 600px*/ } @media only screen and (min-width: 768px) { /* Modifications du design pour les fenêtres plus larges que 768px*/ }
Il est maintenant temps de mettre en pratique tout cela pour réaliser le site 🎉🎉🎉 (Enfin... Oui mais bon tout ce qui est avant est très important pour comprendre la suite...)
Réalisation du site
- Pour le site vous devez donc créer trois fichier HTML : page1.html, page2.html et page3.html correspondant à chacune des trois pages du site.
- Chaque page sera associée au même fichier d'habillage CSS siteGrillePourcentages.css.
- Créez votre première page page1.html à partir du code ci-dessous :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="siteGrillePourcentages.css"> <title> Mon Site en grille avec 12 colonnes </title> </head> <body> <div class="header"> <h1> Mon Site </h1> </div> <div class="menu"> <ul> <li><a href="page1.html" class="active">Page 1</a></li> <li><a href="page2.html">Page 2</a></li> <li><a href="page3.html">Page 3</a></li> </ul> </div> <div> <h1>Titre contenu page 1</h1> <p>Contenu de la page 1.</p> </div> <div class="aside"> <p> Blabla annexe </p> </div> <div class="footer"> <p> Blabla bas de page </p> </div> </body> </html>
- Remarquez la balise meta pour le viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="siteGrillePourcentages.css">
<div class="header"> <h1> Mon Site </h1> </div>
<div class="menu"> <ul> <li><a href="page1.html" class="active">Page 1</a></li> <li><a href="page2.html">Page 2</a></li> <li><a href="page3.html">Page 3</a></li> </ul> </div>
<div> <h1>Titre contenu page 1</h1> <p>Contenu de la page 1.</p> </div>
<div class="aside"> <p> Blabla annexe </p> </div>
<div class="footer"> <p> Blabla bas de page </p> </div>
Il faut ensuite considérer comment le site va évoluer en fonction de la taille de la fenêtre de visualisation. D'après le cahier des charges, on passe de deux blocs sur la deuxième ligne dans le cas d'un écran type tablette (au moins 600px de large) à trois blocs sur cette même ligne dans le cas des écrans les plus grands (au moins 768px de large).
Une stratégie consiste à utiliser deux grilles de 12 colonnes (i.e. deux types de classes CSS col-* et col-s-*) fonction de ces deux catégories d'écran (Bootstrap aussi fait cela pour plus de catégories - cf TP5). Ici pour l'affichage type téléphone, ce sera simple comme il n'y pas de découpage par ligne, chaque bloc occupera toute une ligne.
Dans le fichier CSS, on utilisera :
- le découpage suivant pour les écrans d'au moins 768px de large :
@media only screen and (min-width: 768px) { /* Autres écrans d'une largeur minimum de 768px */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} }
@media only screen and (min-width: 600px) { /* Pour petits écrans / tablettes */ .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} }
/* Mobile-first : pour téléphones portables*/ [class*="col-"] { width: 100%; }
Au final, il vous faut maintenant modifier la page page1.html pour qu'elle utilise les classes col- pour le design grand écran (largeur minimum de 768px) et les classes col-s pour le design petit écran (largeur minimum de 600px)
- Pour ce faire ajoutez une ligne <div class="row"> ... </div> contenant :
- pour le design grand écran (largeur minimum de 768px) (Utilisation des classes col-*) : le bloc menu sur 3 colonnes, le bloc contenu sur 6 colonnes et le bloc annexe sur 3 colonnes ;
- pour le design petit écran (largeur minimum de 600px) (Utilisation des classes col-s-*) : le bloc menu sur 3 colonnes, le bloc contenu sur 9 colonnes et le bloc annexe sur 12 colonnes (remarquez le passage à deux lignes dans un seul div de classe row dans ce cas);
<div class="row"> <div class="col-3 col-s-3 menu"> <ul> <li><a href="page1.html" class="active">Page 1</a></li> <li><a href="page2.html">Page 2</a></li> <li><a href="page3.html">Page 3</a></li> </ul> </div> <div class="col-6 col-s-9"> <h1>Titre contenu page 1</h1> <p>Contenu de la page 1.</p> </div> <div class="col-3 col-s-12"> <div class="aside"> <p> Blabla annexe </p> </div> </div> </div>
Il reste à construire le fichier d'habillage CSS siteGrillePourcentages.css.
- Pour commencer, vous utiliserez le modèle de boîte CSS alternatif avec box-sizing: border-box; afin que les dimensions de marges internes et bordures soient incluses dans les largeurs et hauteurs des éléments (plus facile pour les calculs de dimensions et l'utilisation des propriétés width:100% ou height:100% par exemple pour pas de débordements de blocs).
* { box-sizing: border-box; }
* { box-sizing: border-box; } .row::after { content: ""; clear: both; display: block; } html { /* Mettre la police Lucida Sans, sans-serif sinon. */ } .header { /* Couleur de fond #003466 */ /* Texte en blanc */ /* Marge interne 15 px */ } .menu ul { /* Ce qu'il faut pour un menu : Enlever les puces et mettre les marges externes et internes à 0 (cf TP précédent) */ } .menu li a{ /* Marges internes à 8 px */ /* Marge externe en bas à 7 px */ /* Couleur de fond #28d0d0 */ /* Texte en blanc */ /* Ce qu'il faut pour un menu : enlever les soulignements et mettre en balise de type bloc (cf TP précédent) */ } .menu li a:hover { /* Couleur de fond #F23000 */ } .menu li a.active { /* Couleur de fond #0D6889 */ } .aside { /* Couleur de fond #28d0d0 */ /* Texte en blanc */ /* Texte centré */ /* Taille de police 12 px */ /* Marge interne 15 px */ } .footer { /* Couleur de fond #003466 */ /* Texte en blanc */ /* Texte centré */ /* Taille de police 12 px */ /* Marge interne 15 px */ } [class*="col-"] { float: left; padding: 15px; } /* Mobile-first : pour téléphones portables*/ [class*="col-"] { width: 100%; } @media only screen and (min-width: 600px) { /* Pour petits écrans / tablettes */ .col-s-1 {width: 8.33%;} .col-s-2 {width: 16.66%;} .col-s-3 {width: 25%;} .col-s-4 {width: 33.33%;} .col-s-5 {width: 41.66%;} .col-s-6 {width: 50%;} .col-s-7 {width: 58.33%;} .col-s-8 {width: 66.66%;} .col-s-9 {width: 75%;} .col-s-10 {width: 83.33%;} .col-s-11 {width: 91.66%;} .col-s-12 {width: 100%;} } @media only screen and (min-width: 768px) { /* Autres écrans d'une largeur minimum de 768px */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} }
- Par rapport à la page page1.html, il vous faut changer le contenu du bloc contenu de la page et la page active dans le menu (l'item ayant la classe "active").
Via zoom partagez votre écran pour faire valider votre site par l'enseignant.
Une pause de 10 mn est possible avant de passer à la deuxième partie une fois tout fini. Si vous avez fini avant les 2h aidez les autres à finir aussi :-)