Insertion d'images dans Dreamweaver

Ecole Club Migros

Dreamweaver

Ecole-Club Migros

Al CAlain Court

3 formats d’images utilisablesGif (Graphics Interchange Format) a été créé par CompuServe pour afficher plus ( p g ) p p p prapidement les images sur son service en ligne. Ce format s'est rapidement imposé sur le Web. (extension .gif)Jpeg(Joint Photographic Experts Group) utilise une technique beaucoup plus Jpeg(Joint Photographic Experts Group) utilise une technique beaucoup plus puissante, d'où des images plus compactes mais avec un risque de perte de qualité. Le taux de compression doit être réglé en fonction de la qualité souhaitée. (extensions .jpeg .jpg ou .jpe)( jp g jpg jp )Png (Portable Network Graphic) allie les qualités des deux formats précédents : transparence, affichage progressif, pas de limitation du nombre de couleurs et bon taux de compression Malheureusement seuls les navigateurs de dernière bon taux de compression. Malheureusement, seuls les navigateurs de dernière génération reconnaissent ce format. (extension .png)Bmp . N'est pas un format web, à éviter car non compressé, à convertir en jpg(malgré cela il n'est pas rare de le rencontrer même sur des sites professionnels)(malgré cela, il n est pas rare de le rencontrer même sur des sites professionnels).

Le format GIFLe format GIF est un format qui utilise une compression sans perte de qualité.q p p qLes images au format GIF peuvent contenir un maximum de 256 couleurs, ce qui rend ce format peu adapté pour les photographies, les images nuancées et les dégradés. Par contre il donne d'excellents résultats pour les images avec un petit nombre de couleurs les logos les formes géométriques boutons etcpetit nombre de couleurs, les logos, les formes géométriques, boutons etc...Le format GIF supporte la transparence et il permet également de créer des animations : les GIFs animés.

JPEG ( 200 x 270 pixel ) 11.9 Ko GIF (200 x 270 pixel ) 14,8 Ko

Le format JPEGLe format JPEG est un format de compression très efficace mais avec perte de qualité. Plus l'image est compressée, plus la qualité de l'image diminue. Il faut donc trouver un compromis permettant un chargement rapide tout en gardant une qualité acceptable. Les éditeurs graphiques permettent de régler le facteur de compression de 1 à 99.Ce format est particulièrement adapté et recommandé pour les images de type Ce format est particulièrement adapté et recommandé pour les images de type photographies, il peut supporter 16.7 millions de couleurs et donne un bon rendu pour les images nuancées et les dégradés. Le format JPEG ne supporte pas la transparence et ne permet pas de créer des animations.Le codage progressif permet un affichage progressif de l'image, l'image étant floue au début du chargement et devenant de plus en plus précise.

compression faible compression moyenne compression fortep5466 octets

p y2506 octets

p1147 octets

La qualité de l'image diminue avec l'augmentation du facteur de compression

Le format PNG f G l d d éLe format PNG utilise une compression sans perte de données.

Il supporte comme le GIF une palette indexée jusqu'à 256 couleurs, mais également les niveaux de gris jusqu'à 16 bits et les couleurs réelles jusqu'à 42 bitsbits.Le PNG supporte la transparence ainsi que 254 niveaux de transparence partielle.Les fichiers PNG sont généralement plus légers que les GIF par contre le PNG Les fichiers PNG sont généralement plus légers que les GIF, par contre le PNG est moins performant que le JPEG pour la compression des photographies.Le PNG ne permet pas de créer des animations.Seuls les navigateurs récents reconnaissent le format PNGSeuls les navigateurs récents reconnaissent le format PNG.

La même image en PNG insérée sur La même image en PNG insérée sur des fonds différents . La transparence multi-niveaux permet une intégration très fineg

Insérer une image dans Dreamweaver

1 - Insertion d'une image GIF, 1 Insertion d une image GIF, JPEG, PNG2 - Insertion d'un espace représentant une image de dimensions précises3 Ajout d'une image avec un effet 3 - Ajout d une image avec un effet de survol (nécessite 2 images différentes - un script Javascript est ajouté par DW)4 - Image découpée et assemblée dans FireWorksdans FireWorks5 - Barre de navigation composée de plusieurs images survoléep g

éInsérer une image (suite)11

22

Note :Il est parfois nécessaire de p fréactualiser la liste des fichiers pour voir apparaître les nouveaux - clic droit dans la fenêtre des

3fichiers puis "actualiser fichiers locaux"

é éModifier une image inséréeAttention ! Attention ! Redimensionner une image ne réduit pas son poids (temps de h t)chargement)

Il faut également rééchantillonner l'image rééchantillonner l image (opération irréversible)On peut aussi la recadrerOu la retoucher (luminosité, contraste et netteté)netteté)Les autres opérations nécessitent un éditeur graphique

Exercice 1Insérez l'image " paysage jpg " dans la page "images html" de Insérez l image paysage.jpg dans la page images.html de votre site

Réduisez l'image à la taille qui vous convientRéduisez l image à la taille qui vous convient

Recadrez l'image pour n'en conserver qu'une partie

Réé h ill l'i éd i d Rééchantillonnez l'image pour réduire son temps de chargement

Renouvelez l'opération avec une image importée depuis l W bleWeb (par exemple depuis http://www.hebus.com/index.php )

Positionner du texte autour d'une image

En HTML la position du texte autour d'une image est une En HTML, la position du texte autour d une image est une caractéristique de l'image. C'est donc l'image qu'il faut modifier pour obtenir le résultat.o e pou o te e ésu tat.

Exercice 2Insérez le texte "Texte1 txt" (dossier "Textes Ascii") à coté Insérez le texte Texte1.txt (dossier Textes Ascii ) à coté de l'image insérée dans l'exercice précédent (par copier-coller depuis le bloc-notes)co e epu s e oc otes)

Modifiez l'alignement de l'image pour que l'image soit positionnée à gauche avec un texte qui entoure l'imagepositionnée à gauche avec un texte qui entoure l image

Modifiez l'espacement horizontal afin d'améliorer la lisibilité

Renouvelez l'opération avec une autre image et un autre texte tiré du dossier "textes Ascii" texte tiré du dossier textes Ascii

Insérer une image avecun effet de survol

Les images qui changent lorsqu'on les survolent avec la souris sont fréquemment employées pour créer des éléments d'interface. Le changement d'apparence incite le visiteur à cliquer dessuschangement d apparence incite le visiteur à cliquer dessus.Un petit exemple (menu à gauche) : http://www.highwaymaninn.co.uk/

L'i é i i i l d é h d l é i L'inconvénient principal de cette méthode est le temps nécessaire pour mettre à jour le contenu de l'image (si par exemple le texte contenu doit être modifié).

C'est pour cette raison que de nombreux sites ont abandonné cette méthode au profit de l'animation du texte par feuille de styles.

Elle est reste tout de même très utile à connaître d'autant que Elle est reste tout de même très utile à connaître d autant que Dreamweaver ajoute tout le code Javascript nécessaire pour son fonctionnement

Insérer une image avecéun effet de survol (méthode)

Exercice 3Créez une nouvelle page nommée Créez une nouvelle page nommée "navigation_graphique.html"

Insérez une image survolée qui conduit au site Insérez une image survolée qui conduit au site http://www.woomang.com/Frameset_gallery.htm en utilisant les images suivantes (dossier images) :utilisant les images suivantes (dossier images) :

Image de départ : koko.gifImage survolée : koko2.gifg : .g(utilisez un fond blanc pour la page, car les images ne sont pas transparentes)p

Des outils pour créeret modifier vos images

Photoshop Elements (version de démonstration) Photoshop Elements (version de démonstration) http://www.clubic.com/telecharger-fiche28023-photoshop-elements.html (version très simplifiée et moins coûteuse de Ph t Sh )PhotoShop)The Gimp http://www.clubic.com/telecharger-fiche18452-gimp-mode.html (concurrent gratuit de Photoshop)gimp mode.html (concurrent gratuit de Photoshop)FireWorks (version de démonstration) http://www.clubic.com/telecharger-fiche15282-fireworks.html(compagnon graphique de Dreamweaver - intégration parfaite)ImageReady (version de démonstration) http //www clubic com/telecharger fiche9650 image ready htmlhttp://www.clubic.com/telecharger-fiche9650-image-ready.html(logiciel compagnon de Photoshop, spécialiés dans le traitementdes images pour le Web

éInsérer une barre de navigation

Exercice 4Fabriquez une barre de navigation pour obtenir le résultat Fabriquez une barre de navigation pour obtenir le résultat visible dans "navbar.html (dossier "navbar" du dossier "images")ages )

Employez pour cela les morceaux de barre fournis dans ce même dossier (chaque image est présent en deux états : même dossier (chaque image est présent en deux états : normal et survolé , par exemple navbar1.gif et navbar1_on.gif)g )

Positionnez cette barre en haut et au centre de la page

Modifiez la couleur de la page pour l'adapter à la couleur du Modifiez la couleur de la page pour l adapter à la couleur du fond de la barre de navigation

Les galeries automatiquesAfin de faciliter la fabrication de galeries photos Afin de faciliter la fabrication de galeries photos, Dreamweaver intègre une commande (liée à FireWorks) permettant de créer automatiquement une galerie.pe etta t e c ée auto at que e t u e ga e e.

Nous verrons dans le module consacré aux tableaux une méthode alternative (plus lente mais sans FireWorks) méthode alternative (plus lente mais sans FireWorks) permettant d'obtenir le même résultat

PhotoShop intègre un outil de fabrication de galerie PhotoShop intègre un outil de fabrication de galerie comparable.

Pour télécharger des générateurs gratuits de galerie photo : Pour télécharger des générateurs gratuits de galerie photo : http://www.toocharger.com/windows/internet/generateur-de-galerie-photos/

Insérer une galerie dans Dreamweaver

Exercice 5 - album photoCopiez dans votre site personnel le dossier "photos" présent Copiez dans votre site personnel le dossier photos présent dans le dossier "composants galerie"

Utilisez les photos de ce dossier pour insérer un album photo Utilisez les photos de ce dossier pour insérer un album photo dans une nouvelle page nommée "galerie.html"

Les fichiers Flash (usages, avantages et limites)

f h l h d élé é d l f Les fichiers Flash sont des éléments externes et propriétaires dont le format est la propriété de la société Adobe (comme le format PDF)Ce qui signifie qu'ils doivent être insérés dans la page Web, mais restent

t à tt ( l i )externes à cette page (comme les images)Avantages : Ils permettent d'enrichir considérablement les capacités des sites Web. On peut utiliser du Flash pour construire des sites entiers, comme par exemple : http://www puebloviejo com uy/ ou bien exemple : http://www.puebloviejo.com.uy/ ou bien http://www.cantinelavorata.it (observez que le code source reste une page Web avec un objet Flash intégré.L'inconvénient majeur de cette approche est lié au référencement du site. co é e t ajeu e cette app oc e est é au é é e ce e t u s te. En effet, les moteurs de recherche ne peuvent pénétrer dans le code Flash, donc ils ne peuvent indexer le contenu des ces modules. Ainsi, lorsque un site est entièrement en Flash, Le moteur de recherche peut le considérer comme vide !Certains sites n'hésitent pas obliger leurs visiteurs à utiliser Flash (exemple : http://www.youmustcreate.com/ ), au risque de perdre des visiteurs…

Pour résoudre le problème de référencement d'un site Flash, des solutions existent, à découvrir h // fl h /sur : http://www.flash-moteurs.com/

Utiliser Flash pour enrichir un siteAujourd'hui de nombreux sites emploient Flash pour Aujourd hui de nombreux sites emploient Flash pour améliorer leur site et fournir des éléments complémentaires (menus animés, bannières en pseudo vidéo, animations ( e us a és, a è es e pseu o v éo, a at o s diverses).

Quelques exemples :Q q phttp://www.adamidesign.it/

http://www.speckproducts.com/Un clic-droit sur un composant Flash ne permet

http://www.spot13.com/

http://www.adobe.com/fr/

p ppas de copier l'objet

Où trouver les fichiers Flash d'un site ?

Sous Internet ExplorerSous Internet Explorer

Insérer un fichier Flash dans Dreamweaver

Exercice 6Récupérez puis insérez un fichier Flash en provenance de Récupérez puis insérez un fichier Flash en provenance de http://www.adobe.fr

Les outils pour créerdes fichiers Flash

Adobe Flash 8 (version d'évaluation) htt // l bi /t l h fi h 15287 fl h ht l http://www.clubic.com/telecharger-fiche15287-flash.html

Pour créer des fichiers Flash en ligne h // fl hb / http://www.flashberry.com/

LiveSwif Lite (pour créer des animations Flash simples ) h // b i bil f / l h /0 39045761 39http://www.businessmobile.fr/telecharger/0,39045761,39070585s,00.htm

éinsérer un bouton Flash

Exercice 7Remplacez tous les liens de navigation par des boutons FlashRemplacez tous les liens de navigation par des boutons Flash

éInsérer un texte FlashLes textes Flash permettent de s'affranchir des problèmes des polices p p ppropriétaires (taille et police)Ils peuvent être munis d'hyperliensPar contre, comme tous les fichiers Flash, le texte ne sera pas indexé par les , , p pmoteurs de recherche.

Exercice 8Remplacez les liens hypertextes de votre page liens html par Remplacez les liens hypertextes de votre page liens.html par des textes Flash

ConclusionVous êtes maintenant équipés pour produire modifier et Vous êtes maintenant équipés pour produire, modifier et insérer à la fois des images et des fichiers Flash.

A vous de leur trouver un usage adapté en fonction de vos A vous de leur trouver un usage adapté en fonction de vos objectifs personnels de création de site.

N'oubliez pas qu'il est toujours possible de faire évoluer un N oubliez pas qu il est toujours possible de faire évoluer un site, par exemple en insérant une bannière fixe pour la première version du site que vous remplacerez ensuite par première version du site que vous remplacerez ensuite par une animation Flash.