Protocole du travail pratique 2
Objectif
L’objectif du travail pratique 2 est de concevoir et de réaliser deux feuilles de style conformes à la norme CSS 2.1 du W3C. Ce travail compte pour 15% de la note finale et doit être réalisé en équipe de deux.
Le dossier Web à partir duquel vous devez travailler est disponible dans la section « Fichiers requis ». Ce dossier est composé de plusieurs pages XHTML et de cinq fichiers image. Dans le cadre de ce travail, vous ne devez intervenir que sur la page politique.html lors de la création de vos feuilles de style.
Exigences
- Vous devez concevoir et réaliser deux feuilles de style conformes à la norme CSS 2.1 du W3C. La première devra s’appliquer à l’affichage à l’écran et la seconde à l’impression.
- Des commentaires ont été intégrés à la page politique.html sur laquelle vous devrez intervenir, afin de vous fournir des informations supplémentaires quant à la structure des pages du site. Au besoin, vous devrez raffiner le balisage du document. Assurez-vous cependant que ces interventions demeurent dans l’esprit de la structure initiale, et justifiez-les par le biais de commentaires. Portez une attention particulière à l’utilisation de valeurs d’attributs se rapportant au contenu du document et non à sa mise en forme. (Vous pourriez par exemple utiliser un identifiant tel que Navigation-globale pour le menu supérieur.)
- Votre feuille de style destinée à l’affichage à l’écran devra respecter les critères suivants, afin de reproduire le plus fidèlement possible la maquette qui doit vous servir de guide et démontrer votre capacité à appliquer concrètement les techniques présentées dans le cadre du cours :
- La largeur maximale des divisions devra être de 770px, de façon à ce que la page affiche entièrement sur un écran de 800×600px. La page doit être centrée dans la fenêtre du navigateur.
- La division en-tête devra occuper la portion supérieure de la page sur toute sa largeur et contenir dans sa portion supérieure le menu de navigation globale présenté à l’horizontale. (Attention! Il vous est interdit d’inverser le titre du site et le menu global directement dans le fichier politique.html.)
- Les éléments de navigation locale devront occuper la portion latérale gauche et être présentés à la verticale.
- Le corps de l’article devra occuper toute la portion droite restante.
- La division pied devra occuper la portion inférieure de la page sur toute sa largeur.
- Les images background-titre.gif, en-tete_img.jpg et divison.gif devront être placées en tant qu’arrière-plan.
- La division contenant l’image 2 et sa légende sera positionnée à gauche.
- Votre feuille de style destinée à l’affichage à l’écran devra aussi contenir minimalement :
- 1 style appliqué à un sélecteur unique;
- 1 style appliqué à un sélecteur par attribut ou valeur d’attribut;
- 1 style appliqué à un sélecteur par identifiant unique;
- Des variations sur les polices : n’utilisez pas plus de deux polices par feuille de style. Les variations devront donc porter principalement sur la taille, le style et les autres propriétés exposées dans le cadre du cours;
- Des variations sur les bordures, les marges, les espacements et les contours;
- Des déclarations de styles regroupant les valeurs de plusieurs propriétés en une seule propriété raccourcie(ex. les valeurs de marges "haut, droite, bas, gauche" regroupées sous la propriété margin).
- Votre feuille de style destinée à l’impression sera une variante simplifiée de votre première feuille de style. Cette seconde feuille de style devra contenir les éléments suivants :
- Des variations sur les polices (utilisez une ou deux police(s) différente(s) de celles utilisées dans votre feuille screen.css);
- Des variations sur la taille, le style et les autres propriétés exposées dans le cadre du cours;
- Les images, ainsi que le texte les décrivant, ne devront pas être affichées à l’impression;
- Le pied et les menus de navigation ne devront pas être affichés à l’impression;
- Et pour un bonus :
- contextualisez l’article dans la structure du site en ne faisant imprimer que le nom de la section (Politique) et de la sous-section (Politique internationale) dans lesquelles il se trouve;
- spécifiez l’impression des cibles des hyperliens dans les navigateurs qui le permettent.
- Vous devez insérer des commentaires expliquant sommairement le travail que vous avez effectué.
- Vous devez indenter votre code afin d’en faciliter la consultation et l’évaluation.
- Vos deux feuilles de style doivent être conformes à la norme CSS 2.1 du W3C. Utilisez l’application disponible à l’adresse http://jigsaw.w3.org/css-validator/ pour valider votre travail. Votre document politique.html doit être conforme à la recommandation XHTML 1.0 strict du W3C. Utilisez l’application disponible à l’adresse http://validator.w3.org/ pour vous assurer qu’il en est ainsi.
Format de remise
- Votre travail doit être envoyé par courriel aux adresses dominic.forest@umontreal.ca et mylene.roussy@gmail.com, avant le début du cours du 23 mars 2010.
- L’objet de ce message devra être le suivant : [INU3051] TP2_VotreNomDeFamille.
- Le message devra contenir en pièce jointe un fichier compressé (.zip) nommé TP2_VotreNomDeFamille1_TP2_VotreNomDeFamille2. Ce fichier compressé devra contenir les éléments suivants : le dossier de travail de départ composé des pages .html et du dossier d’images insérés dans le fichier politique.html, ainsi qu’un répertoire nommé css contenant deux feuilles de style nommées respectivement screen.css et print.css.
- Au début du cours du 24 mars, vous devrez aussi remettre une version imprimée du code des fichiers politique.html, screen.css et print.css.
