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.
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.
- Ajouter les propriétés
margin: 30px;
,width: 10em;
etheight: 20em;
à la règle concernant les éléments de typestrong
.
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.
-
Ajouter maintenant la propriété
display: block;
à la règle. Expliquer ce qui se passe. -
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). -
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. -
Ajouter la propriété
float: right
à la règle sur les éléments de typestrong
. 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
etvertical-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 endisplay: block
, or la propriétévertical-align
est sans effet sur un élément endisplay: 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.
-
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émentstrong
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. -
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;
etright: 50px;
à la règle. Que se passe-t-il ? Constater que seul leh1
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 duh1
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
enposition: static
(c'est la valeur par défaut), sans toucher au reste des propriétés. -
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. -
Pour l'instant l'élément est resté à sa place : on va le faire bouger. Ajouter les propriétés
top: 10px;
etright: 50px;
à la règle portant sur leaside
. Que se passe-t-il ? À quoi correspondent les longueurs 10 et 50 pixels ? -
Modifier la propriété
right
pour mettre-300px
: que se passe-t-il ? -
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. -
Ajouter une propriété
position: relative
sur lebody
. Constater que cette propriété, toute seule, n'a pas d'effet sur lebody
(comme on l'avait vu précédemment sur leh1
), mais qu'elle a un effet sur leaside
: lequel et pourquoi ? (Ne pas hésiter à aller voir le cours…) -
Changer la valeur de
position
àfixed
à la place deabsolute
: que se passe-t-il ? (Essayer de scroller.)On voit que ces deux valeurs de
position
fonctionnent de manière proche, maisfixed
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 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.
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 #
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.
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.