Vidéo: TUTO HTML - #3 Les images 2024
L'ajout d'une image à votre page Web peut sembler presque magique au premier abord, car le processus est si simple avec Dreamweaver. Le défi avec les graphismes Web ne consiste pas à les ajouter à vos pages, mais à créer de belles images qui se chargent rapidement dans le navigateur de votre spectateur.
Vous avez besoin d'un autre programme, tel que Photoshop, Photoshop Elements ou Fireworks, pour créer, convertir, modifier et optimiser les images. L'optimisation des images réduit la taille des fichiers et accélère le téléchargement des images. Dreamweaver fournit des outils basiques d'édition d'images, mais vous utilisez surtout Dreamweaver pour insérer et positionner des images sur votre page.
Dreamweaver facilite la mise en place d'images sur vos pages Web et offre plusieurs façons de le faire:
-
Cliquez sur l'icône Images dans le panneau Insertion commune, puis sélectionnez une image à l'aide de la boîte de dialogue Insérer une image.
-
Dans le panneau Fichiers, cliquez et faites glisser un nom d'image sur la page où vous voulez que l'image apparaisse.
-
Utilisez le menu Insertion.
Si vous ne disposez pas d'une image JPEG, GIF ou PNG optimisée pour le Web, vous pouvez télécharger des images gratuites déjà optimisées.
Pour placer une image sur une page Web à l'aide du menu Insertion, procédez comme suit:
-
Ouvrez une page existante ou créez et enregistrez une nouvelle page.
-
Placez votre curseur à l'endroit où vous souhaitez insérer l'image sur la page.
Vous pouvez insérer des images en haut à gauche d'un nouveau fichier vierge et insérer des images dans des balises et des éléments d'une page Web, mais vous ne pouvez pas placer une image au milieu d'une page sans HTML supplémentaire étiquettes ou formatage CSS pour le positionner.
-
Choisissez Insérer → Image → Image.
La boîte de dialogue Sélectionner une source d'image apparaît.
-
Parcourir pour localiser l'image que vous souhaitez insérer.
Selon votre système informatique, vous pouvez prévisualiser les images lorsque vous les insérez de différentes manières. Voici trois options courantes:
-
Sur un PC avec Windows XP, choisissez Miniatures dans la liste déroulante du menu Affichage à droite du champ Regarder dans pour afficher les versions miniatures de toutes les images d'un dossier ouvert. Vous pouvez également afficher un aperçu de l'image sélectionnée dans l'extrême droite de la boîte de dialogue.
-
Sur un PC avec Windows Vista ou Windows 7 , choisissez une option d'icône (Petites icônes, Icônes moyennes, Grandes icônes ou Icônes extra-larges) dans la liste déroulante du menu Affichage à droite de la fenêtre Rechercher. champ pour afficher les versions miniatures de toutes les images dans un dossier ouvert. Vous pouvez également afficher un aperçu de l'image sélectionnée à l'extrême droite de la boîte de dialogue.
-
Sur un Mac, choisissez l'option Afficher en tant que colonnes en haut à gauche de la boîte de dialogue. Vous pouvez afficher un aperçu unique d'une image sélectionnée dans l'extrême droite de la boîte de dialogue.
Crédit: Photos par Casey Stoll
-
-
Pour insérer l'image, double-cliquez sur le nom de l'image ou cliquez une fois puis cliquez sur OK.
Si vous insérez une image dans une page et que celle-ci n'est pas enregistrée dans votre dossier de site local, Dreamweaver vous invite à afficher une boîte de dialogue d'avertissement et vous propose de copier l'image dans votre dossier de site local. De nombreux concepteurs créent un sous-dossier appelé images dans le dossier du site local où ils stockent toutes les images de leur site, mais vous pouvez organiser les images dans plusieurs sous-dossiers si vous préférez.
-
Sélectionnez l'image sur votre page Web pour afficher et modifier les propriétés de l'image.
Les options d'image s'affichent automatiquement dans l'Inspecteur des propriétés au bas de la page lorsqu'une image est sélectionnée.
Crédit: Photo par Casey Stoll
Lorsque vous insérez un fichier image sur une page, vous n'ajoutez pas réellement une copie de l'image à la page; vous créez une référence à l'image. Le code sous-jacent ressemble beaucoup au code d'un lien d'une page à l'autre.
Les références d'image et les liens incluent le nom du fichier et le chemin de la page vers ce fichier. Essentiellement, vous créez une instruction pour un navigateur Web pour trouver l'image lorsqu'il affiche la page.
Pour afficher une image sur votre page Web, vous devez télécharger la page et l'image lorsque vous publiez votre site Web. Si vos fichiers image et les pages qui se réfèrent à ces fichiers ne se trouvent pas dans le même emplacement relatif sur votre disque dur que sur votre serveur Web, vous cassez la référence à vos images et une icône Image brisée apparaît sur votre page.
Le meilleur moyen de s'assurer que vos images et vos fichiers restent à l'endroit où ils sont supposés être les uns par rapport aux autres est de permettre à Dreamweaver de les suivre pour vous. C'est pourquoi il est si important de terminer le processus de configuration du site et de vous assurer de ne jamais déplacer ou renommer une image, sauf dans le panneau Fichiers.
