Création d'un site avec FrontPage

Création d'un site

L'interface de FrontPage

L'interface de FrontPage ressemble à celle de Word. Elle comprend :

• Une barre de menu
• Une barre d'outils Standard
• Une barre d’outils Mise en forme
• Une barre d'outils Affichage (sur le côté gauche)

La barre d'affichage est importante, surtout en mode « Navigation ». Elle permet de créer et de gérer la structure de navigation.

Un dossier pour le site

En tout premier lieu dans la création d'un site, et quel que soit le logiciel, vous devez créer un dossier qui contiendra l'ensemble de vos données : pages Internet (HTML) et médias (images, sons...).
Il est impératif que l'ensemble de votre site soit dans le dossier (ou accessible sur un site Internet).
Si vous avez une page ou un média en-dehors du dossier, vous le visualiserez correctement en local. Cependant, après le transfert chez l'hébergeur, vous ne pourrez plus accéder à la page ou au média et vous obtiendrez un message d'erreur.

Dans FrontPage utiliser le menu « Fichier - Nouveau/Nouvelle - Page ou site Web... »
Le « Volet Office » apparaît à droite de l'écran (voir interface FrontPage ci-dessus)
Dans le « Volet Office » cliquer sur « Site Web Vide ». La boîte de dialogue ci-dessous apparaît.

Sélectionner le dossier dans lequel vous souhaitez placer votre site. Pour les sites traditionnels, il est préférable de les créer dans un dossier qui sera dans le dossier « Mes documents\Mes Sites Web » en créant un sous-dossier portant le nom du site que envisagez. Attention avec FP 98 : il faut créer le dossier dans le dossier
C:\inetpub\wwwroot (ou)
C:\webshare\wwwroot
en fonction du serveur Web personnel PWS installé.

Le résultat doit être équivalent à celui ci-dessous

2 dossiers ont été créés :

• images qui devra contenir les médias de votre site
• _private qui pourra contenir (entre autre) les résultats des formulaires et autres parties privées.

Structure de la navigation

Cliquer sur le bouton Navigation dans la barre d'Affichage.

Cliquer sur le bouton « Nouvelle Page » dans la « barre d'Outils Standard »

Vous obtenez l'image ci-contre à l'écran.

Par Clic Droit sur la page d'accueil, utiliser « Nouveau – Page » pour créer autant de pages que nécessaire sous la page d'accueil. Par clic droit sur les pages créées, modifier le nom des pages et éventuellement créer de nouvelles sous-pages.

La structure du site (pour le site Glénan) est comme celui ci-dessous.

Même avec un grand écran, vous ne pourrez peut-être pas visualiser l'intégralité du site, Cliquer le bouton "Portait/paysage" dans la barre d'outils "Navigation" pour changer l'orientation de l'arborescence. La petite maison symbolise la page d'accueil. Attention : aucune page n'a encore été créée. Vérifier que les noms des pages sont corrects avant de poursuivre.

Noms de fichiers

Double-cliquer sur la page d'accueil (ou faire un clic droit « Appliquer les modifications » dans la partie cyan de l'interface).
Les différentes pages du site sont créées.

Si vous n’avez pas la « Liste des dossiers » affichée à l’écran, utiliser le menu Affichage.
Important : ne mettez jamais d'accent, ni d'espace dans le nom des fichiers (pages HTML, médias...) pour éviter tout problème ultérieur avec l'hébergement.
Le logiciel FrontPage est un logiciel américain francisé qui respecte la règle imposant « pas d'espace », mais les accents n'existent pas en langue anglaise, donc ;-)...

Si vous avez des pages nommées « nouvellepage1.htm » et suivantes, vous avez validé la structure de navigation avant qu’elle soit totalement renommée. Cliquer sur le mode Dossier Ce mode permet de visualiser le nom du fichier (devant respecter les contraintes de l’hébergeur) et la colonne « Titre » qui contient les termes qui seront utilisés dans la structure de navigation. Changer les Noms en fonction des termes utilisés dans les Titres. Faire un clic droit sur les noms de fichier et les modifier pour qu'il n'y ait plus aucun accent et, éventuellement, simplifier les noms. Attention à bien garder l’extension de fichier (htm…) qui est sur chaque page (ou document) pour éviter des ennuis avec le navigateur.

Penser aussi à modifier index.htm en index.html qui, sur la plupart des serveurs, est prioritaire (voir les contraintes que vous fournit l'hébergeur sur le nom et l'extension de la page d'accueil). Un message apparaît. Valider. Les noms de fichier peuvent être comme ceux ci-contre. La structure du site est terminée.

Thèmes et bordures

Ouvrir la page d’accueil : index.html, (si cela n’est déjà fait). La page est vide. Avant de mettre le contenu, il est préférable d’installer la structure de navigation qui permettra de se déplacer dans le site.

Plusieurs avantages à cette démarche :

• Vous ne vous préoccupez plus de la gestion des boutons, mais uniquement du contenu du site.
• Chaque page créée contient automatiquement les boutons de navigation…

Quelques inconvénients persistent :

• Limitation de l’imaginaire de création graphique
• Problèmes dans la navigation si vous modifiez les objets des bordures.

Utiliser le menu « Format – Thème… » et sélectionner dans la liste le plus adéquat au site. Ne pas oublier d’appliquer le thème à toutes les pages.

Les meilleurs résultats s’obtiennent souvent en cochant les cases « Graphismes animées » et « Image d’arrière plan ».
Cliquer sur « OK » pour valider.
Valider le message vous avertissant que la mise en page peut être modifiée.
Si le thème ne vous convient pas, il est possible de le changer à tout moment.

Pour créer les boutons, utiliser le menu « Format – Bordures partagées… ». Cela s’applique à toutes les pages et vous devez les mettre en haut et à gauche en incluant dans les 2 cas les boutons de navigation. Valider la boîte de dialogue.

En vous déplaçant sur le texte dans la bordure de gauche (contenant le nom des 4 pages sous la page d’accueil), l’icône ci-contre apparaît. Double-cliquer dessus pour modifier les propriétés de la barre de lien. Ne toucher à rien dans l’onglet général, cliquer sur l’onglet style. Par défaut, le style texte est sélectionné. Remonter l’ascenseur en haut de la barre de défilement et sélectionner « Utiliser le thème de la page » puis valider. Des boutons apparaissent à la place du texte. La navigation au sein du site est terminée. Visualiser le site en cliquant sur l’icône « Aperçu dans le navigateur ». Le site résultat est disponible en cliquant ici.

Structure d'une page Internet

Cette partie du guide vous informe sur la façon dont sont structurées des pages Internet et vous donner une approche de langage HTML (HyperText Markup Language). Si le côté technique ne vous intéresse pas, passez cette partie. Si vous souhaitez approfondir vos connaissances sur le sujet, re-portez-vous au cours sur le HTML.

Le HTML est un langage de balise permettant de décrire le formatage des informations contenues dans une page. Les balises sont mises entre les symboles < et > pour éviter de les confondre avec le contenu lui-même. Sauf exception, chaque balise contient aussi une balise de fin, pour indiquer les bornes du formatage.
Exemple : l'Archipel des <B>Gl&eacute;nan</B> en face de Fouesnant.
Résultat : l'Archipel des Glénan en face de Fouesnant.
La balise <B> (ou la balise <strong>) indique que le texte suivant la balise sera mis en gras jusqu’à la balise de fin </B>. Les caractères accentués sont stockés sous la forme &LettreAccent; comme le montre le é de Glénan qui est stocké sous la forme &eacute; signalant un e accent aigue.
FrontPage gère les accents avec les Méta balises et le code donnera :
l'Archipel des <B>Glénan</B> en face de Fouesnant
Ce qui est plus facilement lisible, mais peut poser des problèmes de visualisation dans certains pays ou avec certaines versions de navigateurs.
Une page html doit toujours contenir des balises minima indiquant le début du code html, l’entête et le corps du code.
Elle est notée sous la forme :
<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>
L’intérieur de la balise d’en-tête (<head>) sert à mettre les méta balises (voir le chapitre sur les Meta Tags), les scripts et autres codes qui ne seront pas directement visibles dans la page.
Dans le corps (<body>) se trouve le contenu de la page proprement dit. En cliquant sur l’onglet HTML en bas de la page index, le texte ci-dessus apparaît indiquant un certain nombre de balises méta qui permettront aux internautes d’apprendre, entre autre, que vous travaillez avec FrontPage XP (5.0).
Le corps ne contient que :
<P>&nbsp;</P>
signalant une espace insécable (&nbsp;) dans un paragraphe (balise <p>).
Si vous demandez un aperçu dans le navigateur puis « Affichage – Source », vous verrez que le code est beaucoup plus complexe qu’il ne paraît.
Ce phénomène est lié au fait que les informations propres aux bordures (haut et gauche) sont contenues dans des fichiers à part et incluses dans la page lors de la finalisation (fichier left.htm et top.htm dans le dossier _borders et qu’ils ne sont pas directement visibles dans FrontPage).
Cela signifie qu’une modification dans les bordures entraîne automatiquement une modification dans toutes les pages utilisant cette bordure.
Le texte sera tapé en mode normal et le gras ainsi que toute autre mise en forme, seront gérés par les boutons des barres d’outils ou les menus, ce qui est plus pratique pour les personnes connaissant Microsoft Word.
L’accès au code HTML est souvent effectué quand le résultat n’est pas celui souhaité ou pour réaliser des fonctions non prises en compte par FrontPage.
Un rudiment de cours HTML (toujours en bleu foncé) est dispensé tout au long du site pour connaître un minimum sur la structure du langage.