Insertion d`images dans Dreamweaver Dreamweaver

Insertion d'images dans
Dreamweaver
Ecole Club Migros
Ecole-Club
Al C
Alain
Court
3 formats d’images utilisables
y Gif ((Graphics
p Interchange
g Format)) a été créé ppar CompuServe
p
ppour afficher pplus
rapidement les images sur son service en ligne. Ce format s'est rapidement
imposé sur le Web. (extension .gif)
y 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é
jp g .jpg
jpg ou .jpe)
jp )
souhaitée. ((extensions .jpeg
y 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
compression. Malheureusement
Malheureusement, seuls les navigateurs de dernière
génération reconnaissent ce format. (extension .png)
y Bmp . N'est pas un format web, à éviter car non compressé, à convertir en jpg
(malgré cela
cela, il n'est
n est pas rare de le rencontrer même sur des sites professionnels).
professionnels)
Le format GIF
y Le format GIF est un format q
qui utilise une compression
p
sans perte
p
de qualité.
q
Les 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,
couleurs les logos
logos, les formes géométriques
géométriques, boutons etc
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 JPEG
y Le 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.
y 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.
y Le format JPEG ne supporte pas la transparence et ne permet pas de créer des
animations.
y 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
p
faible
compression
p
moyenne
y
compression
p
forte
5466 octets
2506 octets
1147 octets
La qualité de l'image diminue avec l'augmentation du facteur de compression
Le format PNG
y Le format
f
PNG
G utilise
l une compression sans perte dde ddonnées.
é
y
y
y
y
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
bits.
bits
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,
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 PNG.
PNG
La même image en PNG insérée sur
des fonds différents .
La transparence multi-niveaux permet
g
très fine
une intégration
Insérer une image dans
Dreamweaver
y 1 - Insertion d'une
d une image GIF,
y
y
y
y
JPEG, PNG
2 - Insertion d'un espace
représentant une image de
dimensions précises
3 - Ajout dd'une
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 FireWorks
5 - Barre de navigation composée de
pplusieurs images
g survolée
Insérer
é une image (suite)
1
2
Note :
Il est pparfois
f nécessaire de
réactualiser la liste des fichiers
pour voir apparaître les nouveaux
- clic droit dans la fenêtre des
fichiers puis "actualiser fichiers
locaux"
3
Modifier une image insérée
éé
y Attention !
y
y
y
y
Redimensionner une image ne
réduit pas son poids (temps de
chargement)
h
t)
Il faut également
rééchantillonner ll'image
image
(opération irréversible)
On peut aussi la recadrer
Ou la retoucher
(luminosité, contraste et
netteté)
Les autres opérations
nécessitent un éditeur
graphique
Exercice 1
y Insérez l'image
l image " paysage
paysage.jpg
jpg " dans la page "images
images.html
html" de
votre site
y Réduisez l'image
l image à la taille qui vous convient
y Recadrez l'image pour n'en conserver qu'une partie
y Rééchantillonnez
Réé h ill
l'i
l'image
pour réduire
éd i son temps de
d
chargement
y Renouvelez l'opération avec une image importée depuis
l W b (par exemple depuis http://www.hebus.com/index.php )
leWeb
Positionner du texte
autour d'une image
y En HTML,
HTML la position du texte autour dd'une
une image est une
caractéristique de l'image. C'est donc l'image qu'il faut
modifier
o e pour
pou obtenir
o te lee résultat.
ésu tat.
Exercice 2
y Insérez le texte "Texte1
Texte1.txt
txt" (dossier "Textes
Textes Ascii
Ascii")) à coté
de l'image insérée dans l'exercice précédent (par copiercoller
co
e depuis
epu s lee bloc-notes)
oc otes)
y Modifiez l'alignement de l'image pour que l'image soit
positionnée à gauche avec un texte qui entoure ll'image
image
y Modifiez l'espacement horizontal afin d'améliorer la lisibilité
y Renouvelez l'opération avec une autre image et un autre
texte tiré du dossier "textes
textes Ascii
Ascii"
Insérer une image avec
un effet de survol
y 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
d apparence incite le visiteur à cliquer dessus.
dessus
Un petit exemple (menu à gauche) :
http://www.highwaymaninn.co.uk/
yL'inconvénient
L'i
é i principal
i i l dde cette méthode
é h d est lle temps nécessaire
é
i
pour mettre à jour le contenu de l'image (si par exemple le texte
contenu doit être modifié).
yC'est pour cette raison que de nombreux sites ont abandonné cette
méthode au profit de l'animation du texte par feuille de styles.
yElle est reste tout de même très utile à connaître d'autant
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 3
y Créez une nouvelle page nommée
"navigation_graphique.html"
y Insérez une image survolée qui conduit au site
http://www.woomang.com/Frameset_gallery.htm en
utilisant les images suivantes (dossier images) :
y Image de départ : koko.gif
y Image
g survolée : koko2.gif
.g
(utilisez un fond blanc pour la page, car les images ne sont pas
transparentes)
p
Des outils pour créer
et modifier vos images
y Photoshop Elements (version de démonstration)
http://www.clubic.com/telecharger-fiche28023-photoshopelements.html (version très simplifiée et moins coûteuse de
Ph t Sh )
PhotoShop)
y The Gimp http://www.clubic.com/telecharger-fiche18452gimp-mode.html
gimp
mode.html (concurrent gratuit de Photoshop)
y FireWorks (version de démonstration)
http://www.clubic.com/telecharger-fiche15282-fireworks.html
(compagnon graphique de Dreamweaver - intégration parfaite)
y ImageReady (version de démonstration)
http //www clubic com/telecharger fiche9650 image ready html
http://www.clubic.com/telecharger-fiche9650-image-ready.html
(logiciel compagnon de Photoshop, spécialiés dans le traitement
des images pour le Web
Insérer
é une barre de navigation
Exercice 4
y Fabriquez une barre de navigation pour obtenir le résultat
visible dans "navbar.html (dossier "navbar" du dossier
"images")
ages )
y Employez pour cela les morceaux de barre fournis dans ce
même dossier (chaque image est présent en deux états :
normal et survolé , par exemple navbar1.gif et
navbar1_on.gif)
g )
y Positionnez cette barre en haut et au centre de la page
y Modifiez la couleur de la page pour l'adapter
l adapter à la couleur du
fond de la barre de navigation
Les galeries automatiques
y Afin de faciliter la fabrication de galeries photos,
photos
Dreamweaver intègre une commande (liée à FireWorks)
permettant
pe
etta t dee créer
c ée automatiquement
auto at que e t une
u e galerie.
ga e e.
y Nous verrons dans le module consacré aux tableaux une
méthode alternative (plus lente mais sans FireWorks)
permettant d'obtenir le même résultat
y PhotoShop intègre un outil de fabrication de galerie
comparable.
y 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 photo
y Copiez dans votre site personnel le dossier "photos"
photos présent
dans le dossier "composants galerie"
y 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)
y Les ffichiers
h
Flash
l h sont ddes élé
éléments externes et propriétaires
é
dont
d le
l fformat est
la propriété de la société Adobe (comme le format PDF)
y Ce qui signifie qu'ils doivent être insérés dans la page Web, mais restent
externes
t
à cette
tt page (comme
(
lles iimages))
y 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/
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é.
y L'inconvénient
co é e t majeur
ajeu dee cette approche
app oc e est liéé au référencement
é é e ce e t duu site.
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 !
y 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
sur : http://www.flash-moteurs.com/
h //
fl h
/
Utiliser Flash pour enrichir un site
y Aujourd
Aujourd'hui
hui de nombreux sites emploient Flash pour
améliorer leur site et fournir des éléments complémentaires
((menus
e us animés,
a és, bannières
a è es en
e pseudo
pseu o vidéo,
v éo, animations
a at o s
diverses).
yQ
Quelques
q exemples
p :
y http://www.adamidesign.it/
y http://www.speckproducts.com/
y http://www.spot13.com/
y http://www.adobe.com/fr/
Un clic-droit sur un
composant
p
Flash ne permet
p
pas de copier l'objet
Où trouver les fichiers Flash d'un
site ?
y Sous Internet Explorer
Insérer un fichier Flash dans
Dreamweaver
Exercice 6
y Récupérez puis insérez un fichier Flash en provenance de
http://www.adobe.fr
Les outils pour créer
des fichiers Flash
y Adobe Flash 8 (version d'évaluation)
http://www.clubic.com/telecharger-fiche15287-flash.html
htt
//
l bi
/t l h
fi h 15287 fl h ht l
y Pour créer des fichiers Flash en ligne
h //
http://www.flashberry.com/
fl hb
/
y LiveSwif Lite (pour créer des animations Flash simples )
h //
http://www.businessmobile.fr/telecharger/0,39045761,39
b i
bil f / l h
/0 39045761 39
070585s,00.htm
insérer
é un bouton Flash
Exercice 7
y Remplacez tous les liens de navigation par des boutons Flash
Insérer
é un texte Flash
y Les textes Flash p
permettent de s'affranchir des pproblèmes des ppolices
propriétaires (taille et police)
y Ils peuvent être munis d'hyperliens
y Par contre,, comme tous les fichiers Flash,, le texte ne sera pas
p indexé par
p les
moteurs de recherche.
Exercice 8
y Remplacez les liens hypertextes de votre page liens.html
liens html par
des textes Flash
Conclusion
y Vous êtes maintenant équipés pour produire,
produire modifier et
insérer à la fois des images et des fichiers Flash.
y A vous de leur trouver un usage adapté en fonction de vos
objectifs personnels de création de site.
y N
N'oubliez
oubliez pas qu
qu'ilil 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
une animation Flash.