FrontPage_2003.doc Y.

CINOTTI
Conc ept i on et mi se en l i gne de pages Web
( l ai de de Fr ont Page 2003)

Afin de raliser cette formation, une connexion Internet est ncessaire.

Lobjectif gnral de cette formation est de crer un mini-site Web. Afin de vous faire une ide du rsultat
auquel vous parviendrez, consultez dabord la page : http://membres.lycos.fr/ticefront

E Avant de commencer la formation, dcompresser le fichier etranger.zip qui se trouve dans
C:\Base\Trans. Placer les fichiers dans le mme dossier.
E Crer un nouveau dossier C:\Base\Web

1. METTRE EN PLACE LA STRUCTURE DU SI TE
Problme : Je veux crer un mini-site Web comportant une page daccueil, une page propos des
vignobles trangers et une prsentant mes sites prfrs.
Solution : Ouvrir FrontPage
Dans le bandeau droite, cliquer sur Crer une nouvelle page ou un nouveau site>
Nouveau site Web : Autres Modles de sites Web > Site Web normal > Parcourir >
Indiquez lemplacement du nouveau site Web : C:\Base\Web\ > OK
Affichage > Navigation apparat au milieu de la fentre, licne de la page daccueil du
site, nomme index.htm
Clic droit sur cette icne index.htm > Renommer > saisir : Page daccueil > Entre
Clic droit sur licne index.htm > Nouveau > Page apparat licne dune nouvelle
page nomme Nouvelle page 1 > clic droit sur cette icne > Renommer > saisir : Vi-
gnobles trangers > Entre
nouveau, clic droit sur licne Page daccueil > Nouveau > Page > clic droit sur
licne Nouvelle page 1 > Renommer > saisir : Mes sites prfrs > Entre
Affichage > Dossiers > clic droit sur le fichier nomm vignobles_trangers.htm > Re-
nommer > saisir : etranger.htm (sans accent) > Entre
Clic droit sur le fichier nomm mes_sites_prfrs.htm > Renommer > saisir : sites.htm >
Entre
NB Les pages Web sont crites ici en HMTL (HyperText Markup Language) un langage qui
permet de crer de lhypertexte. Elles seront visionnes laide un navigateur comme In-
ternet Explorer ou Mozilla.

2. CHOI SI R UN THME POUR LE SI TE
Problme : Je veux que toutes les pages comportent la mme mise en forme.
Solution : Format > Thme > dans le bandeau droite, utiliser la barre de dfilement pour cliquer
sur le thme Capsules > Appliquer le thme : O Toutes les pages > E Couleurs vives
> OK > Lapplication dun thme Oui
NB : Un thme dans FrontPage, comme un modle dans PowerPoint, permet de donner une
unit graphique toutes les pages dun site.

3. CRER UNE PREMI RE PAGE WEB
Problme : Je veux complter ma page daccueil.
Solution : Double-cliquer sur index.htm
Saisir le texte : Vous tes sur le site de (votre prnom et votre NOM). Je suis tudiant(e)
Toulouse.
FrontPage_2003.doc Y. CINOTTI

4. I NSRER UNE I MAGE
Problme : Je veux insrer une image dans la page Web mais celle-ci pse 119 ko. Elle est donc trop
lourde et ncessitera beaucoup dattente pour les internautes ne disposant pas dune
connexion rapide.
Solution : laide de Photo Editor (cf. point 7 de la formation Photo Editor) ou de Picture Mana-
ger (cf. point 6) ou de XnView (cf. point 5), redimensionner et enregistrer capitole.jpg
(dans C:\Base\Trans) de faon que la taille du fichier soit infrieure 50 Ko.
Dans FrontPage, sauter deux lignes aprs tudiant Toulouse.
Insertion > Image > partir du fichier > Regarder dans : C:\Base\Trans cliquer sur
capitole.jpg > Insrer > cliquer sur licne Au centre pour placer limage au centre de la
page
Fichier > Enregistrer > Changer de dossier > cliquer sur le dossier images > OK > OK
NB : Une image sur un site ne devrait jamais dpasser 50 Ko pour acclrer lapparition de la
page.
Une page Web nest constitue que de texte. Les images et tous les autres objets (image, mu-
sique, vido) quelle prsente lorsquon la consulte laide dun navigateur comme Internet
Explorer sont en fait des fichiers auxquels il est fait rfrence dans le code source de la page,
crit en HTML. Pour voir ce code source, il suffit de cliquer, en bas gauche, sur longlet
Code (puis Cration pour continuer)

5 . I NSRER DES PUCES
Problme : Comment placer des puces un peu originales ?
Solution : Sous limage, saisir votre parcours de formation ( personnaliser) en lalignant gauche :
Mon parcours :
Bac. technologique lcole htelire de Grenoble ;
BTS au Lyce htelier de Nice ;
Licence lIUP de Toulouse-Le Mirail.
Slectionner les trois dernires lignes > Format > Puces et numros > Onglet Puces
graphiques > O Utiliser les images du thme en cours > OK

6 . I NSRER UN TRAI T
Problme : Comment placer une ligne de sparation dans ma page Web
Solution : laide de lExplorateur Windows, afficher le dossier C:\Base\Traits et renommer Ran-
ge de galets(.gif) en galets(.gif)
Dans FrontPage, se placer sous le dernier point de lnumration (Licence lIUP de
Toulouse dans lexemple) > supprimer la puce ventuellement apparue en cliquant sur
licne Puces , en haut
Insertion > Image > partir du fichier > Regarder dans C:\Base\ Traits > double-
cliquer sur galets(.gif) > cliquer sur licne Au centre pour placer limage au centre de la
page
Deux lignes sous le trait, saisir (alignement gauche) :
Je suis heureux de mettre votre disposition :
mes sites prfrs
des informations sur les vins trangers
Slectionner les deux dernires lignes > cliquer, dans la barre doutils suprieure, sur
licne Puces > Ctrl+S > OK
NB : Le fichier Range de galets.gif a t renomm car les fichiers sur Internet ne doivent
comporter ni accent ni ni espace entre les mots ni caractres spciaux. Il est mme sou-
haitable de les saisir en minuscules.
FrontPage_2003.doc Y. CINOTTI
7. FACI LI TER LA LECTURE EN PLAANT DES LI ENS HYPERTEXTE DANS UNE PAGE
Problme : Je veux mettre disposition des informations concernant les vins trangers. Le document est
assez long. Comment faire en sorte que le lecteur puisse se dplacer facilement dans la page ?
Solution : Ouvrir, dans Word, le fichier se trouvant dans C:\Base nomm ETRANGER.DOC >
Ctrl+A (pour tout slectionner) > copier
Dans FrontPage, dans le bandeau gauche, double-cliquer sur la ligne etranger.htm
Coller > Ctrl+N (pour revenir au dbut du document) > slectionner, le titre de la pre-
mire partie : Le vignoble dEspagne > Insertion > Signet > Nom du signet : Espagne >
OK
Placer ainsi les signets Portugal, USA et Italie pour les trois autres vignobles
Ctrl+S (pour enregistrer la page)
Revenir au dbut du document > slectionner dans le plan 1. Espagne > cliquer sur
licne Insrer un lien hypertexte > cliquer sur Fichier ou page Web existant(e),
gauche > cliquer sur le pav Dossier en cours > cliquer sur etranger > cliquer sur le pav
Signet > cliquer sur Espagne > OK > OK
De la mme manire, lier 2. Portugal, 3. tats-Unis dAmrique et 4. Italie avec les si-
gnets correspondant
Ctrl+S (pour sauvegarder la page)

8. I NSRER UN LI EN VERS UN SI TE
Problme : Comment crer des liens vers dautres sites Web ?
Solution : Dans le bandeau gauche, double-cliquer sur la ligne sites.htm
Saisir le titre de la page : MES SITES PRFRS > slectionner le texte saisi > lui affec-
ter le style Titre 1 en utilisant le pav style, dans la barre doutils,
Sauter deux lignes et saisir : Le restaurant Guy Savoy > slectionner ce qui vient dtre
saisi > Ctrl+K (pour insrer un lien hypertexte) > Adresse : http://www.guysavoy.com >
OK
Crer galement deux autres liens vers les sites du restaurant de Michel Bras
(www.michel-bras.com) et de la maison Troigros (www.troisgros.fr/)
Ctrl+S (pour enregistrer)

9 . CRER UN LI EN VERS UNE AUTRE PAGE
Problme : Comment lier la page daccueil et le document sur les vins trangers ?
Solution : Revenir vers index.htm en cliquant sur longlet en haut > slectionner des informations
sur les vins trangers >Ctrl+K > cliquer sur etranger > OK
De la mme manire, crer un lien hypertexte de mes sites prfrs vers la page sites.htm
Ctrl+S (pour enregistrer)

10 . TESTER LES LI ENS HYPERTEXTE DANS LE NAVI GATEUR
Problme : Je veux voir si, dans mon navigateur, les liens hypertexte fonctionnent bien.
Solution : Dans la page daccueil (index.htm) Fichier > Afficher dans le navigateur > Microsoft
Internet Explorer 6.0 (800 600) la page saffiche dans le navigateur (il faut parfois
cliquer sur le pav du navigateur, dans la barre de tches, en bas)
Vrifier le passage dune page lautre et dun vignoble lautre dans etranger.htm

FrontPage_2003.doc Y. CINOTTI
11. I NSRER UN LI EN VERS VOTRE ADRESSE E-MAI L
Problme : Jai remarqu que, dans certains sites, pour crire quelquun, il suffit de cliquer sur
une zone sensible pour ouvrir la messagerie. Comment puis-je obtenir le mme effet ?
Solution : Revenir vers FrontPage > dans index.htm > se placer aprs la phrase de prsentation
(Vous tes sur le site) > sauter une ligne
Cliquer sur licne Insertion > Image > partir du fichier > Regarder dans
C:\Base\Trans > Nom de fichier : email(.gif) > Insrer > droite de limage, saisir :
Vous pouvez me contacter par e-mail
Slectionner e-mail, qui vient dtre saisi > Ctrl+K > cliquer sur Adresse de messagerie
> saisir votre adresse de messagerie (mailto: se place automatiquement devant) > OK
Clic droit sur limage email.gif > Proprits de limage > onglet Apparence > Ali-
gnement : Centr > OK
Ctrl+S > OK
Cliquer sur licne Aperu dans le navigateur et tester le lien

12. I NSRER UN TEXTE DFI LANT
Problme : Pour rendre ma page daccueil un peu plus vivante, je veux placer une phrase daccueil
qui dfile.
Solution : Dans la page index.htm, placer une ligne avant la premire ligne > placer le curseur sur la
nouvelle ligne > Insertion > Composant Web> Type de composant : Effets dyna-
miques > Choisir un effet : Texte dfilant > Terminer> Texte : Bienvenue tous les in-
ternautes > Comportement : O Alterner > Couleur darrire-plan : jaune > OK
Cliquer sur longlet Aperu en bas pour voir leffet

13. I NSRER DES BOUTONS DE NAVI GATI ON
Problme : Afin que les visiteurs de ma page puissent facilement naviguer, je souhaite placer des
boutons en haut de chaque page.
Solution : Revenir en affichage Cration > dans la page index.htm, placer une ligne vide entre le
texte dfilant et la ligne Vous tes sur le site
Placer le curseur sur la nouvelle ligne
Insertion> Navigation> Type de composant : Barres de lien > choisir un type de
barre : Barre bass sur la structure de navigation > Suivant > Suivant > choisir une
orientation avec les liens disposs horizontalement > Terminer > Liens hypertexte ajou-
ter la page : O Niveau enfant > OK > Ctrl+S
Dans la page sites.htm, insrer deux lignes vides aprs La maison Troisgros > placer le
curseur sur la dernire ligne > Insertion> Navigation> Type de composant : Barres de
lien > Choisir un type de barre : Barre bass sur la structure de navigation > Suivant
> Suivant > choisir une orientation avec les liens disposs horizontalement > Terminer >
Liens hypertexte ajouter la page : O Niveau parent > OK > centrer le bouton de navi-
gation > Ctrl+S
De mme, tout en haut de la page etranger.htm, insrer un bouton de retour vers laccueil
Ctrl+S > tester les liens
NB : Le graphisme des boutons comme celui des puces et des titres est li au thme choisi au
dpart (point 2)
FrontPage_2003.doc Y. CINOTTI
14. OUVRI R UN COMPTE
Problme : Jai construit trois pages. Je voudrais dsormais les mettre en ligne. Mais sur quel ser-
veur ?
NB : Dans cette fiche de formation, nous prendrons un exemple avec comme nom de site tice-
front et le mot de passe *****. Bien videmment, vous devez choisir un autre nom pour
votre futur site et un nom de code plus complexe.
Solution : Accder au site www.multimania.lycos.fr > cliquer sur Crer un site ! dans le bandeau
gauche
Dans la page 1 Votre compte, saisir un nom dutilisateur ( noter), un mot de passe ( retenir),
votre adresse email, une question pense-bte, la rponse celle-ci > cliquer sur le pav Con-
tinuer
Dans la page 2 Information supplmentaire, saisir votre date de naissance, votre sexe et refu-
sez de recevoir des offres et des informations personnalises et Lycos News > cocher E
Jaccepte les Conditions Gnrales dUtilisation > recopier le code scurit dans la zone de
saisie > cliquer sur le pav Inscription une page (en anglais) vous informe quun courriel
a t envoy ladresse email que vous aviez indique ltape 1 > cliquer sur le pav Re-
tour
Ouvrir votre messagerie > vous recevez plus ou moins rapidement un email de validation
avec un lien > cliquer sur ce lien
Dans la page Confirmation de votre inscription Lycos MultiMania Pages Perso, com-
plter le formulaire : saisir deux votre mot de passe > recopier le code de scurit indiqu
> Suivant
Cliquer sur le pav Commencer utiliser mon compte Multimania maintenant > saisir
votre mot de passe > Se connecter il faut attendre plus ou moins longtemps avant que
le compte soit cr.
Attendez de recevoir un email de confirmation douverture de votre compte avec les r-
frences pour publier votre site > imprimer cette page pour garder une trace > dans
lemail, cliquez sur le lien vers http://www.multimania.lycos.fr/myaccount/
Saisir votre identifiant et votre mot de passe > cliquer sur le pav Se connecter
dans la fentre suivante, dans bandeau gauche, rubriques Mon compte, cliquer sur Pa-
ramtres
Accder la page http://www.multimania.fr/build/frontpage/ > cliquer sur le pav Acti-
vate my FrontPage extensions now! lactivation des extensions FrontPage nest pas
immdiate ; il faut parfois attendre un peu.

15 . PUBLI ER UN SI TE
Problme : Comment transfrer les pages que jai cres vers mon compte ?
Solution :
Dans FrontPage, cliquer sur licne Publier le site Web , dans la barre doutils, en
haut, gauche > Emplacement du site distant : http://membres.lycos.fr/ticefront > OK >
Publier > Nom dutilisateur : ticefront > Mot de passe : ***** >OK > Publier
Ouvrir le navigateur (Internet Explorer) > accder ladresse membres.lycos.fr/ticefront
(ou plutt votre adresse, puisque vous tes en ligne dsormais !)

NB : Il est impratif que la page daccueil de votre site soit enregistre sous le nom index.html
pour que le site souvre en saisissant seulement ladresse fournie par Multimania.
Le nom des fichiers (pages Web et images) ne doit comporter ni majuscule, ni accent ni
ni espace entre les mots.
FrontPage_2003.doc Y. CINOTTI
DES GADGETS PROSCRI RE SUR VOS PAGES WEB
Pour faire joli ou original, certains concepteurs de site n'hsitent pas utiliser de nombreux
gadgets. Cependant, certains s'avrent tre de vrais handicaps une communication rapide et effi-
cace. Voici quelques piges viter.
Grce aux dernires technologies informatiques, il est de plus en plus frquent de voir les pages web s'orner de
fonctionnalits toutes plus tentantes les unes que les autres. Cependant, aux yeux des internautes, ces enrichis-
sements ne sont pas forcment les bienvenus, et dans d'autres cas, ils peuvent mme tre contre-productifs.
Utilisez le multimdia avec parcimonie
Si les sons et les vidos apportent une relle valeur ajoute, c'est parfait. Si ce n'est pas le cas, ils consomment
de la bande passante et ralentissent inutilement l'accs de votre serveur. Idem pour les images animes. L'ide
n'est pas de les supprimer compltement, loin de l, mais de les utiliser au mieux en pensant toujours au poids
global que pse une image.
vitez les images trop lourdes
Les gros fichiers graphiques ne donnent que peu de valeur ajoute une page alors qu'ils ralentissent considra-
blement le chargement. Rsultat : vos visiteurs s'impatientent et zappent. D'autant plus que pour la plupart des
internautes, la minute cote cher. Gardez donc en tte que la page idale ne doit pas dpasser un poids de 30 ko.
Ne perdez pas le cap
Il peut tre trs facile de se perdre dans un site web. Pour viter cet cueil vos visiteurs, laborez avec soin, et
l'avance, l'arborescence, la structure logique. Les rubriques doivent tre accessibles, les liens explicites, les
passerelles nombreuses mais sans excs. Pensez galement laisser une porte de sortie dans chacune de vos
pages, sans des retours obligs l'accueil ou au sommaire.
vitez les questionnaires contraignants
Les formulaires sont le moyen idal de vous crer des fichiers marketing qualifis. Nanmoins, usez-en avec
discernement. Lorsqu'ils sont trop longs et/ou mal formuls, ils constituent un frein supplmentaire pour vos vi-
siteurs. Inutile de pnaliser le surfeur qui ne souhaitait que faire votre connaissance. Proposez-lui l'alternative
d'un contact par e-mail.
Grez les liens
Croiser des liens avec d'autres sites (par exemple, celui de votre rgion touristique, du muse ou du restaurant
toil le plus proche...) est une excellente ide, condition que cela soit fait avec discernement. Attention aux
pages regorgeant de liens qui partent dans tous les sens. Si plusieurs liens hypertextes agrmentent votre site,
organisez-les de la faon la plus logique qui soit.
Synthtisez vos documents
Trop de texte nuit au texte. Souvenez-vous que les modes de lecture sur cran sont radicalement diffrents de
ceux du papier. Faites court. Synthtisez vos documents pour qu'ils tiennent sur une page d'cran, deux au
maximum. Si vous avez besoin de diffuser des crits plus denses, offrez aux internautes la possibilit de les r-
cuprer par FTP ou par mail.
N'oubliez pas le monde rel
Cela parat vident... Et pourtant, nombreux sont les sites qui ne mentionnent ni leur adresse postale, ni leur nu-
mro de tlphone ou fax. Le mieux est d'indiquer ces lments au tout dbut, sur la page d'accueil.
Soignez votre image
Le capital le plus important d'une entreprise est son image. Celle-ci est souvent travaille des annes durant. Il
serait stupide de la rduire nant cause d'un design totalement inappropri. Les rutilances d'Internet font trop
souvent oublier ce principe essentiel.
Et enfin, attention aux fautes
Votre texte va tre lu par de trs nombreux internautes. Ne les dcevez pas en mettant en ligne des textes bour-
rs de fautes d'orthographe. Votre image est en jeu ici encore. Et si vous dcidez de faire traduire vos textes
dans des langues trangres, faites appel un traducteur professionnel.

L'HTELLERIE n 2619 Spcial Internet 24 juin 1999