Cliquez ici pour voir les produits |
||
Internet: Conception de page Web avec FrontPageAvant de commencer Avant de commencerCeci 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 |
||
Word 2003 |
||
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 |
||
Par courriel Abonnez-vous à l'infolettre LCI |
||
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. IntroductionQue retrouve-t-on sur une page Web?
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.
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. 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. Du
menu Fichier, sélectionnez l'option Enregistrer sous. Si le dossier image n'existe pas et désirez le créer. Du
menu Fichier, sélectionnez les options Nouveau et Dossier. Environnement de FrontPageAvant 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.
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 fichiersAvant 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. 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. 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 ...) 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. 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 texteIl 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. 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. 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 . La liste est maintenant terminée. Elle devrait ressembler à ceci.
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. 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 imagesSans 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 . Pour choisir l'image Attention! De
l'option Regarder dans, sélectionnez le dossier où se trouve
le fichier. Pour cet exercice, c'est le dossier images. L'image suivante va apparaître.
Du bas de l'écran, appuyez sur le bouton . 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 . 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. 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. 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. 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 . 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 horizontalesLes 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. Une ligne horizontale va s'insérer à la longueur de l'écran. Pour
modifier la ligne, faites un double-clic sur la ligne horizontale. Modifier
les options à ceux affichée de l'image ci-dessus. 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 liensL'é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. 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 WebLe 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. 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 . 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. 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. 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. L'icone suivant va apparaître pour indiquer qu'il y a un signet à cet endroit. Pour modifier le signet: Sélectionnez
l'icone. 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. La fenêtre des liens va s'ouvrir. Du
volet des liens hypertexte, sélectionnez l'option Emplacement dans
ce document. 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 électroniqueIl 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 . Appuyez
sur le bouton . La fenêtre pour les liens va s'ouvrir. Du
volet des liens hypertexte, sélectionnez l'option Adresse électronique. 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 documentUn 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. Dans
la case des liens, écrivez le nom du document. Pour les besoins de l'exercice,
écrivez : courrier.ppt . 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 Les boutons de navigationUn 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. Vous pouvez ajuster les propriétés de l'image à votre choix. L'image suivante va apparaître.
Il reste que mettre un lien sur cette image. Cliquez sur l'image. Appuyez
sur le bouton . Dans
la case Lien to page, entrez l'adresse suivante: http://www.er.uqam.ca/merlin/xw999998 . 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: imagemapEn 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.
Cliquez
sur l'image désirée. 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 . 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. 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. 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 . 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. 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 tableauxTrè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. 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. OU La fenêtre suivante va apparaître. Sélectionnez
les options tel que l'image ci-dessus. 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. Sélectionnez
les options tel que l'image ci-dessus. 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. Et maintenant, pour la troisième colonne du tableau. Placez
le curseur dans une cellule de la deuxième colonne du tableau. 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.
Sélectionnez
les options tel que l'image ci-dessus. La rangée va s'insérer en dessous de la ligne où se trouve présentement le curseur. Fusionner plusieurs cellulesContrairement à 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. 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. 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. Sélectionnez
les autres cellules du tableau. 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 WebComme 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 WebLe 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. Ouvrir un site WebDu
menu Fichier, sélectionnez les options Ouvrir et 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. 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 WebIl 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 fichierDu volet Affichage, sélectionner Dossiers. Appuyez
sur le bouton droit de la souris. Vous pourrez ensuite changer le nom du document. Changez
le nom à fondbleu.gif . 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 liensUne 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 formulairesIl 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. 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. 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 texteDu 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. 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. 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. 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. 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? Zone de groupeDu menu Insertion, sélectionnez les options Formulaire et Zone de groupe. Placez
le pointeur dans la zone de groupe. Il faut maintenant changer les propriétés de ce champ. Faites
un double-clic à l'intérieur du champ. Dans
la case Nom du groupe, entrez le texte Formulaire. 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. Il faut encore entrer deux autres champ dans ce groupe. Assurez-vous
que le pointeur soit au bout de la zone de groupe. Assurez-vous
que le pointeur soit au bout de la zone de groupe. Placez
le pointeur à l'extérieur de la zone de groupe. Liste déroulanteLe 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? 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. 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é. Il faut entrer toutes les valeurs requises pour cette liste déroulante. Appuyez
sur le bouton Ajouter. Appuyez
sur le bouton Ajouter. Appuyez
sur le bouton Ajouter. La liste est complétée. Vou pouvez toujours revenir dans la liste et changer les valeurs à votre choix. Appuyez
sur le bouton OK. Bouton crochetLe 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. En
dessous de la liste déroulante, entrez le texte suivant: Quels sont
les thèmes de ce site que vous avez lus? 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. 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. Il faut changer les propriétés de la case à cocher. Dans
la case Nom, entrez le texte Word. Placez
un espace et écrivez Word. Ajoutez
des boutons crochets pour les champs Excel et Access. Le résultat devrait ressembler à ceci. Espace de texteUne 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? Faites
un double-clic à l'intérieur du champ. Dans
la case Nom, entrez le texte Commentaires. Le formulaire est complété. Vous pouvez le déposer sur votre site Web et commencer à recevoir des commentaires de Internautes. Créer un cadreUn 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. 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. 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. 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. 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érenceshttp://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. |