Esistono diversi tipi di formati file grafici, ma nelle pagine Web se ne utilizzano in genere tre: GIF, JPEG e PNG. I formati GIF e JPEG sono i più diffusi e quelli supportati dalla maggior parte dei browser.
GIF (Graphics Interchange Format)
Nei file GIF, le immagini sono composte da un massimo di 256 colori. Questo formato si rivela più indicato per le immagini a tono non continuo e per quelle con aree estese di colore piatto, ad esempio le barre di navigazione, i pulsanti, le icone, i logotipi e, in generale, per le immagini con colori e toni uniformi.
JPEG (Joint Photographic Experts Group)
Il formato JPEG si rivela più indicato per le fotografie e le immagini a tono continuo, perché consente di memorizzare milioni di colori. A una maggiore qualità del file JPEG corrisponde un aumento proporzionale delle dimensioni del file e del tempo di trasferimento. Per arrivare a un buon compromesso tra la qualità dell'immagine e le dimensioni del file, in genere è opportuno comprimere il file JPEG.
PNG (Portable Network Group)
Il formato PNG è un formato libero da brevetto e sostitutivo del formato GIF che supporta i colori indicizzati, le sfumature di grigio e le immagini a colori reali, nonché i canali alfa per i livelli di trasparenza. PNG è il formato nativo di Adobe® Fireworks®. I file PNG conservano tutti i dati originali relativi a livelli, vettori, colori ed effetti (ad esempio le ombreggiature) e tutti gli elementi sono completamente modificabili in qualunque momento. Per essere riconosciuti come file PNG da Dreamweaver, i file devono avere l'estensione .png.
Quando inserite un'immagine in un documento di Dreamweaver, viene generato un riferimento al file di immagine nel codice di origine HTML. Per verificare che il riferimento sia corretto, il file di immagine deve trovarsi nel sito corrente. In caso contrario, Dreamweaver richiede all'utente se desidera copiare il file nel sito.
Potete anche inserire le immagini in modo dinamico. Le immagini dinamiche sono immagini che cambiano spesso. Ad esempio, i sistemi di rotazione dei banner pubblicitari prevedono che venga selezionato casualmente un singolo banner da un elenco di banner potenziali e successivamente visualizzano l'immagine del banner selezionato quando viene richiesta una pagina.
Dopo aver inserito un'immagine, potete impostarne gli attributi di accessibilità che possono essere letti dagli screen reader utilizzati dagli utenti ipovedenti. Questi attributi possono essere modificati nel codice HTML.
Per un'esercitazione sull'inserimento delle immagini, vedete Aggiunta di immagini.
-
Collocate il punto di inserimento nella posizione della finestra del documento in cui desiderate inserire l'immagine ed effettuate una delle seguenti operazioni:
- Nella categoria Comune del pannello Inserisci, fate clic sul pulsante Immagini e selezionate l'icona Immagine. Quando l'icona Immagine è visualizzata nel pannello Inserisci, potete trascinarla nella finestra del documento (o nella finestra Vista codice mentre lavorate sul codice).
- Trascinate un'immagine dal pannello Risorse (Finestra > Risorse) alla posizione desiderata all'interno della finestra del documento, quindi passate al punto 3.
-
-
Scorrete il contenuto visualizzato per selezionare l'origine dell'immagine o del contenuto che desiderate inserire.
Se state lavorando in un documento non salvato, Dreamweaver genera un riferimento di tipo file:// al file di immagine. Quando salvate il documento in un punto qualunque del sito, Dreamweaver converte il riferimento in un percorso relativo al documento.
Nota:
quando inserite immagini, potete anche utilizzare un percorso assoluto di un'immagine che si trova su un server remoto (vale a dire, un'immagine che non è disponibile sul disco rigido locale). Tuttavia, se si verificano problemi di prestazioni, è consigliabile disabilitare la visualizzazione dell'immagine nella vista Progettazione deselezionando Comandi > Visualizza file esterni.
-
- Nella casella Testo alternativo, inserite una breve descrizione dell'immagine. Lo screen reader legge le informazioni inserite in questa casella. Limitare il testo della descrizione a 50 caratteri. Per descrizioni più lunghe, utilizzate la casella di testo Descrizione lunga fornendo un collegamento a un file che contenga ulteriori informazioni sull'immagine.
- Nella casella Descrizione lunga, inserite la posizione del file che viene visualizzato quando l'utente fa clic sull'immagine o sull'icona della cartella per individuare il file. Questa casella di testo fornisce un collegamento a un file che è correlato all'immagine o che ne fornisce informazioni più dettagliate.
Nota:
potete inserire le informazioni in una o in entrambe le caselle a seconda delle esigenze. Lo screen reader legge l'attributo Testo alternativo per le immagini.
Nota:
se fate clic su Annulla, l'immagine viene visualizzata nel documento ma Dreamweaver non associa i relativi tag e attributi di accessibilità.
.La finestra di ispezione Proprietà delle immagini consente di impostare le proprietà di un'immagine. Se non sono visualizzate tutte le proprietà dell'immagine, fate clic sulla freccia di espansione nell'angolo inferiore destro.
-
Larg. e Alt.
Indicano la larghezza e l'altezza dell'immagine in pixel. Quando inserite l'immagine in una pagina, queste caselle di testo vengono aggiornate automaticamente con le dimensioni originali dell'immagine.
Se i valori di Larg. e Alt. impostati non corrispondono alla larghezza e all'altezza effettive dell'immagine, l'immagine potrebbe non essere visualizzata correttamente nel browser. (Per ripristinare i valori originali, fate clic sulle etichette delle caselle di testo Larg. e Alt. o sul pulsante Ripristina dimensioni originali immagine che viene visualizzato a destra delle caselle di testo Larg. e Alt. quando inserite un nuovo valore.)
Nota:
potete modificare questi valori per ridimensionare l'immagine che verrà visualizzata, ma ciò non riduce il tempo di scaricamento, poiché il browser scarica tutti i dati dell'immagine prima di ridimensionarla. Per ridurre il tempo di scaricamento e fare in modo che tutte le copie dell'immagine abbiano le stesse dimensioni, utilizzate un'applicazione grafica per impostare le dimensioni desiderate.
Orig.
Specifica il file di origine dell'immagine. Fate clic sull'icona della cartella per individuare il file di origine oppure digitatene il percorso.
Colleg.
Consente di specificare un collegamento ipertestuale per l'immagine. Trascinate l'icona Scegli file su un file nel pannello File, fate clic sull'icona della cartella per individuare un documento del sito oppure digitatene l'URL.
Altern.
Specifica un testo alternativo da visualizzare al posto dell'immagine nei browser che non supportano la modalità grafica o che sono configurati per lo scaricamento manuale delle immagini. Per gli utenti non vedenti che utilizzano sintetizzatori vocali con browser in modalità testo, questo testo viene riprodotto ad alto volume. In alcuni browser, il testo appare anche quando il puntatore si trova sopra l'immagine.
Destinazione
Specifica il frame o la finestra in cui deve essere caricata la pagina collegata. Questa opzione è disponibile solo se l'immagine è collegata a un altro file. Nell'elenco Destinazione appaiono i nomi di tutti i frame presenti nel set di frame corrente. Potete scegliere anche i seguenti nomi di destinazione riservati:
_blank carica il file collegato in una nuova finestra del browser senza nome.
_parent carica il file collegato nel set di frame o nella finestra superiore del frame che contiene il collegamento. Se il frame in cui si trova il collegamento non è nidificato, il file collegato viene caricato nella finestra del browser a grandezza piena.
_self carica il file collegato nello stesso frame o nella stessa finestra in cui si trova il collegamento. Questo collegamento è predefinito e quindi non è generalmente necessario specificarlo.
_top carica il file collegato nella finestra del browser a grandezza piena, eliminando tutti i frame.
Modifica
Avvia l'editor di immagini impostato nelle preferenze Editor esterni e apre l'immagine selezionata.
Aggiorna da originale
Quando l'immagine Web (cioè l'immagine sulla pagina di Dreamweaver) non è sincronizzata con il file Photoshop originale, in Dreamweaver viene rilevato che il file originale è stato aggiornato e una delle frecce dell'icona dell'oggetto avanzato è visualizzata in rosso. Quando selezionate l'immagine Web in vista Progettazione e fate clic sul pulsante Aggiorna da originale nella finestra di ispezione Proprietà, l'immagine viene aggiornata automaticamente con le modifiche apportate al file Photoshop originale.Modifica impostazioni immagine
Apre la finestra di dialogo Ottimizzazione immagine e consente di ottimizzare l'immagine.Ritaglio
Consente di ritagliare le dimensioni di un'immagine, rimuovendo le aree indesiderate dall'immagine selezionata.
Ridefinisce un'immagine ridimensionata, migliorandone la qualità visiva con le sue nuove dimensioni e forma. 
Regola le impostazioni di luminosità e contrasto di un'immagine. 
Regola la definizione dell'immagine. Se avete inserito gli attributi di accessibilità per un'immagine, potete modificare questi valori nel codice HTML.
In Dreamweaver potete ridimensionare visivamente elementi quali immagini, plugin, file Shockwave o SWF, applet e controlli ActiveX.
Il ridimensionamento visivo di un'immagine consente di verificare l'impatto che essa ha sul layout a seconda delle sue dimensioni ma non modifica in scala il file di immagine in base alle proporzioni specificate dall'utente. Se ridimensionate visivamente un'immagine in Dreamweaver ma non utilizzate un'applicazione di modifica immagini (ad esempio Adobe Fireworks) per modificare in scala il file di immagine in base alle dimensioni desiderate, il browser dell'utente ridimensiona l'immagine quando la pagina viene caricata. Ciò può causare un ritardo nei tempi di caricamento della pagina e una visualizzazione non corretta dell'immagine nel browser dell'utente. Per ridurre il tempo di scaricamento e fare in modo che tutte le copie dell'immagine abbiano le stesse dimensioni, utilizzate un'applicazione grafica per impostare le dimensioni desiderate.
Quando ridimensionate un'immagine in Dreamweaver, potete ridefinirla per adattarla alle sue nuove dimensioni. Questa operazione aggiunge o sottrae pixel da un file di immagine GIF o JPEG ridimensionato in modo che corrisponda il più possibile all'aspetto dell'immagine originale. La ridefinizione di un'immagine riduce le dimensioni del file corrispondente e migliora le prestazioni di scaricamento.
-
Sui lati inferiore e destro dell'elemento e nell'angolo inferiore destro appaiono le maniglie di ridimensionamento. Se le maniglie di ridimensionamento non appaiono, fate clic in un qualsiasi punto esterno all'elemento che desiderate ridimensionare e quindi selezionatelo di nuovo oppure fate clic sul tag appropriato nel selettore dei tag per selezionare l'elemento.
-
- Per regolare la larghezza dell'elemento, trascinate la maniglia di ridimensionamento situata sul lato destro.
- Per regolare contemporaneamente sia la larghezza che l'altezza dell'elemento, trascinate la maniglia d'angolo.
Il segnaposto immagine è un'immagine utilizzata temporaneamente in attesa dell'immagine definitiva da aggiungere alla pagina Web. Potete impostare dimensioni e colore del segnaposto, e assegnargli un'etichetta di testo.
-
(Opzionale) Nella casella di testo Nome, inserite il testo che desiderate visualizzare come etichetta del segnaposto immagine. Se non desiderate visualizzare un'etichetta, non specificate alcun nome. Il nome deve iniziare con una lettera e può contenere solo lettere e numeri. Non sono consentiti spazi e caratteri ASCII estesi.
Un segnaposto immagine non permette di visualizzare l'immagine nel browser. Prima della pubblicazione del sito, è necessario sostituire tutti i segnaposto immagine aggiunti con i file immagine corrispondenti in formato visualizzabile nel Web, quali file GIF o JPEG.
Se utilizzate Fireworks, potete utilizzare il segnaposto immagine di Dreamweaver per creare una nuova immagine. La nuova immagine viene impostata con le stesse dimensioni dell'immagine segnaposto. Potete modificare l'immagine e quindi sostituirla in Dreamweaver.
Per impostare le proprietà di un segnaposto immagine, selezionate il segnaposto nella finestra del documento, quindi selezionate Finestra > Proprietà per aprire la finestra di ispezione Proprietà. Per visualizzare tutte le proprietà, fate clic sulla freccia di espansione situata nell'angolo inferiore destro della finestra.
La finestra di ispezione Proprietà consente di impostare il nome, la larghezza, l'altezza, l'origine dell'immagine, il testo alternativo, l'allineamento e il colore di un'immagine segnaposto.
Nella finestra di ispezione Proprietà del segnaposto, la casella di testo in grigio e la casella di testo Allinea sono disattivate. Potete impostare queste proprietà nella finestra di ispezione Proprietà dell'immagine dopo aver sostituito il segnaposto con un'immagine.
-
Orig.
Specifica il file di origine dell'immagine. Nel caso delle immagini segnaposto questa casella è vuota. Fate clic sul pulsante Sfoglia per selezionare l'immagine sostitutiva dell'immagine segnaposto.
Colleg.
Specifica un collegamento ipertestuale per il segnaposto immagine. Trascinate l'icona Scegli file su un file nel pannello File, fate clic sull'icona della cartella per individuare un documento del sito oppure digitatene l'URL.
Altern.
Specifica un testo alternativo da visualizzare al posto dell'immagine nei browser che non supportano la modalità grafica o che sono configurati per lo scaricamento manuale delle immagini. Per gli utenti non vedenti che utilizzano sintetizzatori vocali con browser in modalità testo, questo testo viene riprodotto ad alto volume. In alcuni browser, il testo appare anche quando il puntatore si trova sopra l'immagine.
Crea
Avvia Fireworks per creare un'immagine sostitutiva. Il pulsante Crea è disattivato se Fireworks non è installato sul computer.
Aggiorna da originale
Quando l'immagine Web (cioè l'immagine sulla pagina di Dreamweaver) non è sincronizzata con il file Photoshop originale, in Dreamweaver viene rilevato che il file originale è stato aggiornato e una delle frecce dell'icona dell'oggetto avanzato è visualizzata in rosso. Quando selezionate l'immagine Web in vista Progettazione e fate clic sul pulsante Aggiorna da originale nella finestra di ispezione Proprietà, l'immagine viene aggiornata automaticamente con le modifiche apportate al file Photoshop originale.
In Dreamweaver potete ridefinire, ritagliare, ottimizzare e rendere più nitide le immagini. Inoltre, potete regolarne la luminosità e il contrasto.
Dreamweaver fornisce delle funzioni di base per la modifica delle immagini che consentono di elaborare le immagini senza dover avviare un editor di immagini esterno, ad esempio Fireworks o Photoshop. Gli strumenti di modifica delle immagini in Dreamweaver sono progettati per permettervi di lavorare facilmente con gli sviluppatori di contenuti responsabili della creazione dei file di immagine da utilizzare nel sito Web.
Nota:
non è necessario aver installato sul computer Fireworks o altre applicazioni di modifica delle immagini per utilizzare le funzioni di modifica delle immagini di Dreamweaver.
-
Selezionate Elabora > Immagine. Impostate le seguenti funzioni di modifica delle immagini di Dreamweaver:
Ridefinisci
Aggiunge o sottrae pixel da un file di immagine GIF o JPEG ridimensionato in modo che corrisponda il più possibile all'aspetto dell'immagine originale. La ridefinizione di un'immagine riduce le dimensioni del file corrispondente e migliora le prestazioni di scaricamento.
Quando ridimensionate un'immagine in Dreamweaver, potete ridefinirla per adattarla alle sue nuove dimensioni. Quando un oggetto bitmap viene ridefinito, i pixel vengono aggiunti o rimossi dall'immagine per renderla più grande o più piccola. La ridefinizione di un'immagine con una risoluzione più elevata comporta in genere una perdita di qualità minima. La ridefinizione con una risoluzione più bassa comporta sempre una perdita di dati e in genere un risultato di qualità inferiore.
Ritaglio
Modifica un'immagine riducendone l'area. In genere, potete ritagliare un'immagine per dare maggiore rilievo al soggetto raffigurato ed eliminare aspetti indesiderati intorno al tema centrale dell'immagine.
Luminosità e Contrasto
Modifica il contrasto o la luminosità dei pixel di un'immagine. L'operazione ha un effetto sulla luminosità, le ombre e i mezzitoni di un'immagine. Di solito si utilizza Luminosità/Contrasto nella correzione di immagini che sono troppo scure o troppo chiare.
Precisione
Regola la definizione di un'immagine aumentando il contrasto dei bordi. Quando effettuate la scansione di un'immagine o scattate una foto digitale, l'azione predefinita della maggior parte dei software di cattura delle immagini è quella di ammorbidire i bordi degli oggetti nell'immagine. Questa operazione consente di conservare i dettagli più sottili con i pixel di cui sono composte le immagini digitali. Tuttavia, per mettere in risalto i dettagli nei file di immagini digitali, risulta spesso necessario rendere l'immagine più nitida aumentando il contrasto dei bordi.
Nota:
le funzioni di Dreamweaver per la modifica delle immagini si applicano solo ai formati di file immagine JPEG, GIF e PNG. Altri formati di file di immagine bitmap non possono essere modificati utilizzando queste funzioni di modifica delle immagini.
Nota:
quando ritagliate un'immagine, il file di immagine di origine viene modificato sul disco. Per questo motivo, può essere opportuno conservare una copia di backup del file di immagine nel caso sia necessario ripristinare l'immagine originale.
-
Visualizzate l'anteprima dell'immagine e assicuratevi che soddisfi le vostre aspettative. In caso contrario, selezionate Modifica > Annulla ritaglio per ripristinare l'immagine originale.
Nota:
potete annullare l'effetto del comando Ritaglio (ripristinando il file di immagine originale) fino al momento della chiusura di Dreamweaver, oppure modificare il file in un'applicazione grafica esterna.
Il comando Precisione aumenta il contrasto dei pixel intorno ai bordi degli oggetti per aumentare la definizione o la nitidezza dell'immagine.
-
Per specificare il grado di precisione che Dreamweaver applica all'immagine, trascinate il dispositivo di scorrimento o inserite un valore tra 0 e 10 nella casella di testo. Mentre regolate la nitidezza dell'immagine con la finestra di dialogo Precisione, potete visualizzare un'anteprima delle modifiche apportate all'immagine.
-
Salvate le modifiche selezionando File > Salva oppure ripristinate l'immagine originale selezionando Modifica > Annulla precisione.
Nota:
potete solo annullare l'effetto del comando Precisione (ripristinando il file di immagine originale) prima di salvare la pagina contenente l'immagine. Una volta salvata la pagina, le modifiche apportate all'immagine vengono memorizzate in modo permanente.
Luminosità/Contrasto Modifica il contrasto o la luminosità dei pixel di un'immagine. L'operazione ha un effetto sulla luminosità, le ombre e i mezzitoni di un'immagine. Di solito si utilizza Luminosità/Contrasto nella correzione di immagini che sono troppo scure o troppo chiare.
Potete inserire immagini di rollover nella pagina. Un rollover è un'immagine che, quando viene visualizzata in un browser, cambia quando il puntatore passa sopra di essa.
Per creare un'immagine di rollover, è necessario disporre di due immagini: un'immagine principale (quella visualizzata quando la pagina viene caricata) e un'immagine secondaria (quella che appare quando il puntatore si trova sopra l'immagine principale). Le due immagini devono avere le stesse dimensioni: in caso contrario, Dreamweaver ridimensiona la seconda immagine in base alle proprietà della prima.
Le immagini di rollover sono configurate in modo tale da rispondere automaticamente all'evento onMouseOver. Potete impostare un'immagine in modo che risponda a un evento diverso (un clic del mouse, ad esempio) oppure modificare un'immagine di rollover.
-
Immagine originale
L'immagine da visualizzare al caricamento della pagina. Inserite il percorso nella casella di testo o fate clic su Sfoglia per selezionare l'immagine.
immagini rollover
L'immagine da visualizzare quando il puntatore passa sopra l'immagine originale. Inserite il percorso o fate clic su Sfoglia per selezionare l'immagine.
Precarica immagine di rollover
Precarica le immagini nella cache del browser in modo da evitare ritardi di visualizzazione quando l'utente porta il cursore sull'immagine.
Testo alternativo
(Opzionale) Inserite una descrizione dell'immagine per gli utenti che utilizzano browser che non supportano la modalità grafica.
Dopo un clic, accedi all'URL
Il file che deve essere aperto quando un utente fa clic sull'immagine di rollover. Inserite il percorso o fate clic su Sfoglia per selezionare il file.
Nota:
se non impostate un collegamento per l'immagine, Dreamweaver inserisce un collegamento nullo (#) nel codice HTML di origine al quale è associato il comportamento rollover. Se rimuovete il collegamento nullo, l'immagine di rollover smette di funzionare.
Quando la sessione di Dreamweaver è già aperta, potete aprire e modificare un'immagine usando un editor di immagini esterno. Quando tornate a Dreamweaver dopo aver salvato il file modificato, le modifiche vengono automaticamente applicate all'immagine visualizzata nella finestra del documento.
Potete impostare Fireworks come editor esterno principale. Potete anche specificare quali tipi di file devono essere aperti con un editor specifico e selezionare più editor di immagini. Ad esempio, potete impostare le preferenze in modo che venga avviato Fireworks per modificare i file GIF e un editor diverso per la modifica dei file JPG o JPEG.
-
- Fate clic con il pulsante destro (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh) sull'immagine da modificare, quindi selezionate Modifica con > Sfoglia e selezionate l'editor desiderato.
- Fate doppio clic sul file di immagine nel pannello File per avviare l'editor di immagini principale. Se non avete specificato un editor di immagini, Dreamweaver apre l'editor predefinito per quel tipo di immagine.
Nota:
quando aprite un'immagine dal pannello File, le funzioni di integrazione di Fireworks non hanno effetto; pertanto, il file PNG originale non viene aperto. Per utilizzare le funzioni di integrazione di Fireworks, aprite le immagini dall'interno della finestra del documento.
A un'immagine o a un punto attivo di un'immagine potete applicare tutti i comportamenti disponibili. Quando applicate un comportamento a un punto attivo, Dreamweaver inserisce il codice di origine HTML nel tag area. Tre comportamenti sono specificamente applicabili alle immagini: Precarica immagini, Scambia immagine e Ripristino immagini scambiate.
Precarica immagini
Carica nella cache del browser le immagini che non appaiono immediatamente sulla pagina (ad esempio, quelle che vengono scambiate per mezzo di comportamenti, elementi PA o JavaScript). In questo modo si evitano inutili attese quando arriva il momento di visualizzare queste immagini.
Scambia immagine
Sostituisce un'immagine a un'altra, modificando l'attributo SRC del tag img. Questa azione può essere utilizzata per creare oggetti rollover e altri effetti visivi (compreso lo scambio di più immagini alla volta).
Ripristino immagini scambiate
Ripristina i file di origine precedenti dell'ultima serie di immagini scambiate. Poiché questa azione viene aggiunta automaticamente come impostazione predefinita quando applicate l'azione Scambia immagine, non è necessario selezionarla manualmente.
I comportamenti possono essere utilizzati anche per creare sistemi di navigazione sofisticati, come i menu di collegamento.
I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.