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.
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.
-
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 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).
- 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.
-
-
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.
-
- 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é.
.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.
-
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.
Permet de rogner une image en supprimant les zones indésirables de l’image sélectionnée.
Permet de rééchantillonner une image redimensionnée et d’en améliorer la qualité dans ses nouvelles taille et forme. 
Permet d’ajuster la luminosité et le contraste d’une image. 
Permet d’ajuster la netteté d’une image. Si vous avez inséré des attributs d’accessibilité pour une image, vous pouvez modifier ces valeurs dans le code HTML.
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.
-
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.
-
- 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.
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.
-
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.
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.
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.
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.
-
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.
Vous pouvez rééchantillonner, recadrer, optimiser et accentuer les images dans Dreamweaver. Vous pouvez également régler leur luminosité et leur contraste.
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.
-
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.
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.
-
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.
L’accentuation augmente le contraste des pixels autour des objets pour augmenter la définition de l’image et obtenir une meilleure netteté.
-
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.
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.
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.
-
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.
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.
-
- 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.
- 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.
Vous pouvez sélectionner l’éditeur d’image à utiliser pour ouvrir et modifier les fichiers graphiques.
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.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.