Capitolo 5 adding images to your web pages. 2 JPEG.

Presentazione sul tema: "Capitolo 5 adding images to your web pages. 2 JPEG."— Transcript della presentazione:

1 Capitolo 5 adding images to your web pages

2 2 JPEG

3 3 GIF

4 4 Sono usate per immagini con molti colori, come le fotografie JPEG vs GIF Sono usate per immagini con pochi colori e a tinte piatte, come i loghi

5 5 Possono rappresentare immagini con al massimo di 16 milioni di colori JPEG vs GIF Possono rappresentare immagini con solo 256 colori

6 6 Non supportano la trasparenza JPEG vs GIF Supportano la trasparenza

7 7 Attributi di <img src=images/pencil.gif alt=Pencil line 35 miles long /> <img src=images/drinks.gif width=48 height=100 /> width height

8 8 Esercizio: myPod (1) mypod photos seattle.jpg index2.html http://www.sci.unich.it/~bista/didattica/tecnologie-web/ materiale2007-08/hfhtml-esercizi/HFHTML_ch05/mypod/

9 9 myPod body { background-color: #eaf3da; } Welcome to myPod Welcome to the place to show off your iPod, wherever you might be. Wanna join the fun? All you need is any iPod, from the early classic iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest iPod Photo, and a digital camera. Just take a snapshot of your iPod in your favorite location and we'll be glad to post it on myPod. So, what are you waiting for? Seattle, Washington Me and my iPod in Seattle! You can see rain clouds and the Space Needle. You can't see the 628 coffee shops. Esercizio: myPod (1) index2.html Aggiungere limmagine seattle.jpg

10 10 Ridimensionamento immagini 1 1 2 2 3 3

11 11 Esercizio: myPod (2) photosthumbnailsindex2.html mypod seattle_med.jpg seattle_shuffle.jpg seattle_downtown.jpg

12 12 Creazione di anteprime Vedi ridimensionamento immagine 600px 400px 150px 100px seattle_med.jpg seattle_downtown.jpg seattle_shuffle.jpg

13 13 Esercizio: myPod (2) index2.html seattle_downtown.html seattle_med.html seattle_shuffle.html

14 14 Esercizio: myPod (2) photosthumbnailsindex2.html mypod html seattle_med.html seattle_shuffle.html seattle_downtown.html

15 15 Esercizio: myPod (2) myPod: Seattle Ferry body { background-color: #eaf3da; } Seattle Ferry <img src="../photos/seattle_med.jpg" alt="An iPod on the Seattle ferry /> seattle_med.html photosthumbnailsindex2.html mypod html seattle_med.html seattle_med.jpg

16 16 Esercizio: myPod photosthumbnailsindex2.html mypod html

17 17 Esercizio: myPod … <img src=thumbnails/seattle_med.jpg" alt="My iPod in Seattle, WA /> … … index2.html