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 :
- Les <h2> cliquables ont pour couleur #145285, la taille de la police est de 16px
- Les <h3> ont pour couleur #145285, le texte est justifié, la taille de la police est de 13px
- 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.

