TP 08 : Outils classiques de mise en page « locale »

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP, on manipule les outils (plus ou moins) classiques qui permettent de modifier la position des objets : propriétés position et float, ainsi que display: inline-block. Il est important de les connaître, mais il faut bien comprendre qu'ils ne sont utiles que pour des besoins très spécifiques. Ils ne faut pas les utiliser pour gérer la mise en page globale : les grilles CSS sont là pour ça.

Notes de cours

Exercice 1 — Techniques de base de mise en page #

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

https://dev-LOGIN.users.info.unicaen.fr/TW1-2023/TP08/ex1/layout.html
(en remplaçant LOGIN par votre nom de login). 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="LOGINS" />
en remplaçant LOGINS par les noms de login 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 dupont210 et durand212 ont travaillé ensemble, ils mettent <meta name="author" content="dupont210,durand212" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui. Attention, le travail en binôme est réservé aux cas où il n'y a pas assez de machines disponibles.

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 (vous pouvez voir ici l'apparence initiale de la page). Placer ces fichiers au bon endroit sur votre serveur (voir les instructions dans l'encadré rouge ci-dessus). Ouvrez l'URL correspondante sur votre navigateur (NB: l'URL dans la barre d'adresse doit commencer par https://, sinon c'est que vous ne regardez pas la bonne page ; demandez de l'aide).

Dans cet exercice, on va manipuler des propriétés classiques de mise en page, indépendantes des grilles CSS que l'on a vues la semaine dernière. Les règles déjà présentes dans le CSS ne font qu'ajouter des couleurs et des bordures.

Quand l'exercice pose des questions, vous devez y répondre en mettant des commentaires dans le fichier CSS. (Rappel : la syntaxe des commentaires CSS, /* c'est ça */) N'hésitez pas à utiliser l'inspecteur de Firefox (voir TP précédent) pour cocher/décocher les propriétés étudiées, afin de mieux voir les différences.

  1. Ajouter les propriétés margin: 30px;, width: 10em; et height: 20em; à la règle concernant les éléments de type strong.

Vous aviez constaté la semaine dernière que seules les marges horizontales étaient prises en compte sur les éléments de flux (= éléments « inline ») ; vous constatez maintenant que width et height n'ont également pas d'effet sur eux.

  1. Ajouter maintenant la propriété display: block; à la règle. Expliquer ce qui se passe.

  2. Résultat attendu à la fin de cette question
    Résultat attendu à la fin de cette question

    Modifier la propriété en display: inline-block;. Constater qu'avec cette valeur de display, notre élément se comporte à la fois comme un élément de flux (il s'inscrit dans le flux du texte), et comme un bloc (qui respecte la largeur et les marges qu'on lui a données).

  3. On constate cependant que l'alignement vertical de l'élément avec le texte est un peu étrange. Quand on insère une image au milieu d'un texte, l'image se retrouve « posée » sur la baseline du texte (la ligne sur laquelle les caractères sont posés). On pourrait s'attendre à ce que ce soit la même chose pour notre élément en inline-block, mais non : c'est la baseline de l'élément qui est alignée avec celle du texte autour, et cette baseline est définie comme celle de sa dernière ligne de texte. (A contrario, une image n'étant pas du texte, sa baseline est définie comme le bord inférieur de sa marge du bas.)

    En tout cas, comme pour les images, on peut modifier l'alignement vertical de notre élément inline-block avec la propriété vertical-align : tester plusieurs valeurs.

  4. Ajouter la propriété float: right à la règle sur les éléments de type strong. Que se passe-t-il ? Constater que l'élément a été sorti du flux normal : la phrase qui précède l'élément dans le HTML et celle qui le suit se retrouvent accolées.

    Inspecter l'élément (avec l'inspecteur de Firefox) : vous devriez voir que les propriétés display: inline-block et vertical-align sont grisées, et accompagnées d'une petite icône « i ». Si vous passez la souris sur l'icône, Firefox vous explique, en gros, que ces propriétés n'ont pas d'effet sur un élément flottant (plus précisément : un élément flottant est toujours mis en display: block, or la propriété vertical-align est sans effet sur un élément en display: block).

    Constater également que notre élément dépasse de son paragraphe parent, et déborde dans le paragraphe suivant, dont il repousse également le texte. C'est un comportement logique : lorsque l'on désire avoir un bloc ou une figure « flottante », on veut qu'elle soit indépendante du texte.

  5. Résultat attendu à la fin de cette question
    Résultat attendu à la fin de cette question

    Il peut cependant parfois être ennuyeux que la mise en page d'un élément soit perturbée par un flottant précédent. On peut empêcher ça avec la propriété clear. Le paragraphe qui suit celui avec l'élément strong possède un identifiant, next-paragraph. Ajouter une règle qui s'applique à cet identifiant et qui contient la propriété clear: right;. Expliquer ce que ça change.

  6. On s'intéresse maintenant à l'élément de type h1 (le titre principal de la page). Ajouter la propriété position: relative; dans la règle qui le concerne. Constater que visuellement, rien ne se passe.

    Ajouter maintenant les propriétés top: 200px; et right: 50px; à la règle. Que se passe-t-il ? Constater que seul le h1 a bougé : tout le reste de la page est resté à sa place. L'élément occupe toujours son espace initial, mais il a été décalé, et il recouvre même une partie des autres éléments (on les voit toujours car la couleur de fond du h1 n'est pas opaque). Utiliser l'inspecteur pour cocher/décocher la propriété position: relative; et bien voir ce qui se passe.

    Ajouter la propriété z-index: -1; à la règle. Quelle est la différence ?

    Avant de passer à la suite, remettre le h1 en position: static (c'est la valeur par défaut), sans toucher au reste des propriétés.

  7. On s'intéresse maintenant à l'élément de type aside juste dessous.

    Ajouter la propriété position: absolute; dans la règle qui le concerne. Constater que l'élément ne bouge pas, mais est « sorti du flux » des éléments : il n'est plus pris en compte pour la mise en page, et les autres éléments se retrouvent donc dessous (heureusement, il n'est pas opaque lui non plus). Utiliser l'inspecteur pour cocher/décocher la propriété position: absolute; et bien voir ce qui se passe.

    En plus d'être sorti du flux, vous devriez constater que la largeur de l'élément n'est plus contrainte par celle du body. Lui donner une largeur de 400 pixels.

  8. Pour l'instant l'élément est resté à sa place : on va le faire bouger. Ajouter les propriétés top: 10px; et right: 50px; à la règle portant sur le aside. Que se passe-t-il ? À quoi correspondent les longueurs 10 et 50 pixels ?

  9. Modifier la propriété right pour mettre -300px : que se passe-t-il ?

  10. Dérouler (« scroller ») la page vers le bas (zoomer sur la page si elle n'est pas assez longue). Constater que le aside disparaît : il est positionné par rapport au canevas, c'est-à-dire à la boîte de la page entière.

  11. Résultat attendu à la fin de cette question
    Résultat attendu à la fin de cette question

    Ajouter une propriété position: relative sur le body. Constater que cette propriété, toute seule, n'a pas d'effet sur le body (comme on l'avait vu précédemment sur le h1), mais qu'elle a un effet sur le aside: lequel et pourquoi ? (Ne pas hésiter à aller voir le cours…)

  12. Changer la valeur de position à fixed à la place de absolute : que se passe-t-il ? (Essayer de scroller.)

    On voit que ces deux valeurs de position fonctionnent de manière proche, mais fixed positionne l'élément par rapport au viewport (c'est-à-dire la fenêtre du navigateur), pas à la boîte de la page ou d'un de ses éléments.

Exercice 2 — Reproduction d’un modèle simple #

Cet exercice était proposé en optionnel au TP précédent. Attention, ce n’est spécialement une application des méthodes vues à l’exercice 1 ! C’est au contraire une bonne application des grilles CSS.

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).

Exercice 3 (optionnel) — Reproduction d’une page simple avec des images #

Attention, cet exercice n’est pas non plus spécialement une application des méthodes vues à l’exercice 1. C’est juste un entraînement à la reproduction d’un site. Pour la mise en page, utilisez toujours les grilles CSS en priorité.

On vous donne une image d'une page web, version très simplifiée d'une page du site du fabricant d'instruments de musique Fender.

Capture d'écran de la page Fender Stratocaster
Capture d'écran de la page à reproduire

On vous demande de créer le code HTML et CSS permettant de reproduire ce modèle, en portant une attention particulière à la catégorisation des images : quelles sont celles qui font partie du contenu (et vont donc dans le HTML) celles qui sont purement présentationnelles (et vont donc dans le CSS), et celles pour qui c'est ambigu (et vous avez donc le choix) ?

N.B. : les choix faits sur la page originale ne sont pas forcément les bons choix ! (En l'occurrence, le code n'étant à première vue pas de toute première qualité, il est particulièrement déconseillé de s'en inspirer…)

Les images nécessaires et les textes sont dans cette archive. Informations complémentaires :

  • La colonne principale fait 970 pixels de largeur.
  • La couleur du texte est #333, sauf dans le pied de page où c'est #999.
  • Les bordures sont toutes de couleur #e5e5e5.
  • La couleur de fond des colonnes de détails est #f5f5f5, et elles font 180 pixels de largeur.
  • L'image de fond de la page est GlobalBackground.gif.

Il est recommandé d'utiliser l'architecture de fichiers suivante, qui permet de bien séparer le contenu et la présentation tout en restant pratique d'utilisation :

--./
  |--index.html
  |--images/
  |  |-- …
  |  `-- …
  `--skin/
     |--screen.css
     `--images/
        |-- …
        `-- …

Efforcez-vous d'écrire du code propre, c'est-à-dire bien structuré et sémantique. D'autre part, la priorité est d'obtenir un résultat fonctionnel minimal, c'est-à-dire d'avoir une page lisible même si tous les détails de la présentation ne sont pas mis en place.