Retour menu "Formations"

Retour au menu principal

HISTOIRE - GÉOGRAPHIE - ÉDUCATION CIVIQUE : ACADÉMIE D'ORLÉANS-TOURS

INITIATION : Site INTERNET et FrontPage98              (Ph. DEVIERS)

OBJ : Savoir construire des pages web, avec les principales fonctions de FrontPage 98
(différents éléments des pages WEB,  liens hypertextes et organisation d’un petit site internet)
Fichiers annexes : Vesuve (gif), Volcanisme (doc), Horse (gif animé)

Rq1 :   Pour cette prise en main, dans un but didactique, les divers raccourcis (icônes ou CTRL-...) ne seront pas utilisés,    afin de bien décomposer la logique des commandes et des actions.

Rq2 :   Editeur FrontPage : un écran qui affiche l’espace où l’on va construire une page Web .

Explorateur FrontPage : un écran qui affiche la représentation graphique de l’arborescence.

Il faudra passer de l’un à l’autre, car ces deux espaces différents ne seront pas affichés ensemble.

Rq3 :      clic-G cliquer avec le bouton gauche de la souris (ou double clic-G ou clic-D : bouton droit).

1- Savoir créer une structure simple de site Web :

Lancer FrontPage / Fichier / Nouveau / Site Web FrontPage

Choisir Site Web personnel puis effacer Mon Nouveau Site Web pour nommer votre site : EXOWEB  puis OK.

On visualise les pages de départ. Retrouver, sur le document joint, cette structure qui est affichée (pages en grisé) et comprendre la notion d’arborescence de ce site minimal.

2- Savoir ajouter des pages liées à une page de départ (album Photo) :

Curseur sur la page Album et clic-G (elle passe en bleu). Puis  Fichier / Nouveau / Page. Recommencer Fichier / Nouveau / Page. Observer la nouvelle arborescence qui affiche ces 2 nouvelles pages attachées à Album Photo.

Renommer les nouvelles pages : clic-D sur Nouvelle Page 1, puis clic-gauche sur Renommer. Taper le nom « soleil » et Entrée. Recommencer pour Nouvelle Page 2, taper le nom « ville » et Entrée.

3- Savoir transférer deux images par Couper / Coller :

Curseur sur la page Album Photo et double clic-G pour travailler dans la page. Clic-G sur la photo du coucher de soleil pour la sélectionner (8 poignées apparaissent autour) puis Edition / Couper. Ensuite,  Outils / Afficher l’explorateur puis double clic-G pour passer dans la page « soleil ». Transférer la photo avec  Edition / Coller. Fichier / Enregistrer. Retourner dans l’Explorateur (Outils / Afficher l’explorateur), passer dans la page Album et, de la même manière, couper la photo de la ville et la copier dans la page « ville ». Enregistrer

4- Savoir créer un lien vers chacune des nouvelles pages, avec un hypermot :

Revenir dans l’Explorateur, retourner dans la page Album, sélectionner « Un coucher de soleil ». (placer le curseur devant  « Un », clic-G et, sans relâcher le bouton, se déplacer jusqu’à la fin du mot « soleil », puis relâcher le bouton). L’affichage change : Un coucher de soleil Dans la barre de menus en haut, dérouler Insertion / Lien Hypertexte (dernière ligne). Dans la liste des pages, double clic-G sur la page soleil.htm. Clic-G dans un endroit vide de la page. Observer le changement de couleur et le soulignement qui marquent la présence d’un HYPERMOT (qui crée un lien interactif). En gardant l’appui sur la touche Ctrl, déplacez le curseur sur l’expression « Un coucher de soleil » et observer le changement du curseur : la petite main indique un lien activable. En gardant Ctrl appuyé, clic-G avec cette main sur l’expression interactive : vous passez aussitôt dans la page voulue (soleil). Retourner dans l’Explorateur, curseur sur la page Album et double clic-G pour entrer dans la page. Recommencer la même opération avec l’expression « Une grande ville » pour faire un lien vers la page « ville ». Enregistrer la page Fichier / Enregistrer avant de tester le fonctionnement du lien (Ctrl + clic-G)

 5- Savoir faire un lien de navigation pour retourner à la page précédente :

Revenir dans l’Explorateur puis double clic-G sur la page « soleil ». Placer le curseur sous la photo et taper « page précédente ». Sélectionner cette expression et Insertion / Lien Hypertexte. Double Clic-G sur photo.htm  pour se brancher sur la page (Album). Enregistrer la page « soleil » Fichier / Enregistrer. Vérifier le lien (Ctrl et clic-G). Ajouter aussi un lien « page précédente » dans la page « ville », pour remonter à la page Album. Enregistrer la page « ville ». Vérifier la navigation entre ces pages : Album >soleil > Album > ville > Album.

6- Savoir importer une image dans une page :

Revenir dans l’ Explorateur FrontPage puis retourner dans la page Centres d’intérêt (double clic-G).

Pour voir plus clair dans la page, sélectionner tous les textes et les effacer (avec la touche Suppr ).

Dérouler Insertion / Image / Dans la boîte de dialogue, clic-G sur l’icône de l’Explorateur (en bas à droite) pour aller chercher (sur le cdrom ou sur la disquette A :) le fichier Vesuve.gif. Double clic-G sur le nom du fichier pour le charger dans la page. Clic-G dans l’image et diminuer sa taille avec les « poignées » de coin (clic-G, déplacer et relâcher le bouton). Identifier la position du cratère volcanique. Enregistrer (Fichier / Enregistrer)

7- Savoir créer une page pour lier un commentaire à une image :

Revenir dans l’ Explorateur FrontPage et clic-G pour se placer sur la page Centres d’intérêt, (la boîte passe en bleu). Clic-G sur Fichier / Nouveau / Page. Puis se positionner sur cette nouvelle page, et clic-D pour la renommer « volcan ». Entrée. Entrer dans cette page : curseur sur la page et double clic-G. Dans la barre d’outils du haut, cliquer sur Tableau / Insérer un tableau. Sélectionner un tableau de 2 lignes sur 2 colonnes . Placer le curseur sous le tableau et ajouter à cette page un lien hypertexte pour revenir (« page précédente ») vers la page Centres d’intérêt. Enregistrer

 8- Savoir créer une zone réactive, pour faire un lien avec une page de commentaire :

Revenir dans la page Centres d’intérêt pour afficher la photo du Vésuve. Dérouler Affichage / Barres d’outils /.

Si Barre d’outils Image est déjà coché, ne rien changer, sinon cochez Barre d’outils Image pour faire apparaître en bas de la page, les outils de traitement des images. Clic-G dans la photo: les poignées de contrôle apparaissent et la barre d’outils est activée. Clic-G dans l’outil  « rectangle », à gauche de la barre d’outils. Le curseur devient un crayon avec lequel il va falloir encadrer la zone du cratère : clic-G en haut et à gauche de la zone choisie, garder le bouton enfoncé et relâcher le bouton dans le coin en bas et à droite. La boîte de dialogue affiche la liste des pages : brancher la zone réactive vers la page « volcan », avec un double clic-G sur volcan.htm. Enregistrer. Vérifier le fonctionnement du lien (Ctrl + clic-G) pour passer dans la page Volcan.

 9- Savoir inscrire du texte dans un tableau et y importer du texte et une animation :

Dans la page « Volcan », positionner le curseur dans la case en haut et à gauche du tableau et taper quelques lignes d’explication pour décrire le cratère, par exemple. Observer les passages à la ligne automatiques. Sélectionner tout votre texte pour changer la police de caractères (essayez Comic Sans MS), augmenter ou diminuer la taille, le mettre en italique, souligner certains mots ... Enfin, sélectionner tout le texte et le déplacer dans la case en bas et à droite. Si on veut un fond coloré pour une cellule : positionner le curseur dans la cellule voulue et clic-droit puis cliquer  Propriétés de la cellule, faire défiler les couleurs d’arrière-plan, choisir puis OK.

Positionner de nouveau le curseur dans la case en haut et à gauche puis dérouler Insertion / Fichier. Dérouler Type, remonter au début de la liste et cliquer sur Tous les Fichiers. Trouver le fichier Volcanisme.doc (ou un autre fichier doc) et  double clic-G sur le nom du fichier pour le transférer dans la cellule choisie. On peut modifier la largeur des colonnes du tableau (curseur sur la bordure médiane) pour mieux mettre en page. Dans une des cases vides du tableau, importer le fichier horse2.gif.  Observer l’effet de l’animation avec Aperçu. Revenir dans Normal . Enregistrer

10- Savoir insérer des liens vers des adresses de site ou de messagerie internet :

Revenir dans l’ Explorateur FrontPage et double clic-gauche pour se placer dans la page « Sites Web »

Positionner le curseur en-dessous des textes de la page et taper  sur deux lignes :

« Serveur académique » et  « Ecrivez-moi ».

Sélectionner Serveur académique et dérouler Insertion /  Lien Hypertexte.

Taper en face de URL (au bout de http://) , sans espace ni accents,  www.ac-orleans-tours.fr puis OK. Observer le soulignement et le changement de couleur et vérifier que le lien fonctionne (Ne tenez pas compte du message d’erreur : il faudrait passer quitter FrontPage pour se connecter réellement).

Sélectionner Ecrivez-moi et dérouler Lien Hypertexte.  Cliquer sur le symbole de la messagerie (une petite enveloppe) et tapez l’adresse de courrier électronique du destinataire du message (ex :  Pdeviers@aol.com). Sortir de la boîte avec OK. La commande mailto déclenchera l’ouverture de la messagerie dans le navigateur (pour le faire réellement, il faut avoir quitté FrontPage). Quitter la boîte de dialogue avec OK. Enregistrer

IMPORTANT : Avant de finir, revenir dans l’Explorateur FrontPage, double clic-G dans toutes les page , pour les afficher et vérifier les liens. Ne pas oublier de les enregistrer si vous les modifiez..

Quitter FrontPage et lancer un navigateur  (Explorer ou Netscape). Déroulez Fichier et cocher Travailler hors connexion ( en Intranet).  Dérouler Fichier / Ouvrir / Parcourir. Cliquer sur C : puis sur Webshare et sur Wwwroot. Double clic-G sur le nom de votre site puis clic-G sur la page Default.htm. OK pour entrer dans le site. Visualiser votre site comme un visiteur et vérifier l’affichage et le fonctionnement des liens.

On peut conserver ce site sur disquette ( dans FrontPage, Explorateur, Fichier, Publier le site, Autres sites, dérouler le menu pour choisir a : puis OK). On pourra ainsi le transporter, l’installer pour le retravailler, sur un autre ordinateur (équipé de FrontPage), le visualiser hors connexion (off line ou intranet), avec n’importe quel navigateur, Explorer ou Netscape.

On pourra ensuite faire évoluer ce site très sommaire, l’enrichir avec de nouvelles pages, modifier l’arborescence pour développer les liens hypertextes et l’interactivité (formulaires, ...), améliorer la présentation avec des fonds de page, des couleurs, ajouter de l’animation (Gif animés) et des sons.  Ceci est une autre histoire ...

Si vous voulez vraiment briser votre ménage en passant tous vos instants libres devant l’ordinateur ...