Inserire e modificare le immagini in Dreamweaver

Collocate il punto di inserimento nella posizione della finestra del documento in cui desiderate inserire l'immagine ed effettuate una delle seguenti operazioni:

• Nel pannello Inserisci, selezionate HTML dall’elenco a discesa. Fate clic su Immagine. Fate doppio clic sull’icona o trascinatela nella finestra del documento (o nella finestra vista Codice se lavorate utilizzando il 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.

• Nella vista Dal vivo, trascinate un’immagine dal pannello Extract o dalla scheda Livelli. Rilasciate l’elemento in alto, in basso a destra o a sinistra di un elemento in base alle Guide dal vivo. In alternativa, potete rilasciare l’elemento in un punto preciso nella struttura del documento facendo clic su </> e utilizzando la Vista rapida elemento.

Sfogliate per selezionare l’origine dell’immagine o del contenuto da 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.

Fate clic su OK. 

Per visualizzare la finestra di ispezione Proprietà per l’immagine selezionata, fate clic sull’immagine e selezionate Finestra > Proprietà.

Nella casella di testo sotto l’immagine della miniatura, immettete un nome. Questo nome può essere utilizzato per fare riferimento all’immagine quando si usa un comportamento di Dreamweaver (ad esempio Scambia immagine) o un linguaggio script come JavaScript o VBScript.

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 non è 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 immagine che viene visualizzato a destra delle caselle di testo Larg. e Alt.

Specifica il file di origine dell'immagine. Fate clic sull'icona della cartella per individuare il file di origine oppure digitatene il percorso.

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.

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.

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

Destinazione     Specifica il frame o la finestra in cui viene caricata la pagina collegata. Questa opzione è disponibile solo se l’immagine non è 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.
• _new carica il file collegato in una nuova finestra del browser.
•  _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. Questa destinazione è quella predefinita. Questo valore non è necessario che sia specificato esplicitamente.
•  _top carica il file collegato nella finestra del browser a grandezza piena, eliminando tutti i frame.

Avvia l'editor di immagini impostato nelle preferenze Editor esterni e apre l'immagine selezionata.

Apre la finestra di dialogo Ottimizzazione immagine e consente di ottimizzare l'immagine.

Dreamweaver rileva quando il file Photoshop originale è aggiornato e l’immagine nella pagina di Dreamweaver non corrisponde più a quella originale. L’applicazione visualizza una delle frecce dell’icona dell’oggetto avanzato in rosso. Per aggiornare automaticamente l’immagine, selezionate l’immagine Web nella vista Progettazione e fate clic su Aggiorna da originale nella finestra di ispezione Proprietà. L’immagine aggiornata ora presenta le modifiche apportate al file Photoshop originale.

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.

Nella finestra Documento, fate clic sull'immagine o selezionate il tag di immagine nel codice.

Effettuate una delle seguenti operazioni per immettere un nome o una breve descrizione per l'immagine in meno di 50 caratteri nella casella di testo alternativo. Lo screen reader legge le informazioni inserite in questa casella.  

• Modificate gli attributi dell'immagine appropriati nella vista Codice.

• Modificate gli attributi dell'immagine in Vista Dal vivo utilizzando la Finestra di ispezione Proprietà rapida.

• Nella finestra di ispezione Proprietà, modificate il valore Alt.

Sui lati inferiore e destro dell'elemento e nell'angolo inferiore destro appaiono le maniglie di ridimensionamento. Se le maniglie di ridimensionamento non sono visualizzate, fate clic all’esterno dell’elemento, quindi riselezionatelo. In alternativa, per selezionare l’elemento, potete fare clic sul tag appropriato nel selettore di tag.

• 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), utilizzate la finestra di ispezione Proprietà. Inserite un valore di numerico nei campi Larg. e Alt. Gli elementi possono essere ridimensionati visivamente fino un minimo di 8 x 8 pixel.

Per riportare un elemento ridimensionato alle sue dimensioni originarie, nella finestra di ispezione Proprietà, eliminate i valori nei campi Larg. e Alt. Potete anche fare clic sul pulsante Ripristina dimensioni nella finestra di ispezione Proprietà dell’immagine.

Ridimensionate l’immagine come descritto nella sezione Ridimensionare un’immagine.

Fate clic sul pulsante Ridefinisci nella finestra di ispezione Proprietà dell'immagine.

Selezionate Modifica > Immagine. Potete impostare le seguenti funzioni di modifica delle immagini di Dreamweaver:

Selezionate una preimpostazione, specificate un formato file e specificate il livello di qualità. Man mano che spostate il cursore tra i livelli di qualità, potete vedere le dimensioni file dell'immagine nella finestra di dialogo. Fate clic su OK al termine.

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.

Modifica un’immagine riducendone l’area. Potete ritagliare un’immagine per dare maggiore rilievo al soggetto raffigurato ed eliminare aspetti indesiderati intorno al tema centrale dell’immagine.

Modifica il contrasto o la luminosità dei pixel di un’immagine. La luminosità e il contrasto incidono sulle zone di luce, ombre e mezzitoni di un’immagine. Di solito si utilizza Luminosità/Contrasto nella correzione di immagini che sono troppo scure o troppo chiare.

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. La scansione consente di conservare i dettagli più fini 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 utilizzare una maschera di contrasto. Utilizzando l’opzione Precisione si aumenta il contrasto dei bordi, rendendo l’immagine più nitida.

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 Modifica > Immagine > Ritaglio.

• Le maniglie di ritaglio vengono visualizzate attorno all'immagine selezionata.

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.

Visualizzate l'anteprima dell'immagine e assicuratevi che soddisfi le vostre aspettative. In caso contrario, selezionate Modifica > Annulla ritaglio per ripristinare l'immagine originale.

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à dell’immagine.

• Selezionate Modifica > Immagine > Ottimizza.

Apportate le modifiche necessarie nella finestra di dialogo Ottimizzazione immagine e fate clic su OK.

• Fate clic sul pulsante Precisione nella finestra di ispezione Proprietà dell'immagine.

• Selezionate Modifica > Immagine > Precisione.

Per specificare il livello di precisione che Dreamweaver applicherà all’immagine, trascinate il dispositivo di scorrimento. Potete anche immettere un valore compreso tra 0 e 10 nella casella di testo. Mentre regolate la nitidezza dell’immagine nella 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.

• Fate clic sul pulsante Luminosità e Contrasto nella finestra di ispezione Proprietà dell’immagine.

• Selezionate Modifica > Immagine > Luminosità/Contrasto.

• Nel pannello Inserisci, selezionate HTML dall’elenco a discesa. Selezionate Immagine rollover dall’elenco di opzioni.

• Selezionate Inserisci > HTML > Immagine rollover.

Nella finestra di dialogo Inserisci immagine rollover, selezionate le immagini e impostate le proprietà del rollover. Potete configurare le seguenti proprietà:

Il nome dell'immagine di rollover.

L'immagine da visualizzare al caricamento della pagina. Inserite il percorso nella casella di testo o fate clic su Sfoglia per selezionare l'immagine.

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 le immagini nella cache del browser in modo da evitare ritardi di visualizzazione quando l'utente porta il cursore sull'immagine.

(Opzionale) Inserite una descrizione dell'immagine per gli utenti che utilizzano browser che non supportano la modalità grafica.

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.

Per visualizzare in anteprima l’immagine di rollover, selezionate File > Anteprima in tempo reale oppure premete F12.

Per aprire un editor esterno, effettuate una delle seguenti operazioni:

• Fate doppio clic sull’immagine da modificare.

• Fate clic con il pulsante destro del mouse (Windows) oppure tenendo premuto il tasto Ctrl (Macintosh) sull’immagine da modificare. Fate quindi clic su Modifica con > Sfoglia e selezionate un editor.

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

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

Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (macOS) e selezionate Tipi di file/editor nell’elenco Categoria visualizzato nel riquadro a sinistra.

Nell’elenco Estensioni, selezionate l’estensione per cui impostare un editor esterno.

Nella finestra di dialogo Seleziona editor esterno, fate clic su Sfoglia e individuate l’applicazione da avviare per modificare questo tipo di file.

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

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.

Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (macOS) e selezionate Tipi di file/editor nell’elenco Categoria visualizzato nel riquadro a sinistra.

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.

Selezionate l’estensione del tipo di file per il quale desiderate impostare un editor.

Per selezionare un editor esterno per il tipo di file, fate clic sul pulsante Aggiungi (+) visualizzato sopra l’elenco Editor.

Nella finestra di dialogo visualizzata, selezionate l’applicazione da utilizzare per modificare il tipo di immagine.

Fate clic su Rendi principale se desiderate che l’editor selezionato sia quello predefinito per il tipo di immagine.

Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (macOS) e selezionate Tipi di file/editor nell’elenco Categoria visualizzato nel riquadro a sinistra.

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.

Nell’elenco Editor, selezionate l’editor da sostituire ed effettuate una delle seguenti operazioni:

• Per aggiungere o rimuovere un editor, fate clic sul pulsante Aggiungi (+) o Elimina (–) situato sopra l’elenco Editor.

• Per cambiare l’editor da avviare per impostazione predefinita per la modifica, fate clic sul pulsante Rendi principale.