Progettazione multimediale
Le immagini
v.1
Progettazione Multimediale – www.pinocappellano.it
1
I formati delle immagini
I browser riconoscono e inseriscono le immagini nelle pagine
web se queste sono in formato JPEG, GIF o PNG
(riconoscibili dalle estensioni dei file).
Il formato JPEG (estensione: jpg o jpeg)
può contenere milioni di colori ed è più
indicato per immagini con molte sfumature
(fotografie).
v.1
Progettazione Multimediale – www.pinocappellano.it
2
I formati delle immagini
Il formato GIF
può contenere fino a 256 colori ed è indicato
per immagini con colori pieni (icone, bottoni,
disegni, ecc.).
Inoltre permette la trasparenza.
Le GIF possono essere anche animate.
v.1
Progettazione Multimediale – www.pinocappellano.it
3
I formati delle immagini
Il formato PNG
è sostitutivo del GIF ma non è
supportato da tutti i browser.
v.1
Progettazione Multimediale – www.pinocappellano.it
4
Il codice HTML per le immagini
Le immagini sono dei file.
Per inserire un’immagine in una pagina web bisogna inserire nel
codice HTML il riferimento alla sua ubicazione e il nome del file.
<img src=“…il file si trova… ed ha come nome…”>
In questo modo il browser richiede al server di inviargli proprio quel
file che si trova in quella determinata posizione.
Per questo motivo non è possibile utilizzare il “copia-incolla” per
inserire un’immagine in Dreamweaver.
E’ necessario, invece, per prima cosa inserire il file dell’immagine
nella cartella del sito e, successivamente, creare il riferimento.
v.1
Progettazione Multimediale – www.pinocappellano.it
5
Inserire un’immagine
Per inserire un’immagine in Dreamweaver: Inserisci>Immagine
v.1
Progettazione Multimediale – www.pinocappellano.it
6
Inserire un’immagine
Esistono due modi per inserire il riferimento alla posizione del file:
Il riferimento può
essere relativo alla
posizone del
documento, vale a
dire alla pagina web
dove viene inserita
l’immagine
In questo esempio la
pagina non è stata
ancora salvata e
Dreamweaver aggiornerà
il riferimento non appena
sarà fatto il salvataggio.
<img src="img/Gioconda.jpg" width="242" height="294">
v.1
Progettazione Multimediale – www.pinocappellano.it
7
Inserire un’immagine
Il riferimento può
essere relativo alla
radice del sito.
<img src="/img/Gioconda.jpg" width="242" height="294">
v.1
Progettazione Multimediale – www.pinocappellano.it
8
Inserire un’immagine
Dreamweaver offre la possibilità di inserire un “segnaposto” in luogo
dell’immagine.
L’immagine potrà essere inserita successivamente. Nel frattempo al
suo posto sarà presente un rettangolo con un identificativo e di misure
e colori preferiti.
v.1
Progettazione Multimediale – www.pinocappellano.it
9
Le proprietà dell’immagine
Le misure
possono
essere
modificate ma
è buona norma
inserire un file
con le misure
già precise.
Il riferimento
al file.
Il link
(collegamento)
che è associato
all’immagine.
Testo che viene
visualizzato
quando il
mouse è sopra
l’immagine.
Nome
dell’immagine.
v.1
Progettazione Multimediale – www.pinocappellano.it
10
Le proprietà dell’immagine
Nome della
mappa
immagine e
strumenti di
definizione
delle aree
v.1
Margini
verticali e
orizzontali (la
distanza del
bordo
dell’immagine
da ciò che lo
circonda
(pagina, cella,
testo, ecc.)
Target
del link
Riferimento al file
immagine (più
leggero) da caricare
più velocemente in
attesa che quello
originario venga
completamente
scaricato.
Spessore del
bordo. Vuoto
equivale a 0.
Allineamento
dell’immagine
rispetto a ciò che
la contiene
(pagina, cella,
ecc.)
Allineamento del
testo rispetto
all’immagine.
Progettazione Multimediale – www.pinocappellano.it
11
Le mappe immagini
Le mappe immagini sono delle immagini che, grazie a delle coordinate,
presentano diversi punti caldi che equivalgono ad altrettanti link.
Per creare una mappa è sufficiente
scegliere la forma (rettangolo, cerchio o
forma libera) e tracciare sull’immagine l’area
che sarà sensibile al passaggio e al click del
mouse.
esempio
v.1
Progettazione Multimediale – www.pinocappellano.it
12