| Retour menu "Formations" |
|
HISTOIRE - GÉOGRAPHIE - ÉDUCATION CIVIQUE : ACADÉMIE D'ORLÉANS-TOURS |
Objectif : Utiliser les fonctions simples de FrontPage 2000 pour réaliser un mini-site.
Savoir cliquer : clic-gauche, clic-droit, double clic-gauche, …
Savoir sélectionner un mot : se placer devant le mot, clic-gauche, garder le bouton enfoncé, aller jusqu’au bout du mot et relâcher le bouton.
Rq : Pour une démarche de découverte progressive, les Commandes seront indiquées à partir des mots de la barre de menus (les nombreux raccourcis et les icônes des barres de menu ne seront pas utilisés dans cette présentation)
A- Créer la structure du mini-site Web :
-1- Ouvrir le site. Lancer FrontPage2000 / Fichier / Nouveau / Site Web. Par défaut, le site s’appelle monsite web..
Nous lui donnerons plus tard le nom de notre choix. Clic-gauche sur Site Web normal et OK .
-Visualiser l’arborescence: Affichage et clic-gauche sur Navigation. On débute avec une seule page : Accueil
-2- Créer trois pages et les attacher à cette page : placer le curseur sur la page accueil (avec la petite maison , Home, ce qui signifie page de départ) et clic-droit. Dans le menu déroulant, clic-gauche sur Nouvelle page. Observer le résultat.
-Recommencer deux fois pour avoir trois pages liées à la page d’accueil.
-3- Nommer les pages pour la navigation dans le site: curseur sur la page Accueil, clic-droit puis dans le menu déroulant, clic-gauche sur Renommer , taper Notre Collège (ou ce que vous voulez) puis taper Entrée. Renommer les trois autres pages : Nouvelle page2 à Présentation, Nouvelle page3 àHistoire, Nouvelle page4à Géographie.
-4- Titrer les pages pour informer ceux qui les consulteront. Curseur sur la page d’accueil et double clic-gauche pour entrer dans la page. Inscrire en haut le titre de la page : ACCUEIL. Revenir dans l’arborescence (Affichage / Navigation) et recommencer la même opération (trois fois) pour inscrire le titre dans le haut de chaque page: PRESENTATION, HISTOIRE, et GEOGRAPHIE.
B- Créer les liens de navigation entre les pages (avec des hypermots)
Il faudra d’abord inscrire dans chaque page des mots qui recevront un lien hypertexte vers une autre page. En cliquant sur ces mots, ( PRESENTATION, HISTOIRE, et GEOGRAPHIE, RETOUR), on se déplacera dans l’arborescence, comme en appuyant sur un bouton de commande. (On pourrait aussi le faire avec des pictogrammes, des icônes,des petits dessins, des flèches, …, qui seraient des boutons hyperliens).
-1- Placer le curseur sur la page Accueil et double clic-gauche pour entrer dans la page. Passer quelques lignes (Entrée) et écrire PRESENTATION, laisser un peu d’espace sur la ligne, puis HISTOIRE, et enfin, GEOGRAPHIE.
-2- Avec le curseur, sélectionner PRESENTATION. L’affichage change : PRESENTATION..
Puis dérouler Insertion / Lien hypertexte, rechercher dans la liste affichée, la page présentation et
double clic-gauche sur présentation.htm pour coller un hyperlien. On observe que le mot présentation est souligné et a changé de couleur (le bleu et le soulignement indiquent un hyperlien). Refaire la même opération pour relier le mot Histoire à la page histoire.htm et le mot Geographie à la page géographie.htm. Vérifier en revenant dans l’arborescence: (Affichage / Navigation)
-3- Il faut aussi permettre de retourner vers la page d’accueil, à partir de chaque page.
-Placer le curseur sur la page Présentation et double clic-gauche pour entrer dans la page.
-Passer quelques lignes (Entrée) et écrire le mot RETOUR. Avec le curseur, sélectionner RETOUR.. Puis dérouler Insertion / Lien hypertexte, rechercher dans la liste affichée, la page default.htm.
Rq : La page d’accueil doit s’appeler default.htm (sans accent) pour être lue automatiquement par les navigateurs et lancer la visualisation du site sur internet)
-Faire un double clic-gauche pour coller l’ hyperlien qui permettra le retour.
-Refaire la même opération dans la page Histoire et dans la page Géographie, pour permettre le retour vers default.htm.
-Revenir dans l’arborescence pour vérifier : (Affichage / Navigation).
4- Vérifier le fonctionnement des liens. Revenir dans la page d’accueil (Affichage / Navigation , …)
Remarque : FrontPage simule à la fois un serveur (celui qui diffuse le site ) et un client (celui qui le consulte). Le travail de création se fait dans la partie serveur, mais pour tester le fonctionnement, il faut passer dans la partie client.
- Pour cela, en gardant la touche Ctrl enfoncée, il faut placer le curseur sur un des hypermots, le curseur se transforme en une main (hyperlien), et avec un clic-gauche, on active le lien.
- Essayer tous les liens que vous avez faits pour tester la navigation, en passant de page en page.
Ne pas oublier : Enregistrer la page (Fichier / Enregistrer) avant de passer à la suivante.
C- Insérer des liens vers un site Web ou une adresse de messagerie internet:
-1- Passer dans la page Accueil (default.htm) et taper sur deux lignes :« Serveur académique » et « Ecrivez-moi ».
Sélectionner Serveur académique et Insertion / Lien Hypertexte.
Taper en face de URL et au bout de http:// , sans espace ni accents, www.ac-orleans-tours.fr puis OK. (Pour vérifier que le lien fonctionne, il faudrait quitter FrontPage afin de se connecter réellement).
-2- Sélectionner Ecrivez-moi et cliquer sur Lien Hypertexte. Cliquer sur le symbole de la messagerie (une petite enveloppe, en bas et à droite). Tapez l’adresse de courrier électronique du destinataire du message (ex : pdeviers@aol.com). (Pour le caractère @, appuyer en même temps sur la touche Alt Gr et sur la touche @ ). Taper OK. La commande ( mailto : ) déclenchera l’ouverture de la messagerie dans le navigateur (après avoir quitté FrontPage). Taper OK.
D- Insérer un tableau et gérer la mise en page des textes et des documents :
Revenir dans l’arborescence (Affichage / Navigation). Entrer dans la page Présentation (double clic-gauche sur la page).
- Placer le curseur à l’endroit où vous voulez insérer le tableau (taper Entrée pour aller à la ligne).
-1- Dans la barre d’outils du haut, dérouler Tableau / cliquer sur Insérer et Tableau. Sélectionner un tableau de 2 lignes sur 2 colonnes (2x2) et OK. Positionner le curseur dans la case en haut et à gauche du tableau et taper quelques phrases pour décrire votre site, sans vous occuper d’aller à la ligne (« au kilomètre »). Observer les passages à la ligne.
-2- Gérer les polices de caractères. Sélectionner une partie du texte qui vient d’être saisi.
-Dérouler la boîte des polices de caractère et cliquer sur celle de votre choix (essayez Comic Sans MS)
On peut augmenter ou diminuer la taille, le mettre en italique ou en gras, souligner certains mots, les mettre en couleur (dérouler le tableau des couleurs de texte), les surligner (dérouler le tableau des couleurs, à droite du pinceau)…
-Déplacer le texte : Sélectionner tout le texte, puis clic-gauche dans la zone de texte sélectionné, garder le bouton enfoncé, déplacer le texte, par exemple, dans la case en haut et à droite et relâcher le bouton gauche)
-Rendre invisible le cadre du tableau : clic-droit dans le tableau, cliquer Propriétés du tableau et mettre la taille de bordure à zéro puis OK. Les pointillés ne seront pas visibles dans la consultation par internet.
-Colorer le fond d’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.
-Modifier la largeur des colonnes du tableau (curseur sur la bordure médiane, verticale ou horizontale, et élargir ou rétrécir) pour mieux mettre en page.
-3- Insérez un tableau 2x2 dans les pages Histoire et Géographie, pour y intégrer les documents, images ou textes.
E- Insérer des fichiers (image fixe, image animée, texte, son ou video, zone réactive) :
-Dans la page Présentation, positionner le curseur dans la case en bas et à gauche puis clic sur Insertion / Image / A partir du fichier. Il faut aller chercher sur la disquette, sur le disque dur, sur le cd-rom, ...le document prévu (carte, plan, photo)
-Cliquer sur l’icône de l’explorateur, en bas et à droite, sélectionner la source (lecteur, dossier, fichier) et cliquer sur le fichier voulu pour le transférer dans la cellule choisie. On peut redimensionner à la souris la taille d’affichage du document.
-Passer dans la page Histoire puis Géographie pour transférer les documents graphiques prévus
-Positionner le curseur dans la case en haut et à gauche et insérez une image animée, à partir de la disquette ou du cdrom. Pour la voir s’animer, cliquez sur l’onglet Aperçu. Revenir dans Normal.
-Positionner le curseur dans la case en bas et à droite et aller chercher un fichier disponible, texte (ou tableau de données chiffrées), et insérez-le.
Il faudra gérer les dimensions des documents et la taille des polices de caractères pour améliorer l’affichage.
-3- Relier un son (*.wav, *.mp3 ou MIDI) ou une vidéo (*.mov, *.mpg) à un mot précis dans la page
-Passer dans la page Histoire , écrire le mot SON (ce serait pareil pour une video). (Attention, fichiers volumineux !)
Sélectionner SON. Insertion / Lien Hypertexte , rechercher un fichier son et cliquez dessus pour le relier au mot SON.
-Passer dans la page Géographie et insérez dans une cellule du tableau, une photo, du Collège ou autre, (sur la disquette).
-4- Dans une image (ex : le Collège ), on va insérer , sur un détail de la photo ( une fenêtre, par exemple), une zone réactive qui renverra à une autre page, pour commenter le détail à étudier (texte explicatif, autre photo, détail agrandi, …).
-D’abord, créer une nouvelle page pour afficher le commentaire lié à l’ image réactive:
Affichage / Navigation et simple clic-gauche pour se placer sur la page Géographie. Clic-gauche sur Fichier / Nouveau / Page. Lorsque la nouvelle page s’affiche, se positionner sur cette nouvelle page, clic-droit et la renommer Commentaire puis Entrée.
Entrer dans cette page : double clic-gauche sur la page.
-Ajouter à cette page un lien hypertexte pour pouvoir revenir (taper RETOUR et faire le lien vers la page Géographie).
-Créer une zone réactive dans l’ image, pour faire le lien avec la page de commentaire :
-Revenir dans la page Géographie pour afficher la photo du Collège. Cliquer sur Affichage / Barres d’outils / Image..( Si Image est déjà coché, ne rien changer, sinon cocher Image pour afficher en bas de la page, les outils de traitement des images).
-Cliquer dans la photo: les poignées de contrôle apparaissent et la barre d’outils est activée.
-Cliquer dans l’outil « rectangle », en bas à droite et revenir sur la photo. Le curseur devient un crayon, avec lequel il faut encadrer la zone du détail à commenter. (Clic-gauche en haut et à gauche de la zone choisie, garder le bouton enfoncé, se déplacer en diagonale, 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 Commentaire, avec un double clic-gauche sur cette page.
-Vérifier le fonctionnement du lien (garder la touche Ctrl appuyée) : passer dans la page Géographie, promener le curseur dans l’image, voir s’il se change en une main, tester la zone réactive (Ctrl + clic-gauche) et revenir dans Géographie.
F- Vérifier le fonctionnement et diffuser le site :
-1- Avant de quitter FrontPage
-Visualiser chaque page et tester les liens de navigation. Enregistrer la page et passer à la suivante. Les fichiers dispersés seront regroupés dans le même répertoire, pour être disponibles directement.
-Par curiosité, visualiser le code HTML qui a été généré (sans taper une seule ligne de code), en cliquant sur l’onglet HTML, en bas de la page . Revenir dans le mode normal de création de site en cliquant sur l’onglet Normal
-Nommer le site (Stage, par exemple) pour le retrouver facilement : Outils / Paramètres ... / puis onglet Général / Nom du site Web Taper Stage et OK.
L’enregistrement d’un site Web est assez complexe, car il associe des fichiers très différents et crée de nombreux dossiers et sous-dossiers. La sauvegarde par défaut se fait dans le disque C : \, dans le répertoire Webshare, dans le dossier Wwwroot.
-2- Minimiser la fenêtre de FrontPage et lancer un navigateur Explorer ou Netscape. Travailler hors connexion.
Charger la page de lancement du site Fichier / Ouvrir et chercher (Choose file ou Parcourir) dans le disque C :, répertoire Webshare, dossier Wwwroot. Cliquer sur Stage et sur Default.htm (page de lancement du site). Cliquer sur OK (ou Ouvrir).
Visualiser et vérifier l’affichage et le fonctionnement des liens tels qu’ils se feront sur le Web.
-3- On peut conserver ce site sur une disquette : Revenir dans FrontPage. Puis Fichier, Publier le site Web. Clic-gauche sur Parcourir, dérouler le menu (en bas) pour choisir Disquette 3 1/2 (A : ) puis Ouvrir. Ensuite, cliquer sur Publier et sur OUI. (Aussitôt que la sauvegarde est finie, on peut tester le site à partir de la disquette, en cliquant sur le lien en bleu).
Ensuite quitter la publication en cliquant sur Terminée
- Le poids du site ne doit pas dépasser 1.4 Mo (pour une disquette),sSinon, il faut le stocker sur un lecteur de type Iomega Zip.
On pourra le transporter, l’installer pour le visualiser avec un navigateur, Explorer ou Netscape, hors connexion (off line).
On pourra le retravailler, sur un autre ordinateur (équipé de FrontPage, par exemple).
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 couleurs, ajouter de l’animation (Gif animés) et des sons ...
-3- Il faudra ensuite le mettre en ligne, avec un logiciel comme CuteFTP (File Transfer Protocol, ftp://…)
- Cela consiste à le rendre disponible en le transférant dans un ordinateur qui fonctionnera jour et nuit, chez un fournisseur d’accès qui propose un hébergement gratuit. Il faut donc disposer auparavant d’un site déjà ouvert et d’une adresse.
- Pour qu’il soit consulté par internet, il faudra également le faire connaître (c’est le référencement). Ainsi, grâce aux mots-clés qui définiront le site et ses particularités, il sera indexé plus rapidement par les moteurs de recherche et les annuaires, ce qui permettra aux internautes (du monde entier !) de le trouver, même s’ils ignorent l’adresse du site.