UN SITE WEB AVEC FRONT AGEactualites.stsernin.free.fr/frontpage/telechargement/... · 2008. 10....

U.P.S. TOULOUSE C.F.A.T.I.C.

Téléphone 05 61 55 67 98

Centre de Formation aux Applications des Technologies de l’information et de la Communication Courrier électronique : [email protected]

Serveur Internet pédagogique du C.F.A.T.I.C. : http://toutatis.ups-tlse.fr Serveur de téléchargement du C.F.A.T.I.C. : ftp://toutatis.ups-tlse.fr

Télécopie & Répondeur

05 61 55 82 01

CRÉER ET GÉRER

UN SITE WEB

AVEC FRONTPAGE

Créer & gérer un site Web avec Frontpage Exercices C.F.A.T.I.C.

/2 U.P.S. Chabert - février 2000

A l'aide de Microsoft FrontPage, vous pouvez facilement créer et gérer vos sites Web, leur donner un style professionnel, tout en utilisant le contenu (textes, images…) que vous avez déjà réalisé dans d’autres applications, et pour d'autres utilisations (journaux, brochures, plaquettes commerciales …). Grâce à ses fonctionnalités puissantes et très simples d'emploi, créer votre site Internet ou intranet deviendra un jeu d'enfant. Comme il convient malgré tout de s'initier , ces leçons vous guideront pas à pas, de la création de votre premier site et de ses premières pages jusqu'à sa publication sur le World Wide Web. Découvrez dès maintenant la leçon 1 : Construire un nouveau site Web. Vous apprendrez à utiliser l'Explorateur FrontPage pour créer un site de 4 pages, au design professionnel, dotées de barres de navigation fonctionnelles. A la fin de cette leçon, vous saurez également ajouter du texte, des images, des listes formatées et des liens hypertexte à l'aide de l'Editeur FrontPage. Passez ensuite à la leçon 2 : Mettre en page dans l'Editeur FrontPage. Vous apprendrez à insérer des fichiers dans vos pages, à récupérer les commentaires des visiteurs de votre site, à créer des zones réactives sur les images, à ajouter une table, une liste et du texte circulant (marquee), à l'aide de l'Éditeur FrontPage. Puis vous terminerez avec la leçon 3 : Publier votre site Web FrontPage. De retour dans l'Explorateur FrontPage, vous pourrez tester vos hyperliens, vérifier l'orthographe, ainsi que trouver et remplacer du texte sur vos pages. Vous serez alors prêt à publier votre site FrontPage sur le World Wide Web.

1 Leçon 1

1.1 Créer un nouveau site Vous allez créer un nouveau site Web à l'aide de Microsoft FrontPage. Ce site vous servira tout au long des leçons. Vous y créerez de nouvelles pages au fur et à mesure.

Pour que vous puissiez suivre ces leçons, nous supposons que vous disposez de tous les droits nécessaires pour créer un site Web sur votre serveur. Si tel n'était pas le cas, demandez à votre administrateur réseau les autorisations nécessaires.

1 - Lancez Microsoft FrontPage, depuis le menu Démarrer, puis Programme.

C.F.A.T.I.C.. Exercices Créer & gérer un site Web avec Frontpage

Chabert - février 2000 U.P.S. /3

2 - Créer un nouveau site Web.

"Fichier" --> "Nouveau" ---> "Site Web..."

3 - La boîte de dialogue Nouveau Site Web FrontPage s'affiche.



4 - Dans la zone de "type de site Web à créer", sélectionnez l'option Site Web vide.

5 - Dans la zone Option : Choisissez l'emplacement du nouveau site Web, entrez le nom http://nom_ordinateur/votre_nom. "nom_ordinateur" est le nom de la machine mise à votre disposition (automatique); votre_nom est votre nom !

Validez par OK. FrontPage crée les répertoires qui contiendront vos pages et images, puis passe en affichage "Page"

6 - Passez en affichage "Navigation" .

L'affichage Navigation consiste en un écran divisé en 2 parties : celle de droite présente l'organisation de votre site, celle de gauche contient une présentation de dossiers et de fichiers, à la manière de l'Explorateur Windows.



�

L'explorateur FrontPage est l'un des composants principaux de Microsoft FrontPage. Vous l'utilisez pour créer de nouveaux sites, puis plus tard pour les modifier, en assurer la maintenance, les administrer, et publier les sites Web opérationnels.

Les 6 boutons sur la barre "Affichage" vous proposent différents modes de visualisation de l'information dans votre site Web FrontPage. Vous pouvez y choisir la manière dont vous voulez voir le contenu de votre site tout au long du projet de conception, depuis les premières étapes jusqu'au moment où il est prêt à être publié sur le World Wide Web.

Dans la suite de la leçon, nous allons créer les premières pages.

1.2 Créer les premières pages Vous êtes en mode navigation. Votre site Web ne contient une page, elle est nommée "Page d'accueil" (c'est le fichiers "index.htm ou default.htm). Elle sera la porte d'entrée de votre site Web.

Si vous souhaitez que les internautes puissent visiter votre site Web, vous devez impérativement appeler la page d'accueil "index.htm" ou "default.htm" selon les choix d'installation.

1 - Cliquez le bouton Nouvelle page dans la barre d'outils FrontPage. Par défaut, comme votre site Web ne contient aucune page, elle est nommée Page d'accueil. Vous venez de créer la page qui sera la porte d'entrée de votre site Web.

2 - Assurez-vous que la page d'accueil est bien sélectionnée, et ajoutez trois nouvelles pages en cliquant le bouton Nouvelle page.

Se créent automatiquement des barres de navigation pour relier vos pages entre elles.

Vous disposez maintenant de trois nouvelles pages, qui portent le nom Nouvelle page 1, 2 et 3.



Remarquez la structure hiérarchique de vos 4 pages. L'affichage Navigation présente les pages reliées entre elles par des lignes, comme dans un organigramme hiérarchique. C'est la structure hypertexte que FrontPage utilise pour générer les barres de navigation sur vos pages.

Si vous ne voyez pas ces lignes et ces pages dans la fenêtre de droite, cliquez sur le + de .

Avant de commencer à travailler sur ces pages, donnons leur un titre significatif.

1.2.1 Donner un titre aux pages : 1 - La page d'accueil étant toujours sélectionnée, appuyez sur la touche Tabulation de votre clavier. FrontPage met en surbrillance la page à gauche et en dessous de la page d'accueil et active son titre pour l'édition. 2 - Tapez "Centres d'intérêt" et validez par la touche Entrée. 3 - Appuyez de nouveau sur la touche Tabulation, et modifiez le titre de la 2ème page en "Album Photo". Répétez l'opération pour la 3ème page, que vous nommerez "Favoris". Votre écran correspondra alors à celui-ci :

Astuce : une autre manière d'ajouter une page en affichage Navigation, est de cliquer avec le bouton droit sur une page, et de choisir la commande Nouvelle page dans le menu contextuel. Cette commande créera une page en dessous de la page cliquée. Toute modification que vous effectuez sur la structure de votre site FrontPage en affichage Navigation ne sera appliquée que lorsque vous aurez effectué certaines actions, telles que changer d'affichage, basculer vers une autre application Windows ou ouvrir une page dans l'Éditeur FrontPage. Donc, si vous vous êtes trompé ou si vous avez changé d'idée, vous pouvez utiliser le bouton Annuler

sur la barre d'outils, pour annuler votre dernière action.

1.3 Appliquer un Thème FrontPage Avec Microsoft FrontPage, vous pouvez facilement créer des sites dynamiques et dont la charte graphique est cohérente sur l’ensemble des pages, en appliquant l'un des nombreux thèmes prédéfinis. Avant de l'appliquer vous pourrez le prévisualiser dans l'affichage Thèmes de FrontPage.



1 - "Format" --> "Thèmes..."

Sélectionnez différents thèmes dans la liste déroulante. La zone "Aperçu du thème" vous permet de visualiser les éléments graphiques, tels qu'ils apparaîtront sur vos pages Web, avant de l'appliquer. Avant d'appliquer le thème, vous pouvez sélectionner trois options qui modifieront l'apparence de ses composants :

• Couleurs vives appliquera des couleurs plus lumineuses au texte et aux images,

• Graphismes animés animera certains composants du thème,

• Image d'arrière-plan appliquera une image de fond aux pages de votre site actuel.

Pour cette leçon, nous choisirons Couleurs vives, Graphismes animés et Image d'arrière-plan. Dans la liste des Thèmes, sélectionnez International (ou un autre, cela n'a pas d'importance) et cliquez le bouton OK .

Le thème sélectionné est appliqué sur les pages de votre site Web courant, dès que vous avez répondu Oui au message vous signalant la modification de la mise en forme de vos pages. Dans la suite de la leçon, nous verrons comment le thème sélectionné donne à vos pages une apparence attractive et cohérente.

1.4 Définir les bordures partagées Avec Microsoft FrontPage, vous pouvez facilement des lien hypertextes entre les pages du site Web. Pour cela, il faut créer des bordures partagées entre toutes les pages et placer dans ces bordures des boutons de navigation qui se retrouveront automatiquement dans toutes les pages (sauf autre choix).

ASSUREZ-VOUS QU'AUCUNE PAGE N'EST SÉLECTIONNÉE.



1 - "Format" --> "Bordures partagées..."

Sélectionnez : Pour "TOUTES LES PAGES" Une bordure en haut, avec boutons de navigation, Une bordure à gauche, avec boutons de navigation.

Pour information, ce site utilise aussi une bordure partagées en bas pour la signature de chaque pages.

1.5 Ouvrir les pages dans l'Éditeur FrontPage Maintenant que la structure de votre site est faite, nous allons ajouter du contenu sur chacune des pages. Si la création et la gestion des pages sont plus pratiques dans l'Explorateur FrontPage, la mise en page et l'édition sont faites dans l'Éditeur FrontPage. Il permet de créer, éditer et afficher les pages, grâce à une interface WYSIWYG (What You See Is What You Get - ce que vous voyez est ce que vous obtenez), similaire à des programmes tels que traitements de texte, de P.A.O., etc. Tous les formatages de texte, de styles et de pages sont basés sur les standards HTML (HyperText Markup Language, le langage de description de pages du Web).

1 - Dans l'Explorateur FrontPage, cliquez sur le bouton Navigation de la barre affichage.

2 - Double-cliquez la page d'accueil dans la fenêtre de Navigation ou sélectionnez la page, et choisissez la commande Ouvrir du menu Édition de l'Explorateur FrontPage.

La page d'accueil s'ouvre dans l'Éditeur FrontPage.



Vous remarquerez que les éléments du Thème choisi dans la section précédente de la leçon ont été appliqués. Votre page d'accueil dispose d'une texture à l'arrière plan, d'une bannière avec le titre de la page, et d'une barre de navigation pointant vers les autres pages de votre site.

Pour ajouter du texte, commencez à taper comme vous le feriez dans un traitement de textes. MAIS ATTENTION ! Ne tapez pas dans la bordure du haut ou dans la bordure de gauche, sinon votre texte va se retrouver dans toutes les pages. Tapez dans la grande partie libre.

1 - Tapez "Bienvenue sur mon site Web !", puis appuyez sur Entrée. Le fait d'appuyer sur la touche Entrée crée un nouveau paragraphe sur la page.

2 - Sur une nouvelle ligne, tapez "N'oubliez pas de visiter les autres pages de mon site" et appuyez sur Entrée. Vous pourrez bien sûr remplacer ce texte par celui de votre choix, accompagné d'une description du contenu de votre site. Votre page devrait maintenant ressembler à ceci :



Dans le menu Fichier, cliquez sur Enregistrer sous (nom que vous voulez). Vous avez la possibilité d'enregistrer votre page sur votre site Web FrontPage, sur le World Wide Web, sur votre disque, ou comme modèle. Vous pouvez également en changer le titre et l'URL (Uniform Resource Locator). L'URL est un nom unique que le navigateur Web utilisera pour trouver et afficher la page. Cliquez sur OK .

1.6 Éditer la page Centres d'intérêt Cette seconde page de votre site contiendra une liste à puces de vos centres d'intérêt. Vous pourrez bien sûr la personnaliser plus tard.

1 - Dans le menu Fichier de l'Éditeur FrontPage, choisissez Ouvrir . La boîte de dialogue Ouvrir s'affiche. Elle vous permet d'ouvrir des pages depuis votre site Web FrontPage actuel, votre disque dur, sur un autre serveur Web, ou directement sur le World Wide Web. Dans la liste, sélectionnez la page Centres d'intérêt et validez par OK . Lorsque la page est affichée, vous remarquerez que les éléments de mise en page du Thème ont bien été appliqués.

2 - Entrez le texte suivant : "Voici quelques-uns de mes centres d'intérêt". Cliquez sur le bouton Centrer

sur la barre d'outils. La phrase que vous venez de saisir est centrée. Lorsque vous appliquez un formatage de texte, tel que le centrage, FrontPage ajoute les tags (marqueurs) HTML correspondants dans la page.

3 - Dans le menu Insertion, choisissez Ligne horizontale. Une ligne de séparation est insérée sous votre texte.

4 - Annulez le centrage en cliquant de nouveau sur . En HTML, il n'y a pas encore de justifié.

5 - Cliquez sur le bouton Liste à puces de la barre d'outils. FrontPage commence une liste et affiche la première puce. Du fait que vous avez choisi un thème pour votre site Web, les puces habituellement utilisées sont remplacées par des images.



Entrez le texte suivant : "Intérêt 1 : description de mon activité favorite" et appuyez sur Entrée, afin de terminer l'élément de liste et de créer la prochaine puce.

6 - Sur la ligne suivante, entrez "Intérêt 2 : ", puis appuyez sur Entrée. Sur la 3ème ligne, entrez "Intérêt 3 : ", puis appuyez sur Entrée deux fois, ce qui permet de terminer la liste.

7 - Vous pouvez copier et coller du texte comme dans n'importe quel traitement de textes. Pour compléter le texte des 2ème et 3ème puce, sélectionnez "description de mon activité favorite", dans le menu Édition , choisissez Copier. Placez ensuite le curseur derrière "Intérêt 2 : ", et dans le menu Édition , choisissez Coller. Répétez l'opération pour la 3ème puce.

Astuce : vous pouvez également utiliser les combinaisons de touche CTRL + C pour copier et CTRL + V pour coller.

8 - Enregistrez votre page, avant de continuer, en appuyant sur le bouton Enregistrer sur la barre d'outils.

Votre page devrait maintenant ressembler à ceci :

�

1.7 Éditer la page Album Photo Dans cette troisième page, nous allons insérer 2 images. Les images et illustrations apportent décoration et personnalisation à vos pages Web.

1 - Dans le menu Fichier de l'Éditeur FrontPage, choisissez Ouvrir . Dans la liste, sélectionnez la page Album Photo et validez par OK . Lorsque la page est affichée, vous remarquerez que les éléments de mise en page du Thème ont bien été appliqués.

2 - Entrez le texte suivant : "Voici 2 superbes photos extraites de la bibliothèque d'images FrontPage".

Cliquez sur le bouton Centrer sur la barre d'outils. La phrase que vous venez de saisir est centrée.

3 - Dans le menu Insertion, choisissez Ligne horizontale et appuyez sur Entrée.



4 - Pour importer les images sur la page, dans le menu Insertion, choisissez Image… . La boîte de dialogue "Image" qui s'affiche vous permet de choisir l'emplacement d'où elles seront importées : votre site Web FrontPage actuel, votre disque dur, un autre serveur Web, depuis un scanneur ou la bibliothèque Microsoft Clip Gallery.

5 - Cliquez sur le bouton Fichier , qui vous permet de parcourir votre disque.

6 - Dans la boîte de dialogue "Sélectionner le fichier", déplacez-vous jusqu'au dossier où est installé FrontPage, par défaut "C:\Program Files\Microsoft FrontPage", et ouvrez le dossier "\tutorial". Sélectionnez-y l'image sunset.gif et cliquez OK . La première image est insérée. Appuyez sur Entrée pour créer une nouvelle ligne et répétez l'opération pour insérer l'image city.gif , situez dans le même dossier. Si elle n'y sont pas, téléchargez les deux fichiers avec les liens suivants, enregistrez les sur votre disque dur (en faisant attention où vous les placez) et recommencez le point 6 de cette page.

7 - Enregistrez votre page, avant de continuer, en appuyant sur le bouton Enregistrer sur la barre d'outils. Dans la boîte de dialogue "Enregistrer les fichiers incorporés", cliquez sur OK , pour enregistrer les images que vous avez insérées.

Votre page devrait maintenant ressembler à ceci :

�

1.8 Éditer la page Favoris Dans cette quatrième page, nous allons insérer une courte liste de liens hypertexte (ou hyperliens) vers d'autres sites du World Wide Web.

1 - Dans la barre d'outils FrontPage, choisissez le bouton Ouvrir . Dans la liste, sélectionnez la page Favoris et validez par OK . Lorsque la page est affichée, vous remarquerez que les éléments de mise en page du Thème ont bien été appliqués.



2 - Entrez le texte suivant : "Voici une liste de mes sites favoris sur le World Wide Web !". Cliquez sur le

bouton Centrer sur la barre d'outils. La phrase que vous venez de saisir est centrée.

3 - Dans le menu Insertion, choisissez Ligne horizontale et appuyez sur Entrée.

Pour enlever le Centré, Cliquez sur .

Nous allons maintenant insérer des hyperliens. Ce sont des pointeurs à partir d'un texte ou d'une image vers d'autres pages ou d'autres types de fichiers sur le World Wide Web. Les hyperliens sont le principal moyen de navigation entre les pages des sites Web. Il est possible de les créer de 2 manières : depuis un texte descriptif ou automatiquement.

��(QWUH]�OH�WH[WH�VXLYDQW��$FDGpPLH�GH�7RXORXVH��HW�DSSX\H]�VXU�(QWUpH��

5 - Sélectionnez avec votre souris les mots que vous venez de saisir, et dans le menu Insertion, choisissez Lien hypertexte.

La boîte "Créer un lien hypertexte" s'affiche. Elle vous permet de définir la cible du lien, qui peut être une page ou un fichier de votre site Web FrontPage actuel, sur votre disque dur, sur un autre serveur Web, ou directement sur le World Wide Web. Vous pouvez également créer directement un lien vers une messagerie.

Dans le champ URL , tapez http://www.ac-toulouse.fr et cliquez sur OK .

"http://" correspond à HyperText Transfer Protocol, le protocole Internet qui permet aux navigateurs Web de récupérer l'information sur les serveurs Web. www.eu.microsoft.com/france/ est l'URL du site Microsoft France, c'est-à-dire l'adresse unique du site sur le Web.

7 - Cliquez n'importe où dans votre page, pour désélectionner le texte. Vous remarquerez qu'il a changé de couleur et qu'il est maintenant souligné, pour indiquer que c'est un lien hypertexte. Lorsque la page sera affichée dans un navigateur Web, le fait de cliquer sur le lien conduira vers la page d'accueil du site Microsoft France. L'apparence du texte est tirée également du thème que vous avez appliqué précédemment dans cette leçon.

1.8.1 Créons maintenant un hyperlien automatique : 1 - Tapez directement sur la page http://www.yahoo.fr , par exemple, et appuyez sur Entrée. "Yahoo!" est l’un des moteurs de recherche de l'Internet, pour retrouver des informations en générant des requêtes à partir de mots-clés. Dès que vous avez validé par Entrée, le formatage du texte a changé, pour indiquer que FrontPage, tout comme le font les applications de la suite Office, avait reconnu un hyperlien. Comme une URL n'est pas forcément descriptive en soi, il est souvent préférable de la modifier pour le nom du site auquel elle se rapporte. Vous pouvez le faire directement, en remplaçant le texte, sans supprimer l'hyperlien. 2 - Avec votre souris, mettez en surbrillance l'URL que vous venez de saisir, et tapez le mot Yahoo!, pour remplacer le texte. L'hyperlien pointe toujours sur la même URL, mais son "étiquette" est différente.

1.8.2 Créons maintenant un lien hypertexte à l'aide de votre navigateur Web : Cette méthode est des plus pratiques, puisque vous visitez effectivement la page vers laquelle vous désirez pointer. Remarque : si vous ne disposez pas d'accès Internet sur l'ordinateur d'où vous suivez ce didacticiel, passez directement à la section suivante. 1 - Positionnez votre curseur sur la ligne suivante, tapez "Microsoft FrontPage" et appuyez sur Entrée. Sélectionnez ensuite ce texte. 2 - Dans le menu Insertion, choisissez Lien hypertexte. La boîte "Créer un lien hypertexte" s'affiche.



3 - Cliquez sur le bouton Navigateur . FrontPage lance alors votre navigateur Web. Lorsque vous visiterez la page vers laquelle doit pointer votre hyperlien, vous basculerez vers FrontPage, et l'adresse de la page cible s'inscrira dans le champ. 4 - Dans la zone adresse du navigateur, tapez : http://toutatis.ups-tlse.fr/flash et appuyez sur Entrée. Le navigateur affiche la page d'accueil Microsoft FrontPage en Français, où vous pouvez trouver toutes les informations utiles sur ce produit. 5 - Sur votre clavier, appuyez simultanément sur ALT+TAB , ou cliquez sur l'icône de l'Éditeur FrontPage dans la barre des tâches, pour revenir à la boîte de dialogue "Créer un lien hypertexte". L'URL de la page d'accueil Microsoft FrontPage a été entrée dans le champ URL. Cliquez OK . Cliquez n'importe où dans votre page, pour désélectionner le texte. 6 - Enregistrez votre page, en appuyant sur le bouton Enregistrer sur la barre d'outils. Votre page devrait maintenant ressembler à ceci :

1.9 Afficher votre site Web Maintenant que votre site est terminé, vous pouvez l'afficher dans votre navigateur, et ainsi en voir l'apparence et la mise en page. Vous pourrez également naviguer entre les pages et tester les liens hypertexte que vous avez créés.

1 - Dans l'Éditeur FrontPage, cliquez sur le menu Fenêtre. La liste des pages créées s'affiche, pour autant que vous ne les ayez pas fermées. Sélectionnez la page d'accueil pour la passer au premier plan. Si vous l'aviez fermée, ouvrez-la.

2 - Dans le menu Fichier, choisissez Aperçu dans le navigateur, afin de prévisualiser la page courante dans votre navigateur. Vous verrez ainsi exactement comment s'affiche la page, avant de publier votre site Web FrontPage. Il faut qu'au moins un navigateur soit installé sur votre ordinateur.

3 - Dans la boîte de dialogue qui s'affiche, sélectionnez le navigateur que vous souhaitez utiliser, et cliquez Aperçu.



La page d'accueil est affichée dans le navigateur, vous pouvez cliquer sur la barre de navigation pour afficher les autres pages de votre site.

Astuce : Il existe un moyen plus rapide d'afficher les pages en cours de création. Si vous disposez de Microsoft Internet Explorer sur votre système, vous pouvez immédiatement afficher les pages de votre site Web FrontPage, en sélectionnant l'onglet Aperçu dans l'Éditeur FrontPage.

FERMEZ VOTRE SITE WEB ET FRONTPAGE POUR PASSER À LA LEÇON 2

2 Leçon 2

2.1 Ouvrir un Site Web FrontPage Vous utiliserez le site Web FrontPage que vous avez créé dans la leçon 1, pour la suite des leçons. Avant de pouvoir ajouter la page "Pratique" à votre site Web personnel, vous devez tout d'abord ouvrir ce dernier dans l'Explorateur FrontPage.

Note : Si votre site Web personnel est déjà ouvert, passez les étapes suivantes et allez directement à la leçon 2.2.



2.1.1 Pour ouvrir un site Web FrontPage 1 - Cliquez sur le bouton "Démarrer" de Windows, pointez sur "Programmes", puis cliquez sur "Microsoft FrontPage". 2 - Quand FrontPage s'ouvre, sélectionnez "Ouvrir un site Web ...".

3 - A partir de la liste des sites Web FrontPage, choisissez Votre site et cliquez "OK". Note : Note : Suivant le type de serveur Web et le système d'exploitation que vous utilisez, l'Explorateur FrontPage peut afficher la boîte de dialogue "Nom et mot de passe requis". Si elle n'apparaît pas, passez les étapes ci-dessous et continuez à la prochaine section. 4 - Si vous êtes l'administrateur de ce site Web FrontPage, entrez votre nom d'administrateur dans le champ "Nom". Si vous êtes l'auteur de ce site Web FrontPage, entrez votre nom. Pour en savoir plus sur les autorisations pour les sites Web FrontPage, reportez-vous à l'aide en ligne. Dans l'index, entrez le texte "administrateurs, autorisation". 5 - Dans le champ "Mot de passe", tapez votre mot de passe, puis cliquez "OK". Le site Web FrontPage est affiché dans l'Explorateur FrontPage.

2.2 Ajouter une page à un site Web FrontPage Votre site Web personnel se compose d'une page d'accueil et de trois pages liées. Vous avez appris comment ajouter ces pages à votre site, en utilisant l'affichage "Navigation" dans l'Explorateur FrontPage.

Maintenant, vous allez ajouter une nouvelle page, nommée "Pratique", en utilisant l'Éditeur FrontPage. Cette page sera une page de mise en pratique, sur laquelle vous pourrez vous exercer librement pendant les exercices de cette leçon. Quand la page sera créée, vous l'enregistrerez sur votre site Web personnel.

2.2.1 Pour ajouter une nouvelle page

1 - Aller dans l'Éditeur FrontPage .

2- Cliquer sur le bouton pour créer une nouvelle page qui s'appellera "Nouvelle page ?". C'est une page blanche qui contient des éléments du thème commun et les bordures partagées. Le thème que vous avez appliqué à votre site Web personnel dans la leçon 1 est automatiquement appliqué aux nouvelles pages que vous créez dans l'Éditeur FrontPage, de même que le contenu des bordures partagées.

3 - Dans le menu "Fichier" de l'Éditeur FrontPage, choisissez "Enregistrer sous". La boîte de dialogue "Enregistrer sous" s'ouvre.

4 - Dans le champ "Titre de la page :" cliquez sur le bouton "modifier" et tapez "Pratique".

4 - Dans le champ "Nom de fichier :", changez le nom de fichier en "tutorial.htm".

5 - Cliquez sur "OK" pour enregistrer la page sur votre site Web FrontPage.

Note : Bien qu'elle soit enregistrée dans votre site Web FrontPage, vous n'avez pas relié cette page aux autres pages dans la structure du site Web. La page Pratique sera utilisée comme une zone de travail provisoire pour cette leçon. Elle pourra être effacée quand vous aurez terminé avec succès le cours FrontPage.

Comme cette page "Pratique" n'exige pas de navigation vers les autres pages du site Web, vous cacherez les bordures partagées avant de continuer avec les exercices de cette leçon.



2.2.2 Pour cacher les bordures partagées et les Barres de navigation

1 - Dans le menu "Format" de FrontPage, choisissez "Bordures partagées". La boîte de dialogue "Bordures partagées" est affichée. Dans cette boîte de dialogue vous pouvez désactiver sur cette page les paramètres de bordures par défaut pour le site Web en cours.

2 - Sélectionnez "Page en cours".

3 - Décochez les cases "En Haut" et "A Gauche" afin que les bordures ne soient plus sélectionnées, puis cliquez sur "OK".

Les Bordures de page et les Barres de navigation sont maintenant cachées et seule l'image d'arrière-plan du thème reste visible.

2.3 Insérer des fichiers Dans la leçon 1, vous avez ajouté du texte à vos pages en le saisissant directement sur la page dans l'Éditeur FrontPage. Il y aura pourtant sûrement des cas, où il sera plus facile de transférer dans vos pages Web le contenu d'autres documents.

Avec l'Éditeur FrontPage, vous pouvez insérer dans vos pages des fichiers texte dans les formats suivants :

• Texte ASCII (TXT),

• Rich Text Format (RTF),

• Hypertext Markup Language (HTM ou HTML),

• Traitement de texte (y compris Microsoft Word),

• Feuille de calcul (y compris Microsoft Excel).

Le fichier que vous allez insérer dans cette leçon est un fichier texte standard.

2.3.1 Pour insérer un fichier texte dans la page

La page "Pratique" étant encore ouverte dans l'Éditeur FrontPage , assurez-vous que le point d'insertion est en haut à gauche de la page. 1 - Dans le menu "Insertion" de l'Éditeur FrontPage, choisissez l'option "Fichier". La boîte de dialogue "Sélectionner un fichier" est affichée. Le fichier que vous voulez insérer se nomme "Tutorial ". 2 - Sélectionnez dans la liste déroulante "Type" l'option "Fichiers texte (.txt)". 3 - Naviguez ensuite jusqu'au dossier C:\Program Files\Microsoft FrontPage\Tutorial\ 4 - Sélectionnez le fichier "Tutorial.txt ", puis cliquez sur "Ouvrir ". Si vous ne le trouvez pas dans ce dossier, cherchez le ailleurs. S'il n'est pas installé sur votre disque dur, téléchargez-le. en faisant bien attention où vous le placez, puis recommencez au 1- de cette page 5 - Dans la boîte de dialogue "Convertir le texte", sélectionnez l'option "Paragraphes Normaux avec sauts de lignes" et cliquez sur "OK". FrontPage importe le contenu du fichier texte et le place dans la page en cours.



2.3.2 Pour enregistrer la page en cours Dans le menu "Fichier" de FrontPage, choisissez "Enregistrer". La page est enregistrée sur le site Web en cours.

2.4 Recevoir des commentaires depuis votre site Dans la leçon 1, vous avez appris comment créer des hyperliens simples à partir de texte sur une page, qui pointe vers d'autres pages dans votre site Web. Mais au-delà de la connexion des pages à l'intérieur de votre site Web, un hyperlien peut aussi ouvrir des pages sur le World Wide Web ou interagir avec d'autres programmes tels qu'une application de courrier électronique ou un lecteur de News.

Dans les étapes ci-dessous, vous créerez un hyperlien qui lance un formulaire de messagerie sur l'ordinateur de l'utilisateur, quand il clique ce lien dans son navigateur. Ce type d'hyperlien est utilisé pour demander leurs commentaires aux visiteurs de votre site Web, lorsqu'il est publié.

2.4.1 Pour créer un hyperlien e-mail

1 - Sur la page " Pratique", appuyez sur la touche "Entrée" pour créer un peu d'espace après le texte inséré précédemment.

2 - Saisissez "S'il vous plaît, envoyez-moi vos réactions sur mon site Web !".

3 - Double-cliquez le mot "réaction" pour le sélectionner. FrontPage supporte les raccourcis de sélection standards de Windows.

Bouton Créer ou modifier un lien hypertexte

4 - Cliquez sur le bouton "Créer ou modifier un lien hypertexte" dans la barre d'outils de FrontPage.

Les boutons de la barre d'outils offrent des raccourcis pratiques pour les commandes FrontPage.

Bouton Créer un lien hypertexte d'envoi de message e-mail



5 - Dans la boîte de dialogue "Créer un lien hypertexte", cliquez le bouton "Créer un lien hypertexte d'envoi de message e-mail".

6 - Dans la boîte de dialogue correspondante, tapez votre adresse e-mail personnelle (par exemple : [email protected]).

Votre adresse e-mail personnelle a été définie par votre fournisseur d'accès Internet, lorsque vous avez obtenu votre connexion à l'Internet.

7 - Cliquez sur "OK".

Le champ URL dans la boîte de dialogue "Créer un lien hypertexte" contient maintenant "Mailto:[email protected] (cet exemple est remplacé par votre adresse e-mail réelle sur votre écran).

8 - Cliquez "OK".

Le mot "réaction" a changé de couleur de texte et est maintenant souligné pour indiquer qu'il s'agit d'un hyperlien. Plus tard, dans cette leçon, vous afficherez la page "Pratique" dans votre navigateur et vous pourrez tester l'hyperlien que vous venez de créer ici. Bien entendu, il n'est pas possible de tester le lien dans l'éditeur.

2.4.2 Pour enregistrer la page en cours

Bouton Enregistrer

Dans la barre d'outils de FrontPage, cliquez sur le bouton "Enregistrer". La page est enregistrée sur le site Web en cours.

2.5 Créer une Image Map Dans la première leçon, vous avez appris comme il est facile de placer des images dans les pages Web. Maintenant, vous créerez une image map, une image contenant un ou plusieurs hyperliens.



Quand une image est formatée en image map, un utilisateur peut cliquer sur certaines région de l'image et déclencher des "hotspots", c'est à dire des zones réactives. Ces hotspots lancent les hyperliens qui ont été ajoutés au HTML par l'éditeur FrontPage.

Avant de créer une image map, vous devez tout d'abord insérer l'image que vous utiliserez.

2.5.1 Pour insérer une Image

1 - Appuyez sur la touche "Entrée" pour déplacer le point d'insertion à la ligne juste en dessous de l'hyperlien "réaction".

2 - Dans le menu "Insertion" de FrontPage, sélectionnez "Image". La boîte de dialogue "Image" s'affiche.

Bouton Sélectionner un fichier stocké sur votre ordinateur

3 - Dans la boîte de dialogue "Image", cliquez le bouton "Sélectionner un fichier stocké sur votre ordinateur".

Le fichier d'image que vous voulez insérer se nomme blackbrd.gif.

4 - Dans la boîte de dialogue "Sélectionner un Fichier", naviguez jusqu'au dossier C:\Program Files\Microsoft FrontPage\Tutorial\

5 - Sélectionnez le fichier "blackbrd.gif ", puis cliquez sur "OK". Si vous ne la trouvez pas à l'emplacement indiqué, téléchargez-la et enregistrez la sur votre disque dur en faisant bien attention où vous la placez.

L'image d'une ardoise est affichée sur la page.

Cette image a un arrière-plan noir, ce qui ne correspond pas avec l'arrière-plan clair du thème. Vous allez maintenant rendre la bordure transparente, afin qu'elle se mêle avec la couleur d'arrière-plan blanche de la page "Pratique".

2.5.2 Pour rendre une couleur de l'image transparente

1 - Cliquez l'image de l'ardoise pour la sélectionner.

Une image est sélectionnée quand elle est entourée avec des poignées rectangulaires. Quand vous sélectionnez une image, la barre d'outil Image est activée.

Bouton Rendre transparent

2 - Maintenant, cliquez sur le bouton "Rendre transparent" sur la barre d'outils Image.

3 - Déplacez le pointeur de la souris sur l'image.

Le pointeur se change en crayon-gomme.

4 - Cliquez sur le bouton gauche de la souris n'importe où sur l'arrière-plan noir derrière l'ardoise.

L'arrière-plan de l'image est maintenant transparent, permettant à l'arrière-plan clair de la page d'être visible.



Maintenant, vous allez créer les hotspots sur l'image pour terminer l'image map.

2.5.3 Pour créer les Hotspots

1 - Cliquez l'image de l'ardoise pour la sélectionner.

Bouton Zone Réactive Rectangulaire

2 - Maintenant, cliquez dans le bouton "Rectangle" sur la barre d'outils Image.

Le bouton "Rectangle" crée un "hotspot" rectangulaire sur une image. Un hotspot est une zone d'une image qui contient un hyperlien.

3 - Déplacez le pointeur de la souris sur l'image.

Le pointeur devient un crayon.

4 - Déplacez le crayon vers le coin gauche supérieur du texte "Centres d'Intérêt".

5 - Cliquez et gardez le bouton gauche de la souris enfoncé, puis tirez le rectangle jusqu'à ce qu'il entoure le texte "Centres d'Intérêt".

Quand vous relâchez le bouton de la souris, la boîte de dialogue "Créer un lien hypertexte" s'affiche. Si vous avez relâché le bouton de la souris trop tôt, vous pourrez toujours ajuster la zone hotspot, après les étapes ci-dessous.



6 - Dans la boîte de dialogue "Créer un lien hypertexte", sélectionnez le fichier "Intérêts.htm", puis cliquez sur "OK".

Le texte "Centres d'Intérêt" sur l'image de l'ardoise est maintenant un hyperlien.

�

Astuce FrontPage : Les hotspots peuvent être redimensionnés. Si vous voulez ajuster la taille et la position d'un hotspot, déplacer la souris au-dessus des bordures du hotspot jusqu'à ce que vous voyiez le pointeur de redimensionnement (une flèche à deux-têtes). Vous pouvez alors cliquer et tirer les bordures du hotspot jusqu'au bon emplacement. L'hyperlien associé sera conservé.

Expérimentez maintenant par vous-même et créez les liens hypertexte supplémentaires pour les deux lignes de texte restantes sur l'image de l'ardoise.

Créez un hyperlien avec les mots "Album Photo" vers la page "album.htm", et un hyperlien pour les mots "Sites Web Favoris" vers la page "favoris.htm".

Plus tard dans cette leçon, vous verrez la page "Pratique" dans votre navigateur Web, et vous pourrez tester votre image map.

Avant de continuer, enregistrez votre travail.

Vous avez importé l'image blackbrd.gif dans la page depuis votre disque local. FrontPage enregistrera l'image dans votre site Web, afin qu'elle soit disponible plus tard, quand vous publierez votre site Web personnel à la leçon 3.

2.5.4 Pour enregistrer la page et l'image en cours

Bouton Enregistrer

1 - Dans la barre d'outils de FrontPage, cliquez sur le bouton "Enregistrer".

2 - Dans la boîte de dialogue "Enregistrer les fichiers incorporés", cliquez sur "OK" pour enregistrer l'image que vous avez insérée.



L'image de l'ardoise que vous avez placée sur votre page est ajoutée à votre site Web FrontPage et la page en cours est enregistrée.�

2.6 Placer du texte sur une image Dans FrontPage, vous pouvez placer du texte formaté sur une image. Cette fonctionnalité est utile pour la création de bannières graphiques, d'étiquettes sur des boutons image et la création de texte sur des images maps.

2.6.1 Pour placer du texte sur une image

1 - Sur la page "Pratique", placez le point d'insertion après l'image de l'ardoise, puis appuyez deux fois sur la touche "Entrée".

2 - Dans le menu "Insertion" de l'Éditeur FrontPage, sélectionnez "Image".

La boîte de dialogue "Image" est affichée.

3 - Sélectionnez le fichier "sunset.gif", puis cliquez sur "OK".

L'image sunset.gif a été ajoutée à votre site Web personnel lors de la leçon 1, donc vous pouvez l'insérer directement depuis votre site Web.

4 - Cliquez ensuite l'image "sunset" que vous venez d'insérer pour activer la barre d'outils Image.

Bouton Texte

5 - Dans la barre d'outils Image, cliquez le bouton "Texte".

Un champ texte avec des poignées et un curseur clignotant apparaît au centre de l'image.

6 - Tapez le mot "sunset".

Le mot est centré dans le champ texte.

La couleur du texte est trop foncée pour l'image que vous avez insérée. L'étape suivante permettra de faire ressortir le texte de l'image.

2.6.2 Pour formater le texte

1 - Double-cliquez le mot "sunset" pour le sélectionner.

Bouton Couleur du texte

2 - Dans la barre d'outils Format, cliquez sur le bouton "Couleur du texte".

La boîte de dialogue "Couleurs" apparaît.

3 - Cliquez sur une couleur claire pour le texte, telle que blanc, puis cliquez sur "OK".

4 - Dans le menu "Format", choisissez "Police".

La boîte de dialogue "Police" apparaît.

5 - Dans le champ "Police", choisissez "Times New Roman".

6 - Dans le champ "Style de police", choisissez "Gras".



7 - Dans le champ "Taille", choisissez "4 (14 points)", puis cliquez sur "OK" pour appliquer le changement de formatage.

8 - Pour que le texte tienne dans la boîte de texte, cliquez et tirez les poignées de redimensionnement jusqu'à ce que le mot "sunset" soit complètement affiché.

Vous pouvez déplacer la boîte de texte au centre (ou n'importe où) de l'image en cliquant et déplaçant le mot avec la souris.

Quand vous placez du texte formaté sur une image sur la page en cours, FrontPage ne modifie pas l'image originale. Quand vous enregistrez la page, FrontPage sauve une combinaison d'image et de texte dans un nouveau fichier d'image séparé.

Si vous avez précédemment permis à FrontPage d'enregistrer l'image originale dans votre site Web FrontPage (en cliquant "Oui" dans la boîte de dialogue "Enregistrer les fichiers incorporés"), vous pourrez revenir à l'image originale ultérieurement.

Avant de continuer, c'est une bonne idée d'enregistrer votre travail.


Dans le menu "Fichier" de FrontPage, sélectionnez "Enregistrer". La page est enregistrée sur le site Web FrontPage en cours.

2.7 Créer une table (ou tableau) Les tables (ou tableaux) sont un ensemble de cellules organisées en lignes et en colonnes. Vous pouvez utiliser des tables pour grouper des informations de manière systématique, ou, en les formatant avec des bordures invisibles, pour organiser la disposition de la page.



2.7.1 Pour créer une table

1 - Dans la page "Pratique", placez le point d'insertion après l'image "sunset", puis appuyez deux fois sur la touche "Entrée" pour créer un peu d'espace.

2 - Dans le menu "Tableau", sélectionnez "Insérer un Tableau".

La Boîte de dialogue "Insérer un Tableau" s'affiche.

3 - Dans le champ "lignes", entrez "6".

4 - Dans le champ "colonnes", entrez "2".

5 - Dans le champ "taille de la bordure", entrez "0".

Vous conserverez les valeurs par défaut pour l'alignement, l'espacement des cellules, la marge interne des cellules et la largeur. Vous pouvez toujours modifier ces paramètres plus tard.

6 - Cliquez sur "OK".

FrontPage crée une table avec six lignes et deux colonnes.

Astuce FrontPage : Grille ou Bordures ? Quand une table est insérée avec une bordure de taille zéro, l'Éditeur FrontPage affiche une grille pour vous aider à concevoir la disposition de la table. Cette grille n'est qu'un guide. Quand la page est affichée dans un navigateur Web, la grille n'est pas affichée.

Si vous voulez que la table apparaisse avec des bordures, cliquez avec le bouton droit de la souris n'importe où à l'intérieur de celle-ci dans l'Éditeur FrontPage et sélectionnez "Propriétés du Tableau" dans le menu contextuel. Dans cette boîte de dialogue, vous pouvez augmenter la valeur de la taille de la bordure.

2.8 Entrer du texte dans une table Vous pouvez saisir du texte directement dans les cellules d'une table. Pour cet exercice, vous utiliserez la table que vous venez d'insérer pour créer une liste descriptive des pages de votre site.

2.8.1 Pour ajouter du texte dans une table

1 - Cliquez dans la cellule en haut à gauche de la table et tapez le titre de la première colonne :

Noms des pages Web.

2 - Ensuite, tapez les noms de fichier des cinq pages de votre site Web dans les cellules de la colonne de gauche. Utilisez la touche "Flèche bas" pour aller à la cellule suivante, après avoir entré le nom de chaque fichier.

• index.htm,

• interets.htm,

• photo.htm,

• favoris.htm,

• tutorial.htm.

Remarquez que pour les noms de fichiers, il vaut mieux éviter les majuscules, mais surtout NE JAMAIS utiliser de caractères accentués.



3 - Cliquez dans la cellule en haut à droite de la table et tapez le titre de la seconde colonne : "Description de la page" 4 - Ensuite, tapez une brève description à côté de chacun des noms de fichiers. Utilisez la touche "Flèche bas" pour descendre vers la cellule suivante, après avoir saisi chaque description de fichier.

• La page de garde de mon site Web personnel.

• Une liste de mes centres d'intérêts.

• Quelques images superbes.

• Une liste de mes sites World Wide Web favoris.

• La page où je m'entraîne pour mes leçons FrontPage.

5 - Avec la souris, sélectionnez la première ligne de la table.

Bouton Gras 6 - Dans la barre d'outils "Format", cliquez sur le bouton "Gras". Les colonnes d'en-tête sont formatées en gras. Il est ainsi plus facile de distinguer les étiquettes des colonnes avec les autres cellules. 7 - Ensuite, déplacez le pointeur de la souris vers le milieu de la table, là où les bordures verticales gauche et droite des colonnes se rejoignent. Le pointeur change en une flèche à double-tête horizontale. 8 - Cliquez le bouton gauche de la souris, gardez-le enfoncé et tirez la bordure de la colonne vers la gauche afin que les deux colonnes soient plus proches sur la page. Le redimensionnement dynamique des tables est facile à faire avec FrontPage et fonctionne avec les lignes et avec les colonnes. Maintenant, votre table doit ressembler à ceci :




Bouton Enregistrer La page est enregistrée sur votre site Web.

2.9 Créer une liste Un autre moyen pour grouper et organiser l'information est d'utiliser des listes. Les pages Web peuvent avoir deux types de listes - numérotée ou à puces. Les listes numérotées contiennent du texte précédé par des numéros, comme les étapes de ce tutorial. Dans les listes à puces, le texte est précédé par des puces ou des images. Vous utilisez une liste à puces si les éléments n'ont pas besoin d'être listés dans un ordre particulier.

Dans la leçon 1, vous avez créé des listes à puces sur les pages "Intérêts" et "Favoris". Créons maintenant une liste numérotée.

2.9.1 Pour créer une liste numérotée

1 - Sur la page "Pratique", placez le curseur après le texte "La page où je m'entraîne pour mes leçons FrontPage" dans la dernière cellule, puis appuyez sur CTRL + Entrée.

La combinaison de touche CTRL + Entrée crée une nouvelle ligne au-dessous de la table.

2 - Appuyez sur la touche "Entrée" pour créer plus d'espace au-dessous de la table.

3 - Sélectionnez "Titre 2" dans la liste déroulante "Modifier le style" sur la barre d'outils de l'Editeur FrontPage.



4 - Ensuite, saisissez "Étapes pour utiliser FrontPage" sur cette ligne et appuyez sur "Entrée".

Vous avez créé un paragraphe de style Titre 2.

Bouton Liste numérotée

5 - Cliquez sur le bouton "Liste numérotée" sur la barre d'outils.

FrontPage ajoute une nouvelle ligne avec un "1" au début.

6 - Saisissez "Lancer l'Explorateur FrontPage" et appuyez sur la touche "Entrée". FrontPage ajoute une nouvelle ligne avec un "2" au début.

7 - Ensuite, saisissez les autres points de la liste et appuyez sur la touche "Entrée" après chacun :

• Créer ou ouvrir un site Web FronPage,

• Lancer l'Editeur FrontPage,

• Créer ou éditer les pages de votre site Web FrontPage,

• Enregistrer les modifications,

• Publier le Web FrontPage de votre site Web.

8 - Appuyez deux fois sur la touche "Entrée" après la saisie du dernier point, ce qui termine la liste en cours. La liste que vous avez créée doit se présenter comme ceci :

�


Bouton Enregistrer



2.10 Ajout un élément actif sur la page Avec FrontPage, vous pouvez ajouter des éléments actifs tels que boutons "sensitifs", texte défilant, compteurs de page et clips vidéo. Ces éléments peuvent rendre vos pages plus intéressantes et utiles.

Dans cet exercice, vous ajouterez un texte défilant (marquee) à votre page courante. Un "marquee" est une zone sur la page qui affiche du texte "défilant" lorsqu'elle est visualisée dans un navigateur, tel que Microsoft Internet Explorer. Les marquees sont un moyen amusant pour créer du texte et des titres en mouvement sur votre page d'accueil. Ils peuvent être utilisés pour attirer l'attention sur des évènements.

2.10.1 Pour ajouter un marquee

1 - Dans la page "Pratique", appuyez deux fois sur la touche "Entrée" pour créer de l'espace au-dessous de la liste numérotée.

2 - Sélectionnez "Titre 1" dans la liste déroulante "Modifier le style" de la barre d'outils de FrontPage.

3 - Saisissez "Bienvenue sur mon site Web personnel !".

4 - Sélectionnez ce texte et cliquez le bouton "Couleur du texte" sur la barre d'outils Format. Choisissez une couleur claire, un orangé par exemple. Le formatage du texte du marquee doit être réalisé avant de le déclarer. Si le site Web FrontPage en cours dispose d'un thème, la couleur du texte, la taille et la police peut changer automatiquement.

5 - Dans le menu "Insertion", pointez sur "Composants", puis cliquez sur "Texte défilant". La boîte de dialogue "Propriétés du texte défilant" est affichée. Dans cette boîte de dialogue, vous pouvez modifier plusieurs propriétés comme la vitesse et la direction du mouvement, ainsi que la taille et la couleur d'arrière-plan.

6 - Dans la liste déroulante "Couleur d'arrière-plan ", choisissez "Bleu foncé".

7 - Cliquez sur "OK". FrontPage ajoute une zone "marquee" à la page en cours.



Plus tard, dans cette leçon, vous afficherez la page "Pratique" dans un navigateur Web, vous pourrez ainsi voir le marquee que vous venez de créer.�


Bouton Enregistrer

2.11 Ajouter un formulaire de réaction Précédemment, vous avez appris comment fabriquer un hyperlien de messagerie à partir d'un texte. Cliquer sur l'hyperlien ouvre un formulaire e-mail sur l'ordinateur de l'internaute.

Un autre moyen pour recevoir des commentaires depuis le World Wide Web est de placer un formulaire de réaction sur votre page. Il permet aux visiteurs de votre site de vous envoyer un commentaire sans ouvrir leur application de messagerie.

2.11.1 Pour ajouter un formulaire à votre page

1 - Sur la page "Pratique", appuyez sur la touche "Entrée" pour créer un peu d'espace au-dessous du marquee.

2 - Saisissez "S'il vous plaît, envoyez-moi vos commentaires sur mon site Web".

3 - Dans le menu "Insertion", sélectionnez "champ de formulaire", puis cliquez sur "Zone de texte déroulante".

FrontPage insère un formulaire contenant une zone de texte déroulante et des boutons "Envoyer" et Effacer".

Les propriétés par défaut d'un formulaire de réaction spécifient que les commentaires envoyés (les résultats du formulaire) sont enregistrés dans un fichier précis de votre site Web.

Dans la prochaine section, vous afficherez la page "Pratique" dans votre navigateur, et vous pourrez tester ce formulaire et voir le résultat.




Bouton Enregistrer

2.12 Afficher la page "Pratique" dans votre navigateur Web Maintenant, il est temps de voir à quoi ressemble dans votre navigateur, la page "Pratique" que vous venez de créer.

2.12.1 Pour visualiser la page dans le navigateur

Bouton Aperçu dans le navigateur

1 - Dans la barre d'outils de FrontPage, cliquez sur le bouton "Aperçu dans le navigateur".

La page "Pratique" est affichée dans votre navigateur Web par défaut.

2 - Déplacez-vous vers le bas pour localiser "S'il vous plaît, envoyez-moi une réaction à propos de mon site Web !" et remarquez le mot "réaction".

Le mot "réaction" est en couleur et souligné. Dès que vous déplacez la souris sur le mot, le pointeur se transforme en main, ce qui indique qu'il s'agit d'un hyperlien que vous pouvez cliquer.

Si vous avez configuré correctement l'application de messagerie installée sur votre ordinateur, le fait de cliquer ce mot ouvrira la fenêtre d'envoi de nouvel e-mail, avec votre adresse personnelle dans la zone destinataire. Saisissez un message dans le formulaire et envoyez-le. Si aucune fenêtre n'apparaît, annulez l'opération et validez tout message qui pourrait apparaître.

3 - Ensuite, déplacez-vous vers le bas jusqu'à l'ardoise et cliquez sur "Centres d'Intérêt".

L'hyperlien que vous avez créé dans l'image map trouve et affiche la page de description de vos intérêts personnels.



4 - Cliquez le bouton "Précédente" de votre navigateur pour retourner à la page "Pratique".

Si vous avez créé des hyperliens supplémentaires pour les mots "Album Photo" et "Sites Web Favoris", répétez les étapes 3 et 4 ci-dessus en cliquant sur l'hyperlien approprié dans l'image map. Dans chaque cas, cliquez le bouton "Précédente" de votre navigateur Web pour retourner à la page "Pratique".

5 - Descendez jusqu'à la table que vous avez créée.

Remarquez que les noms de fichier et leurs descriptions sont alignés correctement sur la page. Votre navigateur Web n'affiche pas la grille de la table que vous voyez dans l'Editeur FrontPage pendant l'édition. C'est parce que vous avez inséré une table avec une taille de bordure zéro.

6 - Déplacez-vous jusqu'après le marquee et localisez le texte "S'il vous plaît envoyez-moi vos commentaires sur mon site Web !", localisé au-dessus du formulaire.

Vous allez maintenant tester ce formulaire de réaction en saisissant un peu de texte et en envoyant les commentaires au fichier de résultat de ce formulaire.

7 - Cliquez dans le champ "Zone de texte multiligne" pour activer le point d'insertion.

8 - Saisissez "Super, c'est vraiment bien !"



Si vous faites une erreur de frappe, cliquez sur le bouton "Effacer" pour supprimer le texte dans le champ. Vous pouvez alors recommencer à saisir du texte.

9 - Cliquer sur le bouton "Envoyer" traite le texte dans le champ et l'envoie au fichier de résultats par défaut. Vous pouvez spécifier le chemin et le nom de ce fichier de résultats dans la boîte de dialogue "Propriétés du formulaire", lors de la création du formulaire.

Note : Selon le navigateur Web que vous utilisez, un message de sécurité peut être affiché, vous informant sur l'envoi d'information sur une connexion non sécurisée. Nul besoin de vous alarmer, tant que vous n'avez pas saisi d'informations personnelles ou confidentielles. Pour terminer l'envoi du formulaire, validez simplement les messages d'alerte.

Après l'envoi du formulaire, une page de confirmation sera affichée, vous informant que les informations ont été envoyées avec succès.

10 - Sur la page "Confirmation de formulaire ", cliquez sur "Retour au formulaire". C'est un hyperlien qui vous ramène à la page "Pratique" dans votre navigateur Web.

2.13 Visualiser le fichier Résultats Le texte que vous avez saisi dans le formulaire de réaction pendant que vous visualisiez la page "Pratique" dans votre navigateur Web est stocké dans un fichier qui est ajouté à votre site Web



FrontPage par défaut. Ce fichier est localisé dans un dossier caché auquel on ne peut pas accéder par le navigateur Web. Seul l'administrateur ou l'auteur du site Web FrontPage peut visualiser l'information.

2.13.1 Pour visualiser le fichier Résultats

1 - Sur votre clavier, appuyez sur ALT + TAB ou cliquez l'icône de FrontPage sur la barre des tâches Windows pour revenir à FrontPage.

2 - Dans le menu "Affichage" de l'Explorateur FrontPage, sélectionnez "Actualiser".

La commande "Actualiser" recharge le site Web FrontPage en cours. Elle est utilisée pour mettre à jour l'affichage des fichiers et les pages qui auraient été ajoutés ou mis à jour pendant l'utilisation de l'Editeur FrontPage.

3 - Cliquez le bouton "Dossiers" dans la barre "Affichage".

4 - Dans la fenêtre "Tous les dossiers", cliquez le dossier _private pour le sélectionner. Par défaut, le texte envoyé par le formulaire de la page de cette leçon, est stocké dans le dossier _private de votre site Web FrontPage. Ensuite, double-cliquez le fichier form-results.txt visible dans la fenêtre "Contenu".

5 - Le fichier est ouvert et affiché dans votre éditeur de texte par défaut, où vous pouvez voir le texte que vous avez tapé dans le formulaire dans le navigateur Web ("Super, c'est vraiment bien !").

6 - Fermer le fichier.

3 Leçon 3

3.1 Ajouter une page à un site Web FrontPage Dans la leçon 1, vous avez appris comment utiliser l'Explorateur FrontPage pour créer un nouveau site Web FrontPage et comment éditer ces pages par l'ajout de texte, d'images, de listes formatées et de liens hypertexte en utilisant l'Editeur FrontPage.

Dans la leçon 2, vous avez créé une page de mise en pratique, sur laquelle vous avez placé un fichier texte, créé un formulaire de commentaires, une image map, ajouté une table et inséré un texte défilant.

Vous allez maintenant retourner dans FrontPage pour préparer votre site Web FrontPage pour la publication sur le World Wide Web. Avant de publier le site Web FrontPage, vous vous assurerez que vos pages et vos fichiers sont organisés, que vos liens hypertextes fonctionnent et que vos pages sont sans fautes d'orthographe. L'Explorateur FrontPage peut vous aider à réaliser et gérer ces tâches importantes.

3.2 Affichage Dossiers Dans la leçon 1, vous avez appris comment utiliser l'affichage "Navigation" pour créer la structure de votre site Web personnel et comment visualiser et appliquer des images de style professionnel en utilisant l'affichage "Thèmes".

Maintenant que votre site Web personnel a été créé et qu'il contient plusieurs pages et fichiers, vous utiliserez plusieurs autres affichages de l'Explorateur FrontPage pour vous aider à l'organiser.

Vous pouvez sans risque et facilement réarranger les pages et les fichiers dans votre site Web FrontPage en utilisant l'affichage "Dossiers" pour visualiser les fichiers grâce à l'écran partagé. A la façon de l'Explorateur de Windows 95 et 98 (ou de Windows NT), la fenêtre appelée "Tous les dossiers", du côté gauche, présente une liste hiérarchique des fichiers dans votre site Web FrontPage. Cliquez sur un dossier dans la fenêtre "Tous les dossiers" pour afficher son contenu sur le côté droit de la fenêtre, appelé "Contenu de".



Dans les étapes suivantes, vous grouperez les fichiers image du site Web personnel et les déplacerez dans le dossier "Images".

Normalement, déplacer les pages et les fichiers d'un dossier à un autre devrait briser les liens hypertexte entre vos pages. Cependant, si vous déplacez les fichiers dans l'affichage "Dossiers" de l'Explorateur FrontPage, FrontPage met à jour chaque page et lien hypertexte dans votre site, afin de suivre le nouvel emplacement des fichiers et des dossiers déplacés.

�� Pour déplacer des fichiers images vers le dossier "Images"�

1 - Ouvrez le site Web personnel que vous avez créé pour cette formation.

Bouton "Dossiers"

2 - Dans la barre "Affichage" de l'Explorateur FrontPage, cliquez le bouton "Dossiers".

3 - Dans la fenêtre "Tous les dossiers", sélectionnez le dossier supérieur.

4 - Dans la fenêtre "Contenu", cliquez la colonne nommée "Type".

En cliquant sur l'étiquette d'une colonne, vous triez les fichiers dans la fenêtre "Contenu" suivant ce critère.

Le premier clic sur une étiquette de colonne trie dans l'ordre ascendant. Cliquez une seconde fois pour trier dans l'ordre descendant.

La liste des fichiers est maintenant groupée par type de fichier avec toutes les images en haut suivies par les fichiers HTML (pages).

5 - Dans la fenêtre "Contenu", cliquez la première image Gif tout en haut de la liste pour la sélectionner.

6 - Ensuite, tout en maintenant appuyé la touche majuscule (CTRL) sur votre clavier, cliquez les autres images Gif dans la liste.



Dans l'affichage "Dossiers", FrontPage supporte tous les raccourcis de sélection standard de Windows, tel que Maj + clic pour sélectionner une suite de fichiers et CTRL + clic pour sélectionner des fichiers non contigus.

7 - Cliquez et maintenez le bouton droit de la souris pendant que le pointeur est sur les fichiers Gif sélectionnés.

8 - Ensuite, déplacez le pointeur vers le dossier "Images" dans la fenêtre "Tous les dossiers".



9 - Quand le dossier "Images" est sélectionné, relâchez le bouton de la souris et choisissez "Déplacer ici" dans le menu "contextuel".

FrontPage déplace les fichiers Gif sélectionnés vers le dossier "Images" et met à jour automatiquement tous les liens hypertextes des fichiers dans le site Web FrontPage en cours.

De même, vous pouvez choisir de grouper des fichiers sons, des clips vidéo, et d'autres types de fichiers dans leurs propres dossiers. Vous pouvez créer de nouveaux dossiers dans l'affichage "Dossiers" si besoin est.

�� Pour créer un nouveau dossier�

1 - Dans la fenêtre "Tous les dossiers" de l'affichage "Dossiers", cliquez le dossier dans lequel vous voulez créer un nouveau sous-dossier.

Les dossiers peuvent être ouverts et fermés dans la fenêtre "Tous les dossiers" pour faire apparaître leurs sous-dossiers. Cliquez les signes plus (+) et moins (-) devant le nom du dossier pour afficher ou cacher son contenu.

2 - Dans le menu "Fichiers", sélectionnez l'option "Nouveau", puis cliquez sur "Dossiers".

FrontPage crée un nouveau dossier avec un nom temporaire (Nouveau_Dossier).

3 - Lorsque le nom temporaire du dossier est en surbrillance, tapez le nom que vous souhaitez lui donner, puis pressez la touche Entrée. ATTENTION : éviter les majuscules (pour les machines sous Unix) ; proscrire les lettes accentuées.

Le nouveau dossier est renommé et vous pouvez maintenant y placer des fichiers.

3.3 Affichage État des liens hypertexte L'Explorateur FrontPage gère automatiquement les liens hypertexte quand vous déplacez ou renommez les fichiers et dossiers. Il fournit aussi des commandes pour tester et réparer les liens hypertextes dans votre site Web FrontPage.

L'affichage "Rapport" de l'Explorateur FrontPage liste l'état de tous les liens hypertexte internes et externes rompus dans le site Web FrontPage en cours. Quand vous choisissez l'affichage "Rapport : liens hypertexte rompus", l'état des liens hypertexte internes est disponible tout de suite mais les liens externes ne sont pas immédiatement vérifiés parce qu'ils pointent en dehors des pages de votre site Web FrontPage et, selon le trafic réseau, cela peut prendre un certain temps pour les contrôler.

Les liens hypertexte

• rompus sont représentés par un maillon de chaîne rompu,

• non vérifiés par un point d'interrogation.



Note : Si vous n'avez pas accès au World Wide Web pendant cette leçon FrontPage, passez aux exercices suivants. Vérifier les liens hypertextes externes requiert une connexion à l'Internet. Astuce FrontPage : Enregistrez et fermez toutes les pages ouvertes avant de vérifier les liens hypertextes. FrontPage ne peut pas déterminer la validité des liens hypertextes sur une page lorsqu'elle est ouverte dans l'Éditeur FrontPage.

3.3.1 Pour vérifier les liens hypertextes dans le site Web FrontPage en cours 1 - Dans FrontPage, choisissez "Recalculer les liens hypertextes..." dans le menu "Outils". La barre d'état de l'Explorateur FrontPage affiche les informations concernant la vérification des liens.

3.3.2 Pour réparer les liens hypertextes dans le site Web FrontPage en cours Dans le menu "Affichage", commande "Rapport", vous avez toute une série de rapports possibles.

Par exemple, vous pouvez demander les "Liens hypertexte rompus"

Double cliquer sur la ligne du lien rompu

Cliquer sur le bouton "Modifier la page". La page contenant le lien rompu s'ouvre et vous pouvez corriger le problème.



3.4 Corriger l’orthographe

Alors que l’Éditeur FrontPage peut vérifier l’orthographe d’une page ouverte, FrontPage peut le faire sur toutes les pages, ou celles qui sont sélectionnées, dans le site Web FrontPage en cours.

La commande "Orthographe" fonctionne avec tous les éléments qui peuvent être directement édités sur la page. Les titres ajoutés via la boîte de dialogue "Propriétés de la page" ou le texte contenu dans les composants FrontPage ne sont pas gérés par cette commande.

Afin de vérifier la version la plus récente de vos pages, il convient d'enregistrer et de fermer toute page ouverte dans l’Éditeur FrontPage.

3.4.1 Pour corriger l'orthographe sur toutes les pages du site Web FrontPage en cours

1 - Fermer toutes les pages de l'Éditeur. Aller dans l'Affichage "Dossiers" .

1 - Dans le menu "Outils" de l'Explorateur FrontPage, choisissez "Orthographe".

3 - Dans la boîte de dialogue "Orthographe", cliquer sur "Tout le site Web", cliquer sur "Ajouter les pages à corriger à la liste des tâches".

Cliquez sur "Démarrer" pour commencer la vérification.

FrontPage affiche la progression de la correction.

Lorsque l’opération est terminée, la liste des pages suspectes s'affiche, ainsi que le nombre de tâches ajoutées à l’affichage "Tâches".

Pour corriger, vous pouvez double cliquer sur la ligne de la boîte "Orthographe sur plusieurs pages ou

choisir l'affichage "Tâches" et double cliquer sur la ligne concernée.



4 - Dans la boîte de dialogue, cliquez sur "Annuler".

3.5 Remplacer du texte Il est facile avec la commande "Remplacer" de l'Éditeur FrontPage de trouver et remplacer du contenu sur des pages sélectionnées dans votre site Web FrontPage. Les titres de page ajoutés via la boîte de dialogue "Propriétés de la page" ou le texte contenu dans les composants FrontPage ne sont pas gérés par la commande "Remplacer".

Avant de remplacer du texte sur les pages, enregistrez et fermez toutes les pages ouvertes dans l'Éditeur FrontPage.

3.5.1 Pour remplacer du texte sur toutes les pages du site Web FrontPage en cours

1 - Fermer toutes les pages de l'Éditeur. Aller dans l'Affichage "Dossiers" .

2 - Dans le menu "Édition " de l'Explorateur FrontPage, choisissez "Remplacer".

La boîte de dialogue "Remplacer dans le site Web FrontPage" s'affiche. Dans cette boîte de dialogue, vous pouvez spécifier le texte à rechercher et le texte qui doit le remplacer. Vous pouvez choisir de remplacer du texte sur toutes les pages de votre site Web FrontPage ou sur les pages sélectionnées uniquement.



3 - Dans la boîte de dialogue "Remplacer dans le site Web FrontPage", tapez le texte suivant dans le champ "Rechercher" :

Bienvenue sur mon site Web !

3 - Ensuite, tapez le texte suivant dans le champ "Remplacer par" :

Merci de visiter mon site Web !

4 - Cliquez sur "Rechercher sur le site".

La boîte de dialogue "Recherche des occurrences" s'affiche. Dans cette boîte de dialogue, FrontPage signale son état d'avancement, ainsi que les possibilités de remplacements.

5 - Dans la boîte de dialogue "Recherche des occurrences", sélectionnez "Page d'accueil" dans la liste des pages et cliquez sur "Modifier la page".

L'Éditeur FrontPage ouvre la page d'accueil et affiche la boîte de dialogue "Remplacer", tout en se positionnant sur la première occurrence du texte recherché.

6 - Cliquez sur "Remplacer" pour remplacer le texte.

La page d'accueil contient désormais la phrase "Merci de visiter mon site Web !".

7 - Dans la boîte de dialogue "Remplacer", cliquez sur "Annuler".

Ceci ferme la boîte de dialogue, mais n'annule pas les remplacements qui ont été réalisés.

8 - Enregistrez la page et fermez l'Éditeur FrontPage.

La page d'accueil a été modifiée avec succès.

3.6 Affichage Tâches L'affichage "Tâches" présente la liste de toutes les tâches en attente, associées avec le site Web FrontPage. Les tâches sont des points qui nécessitent votre attention avant la publication de votre site Web FrontPage. C'est un outil indispensable pour un professeur qui doit signaler à ses élèves les corrections qu'ils doivent apporter.

Dans les exercices précédents, vous avez ajouté des tâches à la liste quand vous avez différé certaines actions. Par exemple, quand vous avez vérifié l'orthographe des pages dans votre site Web FrontPage, vous avez choisi d'ajouter une nouvelle tâche pour les pages contenant des fautes d'orthographe. Par l'ajout de tâches à la liste, vous pouvez terminer toutes les corrections à la fois.



Si vous travaillez dans un environnement de développement Web, tel qu'un Intranet, il est facile avec l'affichage "Tâches" de suivre les tâches et de les assigner aux personnes concernées.

3.6.1 Pour terminer une tâche dans l'affichage "Tâches"

1 - Dans la barre "Affichages" de FrontPage, cliquez le bouton "Tâches".

Bouton "Tâches"

La liste des tâches est affichée.

2 - Dans la liste des tâches, cliquez la colonne nommée "Modifiée le".

La liste est classée en fonction de la date où les tâches ont été modifiées.

Vous pouvez classer les tâches par "État", "Tâche", "Attribuée à", "Priorité ", "Liée à", "Modifiée le" et "Description".

3 - Recherchez la première tâche sur la liste qui indique "Corriger les mots mal orthographiés" et double-cliquez cette tâche pour l'ouvrir.

La boîte de dialogue "Détails de la tâche" est affichée. Cette boîte de dialogue fournit une synthèse de la tâche sélectionnée. Vous pouvez modifier la priorité de la tâche, l'attribuer à une autre personne sur votre réseau ou terminer la tâche et la supprimer de la liste.

4 - Dans la boîte de dialogue "Détails de la tâche", cliquez sur "Exécuter la tâche".

L'Éditeur FrontPage est affiché et le premier mot mal orthographié est mis en surbrillance.

5 - Dans l'Éditeur FrontPage, corrigez l'orthographe de la page, enregistrez, puis fermez-la.



Bien qu'il ne soit pas exigé que vous terminiez toutes les tâches avant de publier votre site Web FrontPage, c'est une bonne idée de passer en revue cette liste quand vous avez terminé d'effectuer des modifications sur votre site Web FrontPage.

L'affichage "Tâches" vous aide à gérer votre site Web FrontPage en notant les informations importantes dont vous devez vous souvenir.

Tâche non exécutée :

Tâche en cours d'exécution :

Tâche exécutée :

3.7 Publication du site Web personnel Lorsque votre site Web FrontPage est prêt à être publié sur le World Wide Web - ou sur l'Intranet de votre entreprise - l'Explorateur FrontPage facilite le transfert des pages et des fichiers vers le World Wide Web, tout en vérifiant automatiquement les adresses et les chemins de vos fichiers et de vos pages.

Note : Si vous ne voulez pas publier votre site Web personnel sur votre serveur Web, vous pouvez utiliser l'exercice suivant comme référence sans le réaliser pour autant.

3.7.1 Pour publier le site Web de FrontPage en cours

1 - Fermez toutes les pages ouvertes dans l'Éditeur FrontPage.

2 - Dans FrontPage, Menu "Fichier", commande "Publier le site Web...".

La boîte de dialogue "Publier le site Web" est affichée. Dans cette boîte de dialogue, spécifiez la localisation sur le World Wide Web ou votre Intranet d'entreprise, où vous désirez publier votre site Web FrontPage. Vous devez disposer d'un accès Internet fourni par un Fournisseur de service Internet, avant de publier sur le World Wide Web. Il vous fournira les informations qui vous seront demandées dans cette boîte de dialogue.



4 - Dans la boîte de dialogue "Publier le site Web", cliquez "Publier".

L'Explorateur FrontPage publie le site Web FrontPage de votre ordinateur sur le serveur Web Intranet ou le serveur World Wide Web que vous avez spécifié.

Si FrontPage détecte que vous publiez sur un serveur Web qui n'a pas les Extensions Serveur FrontPage installées, il lancera l'assistant "Publication de sites Web", afin de poster votre site Web FrontPage via le protocole de transfert de fichiers FTP.

Si le serveur Web vers lequel vous publiez votre site Web FrontPage dispose des Extensions Serveur FrontPage, votre site Web FrontPage sera totalement fonctionnel une fois publié.

Si vous publiez votre site Web FrontPage sur un serveur Web qui ne dispose pas des Extensions Serveur FrontPage, certains composants FrontPage, tel que le composant "Formulaire de recherche" ne fonctionneront pas. Mais ces composants sont signalés à la création. Dans cette configuration, il suffit de les éviter.

FIN

UN SITE WEB AVEC FRONT AGEactualites.stsernin.free.fr/frontpage/telechargement/... · 2008. 10....

Documents

Transcript of UN SITE WEB AVEC FRONT AGEactualites.stsernin.free.fr/frontpage/telechargement/... · 2008. 10....