L`éditeur FrontPage Express

Conception de pages HTML sous FrontPage Express
Le logiciel utilisé sera l'éditeur de Frontpage Express livré gratuitement avec Internet
Explorer 4 et 5, il possède un tronc commun de fonctionnalités partagées par la plupart
des éditeurs du marché (freeware et shareware compris).
•
Voici les fonctionnalités offertes par FrontPage Express :
- Création et ouverture de pages HTML
- Création et possibilité de test des liens hypertexte
- Saisie et édition de texte
- Création et édition de tableaux
- Utilisation de Webbot
- Intégration de composants Active/X, Java et Plug-ins.
•
Voici ce qui n'est pas intégré dans FrontPage Express :
- Copier ou Glisser/Déplacer, insérer des fichiers Office97
- Prévisualisation avec afficheur
- Les feuilles de style, "les Dynamic HTML"
- Les fenêtres (frames, encore appelées cadres)
- La gestion des zones réactives d’une image.
La barre d’outils de FpExpress
Alignement des paragraphes
taille des caractères
Polices
Numéros et puces
Format et couleurs
des caractères
indentation des
paragraphes
Styles
Ouvrir une page existante
Outils formulaires
Nouvelle page
Afficher tous les caractères
Insérer un tableau
Insérer une image
IUFM de Reims - J. Bresson - Conception de pages html sous
Insérer un hyperlien
page /6
Saisie et mise en forme du corps du document
• Sur une nouvelle page vierge, le texte est saisi naturellement comme on le ferait sous un
traitement de texte.
• Lors de la saisie de texte, c'est la police par défaut de l'éditeur qui est utilisée (modifiable par la
commande Options de police du menu Outils).
• Il faut utiliser des polices classiques (elles doivent pouvoir être affichée par le navigateur de
l'utilisateur), en général Arial et Times News Roman. Attention, les polices fantaisies ne sont pas
forcément présentes sur les postes de travail de la majorité des "internautes", c'est alors la police
par défaut du navigateur qui est mobilisée.
Remarque :Si l'on souhaite absolument un graphisme particulier, il conviendra soit d'intervenir
dans le code HTML pour indiquer après la déclaration de police désirée, le nom d'une police de
remplacement (avec le point virgule comme séparateur (exemple : <p><font face="franklin gothic
demi cond";face="arial">texte</font></p>), soit de procéder à une copie partielle de l'écran
contenant le texte et de la coller comme une image dans la page HTML.
• Par curiosité, il est possible de regarder le code Html généré
c'est dans ce code qu'il sera possible par exemple de rajouter une
balise pour préciser les mots-clés sur lesquels certains moteurs de
recherche pourront indexer la page (par exemple : <META
NAME="keywords" CONTENT="iufm Reims organigramme
formation professeurs">)
Les styles
Ces styles sont des styles propre au langage Html standard.
• Il existe 6 styles de titres, de T1 à T6.
Le style T4 équivaut à du Normal en corps avec l'attribut "Gras".
• Les espaces entre les paragraphes sont importants, on pourra remplacer
certaines marques de paragraphes par des retours à la ligne
(<Maj>+<Entrée>)
• Attention, avec un traitement de texte on peut être tenté d’insérer plusieurs
marques de paragraphes vides pour augmenter l’espacement entre les
paragraphes. Avec de nombreux autres éditeurs, l'insertion de plusieurs
paragraphes vides n'est pas prise en compte au niveau du code HTML.
Il convient alors d'insérer avant la marque de paragraphe un espace
insécable (en général avec la combinaison de touches :
<Ctrl>+<Maj>+<Espace>).
• On citera également un style souvent utilisé « liste à puces » qui permet de souligner une
énumération.
Les tableaux
Les tableaux permettent de positionner parfaitement des blocs de textes ou des images.
• Insertion d'un tableau avec l'icône
de la barre d'outils. (On dessine les tableau
en gardant le doigt appuyé sur le bouton gauche de la souris : ici un tableau de 2
lignes et deux colonnes)
IUFM de Reims - J. Bresson - Conception de pages html sous FpExpress - Fiche rapide
page 2/6
• Un « clic droit » sur un tableau permet d’accéder au menu
contextuel permettant de modifier les propriétés du tableau ou d'une
cellule ou groupe de cellules sélectionnées ou le tableau lui-même.
• La taille d'un tableau peut être spécifiée en
pourcentage de la largeur de la fenêtre
(d'affichage du navigateur utilisé pour regarder
la page) ou être exprimée sous la forme d'une
valeur déterminée de pixels. En spécifiant la
largeur du tableau en pixels, on évite la
recomposition du contenu des cellules en
fonction de la largeur de la fenêtre réservée au
navigateur de l'utilisateur final.
• La bordure peut ne pas être visible si on lui affecte une taille 0
(ce qui est pratique pour aligner des « pavés » de texte sans que
le quadrillage du tableau apparaisse.
Remarques : Lorsque l’on souhaite façonner un tableau avec beaucoup de particularisme il est
possible de jouer avec les commande « fractionner cellule » ou « fusionner cellules » du menu
tableau. Par ailleurs, un tableau peut être inséré dans une cellule d’un autre tableau…
Les images
• L'outil
permet l'insertion d'une image.
• Par défaut, lorsqu'une image est insérée dans du texte elle est placée sur la ligne de base du
paragraphe, comme un caractère. Les options du menu contextuel (par un clic droit sur l’image)
"propriétés de l'image" permettent certains alignements horizontaux ou verticaux, mais le
positionnement précis nécessite l'utilisation d'un tableau.
Remarque : dans la version Express de FrontPage, à la différence de la version complète, on ne
dispose d’aucun outil pour modifier l’image (hormis la possibilité de jouer sur la taille et le format
d’enregistrement Gif ou Jpg)
Attention : A la différence d’un fichier Word, lorsqu’une image est insérée, elle n’est pas insérée
dans le fichier Html généré. Elle a une existence propre sur le disque dur.
Ma_page.html
Img1.gi
f
Img2.gif
Ma_page.doc
Page Html ne
contenant que
du texte et un
lien vers les
images qui sont
stockées
séparément.
Une page Html ne contient que du texte, ce dernier contient des « appel » à des images dont les
fichiers sont distincts de la page, les balises Html assurant leur positionnement au moment de
l’affichage dans un navigateur.
IUFM de Reims - J. Bresson - Conception de pages html sous FpExpress - Fiche rapide
page 3/6
Par exemple voici le code Html qui décrit le placement de deux images :
<p><img src="file:///C:/Gifs%20animées/ani_cat.gif" width="100"
height="60"><img src="aniheart.gif" width="40" height="40"></p>
L’image ani_cat.gif est située dans le dossier Gifs animés du disque dur C, le chemin est précisé dans
le code de la page html. Lorsque la page sera stockée sur une machine hôte (un serveur distant), au
moment de l’affichage de la page, l’image en question sera recherchée dans le répertoire
C:/Gifs%20animées/. Aura-t-on pris soin de publier également ces images dans un répertoire de
même nom sur le serveur ? Si oui tout se passera bien, sinon l’image ne sera pas trouvée et donc pas
affichée.
L’image aniheart.gif quant à elle est recherchée dans le répertoire courant, elle sera trouvée sans
problème si tous les fichiers du répertoire courant sont copiés vers le serveur.
Conclusion : Il convient de créer un répertoire qui contiendra tous les
éléments du sites (images, sons, pages html) pour être sur de ne pas
en oublier au moment du transfert vers le site d’hébergement.
Si l’on souhaite travailler plus proprement encore on pourra créer un
répertoire qui contiendra à la fois les pages et un autre répertoire qui
contiendra lui-même les images.
C’est l’ensemble du répertoire « mon site » qui sera transféré, le texte
des pages contiendra alors des chemins relatifs pour indiquer
l’emplacement des images dans le sous répertoire
c:\mon_site
page1.htm
page2.htm
page3.htm
c:\monsite\mes_images
img1.gif
img2.jpg
img3.jpg
img4.gi
L'arrière-plan d'une page
• Pour attribuer un arrière-plan à une page, utiliser la commande des propriétés de la page (clic
droit dans le corps d'une page ou commande propriétés du menu fichier).
• L’onglet arrière plan permet d’ajouter un fond à la page, fond qui peut être simplement de couleur
unie ou constitué d'une image reproduite autant de fois que nécessaire pour couvrir le fond de
l'écran
• Attention, (et bien que les commandes présentes dans cette boîte de dialogue y invitent), sauf
pour respecter une charte graphique contraignante, il n’est pas souhaitable de modifier les
couleurs par défaut des liens présents dans une page, ils sont plus facilement repérables s’ils
conservent leurs couleurs standard.
IUFM de Reims - J. Bresson - Conception de pages html sous FpExpress - Fiche rapide
page 4/6
Identifier la page
Le titre de la page figurera dans la zone de titre du navigateur, alors que le nom de fichier
permet de désigner la page lors de la mise en place des liens voire de la manipuler avec
l'explorateur Windows.
• Donner un titre à la page (menu fichier/propriétés ou clic droit pour avoir le menu contextuel). Ce
nom de page est important puisque de nombreux moteurs de recherche permettent une recherche
de pages sur leurs titres.
• Enregistrer la page (Fichier / enregistrer ) et donner un nom au fichier (attention, rester sobre
sur le nom du fichier 8 caractères sans espace, le tout en minuscules).
• Noter la conversion automatique des images BMP en GIF ou JPEG lors de l'enregistrement (elles
sont moins coûteuses en place).
Mise en place de liens pointant vers d'autres pages
• Saisir le texte d'un lien, le sélectionner puis activer l’outil de création/édition de lien
• Pour lier vers des pages existante, FrontPage Express impose que
les pages soient ouvertes dans l’éditeur.
• Prendre garde à ce que l'adresse (du document) choisie ne prenne
pas en compte le chemin complet pour conduire à la page, mais
simplement un chemin partiel si nécessaire pour atteindre un sousrépertoire du répertoire courant
• Pour lier vers un fichier ou une adresse électronique on choisira
le type de lien adapté dans la liste déroulante (file : pour un
fichier, mailto : pour provoquer l’ouverture du logiciel de
messagerie).
• Tester les liens dans le navigateur (et/ou dans l'éditeur en appuyant sur le touche <Ctrl> le
pointeur de la souris change de forme lorsqu’il survole un lien, il permet de suivre le lien en
cliquant dessus).
Remarques :
Dans la mesure où les liens apparaissent soulignés, le soulignement de texte dans le seul but d'attirer
l'attention du lecteur sera exclu.
On évitera de modifier les couleurs des liens car les couleurs traditionnelles facilitent l'identification
des liens par le lecteur qui consulte les pages (hormis, le cas où une charte graphique a été créée et
soumise à des tests).
• Liens depuis une image : l'image étant sélectionnée, il suffit de cliquer sur le bouton
renseigner la boîte de dialogue de la même manière que précédemment.
IUFM de Reims - J. Bresson - Conception de pages html sous FpExpress - Fiche rapide
et de
page 5/6
Mise en place de liens internes à une page
Ces hyperliens pointent vers une autre zone de la même page (cible sous Gold de Netscape, Signet
sous Word et Frontpage)
1ère méthode
1° Insertion d'un signet sur
l'emplacement de la page à atteindre :
menu Edition-->Commande Signet
Attention, une image ne peut constituer
un signet, il conviendra de mettre un
espace adjacent pour pouvoir mettre en
place le signet.
2°: Définition de la destination du lien
commande Lien Hypertexte du menu
Insertion
(Choix de la page à atteindre et du signet
sur la page)
2ème méthode
Sans avoir préalablement créé des
signet, il est possible de générer un
hyperlien et son signet associé en une
seule manipulation.
1° Sélectionner les mots devant
constituer le signet
2° Faire un <clic droit> et glisser le
pointeur de souris jusqu'à l'endroit
souhaiter pour la mise en place de
l'hyperlien
3° Relâcher le bouton droit et choisir
"Lier ici"
Le signet et le texte du liens
sont créés automatiquement.
Attention, cette méthode ne fonctionne
qu'à l'intérieur d'une même page.
Transfert des pages vers un site d'hébergement
• L'ensemble des pages créées (avec les liens entre elles) constitue un site stocké sur le disque dur
d'un micro-ordinateur, accessible depuis n'importe quel navigateur depuis un autre microordinateur du même réseau local, mais il ne peut être vu par un "internaute", que s'il est stocké sur
un ordinateur relié en permanence à Internet ; en général, chez un fournisseur d'accès qui offre un
hébergement gratuit de quelques méga-octets.
• Il convient alors de transférer ces pages vers le site d'hébergement avec un logiciel FTP (File
Transfert Protocole) que l'on trouve en freeware ex : Ftpexpert.
Attention : Il faut lire avec attention les consignes fournies par votre site d’hébergement tant pour le login de connexion (tantôt il faut
préciser le chemin exact dans lequel on souhaite se rendre et qui correspond à l’espace qui vous est réservé sur le disque de la
machine hôte, tantôt il ne faut rien préciser (exemple chez Wanadoo il convient de s’adresser à la machine perso-ftp.wanadoo.fr sans
préciser son propre répertoire, c’est l’identifiant (nom de messagerie) et le mot de passe (identifiant de messagerie pour les pages
perso de Wanadoo) qui permet à la machine hôte d’identifier l’utilisateur et donc de proposer en lecture écriture le seul répertoire
autorisé. Par ailleurs, le fournisseur d’espace d’hébergement vous invite à identifier d’une manière précise votre page d’accueil pour
que le serveur puisse la reconnaître facilement et la proposer par défaut (suivant les cas il faudra la nommer index.htm ou .html ou
encore .shtml voire default.htm).
Et pour ensuite être lu… il faudra vous faire référencer en vous signalant aux différents moteurs de recherche…
IUFM de Reims - J. Bresson - Conception de pages html sous FpExpress - Fiche rapide
page 6/6