La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

7 novembre 2012 Grégory Petit

Présentations similaires


Présentation au sujet: "7 novembre 2012 Grégory Petit"— Transcription de la présentation:

1 7 novembre 2012 Grégory Petit

2 La semaine dernière … Les éléments de mise en page Les attributs CSS de mise en page Lutilisation des tableaux Lutilisation des DIVS

3 Et donc on fait quoi aujourdhui? Les types dimage Gestion de la taille des images Utilisation des images avec Dreamweaver

4 Les types dimages

5 Types dimages Pour savoir le type dune image, on regarde généralement son extension (texte après le. dans le nom du fichier). Il existe deux grandes familles dimage numérique mais seulement une est grandement utilisée dans le monde du Web.

6 Deux grandes familles Image bitmap ou par point Représentation graphique définie par lensemble des points qui la compose. Cest le codage le plus utilisé. Possède une résolution (pixels par pouce). Image vectorielle Représentation géométrique Cest en fait une suite de formules mathématiques. décrivant les formes élémentaires constituant l'image (rectangles, lignes, courbes, ellipses, etc.) Très peu utilisées en Web.

7 Bitmap Vs. Vectoriel Zoom

8 Image Bitmap Avantages Supporté facilement par les fureteurs. Adapté aux périphériques daffichage. Codage point par point universel. Désavantages Supporte mal les opérations de redimensionnement, réduction ou agrandissement. Ces opérations se traduisent par une perte d'information. Dépendant du périphérique daffichage et de sa résolution.

9 Image vectorielle Avantages Adaptée aux représentations schématiques et stylisés constituées de formes. Plus compacte. Sa taille varie en fonction de la complexité de l'image, mais pas en fonction de la résolution demandée. Désavantages Ne peut pas coder une image analogique telle qu'une image photographique. Difficile à manipuler dans une page Web.

10 Types dimages Bitmap JPEG (.jpg ou.jpeg) : très bonne compression mais perte de qualité qui peut brouiller limage. GIF (.gif) : peut être animée et gère la transparence. Limitée à 256 couleurs donc à éviter pour les photos. PNG (.png) : bonne compression sans perte. Gère la transparence. Moins utilisée par les développeur. TIFF (.tif ou.tiff) : compression sans perte. Gère la transparence. Fichiers volumineux. BMP (.bmp) : format par défaut de Windows. Non compressé.

11 Types dimages vectorielles SVG (.svg) : format de plus en plus utilisé en graphisme. Utilise le format XML, donc compréhensible par tous les développeurs. Illustrator (.ai) : reconnu pas tous les logiciels graphiques. Fureteurs non compatibles avec ce format. PDF (.pdf) : oui cest du vectoriel! Grande taille de fichier. Plus utilisé pour les documents textes que pour les images.

12 SVG et HTML Impossible dinsérer une image SVG dans Dreamweaver. Si vous voulez vraiment insérer une image vectorielle dans votre page Web, utilisez le code suivant : Assez difficile de changer la taille de limage via HTML. Il faut choisir la bonne taille, dès la conception de limage.

13 Gestion de la taille des images

14 Taille des images Plus la taille dune image est grande, plus votre page Web mettra du temps à charger. Il faut donc : Minimiser autant que possible la taille des images. Privilégier la qualité par rapport à la dimension. Afficher progressivement les images si possible. (on va y revenir)

15 Sous Mac OS X On peut faire ça directement avec Aperçu!

16 Aperçu Choisissez JPEG ou JPEG-2000 puis jouez sur la qualité.

17 Sous Windows Il nexiste rien en natif pour réduire la taille des images. Mais il existe XnView (gratuit). XnView est une visionneuse dimages qui fonctionne sous Windows, Linux et Mac OS X. Possible aussi dajouter les attributs daffichage progressif et dentrelacement.

18 XnView

19 Avec Photoshop Beaucoup plus de paramètres donc un peu plus difficile. Permet de visualiser directement la taille et la qualité de limage en fonction des paramètres sur lesquels on joue. Ouvrir limage avec Photoshop, puis faire Fichier -> Sauvegarder pour le Web et les périphériques

20 Avec Photoshop (JPEG)

21 Avec Photoshop (PNG)

22 Entrelacement et affichage progressif Ces deux attributs permettent que les images de grande taille saffiche progressivement. Un aperçu flou de limage saffiche à louverture de la page et limage devient de plus en plus nette avec le temps.

23 Utilisation des images avec Dreamweaver

24 Rappel Placer les images dans un dossier à part dans votre site. Le chemin vers limage doit être relatif (du type src="image/truc.jpg") Vous savez déjà insérer une image dans une page HTML. Pour centrer une image, il faut mettre limage dans un élément de texte comme par exemple et appliquer lattribut CSS text-align:center à cet élément. Pas despace ni de caractère spécial dans le nom des images.

25 Modifier des images Qualité de limage Rogner limage Luminosité et contraste

26 Images de fond dun élément Web Lattribut CSS background-image : background-image: url(images/centralpark2.jpg); Pour que limage de fond bouge ou non en même temps que la page défile: background-attachment : fixed ou scroll Si vous voulez que la taille de limage de fond sadapte à la taille de lélément Web, ajouter ceci directement dans la règle CSS : background-size:100% 100%;

27 Image de fond répétée Vous pouvez répéter une image de fond pour créer une texture à votre élément avec lattribut CSS background-repeat. Cest pratique pour une entête, ou dautres types de contenu de votre page Web. Lavantage est quon peut utiliser une image plus petite, donc plus rapide à chargée.

28 Image de fond répétée

29 Fausse image de fond On peut mettre une image derrière un autre élément Web en utilisant lattribut CSS z-index. Ces deux éléments doivent avoir le même parent.

30 Fausse image de fond

31 Une dernière chose! Noubliez pas dutiliser lattribut "alt" pour les images!

32 Atelier Télécharger les images à utiliser sur le site du cours

33 Il faut obtenir ceci

34 Des questions??? Merci de votre attention! A la semaine prochaine!


Télécharger ppt "7 novembre 2012 Grégory Petit"

Présentations similaires


Annonces Google