Les guides de formation Conception de pages web. Guide Virtuose - version enseignant2 Guide - Conception de pages web Introduction Introduction, p. 3.

Présentation au sujet: "Les guides de formation Conception de pages web. Guide Virtuose - version enseignant2 Guide - Conception de pages web Introduction Introduction, p. 3."— Transcription de la présentation:

1 Les guides de formation Conception de pages web

2 Guide Virtuose - version enseignant2 Guide - Conception de pages web Introduction Introduction, p. 3 Serveur WWW, p. 3 Préparation Votre PCVotre PC, p. 4 Netscape Composer Introduction, p. 5 Généralités, p. 5 Traitement de texte, p. 6 Insertion d’images, p. 7 Liens et cibles hypertextes, p. 8 Tableaux, p. 10

3 Guide Virtuose - version enseignant3 Guide - Conception de pages web Pour diffuser vos pages sur le web, il faut au préalable les installer sur un serveur www! Avant de commencer à créer des pages, il est pertinent d’apprendre comment fonctionne le serveur. Un serveur web est en fait un ordinateur semblable au vôtre, accessible à distance! Seule nuance : pour que les documents soient tous accessibles, il faut respecter une structure de répertoires bien précise! Cette structure est tout de même très simple : – tout ce qui doit être sur le web doit être dans le répertoire www – votre page d’accueil doit se nommer index.htm ou index.html Le serveur fait la différence entre les majuscules et les minuscules Éviter les espaces, les accents et les caractères spéciaux dans vos noms de fichiers Introduction Serveur WWW Votre PC Introduction Serveur WWW Attention :

4 Guide Virtuose - version enseignant4 Guide - Conception de pages web Avant de commencer: – créez un répertoire www sur votre ordinateur Ensuite: – créez un sous-répertoire pour chaque cours Il est maintenant temps de rassembler tout votre matériel dans le dernier sous-répertoire créé! Tout ce que vous voulez mettre sur le web (powerpoint, word, excel) doit être dans ce sous-répertoire avant de commencer à créer vos pages! Préparation Votre PC

5 Guide Virtuose - version enseignant5 Netscape Composer, inclus dans Netscape Communicator, est l’outil que Virtuose recommande pour la création de vos pages web. Composer fonctionne comme un traitement de texte avec des fonctions graphiques légèrement plus efficaces. Pour accéder à Netscape Composer, vous pouvez lancer Netscape Navigator et cliquer sur l’icône approprié au bas de la fenêtre… …ou encore utiliser le menu Démarrer et retrouver l’icône suivante: Une fois dans Composer, la première chose à faire, c’est de définir les propriétés de la nouvelle page (titre, couleurs des liens, couleurs du fond). Pour accéder à ces options, cliquez sur Format, puis sur Propriétés et Couleurs de la Page (Page Colors and Properties). Sous le premier onglet, remplir les lignes titre et auteur. Sous le second onglet, choisir vos couleur en cliquant sur les boîtes colorées. Guide - Conception de pages web Netscape Composer Introduction Généralités

6 Guide Virtuose - version enseignant6 La majorité des outils dont vous aurez besoin sont accessibles via la barre d’outils de Composer. Ceux-ci vous seront présentés plus en détails. Pour les liens hypertextes, les listes et les tableaux, le bouton droit de la souris présente plusieurs fonctions intéressantes. Cette boîte vous permet de modifier le style, la police, la taille et la couleur de vos caractères! La première section (Normal) vous permet, tout comme un traitement de texte, de hiérarchiser vos différents niveaux de titres et sous-titres. 1- Caractères Gras 2- Caractères Italiques 3- Caractères soulignés (à éviter) 4- Efface tous les styles et liens hypertextes 5- Liste à puces 6- Liste numérotée 7- Diminuer le retrait à gauche 8- Augmenter le retrait à gauche 9- Alignement (gauche, centre, droite) Guide - Conception de pages web Généralités (suite) Traitement de texte 123456789

7 Guide Virtuose - version enseignant7 Pour insérer une image dans votre texte, allez avec la souris à l'endroit où vous désirez que votre image apparaisse et cliquez une fois avec le bouton de gauche afin de faire apparaître le curseur clignotant. Puis, appuyez sur le bouton image. Pour modifier les propriétés d’une image existante, sélectionner l’image et utiliser le bouton droit de la souris. Une fenêtre semblable à celle ci-dessous devrait apparaître! A- Appuyer sur Browse… pour sélectionner l’image à insérer B- Sélectionner l’alignement que vous désirez C- Normalement, Composer garde les dimensions originales de l’image. Cependant, vous pouvez choisir de nouvelles dimensions pour des raisons de mise en page. D- Lorsque vous voulez de l’espace autour de votre image, vous pouvez utiliser cette fonction. Il est conseillé de l’utiliser lorsque vous voulez mettre du texte autour de votre image. Guide - Conception de pages web Insertion d’images Note : Les pages Web destinées à l ’Intranet HEC ne devraient pas contenir d’images.

8 Guide Virtuose - version enseignant8 Cibles: –Les cibles permettent de définir des signets à l’intérieur d’une page web. Les liens hypertextes peuvent ensuite pointer directement sur ces signets. Liens: –Le bouton Link permet de créer des liens hypertextes pointant à l’intérieur de la même page, à une autre page, ou à des documents Office (ou autres). Pour créer une cible dans un document, sélectionner un mot, une phrase ou une image. Cette sélection indiquera à quel endroit le signet devra pointer. Appuyer ensuite sur le bouton Target, puis indiquer le nom du signet dans la boîte qui apparaîtra. Pas d’espace, pas d’accent, tout en minuscule. Guide - Conception de pages web Liens et cibles hypertextes Note :

9 Guide Virtuose - version enseignant9 Pour créer un lien dans un document, sélectionner un mot, une phrase ou une image. Cette sélection indiquera quel texte servira de liens. Appuyer ensuite sur le bouton Link … Pour modifier les propriétés d’un lien existant, sélectionner le lien et utiliser le bouton droit de la souris Guide - Conception de pages web Liens et cibles hypertextes (suite) Note : Votre lien Adresse de votre lien Cibles à l’intérieur de la page liée Les pages webs destinées à l’Intranet HEC ne doivent contenir que des liens vers des pages ou documents qui ne sont pas dans l’Intranet HEC.

10 Guide Virtuose - version enseignant10 Adresse de votre lien Pour lier à une page web externe : taper l’adresse complète de la page exemple : http://www.hec.ca/virtuose/ Pour lier à une autre page web de votre cours : utiliser le bouton Choisir un fichier et aller sélectionner le bon fichier.html Pour lier à un document Office: utiliser le bouton Choisir un fichier et aller sélectionner le bon fichier. –Vos fichiers doivent se trouver dans le répertoire www (ou un de ses sous-répertoires) pour que les liens fonctionnent une fois le tout installé sur internet. Pour lier à une adresse e-mail : taper l’adresse complète de la personne, précédé de la commande mailto: (sans espcace) exemple : mailto:virtuose@hec.ca Pour insérer un tableau dans votre page, allez avec la souris à l'endroit où vous désirez que votre tableau apparaisse et cliquez une fois avec le bouton de gauche afin de faire apparaître le curseur clignotant. Puis, appuyez sur le bouton Table. Pour modifier les propriétés d’un tableau existant, utiliser le bouton droit de la souris. Guide - Conception de pages web Liens et cibles hypertextes (suite) Note : pour les documents qui ne vont pas dans l ’Intranet Tableaux Note :

11 Guide Virtuose - version enseignant11 La première partie de la fenêtre qui apparaît vous permet de définir le nombre de rangées et de colonnes que vous voulez dans votre tableau. Il est toujours possible de modifier ces propriétés avec le bouton droit de la souris. Cette section permet aussi d’indiquer si vous voulez que votre tableau soit aligné à la gauche, au centre ou à la droite de votre page. Le tableau invisible (sans bordure) est l’outil le plus utilisé pour faire de la mise en page plus poussée dans les pages web. Guide - Conception de pages web Tableaux (suite) Note : Largeur des colonnes (général) Bordure Largeur du tableau

12 Guide Virtuose - version enseignant12 La dernière partie de la fenêtre qui est apparue en appuyant sur le bouton Table permet de définir la couleur de fond du tableau. Pour changer la couleur de fond, cliquer sur la boîte grise. Pour mettre une image en fond de cellule, utiliser la ligne Image et le bouton Choisir une image… En utilisant le bouton droit de la souris dans un tableau, –vous pouvez modifier les propriétés du tableau (tableau, rangée ou cellule) en appuyant sur Propriétés du tableau. –vous pouvez ajouter des éléments au tableau en appuyant sur Insérer. –vous pouvez supprimer des éléments du tableau en appuyant sur Supprimer. Pendant la création ou la mise-à-jour de vos pages, il est toujours possible d’aller voir le résultat de votre travail en appuyant sur le bouton Aperçu. Si votre fichier n’avait pas été sauvegardé, Composer vous demandera de le faire. Une fois dans Netscape Navigator, il vous faudra parfois appuyer sur Recharger pour que le navigateur affiche vos changements. Guide - Conception de pages web Tableaux (suite) Prévisualiser