E-LEARNING - Formation Dreamweaver

3.1 Généralités sur les images

Les chemins d'accès aux images
En HTML, vous allez pouvoir définir de types de liens vers vos images,
soit un lien relatif ou un lien absolu.

a- Les liens relatifs au document
Le lien relatif fait référence à une image qui se trouve dans le dossier du site

Exemple
LC Formateur

CODE HTML
<img src="images/lc-formateur.png alt="LC Formateur" width=120"" height="74">

b- Les liens absolus
Un lien absolu précise l'url compléte d'accès à la ressource
A utiliser dans le cas où vos images ne sont pas le dossier de votre site

Exemple

CODE HTML
<img src="http://www.conseil-webmaster.com/images/lc-formateur.png alt="LC Formateur"
width=120"" height="74">

Dans les 2 cas, si vous êtes biensur connecté sur internet, vous verrez la même chose

Formats conseillés :

Format	Transparence
JPG	Non
GIF	Oui
PNG	Oui
PSD	Oui, le format sera optimisé. Pour conserver la transparence, choisissez le format gif ou png

Toutes vos images doivent être optimisées pour le web, les images en 3200x ..., on oublie
N'oubliez pas d'insérer la balise ALT, Dreamweaver vous le proposera automatiquement lorsque vous insérez une image

3.2 Insérer une image

1- Cliquez sur l'icône 6 dans l'onglet commun

Raccourci clavier : Ctrl + Alt + I

Onglet commun
Insertion

2- Sélectionner l'image dans la boîte de dialogue qui est apparu
3- Compléter le texte de remplacement
4- Votre image est insérée

CODE HTML
< img src="images/mon_image.jpg" alt="Texte secondaire" width="200" height="100">

Principaux attibuts pour img en HTML
alt : Texte de remplacement
width : Définit la largeur
height : Définit la hauteur
border : la taille du contour lorsqu'il y a un lien hypertexte sur l'image, pour ne plus le voir border="0"

Exemple
Dreamweaver

3.3 Les images de fond

Pour mettre une image de fond dans un tableau

Dans le Panneau Propriété,
1. Sélectionnez le dossier comme représenté sur le schema ci dessous

Panneau Propriété
Image d'arriére plan

2. Sélectionner l'image dans la boîte de dialogue qui apparaît
3. Votre image de fond est insérée

3.4 Les images survolées

Les images survolées vont être générées avec un Javascript
1- Cliquez sur le menu déroulant à droite de l'icône 6

2- Ce menu apparaît, choisissez insérer une image survolée

3- La boîte de dialogue ci dessous apparaît

4- Compléter les différents champs

Nom de l'image
Complétez ce champ en indiquant un nom pour l'image sans espace

Image originale
Choisissez l'image originale

Image survolée
Choisissez l'image qui apparaîtra à la place de l'image originale lorsque vous passez votre curseur dessus

Texte secondaire
C'est le texte de remplacement, utilisé lorsque l'image n'est pas chargée ou n'est pas accessible

Si cliquer, allez à l'URL
Indiquez l'URL à atteindre lorsque vous cliquez sur le bouton
Ce champ n'est pas obligatoire

Exemple