TP 06 : Mise en page complète

Licence Humanités Numériques 1e année

Jean-Marc Lecarpentier — Antoine Widlocher

Enseignement des technologies du Web

 

Travail personnel

Exercice 1 — Mise en pratique des grilles CSS #

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

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.