INFOS-AREA
  Aligner une image ou un texte et créer une image map ?
 
Alignement d’une image

Vous pouvez aligner une image de deux manières dans l’inspecteur de propriétés en utilisant les commandes d’alignement des textes ou d’alignement des images. (Windows > Propriétés)

L’alignement des textes place le paragraphe dans lequel l’image est insérée et peut être employé pour aligner une image sur la marge gauche, droite centrée.

Note : Les options d’alignement d’image ne fonctionnent pas avec tous les navigateurs.

1 Créez un nouveau document Fichier > Nouveau > HTML
2 Créez un tableau : 1 ligne - 2 colonnes
3 Ajoutez une image
4 A la suite, tapez un paragraphe de texte ou faites un copier/coller de texte.

Dans le menu déroulant d’alignement des textes de l’inspecteur des propriétés, notez que l’alignement d’une image est « par défaut ». Il place l’image sur la ligne de base de la ligne du texte.

5 Sélectionnez l’image et dans le menu « Aligner », choisissez l’option « Milieu ». L’image se place au milieu de la première ligne de votre paragraphe de texte.

6 Choisissez maintenant l’option « Gauche », votre image se place idéalement à gauche de votre paragraphe et est enveloppé par le texte si ce dernier est long.

7 Enregistrez votre document Fichier > Enregistrer sous (donnez un nom à votre document)

8 Appuyez sur F12 (Windows seulement) ou Fichier > Aperçu dans le navigateur et choisissez un navigateur (Internet Explorer, Firefox, Netscape, Opera…).

Espacement et marges des images

Comme vous l’avez vu précédemment, une image s’aligne sur le bord de la page sans espace ni marge. Dans Dreamweaver, vous pouvez employer les propriétés horizontales et verticales de l’espace dans l’inspecteur de propriétés pour créer une marge autour d’une image. La propriété horizontale de l’espace ajoute un espace à gauche et à droite de l’image, alors que la propriété verticale ajoute un espace au-dessus et au-dessous de l’image.

1 Dans le document que vous avez créés précédemment, sélectionnez l’image.

2 Dans l’inspecteur de propriétés, tapez 10 dans le champ « Espace V » pour l’espace Vertical et 20 dans le champ « Espace H » pour l’espace horizontal.

3 Une marge est créée entre le texte et l’image. L’espacement affecte également la distance entre l’image et le bord de la page.

4 Enregistrez votre document Fichier > Enregistrer

5 Appuyez sur F12 (Windows seulement) ou Fichier > Aperçu dans le navigateur et choisissez un navigateur (Internet Explorer, Firefox, Netscape, Opera…).

Créez une Image Map

Une image Map est un dispositif qui sert de navigation sur une image. Sur une image, vous pouvez créer des zones multiples (secteurs cliquables) et lui affecter un lien hypertexte ou une fonction particulière.

1 Créez un nouveau document Fichier > Nouveau > HTML
2 Ajoutez une image

3 Sélectionnez l’image et ouvrez l’inspecteur de propriétés (Fenêtre > Propriétés)
4 Cliquez sur l’« outil zone réactive polygone » en bas à gauche de l’inspecteur de propriétés et sur l’image dessinez un contour en cliquant à de multiples reprises autour du continent Amérique du sud.

Une zone bleue apparaît au-dessus de l’image, et l’inspecteur de propriétés des images map apparaît.

5 Dans le champ « Lien », vous avez la possibilité de donner un lien hypertexte à la zone bleue.

6 Dans le champ « Alt », tapez le nom « Amérique du sud » qui correspond à la description de la zone bleue.

7 Dans l’inspecteur de propriétés, vous pouvez également utiliser l’« outil zone réactive ovale » qui comme son nom l’indique crée des zones rondes ou ovales sur les images. De même, l’« outil zone réactive rectangulaire », permet de créer une zone cliquable rectangulaire autour d’un élément de l’image.

8 Enregistrez votre document Fichier > Enregistrer

9 Appuyez sur F12 (Windows seulement) ou Fichier > Aperçu dans le navigateur et choisissez un navigateur (Internet Explorer, Firefox, Netscape, Opera…).

Astuce : Créer une image map très précise

Lorsque vous voulez créer des liens sur une image (image map), vous pouvez rencontrer quelques difficultés. Surtout si les tracés doivent être très précis. Par exemple, pour créer des liens sur une carte géographique en détaillant pays par pays.

1 Il faut connaître la taille de votre image (100x150 par ex.)

2 Au lieu de créer vos liens approximativement, il suffit d’agrandir l’image à la taille souhaitée (sur un document vierge pour gagner de la place) et là vous y voyez plus clair.

3 Une fois que vous avez fini de mettre vos liens sur l’image, vous pouvez la redimensionner à la taille originale (les zones bleues de la map se réadapteront en homothétie).

4 Il ne vous reste plus qu’à faire un copier/coller dans votre page HTML et le tour est joué !


 
  Aujourd'hui sont déjà 7 visiteurs (37 hits) Ici! ;  
 
Ce site web a été créé gratuitement avec Ma-page.fr. Tu veux aussi ton propre site web ?
S'inscrire gratuitement