A propos des images

Il existe de nombreux formats de fichiers graphiques, mais les pages Web en utilisent généralement trois : GIF, JPEG et PNG. Les formats GIF et JPEG sont les plus répandus ; ils peuvent être affichés dans la plupart des navigateurs.

GIF (Graphic Interchange Format)

Les fichiers GIF utilisent un maximum de 256 couleurs et sont destinés à l’affichage d’images à tons non continus ou d’images comportant de larges zones de couleurs unies, telles que les barres de navigation, les boutons, les icônes, les logos ou d’autres images contenant des tons et des couleurs uniformes.

JPEG (Joint Photographic Experts Group)

Le format de fichier JPEG est le format supérieur destiné aux photographies ou aux images à tons continus, car de tels fichiers peuvent contenir des millions de couleurs. Lorsque la qualité d’un fichier JPEG augmente, sa taille et son temps de téléchargement augmentent également. Il est souvent possible d’obtenir un bon compromis entre la qualité de l’image et sa taille de fichier en compressant un fichier JPEG.

Le format de fichier PNG (Portable Network Group)

Le format de fichier PNG est un format de remplacement non breveté pour les fichiers GIF, qui inclut la prise en charge des images à couleurs indexées, en niveaux de gris et en couleurs vraies ainsi que la prise en charge du canal alpha pour la transparence. PNG est le format de fichier natif d’Adobe® Fireworks®. Les fichiers PNG conservent toutes les informations d’origine sur les calques, les vecteurs, les couleurs et les effets (comme par exemple des ombres portées) et tous ces éléments peuvent être modifiés à tout moment. Les fichiers doivent avoir l’extension .png pour être reconnus comme fichiers PNG par Dreamweaver.

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.

Pour suivre un didacticiel sur l’insertion d’images, voir Ajout d’images.

  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.

Propriétés de l’image dans l’inspecteur Propriétés.
  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.

    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

    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.

    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.

    Mettre à jour depuis l’original

    Lorsque l’image Web (c’est-à-dire l’image de la page Dreamweaver) n’est pas synchronisée avec le fichier Photoshop d’origine, Dreamweaver détecte que le fichier d’origine a été mis à jour et affiche l’une des flèches de l’icône d’objet dynamique en rouge. Lorsque vous sélectionnez l’image Web en mode Création et que vous cliquez sur le bouton Mettre à jour depuis l’original dans l’inspecteur Propriétés, l’image se met à jour automatiquement avec tous les changements effectués dans le fichier Photoshop d’origine.

    Modification des paramètres d’une image

     Affiche la boîte de dialogue Optimisation 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

     Permet d’ajuster la luminosité et le contraste d’une image.

    Accentuer

     Permet d’ajuster la netteté d’une image.

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.

Redimensionnement visuel d’une image

Dans Dreamweaver, vous pouvez redimensionner visuellement certains éléments comme des images, des plug-ins, des fichiers Shockwave ou SWF, des applets et des contrôles ActiveX dans Dreamweaver.

Le redimensionnement visuel d’une image permet de mieux voir comment l’image affecte la mise en forme en différentes dimensions. Il n’adapte pas les dimensions de l’image aux proportions que vous avez spécifiées. Si vous redimensionnez visuellement une image dans Dreamweaver, mais que vous n’utilisez pas d’application de retouche d’image (comme Adobe Fireworks) pour en adapter les proportions aux dimensions désirées, le navigateur de l’utilisateur devra le faire lorsque la page sera chargée. Cela risque d’entraîner l’allongement du temps de téléchargement de la page et l’affichage incorrect de l’image dans le navigateur. 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.

Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rééchantillonner afin de l’adapter à ses nouvelles dimensions. Le rééchantillonnage ajoute ou enlève des pixels d’images JPEG ou GIF redimensionnées afin qu’elles correspondent le mieux possible à l’aspect des images originales. Le rééchantillonnage d’une image réduit la taille de son fichier, ce qui permet d’en accélérer le téléchargement.

Redimensionnement visuel d’un élément

  1. Sélectionnez l’élément (par exemple, une image ou un fichier SWF) dans la fenêtre de document.

    Des poignées de redimensionnement apparaissent à droite et en bas de l’élément, et dans le coin inférieur droit. Si ces poignées n’apparaissent pas, cliquez à l’extérieur de l’élément à redimensionner, puis sélectionnez-le à nouveau ou cliquez sur la balise correspondante dans le sélecteur de balises.

  2. Pour redimensionner l’élément, utilisez l’une des méthodes suivantes :
    • Pour ajuster la largeur de l’élément, déplacez la poignée à droite de la sélection.
    • Pour ajuster la hauteur de l’élément, déplacez la poignée au bas de la sélection.
    • Pour ajuster simultanément la largeur et la hauteur de l’élément, faites glisser la poignée de l’angle de la sélection.
    • Pour conserver les proportions de l’élément (rapport largeur/hauteur) lorsque vous modifiez ses dimensions, faites glisser la poignée de l’angle de la sélection tout en appuyant sur la touche Maj.
    • Pour ajuster la largeur et la hauteur d’un élément à une taille précise, (par exemple, 1x1 pixel), utilisez l’inspecteur Propriétés pour entrer une valeur numérique. Les éléments peuvent être redimensionnés visuellement à une taille minimale de 8 x 8 pixels.
  3. Pour rétablir la taille originale d’un élément redimensionné, supprimez les valeurs des zones de texte L et H ou cliquez sur le bouton Rétablir la taille dans l’inspecteur Propriétés.

Rétablissement de la taille originale d’une image

  1. Cliquez sur le bouton Rétablir la taille dans l’inspecteur Propriétés des images.

Rééchantillonnage d’une image redimensionnée

  1. Redimensionnez l’image de la manière décrite ci-dessus.
  2. Cliquez sur le bouton Rééchantillonner dans l’inspecteur Propriétés des images.

    Remarque :

    Vous ne pouvez pas rééchantillonner les espaces réservés pour une image ou les éléments autres que les images bitmap.

Insertion d’un espace réservé pour l’image

Un espace réservé pour une image est un graphique que vous utilisez jusqu’à ce que le dessin final soit prêt pour être ajouté à une page Web. Vous pouvez définir la taille et la couleur de l’espace réservé et lui donner une étiquette de texte.

  1. Dans la fenêtre de document, placez le point d’insertion à l’endroit où vous voulez insérer un espace réservé pour un graphique.
  2. Choisissez Insertion > Objets image > Espace réservé pour l’image.

  3. Dans la zone de texte Nom (facultatif), tapez le texte que vous souhaitez voir apparaître comme étiquette de l’espace réservé pour l’image. Laissez la zone de texte vide si vous ne voulez pas faire apparaître d’étiquette. Le nom doit commencer par une lettre et ne peut contenir que des lettres ou des chiffres : les espaces et les caractères ASCII étendus ne sont pas autorisés.
  4. (Obligatoire) Dans les zones de texte Largeur et Hauteur, saisissez un nombre pour définir la taille de l’image en pixels.
  5. (Facultatif) Pour Couleur, procédez de l’une des manières suivantes pour appliquer une couleur :
    • Utilisez le sélecteur de couleur pour sélectionner une couleur.
    • Entrez la valeur hexadécimale de la couleur (par exemple #FF0000).
    • Entrez le nom d’une couleur sécurisée pour le Web (par exemple rouge).
  6. (Facultatif) Dans Texte secondaire, entrez une description de l’image pour les personnes utilisant un navigateur en mode texte.

    Remarque :

    Une balise image est insérée automatiquement dans le code HTML, avec un attribut src vide.

  7. Cliquez sur OK.

    Les attributs de couleur et de taille ainsi que l’étiquette de l’espace réservé s’affichent comme suit :

    Espace réservé pour image, avec attributs.

    Lorsqu’ils sont visualisés dans un navigateur, le texte de l’étiquette et celui de la taille ne s’affichent pas.

Remplacement d’un espace réservé pour une image

Un espace réservé pour image n’affiche pas d’image dans un navigateur. Avant de publier votre site, il convient de remplacer tous les espaces réservés pour une image que vous avez ajoutés par des fichiers d’image adaptés au Web, tels que des images GIF ou JPEG.

Si vous possédez Fireworks, vous pouvez créer un nouveau graphique à partir d’un espace réservé pour image dans Dreamweaver. La nouvelle image reprend la même taille que celle de l’espace réservé pour l’image. Vous pouvez modifier l’image, puis la remplacer dans Dreamweaver.

  1. Dans la fenêtre Document, procédez de l’une des manières suivantes :
    • Double-cliquez sur l’espace réservé pour l’image.
    • Cliquez sur l’espace réservé pour l’image pour le sélectionner puis, dans l’inspecteur Propriétés (Fenêtre > Propriétés), cliquez sur l’icône du dossier à côté de la zone de texte Src.
  2. Dans la boîte de dialogue Source de l’image, localisez l’image que vous voulez utiliser pour remplacer l’espace réservé, puis cliquez sur OK.

Définition des propriétés de l’espace réservé pour l’image

Pour définir les propriétés d’un espace réservé pour l’image, sélectionnez l’espace réservé dans la fenêtre de document, puis choisissez la commande Fenêtre > Propriétés pour afficher l’inspecteur Propriétés. Cliquez sur la flèche d’agrandissement dans l’angle inférieur droit pour afficher toutes les propriétés.

Utilisez l’inspecteur Propriétés pour définir un nom, une largeur, une hauteur, une source d’image, une autre description de texte, un alignement ou une couleur pour l’espace réservé pour l’image.

Inspecteur Propriétés d’un espace réservé pour image.

Dans l’inspecteur Propriétés de l’espace réservé, la zone de texte grise et la zone de texte Aligner sont désactivées. Vous pouvez définir ces propriétés dans l’inspecteur Propriétés de l’image lorsque vous remplacez l’espace réservé par une image.

  1. Parmi les options suivantes, définissez celles de votre choix :

    L et H

    Définissent la largeur et la hauteur de l’espace réservé pour l’image, en pixels.

    Src

    Spécifie le fichier source de l’image. Pour un espace réservé pour une image, cette zone de texte est vide. Cliquez sur le bouton Parcourir pour sélectionner une image à utiliser en remplacement du graphique de l’espace réservé.

    Lien

    Spécifie un lien hypertexte pour l’espace réservé de 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.

    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.

    Créer

    Permet de lancer Fireworks pour créer une image de remplacement. Le bouton Créer est désactivé, sauf si Fireworks est également installé sur votre ordinateur.

    Mettre à jour depuis l’original

    Lorsque l’image Web (c’est-à-dire l’image de la page Dreamweaver) n’est pas synchronisée avec le fichier Photoshop d’origine, Dreamweaver détecte que le fichier d’origine a été mis à jour et affiche l’une des flèches de l’icône d’objet dynamique en rouge. Lorsque vous sélectionnez l’image Web en mode Création et que vous cliquez sur le bouton Mettre à jour depuis l’original dans l’inspecteur Propriétés, l’image se met à jour automatiquement avec tous les changements effectués dans le fichier Photoshop d’origine.

    Couleur

    Spécifie une couleur pour l’espace réservé de l’image.

Modification d’images dans Dreamweaver

Vous pouvez rééchantillonner, recadrer, optimiser et accentuer les images dans Dreamweaver. Vous pouvez également régler leur luminosité et leur contraste.

Fonctions de retouche d’image

Dreamweaver comprend des fonctions basiques de retouche d’image, ce qui vous évite de devoir lancer une application externe pour effectuer cette tâche (par exemple, Fireworks ou Photoshop). Les outils de retouche d’image de Dreamweaver sont conçus pour un travail simplifié avec les concepteurs de contenu responsables de la création des fichiers d’image utilisés sur votre site Web.

Remarque :

Il n’est pas nécessaire d’installer Fireworks ou d’autres applications de retouche d’image sur votre ordinateur pour utiliser les fonctions de retouche d’image de Dreamweaver.

  1. Choisissez Modifier > Image. Définissez l’une des fonctions de retouche d’image Dreamweaver suivantes :

    Rééchantillonner

    Ajoute ou enlève des pixels d’images JPEG ou GIF redimensionnées afin qu’elles correspondent le mieux possible à l’aspect des images originales. Le rééchantillonnage d’une image réduit la taille de son fichier, ce qui permet d’en accélérer le téléchargement.

    Lorsque vous redimensionnez une image dans Dreamweaver, vous pouvez la rééchantillonner afin de l’adapter à ses nouvelles dimensions. Lorsqu’un objet bitmap est rééchantillonné, des pixels sont ajoutés à l’image ou en sont enlevés afin de l’agrandir ou de la réduire. En général, le rééchantillonnage d’une image à une résolution supérieure provoque une faible perte de qualité. Le rééchantillonnage à une résolution inférieure, en revanche, provoque toujours une perte de données et donne une moins bonne qualité.

    Recadrer

    Permet de réduire la surface des images. En général, il est utile pour mettre en évidence le sujet de l’image et supprimer les aspects indésirables qui entourent le centre d’intérêt de l’image.

    Luminosité et contraste

    Modifie la luminosité et le contraste des pixels qui composent l’image. Ceci affecte les surbrillances, les ombres et les demi-tons d’une image. Cette fonction est utilisée pour corriger les images trop sombres ou trop claires.

    Accentuer

    Ajuste la mise au point d’une image en augmentant le contraste des bords sur l’image. Lorsque vous scannez une image ou que vous prenez une photo numérique, la plupart des logiciels de capture d’images estompent par défaut les bords des objets photographiés. Cela empêche les détails extrêmement précis de se perdre dans les pixels dont sont constituées les images numériques. Cependant, il est souvent nécessaire d’accentuer l’image pour faire ressortir les détails dans les fichiers d’image numérique, ce qui augmente le contraste des bords et rend l’image encore plus nette.

    Remarque :

    Les fonctions de modification d’images de Dreamweaver s’appliquent uniquement aux formats de fichier JPEG et GIF. Les autres formats de fichiers d’image bitmap ne peuvent pas être modifiés à l’aide de ces fonctions.

Recadrage d’une image

Dreamweaver permet de recadrer (ou rogner) les images bitmap.

Remarque :

Lorsque vous recadrez une image, le fichier d’image source est modifié sur le disque. Il peut donc s’avérer utile de conserver une copie de sauvegarde du fichier d’image au cas où vous auriez besoin de revenir à l’image d’origine.

  1. Ouvrez la page qui contient l’image à recadrer, sélectionnez l’image et procédez de l’une des manières suivantes :
    • Cliquez sur l’icône Recadrer
    • Choisissez Modifier > Image > Recadrer.
    • Des poignées de recadrage apparaissent autour de l’image sélectionnée.
  2. Ajustez-les jusqu’à ce que la surface de l’image à conserver soit entourée d’une zone limite.
  3. Double-cliquez dans cette zone ou appuyez sur Entrée pour recadrer la sélection.
  4. Une boîte de dialogue vous informe que le fichier image que vous recadrez sera modifié sur le disque. Cliquez sur OK. Chaque pixel de l’image bitmap situé hors de la zone limite est supprimé mais les autres objets de l’image ne sont pas affectés.
  5. Vérifiez à l’aide de l’aperçu que l’image correspond à vos attentes. Si ce n’est pas le cas, choisissez Edition > Annuler Recadrer pour revenir à l’image d’origine.

    Remarque :

    Vous pouvez annuler l’effet de la commande Recadrer (et revenir au fichier d’image d’origine) jusqu’au moment où vous quittez Dreamweaver ou alors modifiez le fichier dans une application de retouche d’image.

Optimisation d’une image

Vous pouvez optimiser des images sur vos pages Web dans Dreamweaver.

  1. Ouvrez la page qui contient l’image à optimiser, sélectionnez l’image et procédez de l’une des manières suivantes :
    • Cliquez sur le bouton Modifier les paramètres de l’image dans l’inspecteur Propriétés de l’image.
    • Choisissez Modifier > Image > Optimiser.
  2. Apportez les modifications dans la boîte de dialogue Optimisation d’image, puis cliquez sur OK.

Accentuation d’une image

L’accentuation augmente le contraste des pixels autour des objets pour augmenter la définition de l’image et obtenir une meilleure netteté.

  1. Ouvrez la page qui contient l’image à accentuer, sélectionnez l’image et procédez de l’une des manières suivantes :
    • Cliquez sur le bouton Accentuer dans l’inspecteur Propriétés des images.
    • Choisissez Modifier > Image > Accentuer.
  2. Pour spécifier le degré d’accentuation appliqué par Dreamweaver à l’image, déplacez le curseur ou tapez une valeur comprise entre 0 et 10 dans la zone de texte. Lorsque vous ajustez la netteté de l’image à l’aide de la boîte de dialogue Accentuer, vous pouvez afficher un aperçu de l’image modifiée.
  3. Lorsque vous êtes satisfait de l’image, cliquez sur OK.
  4. Enregistrez vos modifications en choisissant Fichier > Enregistrer ou revenez à l’image d’origine en choisissant Edition > Annuler Accentuer.

    Remarque :

    Vous pouvez annuler l’effet de la commande Accentuer (et revenir au fichier d’image d’origine) uniquement avant d’enregistrer la page qui contient l’image. Une fois que vous avez enregistré la page, les modifications apportées à l’image sont définitivement enregistrées.

Ajustement de la luminosité et du contraste d’une image

La fonction Luminosité/Contraste modifie la luminosité ou le contraste des pixels qui composent l’image. Ceci affecte les surbrillances, les ombres et les demi-tons d’une image. Cette fonction est utilisée pour corriger les images trop sombres ou trop claires.

  1. Ouvrez la page qui contient l’image à ajuster, sélectionnez l’image et procédez de l’une des manières suivantes :
    • Cliquez sur le bouton Luminosité/Contraste dans l’inspecteur Propriétés des images.
    • Choisissez Modifier > Image > Luminosité/Contraste.
  2. Déplacez les curseurs de luminosité et de contraste pour modifier les valeurs à votre convenance. Les valeurs sont comprises entre -100 et 100.
  3. Cliquez sur OK.

Création d’une image survolée

Vous pouvez insérer des images survolées dans votre page. Une image survolée est une image qui, lorsqu’elle est visualisée dans un navigateur, change lorsque le pointeur vient se placer au-dessus d’elle.

Vous devez disposer de deux images pour créer l’image survolée : l’image principale (affichée au chargement de la page) et l’image secondaire (qui apparaît lorsque le pointeur est placé au-dessus de l’image principale). Les deux images utilisées doivent avoir les mêmes dimensions ; si ce n’est pas le cas, Dreamweaver redimensionne la seconde image en fonction de la taille de la première.

Les images survolées sont automatiquement définies pour répondre à l’événement onMouseOver. Vous pouvez configurer une image pour qu’elle réponde à un événement différent (par exemple, un clic de souris) ou modifier une image survolée.

  1. Dans la fenêtre de document, placez le point d’insertion à l’endroit où vous voulez insérer l’image survolée.
  2. Insérez l’image survolée à l’aide de l’une des méthodes suivantes :
    • Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Images puis sélectionnez l’icône Image survolée. Lorsque l’icône Image survolée s’affiche dans le panneau Insertion, vous pouvez la faire glisser jusqu’à la fenêtre de document.
    • Sélectionnez Insertion > Objets image > Image survolée.
  3. Définissez les options, puis cliquez sur OK.

    Nom de l’image

    Nom de l’image survolée.

    Image d’origine

    L’image qui doit s’afficher au chargement de la page. Entrez le chemin d’accès dans la zone de texte ou cliquez sur Parcourir et sélectionnez l’image.

    Image survolée

    L’image à afficher lorsque le pointeur est placé au-dessus de l’image originale. Entrez le chemin d’accès de l’image ou cliquez sur Parcourir pour la sélectionner.

    Précharger l’image survolée

    Précharge les images dans la mémoire cache du navigateur afin d’éviter tout délai lorsque vous faites passer le pointeur de la souris par-dessus l’image.

    Texte secondaire

    (Facultatif) Texte qui décrit l’image à l’intention des personnes utilisant un navigateur en mode texte.

    Si cliqué, aller à l’URL

    Le fichier à ouvrir lorsqu’un utilisateur clique sur l’image survolée. Entrez le chemin d’accès du fichier ou cliquez sur Parcourir pour le sélectionner.

    Remarque :

    Si vous ne définissez pas un lien pour l’image, Dreamweaver insère un lien nul (#) dans le code source HTML auquel le comportement de survol est attaché. Si vous supprimez le lien nul, l’image survolée ne fonctionne plus.

  4. Choisissez Fichier > Aperçu dans le navigateur ou appuyez sur la touche F12.

  5. Dans le navigateur, placez le pointeur au-dessus de l’image d’origine pour voir l’image survolée.

    Remarque :

    Il est impossible de voir l’effet d’une image survolée dans le mode Création.

Utilisation d’un éditeur d’image externe

Dans Dreamweaver, vous pouvez ouvrir une image sélectionnée dans un éditeur d’image externe. Lorsque vous revenez dans Dreamweaver après avoir enregistré le fichier d’image modifié, toutes les modifications apportées à l’image sont visibles dans la fenêtre de document.

Vous pouvez définir Fireworks comme principal éditeur d’image. Vous pouvez également définir quels types de fichier un éditeur peut ouvrir et vous pouvez sélectionner plusieurs éditeurs d’image. Par exemple, vous pouvez définir des préférences afin de démarrer Fireworks pour modifier les fichiers GIF et de lancer un éditeur d’image différent pour modifier les fichiers JPG ou JPEG.

Démarrage de l’éditeur d’image externe

  1. Effectuez l’une des opérations suivantes :
    • Double-cliquez sur l’image à modifier.
    • Cliquez avec le bouton droit de la souris (Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh) sur l’image à modifier, choisissez Modifier avec > Parcourir et sélectionnez un éditeur.
    • Sélectionnez l’image à modifier, puis cliquez sur Modifier dans l’inspecteur Propriétés.
    • Double-cliquez sur le fichier d’image dans le panneau Fichiers pour lancer l’éditeur d’image principal. Si vous n’avez pas indiqué d’éditeur d’image, Dreamweaver exécute l’éditeur par défaut de ce type de fichier.

    Remarque :

    Lorsque vous ouvrez directement une image à partir du panneau Fichiers, les fonctionnalités d’intégration de Fireworks sont inopérantes ; Fireworks n’ouvre pas le fichier original PNG. Pour utiliser ces fonctionnalités d’intégration de Fireworks, ouvrez les images à partir de la fenêtre de document.

    Si l’image mise à jour n’apparaît pas une fois de retour dans la fenêtre de Dreamweaver, sélectionnez l’image et cliquez sur le bouton Actualiser dans l’inspecteur Propriétés.

Définition d’un éditeur d’image externe pour un type de fichier existant

Vous pouvez sélectionner l’éditeur d’image à utiliser pour ouvrir et modifier les fichiers graphiques.

  1. Ouvrez la boîte de dialogue Types de fichiers/Editeurs en effectuant l’une des opérations suivantes :
    • Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche.
    • Choisissez la commande Edition > Modifier avec éditeur externe, puis sélectionnez Types de fichiers/Editeurs.
  2. Dans la liste Extensions, sélectionnez l’extension de fichier pour laquelle définir un éditeur externe.
  3. Cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs.
  4. Dans la boîte de dialogue Sélectionner un éditeur externe, recherchez l’application à démarrer en tant qu’éditeur pour ce type de fichier.

  5. Dans la boîte de dialogue Préférences, cliquez sur Principal si vous souhaitez que cet éditeur soit l’éditeur principal pour ce type de fichier.

  6. Si vous souhaitez configurer un éditeur supplémentaire pour ce type de fichier, répétez les étapes 3 et 4.

    Dreamweaver utilise automatiquement l’éditeur principal lorsque vous modifiez ce type d’image. Vous pouvez choisir l’un des autres éditeurs figurant dans la liste, à partir du menu déroulant de l’image, dans la fenêtre de document.

Ajout d’un nouveau type de fichier à la liste Extensions

  1. Ouvrez la boîte de dialogue Types de fichiers/Editeurs en effectuant l’une des opérations suivantes :

    • Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche.
    • Choisissez la commande Edition > Modifier avec éditeur externe, puis sélectionnez Types de fichiers/Editeurs.
  2. Dans la boîte de dialogue Types de fichiers/Editeurs, cliquez sur le bouton Ajouter (+) au-dessus de la liste Extensions.

    Une zone de texte s’affiche dans la liste Extensions.

  3. Tapez l’extension de fichier pour le type de fichier que vous voulez ouvrir avec l’éditeur.
  4. Pour sélectionner un éditeur externe pour le type de fichier, cliquez sur le bouton Ajouter (+) au-dessus de la liste Editeurs.
  5. Dans la boîte de dialogue qui apparaît alors, sélectionnez l’application à utiliser pour modifier ce type d’image.
  6. Cliquez sur Principal si vous désirez que ce programme soit l’éditeur principal pour ce type d’image.

Modification d’une préférence d’éditeur existante

  1. Ouvrez la boîte de dialogue Types de fichiers/Editeurs en effectuant l’une des opérations suivantes :

    • Choisissez Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh) et sélectionnez la catégorie Types de fichiers/Editeurs dans la liste de gauche.
    • Choisissez la commande Edition > Modifier avec éditeur externe, puis sélectionnez Types de fichiers/Editeurs.
  2. Dans la boîte de dialogue Types de fichiers/Editeurs, sélectionnez dans la liste Extensions le type de fichier que vous souhaitez modifier pour visualiser les éditeurs actuellement définis.

  3. Dans la liste Editeurs, sélectionnez l’éditeur que vous désirez affecter à ce type de fichier, puis procédez de l’une des manières suivantes :
    • Cliquez sur le bouton Ajouter (+) ou Supprimer (-), au-dessus de la liste Editeurs, pour ajouter ou supprimer un éditeur.
    • Cliquez sur le bouton Rendre principal pour définir l’éditeur à lancer par défaut pour la retouche.

Application de comportements aux images

Vous pouvez appliquer l’un des comportements disponibles à une image ou à la zone réactive d’une image. Lorsque vous appliquez un comportement à une zone réactive, Dreamweaver insère le code source HTML nécessaire dans la balise area. Trois comportements s’appliquent spécifiquement aux images : Précharger les images, Permuter une image et Restaurer l’interversion d’images.

Précharger les images

Place dans la mémoire cache du navigateur les images qui ne sont pas immédiatement affichées lors du chargement de la page (par exemple, les images de substitution appelées par un comportement, un élément PA ou une fonction en JavaScript). Cela évite à l’utilisateur d’attendre que ces images soient chargées, lorsqu’un événement déclenche leur apparition.

Permuter une image

Remplace une image par une autre, en modifiant l’attribut SRC de la balise img. Utilisez cette action pour créer des substitutions de boutons et autres effets sur des images (y compris la substitution de plusieurs images à la fois).

Restaurer l’image intervertie

Rétablit la dernière interversion d’images à son état d’origine. Cette action est automatiquement ajoutée par défaut lorsque vous associez l’action Permuter une image à un objet ; en principe, vous n’avez pas besoin d’y faire appel manuellement.

Vous pouvez également utiliser des comportements pour créer des systèmes de navigation plus sophistiqués, comme les menus de reroutage.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne