Progettazione multimediale

Presentazione sul tema: "Progettazione multimediale"— Transcript della presentazione:

1 Progettazione multimediale
Dreamweaver Le immagini Progettazione Multimediale –

2 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). Progettazione Multimediale –

3 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. Progettazione Multimediale –

4 I formati delle immagini
Il formato PNG è sostitutivo del GIF ma non è supportato da tutti i browser. Progettazione Multimediale –

5 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. Progettazione Multimediale –

6 Progettazione Multimediale – www.pinocappellano.it
Inserire un’immagine Per inserire un’immagine in Dreamweaver: Inserisci>Immagine Progettazione Multimediale –

7 Progettazione Multimediale – www.pinocappellano.it
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"> Progettazione Multimediale –

8 Progettazione Multimediale – www.pinocappellano.it
Inserire un’immagine Il riferimento può essere relativo alla radice del sito. <img src="/img/Gioconda.jpg" width="242" height="294"> Progettazione Multimediale –

9 Progettazione Multimediale – www.pinocappellano.it
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. Progettazione Multimediale –

10 Le proprietà dell’immagine
Le misure possono essere modificate ma è buona norma inserire un file con le misure già precise. Testo che viene visualizzato quando il mouse è sopra l’immagine. Il link (collegamento) che è associato all’immagine. Il riferimento al file. Nome dell’immagine. Progettazione Multimediale –

11 Le proprietà dell’immagine
Margini verticali e orizzontali (la distanza del bordo dell’immagine da ciò che lo circonda (pagina, cella, testo, ecc.) Target del link Allineamento dell’immagine rispetto a ciò che la contiene (pagina, cella, ecc.) Spessore del bordo. Vuoto equivale a 0. Nome della mappa immagine e strumenti di definizione delle aree Riferimento al file immagine (più leggero) da caricare più velocemente in attesa che quello originario venga completamente scaricato. Allineamento del testo rispetto all’immagine. Progettazione Multimediale –

12 Progettazione Multimediale – www.pinocappellano.it
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 Progettazione Multimediale –