TP 07 : Mise en page avec CSS

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

Jean-Marc Lecarpentier — Justine Reynaud

Enseignement des technologies du Web

 

Travail personnel

Notes de cours

Retour sur les TPs 1 à 6

La séance est consacrée aux TPs 1 à 6 :

  • Corriger le HTML non valide pour les premiers TP
  • Terminer les TPs non finis, en particulier les TPs sur les bases de CSS et grid

Le robot qui collecte les données sur les TPs (re)passera sur les TPs le mercredi 15 février.

Les plus avancés peuvent travailler sur l'exercice ci-dessous.

Exercice 1 (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).