L'animation flash n'est pas prise en charge

e-learning Dreamweaver Initiation

3. Insertion d'images

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
LC Formateur
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


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

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

Dreamweaver - Images survolées

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
Image survolée Image survolée :
Passez votre curseur sur l'mage à gauche

Plan du site | Contact | Création LCFormateur
Ce site est liste dans la categorie Enseignement et formation : Formations professionnelles de l'annuaire Referencement et Dictionnaire