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 archive et la décompresser à un endroit approprié. Elle contient une petite feuille de style screen.css et deux fichiers HTML très similaires, question-1.html et question-2.html, qui représentent tous les deux la même page avec une bannière, un pied de page, une partie principale, un menu de navigation et un encadré d'information.

  1. Compléter la feuille de style pour que la page question-1.html respecte le modèle suivant, en utilisant des flottants. Attention, vous ne devez pas modifier le HTML, tout doit être fait dans la feuille de style ! Astuce : si vous ne comprenez pas ce qui se passe, n'oubliez pas l'inspecteur, qui peut notamment vous donner la taille en pixels de vos éléments.
    Modèle à réaliser
  2. On veut maintenant ajouter un gros cadre autour des trois colonnes centrales, comme sur le modèle suivant. On va utiliser la page question-2.html : la seule différence par rapport à la précédente est qu'il y a un bloc de classe wrapper autour des trois éléments. Modifier la feuille de style (pas le HTML !) pour obtenir le résultat voulu sur question-2.html. L'apparence de l'autre page (question-1.html) ne doit pas changer.
    Second modèle à réaliser

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.