TP 06 : Mise en page et images de fond

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP, on continue à travailler sur la mise en page, cette fois en utilisant des images dans le CSS.

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-NUMETU.users.info.unicaen.fr/2020/L1-TW1/TP06/ex1/layout.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="NUMETU" />
en remplaçant NUMETU par votre numéro étudiant. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si votre numéro est 21012343, vous mettez <meta name="author" content="21012343" /> dans le head de votre page. Pour cet exercice, il est interdit de travailler en binôme.

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

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

  5. 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éménts (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.

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

    D'autre part sa largeur n'est plus contrainte par celle du body. Lui donner une largeur de 400 pixels. Utiliser l'inspecteur pour cocher/décocher la propriété position: absolute; et bien voir ce qui se passe.

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

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

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

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

  11. 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 — Site des recettes #

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/2020/L1-TW1/TP06/ex2/recettes.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 et extraire l'archive contenant l'« architecture » du site, reproduite ci-dessous :

./
|-- img/
|   |-- dindePanee.jpg
|   `-- logoSite.png
|-- recettes.html
`-- skin/
    |-- img/
    |   |-- boissons_hover.png
    |   |-- boissons.png
    |   |-- desserts_hover.png
    |   |-- desserts.png
    |   |-- entrees_hover.png
    |   |-- entrees.png
    |   |-- iconeCommentaires.png
    |   |-- iconePrix.png
    |   |-- iconeTemps.png
    |   |-- logoCC-by-nc-sa.png
    |   |-- logoFirefox.png
    |   |-- logoUbuntu.png
    |   |-- logoW3C.png
    |   |-- plats_hover.png
    |   `-- plats.png
    `-- screen.css

Les fichiers recettes.html et screen.css sont vides. Il va falloir les compléter, sans changer l'organisation des fichiers.

Pour commencer, examiner la hiérarchie des répertoires ; pourquoi y a-t-il deux répertoires « img » ? À quoi servent chacun d'eux ?

  1. Ajouter du contenu à la page HTML. Elle contiendra pour l'instant
    • la bannière du site, avec son titre (par exemple « Recettes à manger »)
    • un article intitulé « Escalopes de dinde panées » avec du « faux-texte » lorem ipsum (ou une variante)
    • un menu avec des liens vers « Entrées », « Plats », « Desserts » et « Boissons »
    • un pied de page contenant deux sections ; la première, « Notice légale », indique « Code HTML et CSS en licence CC-by-nc-sa », tandis que la seconde, « Partenaires », liste le W3C, Firefox et Ubuntu.
    Vous devriez obtenir quelque chose qui ressemble à la figure suivante.
    Modèle de HTML
  2. On va ajouter deux images dans le HTML : le logo du site et l'illustration de la recette. Le résultat pourra ressembler à la figure suivante.
    Modèle de HTML
  3. À présent, on commence à compléter le fichier screen.css, après l'avoir lié depuis la page HTML. On va tout d'abord placer les gros blocs dans la page.
    • Faire en sorte que le logo apparaisse à gauche du titre du site dans la bannière.
    • Le menu doit faire 400 pixels de largeur et apparaître à gauche de l'article.
    • Réduire la largeur de l'ensemble de la page, pour que le texte de l'article ne s'étale pas trop en largeur.
    • Les deux sections du pied de page doivent apparaître côte à côte.
    NB : on a mis l'article avant le menu dans le HTML, c'est une bonne pratique pour des raisons d'accessibilité : c'est mieux adapté pour les user agents qui n'appliquent pas le formatage visuel de CSS, comme par exemple les navigateurs audio ou en mode texte. Mais si on fait des colonnes avec une grille CSS, les éléments seront mis dans l'ordre du HTML, donc le menu sera à droite. Cependant il est possible de modifier l'ordre des éléments en CSS, avec la propriété order. Attention, cette propriété est bien adaptée pour cette utilisation, mais il ne faut pas en abuser : voir par exemple cet article sur les problèmes d'accessibilité qu'elle peut engendrer.
    On devrait obtenir quelque chose de similaire à la figure suivante.
    Modèle avec HTML et organisation des zones
  4. Modifier le CSS pour que la page ressemble au modèle suivant. On a amélioré l'affichage du titre, décalé le menu, encadré l'article, et modifié le pied de page.
    Modèle avec quelques améliorations
  5. Ajouter les logos de la licence et des partenaires depuis le CSS pour que le pied de page ressemble au modèle suivant.
    Modèle de pied de page
  6. Modifier le CSS de l'article et de son contenu pour obtenir le rendu suivant. NB : on a ajouté des coins arrondis et une ombre au cadre. NB2 : penser à aller voir les différents types de bordure avant de se compliquer la vie.
    Modèle de pied de page
  7. Copier le code suivant dans l'article, entre le titre et le contenu, sans le modifier :
    		<aside class="infos">
    			<div class="icone prix">Chère</div>
    			<div class="icone temps">Rapide</div>
    			<div class="icone commentaires">34 commentaires</div>
    		</aside>
    
    Modifier le CSS pour que l'article ressemble au modèle suivant.
    Modèle de pied de page
  8. Optionnel : Pour finir, utiliser une des techniques de remplacement d'image (voir ces notes de cours) pour remplacer les textes du menu par les images fournies, de manière à obtenir le modèle suivant. On fera en sorte que l'image change au survol des items du menu. Note : les images du menu ont été bricolées à partir de la police Kitchen Kapers II.

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