GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit

Dimension: px

Commencer à balayer dès la page:

Download "GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit"

Michelle Cousineau
il y a 7 ans
Total affichages :

1 Glendon Campus Information Technology (ITEC) Objectifs GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit Travailler avec les sélecteurs Html, sélecteurs de classe et sélecteurs par identité Travailler avec les sélecteurs contextuels Travailler avec la mise en page et les menus verticaux Les fichiers nécessaires pour ce lab. sont disponibles sur le site Web à l adresse : Enoncé du problème Votre travail consiste à utiliser la mise en page CSS de deux colonnes avec entête et pied de page et aussi de définir toutes les règles de feuille de style nécessaires pour produire le modèle de page et le formatage du contenu représentés dans la figure 3. La figure 1 montre les sélecteurs par identité utilisés pour la transformation de la page source en une page utilisant le modèle de page de deux colonnes avec entête et pied de page. Figure 1 O. Guinko GL/ITEC 2915F Utilisation de l ordinateur et des logiciels d application I - Devoir 2 1

2 Avant l'application des feuilles de styles Après l'application des feuilles de styles Figure 2 Figure 3 O. Guinko GL/ITEC 2915F Utilisation de l ordinateur et des logiciels d application I - Devoir 2 2

3 Ouvrez le fichier index.html situé dans le dossier resources puis ajouter les feuilles de style intégrées qui définissent toutes les règles nécessaires aux sélecteurs par «identité», de «classe» et par «html», utilisés dans les balises <body></ body> pour influencer la mise en page et l apparence cette page pour produire le résultat de la figure 3. Les conditions suivantes doivent être remplies (voir la figure 4 aussi): NE PAS modifier ou ajouter une balise HTML à l intérieur des balises <body></body>, remplacez simplement le texte Add your name here avec votre nom complet NE PAS ajouter un sélecteur supplémentaire de classe, par identité ou de html à l intérieur des balises <body></ body> 1. Réglages de base a. Couleur de fond: toute couleur (par défaut le blanc) b. Couleur du texte : toute couleur (par défaut le noir) c. La famille de polices et la taille: = Verdana, Arial, sans-serif; taille = 8pt 2. Entête ( <div id="header"></div>) a. Largeur = 860px b. Hauteur=100px c. Couleur de fond: toute couleur 3. Colonne de gauche (<div id="left"></div>) a. Largeur = 157px b. Couleur de fond: toute couleur 4. Barre de menu vertical à gauche (en haut) (<div class="navig"></div>) a. Largeur = 151px b. Couleur de fond: toute couleur c. Couleur de la ligne de séparation des éléments du menu: toute couleur d. Liste des éléments du menu: Home, Course 2915, Course Barre de menu vertical à gauche (en bas) (<div class="navig second"></div>) a. Largeur = 151px b. Hauteur spécifiée avec le sélecteur contextuel de classe "second" = 300px c. Couleur de fond: la même que celle du haut d. Couleur de la ligne de séparation des éléments : la même que celle du haut e. Liste des éléments du menu: Microsoft Excel, Microsoft Access, Microsoft PowerPoint, Web Design and CSS f. Marge externe entre les barres de menu vertical du "haut" et du "bas" = 25px 6. Colonne du contenu (<div id="content"></div>) a. Largeur = 677px b. Couleur de fond:, couleur du texte: toute couleur c. Marge interne à droite = 10px, marge interne en haut = 20px, marge interne à gauche = 10px, marge interne en bas = 15px O. Guinko GL/ITEC 2915F Utilisation de l ordinateur et des logiciels d application I - Devoir 2 3

7. Image flottante et la légende (<div class="floatingimage"></div>) a. Largeur = 180px b. Taille du texte de la légende = 7pt c. Flotter l'image pour contraindre le texte à l envelopper 8.

4 7. Image flottante et la légende (<div class="floatingimage"></div>) a. Largeur = 180px b. Taille du texte de la légende = 7pt c. Flotter l'image pour contraindre le texte à l envelopper 8. Bloc de citation (<blockquote></blockquote>) a. Largeur = 150px b. Taille du texte = 7.5pt 9. Pied de page (<div id="footer"></div>) a. Largeur = 860px b. Hauteur = 60px 10. Comportement des liens a. Ne pas souligner les liens hypertextes lorsqu'ils sont actifs ; les souligner uniquement lorsque le pointeur de la souris les survole b. a:hover {color: toute couleur} c. a{color: toute couleur} Figure 4 O. Guinko GL/ITEC 2915F Utilisation de l ordinateur et des logiciels d application I - Devoir 2 4

5 Quoi Soumettre? Un fichier zip enregistré sous le nom de devoir2_nomutilisateur et devrait comprendre les fichiers suivants: index.html index.html avec toutes les règles CSS ajoutées et répondant aux exigences mentionnées cidessus photoshopphantasies.gif Une fois terminé, téléchargez le fichier zip dans le dossier ASSIGNMENT2 tel que le décrit la structure de navigation ci-dessous: users.war > assignments > 2011ITEC2915F > ASSIGNMENT2 O. Guinko GL/ITEC 2915F Utilisation de l ordinateur et des logiciels d application I - Devoir 2 5

Documents pareils

Tutoriel : Feuille de style externe

Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?