Réalisation pas-à-pas d'un design

Pour cet exercice, nous allons nous inspirer d'un tutoriel Réalisation d'un design complet (XHTML / CSS) en 5 étapes par Olivier Patry sur le site d'Alsacreations.

Initialisation de la page

Nous allons travailler sur le fichier etape1.html. Le télécharger sur le disque dur, et en créer une copie sous le nom etape2.html

Mise en place des principaux éléments

Dans cette deuxième étape, nous allons placer les principaux éléments de la page (à l'exception du menu).

  1. Mise en forme du body : spécifier une marge haute et basse de 10 pixels, pas de marge sur les côtés, un padding nul. Centrer le texte. Opera place par défaut un padding non nul sur le body ; il faut donc le forcer à 0 si on veut préserver une apparence similaire. On centre le texte car sous Internet Explorer, c'est le seul moyen de centrer un élément de type bloc.
  2. Positionnement de l'élément d'identifiant conteneur :
  3. Positionnement de l'élément d'identifiant header. On fixe sa hauteur à 189 pixels.

Sauverarder une copie sous le nom etape3.html

De la couleur et des images !

Nous allons mettre quelques touches de gaieté et de couleur dans ce cadre austère.

  1. Police par défaut : elle doit être de 8 dixièmes de la taille par défaut, si possible de la police "MS Trebuchet", helvetica. Préciser une famille de police sans empattement. Définir une couleur de fond #E3DBB6.
  2. Mise en forme du header : placer comme image de fond "ananas.png". Cette image ne doit pas se répéter, et doit être placée en haut et à gauche. Les liens contenus dans le header doivent être positionnés en relatif à 70 pixels vers le bas et 30 pixels vers la droite de leur position par défaut. lls doivent être de couleur #8E4E1C.
  3. Mise en forme du conteneur : placer une bordure de 2 pixels de large, solide et de couleur #8E4E1C, ainsi qu'un fond blanc.
  4. Mise en forme de l'élément d'identifiant contenu : placer un padding supérieur et inférieur de 0, à droite de 30 pixels et à gauche de 100 pixels. Lui affecter comme image de fond "fond_page.png", sans répétition, à 15 pixels à droite et en bas du coin supérieur gauche.
  5. Mise en forme des titres :
  6. Les paragraphes de l'élément d'identifiant contenu sont justifiés, avec un alinéa de 2em et une hauteur de ligne de 1.5em.
  7. Mise en forme de l'élément d'identifiant footer :

Sauvegarder le fichier sous le nom etape4.html.

Le titre et le menu

Les choses vont se compliquer un peu...

Le titre

Nous allons remplacer les précédentes propriétés définies sur les liens du header par les suivantes :

Le menu

Regarder l'image bg_menu2.gif. Nous allons l'utiliser en la faisant "coulisser" au survol de la souris.

Et voilà, c'est fini !

Quelles sont les remarques que l'on peut faire sur l'accessibilité du résultat final ?