Critères généraux du projet

Le projet doit contenir un minimum de 10 pages Web interconnectées. La navigation entre les pages doit être faite à partir d'un menu de type spry dont les menus et sous-menus sont inscrits sur des images d'arrière-plans qui changent de couleur alors que le curseur survol au-dessus de ceux-ci. Le même genre de menu de type spry qui est affiché dans la partie supérieure gauche de cette page Web. Chaque page Web doit avoir un titre <title> approprié. Un titre dans un format image ou Flash doit être affiché dans le haut de chacune des pages Web. L'arrière-plan de toutes les pages de ce site Web doit être construit à partir d'une image d'un dégradé qui est répété sur l'axe y tel que celui démontré par cette page. Des informations pertinantes sous forme de texte doivent se retouver sur chacune des pages Web. Chaque photo insérée dans le projet doit être accompagnée de la référence (site Web). Si une photo n'a pas été prise de l'Internet, une brève description doit être affichée sous la photo. Les différentes pages Web doivent contenir les même couleurs de base mais certains mots ou expressions importantes doivent avoir une coloration différente. L'hyperlien ci-dessous donne accès à un exemple de site Web qui correspond aux directives mentionnées ci-dessus. Exemple de projet: http://www.webesct.com/veronic_dicaire/ Exemple de projet de 9e année: http://www.webesct.com/tij1o_sites.html

Grille d'évaluation pour le projet de Site Web

Étape 1 - Préparation des images pour l'arrière plan et les menus

À l'aide d'un logiciel de photos tel que Jasc Software - Paint Shop Pro, construire des images comme celles ci-dessous en utilisant les couleurs de base préférées pour le site. Dégradé d'arrière-plan (255 X 15 pixels) arr1.jpg Menus - Bouton 1 (160 X 50 pixels) Menus - Bouton 1b (160 X 50 pixels) arr_menu1.jpg arr_menu1b.jpg Menus - Bouton 2 (160 X 50 pixels) Menus - Bouton 2b (160 X 50 pixels) arr_menu2.jpg arr_menu2b.jpg Exemple de projet: http://www.webesct.com/veronic_dicaire/

Étape 2 - Ouvrir le logiciel Adobe Dreamweaver CS4 et enregistrer le premier fichier index.html

À partir du bouton Windows, sélectionner Démarrer - Tous les programmes - Adobe Web Standard CS4 - Adobe Dreamweaver CS4. À l'ouverture du logiciel, sélectionner HTML. Enregistrer le fichier en sélectionnant le sous-menu Enregistrer du menu Fichier. Le premier fichier d'un site Web doit se nommer index.html.

Étape 3 - Modifier le titre de la page Web

Dans le haut de la fenêtre du logiciel Adobe Dreamweaver CS4, il faut inséter un titre approprié pour la page Web.

Étape 4 - Modification de l'arrière-plan

Dans le bas de la fenêtre du logiciel Adobe Dreamweaver CS4, dans la section Propriétés il faut appuyer sur le bouton Propriétés de la page. Il faut ensuite choisir l'image d'arrière-plan en appuyer sur le bouton Parcourir. Il faut ensuite choisir l'image d'arrière-plan et appuyer sur le bouton OK. Il faut ensuite choisir la couleur d'arrière-plan qui correspont avec la partie droite de l'image d'arrière-plan sélectionnée. Pour que l'image d'arrière-plan sélectionnée se répète sur l'axe verticale, il faut sélectionner la répétition repeat-y. Il faut ensuite sélectionner une couleur par défaut pour le texte qui sera affiché sur la page Web. L'hyperlien ci-dessous donne accès à un exemple de site Web qui correspond aux directives mentionnées ci-dessus. Exemple de projet: http://www.webesct.com/veronic_dicaire/

Étape 5 - Insertion d'un tableau

Il faut premièrement placer le curseur dans le bas de la fenêtre de création du logiciel Adobe Dreamweaver CS4. Il faut ensuite sélectionner le sous-menu Tableau du menu Insertion. Il faut ensuite choisir les options du tableau et appuyer sur le bouton OK. Pour préciser la largeur des cellules, il faut placer le curseur dans la balise <td> de la première colonne et ajouter l'attribut width="11%". Il faut ensuite placer le curseur dans la balise <td> de la deuxième colonne et ajouter l'attribut width="84%". Il faut ensuite placer le curseur dans la balise <td> de la troisième colonne et ajouter l'attribut width="5%". Il faut ensuite ajouter les informations suivantes aux endroits appropriés. En ce qui concerne la bordure, il faut lui donner une valeur de 1 pour l'instant afin de visualiser le tableau sur la page Web mais lorsque la page sera faite, il faudra changer ce 1 pour un 0.

Étape 6 - Insertion du menu Spry

Il faut premièrement placer le curseur dans la cellule en haut à gauehe du tableau à l'intéreieur de la fenêtre de création du logiciel Adobe Dreamweaver CS4. Il faut ensuite sélectionner le sous-menu Barre de menus Spry du sous-menu Spry du menu Insertion. Il faut sélectionner la barre de menu Spry de type Vertical. En cliquant sur la barre bleue "Barre de menus Spry: MenuBar1" de l'image ci-dessous, la fenêtre Propriétés devrait changer pour afficher les options démontrées par l'image ci-dessous. Il faut modifer tous les menus et sous-menus pour son propre projet. Le lien pour la page d'accueil doit être index.html. Le lien pour un menu subdivisé doit être # seulement. Le lien pour un menu non-divisé est le nom du fichier qui doit être activé par le lien (p.ex. bio.html). Le lien pour un menu subdivisé doit être # seulement. Le lien pour un menu non-divisé est le nom du fichier qui doit être activé par le lien (p.ex. album1.html).

Étape 7 - Ajout d'images au meny Spry (Exemple d'un différent site Web que celui mentionné ci- haut)

Étape 7 (partie A) - Préparation des images pour l'arrière plan et les menus

À l'aide d'un logiciel de photos tel que Jasc Software - Paint Shop Pro, construire des images comme celles ci-dessous en utilisant les couleurs de base préférées pour le site. Dégradé d'arrière-plan (255 X 15 pixels) arr1.jpg Menus - Bouton 1 (160 X 50 pixels) Menus - Bouton 1b (160 X 50 pixels) arr_menu1.jpg arr_menu1b.jpg Menus - Bouton 2 (160 X 50 pixels) Menus - Bouton 2b (160 X 50 pixels) arr_menu2.jpg arr_menu2b.jpg

Étape 7 (Partie B) - Modification de la feuille de style SpryMenuBarVertical.css

Ouvrir le fichier SpryMenuBarVertical.css, tel que démontré dans le clip vidéo ci-dessous. Modifier le fichier SpryMenuBarVertical.css, selon les codes suivants. Fichier SpryMenuBarVertical.css en format .pdf Cliquer sur l'image pour ouvrir le fichier.