Glénan
Finistère
Bretagne

L'archipel des Glénan à Fouesnant

une production
LÉOST Informatique
Nouvelle version 2016 du site sur Glenan.fr
[Accueil] [Glénan] [Fouesnant] [Textes] [Séjours] [Visite virtuelle] [Jeux] [ Formation] [Bonus]

Formation multimédia

[Accueil] [PowerPoint] [FrontPage] [Dreamweaver] [Contribute] [Traitement image] [Flash] [HTML]

Création d'un site avec FrontPage

[Introduction] [Analyse] [Création] [Contenu] [Personnalisation] [Publier] [Conseils]

Contenu du site

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 <BR>. Les paragraphes étant notifiés par <P>.
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 à : <A HREF="Moutons.htm">L'Île aux Moutons</A>
La balise <A> correspond dans cet exemple à un lien vers l’URL définie par HREF. Elle se prolonge jusqu’à la balise de fin </A>.

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 à <H1>Une espèce unique au monde </H1>. 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 à : <A NAME="unique">Une espèce unique au monde</A>
La balise <A> associée avec NAME permet de définir le signet "unique". Elle se prolonge jusqu’à la balise de fin </A>.
Le lien sur le signet se fait avec <A HREF="#unique">Une espèce unique au monde</A>. 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 :
<A HREF="narcisse.htm#unique">Le Narcisse des Glénan est une espèce unique au monde</A>.

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 <TABLE> 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 <TABLE>.
Ensuite viennent les balises <TR> qui indiquent un changement de ligne. A l’intérieur de chaque ligne, la balise <TD> permet de définir le contenu de la cellule.
Il est possible de rencontrer d’autres balises dans un tableau comme <TH> 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…) :

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">

<TR>

<TD>

<H1><A NAME="unique">Une espèce unique au monde </A> </H1>

</TD>

<TD>

<P ALIGN="right"> <A HREF="#Menu">Menu</A> </P>

</TD>

</TR>

</TABLE>

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 :
<IMG SRC="images/YCA_Avion_cigogne.jpg" WIDTH="300" HEIGHT="225" BORDER="0" ALT="Photo YCA Quimper - Glénan : Fort Cigogne">
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 :

<MAP NAME="Glenan">

<AREA COORDS="277, 348, 57" SHAPE="circle" HREF="Loch.htm">

<AREA COORDS="226, 113, 277, 150" SHAPE="rect" HREF="autres_iles.htm#Brunec">

</MAP>

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).

<IMG SRC="images/carte_glenan.gif" USEMAP="#Glenan" WIDTH="600" HEIGHT="424">

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.

 


© 2004 Léost Informatique - Fouesnant les Glénan (contact@glenan.fr)
Chercher version