Progettazione multimediale Dreamweaver Le immagini Progettazione Multimediale – www.pinocappellano.it

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

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

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

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

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

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

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

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

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

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

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