1

FrontPage 2003
I. Définition
C’est un logiciel Microsoft utilisé pour la création de sites Web. FrontPage
est facile d'utilisation et Wysiwyg (What You See Is What You Get) ce qui
veut dire que la présentation que vous faites à l'écran sera affichée telle
quelle sur le navigateur Internet.
Un site Internet est un ensemble de pages reliées entre elles par des liens
hypertextes, avec une page principale : la page d'index. C'est la page
d'entrée (ou d’accueil) du site. Cette page va servir de table de matière.
II. Lancement de FrontPage
 Menu démarrer
 Tous les programmes
 MS. office (MS. Frontpage, selon l’installation)

III. L’interface de FrontPage

L’interface de FrontPage ressemble assez à celle du Word 2003, on y

retrouve les éléments suivants :
 La barre de titre
 La barre des menus
 La barre d’outils
 La barre de mise en forme
 Une barre d'outils Affichage (au bas de la fenêtre)

Figure 1: L’interface de FrontPage2003

 2

IV. Démarrage de la création du site

Pour commencer la création du site il faut suivre les étapes

suivantes :

 Menu fichier
 Nouveau
 Site Web à une page
 Site Web normal
 OK

Dans la liste des dossiers, on retrouve 2 répertoires créés

automatiquement:
 Private (qui contiendra (entre autre) les résultats des formulaires et
autres parties privées)
 Images pour stocker les images.
Le fichier index.htm est la page d‘accueil du site, schématisée par la
petite maison.

On peut créer autant de pages qu’on veut en cliquant sur fichier /

nouveau/page ou en cliquant sur l’icône nouvelle page sur la barre d’outils
ou sur le volet affichant l’arborescence du site sur la gauche.
 3

V. Application d’un thème

Pour appliquer un thème, double-cliquer sur la page index pour l’ouvrir
puis aller :
 Menu Format
 Thème
Puis choisir le thème qui correspond au mieux avec le site.

VI. Insertion de texte

Le texte s’écrit normalement comme dans Word. Pour insérer du texte
comme par exemple le titre du site, il faut d’abord double-cliquer sur la
page d’accueil (Index.html ou .htm) et insérer le texte.
 4

Nous remarquons au bas de la feuille quatre onglets représentant les

différents modes d’affichage de la page du site :

 Création : c’est ce mode qu’on utilise pour éditer notre page.

 Code : affiche le code HTML généré de la page.
 Fractionné : affiche simultanément l’édition et le code.
 Aperçu : affiche la page tel qu’elle sera visualisée par le
navigateur.
 5

VII. Insertion d’un tableau

Le tableau permet de présenter les informations de type tableau, mais

aussi beaucoup d’autres types d’information ou l’ossature du tableau n’est
pas forcement visible. C’est un élément excessivement important pour le
texte, l’image et la mise en page en général permettant de compenser
partiellement les faiblesses de mise en page du langage HTML. Pour
cela suivre les étapes:
 Menu Tableau
 Insérer tableau
 On choisit les propriétés du tableau

Figure 2: Les propriétés du tableau

 6

Figure 3: L'insertion d'un tableau

 7

VIII. Insertion d’hyperliens

Pour insérer un lien hypertexte qui va pointer par exemple sur une
nouvelle page, insérer d’abord le texte (si ce n’est déjà fait), on peut
utiliser un bouton en suivant les étapes :

 Insertion
 Bouton interactif (introduire le texte et choisir le bouton : « Cours »
dans notre exemple)
 Sélectionner le texte
 Insertion
 Lien hypertexte
 Choisir Créer un document et nommer la nouvelle page
 Cliquer sur OK

Pour insérer un texte animé (défilant ou clignotant) :

o Menu Insertion
o Composant Web/ texte défilant.

Pour insérer une adresse email :

 Insertion
 Lien hypertexte
 Choisir Adresse de messagerie
 Introduire l’adresse email et le texte à afficher.
 8

IX. Insertion d’images

Dans un site Internet peu de formats d’images peuvent être inclus, il faut
éviter principalement les formats bitmap, Utiliser donc de préférence les
formats JPEG et GIF :

􀂾 Les fichiers JPEG (ou JPG) qui sont souvent utilisées pour les photos

􀂾 Les fichiers GIF pour les images les logos, cartes… les images animées
et les images nécessitant de la transparence.

Pour insérer une image :

Menu Insertion
Images – À partir fichier
 9

Figure 4: Insertion d'images

 10

X. Les Formulaires

Un formulaire permet de recueillir des informations introduites par

l’utilisateur d’un site, comme par exemple les formulaires qu’on remplit
pour créer un compte de messagerie électronique.

Pour insérer un formulaire aller :

Menu Insertion
Formulaire

Cette partie n'insère que la zone envoi et remise à zéro. Pour insérer
d'autres possibilités, il faut simplement insérer d'autres composants à
l'intérieur de la zone.

Insertion d’une zone de texte

Par exemple pour le nom et le prénom on utilise une zone de texte, pour
cela on va :
 Insertion
 Formulaire
 Zone de texte
 On écrit le texte devant la zone.

Insertion d’une zone de texte

Par exemple pour un message insérer un espace de texte

 Insertion
 Formulaire
 Espace de texte
 On écrit le texte devant la zone.

Insertion d’une liste déroulante :

Par exemple pour choisir un élément dans une liste

 Insertion
 Formulaire
 Zone de liste déroulante
 11

 On clique avec le bouton droit sur la zone et on choisit Propriétés du

champ de formulaire pour écrire les valeurs.

Insertion d’une case à cocher

 Insertion
 Formulaire
 Case à cocher

Insertion d’une case à cocher

 Insertion
 Formulaire
 Case d’option

Avant de publier le site on peut l’afficher avec un navigateur tel que

Internet Explorer, FireFox ou Opéra.

XI. Publication du site

L’hébergement
Avant de mettre le site en ligne il faut choisir un hébergeur et un nom du
domaine (.Com, .Net, .Dz..).
L’hébergement peut être payant ou gratuit (en général imposant des
publicités). L’hébergeur peut éventuellement permettre :
 La mise en ligne du site
 L’acquisition d’un nom du domaine
 12

 La création d’adresse électronique spécifique

 Les statistiques de visite du site
L’hébergeur du site doit fournir des paramètres qui permettront la
publication du site.

XII. Bibliographie

1. Création de site avec FrontPage

(ftp://ftp2.glenan.fr/glenan/FrontPage/Site_FrontPage_XP_010.pdf )
(http://www.glenan.fr/,
2. http://www.crip.com/formation_informatique/plan_de_cours.asp?
cours=239
3. http://www.microsoft.com/canada/smallbiz/french/products/howto/bui
ldwebsitefrontpage.mspx
4. http://office.microsoft.com/training/