Guida utente Annulla

Utilizzare i file Photoshop in Dreamweaver

  1. Guida utente di Dreamweaver
  2. Introduzione
    1. Nozioni di base sul design responsive
    2. Novità di Dreamweaver
    3. Sviluppo Web con Dreamweaver - Panoramica
    4. Dreamweaver / Domande frequenti
    5. Scelte rapide da tastiera
    6. Requisiti di sistema di Dreamweaver
    7. Riepilogo delle funzioni
  3. Dreamweaver e Creative Cloud
    1. Sincronizzare le impostazioni di Dreamweaver con Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Utilizzare i file Photoshop in Dreamweaver
    4. Operazioni con Adobe Animate e Dreamweaver
    5. Estrarre file SVG ottimizzati per il Web da Libraries
  4. Aree di lavoro e viste di Dreamweaver
    1. Area di lavoro di Dreamweaver
    2. Ottimizzare l'area di lavoro di Dreamweaver per lo sviluppo visivo
    3. Eseguire ricerche nei file in base al nome file o al contenuto | Mac OS
  5. Configurare i siti
    1. Siti di Dreamweaver
    2. Configurare una versione locale del sito
    3. Collegamento a un server di pubblicazione
    4. Configurare un server di prova
    5. Importare ed esportare le impostazioni di un sito Dreamweaver
    6. Passaggio di siti Web esistenti da un server remoto alla cartella principale del sito locale
    7. Funzioni di accessibilità in Dreamweaver
    8. Impostazioni avanzate
    9. Impostazione delle preferenze del sito per il trasferimento dei file
    10. Specificare le Impostazioni del server proxy in Dreamweaver
    11. Sincronizzare le impostazioni di Dreamweaver con Creative Cloud
    12. Utilizzo di Git in Dreamweaver
  6. Gestire i file
    1. Creare e aprire file
    2. Gestire file e cartelle
    3. Scaricamento e caricamento dei file da e verso il server
    4. Depositare e ritirare i file
    5. Sincronizzare i file
    6. Confrontare file per verificare le differenze
    7. Applicare la maschera file a file e cartelle del sito Dreamweaver
    8. Attivare le Design Notes per i siti di Dreamweaver
    9. Impedire un potenziale attacco exploit del Gatekeeper
  7. Layout e progettazione
    1. Usare i riferimenti visivi per il layout
    2. Informazioni sull'utilizzo di CSS per creare il layout della pagina
    3. Progettazione di siti Web reattivi con Bootstrap
    4. Creazione e utilizzo di media query in Dreamweaver
    5. Presentare il contenuto mediante le tabelle
    6. Colori
    7. Responsive design con i layout a griglia fluida
    8. Extract in Dreamweaver
  8. CSS
    1. Nozioni sui fogli di stile CSS
    2. Creazione del layout delle pagine con CSS Designer
    3. Utilizzare i preprocessori CSS in Dreamweaver
    4. Impostare le preferenze di stile CSS in Dreamweaver
    5. Spostare le regole CSS in Dreamweaver
    6. Convertire CSS in linea in una regola CSS in Dreamweaver
    7. Utilizzare i tag div
    8. Applicare sfumature allo sfondo
    9. Creare e modificare effetti di transizione CSS3 in Dreamweaver
    10. Formattazione del codice
  9. Contenuto e risorse delle pagine
    1. Impostare le proprietà di pagina
    2. Impostare le proprietà dei collegamenti CSS e le proprietà dei collegamenti CSS
    3. Lavorare con il testo
    4. Ricercare e sostituire testo, tag e attributi
    5. Pannello DOM
    6. Modifica nella vista Dal vivo
    7. Codifica dei documenti in Dreamweaver
    8. Selezionare e visualizzare gli elementi nella finestra del documento
    9. Definire le proprietà del testo nella finestra di ispezione Proprietà
    10. Eseguire il controllo ortografico di una pagina Web
    11. Utilizzo dei filetti orizzontali in Dreamweaver
    12. Aggiungere e modificare le combinazioni di caratteri in Dreamweaver
    13. Operazioni con le risorse
    14. Inserire e aggiornare le date in Dreamweaver
    15. Creare e gestire le risorse preferite in Dreamweaver
    16. Inserire e modificare le immagini in Dreamweaver
    17. Aggiungere oggetti multimediali
    18. Aggiunta di video in Dreamweaver
    19. Inserire video HTML5
    20. Inserire file SWF
    21. Aggiungere effetti audio
    22. Inserire l'audio HTML5 in Dreamweaver
    23. Operazioni con le voci di libreria
    24. Utilizzare testo in arabo e in ebraico in Dreamweaver
  10. Collegamenti e navigazione
    1. Informazioni sui collegamenti e sulla navigazione
    2. Collegamenti
    3. Mappe immagine
    4. Risoluzione dei problemi di collegamenti
  11. Widget ed effetti jQuery
    1. Utilizzare i widget jQuery UI e Mobile in Dreamweaver
    2. Usare effetti jQuery in Dreamweaver
  12. Programmazione dei siti Web
    1. Programmazione in Dreamweaver
    2. Ambiente di codifica in Dreamweaver
    3. Impostare le preferenze di codifica
    4. Personalizzare la colorazione del codice
    5. Scrivere e modificare codice
    6. Suggerimenti sul codice e completamento del codice
    7. Comprimere ed espandere codice
    8. Riutilizzo del codice con gli snippet
    9. Comando Lint
    10. Ottimizzare il codice
    11. Modificare il codice nella vista Progettazione.
    12. Utilizzo del contenuto dell'intestazione delle pagine
    13. Inserimento di server-side include in Dreamweaver
    14. Uso delle librerie di tag in Dreamweaver
    15. Importazione di tag personalizzati in Dreamweaver
    16. Utilizzare i comportamenti JavaScript (istruzioni generali)
    17. Applicare comportamenti JavaScript incorporati
    18. Informazioni su XML e XSLT
    19. Eseguire trasformazioni XSL server-side in Dreamweaver
    20. Esecuzione di trasformazioni XSL client-side in Dreamweaver
    21. Aggiungere entità di carattere per XSLT in Dreamweaver
    22. Formattazione del codice
  13. Flussi di lavoro di interazione con altri prodotti
    1. Installazione e uso delle estensioni in Dreamweaver
    2. Aggiornamenti in app in Dreamweaver
    3. Inserire documenti Microsoft Office in Dreamweaver (solo Windows)
    4. Operazioni con Fireworks e Dreamweaver
    5. Modificare il contenuto nei siti Dreamweaver mediante Contribute
    6. Integrazione tra Dreamweaver e Business Catalyst
    7. Creare campagne e-mail personalizzate
  14. Modelli
    1. Informazioni sui modelli di Dreamweaver
    2. Riconoscere i modelli e i documenti basati sui modelli
    3. Creare un modello di Dreamweaver
    4. Creare aree modificabili nei modelli
    5. Creare aree e tabelle ripetute nei modelli in Dreamweaver
    6. Usare le aree opzionali nei modelli
    7. Definire attributi di tag modificabili in Dreamweaver
    8. Creare modelli nidificati in Dreamweaver
    9. Modificare, aggiornare ed eliminare modelli
    10. Esportare e importare contenuti xml in Dreamweaver
    11. Applicare o rimuovere un modello da un documento esistente
    12. Modificare il contenuto nei modelli di Dreamweaver
    13. Regole di sintassi per i tag di modello in Dreamweaver
    14. Impostare le preferenze di evidenziazione per le aree dei modelli
    15. Vantaggi dell'uso dei modelli in Dreamweaver
  15. Dispositivi mobili e multischermo
    1. Creare media query
    2. Cambiamento dell'orientamento della pagina per i dispositivi mobili
    3. Creare web app per dispositivi mobili utilizzando Dreamweaver
  16. Siti, pagine e moduli Web dinamici
    1. Applicazioni Web
    2. Configurare il computer per lo sviluppo di applicazioni
    3. Risoluzione dei problemi relativi alle connessioni di database
    4. Rimozione di script di connessione in Dreamweaver
    5. Progettare pagine dinamiche
    6. Panoramica sulle origini di contenuto dinamico
    7. Definire le origini di contenuto dinamico
    8. Aggiungere contenuto dinamico alle pagine
    9. Modifica del contenuto dinamico in Dreamweaver
    10. Visualizzare i record di database
    11. Fornire dati dal vivo e risoluzione dei problemi in Dreamweaver
    12. Aggiungere comportamenti server personalizzati in Dreamweaver
    13. Creazione di moduli con Dreamweaver
    14. Usare moduli per raccogliere informazioni dagli utenti
    15. Creare e attivare i moduli ColdFusion in Dreamweaver
    16. Creare moduli Web
    17. Supporto HTML5 avanzato per gli elementi modulo
    18. Sviluppare un modulo con Dreamweaver
  17. Sviluppo visivo delle applicazioni
    1. Creare pagine principali e di dettaglio in Dreamweaver
    2. Creare pagine di ricerca e di risultati
    3. Creare una pagina di inserimento record
    4. Costruire una pagine di aggiornamento record in Dreamweaver
    5. Costruzione di pagine di eliminazione record in Dreamweaver
    6. Utilizzare comandi ASP per modificare un database in Dreamweaver
    7. Creare una pagina di registrazione
    8. Creare una pagina di login
    9. Creare una pagina accessibile solo agli utenti autorizzati
    10. Protezione delle cartelle in ColdFusion utilizzando Dreamweaver
    11. Utilizzo di componenti ColdFusion in Dreamweaver
  18. Verifica, anteprima e pubblicazione dei siti Web
    1. Anteprima delle pagine
    2. Visualizzare in anteprima pagine web di Dreamweaver su più dispositivi
    3. Verificare il sito Dreamweaver
  19. Risoluzione dei problemi
    1. Problemi risolti
    2. Problemi noti

 

 

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 di Photoshop sono stati rimossi in Dreamweaver 21.0 e versioni successive.

In Dreamweaver, potete inserire file di immagine Photoshop (in formato PSD) nelle pagine Web, lasciando a Dreamweaver il compito di ottimizzarle per il Web (nei formati GIF, JPEG e PNG). Quando eseguite questa operazione, Dreamweaver inserisce l'immagine sotto forma di oggetto avanzato (Smart Object) e mantiene una connessione attiva con il file PSD originale.

Dreamweaver permette anche di incollare interamente o in parte un'immagine Photoshop multilivello o multiporzione in una pagina Web. Tuttavia, quando copiate o incollate da Photoshop, non viene mantenuta alcuna connessione attiva con il file originale. Per aggiornare l'immagine, apportate le modifiche in Photoshop, quindi copiatela e incollatela nuovamente.

Nota:

se utilizzate questa funzione frequentemente, può essere consigliabile memorizzare i file Photoshop nel sito di Dreamweaver, in modo da facilitarne l'accesso. Se è così, assicuratevi di applicare a essi la maschera file per evitare l'esposizione delle risorse originali, oltre che i trasferimenti superflui 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 in Dreamweaver con file di Photoshop: mediante l'uso di operazioni Copia e Incolla e mediante l'uso di oggetti avanzati.

Flusso di lavoro con operazioni Copia e Incolla

Il flusso di lavoro con operazioni Copia e Incolla permette di selezionare sezioni o livelli in un file Photoshop, quindi di usare Dreamweaver per inserirli in immagini pronte per il Web. Per aggiornare successivamente il contenuto, tuttavia, sarà necessario aprire il file Photoshop originale, apportarvi le modifiche, copiare la sezione o il livello nuovamente negli Appunti, quindi incollarli in Dreamweaver. Questo flusso di lavoro è consigliato solo per inserire parte di un file Photoshop (ad esempio, una sezione di un'immagine più complessa) come immagine in una pagina Web.

Flusso di lavoro con oggetti avanzati

Quando si lavora con file Photoshop completi, è preferibile ricorrere al flusso di lavoro con oggetti avanzati. Un oggetto avanzato in Dreamweaver è una risorsa immagine inserita in una pagina Web con un collegamento dinamico al file Photoshop (PSD) originale. Nella vista Progettazione di Dreamweaver, un oggetto avanzato è contrassegnato da un'icona nell'angolo in alto a sinistra dell'immagine.

Oggetto avanzato

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.

Con il flusso di lavoro basato sull'utilizzo di oggetti avanzati, non occorre aprire Photoshop per aggiornare un'immagine Web. Inoltre, eventuali aggiornamenti apportati a un oggetto avanzato in Dreamweaver sono di tipo non distruttivo. Questo significa che potete apportare modifiche alla versione Web dell'immagine presente sulla pagina e lasciare inalterata l'immagine Photoshop originale.

Potete inoltre aggiornare un oggetto avanzato senza selezionare l'immagine Web in vista Progettazione. Dal pannello Risorse è possibile aggiornare tutti gli oggetti avanzati, comprese le immagini che potrebbero non essere selezionabili nella finestra del documento (ad esempio, le 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 inserite un'immagine Photoshop (file PSD) nella pagina, Dreamweaver crea un oggetto avanzato. Un oggetto avanzato (Smart Object) è un'immagine in formato Web che mantiene una connessione attiva con l'immagine Photoshop originale. Ogni volta che aggiornate l'immagine originale in Photoshop, Dreamweaver vi fornisce la possibilità di aggiornare l'immagine in Dreamweaver con la semplice selezione di un pulsante.

  1. In Dreamweaver (vista Progettazione o Codice), posizionate il punto di inserimento nel punto nella pagina in cui desiderate inserire l'immagine.
  2. Selezionate Inserisci > Immagine.

    Nota:

    Potete anche trascinare il file PSD nella pagina dal pannello File se memorizzate i file Photoshop nel sito Web. In tal caso, saltate il punto seguente.

  3. Localizzate il file di immagine PSD di Photoshop nella finestra di dialogo Seleziona file di origine immagine facendo clic sul pulsante Sfoglia per cercarla.

  4. Nella finestra di dialogo Ottimizzazione immagine visualizzata, selezionate le impostazioni di ottimizzazione necessarie e fate clic su OK.

  5. Salvate il file di immagine in formato 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 colloca nella pagina una versione in formato Web dell'immagine. L'oggetto avanzato mantiene una connessione attiva con il file originale e vi informa se 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 modificate il file Photoshop a cui è collegato l'oggetto avanzato, Dreamweaver vi avverte che l'immagine in formato Web non è sincronizzata con l'originale. In Dreamweaver, gli oggetti avanzati sono caratterizzati da un'icona presente nell'angolo superiore sinistro dell'immagine. Quando l'immagine in formato Web in Dreamweaver è sincronizzata con il file Photoshop originale, entrambe le frecce nell'icona sono di colore verde. Quando l'immagine in formato Web non è sincronizzata con il file Photoshop originale, una delle frecce è di colore rosso.

  1. 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 Photoshop sia installato per effettuare l'aggiornamento da Dreamweaver.

Aggiornare più oggetti avanzati

Potete aggiornare più oggetti avanzati contemporaneamente utilizzando il pannello Risorse. Il pannello Risorse consente anche di visualizzare quegli oggetti avanzati che potrebbero non essere selezionabili nella finestra del documento (ad esempio, le immagini di sfondo CSS).

  1. Nel pannello File, fate clic sulla scheda Risorse per visualizzare le risorse del sito.
  2. Assicuratevi che la vista Immagini sia selezionata. In caso contrario, fate clic sul pulsante Immagini.

  3. Selezionate ogni risorsa di immagine nel pannello Risorse. Quando selezionate un oggetto avanzato, viene visualizzata l'icona dell'oggetto avanzato nell'angolo superiore sinistro dell'immagine. Le immagini normali non presentano questa icona.
  4. Per ogni oggetto avanzato che desiderate aggiornare, fate clic con il pulsante destro del mouse sul nome e selezionate Aggiorna da originale. Potete anche fare clic tenendo premuto il tasto Ctrl per selezionare più nomi di file e aggiornarli contemporaneamente.
Nota:

non è necessario che Photoshop sia installato per effettuare l'aggiornamento da Dreamweaver.

Ridimensionare un oggetto avanzato

Potete ridimensionare un oggetto avanzato nella finestra del documento allo stesso modo di qualsiasi altra immagine.

  1. Selezionate l'oggetto avanzato nella finestra del documento e trascinate le maniglie di ridimensionamento per ridimensionare l'immagine. Potete mantenere la proporzione tra larghezza e altezza tenendo premuto il tasto Maiusc mentre trascinate.
  2. Fate clic sul pulsante Aggiorna da originale nella finestra di ispezione Proprietà.

    Quando aggiornate l'oggetto avanzato, l'immagine Web effettua nuovamente il rendering non distruttivo con le nuove dimensioni, basandosi sul contenuto corrente del file originale e sulle impostazioni di ottimizzazione originali.

Modificare il file di Photoshop originale di un oggetto avanzato

Una volta creato l'oggetto avanzato nella pagina di Dreamweaver, potete modificare il file PSD originale in Photoshop. Una volta apportate le modifiche in Photoshop, potete successivamente aggiornare l'immagine Web in Dreamweaver.

Nota:

assicuratevi che Photoshop sia impostato come editor di immagini esterno principale.

  1. Selezionate l'oggetto avanzato nella finestra del documento.
  2. Fate clic sul pulsante Modifica nella finestra di ispezione Proprietà.

  3. Apportate le modifiche in Photoshop e salvate il nuovo file PSD.
  4. 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.

Copiare e incollare una selezione da Photoshop

Potete copiare interamente o in parte un'immagine Photoshop, quindi incollare la selezione nella pagina Dreamweaver come immagine in formato Web. Potete copiare un singolo livello, oppure un insieme di livelli dell'area selezionata dell'immagine, oppure ancora copiare una sua porzione. Quando effettuate questa operazione, 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à.

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

  2. In Dreamweaver (vista Progettazione o Codice), posizionate il punto di inserimento nel punto nella pagina in cui desiderate inserire l'immagine.
  3. Selezionate Modifica > Incolla.

  4. Nella finestra di dialogo Ottimizzazione immagine, modificate le impostazioni di ottimizzazione, se necessario, e fate clic su OK.

  5. Salvate il file di immagine in formato 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

Una volta incollate le immagini Photoshop nelle pagine Dreamweaver, potete modificare il file PSD originale in Photoshop. Quando utilizzate il flusso di lavoro copia/incolla, Adobe consiglia di apportare sempre le modifiche al file PSD originale (anziché all'immagine in formato Web) e di reincollare l'immagine per mantenere l'origine unica.

Nota:

verificate che Photoshop sia impostato come editor grafico principale per le immagini esterne sul tipo di file che volete modificare.

  1. In Dreamweaver, selezionate un'immagine in formato Web originariamente creata in Photoshop, quindi effettuate una delle seguenti operazioni:
    • Fate clic sul pulsante Modifica nella finestra di ispezione Proprietà dell'immagine.
    • Tenendo premuto il tasto Ctrl (Windows) o Comando (Macintosh), fate doppio clic sul file.
    • Fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh) su un'immagine, selezionate Modifica origine con dal menu di scelta rapida, quindi scegliete Photoshop.
    Nota:

    quanto segue presuppone che Photoshop sia impostato come editor di immagini esterne principale per i file di immagine PSD. Può anche essere necessario impostare Photoshop come editor predefinito per i tipi di file JPEG, GIF e PNG.

  2. Modificate il file in Photoshop.
  3. Tornate a Dreamweaver e incollate l'immagine o la selezione aggiornata 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 sullo sfondo.

Ad esempio, per le immagini che devono essere visualizzate con un elevato grado di chiarezza, scegliete PNG24 per le foto (particolari netti).  Selezionate GIF per le immagini di sfondo (modelli) se inserite un modello che verrà utilizzato come sfondo della pagina.


Quando selezionate una preimpostazione, vengono visualizzate le relative opzioni configurabili.  Se desiderate personalizzare ulteriormente le impostazioni di ottimizzazione, modificate i valori di queste opzioni.

 Adobe

Ottieni supporto in modo più facile e veloce

Nuovo utente?

Adobe MAX 2024

Adobe MAX
La conferenza sulla creatività

14-16 ottobre Miami Beach e online

Adobe MAX

La conferenza sulla creatività

14-16 ottobre Miami Beach e online

Adobe MAX 2024

Adobe MAX
La conferenza sulla creatività

14-16 ottobre Miami Beach e online

Adobe MAX

La conferenza sulla creatività

14-16 ottobre Miami Beach e online