PDF (adobe.com)

Insertion d'une image



Lorsque vous insérez une image dans un document Dreamweaver, le programme crée une référence à ce fichier d'image dans le code source HTML. Pour que cette référence soit correcte, le fichier d'image doit résider sur le site. Dans le cas contraire, Dreamweaver vous invite à copier le fichier sur le site.

Vous pouvez également insérer des images de façon dynamique. Les images dynamiques sont des images qui changent souvent ; par exemple, les systèmes de rotation de bannières publicitaires qui sélectionnent les bannières de manière aléatoire, puis affichent l'image de la bannière sélectionnée lors de l'affichage d'une page.

Après avoir inséré une image, vous pouvez définir les options d'accessibilité aux balises d'image qui pourront être lues par les lecteurs d'écran destinés aux utilisateurs malvoyants. Ces attributs peuvent être modifiés dans le code HTML.

Vous trouverez un didacticiel consacré à l'insertion d'images à l'adresse www.adobe.com/go/vid0148_fr.

  1. Placez le point d'insertion à l'endroit où doit apparaître l'image dans la fenêtre de document, puis procédez de l'une des manières suivantes :

    • Dans la catégorie Commun du panneau Insertion, cliquez sur l'icône Images .

    • Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Images et sélectionnez l'icône Image. Lorsque l'icône Image est affichée dans le panneau Insertion, vous pouvez la faire glisser vers la fenêtre du document (ou la fenêtre du mode Code si vous travaillez sur le code).

    • Choisissez Insertion > Image.

    • Faites glisser une image à partir du panneau Actifs (Fenêtre > Actifs) vers l'emplacement souhaité dans la fenêtre de document, puis passez à l'étape 3.

    • Faites glisser une image à partir du panneau Fichiers vers l'emplacement souhaité dans la fenêtre de document, puis passez à l'étape 3.

    • Faites glisser une image à partir du bureau vers l'emplacement désiré sur la page, puis passez à l'étape 3.

  2. Dans la boîte de dialogue qui s'affiche, procédez de l'une des manières suivantes :

    • Sélectionnez Système de fichiers pour choisir un fichier d'image.

    • Sélectionnez Source de données pour choisir une source d'images dynamiques.

    • Cliquez sur le bouton Sites et serveurs pour choisir un fichier d'image dans un dossier distant de l'un de vos sites Dreamweaver.

  3. Parcourez l'arborescence pour sélectionner l'image ou la source de contenu à insérer.

    Tant que le document sur lequel vous travaillez n'a pas encore été enregistré, Dreamweaver crée automatiquement une référence d'emplacement de fichier de type file://. Lorsque vous enregistrez le document sur le site, Dreamweaver convertit cette référence en indiquant un chemin relatif au document.

    Remarque : Lors de l'insertion d'images, vous pouvez également utiliser un chemin absolu vers une image qui réside sur un serveur distant (c'est-à-dire une image qui n'est pas disponible sur le disque dur local). Toutefois, si vous constatez des problèmes de performances lorsque vous travaillez, vous pouvez décider de désactiver l'affichage de l'image en mode Création en désélectionnant l'option Commandes > Afficher les fichiers externes.
  4. Cliquez sur OK. La boîte de dialogue Attributs d'accessibilité aux balises d'image s'affiche si elle a été activée dans les préférences (Edition > Préférences).
  5. Tapez des valeurs dans les zones Texte secondaire et Description longue, puis cliquez sur OK.

    • Dans la zone Texte secondaire, entrez un nom ou une brève description de l'image. Le lecteur d'écran lit les informations que vous entrez ici. N'entrez pas plus de 50 caractères. Pour de plus longues descriptions, entrez plutôt, dans la zone de texte Description longue, un lien vers un fichier donnant davantage d'informations à propos de l'image.

    • Dans la zone de texte Description longue, saisissez l'emplacement du fichier à afficher lorsque l'utilisateur clique sur l'image ou cliquez sur l'icône du dossier pour naviguer jusqu'à un fichier. Cette zone de texte fournit un lien vers un fichier qui concerne ou donne davantage d'informations sur l'image.

    Remarque : Vous pouvez entrer les informations dans une seule zone de texte ou les deux, selon vos besoins. Le lecteur d'écran lit l'attribut Alt de l'image.
    Remarque : Si vous cliquez sur Annuler, l'image s'affiche dans le document, mais Dreamweaver ne lui associe ni balises ni attributs d'accessibilité.
  6. Dans l'inspecteur Propriétés (Fenêtre > Propriétés), définissez les propriétés de l'image.

Définition des propriétés de l'image

L'inspecteur Propriétés Images vous permet de définir les propriétés d'une image. Pour voir toutes les propriétés illustrées, cliquez sur la flèche d'agrandissement, dans le coin inférieur droit de l'inspecteur Propriétés.

Afficher le graphique à sa taille d'origine

  1. Choisissez la commande Fenêtre > Propriétés pour afficher l'inspecteur Propriétés pour une image sélectionnée.
  2. Dans la zone de texte située au-dessous de l'image miniature, définissez un nom d'image auquel vous pouvez faire référence lors de l'utilisation d'un comportement Dreamweaver (tel que Permuter une image) ou lors de l'utilisation d'un langage de script tel que JavaScript ou VBScript.
  3. Définissez les options de l'image.
    L et H
    La largeur et la hauteur de l'image, en pixels. Dreamweaver met automatiquement à jour ces zones de texte avec les dimensions d'origine de l'image lorsque vous insérez une image dans une page.

    Si vous définissez pour L (largeur) et H (hauteur) des valeurs qui ne correspondent pas aux dimensions réelles de l'image, celle-ci risque de ne pas s'afficher correctement dans un navigateur (Pour revenir aux valeurs d'origine, cliquez sur les étiquettes de zone de texte L et H ou sur le bouton Rétablir la taille originale de l'image qui apparaît à droite des zones de texte L et H une fois que vous avez tapé de nouvelles valeurs.

    Remarque : Vous pouvez modifier ces valeurs pour modifier l'échelle d'affichage de cette instance de l'image, mais cette technique ne diminuera pas le temps de chargement, puisque le navigateur chargera la totalité de l'image à son échelle normale avant de la réduire. Pour réduire le temps de téléchargement et être sûr que toutes les instances de l'image sont affichées aux mêmes dimensions, utilisez une application de retouche d'image pour adapter les proportions de l'image.

    Src
    Spécifie le fichier source de l'image. Tapez le chemin d'accès ou cliquez sur l'icône du dossier pour trouver le fichier source et le sélectionner.

    Lien
    Spécifie un lien hypertexte pour l'image. Faites glisser l'icône Pointer vers un fichier dans le panneau Fichiers, cliquez sur l'icône de dossier pour rechercher et sélectionner un document de votre site ou tapez directement l'URL.

    Alignement
    Aligne l'image et le texte sur la même ligne.

    Sec
    Spécifie le texte secondaire qui apparaîtra à la place de l'image dans les navigateurs de type texte seulement, ou dans les navigateurs dont l'utilisateur a désactivé le téléchargement automatique des images. Pour les utilisateurs malvoyants qui utilisent un synthétiseur vocal avec un navigateur en mode texte, le texte est lu. Dans certains navigateurs, ce texte apparaît également lorsque le pointeur se trouve sur l'image.

    Nom de la carte et outils Zone réactive
    Permettent de nommer et de créer une carte graphique côté client

    Espace V. et Espace H.
    Ajoutent un espace, en pixels, le long des côtés de l'image. Espace V ajoute un espace le long des bords supérieur et inférieur d'une image. Espace H ajoute un espace le long des bords gauche et droit d'une image.

    Cible
    Spécifie la fenêtre ou le cadre dans lequel la page liée devrait être chargée. Cette option n'est pas disponible lorsque l'image n'est pas liée à un autre fichier. Les noms de tous les cadres dans le jeu de cadres actuel s'affichent dans la liste Cible. Vous pouvez également choisir parmi les noms de cible réservés suivants :

    • _blank charge le fichier lié dans une nouvelle fenêtre, sans nom, du navigateur.

    • _parent charge le fichier lié dans le jeu de cadres parent, ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n'est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur.

    • _self charge le fichier lié dans le même cadre, ou dans la même fenêtre, que le lien. Cette cible étant celle par défaut, vous n'avez généralement pas à la spécifier.

    • _top charge le fichier lié dans la fenêtre de base du navigateur, supprimant ainsi tous les cadres.

    Bordure
    Correspond à la largeur, en pixels, de la bordure de l'image. La valeur par défaut est Pas de bordure.

    Modifier
    Lance l'éditeur d'image que vous avez indiqué dans les préférences d'éditeurs externes et ouvre l'image sélectionnée.

    Modification des paramètres d'une image
    affiche la boîte de dialogue Aperçu d'image, où vous pouvez optimiser l'image.

    Recadrer
    Permet de rogner une image en supprimant les zones indésirables de l'image sélectionnée.

    Rééchantillonner
    Permet de rééchantillonner une image redimensionnée et d'en améliorer la qualité dans ses nouvelles taille et forme.

    Luminosité et contraste
    Ajuste la luminosité et le contraste d'une image

    Accentuer
    Permet d'ajuster la netteté d'une image.

    Rétablir la taille
    Ramène les valeurs L et H à la taille originale de l'image. Ce bouton apparaît à droite des zones de texte L et H lorsque vous ajustez les valeurs de l'image sélectionnée.

Modification des attributs d'accessibilité d'une image dans le code

Si vous avez inséré des attributs d'accessibilité pour une image, vous pouvez modifier ces valeurs dans le code HTML.

  1. Sélectionnez l'image dans la fenêtre de document.
  2. Effectuez l'une des opérations suivantes :

    • Modifiez les attributs de l'image en mode Code.

    • Cliquez du bouton droit de la souris (Windows) ou en maintenant la touche Ctrl enfoncée (Macintosh), puis choisissez Modifier la balise.

    • Modifiez la valeur Alt dans l'inspecteur Propriétés.