e-learning Dreamweaver Initiation3. Insertion d'images
3.1 Généralités sur les imagesLes chemins d'accès aux images a- Les liens relatifs au document Exemple CODE HTML
<img src="images/lc-formateur.png alt="LC Formateur" width=120"" height="74"> b- Les liens absolus
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 :
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 image1- Cliquez sur l'icône 6 dans l'onglet commun Onglet commun ![]() 2- Sélectionner l'image dans la boîte de dialogue qui est apparu 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 3.3 Les images de fondPour mettre une image de fond dans un tableau Panneau Propriété
2. Sélectionner l'image dans la boîte de dialogue qui apparaît 3.4 Les images survoléesLes images survolées vont être générées avec un Javascript
3- La boîte de dialogue ci dessous apparaît ![]() 4- Compléter les différents champs Nom de l'imageComplé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
|
1-Se familiariser avec l'interface
1.1 Organisation de l'espace de travail
1.2 La barre d'outils Insertion 1.3 La gestion de sites avec Dreamweaver 2- Création de contenu texte
2.11 Le texte, les polices, le formatage
2.12 Les paragraphes 2.13 Les entêtes 2.14 Les puces, les listes numérotées 2.15 Les sauts de ligne, les espaces insécables, les caractères spéciaux 3- Insertion d’images
3.1 Généralités et utilisation
3.2 Insérer une image 3.3 Les images de fond 3.4 Les images survolées 4- Les hyperliens
4.1 Lien sur du texte
4.2 Lien sur une image 4.3 Lien de messagerie 4.4 Les ancres nommées 4.5 Les attributs 5- Mise en page à l’aide des tableaux 6- Mise en page à l'aide de calques 7- Mise en forme à l'aide de CSS
7.1 Création de feuilles de style
7.2 Créer, modifier, supprimer une règle de CSS 7.3 Appliquer une règle de style CSS à une balise 8- Insertion de médias Flash 9 - Créer un menu de navigation 10- La balise HEAD 11- Transférer vos données |
et