Initiation à l’intégration XHTML/CSS - séance 9

jan
13
2010

Neuvième séance de cours, dans le cadre de la formation proposée aux étudiants SRC Hunan, dispensée par l’IUT Michel de Montaigne, Bordeaux III.

Cette séance a pour objectif de réaliser l’intégration d’une page web complète en réalisant d’une part son intégration XHTML, et d’autre part sa mise en forme en CSS.

Principe

Travail individuel de 3h30 heures visant :
- à intégrer une page web simple d’après une charte graphique proposée
- à vérifier la qualité de l’intégration à l’aide des validateurs :
  - Validateur du code HTML : http://validator.w3.org/#validate_by_upload
  - Validateur du code CSS : http://jigsaw.w3.org/css-validator/#validate_by_input
Ce travail n’est pas noté, il s’agit d’un exercice préparatoire à la prochaine évaluation !

Déroulement de l’exercice

Récupérer la maquette disponible en cliquant sur ce lien : maquette au format jpg ;
Récupérer le répertoire contenant les éléments de base (un répertoire "images" contenant 4 images et un fichier HTML) pour l’intégration en cliquant sur le lien : télécharger le répertoire ;
Décompresser le répertoire ;
Ouvrir la page index.html avec votre éditeur de code pour commencer à réaliser l’intégration XHTML/CSS, vous disposez de 3h30 environs pour réaliser l’exercice ;
Tous les contenus textuels peuvent être récupérés dans le fichier texte : télécharger le fichier texte ;
Je suis à votre disposition pour vous aider à chaque moment à réaliser le travail demandé ;
Au bout de 3h30 de travail, je passerai récupérer sur une clé USB le répertoire-site ;
Vous pouvez vous aider en vous servant des exercices et cours des séances précédentes ou en cherchant des informations directement sur les moteurs de recherche ;
Le but est que la page web montée et finalisée soit à 100% la copie de la maquette proposée au format jpeg.

Vous pouvez vous servir des aides-mémoires déjà communiqués :

Code XHTML : http://www.gosquared.com/images/help_sheets/HTML%20Help%20Sheet%2002.pdf
Code CSS : http://www.gosquared.com/images/help_sheets/CSS%20Help%20Sheet%2002.pdf

Plan de l’intégration à réaliser

Le plan ci-après doit vous aider à vous repérer et à identifier les travaux à réaliser successivement.

Les CSS qui s’appliquent à la balise body sont déjà en place ;
Créer un premier conteneur (div) qui contiendra l’ensemble de la page (largeur : 1000 pixels, couleur de fond : #f1f1f1) ;
Créer un second conteneur à l’intérieur du premier qui sera consacré à la têtière et qui contiendra à gauche le logo SRC, le titre du site (utilisation de la balise <h1>) et l’image d’illustration de droite (vous n’aurez pas à préciser la couleur de la police du texte du <h1>, elle est héritée des styles précisés dans le "body" qui s’appliquent par défaut à tous les éléments de texte) ;
Créer après le conteneur de têtière un nouveau conteneur qui contiendra toute le contenu du menu au footer (lien de pied de page) ;
Créer dans ce nouveau conteneur, le menu principal à partir d’une liste ordonnée (<ul><li></li></ul>), la couleur de fond utilisée est le #145285, la couleur des textes des liens est du blanc ;
Mettre en place le contenu de la page composé de <h2> cliquables et de paragraphe :
1. Les <h2> cliquables ont pour couleur #145285, la taille de la police est de 16px
2. Les <h3> ont pour couleur #145285, le texte est justifié, la taille de la police est de 13px
3. Les <p> ont pour couleur : #145285, le texte est justifié, la taille de la police est de 11px
Mettre en place l’image illustrant le paragraphe sur les étudiants chinois ;
Créer le footer en intégrant les liens dans un paragraphe (couleur de fond : #145285, taille de police : 10px; texte aligné à droite) ;
Vérifier le rendu sur votre navigateur ;
Vérifier le respect des normes à l’aide du validateur du code HTML : http://validator.w3.org/#validate_by_upload ;
Vérifier le respect des normes à l’aide du validateur du code CSS : http://jigsaw.w3.org/css-validator/#validate_by_input (copier coller le code CSS uniquement dans le champ du formulaire)
Si tout est conforme, enregistrer la page index.html en "nom-prenom.html", et appelez-moi pour que je récupère votre travail sur clé USB.