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éer un site avec Dreamweaver et Fireworks

[Accueil] [Concept] [Boutons et menu] [Contenu] [Publier] [Conseils]

Contenu du site

Avant de commencer ce chapitre, il est utile de charger le document « texte_site_glenan.rtf » qui contient le texte de toutes les pages du site, ainsi que les images à incorporer dans chaque page.

Le texte

Ouvrir la page « index.html ». Sélectionner les paragraphes de la page d’accueil et les copier dans la zone de « Contenu ».

Le texte s’écrit normalement comme dans un traitement de texte. Les paramètres possibles pour le format « Paragraphe » sont :

  • 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 au minimum : une pour les PC, une pour les Mac, et une autre pour les utilisateurs qui n’ont pas les polices précédentes (voir le chapitre personnalisation et la feuille de style). Les 3 grandes familles de polices sont les couples (Arial, Helvetica) ; (Times New Roman, Times) ; (Courrier New, Courrier) avec éventuellement quelques variantes suivant les systèmes.
  • En HTML standar, la taille (size) n’est disponible qu’en 7 valeurs, notées de 1 à 7. De plus, les valeurs de rendu diffèrent entre PC et Mac. Les plus couramment utilisées sont le 3 et le 2. Dreamweaver gère la taille en créant un style dans l’entête de la page. Il est donc préférable de créer des styles directement dans la feuille de style « glenan.css » ce qui permet de les rendre disponibles pour les pages utilisant cette feuille de style.
  • Gras, Italique. Le souligné qui n’est pas dans les propriétés doit absolument être évité, dans un document car il peut être confondu avec un hyperlien.
  • L’alignement gauche centré, droit. L’alignement justifié n’existe pas dans le Html de base, même si Dreamweaver le propose et qu’il est accepté par la majorité des navigateurs actuels.

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 verra 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

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

Pour visualiser les sauts de ligne forcés, utiliser le menu « Edition (Dreamweaver sur Macintosh) – Préférences ». Dans la catégorie « Eléments invisibles », cocher la case saut de ligne.

En revenant dans le texte, le symbole « BR » permet de repérer facilement les sauts de ligne forcés.

Les puces et numéros

Les puces et les listes numérotées s’obtiennent en activant l’icône correspondant.

Pour changer le niveau des puces, utiliser les boutons « Retrait du texte » ou « Retrait négatif du texte ».

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)

Il est possible de changer la forme des puces en utilisant la feuille de style et même d’y associer une icône.

Création des îles

Créer les pages des sept îles : St Nicolas (st-nicolas.htm) ; Penfret (penfret.htm) ; le Loc’h (loch.htm), fort Cigogne (cigogne.htm) ; Drenec (drenec.htm) ; les Moutons (moutons.htm) ; Autres îles (autres_iles.htm), en utilisant le modèle « PageTitre » (voir le chapitre « Création des pages de base »).

Mettre uniquement le titre dans la page, ainsi que la balise <TITLE>.

Hyperliens

La page des îles contient du texte, dont le nom de certaines îles. Il serait intéressant de pouvoir cliquer sur le nom des îles pour aller directement sur la page correspondante (créée dans le paragraphe précédent).

Sélectionner le texte « L'île aux Moutons » qui servira de lien hypertexte.

Il existe plusieurs possibilités pour créer un hyperlien :

  • Dans la zone de « Lien », saisir directement le nom de la page devant faire le lien soit en référence absolue (http://www.glenan.fr/formation/Dreamweaver/Site_fin/moutons.htm) ou en référence relative (moutons.htm).
  • Cliquer sur le dossier « Rechercher le fichier », sélectionner la page « moutons » et valider
  • Utiliser l’icône « Pointer vers un fichier » et tout en restant cliquer, déplacer la souris sur le fichier (ou l’objet) devant servir à créer le lien (glisser-déplacer).

Le lien apparaît en bleu vidéo souligné, indiquant la présence d’un lien hypertexte sur la page. La lisibilité du lien sera améliorée dans le chapitre « Personnaliser – Feuille de style – Lien hypertexte ».

Recommencer l’opération sur le texte des autres îles dont la page existe.

Le code HTML correspond à : <A HREF="Moutons.htm">L'&Icirc;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> .

Générer les pages : Maërl (maerl.htm) ; Narcisse (narcisse.htm) ; Sortie nature (sorties.htm) en intégrant le titre et le contenu.

Style HTML

La page sur le narcisse peut être structurée avec 4 points principaux (actuellement en gras <strong> si vous avez fait du copier-coller) : 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 puis choisir « En-tête 2 », sans oublier d’enlever le gras du paragraphe.

Il est possible de modifier le style des titres de niveau 2 en utilisant le groupe de panneau « Création – Style CSS » comme cela a déjà été fait précédemment pour le style « Entête 1 »

Une autre solution consiste à choisir un titre de niveau inférieur.

Le code HTML correspond à < H2>Une espèce unique au monde </H2> . Le numéro après h correspond au niveau de titre (entre 1 et 6).

Signets

Nous insisterons sur la page relative au Narcisse des Glénan car le texte est long. Il serait pertinent de créer un sommaire en haut de la page contenant les différents items (titres), cela permettrait d’atteindre directement l’endroit souhaité dans la page.

Dans un premier temps : sélectionner les titres en haut de la page et les mettre en liste à puces pour éviter les blancs. Ensuite définir les endroits à atteindre dans la page (signet ou ancre). Sélectionner le texte « Une espèce unique au monde » de style « En-tête 2 » et utiliser le menu « Insertion – Ancre nommée » (Ctrl+Alt+A) ou utiliser l’icône de la barre d’outils « Commun ».

Donner au signet un nom court et, pour éviter tout problème ultérieur, sans accent ni espace.

Un symbole ancre apparaît à la fin de la ligne. Continuer la procédure avec les 3 autres titres.

Sélectionner le texte « Une espèce unique au monde » dans la liste à puces et cliquer sur le bouton « pointer vers un fichier » dans la fenêtre propriétés et faire un glisser-déplacer sur l’ancre de destination.

 

Il est aussi possible de cliquer dans la liste déroulante des liens et de sélectionner le signet de destination.

Recommencer l’opération pour les 3 autres parties du menu.

Le code HTML correspond à : Une esp&egrave;ce unique au monde<A NAME="unique"></A>

La balise <A> associée avec NAME permet de définir le signet "unique" . Elle se prolonge jusqu’à la balise de fin </A> . Dans le cas de paragraphe un peu long, il est souhaitable que le signet corresponde au début ou qu’il englobe le descripteur. Il est possible de modifier le code ainsi :

<a name="unique">Une esp&egrave;ce unique au monde </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 montrer les informations de type tableau, mais également beaucoup d’autres types d’information où l’ossature du tableau n’est pas forcément visible. C’est un élément essentiel pour le texte, l’image et la mise en page en général, car il permet de compenser partiellement les faiblesses de mise en page du langage HTML.

Les signets ont été créés sur la page « Narcisse », mais il manque une ancre pour le retour en haut de la page. Pour le moment l’ancre sera textuelle, mais la même technique peut être employée avec un objet graphique (type GIF animé). Dans une premier temps il faut créer une ancre sur « Narcissus Triandus ssp capax » sur la première ligne du contenu de la page. Le nom de l’ancre sera »Menu ».

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 « Insertion – Tableau » pour obtenir la boîte de dialogue ci-contre ou cliquer sur l’icône « Tableau » dans la boîte d’outils « Insérer ».

Sélectionner le nombre de lignes et de colonnes (1 ligne et 2 colonnes dans notre cas).

La largeur du tableau pourra être définie en pourcentage (penser à choisir un % infé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’espacement entre les cellules permet d’augmenter la distance entre les bords des cellules.

Comme dans les traitements de texte, il est possible de fusionner les cellules contiguës ou de mettre un tableau dans une cellule.

Il existe plusieurs possibilités pour modifier les propriétés du tableau. Pour sélectionner une colonne, vous pouvez cliquer sur le triangle de sélection de colonne en haut ou en bas du tableau.

Si ces informations ne sont pas disponibles, utiliser le bouton « Afficher les options » de la barre d’outils « Documents » pour rendre visible les assistants visuels utiles à la gestion de la page.

Pour sélectionner une cellule, ligne ou un tableau : plusieurs possibilités sont offertes, mais celle qui s’avère la plus pratique consiste à utiliser le sélecteur de balise en bas de la page.

Ce système de sélection est basé sur le fait que les balises sont imbriquées et ne doivent pas être enchevêtrées. Il suffit de cliquer sur la balise voulue pour sélectionner automatiquement le conteneur.

Utiliser ensuite la fenêtre « Propriétés » pour modifier l’aspect de ce qui est sélectionné.

Pour cette page, il faut surtout faire des modifications du contenu des cellules et non pas des cellules elles-mêmes.

Sélectionner le titre «  Une espèce unique au monde  » et le déplacer dans la cellule de gauche. Il est fort probable que le texte soit transféré, mais pas la balise d’En-tête 2 qu’il faudra régénérer et enlever de sa position de départ en mettant le style paragraphe.

Pour éviter ce désagrément, il est possible de déplacer le code directement dans le mode « Fractionner ».

Dans la cellule de droite mettre le mot « menu ». Placer le contenu de la cellule aligné à droite. Faire un lien vers le signet menu.

Recommencer l’opération pour les 3 autres titres.

Insérer des signets sur la page autres_iles.htm sur les différentes îles.

Pour d’autres exemples de tableaux, voir plus loin (Les images par exemple) dans le cours et le site glenan.fr.

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 :

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<h2>

<a name="unique">Une esp&egrave;ce unique au monde </a>

</h2>

</td>

<td>

<div align="right">

<a href="#menu">menu</a>

</div>

</td>

</tr>

</table>

Il est à noter que l’alignement à droite ( "right" ) s’effectue au niveau d’une balise division <DIV> créée pour l’occasion. Il aurait pu se faire au niveau de la cellule en utilisant les mêmes arguments.

<td align="right">

<a href="#menu">menu</a>

</td>

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

Dans un site Internet, peu de formats d’images sont inclus. 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écessitant de la transparence.
  • Vous pouvez également utiliser d’autres formats plus ou moins contraignants :
  • SWF format originaire de Macromedia Flash, nécessite un plug-in très largement répandu (voir les cours sur Flash pour plus de détails).
  • 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. De plus, si vous utilisez Studio MX 2004 et donc Fireworks pour le traitement des images, attention à ne pas incorporer les fichiers de travail de Fireworks, mais uniquement les fichiers d’exportation qui portent la même extension.
  • 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.

Pour les autres formats que vous utilisez : PSD, TIFF, BMP, WMF, EMF, PICT… faire une croix dessus 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 Dreamweaver, utiliser le menu « Insertion – Images » ou « Insertion – Objets images ». Si vous ne posséder aucune image, vous pouvez en récupérer sur Internet ou dans des bibliothèques diverses, sous réserve de respecter les droits d’auteurs. Néanmoins, j’ai constaté qu’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…

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

Utiliser le menu « Insertion – Images (Ctrl+Alt+I) » ou cliquer sur l’icône « Images – Image » 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 sinon, il faut parcourir les dossiers à la recherche de l’image et valider.

Une prévisualisation de l’image et des informations utiles concernant sa taille et surtout son poids sont données dans cette boîte de dialogue. Le temps de chargement indiqué est erroné car il est calculé à partir de la vitesse théorique qui n’est jamais atteinte. Pour avoir une notion plus précise du temps pour des sites visionnés par des internautes avec un modem classique (56 Kb/s), il est utile de prendre un modem plus proche du débit réel (28.8 kb/s). Utiliser le menu « Edition – Préférences », catégorie « Barre d’état ».

Si l’image se trouve en dehors du dossier du site, Dreamweaver demande la copie de l’image dans le dossier du site. Sauf cas particuliers (images déjà sur le web…) il faut toujours répondre oui et enregistrer l’image dans le dossier « images » (s’il n’existe pas encore, il faut le créer).

Si le choix de l’image n’est pas connu, il est possible de réserver un espace pour l’image avant son intégration.

Le page relative à Saint Nicolas doit contenir 6 images. Il est possible d’utiliser l’alignement des images pour modifier leur positionnement sur la page, mais cette technique est rudimentaire et provoque dans certaines configurations des résultats non souhaités. Les possibilités de mise en page étant moins importantes que dans un logiciel de PAO, il est néanmoins possible d’utiliser des tableaux, voire des calques.

Pour la page de Saint Nicolas, une mise en page avec un tableau va être utilisée avec fusion de cellules.

Création d’un tableau de 6 lignes et 3 colonnes, avec un tableau de 100% sans bordure et sans en-tête. Sélectionner chacune des 3 colonnes et mettre en largueur 33% pour chacune sauf pour celle du milieu avec 34%.

Placer le texte de Gérard Guillou.

Insérer successivement les images : YCA_Avion_nicolas_global.jpg, YCA_Avion_nicolas_viviers.jpg, YCA_Avion_boucane ; Quinio_plongeur.jpg, Quinio_avion_Nef.jpg, Quinio_ane.jpg.

Faire ensuite fusionner la cellule contenant le texte avec la cellule du milieu du tableau. Ne pas oublier de centrer les cellules devant contenir les images, même si cela ne se voit pas avec un affichage inférieur à 1024x768.

Objet dans tableau avant fusion

Image 1
  Texte relatif à l’image 1
Texte relatif à l’image 2  
Image 2
Image 3
  Texte relatif à l’image 3
Texte relatif à l’image 4  
Image 4
Image 5
  Texte relatif à l’image 5
Texte relatif à l’image 6  
Image 6
 

Objet dans tableau après fusion

Image 1
Texte relatif à l’image 1
Texte relatif à l’image 2
Image 2
Image 3
Texte relatif à l’image 3
Texte relatif à l’image 4
Image 4
Image 5
Texte relatif à l’image 5
Texte relatif à l’image 6
Image 6

Le résultat doit ressembler aux copies d’écran ci-contre suivant le type d’affichage

Affichage en 800 x 600

Affichage en 1280 x 1024

Il est à noter qu’avec un affichage 800x600 il existe un ascenseur vertical qu’il faudrait supprimer dans un site réel. Les images faisant 300 pixels de large et les dauphins 150 pixels, on obtient une taille d’image de 750 pixels auxquelles se rajoutent : les espacements entre les cellules, la marge intérieure des cellules, l’ossature du menu et les marges de la page, sans oublier la largeur de l’ascenseur vertical.

Un problème bien plus important découle de cet affichage. Avec certains navigateurs (Microsoft Internet explorer entre autres) l’affichage ne peut excéder 650 pixels en largeur, aussi les images les plus à droite seront tronquées presque de moitié.

La meilleure solution pour résoudre le problème est de : redimensionner les images, déplacer le menu… car il n’est pas facile de contraindre l’internaute de changer de navigateur.

En cliquant sur l’image, il est possible de voir les propriétés de l’image. Si la taille de l’image a été modifiée, le chiffre modifié apparaît en gras, mais un symbole d’annulation permet de revenir à la taille standard.

Un commentaire de l’image est intéressant et utile car il permet à l’internaute d’avoir du texte à lire en attendant le chargement de l’image (fonction du navigateur), ainsi que d’avoir une légende et de plus ce texte apporte plus d’infos aux moteurs pour le référencement. Pour cela il faut renseigner la partie Sec. (Attribut <ALT> de la balise <IMG>).

La bordure par défaut est 0 et l’alignement est « par défaut » (l’image est interprétée comme « une lettre » dans le paragraphe courrant). 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.

Reprendre les pages concernant chaque île et intégrer les images suivantes après le texte descriptif de l’île et en centrant les paragraphes contenant les images :

  • 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 dans la fenêtre « Propriétés ».

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

Sur la page « Autres îles », créer un tableau de 6 lignes et de 2 colonnes. Mettre le texte relatif à l’île dans la cellule de gauche. S’il n’y a pas de photo pour l’île, fusionner les cellules de la ligne. Sinon mettre les photos YCA_Brunec.jpg, Quinio_gueotec.jpg et Quinio_Guiriden.jpg et insérer un signet pour les titres de ces îles. Les titres sont à mettre en style HMTL « En-tête 2 ».

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

<img src="images/YCA_Avion_cigogne.jpg" alt="Photo YCA Quimper - Glénan : Fort Cigogne" width="300" height="225">

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, sinon ne pas renseigner l’attribut. L’argument Alternatif (ALT) permet l’affichage d’informations par rapport à l’image.

De nombreux autres arguments comme ALIGN … sont disponibles.

Une carte animée

Une carte des Glénan (carte_glenan.gif) est disponible avec le package téléchargé. Elle se situe sur la page « Les îles de Glénan », après la liste des îles. Pour les internautes n’ayant jamais visité les Glénan, il serait intéressant d’avoir une vignette (de 150 pixels de large) de la photo représentant l’île lors du passage de la souris et, au clic, d’aller directement sur la page concernée.

La carte des Glénan a une taille de 600 x 424 pixels. Ajoutés aux 150 pixels du menu, la taille totale dépasse les 650 pixels imprimables. Cette taille sera donc réduite à 450 pixels de largeur pour garder la possibilité d’imprimer la page.

Découpes d’images

Ouvrir dans Fireworks le fichier carte_glenan.gif.

Utiliser le menu « Modification – Document – Taille de l’image… ». Mettre 450 pour la largeur en pixels, sans toucher aux autres paramètres, et valider.

Sélectionner l’outil découpe et faire un rectangle dans le tiers supérieur de la carte. La taille et le positionnement exacts de l’objet seront traités après.

La taille de la découpe permettant l’affichage de la vignette doit avoir 150 pixels de large. La majorité des photos qui vont servir de vignette ont actuellement une taille de 300 x 225 pixels. Donc les vignettes auront une taille de 150 x 112 pixels (il n’existe pas de ½ pixel).

L’informatique utilise un repère orthonormé dont le coin supérieur gauche de l’image est le point (0,0). L’axe des X est orienté vers la droite et l’axe des Y vers le bas. Il faut donc positionner notre découpe comme suit : L : 150 ; H : 112 ; X : 300 ; Y : 0.

Il est inutile de créer un lien sur la découpe, mais souhaitable de modifier l’optimisation de l’image. Les découpes peuvent permettrent aussi de découper une image avec une optimisation différente suivant l’intérêt ou le sujet des zones dans l’image.

Utiliser le menu « Fichier – Exporter… ». Sélectionner le site Dreamweaver. Il est important d’exporter le HTML pour éviter de reconstruire le tableau contenant les découpes d’images. Pour mieux évaluer le poids des fichiers générés, il est intéressant de créer un dossier nommé « carte » dans lequel les objets de la découpe seront stockés.

Utiliser l’ajout d’une couleur (celle de la mer avec une profondeur supérieure à 5 m) pour éviter un différentiel de couleur entre les zones de découpe (voir le cours sur le traitement de l’image pour plus d’informations)

Enregistrer la carte au format PNG pour avoir la possibilité de modifier les découpes ultérieurement.

Traitement par lots

Au lieu de diminuer une à une la taille des images pour obtenir 115 x112, un traitement par lot peut être appliqué (scripts ou batch dans d’autres logiciels de dessin). Les images suivantes seront traitées : Quinio_Guiriden.jpg ; Quinio_gueotec.jpg ; YCA_Avion_penfret.jpg ; YCA_Brunec.jpg ; YCA_Avion_cigogne.jpg ; YCA_Avion_drenec.jpg ; YCA_Avion_loch.jpg ; YCA_Avion_moutons.jpg ; YCA_Avion_nicolas_global.jpg.

Si vous ne souhaitez pas trier dans le dossier images, vous pouvez le dupliquer pour réaliser l’exercice. Attention néanmoins à bien effectuer une copie des médias pour ne jamais travailler avec les originaux. Cela évitera également de supprimer par mégarde des documents originaux n’existant pas en double.

Dans Fireworks, utiliser le menu « Fichier – Traitement par lots… ». Sélectionner les images à traiter. Si toutes les images sont dans un dossier, utiliser le bouton « Ajouter tout » et cliquer sur « Suivant ».

Plusieurs options de traitement par lots sont disponibles. Sélectionner :

  • Exporter avec comme paramètres : JPEG – Fichier réduit (une qualité supérieure générerait des fichiers d’un poids total de plus de 30 ko).
  • Echelle avec Mise à l’échelle pour cette taille (150 et 112 pixels). Certaines images n’auront pas leur rapport H/L de préservé, mais l’intégration dans la découpe aurait généré le même problème. Il faut néanmoins faire attention à ce genre de problème et l’éviter en sélectionnant judicieusement les médias à intégrer ainsi que les cadrages. Il n’est pas évident (même en cherchant) de trouver la distorsion sans avoir une connaissance des lieux ou des repères sur la photos.
  • Renommer en ajoutant un préfixe : mini_ (touche 8/_ sur les PC et _/- sur les Mac) pour éviter les espace, mais en gardant tout de même une séparation entre les mots.

Cliquer sur « Suivant ». Il est possible d’enregistrer le script si vous devez réutiliser le paramétrage pour d’autres images. Par défaut, les nouvelles images sont déposées dans le dossier d’origine (celui où se trouve les images à traiter). Si le traitement est effectué plusieurs fois, les sauvegardes successives des originaux s’écraseront les unes sur les autres dans le dossier « Original Files ».

Cliquer sur « Lot » pour lancer le traitement. Le temps de traitement dépend de la taille des images, de la puissance de l’ordinateur… A la fin, un message prévient l’utilisateur que le traitement est terminé. Le poids total des 9 images est de 17 ko.

Le traitement par lots est relativement pratique pour les photos provenant des appareils photos numériques.

Zones réactives

Dans Dreamweaver, sur la page « Les îles » et après la liste des îles, insérer la carte des îles découpée et exportée par Fireworks. Utiliser le menu « Insertion – Objets images – HTML Fireworks », puis « Parcourir… » pour sélectionner le fichier « carte_glenan.htm » et valider. Sélectionner le tableau contenant la carte et le centrer. Faire un aperçu dans le navigateur (F12) pour valider si la découpe de la carte est correcte (sans espace entre les zones).

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 propriétés d’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. ».

De ce fait, le rectangle et le cercle sont donc suffisants dans notre cas. Toutefois, il est possible d’utiliser la forme polygonale pour faire des formes plus imbriquées.

Cliquer sur le coin supérieur droit de l’image et donner un nom intelligent à cette zone « Glenan_decoupe » par exemple.

Cliquer sur la partie de la carte contenant l’île du Loc’h. Noter « Glenan1 » dans la zone de saisie « Carte » et utiliser « l’outil de zone réactive ovale » puis faire un rond englobant l’île du Loc’h.

Sélectionner la page sur le Loc’h dans les liens et renseigner une balise alternative dans « Sec. ».

Continuer de créer des zones réactives de formes rectangulaires ou rondes

Faire de même sur la partie de carte contenant Penfret en nommant la carte « Glenan2 ». Pour Guiriden qui se situe situe sur les deux parties, il faut créer deux zones.

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). Ne pas oublier de faire le lien sur le signet pour guiriden, brunec et guéotec qui se trouvent sur la page « autres_iles.htm »

Le code HTML pour chaque carte-image 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="Glenan1" id="Glenan1">

<area shape="circle" coords="205,260,37" href="loch.htm" alt="L'île du Loc'h et son lac">

<area shape="rect" coords="188,174,251,196" href="cigogne.htm" alt=" Fort Cigogne…">

…</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"; "polygon" ) 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 chevauchement 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=" carte/carte_glenan.gif" USEMAP="#Glenan1" WIDTH="450" HEIGHT="318">

Comportement

Il est maintenant possible d’avoir une info bulle en se déplaçant sur chaque île principale de la carte. Un clic sur la carte entraîne l’internaute sur l’île considérée. Il reste maintenant à ajouter une photo de l’île survolée par la souris dans la zone de découpe.

Copier le dossier vignette_images contenant les images de largeur de 150 pixels dans la racine du site pour les intégrer dans la page des autres_iles.htm

Cliquer sur la zone de découpe pour vérifier qu’elle porte bien un nom « Glenan_decoupe », sinon il sera relativement difficile de savoir quelle image intervertir.

Sélectionner la zone réactive du Loc’h.

Dans le groupe de panneaux « Balise », sélectionner l’onglet « Comportement » ou utiliser le menu « Fenêtre – Comportements » (Maj+F3). Cliquer sur le bouton « + » et sélectionner le comportement « Permuter une image ».

Dans la liste des images, sélectionner l’image « Glenan_decoupe », puis cliquer sur « Parcourir… » et sélectionner l’image « mini_YCA_Avion_loch.jpg » ensuite valider. Même si les images sont relativement petites en poids (autour de 2 ko), il est préférable de laisser cochée la case « Précharger les images » ce qui induit que, quand l’internaute se déplace sur la zone réactive, l’interversion se fait depuis le cache du navigateur et non pas en téléchargement depuis Internet. Dans ce cas, il est aussi préférable de restaurer les images quand la souris sort de la zone réactive (onMouseOut).

Continuer à appliquer les comportements sur les différentes zones réactives. Le léger différentiel dans le rapport hauteur/largeur de certaines images n’est pas évident.

Il existe en standard de nombreux comportements, mais avec Macromedia Extension Manager il est possible d’en implémenter d’autres. Les comportements intègrent en principe du javascript dans la page.

Compléter le contenu des 17 pages du site. Le résultat final est visible ici.

 

 


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