Principes de la mise en page avec des flottants

Formations enseignants ISN

Jean-Marc LecarpentierAlexandre Niveau

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Ce TP vise à vous faire manipuler les outils de base de la mise en page classique avec CSS : les flottants.

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