Progettazione Multimediale – www.pinocappellano.it

1v.1

Progettazione multimedialeProgettazione multimediale

Le immagini

Progettazione Multimediale – www.pinocappellano.it

2v.1

I browser riconoscono e inseriscono le immagini nelle pagine web se queste sono in formato JPEG, GIF o PNG (riconoscibili dalle estensioni dei file).

I formati delle immaginiI formati delle immagini

Il formato JPEG (estensione: jpg o jpeg)può contenere milioni di colori ed è più indicato per immagini con molte sfumature (fotografie).

Progettazione Multimediale – www.pinocappellano.it

3v.1

I formati delle immaginiI formati delle immagini

Il formato GIFpuò 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.

Progettazione Multimediale – www.pinocappellano.it

4v.1

I formati delle immaginiI formati delle immagini

Il formato PNGè sostitutivo del GIF ma non è supportato da tutti i browser.

Progettazione Multimediale – www.pinocappellano.it

5v.1

Il codice HTML per le Il codice HTML per le immaginiimmagini

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.

Progettazione Multimediale – www.pinocappellano.it

6v.1

Inserire un’immagineInserire un’immagine

Per inserire un’immagine in Dreamweaver: Inserisci>Immagine

Progettazione Multimediale – www.pinocappellano.it

7v.1

Inserire un’immagineInserire 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">

Progettazione Multimediale – www.pinocappellano.it

8v.1

Inserire un’immagineInserire un’immagine

Il riferimento può essere relativo alla radice del sito.

<img src="/img/Gioconda.jpg" width="242" height="294">

Progettazione Multimediale – www.pinocappellano.it

9v.1

Inserire un’immagineInserire 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.

Progettazione Multimediale – www.pinocappellano.it

10v.1

Le proprietà dell’immagineLe proprietà dell’immagine

Nome 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.

Progettazione Multimediale – www.pinocappellano.it

11v.1

Le proprietà dell’immagineLe proprietà dell’immagine

Nome della mappa immagine e strumenti di definizione delle aree

Target del link

Margini verticali e orizzontali (la distanza del bordo dell’immagine da ciò che lo circonda (pagina, cella, testo, ecc.)

Allineamento dell’immagine rispetto a ciò che la contiene (pagina, cella, ecc.)

Spessore del bordo. Vuoto equivale a 0.

Allineamento del testo rispetto all’immagine.

Riferimento al file immagine (più leggero) da caricare più velocemente in attesa che quello originario venga completamente scaricato.

Progettazione Multimediale – www.pinocappellano.it

12v.1

Le mappe immaginiLe 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