TP 10 : Infos sur le DM — Construction d'une page

Exercice 0 — Présentation du sujet du DM et conseils méthodologiques

Votre chargé·e de TP va vous présenter en détail ce que nous attendons de vous pour le DM (lien vers le sujet), et répondra à vos questions.

Merci de l'écouter attentivement et de ne pas commencer l'exercice du TP avant qu'il ou elle n'ait terminé !

 ⇒ Slides de la présentation (pour référence ultérieure)

Exercice 1 — Site des recettes #

https://dev-LOGIN.users.info.unicaen.fr/TW1-2024/TP10/ex1/recettes.html

<meta name="author" content="LOGINS" />

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.jpg
    |   |-- desserts.jpg
    |   |-- entrees.jpg
    |   |-- iconeCommentaires.png
    |   |-- iconePrix.png
    |   |-- iconeTemps.png
    |   |-- logoCC-by-nc-sa.png
    |   |-- logoFirefox.png
    |   |-- logoUbuntu.png
    |   |-- logoW3C.png
    |   `-- plats.jpg
    `-- 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.

   

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.

   

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.

   Remarque : pour placer des éléments côte-à-côte, on utilisera des grilles CSS ; cela nécessite donc qu'il y ait dans le HTML un élément « conteneur » autour des éléments en question. Vous aurez donc probablement besoin de modifier votre HTML pour ajouter des conteneurs à certains endroits.

   • 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 d'une grille 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.

   

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.

   

5. Ajouter les logos de la licence et des partenaires depuis le CSS pour que le pied de page ressemble au modèle suivant. Attention, les images étant purement décoratives, elles doivent bien être mises depuis le CSS, pas dans le HTML ; on pourra utiliser la technique décrite en cours pour décorer un texte avec une image.

   

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.

   

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>
   

   N.B.: ce code met deux classes à chaque div !

   Modifier le CSS (et uniquement le CSS) pour que l'article ressemble au modèle suivant. On utilisera la classe icone pour gérer le positionnement de l'image de décoration, les autres classes ne servant qu'à sélectionner la bonne image (même séparation que dans l'exemple du cours, sauf que les images y sont sélectionnées avec des identifiants).

   

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. NB: pour simplifier, on a fixé la hauteur des items de menu à 100 pixels ; mais attention, les images sont plus hautes que ça ! Il faut gérer leur positionnement et leur taille dans le CSS. On a également arrondi les angles des items et on leur a ajouté une ombre.