CSS et mise en page

Licence professionnelle ATC Webmestre

Alexandre NiveauFabrice Maurel

Enseignement des technologies du Web

 

CSS et mise en page

Notes de cours

Travail personnel

Exercice 1 — Présentation en colonnes

Un corrigé de cet exercice est disponible (lien vers le CSS (commenté) ; archive).

Récupérer cette page HTML (copier-coller le code, ou faire « enregistrer sous », ou encore récupérer la page dans cette archive) qui comporte une bannière, un pied de page, une partie principale, un menu de navigation et un encadré d'information.

  1. Écrire une feuille de style pour que la page respecte le modèle suivant, en utilisant des flottants. Pour l'instant, vous ne devez pas modifier le HTML. Attention à bien mettre une bordure à chaque bloc ; mettez aussi une largeur de 1000 pixels au body, cela simplifiera le débogage.
    Modèle à réaliser
  2. On veut maintenant ajouter un gros cadre autour des trois colonnes centrales, comme sur le modèle suivant.
    Second modèle à réaliser
    Modifier le HTML pour ajouter un bloc de classe wrapper, et modifier la feuille de style pour obtenir le résultat voulu.

Exercice 2 — Reproduction d’un modèle simple

Un corrigé de cet exercice est disponible (lien vers le CSS (commenté) ; archive).

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 !

Il est recommandé (en tout cas aux débutant·es) d'utiliser des flottants pour la mise en page, et d'utiliser overflow:auto pour qu'un parent « contienne » ses fils flottants.

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

Exercice 3 — Reproduction d’un modèle plus complexe

Cet exercice vise également à vous faire reproduire un site web (la façon la plus efficace de progresser…), mais moins simple cette fois — et pas seulement le CSS, mais également le HTML.

C'est une adaptation du premier exercice de l'examen 2010-2011, qui consistait en la réalisation partielle d'une page d'article du New York Times.

Si vous êtes à l'aise, essayez de reproduire le modèle le plus fidèlement possible ; sinon, focalisez-vous sur la mise en page globale, c'est-à-dire l'organisation des gros blocs, et ne vous souciez pas des détails.

Modèle de page à reproduire: page d'accueil du New York Times
Modèle de la page à reproduire

Les images et les textes sont dans cette archive. Les couleurs et les tailles précises (du texte, des blocs) n'ont pas d'importance, seul l'aspect général compte.