Le Texte

Le texte s'écrit normalement comme dans Word. Les paramètres suivants sont possibles :

Police : l'interprétation de la page Html se fait sur la machine de celui qui consulte la page. S'il ne dispose pas de la même police, une autre sera utilisée. Lors du choix des polices, il est conseillé d'en prendre 3 : une pour les PC, une pour les Mac, une pour les utilisateurs qui n'auraient pas les polices précédentes (voir le chapitre personnalisation du thème). Les 3 grandes familles de police sont les couples (Arial, Helvetica) ; (Times New Roman, Times) ; (Courrier New, Courrier) avec éventuellement quelques variantes suivant les systèmes
La taille n'existe qu'en 7, notées de 1 à 7. Les équivalents en taille de Word (en pts) sont ap-proximativement : 1 (8) ; 2 (10) ; 3 (12) ; 4 (14) ; 5 (18) ; 6 (24) ; 7 (36). De plus, les valeurs de rendu diffèrent entre PC et Mac. Les plus couramment utilisées sont le 3 et le 2.
Gras, Italique, Souligné : éviter absolument le souligné qui peut être confondu avec un hyperlien
L'alignement gauche centré, droit. L'alignement justifié n'existe pas dans le Html de base.

D'autres paramètres sont disponibles et bien plus encore avec l'utilisation des feuilles de style en cascade (CSS, voir ce cours). L'unique façon d'être assuré que l'utilisateur voit le même texte avec les même caractéristiques est de transformer le texte en images (attention, cette technique augmente le poids de la page et rend délicat son indexation).
Les sauts de paragraphes

Activer le « Pied de mouche » (bouton Afficher tout) pour visualiser certains caractères non imprimés.
A chaque retour chariot (touche entrée) l'espace inter paragraphe est important (équivalent à une ligne vide).
Si 2 paragraphes doivent être l'un sous l'autre, faire un saut de ligne forcé (shift entrée). Ce saut de ligne place de nouveau le curseur en début de ligne, mais au sein du même paragraphe. Seul l'alignement justifié pose problème avec ce genre de technique, mais il n'est pas disponible en standard.
L'équivalent HTML du saut de ligne forcé est la balise
. Les paragraphes étant notifiés par.
Utiliser le texte du fichier texte_site_glenan.rtf en copier/coller ou retaper le texte.

Les puces
Les puces et les listes numérotées s'obtiennent en activant l'icône correspondant. En utilisant le menu « Format – Puces et numéros... » il est possible de modifier les puces.
Si un thème est utilisé, les puces deviennent des symboles graphiques.
Pour changer le niveau des puces, utiliser les boutons « Diminuer ou Augmenter le retrait ».
La puce est un autre moyen de réduire l'espace entre les paragraphes.
Voir l'exemple ci-contre (extrait de la page Iles.htm)
Hyperliens

La page des îles contient du texte, dont le nom de certaines îles. Il serait intéressant de pouvoir cli-quer sur le nom des îles pour aller directement sur la page correspondante

Sélectionner le texte « L'île aux Moutons » et cliquer sur le bouton « Insérer un lien hypertexte ». Sélectionner la page Moutons.htm qui est une page existante et valider.
S'il n'y a pas de thème pour la page, le lien apparaît en bleu souligné, indiquant la présence d'un lien hypertexte sur la page. Si un thème est activé, le lien apparaît souligné dans la couleur définie dans le thème pour des liens hypertexte.
Recommencer l'opération sur le texte des autres îles dont la page existe.

Le code HTML correspond à : L'Île aux Moutons
La balise correspond dans cet exemple à un lien vers l'URL définie par HREF. Elle se prolonge jusqu'à la balise de fin .
Style HTML

La page sur le narcisse peut être structurée avec 4 points principaux : Une espèce unique au monde ; La plus petite réserve naturelle de France ; La gestion de la réserve naturelle ; La concurrence de la Jacinthe des Bois.
Ils peuvent être mis en valeur en utilisant le gras et éventuellement le changement de taille. Il est plus judicieux d'utiliser les styles Html.
Cliquer sur le paragraphe et dans la liste déroulante des styles et choisir Titre 1. Comme pour Word, il existe quelques styles prédéfinis.

Il est possible de modifier le style des titres de niveau 1 en utilisant le menu « Format – Style... », mais ils ne seront modifiés que dans la page courante. Cette méthode n'est donc pas à utiliser.
Il est préférable de personnaliser le thème (voir ce chapitre) ou de gérer la feuille de style (voir ce cours).
Une autre solution consiste à choisir un titre de niveau inférieur.

Le code HTML correspond à

Une espèce unique au monde

. Le numéro après h correspond au niveau de titre (entre 1 et 6).
Signets

Restons toujours sur la page relative au Narcisse des Glénan car le texte est long. Il serait intéressant de faire un sommaire en haut de la page contenant les différents items (titres) de façon à atteindre directement l'endroit souhaité dans la page.

Dans un premier temps recopier les titres en haut de la page, un par ligne, puis les mettre en liste à puces pour éviter les blancs.

Définir ensuite les endroits à atteindre dans la page (signet ou ancre). Sélectionner le texte « Une espèce unique au monde » utiliser le menu « Insertion – signet ». Donner au signet un nom plus court que celui proposé et, pour éviter tout problème ultérieur, sans accent ni espace.
Continuer la procédure avec les 3 autres titres.

Sélectionner le texte « Une espèce unique au monde » et cliquer sur le bouton « Insérer un lien hypertexte ». Cliquer sur « Emplacement dans ce document » et choisir le lien vers l'ancre voulue.
Recommencer l'opération pour les 3 autres parties du menu.

Le contenu se présente comme ci-contre, avec les hyperliens notifiés et les signets définis par du texte avec un soulignement discontinu qui n'apparaît pas dans le navigateur.

Dans la boîte de dialogue « modifier le lien hypertexte » il est aussi possible de cliquer sur une page existante contenant des signets et de cliquer sur le bouton « Signet » pour ensuite choisir le signet voulu.

Le code HTML correspond à : Une espèce unique au monde
La balise associée avec NAME permet de définir le signet "unique". Elle se prolonge jusqu'à la balise de fin .
Le lien sur le signet se fait avec Une espèce unique au monde. Le lien sur le signet est représenté par le symbole #. Devant le dièse, il est possible de mettre un lien relatif ou absolu s'il faut passer sur une autre page. Le lien peut dans ce cas être du type :
Le Narcisse des Glénan est une espèce unique au monde.
Les Tableaux

Cette présentation permet de présenter les informations de type tableau, mais également beaucoup d'autres types d'information où l'ossature du tableau n'est pas forcement visible. C'est un élément essentiel pour le texte, l'image et la mise en page en général, qui permet de compenser partiellement les faiblesses de mise en page du langage HTML. Dans FrontPage un menu entier est consacré au tableau.

Les signets ont été créés sur la page « Narcisse », mais il manque un signet pour le retour en haut de la page. Pour le moment le signet sera un signet textuel, mais la même technique peut être employée avec un objet graphique (type GIF animé). Pour faciliter le déplacement, le signet doit se trouver sur la ligne du titre. Le plus simple est de créer un tableau d'1 ligne et de 2 colonnes.
Pour créer un tableau, utiliser le menu « Tableau – Insérer – Tableau » pour obtenir la boîte de dialogue ci-contre ou cliquer sur l'icône « Insérer un tableau » en choisissant le nombre de lignes et de colonnes.
L'alignement est général pour l'ensemble des cellules du tableau mais pourra être modifié pour les différentes entités du tableau.

La largeur du tableau pourra être définie en pourcentage (attention à ne pas choisir un % supérieur à 100%) ou en pixels pour une disposition plus précise, mais plus étriquée dans certains cas.
Si le tableau ne doit pas être visible, il faut mettre la taille de la bordure à 0.
La marge intérieure des cellules concerne l'espace entre le contenu de la cellule et la bordure.
L'espace entre les cellules permet d'augmenter la distance entre les bords des cellules.
Comme dans Word, il est possible de fusionner les cellules contiguës ou de mettre un tableau dans une cellule.
Le menu « Tableau – Propriétés du tableau – Tableau » donne accès aux paramètres du tableau, pour les modifier, ce qui est particulièrement utile pour la couleur de remplissage et les bordures.

Sélectionner le titre « Une espèce unique au monde » et le déplacer dans la cellule de gauche.
Se positionner au niveau du menu et insérer un signet.
Du fait de la gestion des bordures, si le signet est mis dans la bordure du haut, il se retrouve sur toutes les pages. Cela peut être utile pour remonter rapidement en haut des pages quand elles sont longues.
Dans la cellule de droite mettre le mot « menu ». Mettre le contenu de la cellule aligné à droite.
Recommencer l'opération pour les 3 autres titres.
Par le menu « Tableau – Propriétés du tableau – Cellule » il est possible de modifier les paramètres de la (les) cellule(s) sélectionnée(s).

Concernant l'alignement par défaut, il se trouve à gauche et centré en hauteur.
Pour d'autres exemples de tableaux, voir plus loin dans le cours et le site.

Le code HTML des tableaux inclut plusieurs balises. La balise principale est la balise qui concerne le tableau lui-même. La bordure (BORDER), l'espace entre les cellules (CELLSPACING) et la marge intérieure des cellules (CELLPADING) sont définis en arguments de la balise.
Ensuite viennent les balises qui indiquent un changement de ligne. A l'intérieur de chaque ligne, la balisepermet de définir le contenu de la cellule.
Il est possible de rencontrer d'autres balises dans un tableau comme pour définir des entêtes de tableau et surtout COLSPAN et ROWSPAN pour fusionner des cellules respectivement sur une ligne, ou une colonne. La combinaison des 2 est possible.
Dans notre exemple, le code généré serait en HTML (le code généré par FrontPage est légèrement plus important, mais...) :

Une espèce unique au monde

Menu

Il est à noter que l'alignement à droite ("right") s'effectue au niveau du paragraphe, mais que dans ce cas, il aurait pu se faire au niveau de la cellule en utilisant les mêmes arguments.
Les Images

Ce chapitre ne traite pas de la création d'images (pour ce sujet voir le cours Traitement de l'image), mais de l'incorporation d'images dans FrontPage.

Dans un site Internet peu de formats d'images sont inclus, et parmi eux principalement les formats bitmap :

Les fichiers JPEG (ou JPG) sont souvent utilisés pour les photos.
Les fichiers GIF servent pour les images avec beaucoup d'aplats (surface de couleur identique) comme les logos, cartes... les images animées et les images nécessite de la transparence.

Il est aussi possible d'utiliser d'autres formats plus ou moins contraignants :

SWF format originaire de Macromedia Flash, nécessite un plug-in très largement répandu.
Les fichiers PNG qui, même en gérant la transparence sur 8 bits (au plus) normalement, ne sont pas reconnus par IE (même IE6) du moins pour la transparence 8 bits.
JPEG2000 avec ses problèmes de coût de licence et de non compatibilité.
SVG format originaire de Adobe intégrant le XML et nécessitant un plug-in...

Utiliser de préférence les formats JPEG et GIF, éventuellement le SWF, si vous possédez des connaissances en HTML ou si vous avez Macromedia Dreamweaver (Oups ! c'est un cours sur Mi-croSoft FrontPage ;-))
Pour les autres formats que vous utilisez : PSD, TIFF, BMP, WMF, EMF, PICT... faire une croix des-sus si vous voulez être vu en-dehors de votre ordinateur (et encore !) en plus du problème de poids que pose bon nombre de ces formats.
Pour intégrer une image dans FrontPage, utiliser le menu « Insertion – Images – À partir fichier... ». Si vous ne posséder aucune image, vous pouvez en récupérer sur Internet ou dans la bibliothèque de Microsoft, sous réserve de respecter les droits d'auteurs. Il existe des sites qui ont « pompés » des images ou des animations réalisées antérieurement sur les Glénan sans qu'aucune demande n'ait été faite à l'auteur, et sans créer de liens vers le site d'où provenait l'image...

Sauf dans le cas d'images qui seront retraitées dans FrontPage (voir le chapitre Images vectorielles), il est impératif que l'image soit définie dans le logiciel de dessin à la taille souhaitée. Une diminution de la taille de l'image dans FrontPage ne diminuerait en rien le poids de l'image (et donc son temps de chargement) et une augmentation de la taille de l'image provoquerait un effet de pixelisation non esthétique.
Images vectorielles

Il peut sembler étonnant d'inclure un chapitre sur les images vectorielles dans la mesure où elles ne sont pas compatibles avec le web, mais les cliparts comportent de nombreux fichiers vectoriels (ex-tensions WMF ou EMF)

En se déplaçant sur une image de la bibliothèque, l'info bulle renvoie les mots clés relatifs à l'image, la taille (hauteur et largeur en pixels), le poids en Ko et le type de fichier. Ouvrir la page « Nature ».
Ouvrir la bibliothèque de cliparts. Dans le volet « Insérer une image clipart », taper le (les) mot(s) clé(s) à rechercher ou utiliser le bouton « Bibliothèque multimédia... » pour choisir une image de type WMF ou EMF et l'insérer dans le site.

Enregistrer la page. Automatiquement FrontPage vous demande d'enregistrer les images dans le site. Le nom de départ n'étant pas significatif, il est préférable de le renommer et de changer le dossier de destination par le dossier images (ou autre en fonction de la structuration de votre site). Si vous n'êtes pas d'accord avec le format d'image, cliquer sur « Options de l'image... » pour basculer entre GIF et JPEG (dans le cas des cliparts, le GIF est préférable).

L'image se présente comme ci-contre. Si le fond est blanc, cela convient, sinon il faut rendre le blanc transparent pour une meilleure utilisation du logo. En cliquant sur l'image, la barre d'outils « Images » apparaît.
Cliquer sur le bouton « Couleur transparente », puis sur le blanc de l'image. Le blanc (ou la couleur sélectionnée) disparaît. En sauvegardant la page, FrontPage redemande à sauvegarder l'image, mais l'action est Écraser au lieu de Enregistrer, car l'image existe déjà.

L'image créée par FrontPage pèse 3205 octets pour une taille de 208 x 192 pixels.

Généré avec Fireworks, à la même taille et en 16 couleurs, le fichier pèse 3427 octets mais le dessin est anti-aliasé (pas d'effet d'escaliers sur les traits obliques et les courbes).

Le fichier avec les mêmes caractéristiques que celui généré par FrontPage mais, optimisé avec Fireworks, pèse 2409 octets.

Images à partir du fichier

Pour intégrer des images autres : utiliser « mes collections » de la bibliothèque cliparts ou sélection-ner le menu « Insertion – images – A partir du fichier... ». Par défaut, c'est le dossier du site qui est choisi. Si l'image a été enregistrée dans le dossier image, il suffit de la sélectionner pour l'insérer (avec les versions 2000 et antérieures de FP, les images ne sont pas forcément visibles si elles ont été déposées dans le dossier après l'ouverture du site dans FrontPage).
Lors de l'enregistrement de la page, FrontPage demande l'enregistrement des images dans le site et si possible dans le dossier image.

Intégrer les images suivantes après le texte descriptif de l'île et en centrant les paragraphes sur les pages nommées :

Page Fort Cigogne YCA_Avion_cigogne.jpg
Page Penfret YCA_Avion_penfret.jpg
Page Loc'h YCA_Avion_loch.jpg
Page Drenec YCA_Avion_drenec.jpg
Page Les Moutons YCA_Avion_moutons.jpg

Après insertion de l'image, vous pouvez modifier ses paramètres en utilisant le clic droit sur l'image « Propriétés de l'image... ».
Dans l'onglet « Apparence», il est possible de changer l'alignement de l'image (à droite ou à gauche). Attention toutefois, car en cas d'images multiples proches les unes des autres, des chevauchements d'images peuvent se produire. Dans ce cas il est plus intéressant d'utiliser les tableaux. Sauf indications expresses, il est déconseillé d'utiliser la case à cocher « Spécifier la taille » car, soit le poids sera trop important par rapport à taille, soit un effet de pixellisation peut apparaître.

Dans l'onglet « Général » ne changez pas le type, mais il est intéressant de mettre un texte qui appor-tera :

L'affichage du texte à la place de l'image, permettant à l'internaute de visualiser le contenu de l'image avant son chargement. Les boutons de FrontPage possèdent du texte permettant à l'utilisateur de cliquer avant le chargement des images.
Une info bulle quand l'utilisateur passe la souris sur l'image.

Sur la page Narcisse mettre les photos PL_narcisse.jpg et YCA_narcisse.jpg avec un alignement à droite et à gauche.

Sur la page Saint-Nicolas, placer le texte de Gérard Guillou. Quelques photos sont à insérer, aussi le tableau est plus indiqué. Comme il existe 6 paragraphes, il est intéressant de construire un tableau de 6 lignes et 3 colonnes. Les 3 colonnes pourront être fusionnées par 2, alternativement à gauche et à droite, de façon à laisser davantage de place au texte. Centrer les cellules contenant les images. En-lever la bordure du tableau et insérer successivement les images : YCA_Avion_nicolas_global.jpg, YCA_Avion_nicolas_viviers.jpg, Quinio_plongeur.jpg, Quinio_avion_Nef.jpg, Quinio_ane.jpg. Mettre au minimum 2 pixels dans la marge intérieure des cellules pour éviter que le texte se colle à l'image.

Sur la page « Autres îles » mettre les photos YCA_Brunec.jpg, Quinio_gueotec.jpg et Quinio_Guiriden.jpg et insérer un signet pour les photos de ces îles.

Le code HTML pour l'image de Fort Cigogne s'écrit :

L'image est indiquée par la balise IMG pour laquelle il faut définir la Source (SCR) avec une hauteur (HEIGHT) et une largeur (WIDTH) en pixels. La Bordure à 0 évite de voir l'hyperlien s'il en existe un sur l'image. L'argument Alternatif (ALT) permet l'affichage d'informations par rapport à l'image.
De nombreux autres arguments comme ALIGN... sont disponibles.
Zones réactives

Sur la page « Les îles », après la liste des îles, insérer la carte des îles (carte_glenan.gif). Du fait de la représentation des îles, il est souhaitable de permettre à l'internaute de cliquer sur les îles présentent sur la carte pour aller directement sur la page concernée.
Dans la barre d'outil Images, 3 boutons permettent de créer des zones réactives respectivement Rectangulaires, circulaires et polygonales. Comme le dit Gwenn-Aël Bolloré dans les contes de la Bernique « L'île du Loc'h est située au sud de l'archipel des Glénan. Elle est (comme toutes les îles) entourée d'eau. ».
Le rectangle et le cercle (dessiné à partir de son centre) sont donc suffisants dans notre cas. Toute-fois, il est possible d'utiliser la forme polygonale pour faire des formes plus imbriquées.

Une fois la forme définie, une boîte de dialogue permet de sélectionner la page concernée par le lien. S'il s'agit d'un signet sur une autre page : soit taper le code dans l'adresse, soit charger au préalable la page pour faire le lien directement.

Cette technique peut être généralisée pour les photos des autres pages où d'autres îles sont visibles (ex : sur la photo de la page du Loc'h, Fort Cigogne est visible au premier plan).
Cliquer sur Info-bulle... pour avoir une légende sur la zone réactive.

Le code HTML pour la carte des Glénan est composé de 2 parties : une description de la carte et son intégration dans l'image. La description intègre le code :

...

La carte (MAP) doit avoir un nom (plusieurs cartes possibles sur une page...). A l'intérieur de la balise, la définition des surfaces avec coordonnées (COORDS), forme (SHAPE : "circle"; "rect"; "po-lygon") et lien (HREF). Pour les rectangles, les coordonnées de 2 points opposés ; pour les cercles, les coordonnées du centre et la taille du rayon ; pour les polygones, une succession de coordonnées délimitant la forme. Un argument alternatif ALT permettrait l'affichage d'info bulle. Attention au che-vauchement des zones.L'intégration de la carte sur l'image se fait en utilisant USEMAP et l'adresse de la carte (le dièse devant le nom indique que la définition se trouve dans la page).

Autres composants

Des composants existent et peuvent agrémenter le site pour le rendre plus attractif.
Utiliser le menu « Insertion – Composant Web... », et choisir le type de composant, puis l'effet.
Certains composants ne fonctionnent qu'avec un hébergement possédant les extensions FrontPage. C'est le cas pour les compteurs qui ne présentent aucun intérêt si vous disposez d'un hébergement avec statistiques.
Ouvrir la page d'accueil du site (index.html) pour insérer quelques composants.

Texte défilant

Dans la catégorie « Effets dynamiques », choisir « texte défilant ». Taper le texte à faire défiler et modifier le style du texte. Préférer toujours un défilement de gauche correspondant davantage au sens de lecture européen.
Le texte peut défiler (il disparaît progressivement à gauche de l'écran) ou glisser (il s'arrête sur la bordure de gauche, mais attention aux textes longs dont l'intégralité du contenu ne sera pas lu).

Tableau Excel

Vous pouvez insérer dans le type « Feuille de calcul et graphique », une feuille de calcul (basée sur le XML) ou un graphique. Il ressemble aux composants Office disponiblent dans Excel et ne surprendront pas l'utilisateur habitué à ces produits.

D'autres composants sont disponibles par ce menu ou par adjonction d'une nouvelle page d'un type défini. C'est le cas pour les composants sommaires...

Effets DHTML

Utiliser le menu « Format – Effet HTML dynamique... ». Il est possible d'utiliser l'effet DHML sur le texte ou l'objet (sous réserve d'adéquation), de sélectionner l'événement dans la liste (Chargement de la page, Cliquer sur, Double-cliquer, Pointer avec la souris). Suivant le type d'événement, le type d'effet peut être différent. Les effets DHTML sont spécifiés en bleu clair avec un liseré foncé dans FrontPage.

Voir le cours Javascript pour plus de détails sur le DHTML.

Le site résultat est disponible en cliquant ici.

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)

frontpage 01 600

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.

dossier local distant

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.

FP Modele de site

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.

FP site vide

Structure de la navigation

FP bouton navigationCliquer sur le bouton Navigation dans la barre d'Affichage.

FP bouton  nouvelle pageCliquer sur le bouton « Nouvelle Page » dans la « barre d'Outils Standard »

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

FP site 1page

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.FP arborescence hort

FP arborescence vertMê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 ;-)...

FP mode dossierSi 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.

FP liste dossier faux   FP liste dossier OK

FP renome indexPenser 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.

FP theme choix 600

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.

FP theme validation 600

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.FP bordures partagees base

FP index menu texte

FP bouton prop barre lienEFP prop barre lienn 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.

FP page accueil boutonDes boutons apparaissent à la place du texte.

FP bouton apercu navigateurLa 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.

FP code HTML vide

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.

Avant de construire un site, il est essentiel de se poser des questions :

  • Qu'attendent de mon site les utilisateurs ? Qui sont-ils ?
  • Mon site apporte-t-il quelque chose de novateur sur la toile ?
  • Que mettre dans le site ? comment effectuer les mises à jour ?...

Pour les sites simples, tout comme pour les plus complexes, il est important de déterminer ce que vous souhaitez mettre en place.

Il est utile de créer un organigramme qui permetta de visualiser les pages sur papier ou avec un logi-ciel quelconque (y compris un logiciel de création de site)

arborescence site

Pour chacune des pages, il faudra trouver et sélectionner le contenu (textes images... pouvant être incorporés). Si vous n'avez pas suffisamment de contenu pour une page (actuellement ou à terme), il peut être utile de modifier la structure du site.

Ce cours a pour but d'apporter une aide aux personnes ayant déjà suivi une formation (entreprises, étudiants...) pour retrouver facilement leurs repères. Si vous n'avez jamais suivi de formation et que le sujet vous intéresse, vous pouvez me contacter : en tant qu'organisme de formation agréé, une convention de formation peut être établie ce qui vous permet une prise en charge par votre FAF (Fond d'Aide à la Formation).

Les parties théoriques sont omises pour ne garder que la partie ludique de la création de site.

Néanmoins, si vous souhaitez réaliser un site, vous y arriverez rapidement à partir d'un exemple sur les Glénan. En suivant ce didacticiel vous augmenterez votre connaissance des îles de Glénan à dé-faut de parfaire votre maîtrise de FrontPage.

­