In Dreamweaver (vista Design o Code), posiziona il punto di inserimento sulla pagina dove vuoi inserire l'immagine.
Ultimo aggiornamento il
27 apr 2021
Integrazione di Photoshop con Dreamweaver. Operazioni con gli oggetti avanzati nei flussi di lavoro di Photoshop - Dreamweaver.
Informazioni sull'integrazione con Photoshop
Nota
I flussi di lavoro di integrazione con Photoshop sono stati interrotti in Dreamweaver 21.0 e nelle versioni successive.
Puoi inserire i file di immagine di Photoshop (formato PSD) nelle pagine web in Dreamweaver e consentire a Dreamweaver di ottimizzarli come immagini pronte per il web (formati GIF, JPEG e PNG). Quando lo fai, Dreamweaver inserisce l'immagine come Smart Object e mantiene una connessione attiva con il file PSD originale.
Puoi anche incollare tutta o parte di un'immagine di Photoshop a più livelli o più sezioni in una pagina web in Dreamweaver. Tuttavia, quando copi e incolli da Photoshop, non viene mantenuta alcuna connessione attiva con il file originale. Per aggiornare l'immagine, apporta le modifiche in Photoshop e copia e incolla di nuovo.
Nota
Se usi spesso questa funzionalità di integrazione, puoi archiviare i file di Photoshop nel sito Dreamweaver per un accesso più semplice.In tal caso, assicurati di mascherarli per evitare l'esposizione delle risorse originali e trasferimenti non necessari tra il sito locale e il server remoto.
Per un'esercitazione sull'integrazione di Photoshop con Dreamweaver, consultate Integrazione di Dreamweaver con Photoshop.
Gli oggetti avanzati e i flussi di lavoro per Photoshop e Dreamweaver
Esistono due flussi di lavoro principali per lavorare con i file di Photoshop in Dreamweaver: il flusso di lavoro copia/incolla e il flusso di lavoro Smart Objects.
Flusso di lavoro con operazioni Copia e Incolla
Il flusso di lavoro copia/incolla ti consente di selezionare sezioni o livelli in un file di Photoshop, quindi utilizzare Dreamweaver per inserirli come immagini pronte per il web. Tuttavia, se vuoi aggiornare il contenuto in seguito, devi aprire il file originale di Photoshop, apportare le modifiche, copiare nuovamente la sezione o il livello negli appunti, quindi incollare la sezione o il livello aggiornato in Dreamweaver.Questo flusso di lavoro è consigliato solo quando vuoi inserire parte di un file di Photoshop (ad esempio, una sezione di una composizione di design) come immagine in una pagina web.
Flusso di lavoro con oggetti avanzati
Quando si lavora con file di Photoshop completi, Adobe consiglia il flusso di lavoro Smart Objects.Uno Smart Object in Dreamweaver è una risorsa immagine posizionata su una pagina web che ha una connessione attiva con un file originale di Photoshop (PSD). Nella vista Progettazione di Dreamweaver, uno Smart Object è indicato da un'icona nell'angolo superiore sinistro dell'immagine.
Quando l'immagine web (cioè, l'immagine nella pagina di Dreamweaver) non è sincronizzata con il file originale di Photoshop, Dreamweaver rileva che il file originale è stato aggiornato e visualizza una delle frecce dell'icona Smart Object in rosso. Quando selezioni l'immagine web nella vista Progettazione e fai clic sul pulsante Aggiorna dall'originale nel pannello Proprietà, l'immagine si aggiorna automaticamente, riflettendo qualsiasi modifica apportata al file originale di Photoshop.
Quando utilizzi il flusso di lavoro Oggetti avanzati, non devi aprire Photoshop per aggiornare un'immagine web.Inoltre, qualsiasi aggiornamento apportato a uno Smart Object in Dreamweaver è non distruttivo. In altre parole, puoi cambiare la versione web dell'immagine sulla tua pagina mantenendo intatta l'immagine originale di Photoshop.
Puoi anche aggiornare uno Smart Object senza selezionare l'immagine web nella vista Progettazione. Il pannello Risorse ti consente di aggiornare tutti gli Smart Objects, comprese le immagini che potrebbero non essere selezionabili nella finestra Documento (ad esempio, immagini di Sfondo CSS).
Impostazioni per l'ottimizzazione delle immagini
Per entrambi i flussi di lavoro (mediante Copia e Incolla e mediante oggetti avanzati), potete specificare impostazioni di ottimizzazione nella finestra di dialogo Ottimizzazione immagine. Questa finestra di dialogo permette di specificare la qualità dell'immagine e il formato del file. Se copiate una sezione o un livello oppure inserite un file di Photoshop come oggetto avanzato, Dreamweaver presenta questa finestra di dialogo per facilitare la creazione dell'immagine Web.
Se poi copiate e incollate un aggiornamento di una sezione o di un livello già inserito, le impostazioni iniziali vengono ricordate e applicate nuovamente all'immagine Web. Allo stesso modo, quando aggiornate un oggetto avanzato con la finestra di ispezione Proprietà, in Dreamweaver vengono usate le stesse impostazioni selezionate al momento del primo inserimento della stessa immagine. Potete modificare le impostazioni di un'immagine in qualsiasi momento: selezionate l'immagine Web in vista Progettazione e fate clic sul pulsante Modifica impostazioni immagine, nella finestra di ispezione Proprietà.
Memorizzazione dei file Photoshop
Se avete inserito un'immagine Web e non avete memorizzato il file Photoshop originale nel sito Dreamweaver, il percorso del file originale viene riconosciuto come percorso di file locale assoluto. Questo avviene per i flussi di lavoro sia con operazioni Copia e Incolla, sia con oggetti avanzati. Ad esempio, se il percorso del sito Dreamweaver è C:\Siti\mioSito e il file Photoshop si trova in C:\Immagini\Photoshop, Dreamweaver non riconosce la risorsa originale come appartenente al sito denominato mioSito. Questo può causare problemi se successivamente vorrete condividere il file Photoshop con altri collaboratori, poiché in Dreamweaver il file viene riconosciuto come disponibile solo in quella particolare unità locale.
Se memorizzate il file Photoshop nel sito stesso, invece, Dreamweaver può impostare un percorso relativo al sito. Qualsiasi utente che possa accedere al sito potrà ottenere il percorso corretto al file, purché il file originale sia stato reso disponibile per il download.
Per un'esercitazione video sulla modifica roundtrip con Photoshop, consultate Modifica roundtrip con Photoshop.
Creare un oggetto avanzato
Quando inserisci un'immagine di Photoshop (file PSD) nella pagina, Dreamweaver crea uno Smart Object.Uno Smart Object è un'immagine pronta per il web che mantiene una connessione attiva con l'immagine originale di Photoshop. Ogni volta che aggiorni l'immagine originale in Photoshop, Dreamweaver ti offre la possibilità di aggiornare l'immagine in Dreamweaver facendo clic su un pulsante.
Selezionate Inserisci > Immagine.
Nota
Puoi anche trascinare il file PSD sulla pagina dal pannello File se stai archiviando i file Photoshop nel sito web. In tal caso, saltate il punto seguente.
Localizzate il file di immagine PSD di Photoshop nella finestra di dialogo Seleziona file di origine immagine facendo clic sul pulsante Sfoglia per cercarla.
Nella finestra di dialogo Ottimizzazione immagine visualizzata, selezionate le impostazioni di ottimizzazione necessarie e fate clic su OK.
Salva il file di immagine pronto per il web in una posizione all'interno della
cartella principale del sito web.
Dreamweaver crea l'oggetto avanzato in base alle impostazioni di ottimizzazione selezionate e inserisce una versione pronta per il web dell'immagine sulla pagina. L'oggetto avanzato mantiene una connessione attiva all'immagine originale e ti avvisa quando i due non sono sincronizzati.
Nota
se successivamente decidete di modificare le impostazioni di ottimizzazione di un'immagine collocata nelle pagine, potete selezionare l'immagine, fate clic sul pulsante Modifica impostazioni immagine nella finestra di ispezione Proprietà e apportate le modifiche desiderate nella finestra di dialogo Ottimizzazione immagine. Le modifiche apportate nella finestra di dialogo Ottimizzazione immagine vengono applicate in modo non distruttivo. Dreamweaver non modifica mai il file Photoshop originale, ma ricrea sempre l'immagine Web in base ai dati originali.
Per un'esercitazione video sulla modifica roundtrip con Photoshop, consultate Modifica roundtrip con Photoshop.
Aggiornare un oggetto avanzato
Se modifichi il file Photoshop al quale è collegato l'oggetto avanzato, Dreamweaver ti avvisa che l'immagine pronta per il web non è sincronizzata con l'originale. In Dreamweaver, gli oggetti avanzati sono indicati da un'icona nell'angolo superiore sinistro dell'immagine. Quando l'immagine pronta per il web in Dreamweaver è sincronizzata con il file Photoshop originale, entrambe le frecce nell'icona sono verdi. Quando l'immagine pronta per il web non è sincronizzata con il file Photoshop originale, una delle frecce dell'icona diventa rossa.
Per aggiornare un oggetto avanzato con il contenuto corrente del file Photoshop originale, selezionate l'oggetto avanzato nella finestra del documento, quindi fate clic sul pulsante Aggiorna da originale nella finestra di ispezione Proprietà.
Nota
Non è necessario che tu abbia Photoshop installato per effettuare l'aggiornamento da Dreamweaver.
Aggiornare più oggetti avanzati
Puoi aggiornare più oggetti avanzati contemporaneamente utilizzando il pannello Risorse. Il pannello Risorse ti consente anche di visualizzare oggetti avanzati che potrebbero non essere selezionabili nella finestra Documento (ad esempio, immagini di Sfondo CSS).
Nel pannello File, fai clic sulla scheda Risorse per visualizzare
le risorse del sito.
Assicuratevi che la vista Immagini sia selezionata. In caso contrario, fate clic sul pulsante Immagini.
Selezionate ogni risorsa di immagine nel pannello Risorse. Quando
selezioni un oggetto avanzato, vedrai l'icona Oggetto avanzato nell'angolo
superiore sinistro dell'immagine. Le immagini normali non presentano questa icona.
Per ogni oggetto avanzato che vuoi aggiornare, fai clic con il pulsante destro del mouse
sul nome del file e seleziona Aggiorna da originale. Puoi anche tenere premuto Control e fare clic
per selezionare più nomi di file e aggiornarli tutti contemporaneamente.
Nota
Non è necessario avere Photoshop installato per effettuare l'aggiornamento da Dreamweaver.
Ridimensionare un oggetto avanzato
Puoi ridimensionare un oggetto avanzato nella finestra Documento proprio come faresti con qualsiasi altra immagine.
Seleziona l'oggetto avanzato nella finestra Documento
e trascina le maniglie di ridimensionamento per ridimensionare l'immagine. Puoi mantenere
le proporzioni di larghezza e altezza tenendo premuto il tasto Maiusc mentre
trascini.
Fate clic sul pulsante Aggiorna da originale nella finestra di ispezione Proprietà.
Quando aggiorni l'oggetto avanzato, l'immagine web viene rielaborata senza perdite alla nuova dimensione, in base al contenuto attuale del file originale e alle impostazioni di ottimizzazione originali.
Modifica il file Photoshop originale di un oggetto avanzato
Dopo aver creato un oggetto avanzato sulla pagina Dreamweaver, puoi modificare il file PSD originale in Photoshop. Dopo aver apportato le modifiche in Photoshop, puoi quindi aggiornare facilmente l'immagine web in Dreamweaver.
Nota
Assicurati di aver impostato Photoshop come editor di immagini esterno primario.
Selezionate l'oggetto avanzato nella finestra del documento.
Fate clic sul pulsante Modifica nella finestra di ispezione Proprietà.
Apportate le modifiche in Photoshop e salvate il nuovo file PSD.
In Dreamweaver, selezionate nuovamente l'oggetto avanzato e fate clic sul pulsante Aggiorna da originale.
Nota
se avete modificato le dimensioni dell'immagine in Photoshop, dovete reimpostare le dimensioni dell'immagine Web in Dreamweaver. Dreamweaver aggiorna un oggetto avanzato solamente in base al contenuto del file Photoshop originale e non alle sue dimensioni. Per sincronizzare le dimensioni di un'immagine Web con quelle del file Photoshop originale, fate clic con il pulsante destro del mouse sull'immagine e selezionate Ripristina dimensione originale.
Stati degli oggetti avanzati
La tabella seguente elenca i vari stati degli oggetti avanzati.
|
Stato oggetto avanzato |
Descrizione |
Azione consigliata |
|
Immagini sincronizzate |
L'immagine Web è sincronizzata con il contenuto corrente del file Photoshop originale. Gli attributi width (larghezza) e height (altezza) nel codice HTML corrispondono alle dimensioni dell'immagine Web. |
No |
|
Risorsa originale modificata |
Il file Photoshop originale è stato modificato dopo la creazione dell'immagine Web in Dreamweaver. |
Utilizzate il pulsante Aggiorna da originale nella finestra di ispezione Proprietà per sincronizzare le due immagini. |
|
Le dimensioni dell'immagine Web sono diverse dai valori HTML di larghezza e altezza |
Gli attributi width e height nel codice HTML sono diversi dalle dimensioni di larghezza e altezza dell'immagine Web che Dreamweaver ha creato al momento dell'inserimento. Se le dimensioni dell'immagine Web sono inferiori ai valori HTML width e height selezionati, l'immagine Web può apparire pixelata. |
Utilizzate il pulsante Aggiorna da originale nella finestra di ispezione Proprietà per ricreare l'immagine Web dal file Photoshop originale. Dreamweaver utilizza le dimensioni HTML width e height correntemente specificate quando ricrea l'immagine. |
|
Le dimensioni della risorsa originale sono troppo ridotte per il valori HTML width e height selezionati |
Gli attributi width e height nel codice HTML sono maggiori rispetto alle dimensioni di larghezza e altezza del file Photoshop originale. L'immagine Web può apparire pixelata. |
Evitate di creare immagini Web con dimensioni superiori a quelle del file Photoshop originale. |
|
Risorsa originale non trovata |
Dreamweaver non è in grado di individuare il file Photoshop originale nella casella di testo Originale della finestra di ispezione Proprietà. |
Correggete il percorso del file nella casella di testo Originale nella finestra di ispezione Proprietà, oppure spostate il file Photoshop nella posizione correntemente specificata. |
Copia e incolla una selezione da Photoshop
Puoi copiare tutta o parte di un'immagine di Photoshop e incollare la selezione nella pagina di Dreamweaver come immagine pronta per il web.Puoi copiare un singolo livello o un set di livelli di un'area selezionata dell'immagine oppure puoi copiare una sezione dell'immagine.Tuttavia, quando fai questo, Dreamweaver non crea un Oggetto avanzato.
Nota
anche se la funzionalità Aggiorna da originale non è disponibile per le immagini incollate, potete comunque aprire e modificare il file Photoshop originale selezionando l'immagine incollata e facendo clic sul pulsante Modifica nella finestra di ispezione Proprietà.
In Photoshop, effettuate una delle seguenti operazioni:
- Copiate interamente o in parte un singolo livello utilizzando lo strumento Selezione per selezionare la porzione da copiare e scegliendo quindi Modifica > Copia. Questa operazione copia negli Appunti solamente il livello attivo dell'area selezionata. Eventuali effetti basati sui livelli non vengono copiati.
- Copiate e unite più livelli utilizzando lo strumento Selezione per selezionare la porzione da copiare, quindi scegliete Modifica > Copia elementi uniti. Questa operazione unisce e copia negli Appunti tutti i livelli dell'area selezionata (attivi e non attivi). Vengono copiati anche gli eventuali effetti basati sui livelli associati a questi livelli.
- Copiate una porzione utilizzando lo strumento Selezione porzione per selezionare la porzione, quindi scegliete Modifica > Copia. Questa operazione unisce e copia negli Appunti tutti i livelli della porzione (attivi e non attivi).
Nota
Potete scegliere Seleziona > Tutti per selezionare rapidamente l'intera immagine da copiare.
In Dreamweaver (vista Progettazione o Codice), posiziona il punto di inserimento
nella pagina dove desideri inserire l'immagine.
Selezionate Modifica > Incolla.
Nella finestra di dialogo Ottimizzazione immagine, modificate le impostazioni di ottimizzazione, se necessario, e fate clic su OK.
Salva il file di immagine pronto per il web in una posizione all'interno della
cartella principale del sito web.
Dreamweaver definisce l'immagine in base alle impostazioni di ottimizzazione e ne inserisce nella pagina una versione in formato Web. Le informazioni sull'immagine, ad esempio la posizione del file PSD originale, vengono memorizzate in una Design Note, indipendentemente dall'abilitazione dell'uso di Design Notes nel sito. La Design Note consente di tornare a modificare il file Photoshop originale da Dreamweaver.
Modificare immagini incollate
Dopo aver incollato le immagini di Photoshop nelle pagine di Dreamweaver, puoi modificare il file PSD originale in Photoshop. Quando utilizzi il flusso di lavoro copia/incolla, Adobe consiglia di apportare sempre le modifiche al file PSD originale (anziché all'immagine pronta per il web) e quindi incollare nuovamente per mantenere la fonte singola.
Nota
Assicurati di aver impostato Photoshop come editor di immagini esterno primario per il tipo di file che desideri modificare.
In Dreamweaver, seleziona
un'immagine pronta per il web che è stata originariamente creata in Photoshop ed esegui
una delle seguenti operazioni:
- Fate clic sul pulsante Modifica nella finestra di ispezione Proprietà dell'immagine.
- Premi Ctrl (Windows) o Comando (Macintosh) mentre fai doppio clic sul file.
- Fai clic con il pulsante destro del mouse (Windows) o fai clic tenendo premuto Ctrl (Macintosh) su un'immagine, scegli Modifica originale con dal menu contestuale e quindi scegli Photoshop.
Nota
Questo presuppone che Photoshop sia impostato come editor di immagini esterno primario per i file di immagini PSD.Puoi anche impostare Photoshop come editor predefinito per i tipi di file JPEG, GIF e PNG.
Modificate il file in Photoshop.
Torna a Dreamweaver e incolla l'immagine aggiornata o la
selezione nella pagina.
Se in qualsiasi momento desiderate riottimizzare l'immagine, potete selezionarla e fare clic sul pulsante Modifica impostazioni immagine nella finestra di ispezione Proprietà.
Impostazione della finestra di dialogo Ottimizzazione immagine
Quando create un oggetto avanzato o incollate una selezione da Photoshop, Dreamweaver visualizza la finestra di dialogo Ottimizzazione immagine. (Dreamweaver visualizza questa finestra di dialogo anche per qualunque altro tipo di immagine se selezionate un'immagine e fate clic sul pulsante Modifica impostazioni immagine nella finestra di ispezione Proprietà.) Questa finestra di dialogo consente di definire e visualizzare un'anteprima delle impostazioni delle immagini in formato Web mediante il giusto equilibrio di colore, compressione e qualità.
Si definisce in formato Web un'immagine che può essere visualizzata da tutti i browser Web attuali e che mantiene un aspetto costante, indipendentemente dal sistema o dal browser utilizzati per visualizzarla. In generale, le impostazioni comportano un compromesso tra qualità e dimensioni del file.
Nota
qualsiasi esse siano, le impostazioni selezionate hanno effetto solamente sulla versione importata del file di immagine. Il file PSD di Photoshop o PNG di Fireworks originale rimane sempre inalterato.
Preimpostazione
Scegliete una preimpostazione adatta alle vostre esigenze. Le dimensioni del file dell'immagine cambiano a seconda della preimpostazione scelta. Un'anteprima istantanea dell'immagine con l'impostazione applicata viene visualizzata nello sfondo.
Ad esempio, per le immagini che devono essere visualizzate con un elevato grado di chiarezza, scegliete PNG24 per le foto (particolari netti).Seleziona GIF per immagini di sfondo (pattern) se stai inserendo un pattern che fungerà da sfondo della pagina.
Quando selezionate una preimpostazione, vengono visualizzate le relative opzioni configurabili.Se desideri personalizzare ulteriormente le impostazioni di ottimizzazione, modifica i valori di queste opzioni.
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.
