TP 05 : Principes de la mise en page avec les grilles CSS

Licence Informatique/Maths 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Ce TP vise à vous faire manipuler l'outil de base de la mise en page moderne : les grilles CSS.

Attention, les grilles CSS sont un ajout assez récent : ce que nous allons voir ne fonctionnera pas forcément sur tous les navigateurs (en particulier ceux qui sont un peu anciens). Comme indiqué dès le début, tous les TP doivent être faits sous Firefox.

Notes de cours

Exercice 1 — Introduction à la mise en page avec les grilles CSS #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW1/TP05/ex1/grid.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Télécharger cette archive, elle contient un fichier HTML et une feuille de style CSS qui lui est associée. Le document HTML contient un div de classe conteneur avec trois éléments section dedans. Les règles déjà présentes dans le CSS ne font qu'ajouter des couleurs et des bordures. En particulier, le conteneur a un fond rouge et les sections ont un fond jaune.

Dans cet exercice, on va utiliser les grilles CSS pour présenter les trois sections en colonnes, et ce faisant découvrir tous les aspects des grilles CSS qui sont nécessaires dans ce cours, ce qui ne représente qu'une petite partie des possibilités qu'elles offrent.

Il n'y a pas de notes de cours sur les grilles : cet exercice sert d'introduction, et pour les détails techniques vous pouvez vous tourner vers les ressources suivantes :

  1. Ajouter dans la feuille de style les propriétés suivantes au conteneur, et observer ce qui se passe :

    display: grid;
    grid-template-columns: 200px 300px 200px;
    

    Les sections devraient se retrouver en colonnes, sans qu'on n'ait eu besoin de leur appliquer de propriétés : la mise en forme est spécifiée au niveau du parent (contrairement aux techniques utilisant display: float ou display: inline-block).

  2. Les trois valeurs que l'on a mises dans grid-template-columns sont les largeurs des trois colonnes. Essayer d'autres largeurs, éventuellement avec d'autres unités (pourcentages, em…), puis revenir à la version initiale.

  3. Normalement, si votre écran est suffisamment grand, il devrait rester de l'espace à droite dans le conteneur. On peut gérer le positionnement de nos colonnes dans la largeur disponible avec la propriété justify-content (toujours sur le conteneur). Essayer les diverses valeurs possibles et en choisir une.

  4. Penchons-nous à nouveau sur la propriété grid-template-columns. Remplacer une des trois longueurs par la valeur 1fr. Que se passe-t-il ?

  5. L'unité fr signifie « fraction » : chaque colonne dont la largeur est donnée en fr aura une largeur proportionnelle au nombre de fr indiqué. En particulier, dans notre cas, l'espace disponible est distribué aux deux colonnes proportionnellement à leur fr.

    Remplacer la largeur d'une autre colonne par 3fr. Que se passe-t-il ? Essayer d'autres valeurs.

  6. Ajouter la propriété grid-gap: 10px sur le conteneur. Constater que la proportionnalité entre les colonnes spécifiées avec des fr est toujours respectée.
  7. Enlever une des trois valeurs, afin de ne spécifier que deux colonnes. Que se passe-t-il ?
  8. S'il n'y a pas assez de colonnes, les éléments en trop « passent à la ligne » : une nouvelle rangée est créée en-dessous de la première. On peut donc choisir le nombre de colonnes indépendamment du nombre d'éléments dans le conteneur.

    Il est possible de spécifier les hauteurs des rangées avec grid-template-rows (toujours sur le conteneur). Essayer de mettre 300px 50px. Que se passe-t-il ?

  9. De façon générale, c'est une très mauvaise idée de fixer des hauteurs en CSS, car le contenu peut dépasser et/ou se retrouver caché. On fixe les dimensions horizontales et on laisse au navigateur la liberté d'adapter les dimensions verticales (en fonction du contenu, de la taille de la police ou de la fenêtre).

    On n'aura donc généralement pas besoin de spécifier la hauteur des rangées en pixels. Cependant on peut utiliser des fr : le navigateur calculera des hauteurs qui ne font pas dépasser le contenu. Utiliser les valeurs suivantes :

    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 3fr;
    

    On voit que la deuxième rangée est effectivement trois fois plus haute que la première.

  10. Ajouter un quatrième élément section dans le conteneur, avec très peu de texte (typiquement un seul mot, pas de titre). Normalement, cette nouvelle section devrait être beaucoup plus grande que son contenu. Cela va nous permettre d'expérimenter les propriétés justify-items et align-items (toujours sur le conteneur). Attention, bien faire la différence entre justify-content, qui modifie la position des colonnes dans le conteneur, et justify-items, qui modifie la position des éléments dans leur colonne.

    La valeur par défaut de ces deux propriétés est stretch : la boîte s'étire pour remplir sa cellule. Tester d'autres valeurs pour ces deux propriétés (center, start ou end).

  11. Si on choisit center pour les deux, la taille des rangées et des colonnes commence à devenir moins claire. L'inspecteur de Firefox intègre un outil pour visualiser les grilles : chercher le conteneur dans la vue HTML et cliquer sur le petit « grid » à sa droite. Des lignes apparaissent dans la page pour matérialiser la grille. (Il y a quelques options dans l'onglet « Mise en page » du cadre de droite.)
  12. Donner un identifiant à la quatrième section, et utiliser cet identifiant dans la feuille de style pour donner à cet élément les propriétés suivantes :

    justify-self: stretch;
    align-self: stretch;
    

    On peut ainsi appliquer des propriétés d'alignement à un unique fils du conteneur.

  13. Pour finir, il est important de comprendre que la mise en page web se fait toujours hiérarchiquement : on positionne les grosses zones, puis on s'occupe du contenu de chaque zone, et ce récursivement jusqu'aux feuilles de l'arbre DOM.

    À titre d'exemple, remplacer le contenu de la quatrième section par une liste (ul) de six items, puis passer le ul en display: grid et utiliser grid-template-columns et grid-template-rows pour afficher les items sur une grille ayant 2 rangées de 3 colonnes (dont vous êtes libres de choisir les dimensions). Attention, contrairement à div et section, les éléments ul et li ont des propriétés CSS par défaut (notamment des marges et paddings) : il faudra en enlever ou en modifier pour faire quelque chose de propre !

    Capture d'écran du résultat final
    Un résultat final possible

Exercice 2 — Mise en pratique des grilles CSS #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW1/TP05/ex2/index.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Récupérer cette archive et la décompresser à un endroit approprié. Elle contient une page HTML (avec une bannière, un pied de page, un menu de navigation, un article principal et un encadré d'information), ainsi que deux feuilles de style. La première, base.css, règle certains détails de présentation (on peut voir le résultat ici), et une feuille de style layout.css vide, qui va servir à régler la mise en page.

Compléter la feuille de style layout.css pour que la page respecte le modèle suivant, en utilisant les grilles CSS. Attention, excepté pour l'ajout de vos numétus dans la balise meta, vous ne devez pas modifier le HTML (ni base.css), tout doit être fait dans la feuille de style !

Quelques précisions :

  • Les items du menu doivent faire 15em de largeur
  • L'encadré bleu doit faire 200 pixels de large, tandis que l'article principal doit prendre tout le reste de la largeur.
  • L'encadré bleu doit être centré verticalement par rapport à l'article.

Pour le reste, vous êtes libres de choisir les dimensions, tant que le résultat ressemble au modèle.

Modèle à réaliser
Capture d'écran de la page à réaliser.

Exercice 3 (optionnel) — Reproduction d’un modèle simple #

Cet exercice consiste à reproduire l'apparence d'une version (très) simplifiée de la page d'accueil d'un site de vente de céramiques. Reproduire un site web existant est une des manières les plus efficaces de progresser.

Modèle de la page à reproduire

On vous fournit le HTML, les images, et une feuille de style (presque) vide dans cette archive. À vous de la compléter pour obtenir un rendu le plus proche possible du modèle, sans modifier le HTML  !

Les tailles (hauteurs, textes) n'ont pas d'importance, faites au mieux. Les trois fonds gris en haut à droite sont #F9F9F9, #F4F4F4, et #EDEDED. Les couleurs de fond des blocs sont #DBEAD8 (vert), #C2D4D8 (bleu), et #B0ABC3 (violet).

Note : il n'est pas interdit d'aller voir le CSS du site original, mais ça ne devrait pas vraiment vous aider (plutôt l'inverse).