TP FrontPage : CREER UN SITE DE TROIS PAGES - iut cs

TP FrontPage : CREER UN SITE DE TROIS PAGES AVEC UN
SOMMAIRE
Etape 1. Ouvrir FrontPage et créer un site Web vide..........................................................2
Etape 2 ajouter des pages...............................................................................................3
Etape 3 : donner un titre et renommer les 2 pages ...........................................................5
Etape 4 : Insérer une bordure partagée et créer un sommaire. ..........................................6
Etape 5 mettre en forme.................................................................................................8
Etape 6 : saisir votre texte. .............................................................................................9
Etape 7 : liens hypertexte. ............................................................................................ 10
Etape 8 : sécuriser l’accès à une partie de son site .......................................................... 11
Etape9 : sauvegarder son travail.................................................................................... 11
TP FrontPage : CREER UN SITE DE TROIS PAGES AVEC UN
SOMMAIRE
L’objectif est de construire une structure de site simple avec 3 pages, un sommaire
automatique et quelques liens hypertextes. Nous insérerons des images et changerons la
couleur du fond de la page.
Avant de commencer :
Pourquoi FrontPage ?
Nous avons l’habitude de consulter des pages web. Un navigateur tel que Internet
explorer ou Netscape permet de visualiser des pages. Ces navigateurs ne permettent
toutefois pas de modifier ou de créer des pages. Nous pouvons seulement copier le texte
ou les images si aucune protection n’est définie et les coller dans un logiciel de
traitement de texte, de tableur ou de traitement de photos.
Pour pouvoir créer des pages, il faut un logiciel tel que FrontPage. D’autres logiciels
permettent d’éditer des pages HTML tels que Dreamweaver, ou même des logiciels
d’office comme Word ou excel.
Internet explorer ne fait donc qu’interpréter le code HTML que nous avons créé grâce à
FrontPage. FrontPage permet de créer, Internet explorer n’est qu’un lecteur.
(HTML : (Hypertext Markup Language) Langage de balisage standard utilisé pour les documents du World Wide Web. Le
langage HTML a été mis au point par le World Wide Web Consortium. Le langage HTML utilise des balises pour indiquer
comment les navigateurs Web doivent afficher les éléments de page tels que texte et graphismes, et comment ils doivent
répondre aux actions des utilisateurs, par exemple, l'activation d'un lien hypertexte au moyen d'une pression sur une
touche ou d'un clic de souris. La plupart des navigateurs Web, notamment Microsoft Internet Explorer et Netscape
Navigator, reconnaissent les balises HTML au-delà de celles comprises dans la norme actuelle. FrontPage lit et écrit des
fichiers HTML et il n'est pas nécessaire de connaître le langage HTML)
1
Etape 1. Ouvrir FrontPage et créer un site Web vide
Ouvrir FrontPage (programme, bureautique).
Fichier/nouveau/page ou site Web/
Aller sur « site web vide »
Cliquez sur « parcourir »
r
2
et créez un dossier site dans mes documents :
FrontPage crée un site Web avec 2 dossiers _private et image
Etape 2 ajouter des pages
Se placer dans navigation qui se trouve dans la barre d’affichage à gauche.
Cliquez sur le bouton droit de la souris dans la zone bleue de droite et cliquez
Nouveau/page supérieur
Une page nommée page d’accueil apparaît, ce sera la première page de Votre site.
3
Nous allons ajouter une nouvelle page en cliquant sur le bouton droit de la souris sur la case
page d’accueil et en demandant nouveau/nouvellepage.
Nouvelle page 1 apparaît
Recommencer l’opération en cliquant sur le bouton droit de la souris sur la case page
d’accueil et en demandant nouveau/nouvellepage.
Nouvelle page 2 apparaît.
Le résultat est le suivant
4
Etape 3 : donner un titre et renommer les 2 pages
Dans l’exemple suivant j’ai choisi enquete.htm et resultat.htm comme nom de page (c’est ce que vous
aurez à faire pour le cours d’enquête), mais vous pouvez changer et choisir photo, ou enregistrement
ou recitdevie.htm…
Nous allons donner un nouveau titre à ces pages pour que le sommaire automatique nous
affiche le bon titre au lieu de « nouvelle page 1 ».
Marche à suivre : clic droit sur nouvelle page 1 et renommer. Nous appellerons cette page
présentation de l’enquête.
La nouvelle page 2 s’appellera « résultat de l’enquête ».
Nous venons de changer le titre de la page mais pas le nom de la page.
Le titre sert au sommaire et vient s’afficher en haut à gauche du navigateur Internet.
Pour changer le nom de la page, allez dans dossier dans la barre de gauche et renommer
nouvelle page 1 .htm en enquete.htm. Il suffit de cliquer avec le bouton droit de la souris sur
nouvelle page 1 .htm et renommer.
la page 2 s’appellera resultat.htm.
Rq : Pas d’accents dans les nom de page (.htm) et dans les
noms de fichiers.
Résultat :
Nom
de
la
page
affiché dans la barre
d’adresse
5
Titre affiché dans
la barre de titre
Frontpage permet de créer des pages ; pour les visualiser allez dans «fichier/Aperçu dans
le navigateur » :
Nom de la page
Titre
affiché
affiché
dans
barre d’adresse
dans la barre
de titre
Rq : internet explorer ne fait que lire votre page HTML, retournez dans Frontpage pour la
modifier.
Etape 4 : Insérer une bordure partagée et créer un sommaire.
Double cliquez sur enquête.htm dans FrontPage.
Vous êtes maintenant dans votre page.
Cliquez sur format/bordures partagées et choisissez si vous voulez votre bordure à gauche
ou en haut,…
Cette bordure s’affichera de la même façon sur toutes les pages de votre site.
Vous pouvez choisir d’inclure dans cette bordure partagée un sommaire automatique en
choisissant l’option « inclure les boutons de navigation ».
6
la
Double cliquez sur la bordure partagée.
Puis indiquez « pages enfants sous la page d’accueil »
7
Vous constatez que le sommaire automatique crée des liens entre les pages de votre site. Il
prendra dans le sommaire le nom que vous avez indiqué dans « navigation »
Noms qui figureront dans le
sommaire automatique
Etape 5 mettre en forme
Vous pouvez changer la couleur du fond de la page
Cliquez sur le bouton droit dans la page enquête.htm, puis sélectionnez propriétés de la
page puis l’onglet arrière plan. Dans arrière plan, choisissez votre couleur de fond.
8
Etape 6 : saisir votre texte.
Je vous conseille de travailler votre texte dans un logiciel de traitement de texte au préalable
puis de copier et coller dans FrontPage. Toutefois, vous pouvez directement saisir votre texte
dans la zone de travail.
9
Pour les besoins du TP, vous pouvez taper un petit texte et insérer une image dans chacune
des pages. Pour les images, voir cours photo.
Etape 7 : liens hypertexte.
Sélectionner le texte sur lequel le lien hypertexte se fera. Clic droit/lien hypertexte
Sélectionner fichier ou page web existante, vérifier que devant l’adresse (entourée ici), il n’y
ait pas c:/documents and settings/mes documents/mon site. Sinon, lorsque vous hébergerez
votre site, le lien hypertexte se fera sur votre disque dur.
Etape 8 : enregistrez votre travail et voyez le résultat.
Enregistrez votre site dans votre espace disque.
Vous avez remarqué que FrontPage crée un dossier appelé « monsiteweb9 » dans c:/mes
documents.
10
Rq : vous pouvez aussi faire un lien hypertexte vers un fichier (un fichier son par exemple).
Il vous faudra copie votre fichier mp3 ou wav dans votre dossier « site web » et de faire unl
lien sur ce fichier.
Visualiser son travail.
Fichier aperçu dans le navigateur ; il se peut que Frontpage vous
demande d’enregistrer votre travail si vous ne l’avez pas fait.
Vous pouvez graver votre site sur un cd ou le stocker sur une disquette et le donner à toute
personne équipée d’un PC ou d’un mac. Le langage HTML est relativement universel.
Vous savez maintenant créer un site, mettre en forme, créer un sommaire, insérer du texte,
insérer de nouvelles pages, les renommer.
Vous pouvez embellir votre site en portant une attention particulière aux couleurs, polices,
image (voir charte graphique dans un prochain TP).
Si vous hébergez votre site, faites attention aux droits d’auteurs, de propriété
intellectuelle, au droit à l’image.
Etape 8 : sécuriser l’accès à une partie de son site
Pour protéger un enregistrement sonore, des documents de stage, je vous propose une
notice qui vous permet d’obtenir un bon niveau de sécurité sur une partie de votre site :
http://iutcs.free.fr/protect/protectsite.pdf
Etape9 : sauvegarder son travail
Faites un copier coller de l’ensemble de votre site sur votre clé USB (copier l’ensemble de
votre dossier appelé « site web »).
11