1

2

CONCEPTION DE PAGES WEB AVEC ADOBE DREAMWEAVER CS4

TABLE DES MATIÈRES

Introduction ................................................................................................ 3

Résultats .................................................................................................... 3

Partie I : Notions de base sur la création d’un site Web dans Dreamweaver .................. 4

Leçon 1 : Définition d’un site .................................................................. 6

Leçon 2 : Ajout d’une page d’accueil (à l’aide des modèles de mise en forme de Dreamweaver) .................. 9

Leçon 3 : Ajout de contenu .................................................................... 13

Leçon 4 : Ajout d’éléments graphiques ..................................................... 16

Leçon 5 : Ajout de liens ........................................................................ 25

Leçon 6 : Ajout de pages ....................................................................... 27

Leçon 7 : Mise en forme du texte à l’aide de feuilles de style en cascade ........... 30

Leçon 8 : Définition des couleurs d’arrière-plan .......................................... 36

Partie II : Éléments à considérer pour la création d’un site Web ............................... 39

Exercice 1 : Conseils pour la conception de sites Web ................................... 39

Exercice 2 : Accessibilité des sites Web ..................................................... 39

Exercice 3 : Évaluation d’un site Web ....................................................... 40

Partie III : Projet final – Création d’un site Web original ......................................... 41

Modèle de scénarimage pour un site Web ........................................................... 45

Grille d’évaluation ....................................................................................... 46

Sites Web utiles ........................................................................................... 47

3

INTRODUCTION

Bon nombre d’élèves savent déjà comment créer des pages Web à partir d’un site préformaté comme FaceBook, Piczo ou MySpace, mais bien peu d’entre eux ont eu la possibilité de concevoir et de réaliser leur propre page Web par codage HTML ou à l’aide d’un éditeur WYSIWYG (What You See Is What You Get, soit Ce que vous voyez est ce que vous obtenez). Dans le présent module, les élèves pourront acquérir des compétences techniques de base en conception de pages Web, car ils auront l’occasion de réaliser un « faux » site Web à l’aide du logiciel Adobe Dreamweaver Creative Suite 4 (CS4). Cet éditeur Web bien connu permet de concevoir, réaliser et gérer des sites Web. Il fonctionne en mode WYSIWYG pour permettre à l’utilisateur de créer sa page visuellement (plutôt que par codage), c’est-à-dire de voir son document en cours de création dans la forme qu’il aura lorsqu'il sera affiché dans un navigateur Web comme Internet Explorer.

Dans le présent module, les élèves apprendront également à évaluer la qualité de conception des sites Web et ils se pencheront sur l’importance que revêt l’accessibilité aux sites Web.

RÉSULTATS

Dans le présent module, les élèves pourront :

1. apprendre comment créer un site Web de base à l’aide de l’éditeur WYSIWYG;

2. élaborer un plan en vue de réaliser un site Web;

3. découvrir les différents éléments d’une page Web;

4. reconnaître l’importance de l’accessibilité aux sites Web;

5. évaluer des sites Web afin de déterminer leurs points faibles et leurs points forts;

6. mettre en pratique de bonnes techniques de conception pour réaliser des sites Web.

4

Partie I : Notions de base sur la création d’un site Web dans Dreamweaver

Nous allons d’abord examiner l’environnement de travail de Dreamweaver. Vous devrez ensuite créer un « faux » site Web pour une pizzeria appelée « Pizzeria [votre nom] » afin d’apprendre plus facilement les rudiments du programme. Vous devrez suivre les instructions attentivement!

NOTA :

1. Dans Dreamweaver, on peut employer différentes méthodes pour exécuter une même tâche. Dans le présent module, vous apprendrez une seule méthode; à mesure que vous vous familiariserez avec le programme, vous découvrirez les autres méthodes possibles.

2. Les élèves doivent savoir que le site en cours de création est accessible uniquement sur le réseau local

3. Il est important de bien gérer vos fichiers lorsque vous concevez des pages Web! Assurez-vous d’ouvrir un nouveau dossier pour chaque site créé et d’y sauvegarder tous les fichiers qui y sont associés. Pour télécharger votre site vers un service d’hébergement Web, vous devez inclure TOUS les fichiers correspondants (HTML, images, CSS). Les bonnes pratiques de gestion facilitent le processus.

, et qu’il ne peut se retrouver en ligne tant qu’il n’a pas été téléchargé dans un ordinateur spécial appelé « serveur Web ». Vous pouvez visualiser en tout temps le site dans la forme qu’il aura; il vous suffit d’appuyer sur F12 après avoir sauvegardé votre document, mais vous aurez besoin d’un accès spécial à un serveur pour télécharger vos fichiers.

4. En raison des limites d’espace sur le serveur Web de l’école, le présent module ne contient pas les instructions détaillées de téléchargement de fichiers dans cet emplacement, et c’est l’enseignant et le ROÉ qui détermineront s’il est approprié ou non de le faire. Si des élèves veulent mettre leur site Web en ligne, suggérez-leur de trouver un service d’hébergement gratuit ou de s’informer pour savoir si leur fournisseur de services Internet leur offre un espace à cette fin. Les élèves qui choisissent de mettre leur site en ligne doivent prendre toutes les mesures appropriées pour protéger leur identité (p. ex. éviter d’indiquer leur nom au complet, leur adresse ou d’autres renseignements qui permettraient de les reconnaître).

5. Pour nommer les fichiers et les dossiers :

a) choisissez une désignation courte et descriptive;

b) évitez de faire des espaces (utilisez plutôt des traits de soulignement, p. ex. contact_info.html);

c) évitez les majuscules et les signes de ponctuation.

6. N’oubliez pas d’ENREGISTRER votre document régulièrement. Si vous souhaitez annuler vos dernières modifications, il vous suffit d’utiliser l’option ANNULER.

5

Conseils

1. Sélection des éléments d’écran affichés Sous l’onglet Fenêtre, vous pouvez sélectionner les éléments que vous voulez voir apparaître à l’écran. Les raccourcis-claviers du menu vous permettent de sélectionner et désélectionner les éléments, selon que vous voulez ou non les voir apparaître à l’écran.

2. Rétablissement des éléments d’écran affichés par défaut Pour rétablir rapidement les éléments d’écran par défaut, sélectionnez d’abord Présentation de l’espace de travail dans le menu Fenêtre, puis Réinitialiser «Création». Vous pouvez également avoir accès à cette option dans la barre d’outils, comme il est montré ci-dessus. Le mode par défaut ‘Création’ affiche une fenêtre divisée. Pour retourner en mode Création, cliquez sur l’icône Création

dans le haut de l’écran.

Il est temps de commencer.

Passez à la page suivante…

6

Leçon 1 : Définition d’un site

Certains sites Web sont associés à des milliers de fichiers de toutes sortes, notamment des fichiers HTML et des images, ainsi qu’à des fichiers de soutien comme des fichiers CSS (feuilles de style en cascade), Flash Movie ou Javascript. Il est donc très important de savoir gérer tous ces fichiers. Il vous arrive parfois de voir apparaître un « X » à la place d’une image lorsque vous visitez un site Web? Cela se produit lorsque votre navigateur ne peut trouver les fichiers qui devraient se trouver normalement à cet emplacement. Voilà pourquoi vous devez absolument bien gérer tous vos fichiers, même si cette tâche vous semble ennuyeuse!

Dreamweaver comprend un utilitaire de gestion qui vous aidera à faire le suivi de tous vos fichiers. Lorsque vous définissez votre site, Dreamweaver est capable d’assurer le suivi de tous vos fichiers et de modifier vos liens en conséquence lorsque vous déplacez ou renommez des fichiers. Vous devez TOUJOURS définir un site

avant de créer des pages dans Dreamweaver.

1. Ouvrez Dreamweaver.

2. Vous voyez apparaître une fenêtre similaire à celle qui est montrée ci-dessous. Cliquez sur Site Nouveau Site (Examinez les différents menus dans le haut de l’écran, car vous y aurez recours durant toutes les leçons.)

3. La fenêtre Definition du site s’ouvre.

4. Nommez votre site « Pizzeria [votre nom] ». (Faites abstraction de l’adresse URL à cette étape du processus.)

5. Cliquez sur Suivant.

7

6. Cochez « Non » en réponse à la question qui vous demande si vous voulez utiliser une technologie de serveur.

7. Cliquez sur Suivant.

8. Sélectionnez « Modifier les copies locales sur ma machine… ».

9. Désignez l’emplacement où seront enregistrés les fichiers associés à votre site Web. Tapez

G:\pageweb_création\pizza, (à moins que votre enseignant ne vous indique autre chose). Dreamweaver crée alors les dossiers pageweb_création et pizza sur le lecteur G:.

(NOTA : Un dossier distinct doit être créé pour chaque site Web. On a choisi le lecteur G: parce que c’est à cet emplacement que vous devez sauvegarder tous vos fichiers à l’école. À la maison, vous pourriez sélectionner un autre emplacement.)

10. Cliquez sur Suivant.

11. Dans la fenêtre suivante, cliquez sur la flèche du menu déroulant et sélectionnez Aucun en réponse à la question qui vous demande d’indiquer le moyen de connexion au serveur distant.

12. Cliquez sur Suivant.

8

13. Dans la section Résumé de la fenêtre Définition du site, cliquez sur Terminé.

14. Le dossier de votre site devrait apparaître dans le panneau Fichiers, dans le coin inférieur

droit de votre écran. (Si le panneau Fichiers n’est pas affiché, appuyez sur F8.)

ATTENTION : Avant de créer un site Web dans Dreamweaver, vous devez toujours DÉFINIR UN SITE, comme vous l’avez fait au cours des étapes précédentes.

9

Leçon 2 : Ajout d’une page d’accueil (à l’aide des modèles de mise en forme de Dreamweaver)

Une fois que vous avez défini votre site, vous pouvez y ajouter la première page. Durant cette leçon, vous allez créer une mise en forme à deux colonnes avec un en-tête et un pied de page. Cette mise en forme est couramment utilisée par les concepteurs Web. Dreamweaver vous donne accès à plusieurs modèles prédéfinis de mise en forme. Lorsque vous vous serez familiarisé avec le programme, vous pourrez en essayer d’autres.

1. Cliquez sur Fichier Nouveau.

2. La fenêtre Nouveau document qui s’affiche vous permet de sélectionner un modèle de mise

en forme pour votre page d’accueil.

3. Sélectionnez Page vierge dans la première colonne, puis HTML dans la deuxième colonne

(Type de page). 4. Dans la colonne Mise en forme, sélectionnez 2 colonnes fixes, encadré à gauche, en-tête

et sous-pieds. Lorsque vous créez votre propre site, sélectionnez différents modèles pour voir la mise en forme correspondante.

5. Dans le coin inférieur droit de la fenêtre, sélectionnez Créer un nouveau fichier en regard

de CSS de la mise en forme. Dreamweaver créera un fichier distinct de feuilles de style en cascade qui permettront de définir l’apparence de toutes les pages de votre site. Nous traiterons de ce sujet un peu plus loin dans le module.

10

6. Cliquez sur le bouton Créer dans le coin inférieur droit de l’écran. 7. La boîte de dialogue Enregistrer le fichier feuille de style sous s’affiche à l’écran. Vous ne

devez pas modifier les paramètres. Cliquez sur Save.

8. Dreamweaver crée alors une page à deux colonnes contenant du texte « de remplissage »

que vous remplacerez ultérieurement par votre propre texte. La page qui s’affiche à votre écran devrait ressembler à celle qui est montrée ci-dessous. Les panneaux à droite de votre écran seront peut-être différents de ceux qui sont illustrés. Vous trouverez la liste de tous les panneaux dans le menu Fenêtre.

Ne modifie pas le nom de ce fichier

11

9. Si votre page s’affiche en mode

Fractionner (affichage côte à côte des modes Code source et Création), passez au mode Création en cliquant sur le bouton Création dans le coin supérieur gauche de la fenêtre. Sélectionnez tour à tour Code, Split et Création pour voir les affichages correspondants.

10. Avant d’ajouter du contenu, vous devez enregistrer votre fichier. Pour ce faire, cliquez sur

Fichier Save. La boîte de dialogue Save As apparaît à l’écran.

11. Repérez le dossier pizza que vous avez créé sur le lecteur G: lorsque vous avez défini votre

site.

12. Nommez votre fichier index.html.

13. Cliquez sur Save.

14. Le panneau Fichier comprend maintenant le dossier racine (Pizzeria [votre nom]) ainsi que le fichier index.html et le fichier CSS qui a été créé lorsque vous avez défini votre site. La liste de fichiers dans le panneau constitue dorénavant votre gestionnaire de fichiers; c’est à cet emplacement que vous devrez copier-coller, supprimer, déplacer ou ouvrir des fichiers, comme vous le feriez sur votre ordinateur à la maison.

Sois certain que tu es dans le bon dossier

Nomme ton fichier index.html

12

15. Il convient de noter que le nom du fichier (index.html) apparaît sur un onglet dans le haut de la page. N’oubliez pas d’enregistrer votre document en cours! Un astérisque (*) s’affiche à côté du nom du fichier lorsque des modifications y ont été apportées depuis le dernier enregistrement.

16. Appuyez sur F12 pour obtenir un aperçu de votre page dans votre navigateur Web par défaut.

17. Enregistrez votre fichier régulièrement! N’attendez pas à la fin de la leçon.

13

NOTA : Ce titre ne s’affiche pas sur votre page; il s’affiche plutôt dans la barre de titre dans le haut de la fenêtre du navigateur. Si vous n’entrez pas un titre, c’est la mention Sanstitre qui apparaîtra à la place.

Leçon 3 : Ajout de contenu Votre « page d’accueil » est la première page que le visiteur aperçoit lorsqu’il accède à votre site Web. Vous devez donc adapter son contenu en fonction de votre restaurant. 1. Dans le champ Titre de la page, entrez le nom de votre

pizzeria (Pizzeria [votre nom]). Ce nom s’affichera dans les moteurs de recherche ainsi que dans la barre de titre dans le haut de la fenêtre du navigateur. Vous devez absolument entrer un nom dans cette zone afin d’éviter de vous retrouver avec un document sans titre (« Sanstitre »).

2. Mettez en évidence le terme En-tête et remplacez-le par le nom de votre pizzeria (« Pizzeria [votre nom] »), comme vous le feriez dans un logiciel de traitement de texte, afin de créer le titre principal de votre page. Sous le titre, la colonne de gauche, soit l’encadré latéral (Contenu de Sidebar1) contient les liens et la colonne de droite, le contenu principal.

3. Sous la rubrique Contenu principal!, tapez le texte montré ci-dessous. Ne faites aucune

autre modification à cette étape.

4. La mention en-tête de niveau H2 indique que vous pouvez utiliser des sous-titres si vous le

voulez (vous n’avez qu’à la supprimer dans le cas contraire). Ajoutez le sous-titre et le texte montrés ci-après ou tout autre texte que vous désirez. Pour revenir à la ligne, appuyez sur la touche Retour du clavier.

NOTA : Pour revenir à la ligne sans commencer un nouveau paragraphe, appuyez en même temps sur les touches Décalage et Retour du clavier.

14

5. Faites défiler l’écran jusqu’à la zone Sous-pieds dans le bas de la page. Cette zone comporte habituellement les informations sur le copyright et la date de la dernière mise à jour du site. Remplacez le terme Sous-pieds par ce qui suit :

6. Pour insérer le symbole du copyright (©), cliquez sur Insertion HTML Caractères spéciaux Copyright.

7. Pour insérer la date, cliquez sur Insertion Date. La boîte de dialogue qui s’affiche alors

contient un message vous demandant d’indiquer le format à utiliser. Cochez l’option Mettre à jour automatiquement lors de l’enregistrement afin que la date change automatiquement lorsque vous apportez des modifications au site.ion

Copyright © 2009 Pizzeria [votre nom] | Date de la dernière mise à jour (entrez la date d’aujourd’hui)

15

8. Votre page devrait ressembler à celle qui est montrée ci-dessous. Si vous êtes satisfait du résultat, cliquez sur Fichier Save pour enregistrer votre page. Le contenu de l’encadré latéral (Contenu de Sidebar1) sera modifié ultérieurement.

9. Pour obtenir un aperçu de votre page dans votre navigateur Web, appuyez sur F12.

16

Leçon 4 : Ajout d’éléments graphiques

Avant d’ajouter des images à votre page Web, vous devez d’abord créer le dossier dans lequel elles devront être enregistrées.

1. Dans le panneau Fichiers, cliquez sur le bouton de de droite de la souris et sélectionnez Nouveau dossier.

2. Un nouveau dossier sans titre (« sanstitre ») apparaît alors sous les noms de vos fichiers. Nommez ce nouveau dossier « images ». Votre panneau Fichiers devrait ressembler à celui-ci :

3. Vous pouvez maintenant ajouter une image à votre dossier d’images. Allez sur le Web pour trouver une image associée au thème de la « pizza ».

ou

Assurez-vous que des images n’ont pas déjà été enregistrées à votre intention par votre enseignant.

Click ici avec la bouton droite de la souris

17

4. Nommez « pizza » l’image que vous aurez trouvée. Assurez-vous d’enregistrer cette image dans le dossier images qui se trouve à l’intérieur du dossier pizza (soit le dossier que vous venez tout juste de créer).

5. Votre panneau Fichiers devrait maintenant ressembler à celui-ci :

6. Vous pouvez employer plusieurs méthodes pour ajouter des images à votre page Web. La méthode la plus simple consiste à faire glisser l’image depuis le panneau Fichiers jusqu’à la page. (Vous pouvez également cliquer sur Insertion Image et naviguer jusqu’à l’image.)

7. Placez votre curseur en regard de la mention « Pizza à 12’ et 6 ailes… ». Cliquez sur le nom de votre image et faites-la glisser sur votre page.

8. Lorsque vous déposez votre image, la fenêtre Attributs d’accessibilité des balises d’image s’ouvre. Dans la zone Texte secondaire, entrez le terme pizza, comme il est montré ci-contre.

9. Laissez la zone Description longue vierge et cliquez sur OK.

Glisser –déposer l’image ici

18

NOTA : Les balises Alt rendent votre site plus facilement accessible aux personnes ayant une déficience visuelle ou à celles qui utilisent un navigateur non visuel (certains internautes désactivent les images pour naviguer).

19

TRUC – Redimensionner correctement ses images

Pour redimensionner ses images, le meilleur moyen consiste à utiliser l’outil « Modifier les paramètres de l’image », qui est montré ci-dessous. Dans notre exemple, l’image affichée est trop grande : elle mesure 1200 pixels de largeur sur 800 pixels de hauteur et la taille de son fichier est de 192 ko. Nous souhaitons réduire non seulement la taille de l’image à l’écran mais aussi celle de son fichier afin d’accélérer le téléchargement de la page lorsqu’un visiteur accèdera au site Web.

En réduisant l’échelle de reproduction de l’image (échelle) de 100 à 25 %, comme dans l’exemple ci-dessous, la taille de l’image à l’écran diminue de 1200 pixels sur 800 pixels à 300 pixels sur 200 pixels alors que la taille du fichier est réduite de 192 à 23 ko. Vous obtenez ainsi une image plus petite et un fichier moins lourd.

20

NOTA : Pour redimensionner ou modifier vos images, vous pouvez utiliser un autre éditeur d’images comme Photoshop, Paint Shop Pro ou FireWorks. Cependant, Dreamweaver vous donne accès à quelques options vous permettant de modifier vos images. N’oubliez pas d’enregistrer la version originale de vos images.

TRUC – La méthode « cliquer-glisser » n’est PAS vraiment efficace

Si vous cliquez sur le coin de l’image pour le faire glisser vers l’intérieur afin de réduire la taille de l’image, vous modifiez uniquement ses dimensions à l’écran mais pas la taille de son fichier, qui reste inchangée. En conception Web, il est important de réduire également la taille du fichier de l’image, car plus le fichier est petit, plus le téléchargement de la page est rapide. Cet aspect est d’autant plus important si la page comporte plusieurs images. Dans l’exemple ci-dessous, l’image originale mesure 1024 pixels de largeur sur 768 pixels de hauteur et la taille du fichier est de 762 ko. La taille du fichier sera toujours de 192 ko si vous utilisez la méthode « cliquer-glisser » pour réduire visuellement l’image à 173 pixels sur 103 pixels, et le téléchargement de la page sera toujours aussi lent; en revanche, la page sera téléchargée plus rapidement si vous réduisez la taille du fichier à 23 ko à l’aide de l’outil « Modifier les paramètre de l’image » décrit précédemment.

Plus il y a d’images sur une page Web, plus il est important de redimensionner chacune d’elles afin d’accélérer le téléchargement de la page lorsqu’un visiteur accèdera au site Web.

Image original

Image réduite par la méthode clicker-glisser

21

10. Votre fichier devrait ressembler à celui qui est montré ci-dessous. Appuyez sur F12 pour obtenir un aperçu de votre page dans votre navigateur Web. Enregistrez votre fichier lorsqu’un message système vous demande de le faire. Retournez dans Dreamweaver après avoir visualisé votre site.

11. Dans une page Web, les images ne peuvent pas être déplacées aussi facilement que dans un logiciel de traitement de texte, mais le panneau Propriétés vous offre des options qui vous permettent de modifier certaines propriétés d’une image.

12. Cliquez une fois sur l’image pour la sélectionner. Le panneau Propriétés, qui s’affiche alors au bas de l’écran, indique les propriétés de l’image. (NOTA : Si le panneau Propriétés ne s’affiche pas, cliquez sur Fenêtre Propriétés. Si le panneau ne s’affiche pas au complet, vous pouvez l’agrandir en cliquant sur le petit triangle situé dans son coin droit inférieur.)

13. Pour aligner l’image sélectionnée avec le texte, remplacez la valeur « Default » du paramètre Aligner par « gauche ». (NOTA : Explorez les autres options d’alignement auxquelles vous avez accès.)

22

14. Pour agrandir l’espace autour de l’image, modifiez les valeurs des paramètres Espace V et Espace H. Dans l’exemple ci-dessous, nous avons fait correspondre le paramètre Espace H à 10 afin d’accroître l’écart entre l’image et le texte.

15. Enregistrez votre fichier.

16. Appuyez sur la touche F12 du clavier pour ouvrir votre navigateur Web par défaut (p. ex. Internet Explorer) et obtenir un aperçu de l’apparence qu’aura votre page une fois qu’elle sera diffusée dans le Web.

17. Retournez dans Dreamweaver après avoir visualisé votre site.

18. Cliquez sur l’image pour la sélectionner. Le panneau Propriétés vous indique les autres outils d’édition d’images auxquels vous donne accès Dreamweaver. Si vous ne pouvez pas tous les voir, agrandissez le panneau en cliquant sur le petit triangle situé dans son coin droit inférieur.

Outils de modification de l’image

23

19. Vous pouvez apporter différentes modifications à votre image (p. ex. éliminer une partie du contour, ajouter une bordure, augmenter ou réduire l’intensité ou le contraste ou améliorer la définition), mais vous devez vous rappeler qu’elles seront enregistrées par-dessus l’image originale, comme l’indique le message montré ci-contre. Vous devez donc toujours vous assurer de conserver une copie de la version originale de vos images.

20. À FAIRE : Trouvez une autre image qui vous servira de logo et que vous insérerez à côté du titre « Pizzeria [votre nom] ». Passez un peu de temps à vous exercer à insérer une autre image et à utiliser les fonctions d’édition pour modifier l’apparence de votre image. Lorsque vous aurez terminé, votre site devrait ressembler à celui-ci :

21. Examinez le panneau Insertion (illustré ci-dessous) pour découvrir les autres types d’objets que vous pouvez insérer dans une page Web (image survolée, fichier Flash, barre de navigation, etc.).

24

22. L’option Image survolée vous permet d’insérer deux images : une image principale qui sera active lorsque le curseur n’est pas pointé sur elle et une image secondaire qui apparaîtra lorsque le curseur survolera l’image principale. Dans le panneau Insertion, cliquez sur la flèche du menu déroulant dans la zone Images et sélectionnez Image survolée.

23. Sélectionnez deux images, comme il est montré ci-dessous, puis cliquez sur OK.

24. Appuyez sur F12 pour obtenir un aperçu de l’image survolée, puis enregistrez-la lorsqu’un message du système vous demande de le faire.

25. Lorsque votre page s’ouvre dans le navigateur, déplacez votre curseur sur l’image principale (active) pour voir apparaître l’image secondaire.

25

Leçon 5 : Ajout de liens

Un site Web n’est pas complet s’il ne comprend pas de liens vers d’autres pages situées à l’intérieur ou à l’extérieur sur un autre site. Avant de créer des liens de navigation, vous devez d’abord déterminer les autres pages qui seront intégrées à votre site. Pour les besoins de l’exercice, nous simplifions les choses en créant seulement trois autres pages, soit une page de menu, une page de coordonnées et une page de concours (noms des fichiers respectifs : menu.html, contact.html, et concours.html).

Les liens seront insérés sous forme de texte normal, mais Dreamweaver vous donne la possibilité d’insérer une barre de navigation avec des boutons. N’hésitez pas à explorer cette option lorsque vous créerez votre propre site.

1. Mettez en évidence tout le texte contenu dans l’encadré latéral (Sidebar1 Content) et appuyez sur Supprimer.

2. Entrez les termes Menu, Contactez-nous et Concours, comme il est montré ci-dessous.

3. Mettez en évidence Menu et cliquez sur Insertion Hyperlien. (Vous pouvez aussi accéder au panneau Insertion et sélectionner Hyperlien.)

4. La boîte de dialogue Hyperlien apparaît à l’écran. Dans la zone Lien, tapez menu.html. (NOTA : Si les pages sont déjà créées ou si elles sont enregistrées dans un dossier différent, vous devez cliquer sur l’icône du navigateur.)

26

5. Cliquez sur OK pour valider le lien de la page de menu.

6. Mettez en évidence Contactez-nous et cliquez sur Insertion Hyperlien.

7. Dans la zone Lien, tapez contact.html.

8. Reprenez le processus pour créer le lien de la page Concours. Dans la zone Lien, tapez concours.html.

9. Votre page devrait ressembler à celle-ci :

10. Enregistrez votre fichier.

11. Appuyez sur F12 pour obtenir un aperçu de votre fichier. Il convient de noter que les liens ne fonctionnent pas, car les pages correspondantes n’ont pas encore été créées.

NOTA : Pour créer un lien vers un autre site (p. ex. Google), entrez l’adresse URL correspondante au complet plutôt que le nom d’un fichier (p. ex. http://www.google.ca).

Évitez de créer des liens avec la mention « Cliquez ici », car ils ne sont pas assez descriptifs.

27

Leçon 6 : Ajout de pages

Au cours des leçons précédentes, nous avons ajouté du texte, des éléments graphiques et des liens pour créer notre page d’accueil. Durant la présente leçon, nous ajouterons des pages à notre site Web.

En création Web, il est très important de s’assurer que la présentation est homogène. D’une page à l’autre, vous devez positionner les liens de navigation au même endroit et utiliser des polices, tailles et couleurs de caractères identiques. Pour préserver l’homogénéité de la présentation d’une page à l’autre, les concepteurs Web utilisent des « modèles de mise en forme ». Lorsque vous créez une mise en forme de base pour un site, Dreamweaver vous donne la possibilité de l’enregistrer comme modèle. Vous pouvez ainsi réutiliser votre modèle autant de fois que nécessaire sans avoir à recréer des parties de votre page.

L’utilisation de modèles de mise en forme déborde légèrement du cadre du présent exercice. Comme nous allons créer un site assez petit, nous nous contenterons d’enregistrer notre fichier index.html sous différents noms et de remplacer le contenu sur chaque page afin de simplifier le processus. N’oubliez pas que si vous persistez à concevoir des sites Web, vous pourrez toujours apprendre à utiliser des modèles de mise en forme.

1. Ouvrez votre fichier index.html s’il n’est pas déjà ouvert.

2. Cliquez sur Fichier Enregistrer sous.

3. Dans la boîte de dialogue Enregistrer sous, sélectionnez le dossier approprié (soit « pizza »), puis renommez le fichier menu.html.

4. Cliquez sur Enregistrer.

5. Cliquez de nouveau sur Fichier Enregistrer sous, puis renommez le fichier contact.html.

6. Cliquez sur Enregistrer.

Sois certains que les pages web se trouve dans ton dossier principal

28

7. Cliquez de nouveau sur Fichier Enregistrer sous, puis renommez le fichier concours.html. Cliquez sur Enregistrer.

8. Si votre intervention a réussi, vous verrez apparaître les noms des trois nouveaux fichiers dans le haut de l’écran. Pour passer d’un fichier à l’autre, vous n’avez qu’à cliquer sur un nom. Si vous avez ouvert plusieurs fichiers, assurez-vous de sélectionner la page appropriée!

9. Vos nouveaux fichiers devraient maintenant apparaître dans le panneau Fichiers.

10. Si vos nouveaux fichiers n’apparaissent pas dans le panneau Fichiers, cliquez une fois sur le dossier de votre site pour le sélectionner, puis appuyez sur F5 pour régénérer l’écran.

11. Nous allons maintenant modifier le contenu de chacune des nouvelles pages.

12. Cliquez sur la page contact.html et remplacez son contenu par l’information donnée ci-dessous. N’hésitez pas à ajouter vos propres renseignements.

13. Enregistrez votre fichier.

14. Ouvrez la page concours.html et remplacez son contenu par votre propre information. N’oubliez pas d’enregistrer votre fichier.

15. Pour ajouter le lien du courrier électronique, cliquez sur Insertion Lien de messagerie et entrez l’adresse concours@salutpizza.com dans la boîte de dialogue Adress e-mail.

16. Ouvrez la page menu.html et remplacez son contenu par votre propre menu. N’oubliez pas d’enregistrer votre fichier lorsque vous aurez terminé.

17. Nous devons ajouter sur chaque page un lien vers la page d’accueil afin de permettre au visiteur de retourner à la page principale de votre site.

18. Sur la page de menu, entrez le terme Accueil sous le lien vers la page de concours.

19. Mettez en évidence le terme Accueil.

20. Cliquez sur Insertion Hyperlien.

29

21. Dans la zone Lien, entrez index.html.

22. Cliquez sur OK.

23. Mettez en évidence le lien Accueil, puis copiez-le et collez-le sur les pages de coordonnées et de concours.

24. Enregistrer chaque fichier.

25. Appuyez sur F12 pour obtenir un aperçu de votre site Web. Vos liens fonctionnent-ils?

Félicitations! Vous venez de créer un site Web de base... Mais avez-vous pensé aux couleurs et à la mise en forme?

Nous y venons…

30

Leçon 7 : Mise en forme du texte à l’aide de feuilles de style en cascade

Jusqu’ici vous avez appris à réaliser un site Web, à créer une page à partir d’un modèle prédéfini de mise en forme, à modifier le contenu d’une page et à y ajouter des images; il vous reste maintenant à découvrir comment changer l’apparence de votre texte. Dans une page Web, la taille, la couleur et la police des caractères ne peuvent pas être modifiées aussi facilement que dans un logiciel de traitement de texte. Dans un logiciel de traitement de texte, vous pouvez choisir facilement une autre police de caractères, pourvu qu’elle soit installée dans votre ordinateur, puis imprimer votre document pour constater qu’il a la même apparence qu’à l’écran.

Si vous utilisez une police de caractères peu courante, votre page Web risque de ne pas s’afficher correctement si elle n’est pas installée dans l’ordinateur du visiteur de votre site. Pour éviter les problèmes de ce type, les concepteurs Web utilisent des polices qui se retrouvent dans la majorité des ordinateurs. Ils définissent également des polices de rechange au cas où la police choisie ne serait pas installée dans l’ordinateur du visiteur. Prenons par exemple la liste suivante :

Verdana, Arial, Helvetica, Sans-serif.

Si la police Verdana est installée dans l’ordinateur du visiteur, elle sera utilisée par le navigateur pour afficher la page. Dans le cas contraire, le navigateur utilisera la police Arial; si celle-ci n’est pas installée non plus, le navigateur passera à la police Helvetica; si celle-ci n’est pas installée, le navigateur utilisera n’importe quelle police Sans-serif installée dans l’ordinateur.

Feuilles de style en cascade

Avant de modifier la police de caractères de votre texte, vous devez acquérir quelques notions sur la technologie employée par Dreamweaver pour changer l’apparence (texte et mise en forme) d’une page. Cette technologie est appelée « CSS » (Feuilles de style en cascade).

En conception Web, il est important d’assurer une homogénéité entre les pages; pour ce faire, il faut utiliser une police et une taille de caractères identiques pour chaque type de titre et chaque type de paragraphe. Pour gagner du temps et assurer l’homogénéité de la présentation, les concepteurs appliquent aux pages Web des règles CCS (Feuilles de style en cascade) qui permettent d’établir des CLASSES désignant les différentes parties d’une page (comme les titres et les sections).

Auparavant, les concepteurs Web devaient entrer des instructions pour chaque titre s’ils voulaient en modifier la taille, la police et la couleur de caractères. Aujourd’hui, grâce aux feuilles de style en cascade, il leur suffit d’appliquer les nouveaux paramètres une seule fois pour modifier en même temps tous les titres associés à la feuille de style. Considérez maintenant le site Web de votre pizzeria : supposons que vous avez appliqué la police Times New Roman pour vos titres principaux et que vous souhaitez la remplacer par la police Comic Sans parce qu’elle est plus attrayante. Si vous n’utilisez pas une feuille de style, vous devez sélectionner et modifier les titres un par un. Si vous utilisez une feuille de style, il vous suffit d’effectuer la modification une seule fois pour qu’elle s’applique à tous les titres correspondants. Le site Web que vous avez créé est petit, mais imaginez le gain de temps s’il comportait plus de 20 pages différentes!

Il est temps de mettre en pratique ce que vous avez appris sur les CSS.

Passez à la page suivante…

31

1. Ouvrez Dreamweaver s’il n’est pas déjà ouvert.

2. Ouvrez le fichier index.html du site Web de votre pizzeria.

3. Commençons par changer la police de caractères du titre principal « Salut Pizza ».

4. Mettez en évidence « Salut PIzza ».

5. Cliquez sur Format Police. Un sous-menu de polices de caractères apparaît à l’écran.

6. Pour votre site Web, choisissez Palatino Linotype, Book Antiqua, Palatino, serif.

7. Lorsque vous cliquez sur la liste de polices, la boîte de dialogue Nouvelle règle de CSS s’ouvre. Lorsque vous sélectionnez seulement le titre principal, la boîte de dialogue ressemble à celle-ci :

32

8. Pour les besoins de l’exercice, nous allons modifier de la même façon le titre principal sur chacune des pages de notre site Web. Pour ce faire, nous devons créer une classe «titreentête». Votre boîte de dialogue Nouvelle règle de CSS doit ressembler à celle qui est montrée ci-contre.

9. Cliquez sur la flèche du menu déroulant Type de sélecteur et sélectionnez Classe (peut s’appliquer à n’importe quel élément HTML) (la zone Nom du sélecteur est censée être vierge).

10. Dans la zone Nom du sélecteur, indiquez le nom du bloc de texte à modifier, soit «titreentête» dans le présent cas.

11. Dans la section située au-dessous de la zone Nom du sélecteur vous pourrez lire le message suivant : Ce nom de sélecteur appliquera votre règle à tous les éléments HTML possèdant la classe «titreentête».

12. Dans la zone Définition de règle, sélectionnez twoColFixLtHdr.css afin d’enregistrer la règle s’appliquant à tous les titres principaux dans le fichier CSS que vous avez créé lors de la définition de votre site.

13. Cliquez sur OK. Votre titre principal « Salut Pizza » apparaît alors dans la police de caractères Palatino. Si vous ouvrez vos pages de menu, de coordonnées et de concours, vous constaterez que la police de tous les titres principaux a également été modifiée.

NOTA : VOUS NE DEVEZ PAS utiliser d’espace ni de signe de ponctuation dans le nom de la classe. VOUS DEVEZ choisir un nom descriptif pour votre sélection.

33

14. Les feuilles de style en cascade vous permettent d’effectuer en tout temps des modifications que le système appliquera automatiquement à votre site. Elles sont accessibles par l’intermédiaire du panneau Styles CSS situé à droite de votre écran.

15. Placez votre curseur sur le titre principal « Salut Pizza ». Cliquez deux fois sur Styles CSS si le panneau ne s’affiche pas en entier comme dans l’illustration ci-contre. (NOTA : Si le panneau n’est pas affiché à l’écran, cliquez sur Fenêtre Styles CSS.)

16. Le panneau Styles CSS affiche les propriétés de la section de page sur laquelle vous cliquez.

17. Pour changer la couleur associée à la classe « titreentête », cliquez sur le sélecteur de couleur. Dans le présent exemple, la couleur choisie est marron. Dès que vous cliquez sur une nouvelle couleur, elle est appliquée au titre principal « Salut Pizza » sur chaque page de votre site. Essayez pour voir.

18. Chaque classe est associée à plusieurs propriétés que vous avez la possibilité de modifier.

19. Pour voir les autres propriétés qui peuvent être modifiées, cliquez sur Ajouter une propriété.

Ce panneau indique que la classe « titreentête » correspond à une police Palatino de couleur noire.

34

20. Dans le menu déroulant, sélectionnez Font-Style.

21. Sélectionnez Italic dans la liste de styles de police. Le titre principal « Salut Pizza » sur chaque page de votre site devrait maintenant apparaître dans une nouvelle couleur et en italique. Vérifiez les pages de votre site pour vous assurer que les modifications ont été reportées sur chacune d’elles.

22. N’oubliez pas de sauvegarder votre fichier! Appuyez sur F12 pour obtenir un aperçu de votre page.

23. Nous allons maintenant modifier le sous-titre de chaque page. Ouvrez votre fichier index.html s’il n’est pas déjà ouvert.

24. Mettez en évidence le sous-titre Bienvenue chez Salut Pizza!

25. Cliquez sur Format Police.

26. Sélectionnez Comic Sans MS, cursive.

27. La boîte de dialogue Nouvelle rêgle de CSS apparaît à l’écran.

28. Dans la zone Nom du sélecteur, indiquez «soustitre».

29. Cliquez sur OK.

35

30. Le sous-titre Bienvenue chez Salut Pizza!devrait maintenant apparaître dans la police Comic Sans MS.

31. Utilisez le panneau Styles CSS pour changer la couleur de ce sous-titre. (Cliquez sur le terme Bienvenue chez Salut Pizza! pour voir apparaître les propriétés de ce sous-titre dans le panneau.)

32. Si vos modifications n’ont pas été reportées sur les autres pages, assurez-vous que la règle a bien été appliquée à cette section de votre texte. Pour ce faire, consultez le panneau Propriétés dans le bas de l’écran.

33. Dans l’illustration ci-dessous, le sous-titre Menu est mis en évidence; en consultant le panneau Propriétés, on constate qu’aucune règle (Règle cible) n’a été sélectionnée. Pour appliquer une règle au format de ce sous-titre, cliquez sur la classe «soustitre» dans le menu déroulant.

Vous ne devez pas nécessairement utiliser des feuilles de style. Ainsi, le panneau Propriétés vous permet par exemple de mettre en gras ou en italique un terme seulement. Il vous suffit de mettre en évidence le terme désiré et de sélectionner l’option HTML. Vous pouvez ensuite choisir le style que vous désirez appliquer au terme sélectionné uniquement.

36

Leçon 8 : Définition des couleurs d’arrière-plan

Au cours de la leçon précédente, vous avez appris comment utiliser une feuille de style en cascade pour changer la couleur et le style des caractères du texte. Durant la présente leçon, vous découvrirez comment modifier les couleurs d’arrière-plan de votre site.

1. Ouvrez votre fichier index.html s’il n’est pas déjà ouvert.

2. Cliquez sur la bordure de la section contenant votre titre.

3. Comme nous utilisons un modèle prédéfini de mise en forme, certaines règles de style sont déjà créées. Dès que vous sélectionnez des parties du modèle, vous voyez apparaître les propriétés CSS correspondantes dans le panneau Styles CSS. Dans le panneau montré ci-dessous, on peut voir les propriétés associées au titre (En-tête); si elles ne s’affichent pas à votre écran, c’est que vous n’avez pas sélectionné la bonne partie du modèle.

4. Dans le présent cas, la couleur d’arrière-plan est grise.

5. Cliquez sur le sélecteur de couleur pour mettre l’arrière-plan en jaune pâle. Assurez-vous de sélectionner l’élément approprié (indiqué à droite). Si vous faites une erreur et que vous voulez annuler la dernière modification effectuée, appuyez sur Ctrl-Z.

37

6. Votre fichier index.html devrait ressembler à l’exemple ci-dessous. Ouvrez un autre de vos fichiers pour vous assurer que vos modifications y ont été reportées.

7. Cliquez sur la bordure de la section contenant vos liens pour les sélectionner. Portez attention aux codes affichés dans le haut du panneau Propriétés; il s’agit des codes HTML correspondant à l’élément sélectionné.

8. Dans le panneau CSS Styles, sélectionnez une autre couleur pour l’arrière-plan.

9. Une fois que vous avez changé la couleur d’arrière-plan, la couleur de la barre de navigation devrait être la même sur toutes les pages. Vérifiez les autres pages. Avez-vous réussi?

10. Assurez-vous que les couleurs choisies sont complémentaires et que votre texte est facile à lire.

11. Le site Web de votre pizzeria est presque terminé. N’hésitez pas à y apporter d’autres changements si vous souhaitez vous exercer davantage. Vous pourriez même essayer de créer un style pour vos liens, en modifiant par exemple leur couleur et en supprimant leur trait de soulignement.

Notez ici, le code indique l’endroit ou la section de votre page

sur laquelle vous faites des modifications.

C’est sous format de code HTML.

38

Pour arriver à maîtriser les feuilles de style en cascade il faut beaucoup de pratique. Dans le cadre du présent cours, nous avons dû faire abstraction de nombreuses autres fonctions CSS (comme le positionnement des éléments sur une page). Lorsque vous vous serez familiarisé avec Dreamweaver, ou avec la conception de pages Web en général, vous aurez peut-être envie d’en savoir plus au sujet de la technologie CSS. À la fin du présent module, vous trouverez une liste de sites Web qui vous aideront à mieux comprendre le langage HTML et les feuilles de style en cascade.

Au cours des leçons précédentes, vous avez obtenu un aperçu des fonctions de Dreamweaver. N’Hésitez pas à explorer ce logiciel et à faire des expériences de codage!

Il existe des millions et des millions de sites Web. Il est extraordinaire d’être capable d’en créer un!

39

Partie II : Éléments à considérer pour la création d’un site Web

Nombreux sont ceux qui savent créer un site Web, mais combien sont capables de le faire CORRECTEMENT? Au cours des trois prochains exercices, vous découvrirez différents éléments dont vous devez tenir compte avant de réaliser un site Web.

Exercice 1 : Conseils pour la conception de sites Web

Nous avons tous visité des sites Web mal conçus qui nous donnent immédiatement envie d’aller naviguer ailleurs. Quels sont les éléments qui déterminent la qualité d’un site Web? La vitesse de téléchargement de la page? Le choix de couleurs? La lisibilité du texte? Voici seulement quelques-uns des éléments dont doivent tenir compte les concepteurs de sites Web.

Lorsque vous concevez un site Web, que ce soit pour vous-même ou pour une grande entreprise, vous devez toujours observer certaines règles. Par exemple, il faut s’abstenir de surcharger les pages et il faut chercher à réduire la taille des images et à répartir le contenu en sections distinctes faciles à lire (évitez les longs paragraphes).

À FAIRE :

1. Effectuez une recherche pour trouver des conseils pour la création de pages Web.

2. À partir de l’information que vous aurez trouvée, dressez une liste d’au moins dix éléments dont il faut tenir compte pour créer un site Web. Enregistrez votre liste dans un document Word ou WordPerfect.

3. Échangez votre liste avec celle d’un compagnon de classe pour vérifier si vous n’avez pas omis certains éléments.

Exercice 2 : Accessibilité des sites Web

Qu’est-ce que l’« accessibilité des sites Web »? Les visiteurs peuvent-ils avoir accès à toutes les parties de votre site Web? Pouvez-vous prendre des mesures particulières pour vous assurer que la majorité des visiteurs auront accès à tous les éléments visuels et sonores intégrés à votre site Web?

À FAIRE :

1. Effectuez une recherche sur l’accessibilité des sites Web.

2. Expliquez ce qu’est l’« accessibilité des sites Web » et pourquoi elle est importante.

3. Dressez une liste d’au moins cinq mesures que vous pouvez prendre pour vous assurer que votre site Web sera accessible. Enregistrez votre liste dans un document WordPerfect.

4. Échangez votre liste avec celle d’un compagnon de classe pour vérifier si vous n’avez pas omis certains éléments.

5. Repérez un site qui vous permet de vérifier l’accessibilité de votre site Web.

40

Exercice 3 : Évaluation d’un site Web

Durant le prochain exercice, vous mettrez à profit les connaissances acquises au cours des deux exercices précédents sur la conception et l’accessibilité des sites Web pour évaluer la qualité d’un site Web. Lorsque vous naviguez sur le Web, vous remarquez que certains sites se distinguent particulièrement alors que d’autres ne retiennent pas votre attention. Qu’est-ce qui rend un site Web intéressant? Lorsque vous évaluez la qualité d’un site Web, vous devez prendre en considération les éléments ci-après.

• Navigation – Liens hypertextes, icônes, boutons, barres et autres éléments d’exploration de la page active ou d’une autre page associée.

• Contenu – Toute l’information intégrée à la page (texte, images et autres éléments médias insérés dans la page).

• Conception – Organisation des éléments dans la page, apparence générale de la page ou impression donnée par celle-ci (valeur esthétique).

• Accessibilité – Facilité avec laquelle les visiteurs peuvent avoir accès au site, indépendamment de leurs capacités ou incapacités.

• Aspects techniques

• Précision/Fiabilité

À FAIRE :

Allez sur un site Web que vous connaissez déjà (et auquel vous pouvez avoir accès à partir du réseau de l’école) et répondez aux questions énoncées ci-dessous dans un nouveau document WordPerfect ou MS word. Lorsque vous aurez terminé, décrivez dans un court paragraphe les points forts du site Web examiné ainsi que les aspects qui devraient être améliorés.

1. Le contenu est-il présenté de façon bien distincte par rapport au menu de navigation?

2. Les liens sont-ils représentés par un texte descriptif (plutôt que par la mention « Cliquez ici »)?

3. Les mêmes thèmes sont-ils repris dans tout le site et les contenus sont-ils tous associés à ces thèmes?

4. Le site est-il homogène (titres, couleurs, navigation)?

5. Le texte est-il facile à lire?

6. Les couleurs sont-elles complémentaires?

7. Retrouve-t-on des balises Alt ou des équivalents textuels pour tous les éléments graphiques afin que l’information essentielle puisse s’afficher?

8. Les images et les liens fonctionnent-ils tous?

9. La vitesse de téléchargement de la page est-elle satisfaisante?

10. Le créateur a-t-il fourni la date de la dernière mise à jour ainsi que des coordonnées?

41

Partie III : Projet final – Création d’un site Web original

Vous connaissez maintenant les principes de base pour construire un site Web ainsi que les éléments dont vous devez tenir compte relativement à la conception et à l’accessibilité des sites Web. Votre projet final consiste à créer un site Web original sous le thème de votre choix (qui doit être approuvé par votre enseignant). Avant d’entreprendre la création dans un éditeur Web comme Dreamweaver, vous devrez d’abord préparer le plan de votre site, qui se présentera notamment sous la forme d’un scénarimage (vous pouvez vous servir du logiciel Inspiration si vous le souhaitez).

Le scénarimage est un plan visuel du site Web. Il se compose habituellement d’une série de pages comportant des croquis élémentaires illustrant le contenu ainsi que les éléments de navigation et de conception du site. Il vous permettra de gagner du temps et de créer un site Web de très grande qualité. Avant d’entreprendre le scénarimage, recueillez tous les éléments d’information que vous désirez intégrer à votre site et triez-les par thèmes. Pour organiser vos idées plus facilement, procédez comme suit : 1. Recueillez tous les éléments d’information (texte, images, etc.) que vous désirez intégrer à

votre site. 2. Triez vos éléments d’information par thèmes. Vos sujets doivent aller du général au

particulier. 3. Déterminez les titres, les sous-titres et le contenu de chacune des pages de votre site. 4. Choisissez une palette de couleurs pour votre site. Assurez-vous que les couleurs de l’arrière-

plan, des titres, des sous-titres, des bordures, du contenu, etc. sont complémentaires. Consultez par exemple le site http://www.colorcombos.com/ pour trouver la combinaison de couleurs la plus appropriée à votre site. Vous devez connaître les codes hexadécimaux pour définir le style de chacune des parties de votre page.

5. Dans votre scénarimage, vous devez prévoir comment l’information sera structurée et comment seront reliées les pages entre elles (navigation). Des liens fonctionnels doivent vous permettre de naviguer d’une partie à l’autre de votre site.

6. Choisissez un modèle de mise en forme. (Ce modèle servira à créer toutes vos pages.) 7. Établissez la structure de navigation (les liens de navigation doivent être situés au même

endroit sur chaque page). 8. Vérifiez si votre structure de navigation fonctionne bien. Mettez-vous à la place d’un

visiteur : avez-vous accès à n’importe quelle page? vous retrouvez-vous facilement dans le site?

Vous trouverez un modèle de scénarimage vierge un peu plus loin dans le présent document.

42

Pour votre site, vous devez atteindre un juste équilibre entre textes et images (vous ne pouvez insérer uniquement des images!). De plus, votre site doit répondre aux critères suivants :

• trois pages au minimum (dont une page d’accueil); • utilisation de modèles de mise en forme Dreamweaver; • couleurs et polices de caractères homogènes d’une page à l’autre; • liens de navigation cohérents (chaque page doit être reliée aux autres pages du site; le

lien doit être placé au même endroit sur chaque page; il ne doit y avoir aucun lien vers la page active);

• éléments de taille homogène (titres principaux, sous-titres, paragraphes, etc.); • au moins deux liens externes (vers des pages ayant un rapport avec le site); • quatre images au minimum; • texte pertinent.

Vous pouvez maintenant utiliser Dreamweaver… N’oubliez pas que la première étape consiste à DÉFINIR UN SITE.

Vous trouverez à la page suivante un petit rappel de la marche à suivre.

43

1. Ouvrez Dreamweaver.

2. Cliquez sur Site Nouveau site.

3. La fenêtre Definition du site s’ouvre.

4. Nommez votre site. Choisissez un nom en lien avec votre thème.

5. Faites abstraction de l’adresse URL à cette étape du processus.

6. Cliquez sur Suivant.

7. Cochez « Non » en réponse à la question qui vous demande si vous voulez utiliser une technologie de serveur.

8. Cliquez sur Suivant.

9. Sélectionnez « Modifie les copies locales sur ma machine… ».

10. Désignez l’emplacement où seront enregistrés les fichiers associés à votre site Web. Tapez G:\webpage_design\nomdudossier (à moins que votre enseignant ne vous indique autre chose). Remplacez nomdudossier par le nom du dossier dans lequel vous souhaitez enregistrer votre site.

(NOTA : Un dossier distinct doit être créé pour chaque site Web. On a choisi le lecteur G: parce que c’est à cet emplacement que vous devez sauvegarder tous vos fichiers à l’école. À la maison, vous pourriez sélectionner un autre emplacement.)

11. Cliquez sur Suivant.

44

12. Dans la fenêtre suivante, cliquez sur la flèche du menu déroulant et sélectionnez Aucun en réponse à la question qui vous demande d’indiquer le moyen de connexion au serveur distant.

13. Cliquez sur Suivant.

14. Dans la section Sommaire de la fenêtre Definition du site, cliquez sur Terminé.

15. Le dossier de votre site devrait apparaître dans le panneau Fichiers, dans le coin inférieur droit de votre écran. (Si le panneau Fichiers n’est pas affiché, appuyez sur F8.)

16. Vous pouvez maintenant ajouter votre page d’accueil à votre site; pour ce faire, cliquez sur Fichier Nouveau et sélectionnez un modèle de mise en forme.

45

Modèle de scénarimage pour un site Web

Le modèle de scénarimage ci-dessous est fourni à titre d’exemple uniquement, et il en existe de nombreux autres dont vous pourriez vous servir. L’apparence du scénarimage importe peu, tant que vous fournissez les éléments d’information pertinents et les croquis associés à chaque page. Dans le présent cas, vous devez remplir une feuille pour chacune des pages de votre site.

Modèle de scénarimage Votre nom : Thème :

Titre descriptif de la page : Nom du fichier :

Description du texte devant être inséré dans la page :

Liens sur la page :

Navigation :

Éléments graphiques/Images :

Couleurs :

Propriétés des caractères : (taille, police, style)

Faites un petit croquis pour illustrer le modèle de page décrit ci-dessus.

46

Grille d’évaluation

4 3 2 1 Mise en forme La mise en forme est

attrayante et utilisable. On repère aisément tous les éléments importants. Les pages sont bien organisées grâce à une utilisation efficace de l’espacement, de l’alignement et du graphisme.

La mise en forme est attrayante et utilisable. On repère aisément tous les éléments importants.

La mise en forme est utilisable, mais surchargée et peu attrayante. On repère aisément presque tous les éléments importants.

La mise en forme est surchargée et peut engendrer une confusion. On repère difficilement les éléments importants.

Contenu L’objet et le thème sont clairement définis, et le site comporte uniquement des éléments pertinents.

L’objet et le thème sont clairement définis, mais le site comporte un ou deux éléments non pertinents.

L’objet et le thème ne sont pas clairement définis.

Aucun objet ou thème ne semble défini.

Liens (Contenu) Tous les liens renvoient à des sites crédibles, à jour et de grande qualité.

Presque tous les liens renvoient à des sites crédibles, à jour et de grande qualité.

La plupart des liens renvoient à des sites crédibles, à jour et de grande qualité.

Moins de trois quarts des liens renvoient à des sites crédibles, à jour et de grande qualité.

Navigation Les liens de navigation sont clairement désignés et toujours situés au même endroit. Ils permettent au visiteur d’accéder facilement à la page référencée (d’avancer ou de reculer) et de se rendre exactement à l’endroit prévu. Le visiteur ne se perd jamais en naviguant.

Les liens de navigation sont clairement désignés. Ils permettent au visiteur d’accéder facilement à la page référencée (d’avancer ou de reculer). Des liens internes renvoient le visiteur exactement à l’endroit prévu. Le visiteur se perd rarement en naviguant.

Les liens de navigation renvoient le visiteur exactement à l’endroit prévu. Certains liens semblent avoir été omis. Le visiteur se perd parfois en naviguant.

Certains liens ne renvoient pas le visiteur à l’endroit prévu. Le visiteur se perd en naviguant.

Fonctionnalité Tous les liens et les éléments graphiques sont visibles et fonctionnels.

Tous les liens et les éléments graphiques, à l’exception d’un seul, sont visibles et fonctionnels.

Deux ou trois liens ou éléments graphiques ne sont pas fonctionnels.

Aucun lien ou élément graphique n’est fonctionnel.

Choix de couleurs Les couleurs des arrière-plans, des caractères et des liens consultés ou non consultés forment une palette attrayante. Elles ne nuisent pas au contenu et sont homogènes d’une page à l’autre.

Les couleurs des arrière-plans, des caractères et des liens consultés ou non consultés ne nuisent pas au contenu et sont homogènes d’une page à l’autre.

Les couleurs des arrière-plans, des caractères et des liens consultés ou non consultés ne nuisent pas au contenu.

Les couleurs des arrière-plans, des caractères et des liens consultés ou non consultés nuisent au contenu et le rendent difficile à lire.

Total : /24

* Grille préparée en partie à l’aide du logiciel Rubistar

47

Sites Web utiles ( en anglais – si vous en trouver des bonnes en français je les remplacerai)

http://www.webmonkey.com – Notions de base sur le langage HTML et les feuilles de style en cascade (CSS)

http://html-color-codes.com/ - Codes de couleur

http://wave.webaim.org/ - Vérification de l’accessibilité d’un site Web

http://www.webpagesthatsuck.com/ - Conseils judicieux pour la conception Web

http://www.avivadirectory.com/color/ - Ressources sur les couleurs pour les concepteurs

http://webdesign.about.com/od/beginningcss/a/bl_csstutorial.htm - Tutoriel de base sur les feuilles de style en cascade