Informazioni sulle immagini

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.

Inserire un'immagine

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.

  1. 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 sull'icona Immagini .
    • 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).
    • Selezionate Inserisci > Immagine.
    • Trascinate un'immagine dal pannello Risorse (Finestra > Risorse) alla posizione desiderata all'interno della finestra del documento, quindi passate al punto 3.
    • Trascinate un'immagine dal pannello File alla posizione desiderata all'interno della finestra del documento, quindi passate al punto 3.
    • Trascinate un'immagine dal desktop alla posizione desiderata all'interno della finestra del documento, quindi passate al punto 3.
  2. Nella finestra di dialogo visualizzata, effettuate una delle seguenti operazioni:
    • Selezionate File system per scegliere un file di immagine.
    • Selezionate Origine dati per scegliere un'origine immagine dinamica.
    • Fate clic sul pulsante Siti e server per scegliere un file di immagine in una cartella remota di uno dei vostri siti Dreamweaver.
  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.

  4. Fate clic su OK. Viene visualizzata la finestra di dialogo Attributi di accessibilità tag Image, se è stata attivata nelle Preferenze (Modifica > Preferenze).

  5. Inserite i valori nelle caselle Testo alternativo e Descrizione lunga, quindi fate clic su OK.
    • 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à.

  6. Nella finestra di ispezione Proprietà (Finestra > Proprietà), impostate le proprietà dell'immagine.

Impostare le proprietà dell'immagine

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.

Proprietà delle immagini nella finestra di ispezione Proprietà.
  1. Selezionate Finestra > Proprietà per visualizzare la finestra di ispezione Proprietà per un'immagine selezionata.

  2. Nella casella di testo sotto la miniatura dell'immagine, specificate un nome da utilizzare per fare riferimento all'immagine quando si usa un comportamento di Dreamweaver (ad esempio Scambia immagine) o un linguaggio script come JavaScript o VBScript.
  3. Impostate le opzioni desiderate per l'immagine.

    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.

    Strumenti Mappa e Punto attivo

    Consentono di etichettare e creare una mappa immagine client-side.

    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.

    Ridefinisci

     Ridefinisce un'immagine ridimensionata, migliorandone la qualità visiva con le sue nuove dimensioni e forma.

    Luminosità e Contrasto

     Regola le impostazioni di luminosità e contrasto di un'immagine.

    Precisione

     Regola la definizione dell'immagine.

Modificare gli attributi di accessibilità nel codice

Se avete inserito gli attributi di accessibilità per un'immagine, potete modificare questi valori nel codice HTML.

  1. Nella finestra del documento, selezionate l'immagine.
  2. Effettuate una delle operazioni seguenti:
    • Modificate gli attributi dell'immagine appropriati nella vista Codice.
    • Fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh), quindi selezionate Modifica tag.
    • Nella finestra di ispezione Proprietà, modificate il valore del testo alternativo.

Ridimensionare visivamente un'immagine

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.

Ridimensionare visivamente un elemento

  1. Selezionate l'elemento (ad esempio, un'immagine o un file Shockwave) nella finestra del documento.

    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.

  2. Ridimensionate l'elemento, effettuando una delle seguenti operazioni:
    • Per regolare la larghezza dell'elemento, trascinate la maniglia di ridimensionamento situata sul lato destro.
    • Per regolare l'altezza dell'elemento, trascinate la maniglia situata sul lato inferiore.
    • Per regolare contemporaneamente sia la larghezza che l'altezza dell'elemento, trascinate la maniglia d'angolo.
    • Per mantenere le proporzioni dell'elemento (il rapporto larghezza/altezza) durante il ridimensionamento, tenete premuto il tasto Maiusc mentre si trascina la maniglia d'angolo.
    • Per impostare una larghezza e un'altezza specifiche per un elemento (ad esempio, 1 pixel x 1 pixel), inserite il valore numerico nella finestra di ispezione Proprietà. Gli elementi possono essere ridimensionati visivamente fino a una proporzione minima di 8 pixel x 8 pixel.
  3. Per riportare un elemento ridimensionato alle sue dimensioni originarie, aprite la finestra di ispezione Proprietà ed eliminate i valori nelle caselle La e Al, oppure fate clic sul pulsante Ripristina dimensioni.

Ripristinare le dimensioni originali di un'immagine

  1. Fate clic sul pulsante Ripristina dim nella finestra di ispezione Proprietà dell'immagine.

Ridefinire un'immagine ridimensionata

  1. Ridimensionate l'immagine come descritto in precedenza.
  2. Fate clic sul pulsante Ridefinisci nella finestra di ispezione Proprietà dell'immagine.

    Nota:

    non è possibile ridefinire segnaposto immagine o elementi diversi dalle immagini bitmap.

Inserire un segnaposto immagine

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.

  1. Nella finestra del documento, collocate il punto di inserimento nella posizione in cui desiderate inserire un'immagine segnaposto.
  2. Selezionare Inserisci > Oggetti immagine > Segnaposto immagine.

  3. (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.
  4. (Obbligatorio) Nelle caselle di testo Larghezza e Altezza, digitate un numero per impostare le dimensioni dell'immagine in pixel.
  5. (Opzionale) In Colore, effettuate una delle seguenti operazioni per applicare un colore:
    • Utilizzate il selettore colore per selezionare un colore.
    • Inserite il valore esadecimale del colore, ad esempio #FF0000.
    • Inserite un nome di colore web-safe, ad esempio red.
  6. (Opzionale) In Testo alternativo, inserite una descrizione dell'immagine per gli utenti che utilizzano browser che non supportano la modalità grafica.

    Nota:

    nel codice HTML viene inserito automaticamente un tag di immagine contenente un attributo src vuoto.

  7. Fate clic su OK.

    Il colore, gli attributi delle dimensioni e l'etichetta del segnaposto vengono visualizzate come segue:

    Segnaposto immagine con attributi.

    L'etichetta e le dimensioni non sono visibili quando si visualizza il segnaposto in un browser.

Sostituire un segnaposto immagine

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.

  1. Nella finestra del documento, effettuate una delle seguenti operazioni:
    • Fate doppio clic sul segnaposto immagine.
    • Fate clic sul segnaposto immagine per selezionarlo, quindi nella finestra di ispezione Proprietà (Finestra > Proprietà), fate clic sull'icona della cartella visualizzata accanto alla casella di testo Origine.
  2. Nella finestra di dialogo Seleziona file di origine immagine, individuate l'immagine che desiderate sostituire al segnaposto immagine e fate clic su OK.

Impostare le proprietà di un segnaposto immagine

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.

Finestra di ispezione proprietà del 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.

  1. Impostate le opzioni desiderate tra le seguenti:

    Larg. e Alt.

    Imposta la larghezza e l'altezza del segnaposto immagine in pixel.

    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.

    Colore

    Specifica un colore per il segnaposto immagine.

Modificare le immagini in Dreamweaver

In Dreamweaver potete ridefinire, ritagliare, ottimizzare e rendere più nitide le immagini. Inoltre, potete regolarne la luminosità e il contrasto.

Funzioni di modifica delle immagini

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.

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

Ritagliare un'immagine

Dreamweaver consente di ritagliare file di immagine bitmap.

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.

  1. Aprite la pagina contenente l'immagine da ritagliare, selezionate l'immagine ed effettuate una delle seguenti operazioni:
    • Fate clic sull'icona dello strumento Ritaglio  nella finestra di ispezione Proprietà dell'immagine.
    • Selezionate Elabora > Immagine > Ritaglio.
    • Le maniglie di ritaglio vengono visualizzate attorno all'immagine selezionata.
  2. Regolate le maniglie di ritaglio finché il riquadro di delimitazione non circonda l'area dell'immagine che desiderate mantenere.
  3. Fate doppio clic all'interno del riquadro di delimitazione o premete Invio per ritagliare la selezione.
  4. Una finestra di dialogo segnala che il file di immagine che si sta ritagliando sarà modificato sul disco. Fate clic su OK. Ogni pixel nella bitmap selezionata situato al di fuori del riquadro di delimitazione viene rimosso ma vengono mantenuti gli altri oggetti dell'immagine.
  5. 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.

Ottimizzare un'immagine

Potete ottimizzare le immagini presenti nelle vostre pagine Web direttamente da Dreamweaver.

  1. Aprite la pagina contenente l'immagine da ottimizzare, selezionate l'immagine ed effettuate una delle seguenti operazioni:
    • Fate clic sul pulsante Modifica impostazioni immagine nella finestra di ispezione Proprietà immagine.
    • Selezionate Elabora > Immagine > Ottimizza.
  2. Apportate le modifiche necessarie nella finestra di dialogo Ottimizzazione immagine e fate clic su OK.

Migliorare la nitidezza di un'immagine

Il comando Precisione aumenta il contrasto dei pixel intorno ai bordi degli oggetti per aumentare la definizione o la nitidezza dell'immagine.

  1. Aprite la pagina contenente l'immagine da rendere nitida, selezionate l'immagine ed effettuate una delle seguenti operazioni:
    • Fate clic sul pulsante Precisione nella finestra di ispezione Proprietà dell'immagine.
    • Selezionate Elabora > Immagine > Precisione.
  2. 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.
  3. Quando il risultato è soddisfacente, fate clic su OK.
  4. 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.

Regolare la luminosità e il contrasto di un'immagine

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.

  1. Aprite la pagina contenente l'immagine da regolare, selezionate l'immagine ed effettuate una delle seguenti operazioni:
    • Fate clic sul pulsante Luminosità/Contrasto  nella finestra di ispezione Proprietà dell'immagine
    • Selezionate Elabora > Immagine > Luminosità/Contrasto.
  2. Trascinate i dispositivi di scorrimento Luminosità e Contrasto per regolare le impostazioni. I valori possono essere compresi tra –100 e +100.
  3. Fate clic su OK.

Creare un'immagine di rollover

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.

  1. Nella finestra del documento, spostate il punto di inserimento nella posizione in cui desiderate visualizzare il rollover.
  2. Inserite il rollover in uno dei seguenti modi:
    • Nella categoria Comune del pannello Inserisci, fate clic sul pulsante Immagini e selezionate l'icona Immagine rollover. Con l'icona Immagine rollover visualizzata nel pannello Inserisci, potete trascinare l'icona nella finestra del documento.
    • Selezionate Inserisci > Oggetti immagine > Immagine rollover.
  3. Impostate le opzioni desiderate e fate clic su OK.

    Nome immagine

    Il nome dell'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.

  4. Selezionate File > Anteprima nel browser oppure premete F12.

  5. Nel browser, spostate il puntatore sull'immagine originale per vedere l'immagine di rollover.

    Nota:

    non è possibile visualizzare l'effetto di un'immagine di rollover nella vista Progettazione.

Utilizzare un editor di immagini esterno

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.

Avviare l'editor di immagini esterno

  1. Effettuate una delle operazioni seguenti:
    • Fate doppio clic sull'immagine da modificare.
    • 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.
    • Selezionate l'immagine da modificare e fate clic su Modifica nella finestra di ispezione Proprietà.
    • 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.

    Se nella finestra del documento di Dreamweaver non viene visualizzata l'immagine aggiornata, selezionate l'immagine e fate clic sul pulsante Aggiorna nella finestra di ispezione Proprietà.

Impostare un editor di immagini esterno per un tipo di file esistente

Potete selezionare un editor di immagini per l'apertura e la modifica dei file grafici.

  1. Aprite la finestra di dialogo delle preferenze Tipi di file/editor effettuando una delle seguenti operazioni:
    • Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh) e selezionate Tipi di file/editor nell'elenco Categoria visualizzato a sinistra.
    • Selezionate Modifica > Modifica con Editor esterno e selezionate Tipi di file/editor.
  2. Nell'elenco Estensioni, selezionate le estensioni di file per cui desiderate impostare un editor esterno.
  3. Fate clic sul pulsante Aggiungi (+) situato sopra l'elenco Editor.
  4. Nella finestra di dialogo Seleziona editor esterno, fate clic su Sfoglia e individuate l'applicazione che deve essere avviata per modificare questo tipo di file.

  5. Se l'applicazione indicata deve essere l'editor principale per questo tipo di file, nella finestra di dialogo Preferenze fate clic su Rendi principale.

  6. Per impostare un editor aggiuntivo per questo tipo di file, ripetete i punti 3 e 4 di questa procedura.

    Dreamweaver utilizza automaticamente l'editor principale quando modificate un'immagine di questo tipo. Potete selezionare gli altri editor in elenco dal menu di scelta rapida dell'immagine nella finestra del documento.

Aggiungere un nuovo tipo di file all'elenco Estensioni

  1. Aprite la finestra di dialogo delle preferenze Tipi di file/editor effettuando una delle seguenti operazioni:

    • Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh) e selezionate Tipi di file/editor nell'elenco Categoria visualizzato a sinistra.
    • Selezionate Modifica > Modifica con Editor esterno e selezionate Tipi di file/editor.
  2. Nella finestra di dialogo delle preferenze Tipi di file/editor, fate clic sul pulsante Aggiungi (+) situato sopra l'elenco Estensioni.

    Viene visualizzata una casella di testo nell'elenco Estensioni.

  3. Digitate l'estensione del tipo di file per il quale desiderate avviare un editor.
  4. Per selezionare un editor esterno per il tipo di file, fate clic sul pulsante Aggiungi (+) visualizzato sopra l'elenco Editor.
  5. Nella finestra di dialogo visualizzata, selezionate l'applicazione che desiderate utilizzare per modificare il tipo di immagine.
  6. Fate clic su Rendi principale se desiderate che l'editor selezionato sia quello predefinito per il tipo di immagine.

Modificare la preferenza di un editor esistente

  1. Aprite la finestra di dialogo delle preferenze Tipi di file/editor effettuando una delle seguenti operazioni:

    • Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh) e selezionate Tipi di file/editor nell'elenco Categoria visualizzato a sinistra.
    • Selezionate Modifica > Modifica con Editor esterno e selezionate Tipi di file/editor.
  2. Nella finestra di dialogo delle preferenze Tipi di file/editor, selezionate nell'elenco Estensioni il tipo di file per il quale desiderate modificare la preferenza di editor.

  3. Nell'elenco Editor, selezionate l'editor da sostituire ed effettuate una delle seguenti operazioni:
    • Fate clic sul pulsante Aggiungi (+) o Elimina (–) situato sopra l'elenco Editor per aggiungere o eliminare un editor.
    • Fate clic sul pulsante Rendi principale per specificare l'editor da avviare per la modifica per impostazione predefinita.

Applicazione di un comportamento a un'immagine

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.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online