Support de cours Dreamweaver CS5 les images - M

Support de cours Dreamweaver CS5
les images
MC Benveniste
©2013
Insertion de contenu > insertion d’images
image hors du dossier racine
Si l’image ne se trouve pas dans le site dans lequel vous travaillez (voir liste des fichiers qui doit ne
montrer que les fichiers de votre site : vous aurez cette fenêtre
Ceci est une indication précieuse, que soit vous n’êtes pas dans le bon site, soit votre image n’y est pas.
Dans un cas comme dans l’autre assurez vous que vous travaillez dans le bon site, et votre image y est
bien présente
Insertion de contenu > insertion d’images
De nombreuses possibilités sont à votre disposition pour insérer une image.
Par exemple avec l’icône qui se trouve dans la barre d’insertion
Après avoir placé le curseur à l’endroit voulu dans votre page en mode création,
Cliquez sur cette icône, une fenêtre vous permet de parcourir votre dossier pour sélectionner la source
de l’image.
Cliquez sur “ok” et une nouvelle fenêtre apparaît vous permettant de renseigner le texte alternatif à
l’image, nécessaire au référencement de votre site, ainsi qu’à l’accessibilité
Le texte secondaire est donc l’attribut “alt” de la balise <img>
Trois choix sont possibles.
• l’image fournit de l’information le “alt” doit être le contenu de cette information
• l’image est purement décorative, il faut un “alt” vide c’est à dire : alt=””
Dans ce cas déroulez le petit menu et choisissez : “vide”
• L’image est un lien et le “alt” doit donner la fonction du lien
L’image est insérée. Nous avons alors accès aux propriétés spécifiques de l’image.
Un aperçu de l’image, son poids en Ko, ses dimensions, sa source (src) , l’attribut “alt”
Et dans le code, le chemin de l’image, en relatif, le “alt” la largeur et la hauteur de l’image
Insertion de contenu > insertion d’images > attributs de l’image
DIMENSIONS
Si vous déformez cette image, vous verrez dans les propriétés, les valeurs des dimensions
apparaître en gras, et la flèche d’actualisation apparaître
Cliquez sur la flèche pour réactualiser les dimensions correctes
LIEN
Pour rendre cette image cliquable choisissez un des deux
outils à côté de “lien”
Celui de gauche est un élastique, cliquez, gardez cliqué et
emmenez-le sur la liste des fichiers, vers la bonne page.
Lorsque le fichier est sélectionné, lâchez le curseur.
L’icône de dossier permet de parcourir votre dossier
pour choisir le fichier requis
BORDURE
Dès qu’une image devient un lien, elle
prend automatiquement une bordure.
Mettre la bordure des images à 0 dans
le css
Insertion de contenu > modifications d’images
Recadrage
Vous pouvez directement recadrer une image dans
dreamweaver, sans passer par photoshop
Une boîte de dialogue vous informe que
votre image sera modifiée dans tout le
site, pas uniquement dans cette page.
Il ne vous reste plus qu’à utiliser l’outil
recadrage identique à celui des logiciels
graphiques
Insertion de contenu > modifications d’images
Optimisation
Vous pouvez directement optimiser
une image dans dreamweaver, sans passer par photoshop
1
1 - onglet optimiser
2 - en bas affichage en deux
vignettes
3 - changer la qualité
3
2
Insertion de contenu > modifications d’images
Optimisation
Vous pouvez directement optimiser une image dans dreamweaver,
sans passer par photoshop
nouveau poids de l’image
ancien poids de l’image
2
cliquer sur ok
quand vous avez obtenu
le résultat souhaité
Insertion de contenu > modifications d’images
Redimensionnement
Vous pouvez directement redimensionner une image
dans dreamweaver, sans passer par photoshop
Choix:
Contraindre ou non
les proportions.
Entrer une valeur dans
L ou H, ou utiliser le
curseur de %.
Si contraindre
les proportions est
coché,
le logiciel recalculera la
valeur L ou H
correspondante
2
cliquer sur ok
quand vous avez obtenu
le résultat souhaité
Insertion de contenu > insertion d’images survolées
Une image survolée est une image qui change de source lorsqu’on passe le curseur. Il faut donc
prévoir deux images différentes, mais de même dimension !
Dans la fenêtre d’insertion des objets communs > images, faites dérouler le menu et
choisissez : image survolée, en ayant placé le curseur à l’endroit voulu de votre page
Cliquez sur parcourir pour choisir l’image qui apparaîtra en premier sur la page web, puis même
chose pour l’image de survol.
Le texte secondaire renseignera l’attribut “alt” de la deuxième image (l’info-bulle affichée par
Internet explorer).
Si cette image est un lien, vous pouvez choisir la page de destination
Attention Dreamweaver ne peut pas montrer cette interactivité, il vous faut vérifiez avec un aperçu
dans le navigateurs.
Insertion de contenu > insertion de cartes cliquables
Une carte cliquable est une image dont certaines zones sont cliquables
Après avoir inséré votre image, sélectionnez-la.
Dans la partie inférieure de l’inspecteur de propriétés, quatre
outils se trouvent sous l’icône de l’image : une flèche, un
rectangle, un cercle et un polygone.
Les 3 derniers correspondent aux formes de zones
cliquables. La flèche permet de déplacer ou modifier une zone
déjà créée.
Cliquez sur un des outils et dessinez sur l’image.
Ici un cercle, qui apparaît en surbrillance dans la fenêtre de
création.
Puis une nouvelle fenêtre de propriétés permet de faire correspondre cette zone à une page html,
par défaut Dream insère un dièse (#).
Pour choisir la page html, utiliser les outils habituels : l’icône de dossier ou l’élastique pour joindre
vers un fichier.