Frontpage - Université de Sherbrooke

Carrefour de l’information
Université de Sherbrooke
Création de sites Web à l’aide de
Microsoft FrontPage 2002
Par :
Josée Martin
Édition revue et augmentée par Marc-André Dulude
Sherbrooke
Automne 2005
Table des matières
Introduction à FrontPage 2002 ....................................................................................... 1
À quoi sert FrontPage? ............................................................................................... 1
Qu’est-ce que le HTML? ............................................................................................ 1
Avant de commencer ........................................................................................................ 2
Démarrer FrontPage........................................................................................................ 3
Les modes d’affichage ................................................................................................. 3
Les onglets Normal, HTML et Aperçu ...................................................................... 4
Créer un nouveau site Web .............................................................................................. 6
Utiliser un modèle ou un assistant?............................................................................ 7
Qu’est-ce que le fichier index.html?........................................................................... 7
Régler les propriétés d’une page ...................................................................................... 9
Insérer un tableau .......................................................................................................... 11
Modifier du texte ............................................................................................................ 12
Insérer une image .......................................................................................................... 14
Insérer des liens hypertextes .......................................................................................... 16
Créer un lien vers une page de votre site................................................................. 16
Lier une page externe................................................................................................ 17
Quelques petits trucs pour réussir vos sites Web ........................................................... 19
Quelques définitions à retenir........................................................................................ 20
Qu’est-ce qu’un logiciel FTP? .................................................................................. 20
Qu’est-ce qu’un serveur?.......................................................................................... 20
Qu’est-ce que le Javascript? ..................................................................................... 20
Qu’est-ce que le JAVA? ............................................................................................ 21
1
Introduction à FrontPage 2002
À quoi sert FrontPage?
Microsoft FrontPage est un éditeur de pages Web qui permet de créer et de gérer
des sites Internet ou Intranet facilement, et ce, sans recourir à la programmation.
Ce logiciel dans sa forme et dans ses fonctions ressemble étrangement à un
logiciel de traitement de texte. Toutefois, il ne faut pas s’y méprendre, car on ne
peut traiter le texte comme on le ferait avec un logiciel dédié.
Qu’est-ce que le HTML?
On se rappellera que le rôle de l’éditeur, tel FrontPage, est de coder en langage
HTML (Hyper Text Markup Language) ce que l’on veut insérer dans nos pages
Web. En résumé, on pourrait dire que le HTML, qui tire son origine du langage
SGML (Standard Generalized Markup Language), est un type particulier
d’annotation destiné au WWW (World Wide Web) et qui correspond à une
collection de styles reconnaissables par les navigateurs. Les navigateurs, dont
Internet Explorer, sont des logiciels qui interprètent à l’écran les commandes
HTML contenues dans un document accessible sur le WWW. Bref, des logiciels
tels que Internet Explorer, Mozilla Firefox et Apple Safari, convertissent les codes
HTML en texte et en graphique de pages Web, afin que le fureteur les affiche à
l’écran.
— Microsoft FrontPage 2002 —
2
Avant de commencer
Avant de commencer à créer votre site Web, il importe, dans un premier temps,
que vous planifiiez votre projet. Tout bon site Web possède une structure. La
plus simple correspond à une hiérarchisation des thèmes, qui sont divisés par
page. Une bonne façon de faire serait de dessiner, sur une feuille de papier, la
page portail ainsi que les pages annexes.
Fig. 1.
— Microsoft FrontPage 2002 —
3
Démarrer FrontPage
Maintenant, vous êtes prêts à démarrer le logiciel FrontPage. Pour ce faire,
cliquez sur Démarrer / Programme / Microsoft / FrontPage.
Les modes d’affichage
Par défaut, le logiciel s'ouvre en mode d'affichage Page (visible dans le cadre
vertical situé à gauche de l'écran).
— Microsoft FrontPage 2002 —
4
Vous pouvez également remarquer qu’il existe d’autres types d’affichage dont :
Modes
Page
Dossiers
Rapports
Description
Présente le document en mode création.
Présente les dossiers du site Web dans
la fenêtre de droite.
Affiche un résumé du site au niveau
des dates de création et des détails de
certains fichiers, l'état des liens, etc.
Navigation
Affiche la structure du site Web.
Liens hypertextes
Affiche les liens fonctionnels entre les
différentes pages.
Tâches
Affiche les tâches ayant été attribuées à
des personnes du groupe de travail.
Les onglets Normal, HTML et Aperçu
Lorsque vous êtes en mode d’affichage Page, trois onglets s’affichent au bas de
l'écran : Normal, HTML et Aperçu.
Par défaut, le curseur clignote dans la page de l'onglet Normal. Le mode Normal
permet de saisir, modifier et mettre en forme des informations dans la page Web,
et ce, en représentant les éléments graphiques de la page en construction.
— Microsoft FrontPage 2002 —
5
L'onglet HTML nous affiche le contenu de la page Web en langage balisé HTML.
Au fur et à mesure que vous entrez des informations en mode Normal, FrontPage
génère automatiquement le code HTML correspondant. C'est également dans ce
mode que vous pouvez apporter directement des modifications aux codes
HTML. Celui-ci se compose de texte et d’instructions spéciales, appelées balises.
C’est en fait ce qui est affiché en bleu. Le texte saisi par l'utilisateur s'affiche, pour
sa part, en noir.
L'onglet Aperçu nous présente la page Web telle qu'elle sera affichée par le
navigateur. Ce mode joue à peu près le même rôle que l'aperçu avant impression
de Word. On aura donc avantage à visualiser souvent l'apparence de notre page,
au fur et à mesure des ajouts et des modifications.
— Microsoft FrontPage 2002 —
6
Créer un nouveau site Web
Pour créer votre site, cliquez sur le bouton Nouvelle page situé dans la barre
d’outils Standard. Cliquez ensuite sur Web afin de créer un nouveau site Web.
La boîte de dialogue Modèles du site Web apparaît ensuite.
— Microsoft FrontPage 2002 —
7
Utiliser un modèle ou un assistant?
Vous avez alors le choix d’utiliser un modèle ou un assistant. Le modèle prévoit
des zones dans lesquelles entrer vos informations personnelles alors que
l’assistant pose une série de questions et crée un site Web en fonction de vos
réponses. Ces deux outils définissent alors la mise en pages ainsi que le style de
votre site.
Toutefois, à l’aide de certains modèles, il est également possible de créer un site
Web vide, c’est-à-dire qui ne comporte aucun texte et aucune image. Ceci vous
donne alors plus de souplesse et de contrôle pour la création de votre site. Pour
ce faire, vous avez alors le choix entre le modèle Site Web normal et le modèle Site
Web vide. Le modèle Site Web normal crée un site composé d’une seule page vierge
tandis que le modèle Site Web vide crée un site Web qui ne renferme aucune page,
ce qui vous permet d’ajouter celles dont vous avez besoin.
Qu’est-ce que le fichier index.html?
Que vous vous serviez d’un modèle ou d’un assistant pour créer votre site Web,
à l’exception du modèle site Web vide, le fichier index.html apparaît dans la liste
des dossiers. Mais à quoi peut bien servir ce fichier?
— Microsoft FrontPage 2002 —
8
Le fichier index.html est très important. C'est votre fichier par défaut qui se
trouvera à la racine de votre site Web (l'équivalent de C: pour votre disque dur).
Également, c’est ce fichier qui s'affiche par défaut en l'absence de spécification
d'un nom de fichier. En effet, lorsque vous accédez à un site, vous tapez son
adresse comme suit : http://www.monsite.com. En réalité, le fichier qui est
ouvert lorsque vous appelez cette adresse est index.html, c'est-à-dire
http://www.monsite.com/index.html. Vous ne voyez pas le fichier index.html
dans la barre d'adresses, car c'est le fichier pris par défaut par votre serveur
d'hébergement. Souvent, c’est la page d’accueil qui porte le nom index.html.
À vérifier
Selon l’hébergement, ce fichier par défaut peut différer. Il peut porter les noms
suivants :
•
index.htm
•
index.html
•
default.htm (serveurs anglophones)
•
default.html (serveurs anglophones)
Lorsque vous mettez en ligne votre site en téléversant vos fichiers sur le serveur,
vous devez savoir qu’il est très important de ne pas oublier de téléverser le
fichier index.html. En effet, l'absence du fichier index.html permet d'accéder à la
liste des fichiers contenus dans un site et donc, de les copier!
— Microsoft FrontPage 2002 —
9
Régler les propriétés d’une page
Afin de visualiser les propriétés de votre page Web, cliquez sur le côté droit de la
souris. Un menu contextuel apparaît. Sélectionnez ensuite Propriétés de la page.
La boîte de dialogue Propriétés de la page s’ouvre, vous permettant ainsi de régler
les propriétés de votre page.
— Microsoft FrontPage 2002 —
10
N’oubliez pas d’enregistrer votre projet! Pour ce faire, cliquez sur Fichier /
Enregistrer sous… Il est également très important que tous les fichiers que vous
allez utiliser pour la création de votre site Web soient enregistrés dans le même
répertoire.
On recommande de nommer la page d’accueil, ou la page portail, index.html.
Ensuite, on nomme les autres pages d'un nom significatif. Toutefois, vous devrez
respecter certaines règles lorsque vous écrirez vos noms de fichiers, spécialement
si vous utilisez un serveur de type Unix :
1.
Pas d’accents
2.
Pas d’espaces
3.
Pas de majuscules
4.
Pas de caractères spéciaux sauf _
— Microsoft FrontPage 2002 —
11
Insérer un tableau
Pour faciliter votre travail, vous pouvez utiliser des tableaux. Ces derniers sont
faciles à manipuler en plus de vous permettre de disposer élégamment les
données d’une page Web, comme des informations sur des produits ou un
emploi du temps. De plus, vous pouvez recourir aux tableaux pour présenter des
informations en colonnes à la manière des journaux. Ils sont également utiles
pour contrôler le positionnement du texte et des images dans une page Web.
Pour insérer un tableau, cliquez sur Tableau / Insérer / Tableau…
La boîte de dialogue Insérer un tableau apparaît. Elle vous permet ainsi de régler
les différents paramètres de votre tableau.
— Microsoft FrontPage 2002 —
12
Modifier du texte
Afin d’agrémenter vos pages Web, vous pouvez, à l’aide des barres d’outils Mise
en forme et Standard :
1. Mettre un texte en gras, en italique ou le souligner afin de faire ressortir des
informations importantes;
2. Améliorer l’apparence d’une page Web en variant l’alignement de son texte;
3. Changer la police d’un texte;
4. Agrandir ou réduire le texte d’une page Web;
5. Attirer l’attention sur les titres ou sur une information importante en
changeant la couleur du texte;
6. Faire ressortir des paragraphes en mettant un texte en retrait;
7. Donner à un passage de texte exactement la même apparence que celle d’un
autre en copiant sa mise en forme.
1
2
6
3
4
5
7
— Microsoft FrontPage 2002 —
13
Si vous changez la police d’un texte, choisissez des polices courantes, car seules
les polices présentes sur l’ordinateur de l’internaute peuvent être affichées. Il
existe sept polices dites « standardisées » dont Arial, Arial Black, Comic Sans
Ms, Courrier New, Impact, Times New Roman et Verdana.
— Microsoft FrontPage 2002 —
14
Insérer une image
Afin d’améliorer l’apparence de vos pages Web ou tout simplement pour
illustrer un concept, vous pouvez ajouter des images.
Pour ce faire, cliquez, dans votre page Web, à l’endroit où devra figurer votre
image. Ensuite, dans la barre d’outils Standard, cliquez sur le bouton Insérer une
image depuis un fichier.
La boîte de dialogue Image apparaît.
— Microsoft FrontPage 2002 —
15
Afin de changer l’apparence de votre image, vous pouvez vous servir de la barre
d’outils Images.
— Microsoft FrontPage 2002 —
16
Insérer des liens hypertextes
Vous devez savoir qu’il existe deux types d’hyperliens : les hyperliens à adresse
absolue et les hyperliens à adresse relative. La distinction entre ces deux types
d’hyperliens se fait sur la manière dont l’adresse vers un fichier HTML est saisie.
Par exemple, un lien absolu est constitué du chemin complet vers un fichier,
tandis qu’un lien relatif ne comprend que les noms du fichier et du dossier qui le
contient. Vous devez donc utiliser un chemin absolu quand vous créez un lien
vers une page ou un fichier qui ne se trouve pas dans votre site (on parle alors de
lien externe). Quant aux chemins relatifs, ils sont recommandés pour lier des
fichiers au sein du même site.
Créer un lien vers une page de votre site
Pour commencer, passez en mode Page en cliquant sur l’icône correspondant
dans la barre d’affichage.
Sélectionnez le texte qui doit servir d’hyperlien, puis cliquez sur Insertion / Lien
hypertexte.
Dans la boîte de dialogue Insérer un lien hypertexte, le premier bouton de la
colonne Lien hypertexte, soit Fichier ou page Web existant(e), est activé. Localisez la
page de votre site à lier avec les boutons de la section Regardez dans. Si la page
figure dans la fenêtre Dossier en cours, cliquez sur le nom du fichier désiré, ce qui
le fera apparaître dans le champ Adresse.
— Microsoft FrontPage 2002 —
17
Cliquez sur Ok pour fermer la boîte de dialogue.
Lier une page externe
Passez en mode Page en cliquant sur l’icône correspondant dans la barre
d’affichage.
Sélectionnez le texte qui doit servir d’hyperlien.
Cliquez sur Insertion / Lien hypertexte.
Dans la boîte de dialogue Insérer un lien hypertexte, le texte sélectionné apparaît
dans le champ Texte à afficher où vous pouvez le modifier.
Sélectionnez le premier bouton de la colonne Lien hypertexte, soit le bouton Fichier
ou page Web existant(e).
— Microsoft FrontPage 2002 —
18
Si vous connaissez l’URL du site, tapez-la directement dans le champ Adresse et
cliquez sur OK pour fermer la boîte de dialogue. Sinon, cliquez sur le bouton
Navigateur pour accéder à la page.
Avec votre navigateur, allez jusqu’à la page externe que vous voulez lier.
Une fois la page atteinte, revenez à la boîte de dialogue Insérer un lien hypertexte.
L’URL de cette page doit apparaître dans le champ Adresse. Cliquez sur OK pour
fermer la boîte de dialogue.
— Microsoft FrontPage 2002 —
19
Quelques petits trucs pour réussir vos sites Web
1. L’important, c’est le contenu, le message que vous voulez faire passer et
l’information que vous voulez livrer à l’internaute.
2. Attention à ne pas trop détourner l’attention des lecteurs avec des animations
ou des couleurs criardes! Pensez à la lisibilité du texte. L’idéal est de se limiter
à 3 ou 4 couleurs et à 2 ou 3 polices de caractères.
3. Il importe que le visiteur puisse trouver rapidement ce qu’il cherche et
revenir tout aussi rapidement au sommaire.
4. Évitez le surcharge des pages en y incluant trop d’images, d’animations, etc.
Des pages légères se chargeront beaucoup plus rapidement, ce qui risque de
moins exaspérer les internautes ou de les faire fuir!
5. Attention aux sites construits en cadres, puisqu’ils sont très sensibles aux
différences de résolution à l’affichage. On risque d’avoir des barres de
défilement un peu partout sur la page en 640x480, alors que c’est impeccable
en 800x600. Il est donc important de faire des tests.
6. N’oubliez pas de tester votre site une fois qu’il a été téléchargé afin de vous
assurer que tout fonctionne correctement, dont la fonctionnalité des liens, et
que la vitesse est acceptable.
— Microsoft FrontPage 2002 —
20
Quelques définitions à retenir
Qu’est-ce qu’un logiciel FTP?
« FTP » signifie File Transfert Protocole. C'est à l'aide de logiciels qui utilisent ce
protocole, que vous enverrez vos pages vers votre serveur. Il se présente souvent
comme un explorateur de fichiers. Des logiciels tels que FileZilla ou WS FTP LE
sont de bons exemples.
Qu’est-ce qu’un serveur?
C'est un ordinateur dont la fonction principale est de vous envoyer des données
(pages, images, programmes, etc.). C’est d’ailleurs ce type d’ordinateur qui va
« héberger » votre site Web.
Qu’est-ce que le Javascript?
Le Javascript a été créé par Netscape pour développer des applications Internet
et, par la même occasion, pour étendre les possibilités du HTML. Il s'agit d'un
langage léger et orienté objet, permettant d'écrire des scripts. Il est très souvent
utilisé pour ajouter de petites fonctionnalités aux sites Web.
— Microsoft FrontPage 2002 —
21
Attention! Il ne faut pas confondre JAVA et Javascript!
Qu’est-ce que le JAVA?
Le JAVA est un langage de programmation complet développé par SUN et non
un langage de script comme Javascript. Il est dérivé du C++ en plus d’être
exécutable sous diverses plates-formes telles que Windows et Macintosh. JAVA
est devenu un des langages incontournables du Web. Les applets, très souvent
rencontrés sur Internet, sont là pour témoigner de la puissance de ce langage.
Voici donc les différences entre le langage JAVA et le langage Javascript :
JAVA
Code non intégré dans la page HTML
(applet).
Code source compilé avant son
exécution.
Langage de programmation complexe
mais illimité (presque).
Pas d'accès aux objets du navigateur.
Javascript
Code intégré dans la page HTML.
Code interprété par le navigateur au
moment de l'exécution.
Code de programmation simple mais
limité.
Accès aux objets du navigateur.
— Microsoft FrontPage 2002 —