Mise en page classique CSS

Licence Informatique, semestre 6

Alexandre NiveauJean-Marc Lecarpentier — Judith Jeyafreeda Andrew

Enseignement des technologies du Web

 

Mise en page classique CSS

Notes de cours

  • Modèle de boîte CSS3
    • Visual formatting model de HTML/CSS
    • Propriétés de base des boîtes
    • Quelques propriétés CSS3
    • Alignement de contenu
  • Mise en page avec CSS
    • Propriété display
    • Flottants, clearer
    • Présentation en zones
    • Positionnement absolu et relatif

Travail personnel

Objectifs

  • Continuer à s'exercer à manipuler du HTML et du CSS et prendre de bonnes habitudes
  • Pratiquer la mise en page avec CSS
  • Apprendre à reproduire des modèles

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 (optionnel) — Reproduction d’un modèle moins simple

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.