LeCompagnon.info

Voir produits sur TeeSpring.comCliquez ici pour voir les produits

Internet

Internet: Conception de page Web avec FrontPage

Avant de commencer
Introduction
Environnement FrontPage
Le texte
Les images
Les liens
Les boutons de navigation
Les tableaux
Les propriétés de la page
Sauvegarder la page Web
Aperçu de la page Web
Publier la page Web
Renommer un fichier
Vérifier les liens
Créer un formulaire
Créer un cadre
Références

Avant de commencer

Ceci est ma première page sur la conception de pages Web en utilisant Microsoft FrontPage. Puisque je dois sortir rapidement ce document, je me base sur la page de conception de pages Web en utilisant Netscape Composer. Les concepts de base sont les mêmes. Cependant, FrontPage offre beaucoup plus d'options pour une page Web ainsi que la possibilité de gérer un site Web au complet. Donc, voici mon premier effort sur FrontPage.

Il y a un point important que je veuille vous rappeler. Il est préférable que le nom des documents, des images et tout autres documents placés dans le site Web soit en minuscule. De plus, le nom ne doit pas avoir d'espaces ou de caractères spéciaux tel que des accents ou de soulignés. Bien que cela fonctionnerait bien sur votre ordinateur, il y a de bonnes chance que cela ne fonctionne pas sur le serveur sur lequel vous allez déposer votre site Web. Ceux-ci sont plus sensibles aux accents et comprennent différemment les espaces que votre ordinateur personnel.

Internet
La nétiquette
Courrier électronique
Courrier électronique (avec Netscape)
FTP (File Transfer Protocol)
Les newsgroups
Internet Relay Chat (IRC)
World Wide Web (WWW ou W3)
Conseils pour la conception de pages Web
Conception de page Web avec FrontPage
Conception de page Web avec Netscape Composer
Conception de page Web avec Word
Les formulaires
Les codes HTML
Les images animées

Autres formations

Word 2003
Word 2007
Excel
Excel
VBA pour Excel
PowerPoint 2003
PowerPoint 2007
Access
Access 2010
Internet
Général
Intelligence financière
Vidéos

Navigation
Précédent
Suivant
Page Principale
FAQ
Nouveautés
Plan du site
Références
Motivations
Manuels de formation
Fichiers de démonstration
Droits d'auteur
Text in English
Nous joindre
Par courriel
Abonnez-vous à
l'infolettre LCI





























Abonnez-vous à l'infolettre LeCompagnon.info


Pour pouvoir suivre cet exercice, vous devez premièrement avoir sur un ordinateur Microsoft FrontPage. Les images que vous voyez sur cette page proviennent de FrontPage XP. Les versions précédentes sont légèrement différentes. Aussi, pour les exercices de cette page, vous devez copier sur une disquette des images suivantes: lignex.gif pour l'image qui sera insérer dans la page Web, niceblue.gif pour l'image de fond de la page Web, boulep.gif pour l'image qui servira de bouton de navigation. Il vous faudra aussi la présentation courrier.ppt pour l'exercice. Ceci est pour démontrer comment télécharger un fichier autre qu'une page Web. Cliquez sur les liens bleus et sauvegardez ces images sur une disquette. Plus tard, ces images et document seront importés sur le site Web en développement.

Introduction

Que retrouve-t-on sur une page Web?

  • du texte
  • des images
  • des lignes séparatrices
  • des liens hypertextes
  • des boutons de navigation
  • des tableaux
  • un fond de page ayant un motif ou une image
  • des cadres ou des "frames"
  • des formulaires
  • de la programmation (perl, java, javascript, xml ...)

FrontPage est capable de couvrir tout cela et beaucoup plus. Par exemple, il est aussi capable de gérer un site Web, d'apporter des changements au site au complet rapidement, d'ajouter des formulaires qui donne accès à des bases de données, d'ajouter de l'animation et encore plus. Ces options seront couvertes dans une version ultérieure de cette page. Pour le moment, on se concentre que sur les éléments de base. Pour commencer, il faut ouvrir le programme Microsoft FrontPage.

Ouvrir une nouvelle page Web ou un nouveau site Web? Cela dépend de vos besoins. Pour les besoins de cet exercice, nous allons premièrement créer un dossier dans lequel sera déposé un site Web. Vous pourrez ensuite importer autant d'éléments ( pages Web, images, programmation et autres documents ) que vous voudrez dans ce dossier.

OU


*Appuyez sur le triangle pointant vers le bas à la droite du bouton nouveau.
*De la liste des options, sélectionnez Web.
OU
*Du volet Microsoft, sous la section Créer, sélectionnez l'option Créer à partir d'un modèle.

Le volet Microsoft est une nouveauté pour la version XP. Comme les barres d'outils, il offre la possibilité d'accomplir des tâches fréquemment demandées. Si le volet Microsoft n'est pas visible à la droite de l'écran, vous pouvez l'activer en tout temps à partir du menu Afficher et sélectionner les options Barres d'outils et Volet Microsoft.

De la liste des types de sites Web déjà préparés, vous pouvez choisir celui qui répond le mieux à vos besoins. Vous pouvez aussi changer l'endroit où le dossier sera créé en appuyant sur le bouton Parcourir.

*Pour les besoins de l'exercice, sélectionnez l'option Site Web Normal.
*Appuyez sur le bouton OK.

Microsoft FrontPage va se charger de créer un dossier dans lequel vous pourrez déposer les pages Web, les images et les autres documents qui composeront votre site Web. Pour mieux gérer le contenu de ce dossier, il est possible de créer d'autres dossiers pour regrouper des éléments semblables à un seul endroit. C'est pour cela qu'il y a déjà un dossier nommé "images" qui a été créé pour regrouper toutes les images de votre site. Vous pouvez ajouter d'autres dossiers ou gérer les fichiers du site à partir de la section Dossier qui est affiché à la gauche de l'écran.

Il y a aussi déjà une page Web vide qui s'appelle "index.htm". La convention sur les serveurs sur lequel vous allez déposer votre site veut que la page principale de votre site, ou la page d'introduction si vous voulez soit nommée ainsi. Certains serveurs pointilleux veulent que le nom soit "index.html". Assurez-vous que cette page soit toujours présente et qu'elle représente page d'introduction de votre site. À partir de celle-ci, les Internautes pourront naviguer sur tous les éléments de votre site.

L'exercice qui suit consiste à ajouter certains éléments à cette page. Plus tard, vous pourrez ajouter vos propres pages et construire le site comme vous le désirez.

Si la page index.htm n'est pas là.

*Appuyez sur le bouton Nouveau.
OU
*Du volet Microsoft, sous la section Créer, sélectionnez l'option Page vierge.

*Du menu Fichier, sélectionnez l'option Enregistrer sous.
*Enregistrer le document vide sous le nom index.htm .

Si le dossier image n'existe pas et désirez le créer.

*Du menu Fichier, sélectionnez les options Nouveau et Dossier.
*Donnez le nom images au nouveau dossier.
*Appuyez sur la touche Entrée.

Environnement de FrontPage

Avant d'entrer dans l'exercice, il est préférable de voir les options qu'offre FrontPage pour créer et gérer un site Web. Voici donc une courte liste de ces éléments.

Page Permet de voir les pages Web sur lesquels vous travaillez en ce moment. Plusieurs pages peuvent être ouvert en même temps. Pour passer d'une page Web à une autre, il suffit de cliquer l'onglet du document.
Dossier Permet de gérer les pages Web, images et autres éléments qui se retrouve sur le site: ajouter des dossiers, ajouter, renommer et supprimer tout éléments du site.
Rapports Offre une synthèse du site. Certains rapports sont très utiles.
Navigation Permet de voir la structure du site à partir de la page principale.
Liens hypertexte Permet de voir les liens entre les différentes pages du site.
Tâches Énonce la liste des tâches à accomplir pour avancer le site Web.

Les vues possibles d'une page Web sont dans le coin inférieur gauche de l'écran. Il y a la vue Normale, HTML et aperçu. Le mode normal vous permet de modifier le contenu de la page. Le mode HTML vous permet de voir le texte et les instructions qui composent votre page Web en format HTML (HyperText Markup Language) . Vous pouvez aussi apporter des changements à une page Web dans ce mode. Il est parfois intéressant de changer des options directement à partir du code HTML. Le mode Aperçu vous donne une idée du résultat final.

Un nouvel élément de la version XP d'Office et de FrontPage est le volet Microsoft. Il permet de réaliser certaines opérations fréquentes à partir de celui-ci. Les flèches à la gauche vous permettent de voir les diverses faces du volet. Il y a aussi le bouton ayant un triangle pointant vers le bas à la droite qui vous donne d'autres options.

Importer les images ou d'autres fichiers

Avant de pouvoir ajouter des éléments aux pages Web du site, il est très préférable d'importer ces éléments dans le site Web. La gestion du site est nettement améliorée quand tous les éléments se retrouvent dans un dossier Web. Le prochain exercice consiste d'importer les images mentionnées au début de cette page dans le dossier "image" du site. Avant d'importer, il faut sélectionner le dossier dans lequel les éléments seront déposés.

*Du volet Affichage, sélectionner Dossiers.
*Sélectionnez le dossier images.

Vous pouvez maintenant importer des éléments à votre site dans ce dossier.

*Du menu Fichier, sélectionnez l'option Importer.

Cette fenêtre va apparaître et vous donner la liste des éléments que vous avez choisi d'importer. Pour le moment, elle est vide.

*Appuyez sur le bouton Ajouter un fichier.

La prochaine partie présume que les éléments à ajouter sont sur une disquette. Mais ces fichiers peuvent aussi bien provenir d'un autre dossier sur votre ordinateur ou même à partir du World Wide Web (depuis un site Web) si vous êtes connecté à l'Internet.

*De la case Rechercher dans, sélectionnez le bon lecteur (disquette, disque dur, lecteur Zip, CD-ROM, module de mémoire ...) dans lequel se retrouve les fichiers voulus.
*Sélectionnez le dossier dans lequel se retrouve les fichiers voulus.
*Sélectionnez les fichiers voulus.

Pour sélectionnez plusieurs documents à la fois, vous avez deux options. Vous pouvez cliquer sur le premier fichier, garder un doigt sur la touche MAJ ( Shift ) et sélectionner le dernier fichier de votre choix. Tous les fichiers entre ces deux seront aussi sélectionnés. Vous pouvez aussi choisir des fichiers de façon plus sélective en gardant un doigt sur la touche CTRL tout en sélectionnant les fichiers.

*Une fois que vous avez choisi les fichiers, appuyez sur le bouton Ouvrir.

FrontPage va vous retourner à la fenêtre d'importation. Vous pouvez choisir d'autres fichiers situés dans d'autres lecteurs ou d'autres dossiers. Vous pouvez même aller chercher des fichiers sur le World Wide Web en appuyant sur le bouton Depuis le site Web.

*Une fois que vous avez choisi tous les fichiers que vous voulez importer, appuyez sur le bouton OK.

Les images ont été recopiées dans le dossier images. Vous pourrez ensuite les insérer dans les pages Web de votre choix.

Vous pouvez aussi importer des fichiers à partir de l'Internet. La prochaine partie consiste à importer le fichier courrier.ppt que vous avez choisi au début de ce document dans le dossier Web à partir de l'Internet. Ceci implique que votre ordinateur est présentement connecté à l'Internet. Si cela n'est pas le cas, vous pouvez toujours lire cette section et être prêt quand vous devrez importer un fichier. Placez le fichier courrier.ppt dans la "racine" ou le dossier principal du dossier Web.

Mais il faut faire attention à l'option d'importation. Elle peut vous apporter des problèmes légaux. Vous ne pouvez pas importer tout ce que vous voulez de l'Internet. Vous allez y retrouver beaucoup de matériel qui ont des droits d'auteur, tel ce site Web, ou des images avec des marques de commerce. Il est important d'avoir l'autorisation d'une personne responsable avant d'importer et d'utiliser un élément d'un autre site. En cas de doute, n'importez pas.

*Sélectionnez la "racine" du dossier (c:\Mes documents\Mes ...)
*Du menu Fichier, sélectionnez l'option Importer.
*De la fenêtre Importer, appuyez sur le bouton Depuis le site Web.

L'assistant d'importation vous permet de choisir des fichiers à partir de votre ordinateur ou à partir de l'Internet. Mais il faut que l'ordinateur soit connecté pour pouvoir chercher les fichiers.

*Pour l'importation, sélectionnez l'option Depuis un site World Wide Web.
*De la case Emplacement, entrez l'adresse suivante: http://www.er.uqam.ca/merlin/xw999998/demos/courrier.ppt .
*Appuyez sur le bouton Suivant >.

L'assistant vous permet de choisir un dossier sur un site sur l'Internet. Cependant, si ce dossier contient plusieurs fichiers ou d'autres sous-dossiers, ceux-ci pourraient aussi être importé. C'est pour cette raison que je vous demande d'importer un fichier, courrier.ppt, au lieu du contenu d'un dossier au complet. Le dossier contient 33 fichiers pour un total de 27 MO! Soyez certain de prendre juste ce que vous avez besoin. Sinon, l'importation de fichiers que vous n'avez pas besoin peut prendre beaucoup de temps.

*Appuyez sur le bouton Terminer.

FrontPage va prendre quelques instants pour importer le document ou les dossiers que vous avez demandés.

Le document que vous avez demandé est maintenant dans votre dossier. Il y a plus d'options sur la gestion des fichiers et du dossier Web un peu plus loin sur cette page.

Maintenant que vous connaissez un peu plus l'environnement FrontPage, il est temps de se mettre au travail. La suite consiste à créer une page Web et de couvrir les éléments qui devraient y être.

Le texte

Il ne faut jamais oublier que l'élément le plus important d'une page Web est son contenu. Une tonne d'images et d'effets spéciaux ne remplacera jamais un texte clairement écrit. La prochaine partie montre quelques-unes des possibilités pour améliorer la présentation du texte.

*Écrivez le texte suivant: Ceci est ma première page Web.
*Appuyez deux fois sur la touche Entrée.

Même si l'élément le plus important est le texte, il est toujours possible de changer sa présentation pour le rendre plus agréable ou plus informatif. Pour cette raison, il y a une barre d'outils dans FrontPage qui facilite la présentation du texte.

*Si la barre d'outils mise en forme n'est pas affichée, vous pouvez l'activer à partir du menu Affichage avec les options Barres d'outils et Mise en forme.

Sur cette barre d'outils, vous retrouverez les outils pour changer la présentation du texte et plus.

Mais il y a plus. Cette barre d'outils vous offre aussi la possibilité de préparer une liste "non ordonnée", sans chiffres, ainsi qu'une liste ordonnée. Le prochain exercice consiste à créer une liste non ordonnée.

*Du la barre d'outils Mise en forme, appuyez sur le bouton .

Vous pouvez maintenant commencer à écrire votre liste.

*Écrivez: Liste de points.
*Appuyez sur la touche Entrée.
*Écrivez: Pratique pour de courtes listes.
*Appuyez sur la touche Entrée.
*Écrivez: Très concis.
*Appuyez sur la touche Entrée.

Il reste qu'à terminer la liste.

*Appuyez sur la touche Entrée pour commencer une nouvelle ligne.

*Du la barre d'outils appuyez sur le bouton .
OU
*Appuyez une seconde fois sur la touche Entrée.

La liste est maintenant terminée. Elle devrait ressembler à ceci.

  • Liste de points.
  • Pratique pour de courtes listes.
  • Très concis.

Le format HTML offre une manière d'aligner du texte. Les boutons et servent à donner ou retirer un retrait d'un paragraphe. La dernière option sert à aligner un paragraphe de texte. Il est possible de l'aligner sur la bordure de gauche ou de droite ou de centrer le paragraphe.

Il y a encore plus d'options dans le menu Format pour changer la présentation du texte.

*Sélectionnez la première phrase de la page Web (Ceci est ma première page Web).

*Du menu Format, sélectionnez l'option Police.

À partir de cette fenêtre, vous pouvez changer la présentation du texte de votre page. Il vous est possible de changer la police de caractère, sa taille, sa couleur ainsi que de mettre d'autres options de présentation. Le prochain exercice consiste à changer un peu la présentation de la phrase.

*De la liste des polices de caractères, sélectionnez la police Times New Roman.
*Changez la couleur à bleu foncé.
*Changez le style de police à Gras.
*Changez la taille de la police de caractère à 6 (24 points).
*Appuyez sur le bouton OK.

Voici ce qui devrait être le résultat.

Faîtes attention à votre choix de polices de caractères. Bien que vous puissiez avoir un grand choix de polices sur votre ordinateur, cela ne veut pas pour autant dire que les lecteurs de votre site les ont aussi. Certains logiciels ajoutent des polices de caractères à votre ordinateur. C'est surtout des polices de "fantaisie" qu'il faut se douter. Si l'ordinateur du lecteur ne retrouve pas la police, il va essayer de retrouver une police "équivalente". L'affichage de votre page Web peut être très différente de ce que vous aviez imaginé. Utilisez des polices de caractères populaires tel que Time NewRoman et Arial.

Les images

Sans vouloir retirer l'importance du texte, l'un des éléments qui ont rendu le World Wide Web si populaire est sa capacité d'afficher des images. Mais attention! Le Web accepte seulement trois formats d'images: gif, jpeg et png. Pour plus de détails sur les trois formats d'images, cliquez ici pour retourner à la page précédente à la section sur les images. Assurez-vous que les images que vous voulez utiliser soient dans l'un de ces formats. Sinon, vous devrez utiliser un logiciel pour la conception d'images tel que Photoshop, PaintShop Pro et plusieurs autres pour convertir votre image dans l'un des formats acceptés. Si vous insérez une image qui n'est pas dans l'un de ces formats, FrontPage va vous avertir et essayer de le convertir s'il est capable. Une fenêtre va apparaître avec les options. Vous la verrez un peu plus loin sur cette page.

Le prochain exercice consiste à placer des images sur la page Web ainsi que pour le fond de l'écran. Vous devrez auparavant avoir copié les fichiers demandés au début de cette page dans le dossier images du site Web. La procédure qui suit présume que vous prendrez les images requises à partir de ce dossier.

*Appuyez sur le bouton Insérer une image depuis un fichier.
OU
*Du menu Insertion, sélectionnez les options Image et À partir du fichier.

Pour choisir l'image

Attention!
Avant d'insérer une image sur une page Web, il faut d'abord l'avoir créé ou l'avoir trouvé parmi une collection d'images sur disque compact ou sur l'Internet. Assurez-vous qu'il n'y a pas de droits d'auteurs ou une marque déposée sur l'image que vous voulez utiliser. Si vous n'êtes pas certain, ne l'utilisez pas.

*De l'option Regarder dans, sélectionnez le dossier où se trouve le fichier. Pour cet exercice, c'est le dossier images.
*De la liste des images du répertoire, sélectionnez le fichier de l'image. Pour l'exercice, sélectionnez le fichier lignex.gif .
*Appuyez sur le bouton Insérer.

L'image suivante va apparaître.

Image gif avec animation d'un procédé de proudction.

*Du bas de l'écran, appuyez sur le bouton Aperçu.

Comme vous pouvez le remarquer, cette image est animée. C'est une collection d'images l'une derrière l'autre qui donne l'effet d'animation. Il existe plusieurs petits logiciels qui vous aident à concevoir une image animée. Il y a même sur ce site la page animé.htm qui a d'autres exemples.

*Pour revenir à l'édition de la page Web, appuyez sur le bouton Normal.

La partie de l'image avait aussi deux autres options.

Pour voir ces options ou pour modifier les options de l'image:

*Faites un double-clic sur l'image.
OU
*Cliquez sur l'image.
*Du menu Format, sélectionnez l'option Propriétés.
OU
*Appuyez sur les touches Alt et Entrée.

FrontPage vous offre plusieurs options sur les images. Il y a premièrement l'habillage. Sans habillage, il y aura seulement une ligne de texte à côté de l'image. Avec un habillage de gauche ou de droite, l'image sera sur l'une des bordures de la page. Mais il sera possible d'écrire plusieurs lignes de texte autour de celle-ci. Mais ces options HTML ne permettent pas d'avoir une image au milieu de la page et d'avoir plusieurs lignes de texte. Une façon de contourner ce problème est de créer un tableau de trois colonnes. Placez l'image au milieu et écrivez le texte dans les cellules de gauche et de droite.

On peut aussi à partir de cette fenêtre aligner l'image et de déterminer l'espacement entre l'image et les autres éléments de la page. Généralement, il est préférable de laisser un espace. Mais il arrive ou il est préférable d'avoir plusieurs images collées l'une après l'autre. Par exemple, il est préférable de coller les images d'une barre de navigation comme vous avez au début et à la fin de cette page Web.

Il est aussi préférable de spécifier la taille de l'image. Cela permet au navigateur de pages Web de réserver l'espace requis pour l'image tout en continuant d'afficher l'image autour de celle-ci. Le navigateur insère les images un peu plus tard au lieu de faire attendre le lecteur qui peut lire le texte. L'élément le plus important d'une page Web est toujours le texte. Il devrait avoir la priorité.

Un autre point intéressant est qu'il vous est permis de changer la taille de l'image; de l'agrandir ou de la réduire. Par exemple, changez la taille de l'image à 100 pixels de largeur par 70 de hauteur. Constatez le résultat.

*Pour les besoins de l'exercice, sélectionnez les options tel que sur l'image ci-dessus.
*Sélectionnez l'onglet Général.

De cette fenêtre, vous pouvez déterminer l'endroit où se situe l'image sur le site. Vous pouvez aussi modifier l'image si vous avez auparavant déterminé quel éditeur d'images FrontPage doit se référer. Vous pouvez déterminer l'éditeur à partir du menu Outils et les options Options et Configurer les éditeurs. L'option paramètre permet d'ajouter des descriptions à l'images ou des instructions HTML.

FrontPage reconnaît que l'image actuelle est en format GIF. Le logiciel reconnaît ce format ainsi que JPEG. Bien qu'il ne l'indique pas, FrontPage reconnaît aussi le troisième format disponible PNG (Portable Network Graphic).

Il y a aussi l'option d'insérer une image à basse résolution, plus petite et plus rapide à charger que l'image finale. Avec la rapidité des lignes de communication, cette option est de moins en moins utilisé.

L'option texte devrait toujours être utilisé. C'est du texte que vous ajoutez pour décrire l'image. Ceci est très pratique au lecteur si l'image n'apparaît pas. Au moins, celui-ci aura une description. Ceci est aussi très utilise pour les internautes non-voyants qui n'ont pas d'autres moyen de reconnaître l'image que par votre description.

Il est aussi possible d'insérer un lien hypertexte. L'option cadre de destination vous permet d'envoyer le lien vers une autre section du cadre. FrontPage vous permet d'avoir des cadres qui séparent l'écran en plusieurs sections. Chacune peut afficher une page Web. Donc, vous pouvez avoir plusieurs pages Web à l'écran et l'espace qu'ils utilisent est déterminé par le cadre. Vous pouvez faire des liens qui transfert la page Web ;à afficher dans un autre cadre. Il faut inscrire le nom du cadre dans cette case.

*Sélectionnez l'onglet Vidéo.

Vous pouvez aussi insérer des présentations multimédia. Malheureusement, je n'ai pas eu l'opportunité d'essayer.

*Appuyez sur le bouton OK.

Insérer une image pour le fond de la page Web.

Le prochain exercice consiste à insérer une image pour le fond de la page Web. Il est recommandé de bien choisir le fond de page pour faciliter la lecture du texte. S'il y a peu de contraste entre le texte et le fond, le texte sera difficile à lire.

*Du menu Format, sélectionnez l'option Arrière-plan.
OU
* Du menu Fichier, sélectionnez l'option Propriétés.
*Sélectionnez l'onglet Arrière-plan.

Cette fenêtre vous donne toutes les options pour contrôler le fond de page ainsi que les couleurs du texte. La prochaine partie consiste d'ajouter une image pour le fond de la page.

*Sélectionnez l'option Image d'arrière-plan.

La fenêtre suivante va apparaître.

*Pour les besoins de l'exercice, sélectionnez l'image niceblue.gif .
*Appuyez sur le bouton Ouvrir.

L'image est sélectionnée.

Il est aussi possible de déterminer la couleur de fond au lieu de mettre une image. Si vous sélectionnez les deux options, l'image va remplacer la couleur d'arrière-plan. Vous pouvez aussi changer la couleur des liens de toute la page, des liens que le lecteur a déjà visité et lorsque vous cliquez sur le lien. Afin d'accélérer la sélection des options, FrontPage peut aller lire les informations d'une page Web que vous avez préparé avec l'option Utiliser les informations d'arrière-plan d'une autre page.

*Appuyez sur le bouton OK.

Vous remarquerez que le fond de la page est maintenant le motif bleu de l'image que vous avez sélectionné. Il existe plusieurs logiciels pour concevoir des fonds de pages. Il y a encore plus d'images déjà préparées sur le World Wide Web que vous pouvez utiliser. Il suffit de chercher un peu.

Les lignes horizontales

Les lignes horizontales sont utilisées pour séparer les différentes parties d'un document.

*Après avoir inséré une image, appuyez sur le bouton.
OU
*Du menu Insertion, sélectionnez l'option Trait horizontal.

Une ligne horizontale va s'insérer à la longueur de l'écran.

*Pour modifier la ligne, faites un double-clic sur la ligne horizontale.
OU
*Cliquez sur la ligne.
*Du menu Format, sélectionnez l'option Propriétés.
OU
*Appuyez sur les touches Alt et Entrée.

*Modifier les options à ceux affichée de l'image ci-dessus.
*Appuyez sur le bouton OK.

La ligne horizontale va changer de forme et de couleur selon les options que vous avez choisi. Voici une liste des options avec une courte description.

Comme la plupart des éléments d'une page HTML, la largeur peut être déterminé de deux façon: selon le pourcentage de l'écran ou en pixels.

Les liens

L'élément qui différencie le World Wide Web des autres services de l'Internet (courrier électronique, FTP, IRC, Newsgroups ...) est sa capacité d'avoir des liens hypertextes. Il y a cependant plusieurs types de liens:

+Lien externe: lien à une autre page Web ou à un autre site.
+Lien interne: Le terme en anglais est un "bookmark". Word utilise le terme "signet" et Netscape utilise le terme "Marqueur". Le cours ADM1421 utilise le terme "lien interne". C'est un lien à un autre endroit sur la même page Web qui est présentement à l'écran.
+Lien à des adresses de courrier électronique.
+Lien à des serveurs ftp, des serveurs gopher ou des newsgroups qui sont d'autres services de l'Internet.
+Lien à des documents.

Heureusement, le concept pour créer un lien est toujours le même. Les prochains exercices consistent à créer des liens à différents éléments de page Web.

Lien à une page Web

Le premier exercice consiste à créer un lien à la page principale de l'université du Québec à Montréal.

*Faites un bloc avec le mot Ceci de la première ligne de la page Web.
*Appuyez sur le bouton Lien hypertexte.
OU
*Du menu Insertion, sélectionnez l'option Lien hypertexte.
OU
*Appuyez sur les touches Ctrl et K.

La fenêtre pour créer des liens sur du texte apparaît. La première partie indique sur quel texte le lien sera placé. Dans ce cas, il s'agit du texte Ceci. Dans la case Adresse, il faut indiquer l'adresse de la page Web, ainsi que son signet si nécessaire.

*Dans la case Adresse, écrivez l'adresse suivante: http://www.uqam.ca .

*Appuyez sur le bouton Info-bulle.

En plus de créer un lien, FrontPage vous permet d'ajouter une description au lien. Le lecteur de la page aura une meilleure idée de ce qui va arriver lorsqu'il va sélectionner le lien.

*Dans la case Texte de l'Info-bulle, entrez le texte suivant: Site de l'UQÀM .
*Appuyez sur le bouton OK.

Il y a maintenant un lien sur le mot "Ceci" qui vous amènera à la page principale de l'Université du Québec à Montréal (UQÀM) lorsque vous cliquerez sur ce lien.

Il faut cependant faire attention à l'adresse que l'on donne au lien. Si le lien est pour une autre page Web du même site, il est préférable d'écrire seulement le nom de la page (FrontPage-.htm par exemple).

Cependant, si la page Web est sur un autre site, vous n'avez pas le choix d'écrire l'adresse complète. Cette adresse commence toujours par http:// qui est le nom du service pour le World Wide Web (HyperText Transfert Protocol). Ensuite il y a le nom du serveur où se trouve cette page. Pour l'exemple, il s'agit de www.uqam.ca . Pour terminer, il y a le nom de la page Web.

S'il n'est pas indiqué, le navigateur va automatiquement chercher le fichier index.html . C'est généralement un fichier caché qui contient la liste des fichiers du répertoire (ou dossier). Il vous est cependant possible de sauvegarder un fichier sous ce nom. Celle-ci sera dont la page par défaut et devrait donc être la page principale du site. C'est d'ailleurs le cas pour ce site.

Lien à un signet.

Le prochain exercice consiste à créer un lien à une autre partie de la même page Web. C'est aussi appelé un "bookmark" en anglais aussi appelé un signet ou un lien interne. Il faut premièrement placer un signet sur la page pour ensuite créer un lien sur celui-ci.

*Placez le curseur à la fin de la page Web.
*Appuyez sur la touche Entrée une trentaine de fois.

Ceci est pour s'assurer que le début de la page Web ne soit pas visible en même temps sur l'écran. Le lien sera sur cette première ligne. Il faut maintenant écrire un peu de texte avant d'insérer le signet.

*Écrivez le texte suivant: Ceci est la fin de la page Web.

*Du menu Insertion, sélectionnez l'option Signet.
OU
*Appuyez sur les touches CTRL et G.

Il faut maintenant donner un nom représentatif au signet. Afin de ne pas donner un même nom à deux signets, vous avez en dessous la liste des signets dans cette page. Puisque c'est le premier signet la liste est présentement vide.

*Dans la case Nom du signet, écrivez fin.
*Appuyez sur le bouton OK.

L'icone suivant va apparaître pour indiquer qu'il y a un signet à cet endroit.

Pour modifier le signet:

*Sélectionnez l'icone.
*Du menu Format, sélectionnez l'option Propriétés.
OU
*Appuyez sur les touches Alt et Entrée.

Maintenant que le signet est inséré, la prochaine étape consiste à créer un lien sur celui-ci.

*Placez le curseur sur la première ligne de la page Web.
*Faites un bloc avec le mot Web.
*Appuyez sur le bouton Lien hypertexte.
OU
*Du menu Insertion, sélectionnez l'option Lien hypertexte.
OU
*Appuyez sur les touches Ctrl et K.

La fenêtre des liens va s'ouvrir.

*Du volet des liens hypertexte, sélectionnez l'option Emplacement dans ce document.
*De la liste des signets disponibles, sélectionnez le signet fin.
*Appuyez sur le bouton OK.

La prochaine fois que vous cliquerez sur le lien, il se rendra à la fin de la page Web. Vous pouvez mettre plusieurs signets pour vous rendre à plusieurs endroits sur une même page Web; même le début.

Lien au courrier électronique

Il est aussi possible de créer un lien sur une adresse de courrier électronique. Le prochain exercice consiste à créer un lien à votre adresse de courrier électronique. Si vous ne connaissez pas ou n'avez pas d'adresse de courrier électronique, utilisez l'adresse fictive suivante : jean.tremblay@cie.abc.com .

*Écrivez le texte suivant : Vous pouvez me rejoindre à l'adresse suivante : jean.tremblay@cie.abc.com .
*Faites un bloc avec l'adresse de courrier électronique.

*Appuyez sur le bouton Lien hypertexte.
OU
*Du menu Insertion, sélectionnez l'option Lien hypertexte.
OU
*Appuyez sur les touches Ctrl et K.

La fenêtre pour les liens va s'ouvrir.

*Du volet des liens hypertexte, sélectionnez l'option Adresse électronique.
*Dans la case Adresse électronique, entrez l'adresse fictive donnée auparavant (jean.tremblay@cie.abc.com).

FrontPage va automatiquement ajouter le texte "mailto:" devant l'adresse de courriel. Ceci est pour faire la distinction entre un lien à une page Web, un lien Internet et une adresse de courriel. Vous pouvez aussi déterminer à l'avance le sujet du message dans la case Objet.

*Appuyez sur le bouton OK.

Votre page Web a maintenant un lien à une adresse de courrier électronique. Mais attention! Ce lien fonctionnera seulement si le lecteur de la page a entré certaines informations dans le navigateur tel que : son nom, son adresse de courrier électronique, le nom de son serveur de courrier électronique et son numéro de compte. Certains navigateurs vous permettent aussi d'entrer votre mot de passe à l'avance.

La raison est simple, il est impossible d'envoyer sur l'Internet des messages " anonymes ". Donc, ses informations sont nécessaires. C'est aussi pour cette raison que l'on écrit généralement l'adresse de courrier électronique et qu'on crée un lien sur celui-ci. Si le lecteur ne peut pas ou ne veut pas entrer ses coordonnées, il peut toujours écrire l'adresse pour lui envoyer un message un peu plus tard.

Lien à un document

Un navigateur est normalement seulement capable d'ouvrir un fichier de format HTML, une page Web ainsi que les images de format .GIF, .JPG et " PNG . Il y a cependant quelques exceptions. Les navigateurs peuvent s'améliorer avec des " plug-ins "; des logiciels qui ajoutent des fonctionnalités aux navigateurs. Par exemple, Acrobat Reader permet d'ouvrir des fichiers de format .PDF. Le module FLASH de Macromedia permet de voir des animations sur des pages Web. Il y a aussi des modules complémentaires pour voir des mondes virtuels (en 3 dimensions) ou avoir de la musique, de la vidéo etc. Pour tout autre genre de fichier, le navigateur va vous demander s'il doit l'ouvrir avec l'un des logiciels installés sur l'ordinateur ou sauvegarder le document sur une disquette ou un disque dur.

Le prochain exercice consiste à créer un lien sur une présentation PowerPoint. Mais le concept s'applique pour tout genre de document.

*Écrivez le texte suivant : Ceci est un lien à un document.
*Faites un bloc avec le mot document.
*Appuyez sur le bouton Lien hypertexte.
OU
*Du menu Insertion, sélectionnez l'option Lien hypertexte.
OU
*Appuyez sur les touches Ctrl et K.

*Dans la case des liens, écrivez le nom du document. Pour les besoins de l'exercice, écrivez : courrier.ppt .
*Appuyez sur le bouton OK.

Au moment où vous cliquerez sur ce lien à partir d'un navigateur, celui-ci vous demandera s'il doit ouvrir ou sauvegarder le document.

Pour terminer la section sur les liens, il faut mentionner qu'il est possible de créer des liens vers d'autres services de l'Internet. Vous pouvez créer des liens à des serveurs ftp ftp://nomduserveurftp, à des serveur gopher gopher://nomduserveurgopher, à des newgroups news://nomdugrouped'intérêt. Il suffit d'écrire dans la case des liens le nom du service (ftp, gopher, news) suivi de ":// " et l'adresse du serveur ou du newsgroup. Voici quelques exemples.

ftp://ftp.microsoft.com
gopher://
news://comp.win95

Les boutons de navigation

Un bouton de navigation est en fait qu'une image pertinente avec un lien. Que veut-on dire par une image pertinente? C'est une image qui incite le lecteur de la page à appuyer sur celle-ci pour avoir une action: se déplacer vers une autre page, un autre lieu, ouvrir un document, un lien de courrier électronique ou un autre service. Au bas de chacune des pages Web de ce site, il y a des boutons de navigation pour se déplacer d'une page à l'autre. Aussi, la page principale de ce site contient une image qui vous permet d'accéder à plusieurs pages Web. L'option de pouvoir créer des liens sur des parties d'images s'appelle en anglais un "imagemap". Cette option n'est pas disponible dans FrontPage.

Le prochain exercice consiste à insérer un bouton de navigation sur votre page Web. En fait, une image avec un lien.

*Appuyez sur le bouton.
OU
*Du menu Insertion, sélectionnez les options Image et À partir d'un fichier.
*Sélectionnez le lecteur où se trouve l'image recherchée. Pour l'exercice, sélectionnez le lecteur A (disquette 3½).
*Sélectionnez le répertoire (ou dossier) où se trouve le fichier. Pour cet exercice, il n'y en a pas.
*De la liste des images du répertoire, sélectionnez le fichier de l'image. Pour l'exercice, sélectionnez le fichier boulep.gif .
*Appuyez sur le bouton OK.

Vous pouvez ajuster les propriétés de l'image à votre choix.

L'image suivante va apparaître.

Boule pointant vers la gauche. (précédent)

Il reste que mettre un lien sur cette image.

*Cliquez sur l'image.

*Appuyez sur le bouton Lien hypertexte.
OU
*Du menu Insertion, sélectionnez l'option Lien hypertexte.
OU
*Appuyez sur les touches Ctrl et K.

*Dans la case Lien to page, entrez l'adresse suivante: http://www.er.uqam.ca/merlin/xw999998 .
*Appuyez sur le bouton OK.

En plus de se rendre à la page Web, on aurait pu se rendre à un endroit spécifique de la page marqué par les signets.

Lien sur une partie d'une image: imagemap

En plus d'être capable d'avoir des liens sur du texte et des images, il est aussi possible d'avoir des liens sur des parties d'images. Cela s'appelle un "imagemap". Sur la barre d'outils d'images, il y a les outils nécessaires pour "activer" une partie d'une image en lien. Il faut premièrement avoir une image. La prochaine partie de la page consiste à prendre une image parmi ceux offert par Office pour ensuite créer un imagemap sur lequel il y a aura des liens hypertextes.

*Du menu Insertion, sélectionnez les options Image et Image Clipart.

Le volet Microsoft devrait apparaître à la droite de l'écran et vous offrir une recherche sur une image qui pourrait répondre à vos besoins. Vous pouvez aussi filtrer les sections pour rechercher seulement les sections que vous avez besoin. S'il n'y a pas de résultats intéressants, vous pouvez toujours rechercher parmi la bibliothèque multimédia en ligne si vous pouvez vous connecter à l'Internet.

*Dans la case Rechercher le texte, entrez le texte animal.
*Appuyez sur le bouton Rechercher.


*Cliquez sur l'image désirée.
OU
*Appuyez sur le bouton à la droite de l'image.
*Sélectionnez l'option Insérer.

L'image va s'insérer à l'endroit où se trouve le curseur à ce moment.

*Cliquez sur l'image.

La barre d'outils Images va apparaître. Elle offre des options pour gérer les images ainsi que pour créer des liens sur des parties d'images. Il y a trois types de formes que vous pouvez choisir: rectangulaire, circulaire ou polygonale. Les trois types de formes seront utilisés sur l'image.

*De la barre d'outils Images, sélectionnez l'option .

*Encadrez la cage d'animal.

Dès que vous avez relâché le bouton gauche de la souris, la fenêtre des liens hypertexte va apparaître. Comme vous l'avez plus tôt sur cette page, vous pouvez créer un lien sur une page Web, un lien à l'intérieur de la page, un courriel ou un autre service.

*Dans la case Adresse: entrez l'adresse du site Web suivant: http://www.er.uqam.ca/merlin/xw999998 .
*Appuyez sur le bouton OK.

Le prochain exercice consiste à utiliser la forme circulaire.

*De la barre d'outils Images, sélectionnez l'option .

*Placez le pointeur au milieu de la forme que vous voulez encadrer.
*En gardant un doigt sur le bouton gauche de la souris, déterminez le diamètre de la forme que vous avez besoin.

Dès que vous relâchez le bouton de la souris, la fenêtre des liens hypertexte va apparaître.

*Dans la case Adresse, entrez l'adresse de votre choix.
*Appuyez sur le bouton OK.

Il reste la forme polygonale. La prochaine partie consiste à encadrer de plusieurs points la petite fille et son chat. Vous pouvez mettre autant de points que vous voulez. Il suffit de cliquer avec le bouton gauche de la souris pour placer les points où vous voulez. Le denier point pour encadrer l'image doit toucher le premier que vous avez fait. Une autre façon de terminer l'encadrement est de faire un double-clic. Le dernier point va rejoindre le premier pour terminer l'encadrement.

*De la barre d'outils Images, sélectionnez l'option .
*Encadrez l'image avec autant que points que vous juger nécessaire.

Pour terminer l'encadrement, n'oubliez pas de toucher le premier point ou de faire un double-clic.

Dès que l'encadrement est terminé, la fenêtre des liens hypertexte va apparaître.

*Dans la case Adresse, entrez l'adresse de votre choix.
*Appuyez sur le bouton OK.

Vous avez placé les types de formes de liens possibles sur une même image. Selon la situation, vous pouvez maintenant utiliser la forme qui répondra le mieux à vos besoins.

Une petite note au sujet des images de la librairie Office. Ces images ne sont pas dans les formats permis sur le World Wide Web ( GIF, JPEG, PNG ). Donc, au moment d'enregistrer votre page Web, FrontPage va vous demander de convertir les images dans l'un de ces formats.

N'oubliez pas de donner un nom approprié à l'image au lieu de celui fourni par FrontPage.

*Une fois que vous êtes satisfait de toutes les options, appuyez sur le bouton OK.

Les tableaux

Très souvent, les tableaux sont utilisés pour afficher de l'information pour informer ou pour comparer. Mais, dans le format HTML, ils ont aussi une autre fonction: pouvoir aligner des colonnes de texte. En effet, les pages Web n'ont pas de commandes pour les colonnes ou les tabulations. Mais il est possible d'utiliser les cellules d'un tableau pour simuler des colonnes. Il ne faut pas oublier de ne pas mettre un contour pour que l'effet soit complet.

Le prochain exercice consiste à créer un petit tableau avec plusieurs des options disponibles. Pour commencer, il faut créer un tableau de trois colonnes par trois lignes. Voici deux façons de réaliser le tableau initial. Aussi, ce tableau doit être limité à 400 pixels de largeur.

*Appuyez sur le bouton .

*En gardant un doigt sur le bouton gauche de la souris, sélectionnez trois colonnes et trois lignes.
*Une fois sélectionnée, relâchez le bouton gauche de la souris.

Le tableau est créé. Mais il prend toute la largeur de l'écran. Il faut modifier quelques options dans les propriétés du tableau.

*Du menu Tableau, sélectionnez les options Propriétés du tableau et Tableau.

*Sélectionnez les options tel que l'image ci-dessus.
*Appuyez sur le bouton OK.

OU
*Du menu Tableau, sélectionnez les options Insérer et Tableau.

La fenêtre suivante va apparaître.

*Sélectionnez les options tel que l'image ci-dessus.
*Appuyez sur le bouton OK.

Après toutes ces options pour composer le tableau, voici le résultat.

*Du menu Tableau, sélectionnez les options Insérer et Légende.

Une ligne supplémentaire va apparaître au-dessus du tableau dans lequel vous pourrez entrer une description.

Les prochains exercices consisteront à personnaliser le tableau pour mieux répondre aux besoins ainsi que pour vous démontrer ses autres possibilités.

Écrire le texte dans la case d'introduction

*Écrivez le texte suivant dans la case de la légende: Activités de la journée.

Changer la largeur d'une colonne.

À sa conception, FrontPage donne une largeur identique à toutes les colonnes du tableau. Le prochain exercice consiste à changer la largeur de chacune des colonnes du tableau.

*Placez le curseur dans la première cellule du tableau.
*Du menu Tableau, sélectionnez les options Sélectionner et Colonne.
*Du menu Tableau, sélectionnez les options Propriétés du tableau et Cellule.

*Sélectionnez les options tel que l'image ci-dessus.
*Appuyez sur le bouton OK.

La première colonne du tableau aura maintenant une largeur de 200 pixels. Mais vous ne verrez pas l'effet immédiatement à cause des options des autres colonnes. Il faut maintenant répéter cette opération pour la deuxième et troisième colonne du tableau. Cependant, leur largeur des deux autres colonnes sera de 100 pixels et non de 200 comme pour la première colonne. Voici les opérations:

*Placez le curseur dans une cellule de la deuxième colonne du tableau.
*Du menu Tableau, sélectionnez les options Sélectionner et Colonne.
*Du menu Tableau, sélectionnez les options Propriétés du tableau et Cellule.
*De la fenêtre des propriétés des cellules, changez la largeur à 100.
*Assurez-vous que l'unité de mesure est En pixels.
*Appuyez sur le bouton OK.

Et maintenant, pour la troisième colonne du tableau.

*Placez le curseur dans une cellule de la deuxième colonne du tableau.
*Du menu Tableau, sélectionnez les options Sélectionner et Colonne.
*Du menu Tableau, sélectionnez les options Propriétés du tableau et Cellule.
*De la fenêtre des propriétés des cellules, changez la largeur à 100.
*Assurez-vous que l'unité de mesure est En pixels.
*Appuyez sur le bouton OK.

Insérer une rangée dans le tableau

Pour avoir assez d'espace pour écrire tout le texte dans le tableau, il faut ajouter une ligne supplémentaire.

*Placez le pointeur dans n'importe quelle cellule de la première ligne.
*Du menu Tableau, sélectionnez les options Insérer et Lignes ou colonnes.

*Sélectionnez les options tel que l'image ci-dessus.
*Appuyez sur le bouton OK.

La rangée va s'insérer en dessous de la ligne où se trouve présentement le curseur.

Fusionner plusieurs cellules

Contrairement à d'autres éditeurs de pages Web, FrontPage "fusionne" plusieurs cellules ensemble. Cependant, le logiciel vous cache un peu la réalité. En format HTML, il faut supprimer les cellules inutiles pour ensuite "étendre" une cellule par dessus plusieurs lignes ou colonnes. En code HTML, le résultat est le même. Mais il est plus facile de comprendre et d'utiliser "fusionner" des cellules que d'en "étendre" une.

*Sélectionnez toutes les cellules de la première ligne du tableau.

*Du menu Tableau, sélectionnez l'option Fusionner les cellules.

Ceci est intéressant pour écrire des titres ou de longues descriptions. Fusionner peut aussi s'appliquer autant aux colonnes et aux lignes.

Changer la couleur d'une cellule

*Placez le pointeur dans la première cellule du tableau.
*Du menu Tableau, sélectionnez les options Propriétés et Cellule.

*Sous la section Arrière-plan, sélectionnez la couleur et l'option Autres couleurs.

Cette fenêtre va apparaître et vous offrir une palette de couleurs. Mais il possible de choisir parmi une palette de 16 millions de couleurs.

*Appuyez sur le bouton Personnaliser.

Vous pouvez choisir parmi les couleurs de base ou cliquer dans la zone des couleurs. Vous pouvez aussi changer l'intensité en déplaçant le triangle à la droite de la barre de luminosité. Mais l'élément le plus important est la sélection RGB pour rouge, vert et bleu: les trois couleurs de base avec la lumière. Il est possible de combiner les trois couleurs de bases en changeant les valeurs de ceux-ci entre 0 et 255. En tout, il y a plus de 16 millions de combinaisons possibles.

Pour les besoins de la démonstration:

*Entrez la valeur 255 dans la case Rouge.
*Entrez la valeur 102 dans la case Vert.
*Entrez la valeur 102 dans la case Bleu.
*Appuyez sur le bouton OK.

Vous remarquerez que FrontPage a entré une valeur en hexadécimale dans la case Valeur. Celle-ci varie de 0 à F (16 valeurs possibles). Avec deux caractères, il est possible d'avoir 256 combinaisons pour une couleur. Avec 6 caractères, deux pour le rouge, le vert et le bleu, c'est 16 millions de combinaisons possibles.

*Appuyez sur le bouton OK.

*À par de la première ligne fusionnée, sélectionnez la première colonne du tableau.
*Sous la section Arrière-plan, sélectionnez la couleur et l'option Autres couleurs.
*Entrez le texte suivant dans la case Valeur: FFCC33 .
*Appuyez sur le bouton OK.

*Sélectionnez les autres cellules du tableau.
*Sous la section Arrière-plan, sélectionnez la couleur et l'option Autres couleurs.
*Entrez le texte suivant dans la case Valeur: FFFF99 .
*Appuyez sur le bouton OK.

Comme vous venez de l'accomplir, chaque cellule peut avoir une couleur de fond différente. Si vous voulez pratiquer les éléments que vous venez de voir, essayer de répliquer le tableau suivant.

Même tableau à partir de Netscape Communicator.

Certaines cellules du tableau ci-dessus n'apparaissent pas parce ce que le contenu des cellules est vide. Il suffit de mettre un espace dans les cellules vides pour qu'elle apparaisse.

Les propriétés de la page Web

Comme pour le texte, les images, les liens et les autres éléments de la page Web, la page Web a elle aussi ses propres caractéristiques ou propriétés. La partie qui suit consiste à vous démontrer ces propriétés et comment en prendre avantage.

*Du menu Fichier, sélectionnez l'option Propriétés.

*Si cela n'est pas déjà fait, sélectionnez l'onglet Général.

L'écran suivant va apparaître.

La case titre vous permet de donner un titre à votre page Web. Celui-ci va apparaître dans la barre titre du navigateur de pages Web au haut de l'écran.

*Sélectionnez l'onglet Arrière-plan.

Cette fenêtre a déjà été décrite plus tôt sur cette page. Elle vous permet de déterminer le fond de page, ou l'arrière-plan, ainsi que la couleur du texte et des liens.

Cependant, il faut faire attention de ne pas choisir en aucun moment la couleur blanche pour le texte ordinaire. Ceci peut donner une belle page Web. Mais, au moment de l'impression de la page Web, le navigateur n'imprime pas le fond de la page. Et surtout, le texte en blanc ne sort pas sur une feuille blanche. Donc, la page Web que l'utilisateur aurait voulu garder en référence n'est pas imprimable si la couleur du texte est blanche. Il est toujours possible au lecteur de désactiver les couleurs prédéterminées par le concepteur (voir préférences et polices de caractères pour ). Mais ceci rend la tâche du lecteur plus difficile pour rien.

*Sélectionnez l'onglet Marges.

*Sélectionnez l'onglet Personnaliser.

*De la section Variables utilisateur, appuyez sur le bouton Ajouter.

L'une des variables utiliser par les sites de recherche tel que Google, Altavista, MSN et plusieurs autres s'appelle keyword. On ajoute les mots-clés qui décrient le contenu de la page Web. Ces mots doivent être séparés par une virgule sans espaces.

*Appuyez sur le bouton OK.

Cette variable sera ajoutée à la page Web. Une autre variable intéressante pour les sites de recherche s'appelle Description. Vous pouvez ensuite entrer une courte description de votre page jusqu'à 256 caractères. Les outils de recherche vont afficher la description en même temps que le résultat de la recherche.

D'autres variables intéressantes sont Author pour donner le nom du concepteur de la page Web. Il y a aussi Copyright pour donner le nom de la compagnie ainsi que l'année de la mise en place des droits. Généralement, c'est l'année de la création de la page Web. Il y a aussi la variable Classification pour aider les sites de recherche à classifier votre page Web parmi leurs catégories (Internet, ordinateurs, éducation ...). Pour vous donner une idée des catégories des sites de recherche, allez à la page principale de ces sites. Vous verrez leurs catégories et pourrez ensuite décider dans laquelle votre page Web serait mieux située.

Ces commandes supplémentaires pour décrire une page ou pour ajouter des actions s'appellent des META Tags. Vous retrouverez une liste plus complète à la page des codes HTML sous la section Meta Tags ainsi que leurs possibilités.

*Sélectionnez l'onglet Langue.

L'option de langue permet aussi aux outils de recherche de déterminer la langue utilisée dans le document. Les options de codage HTML aide le navigateur à afficher la bonne série de caractères. Cela pourrait bien être en occidental, arabique, asiatique ou autre.

*Sélectionnez l'onglet Groupe de travail.

L'un des avantages de FrontPage est d'être capable de développer un site Web en groupe. Chaque membre peut contribuer à sa façon. Cependant, il faut être capable de coordonner les actions des membres et d'assigner des tâches à chacun. Malheureusement, je n'ai pas eu le temps d'approfondir cette section.

Sauvegarder la page Web

Le résultat tout ce travail est d'être capable de sauvegarder vos pages Web pour ensuite les "publier" sur l'Internet. Cette partie de la page consiste simplement à sauvegarder le résultat de tous les exercices que vous avez accompli jusqu'à présent. Ceci vous permettra ensuite de voir le résultat et de transférer le tout à un répertoire qui sera accessible à tous les lecteurs de pages Web.

*Du menu Fichier, sélectionnez l'option Enregistrer sous.

Après avoir choisi le lecteur et le répertoire dans lequel vous allez sauvegarder votre page Web, il est temps de donner un nom à votre page Web.

*Pour les besoins de l'exercice, entrez dans la case Nom: index.htm.
*Appuyez sur le bouton Enregistrer.

Ouvrir un site Web

*Du menu Fichier, sélectionnez les options Ouvrir et Site Web.
*Sélectionnez le dossier où se retrouve votre site Web.

Aperçu de la page Web.

Voir le résultat de la page Web est important. Ceci est votre chance de voir votre résultat et comment les lecteurs vont interpréter votre page Web. C'est aussi le temps de voir les défauts de la page et de les corriger avant que le grand public la voie.

FrontPage va possiblement vous demander de sauvegarder la page si vous avez apporté des corrections. Vous devez sauvegarder vos modifications avant de pouvoir continuer. Une fois que vous verrez la page, vous pourrez vérifier quelques points.

*Du menu Fichier, sélectionnez l'option Aperçu dans le navigateur.

Sur l'ordinateur sur lequel je travaille, les deux navigateurs les plus populaires sont plus installés. FrontPage demande dans quel logiciel je veux avoir l'aperçu de la page Web ainsi que sa résolution d'écran. Je vous suggère très fortement d'essayer vos pages dans les deux à des résolutions différentes. Vous pourriez avoir des surprises autrement.

+Vérifiez le fonctionnement des liens: le mot "Ceci" à la page principale de l'UQÀM, le mot "Page" à la fin de la page Web et le bouton de navigation à la page de conception de page Web avec FrontPage.
+Vérifiez l'alignement de l'image à la droite de l'écran.
+Vérifiez la présentation du tableau.

Si le résultat n'est pas ce que vous attendiez, revérifiez les instructions de cette page et apportez les corrections si nécessaire.

Publier la page Web

Il reste la dernière étape; celle de publier la page Web pour que le public puisse la voir. Mais auparavant, il faut que vous ayez un compte qui soit disponible au public. Sinon, cela est impossible de transférer votre page Web et les images pour les rendre disponibles à tous.

*Entrez l'adresse de votre site Web.

Si vous n'êtes pas certain de l'adresse, vous pouvez utiliser l'option Parcourir.

*Appuyez sur le bouton OK.

Mon serveur ne supporte par les extensions FrontPage. Donc, il m'est impossible d'aller plus loin. Si vous voulez vraiment utiliser l'option de publication de FrontPage, il faut que vous vous assurer que votre fournisseur d'accès à l'Internet (FAI) supporte les extensions FrontPage. Ceux-ci l'annonce généralement dans leurs promotions.

Vous pouvez toujours le service FTP pour transférer les fichiers et les dossiers de votre site Web à votre répertoire public. Je vous recommande d'utiliser la procédure de transfert de fichiers en utilisant WS-FTP.

Problème

FrontPage a de la difficulté avec les liens à des pages d'adresses relatives. Le problème des liens n'apparaît pas lorsque vous avez un lien à une adresse absolue, qui commence par un http://, mais une adresse d'une autre page Web qui se retrouve pas dans le même dossier ou le même lecteur que sur la page que vous travailler en ce moment. C'est pour cela qu'il est préférable de regrouper tous les documents du site dans un même dossier. Ce dossier peut avoir des sous dossier tel que pour les images ou autres dossiers de votre choix.

Au moment de commencer à travailler sur votre site, sélectionnez du menu Fichier l'option Ouvrir site Web, sélectionnez le dossier dans lequel se retrouve tous vos documents et appuyez sur le bouton Ouvrir. Si vous devez ajouter des documents, pages Web, images ou autres éléments provenant de l'extérieur, il est préférable d'utiliser l'option importer sous le menu Fichier. Cette option a déjà été expliquée au début de ce document.

Avantage

Mais le regroupement des éléments qui composent votre site Web a aussi ces avantages. Il est plus avantageux de gérer le site de cette façon. Voici un petit exemple.

Renommer un fichier

*Du volet Affichage, sélectionner Dossiers.
*Sélectionnez le dossier images.
*Sélectionnez l'image niceblue.gif .

*Appuyez sur le bouton droit de la souris.
*Du menu contextuel, sélectionnez l'option Renommer.
OU
*Cliquez une seconde fois sur le fichier.

Vous pourrez ensuite changer le nom du document.

*Changez le nom à fondbleu.gif .
*Appuyez sur la touche Entrée.

Je vous rappelle que le noms des fichiers ne doivent pas avoir d'espaces, d'accents, de caractères spéciaux tel que _+-; ou des majuscules.

*Appuyez sur le bouton Oui.

FrontPage va prendre quelques instants pour mettre à jour tous les documents. Le logiciel va aussi vous demander d'apporter des changements si vous déplacez ou retirez des documents . Ceci vous rend la gestion du site plus simple.

Vérifier les liens

Une autre option avantageuse de FrontPage est de vous permettre de vérifier tous les liens de votre site et de vous aviser si ces liens ne fonctionnent pas. Il n'y a rien de plus frustrant pour un utilisateur que de se retrouver devant un lien qui ne fonctionne pas.

*Du volet Affichage, sélectionnez l'option Rapports.

*De la liste des rapports, sélectionnez les options Problèmes et Liens hypertexte rompus.

OU

*Du menu Affichage, sélectionnez les options Rapports, Problèmes et Liens hypertexte rompus.

La première fois, FrontPage va vous demander de confirmer la vérification des liens.

*Appuyez sur le bouton Oui.

Les formulaires

Il y a des moments ou les Internautes qui voudraient vous contacter ne peuvent pas le faire par courrier électronique (courriel). Il y a aussi des moments ou vous voulez recevoir de l'information mais sous une forme structuré. Les formulaires sont parfait pour ces situations. Les prochains exercices consistent à créer un formulaire avec plusieurs des éléments que l'on peut y retrouver.

*Du menu Insertion, sélectionnez les options Formulaire et Formulaire.

Un cadre va apparaître avec les bouton pour envoyer le formulaire ou pour vider son contenu et recommencer. Le formulaire est présentement vide. Vous devez agrandir ce cadre pour ajouter tous les champs que vous aurez besoin dans le formulaire.

*Placez le pointeur devant le bouton Envoyer.
*Appuyez sur la touche Entrée.

La formulaire a été agrandi un peu. Vous pouvez commencer à mettre des éléments de votre formulaire et continuer à l'agrandir au besoin.

*Placez le pointeur au début du formulaire.
*Entrez le texte Nom et un espace.

Il faut entrer le premier champ du formulaire. Cela sera une zone de texte qui va conserver le nom de la personne qui envoie le formulaire.

Zone de texte

*Du menu Insertion, sélectionnez les options Formulaire et Zone de texte.

La zone des texte va apparaître à côté du texte nom. FrontPage vous offre plusieurs façons de changer les propriétés de ce champ.

*Faites un double-clic à l'intérieur du champ.
OU
*Sélectionnez le champ.
*Du menu Format, sélectionnez l'option Propriétés.
OU
*Appuyez sur les touches Alt et Entrée.
OU
*Appuyez sur le bouton droit de la souris.
*Du menu contextuel, sélectionnez l'option Propriétés du champ de formulaire.

*Dans la case Nom, entrez le texte Nom.

Vous pouvez aussi entrer du texte que l'usager pourra conserver ou changer selon le besoin dans la case Valeur initiale. Vous devez aussi changer la taille de la zone pour pouvoir entrer un peu plus de texte. Initialement la valeur est à 20 caractères. Mais vous pouvez le changer en tout temps. L'option Champ mot de passe permet de cacher ce que vous écrivez en replaçant le texte par des astérisques (*). Vous pouvez aussi changer l'orientation de l'entrée de texte. Cela est surtout pratique pour des numéros de téléphone.

*Changer la valeur de la case Largeur en caractères à 25.

Il y a encore quelques propriétés que vous pouvez changer.

*Appuyez sur le bouton Style.

*Du bouton Format, sélectionnez l'option Police.

Il vous est possible par exemple de changer la police de caractère ainsi que d'autres options.

*De la case Police, sélectionnez la police de caractère Arial.
*Appuyez sur le bouton OK.

C'est la police de caractère Arial qui sera utilisé pour afficher le contenu de cette zone de texte. Cela va permettre de la distinguer du reste du formulaire.

*Pour revenir aux propriétés du champ, appuyez encore une fois sur le bouton OK.

FrontPage vous offre encore quelques options que vous ne retrouvez pas dans plusieurs autres éditeurs de sites Web.

*Appuyez sur le bouton Valider.

Vous pouvez aussi entrer des critères que l'Internaute doit respecter pour que le formulaire soit accepté. Le contenu doit être seulement du texte ou des chiffres. Le contenu de la zone de texte doit avoir un certain nombre de caractères ou celui-ci doit être entre certaines valeurs (0 à 100 par exemple).

*Appuyez sur le bouton OK.

Il est maintenant le temps d'ajouter une seconde zone de texte au formulaire.

*Entrez le texte Courriel suivi d'un espace.
*Du menu Insertion, sélectionnez les options Formulaire et Zone de texte.

L'adresse de courrier électronique est souvent demandé dans un formulaire. Le Webmestre, gestionnaire du site Web, ou une personne responsable dans l'entreprise pourra ensuite contacter l'Internaute pour lui répondre ou pour avoir plus d'informations.

*Dans la case Nom, entrez Courriel.

Chaque variable du formulaire doit avoir un nom distict.

*Dans la case Largeur en caractères, entrez 30.
*Appuyez sur le bouton OK.
*Appuyez sur la touche Entrée.

Le prochain élément du formulaire sera un groupe d'option. Plusieurs options sont offerts à l'Internaute. Il y peu prendre qu'un choix du groupe. La case d'option, auparavant appelé le bouton radio, sera utilisé en combinaison avec le groupe d'option. Vous pouvez utiliser la case à cocher ou la case d'option seul ou avec un groupe d'option. Pour que cela fonctionne, il faut que les cases d'option ou les cases à cocher soient à l'intérieur de la zone de groupe.

*Entrez le texte Avez-vous déjà créer un formulaire?
*Appuyez sur la touche Entrée.

Zone de groupe

*Du menu Insertion, sélectionnez les options Formulaire et Zone de groupe.

*Placez le pointeur dans la zone de groupe.
*Du menu Insertion, sélectionnez les options Formulaire et Case d'option.

Il faut maintenant changer les propriétés de ce champ.

*Faites un double-clic à l'intérieur du champ.
OU
*Sélectionnez le champ.
*Du menu Format, sélectionnez l'option Propriétés.
OU
*Appuyez sur les touches Alt et Entrée.
OU
*Appuyez sur le bouton droit de la souris.
*Du menu contextuel, sélectionnez l'option Propriétés du champ de formulaire.

*Dans la case Nom du groupe, entrez le texte Formulaire.
*Dans la case Valeur, entrez le texte Jamais.

Le contenu du champ valeur est ce qui vous sera transmit dans le formulaire. Il faut que champ champ du groupe ait une valeur différente.

*Pour l'Ordre de tabulation, sélectionné l'option Sélectionnée.

Ce champ sera la valeur initiale du groupe. L'internaute pourra toujours la changé si désiré.

*Appuyez sur le bouton OK.
*Entrez le texte Jamais et un espace.

Il faut encore entrer deux autres champ dans ce groupe.

*Assurez-vous que le pointeur soit au bout de la zone de groupe.
*Du menu Insertion, sélectionnez les options Formulaire et Case d'option.
*Sélectionnez les propriétés du champ.
*Dans la case Nom du groupe, entrez le texte Formulaire.
*Dans la case Valeur, entrez le texte 1 fois.
*Appuyez sur le bouton OK.
*Entrez le texte une fois et un espace.

*Assurez-vous que le pointeur soit au bout de la zone de groupe.
*Du menu Insertion, sélectionnez les options Formulaire et Case d'option.
*Sélectionnez les propriétés du champ.
*Dans la case Nom du groupe, entrez le texte Formulaire.
*Dans la case Valeur, entrez le texte Plusieurs fois.
*Appuyez sur le bouton OK.
*Entrez le texte plusieurs fois et un espace.

*Placez le pointeur à l'extérieur de la zone de groupe.
*Appuyez sur la touche Entrée.

Liste déroulante

Le prochain élément qui sera introduit dans le formulaire sera une liste déroulante. Il permet à l'Internaute de choisir parmi une liste sans que celle-ci prend beaucoup d'espace sur le formulaire. Ceci est encor eplus apprécié lorsque la liste est longue.

*Entrez le texte Quel est votre niveau de connaissances en informatique?
*Appuyez sur les touches MAJ (Shift) et Entrée.

*Du menu Insertion, sélectionnez les options Formulaire et Zone de liste déroulante.

Il faut maintenant changer les propriétés du champ.

*Faites un double-clic à l'intérieur du champ.
OU
*Sélectionnez le champ.
*Du menu Format, sélectionnez l'option Propriétés.
OU
*Appuyez sur les touches Alt et Entrée.
OU
*Appuyez sur le bouton droit de la souris.
*Du menu contextuel, sélectionnez l'option Propriétés du champ de formulaire.

Le contenu de la liste est présentement vide. Il faut maintenant écrire le texte ainsi que les valeurs qui seront dans la liste déroulante.

*Appuyez sur le bouton Ajouter.

*Dans la case Choix, entrez le texte Débutant.

C'est le texte qui sera inscrit dans la liste. À moins que vous le changez, cela sera aussi la valeur. Il peut arriver que l'on veut une bonne description suivi d'une valeur simple; sans description.

*Assurez-vous que l'option de l'État initial soit Sélectionné.
*Appuyez sur le bouton OK.

Il faut entrer toutes les valeurs requises pour cette liste déroulante.

*Appuyez sur le bouton Ajouter.
*Dans la case Choix, entrez le texte Intermédiaire.
*Appuyez sur le bouton OK.

*Appuyez sur le bouton Ajouter.
*Dans la case Choix, entrez le texte Avancé.
*Appuyez sur le bouton OK.

*Appuyez sur le bouton Ajouter.
*Dans la case Choix, entrez le texte Expert.
*Appuyez sur le bouton OK.

La liste est complétée. Vou pouvez toujours revenir dans la liste et changer les valeurs à votre choix.

*Appuyez sur le bouton OK.
*Appuyez sur la touche Entrée.

Bouton crochet

Le prochain exercice consiste à ajouter des boutons crochets dans le formulaire tel que dans l'exemple ci-dessous. Il faudra auparavant insérer un tableau d'une ligne et de deux colonnes pour simuler des colonnes. Il ne faudra pas non plus oublier de changer les propriétés de chacun des boutons crochets.

Tableau d'une ligne et deux colonnes ayant trois boutons crochet chacun.

*En dessous de la liste déroulante, entrez le texte suivant: Quels sont les thèmes de ce site que vous avez lus?
*Appuyez sur la touche Entrée.

Avant de pouvoir insérer les boutons crochets, il faut avant créer un tableau.

*Du menu Tableau, sélectionnez les options Insérer et Tableau.

*Dans la case Lignes, entrez la valeur 1.
*Dans la case Colonnes, entrez la valeur 2.
*Dans la case Taille de bordure, entrez la valeur 0.
*Activez l'option Spécifier la largeur.
*Entrez la valeur 200 dans la case en dessous.
*Spécifiez l'option En pixels.
*Appuyez sur le bouton OK.

Le tableau est maintenant créé. La prochaine étape consiste à mettre des boutons crochets dans ces deux cellules.

*Placez le pointeur dans la première cellule du tableau.
*Du menu Insertion, sélectionnez les options Formulaire et Case à cocher.
*Faites un double-clic sur la case à cocher.

Il faut changer les propriétés de la case à cocher.

*Dans la case Nom, entrez le texte Word.
*Dans la case Valeur, entrez le texte Oui.
*Assurez-vous que l'option État initial soit Non activée.
*Appuyez sur le bouton OK.

*Placez un espace et écrivez Word.
*Appuyez sur les touches MAJ (Shift) et Entrée.

*Ajoutez des boutons crochets pour les champs Excel et Access.
*Placez le pointeur dans la seconde cellule et ajouter des bouton crochets pour les champs PowerPoint, Internet et Informatique.

Le résultat devrait ressembler à ceci.

Espace de texte

Une autre façon d'avoir de l'information des Internautes est de laisser un espace de texte pour recevoir des commentaires.

*Entrez le texte suivant Avez-vous des commentaires sur ce site?
*Appuyez sur les touches MAJ (Shift) et Entrée.
*Du menu Insertion, sélectionnez les options Formulaire et Espace de texte.

*Faites un double-clic à l'intérieur du champ.
OU
*Sélectionnez le champ.
*Du menu Format, sélectionnez l'option Propriétés.
OU
*Appuyez sur les touches Alt et Entrée.
OU
*Appuyez sur le bouton droit de la souris.
*Du menu contextuel, sélectionnez l'option Propriétés du champ de formulaire.

*Dans la case Nom, entrez le texte Commentaires.
*Dans la case Largeur en caractères, entrez 50.
*Dans la case Nombre de lignes, entrez 6.
*Appuyez sur le bouton OK.

Le formulaire est complété. Vous pouvez le déposer sur votre site Web et commencer à recevoir des commentaires de Internautes.

Créer un cadre

Un cadre, ou "frame" en anglais, est une page Web spéciale qui sépare l'écran en plusieurs parties. Certaines parties peuvent changer tandis que d'autres, comme un menu ou une barre de navigation, restent le même. Les prochains exercices consistent à créer un cadre, changer ces options ainsi que les deux pages Web initiales pour ce cadre.

Du menu Fichier, sélectionnez les options Nouveau/Nouvelles et Page ou Site Web.

Le volet des tâches va apparaitre à la droite de l'écran.

*De la section Créer à partir d'un modèle, sélectionnez l'option Modèles de pages.

*Sélectionnez l'onglet Cadres.

FrontPage offre plusieurs modèles de cadres selon la situation. L'aperçu dans le coin inférieur droit vous donne une idée du cadre.

*De la liste des cadres possibles, sélectionnez Division verticale.
*Appuyez sur le bouton OK.

Le cadre va séparer l'écran en deux parties; celle de gauche et de droite. Contrairement aux pages Web, un cadre ne contient pas de texte ou d'images. Le cadre conserve seulement l'information sur la séparation de l'écran et les pages qui devrait initialement être dans cette page. FrontPage vous offre donc l'option de créer une nouvelle page qui sera inséré dans le cadre ou de choisir une page qui existe déjà. Pour les besoins de cet exercice, deux nouvelles pages seront créées. La première, qui sera dans le cadre de gauche, aura le menu pour naviguer à travers le site. La seconde page sera la page d'Accueil du site. Si vous voulez que votre page d'introduction au site soit la page cadre, vous devrez l'appelez index.html.

*Placez le pointeur dans la case de gauche.
*Appuyez sur le bouton droit de la souris.
*Du menu contextuel, sélectionnez l'option Propriété du cadre.

Il faut premièrement donner un nom au cadre. Par défaut, FrontPage donne aux cadres les noms gauche et droite. Mais cela n'est pas représentatif de son contenu.

*Dans la case Nom, entrez le texte Menu.

Il y a d,autres options qui peuvent être déterminé pour le cadre.

*Laissez la case Page initiale vide.

Il est possible de déterminer quel sera la page qui sera initialement placé dans le cadre. Mais une nouvelle page sera créer dans quelques instants avec le menu de navigation pour le site.

*Changez la largeur du cadre à 170 pixels.

*Appuyez sur le bouton OK.

Le prochain exercice consiste à créer la page ayant le menu de navigation du site.

*De la case de gauche, appuyez sur le bouton Nouvelle Page.

Cette page contiendra le menu de navigation avec des liens vers les sections principales du site. Pour faciliter la tâche, il y aura seulement un peu de texte avec des liens.

*Entrez le texte suivant: MENU.
*Appuyez sur la touche Entrée.
*Entrez le texte suivant: Accueil.
*Appuyez sur les touches MAJ (Shift) et Entrée.
*Entrez le texte suivant: Autre page.
*Appuyez sur la touche MAJ (Shift) et Entrée.
*Entrez le texte suivant: Quitter le cadre.
*Appuyez sur la touche Entrée.

Cela suffira pour l'instant. On reviendra plus tard pour ajouter des liens.

*De la case de droite, appuyez sur le bouton Nouvelle Page.

Cette page contiendra les informations de la page d'accueil du site. Pour cet exercice, elle contiendra qu'un peu de texte et des liens.

*Entrez le texte suivant: Pade d'accueil.
*Appuyez sur la touche Entrée.
*Entrez le texte suivant: Liens vers d'autres pages.
*Appuyez sur la touche Entrée.
*Entrez le texte suivant: Autre page.
*Appuyez sur la touche MAJ (Shift) et Entrée.
*Entrez le texte suivant: Quitter le cadre.
*Appuyez sur la touche Entrée.

*Placez le pointeur dans la case de gauche (menu).

Modifier le cadre

Lien vers un autre cadre.

Retour au menu

Lien vers nouvelle page.

Comment retirer le cadre.

Le cadre reste actif jusqu'à ce qu'il soit désactivé.

Références

http://rescol.nbed.nb.ca/courspageWeb/frontpage2002.htm Couvre très bien la matière



 

Abonnez-vous à l'infolettre

Abonnez-vous à l'infolettre du site pour recevoir le manuel " 150 fonctions Excel expliquées ". Vous recevrez aussi les prochaines infolettres sur les nouveautés du site et des formations détaillées que vous ne trouverez nulle part ailleurs.


Cliquez ici pour vous abonner à l'infolettre





Ce site est hébergé par 1&1.com