Guida utente Annulla

Creative Cloud Libraries 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

 

Sfogliate, gestite e accedete alle risorse creative tra più progetti Dreamweaver con Adobe Stock e usando altre app Adobe.

Con Creative Cloud Libraries le vostre risorse preferite sono sempre a disposizione ovunque. Potete creare o acquisire immagini, colori, stili di testo e altro ancora in diverse app desktop e per dispositivi mobili Creative Cloud, e accedervi facilmente da tutte le altre app desktop e per dispositivi mobili e usufruire così di un flusso di lavoro snello ed efficiente.

Potete accedere a CC Libraries direttamente da Dreamweaver per riutilizzare nelle vostre pagine Web colori e grafica. Potete anche mantenere aggiornata la grafica inserita con quella nel cloud inserendola come risorsa "collegata".

Continuate a leggere per ulteriori informazioni sull'utilizzo di CC Libraries in Dreamweaver.

Pannello CC Libraries

Il pannello CC Libraries (Finestra > CC Libraries) è il punto di accesso principale alle risorse salvate in Creative Cloud. Il pannello consente anche di cercare risorse in Adobe Stock.

Pannello CC Libraries
Pannello CC Libraries

Utilizzando questo pannello, potete:

  • Sfogliare una determinata libreria per le risorse memorizzate in essa
  • Creare una libreria
  • Visualizzare in anteprima le risorse nella libreria selezionata
  • Trascinare o copiare le risorse da inserire nella pagina Web
  • Immettere una parola chiave, ad esempio, il nome completo o parte di esso di un'immagine da cercare in Adobe Stock

Guida introduttiva

Definire un sito in Dreamweaver

Un sito in Dreamweaver è una cartella in cui sono memorizzate tutte le immagini, i video, gli script, i fogli di stile e gli altri file correlati alle pagine Web. La previa definizione del sito consente di semplificare il salvataggio delle risorse importante nel sito da CC Libraries. Verificate che la pagina Web nella quale importare le risorse da CC Libraries sia anche salvata nella cartella del sito.

Per ulteriori informazioni sulla creazioni di siti, consultate Configurare una versione locale del sito.

Aggiungere risorse a CC Libraries

Assicurandosi che tutte le risorse necessarie siano disponibili in Creative Cloud consente di importare rapidamente in Dreamweaver le risorse nella pagina Web.

Se state cercando immagini stock, allora Adobe Stock è il posto ideale da dove iniziare. Per informazioni dettagliate, consultate Ottenere risorse da Adobe Stock.

La grafica e i colori acquisiti o creati con diverse app Adobe per desktop e dispositivi mobili possono essere archiviati in Creative Cloud e importati nelle pagine web. Ad esempio, una grafica vettoriale creata con Adobe Shape CC o un’immagine elaborata utilizzando Photoshop. Creative Cloud consente di collaborare e condividere risorse, a livello personale o di team, in modo da riutilizzare anche le risorse create da altri.

Per ulteriori informazioni su Creative Cloud Libraries, consultate Creative Cloud Libraries.

Ottenere risorse da Adobe Stock

Adobe Stock è strettamente integrato con Creative Cloud Libraries. Le immagini possono essere cercate e aggiunte a CC Libraries in uno dei modi seguenti:

  • Direttamente dal sito Web di Adobe Stock.
  • Utilizzando il pannello CC Libraries in Dreamweaver.
  • Utilizzando i pannelli CC Libraries in altre applicazioni Adobe quali Photoshop e Illustrator.

Dopo avere aggiunto le immagini a una libreria CC, potete seguire le istruzioni contenute nell’argomento Riutilizzare la grafica in CC Libraries per utilizzare le immagini nelle pagine Web.

Se non siete sicuri che l’immagine Stock sia quella adatta, e non desiderate quindi acquistarla immediatamente, potete aggiungere alle librerie solo le immagini Stock con filigrana (anteprime) da utilizzare come segnaposto. Quando siete pronti ad effettuare l’acquisto di queste immagini, potete procedere dal pannello CC Libraries in Dreamweaver e in altre app o direttamente dal sito web di Adobe Stock. 

Ricerca di immagini in Adobe Stock tramite il pannello CC Libraries
Ricerca di immagini in Adobe Stock tramite il pannello CC Libraries

Quando acquistate la licenza per un’immagine, tutte le istanze della risorsa con filigrana nei documenti aperti, saranno aggiornate con la sua versione ad alta risoluzione.

Riutilizzare colori e temi di colore salvati in CC Libraries

Riutilizzare colori e temi di colore nella vista Dal vivo

I colori e i temi di colore possono essere salvati in Creative Cloud Libraries da app quali Illustrator, Photoshop e Adobe Color CC. Questi colori e temi di colore possono anche essere importati nelle pagine Web utilizzando il pannello CC Libraries in Dreamweaver effettuando le seguenti operazioni:

  1. Nel pannello CC Libraries, effettuate una delle operazioni seguenti:

    • Fate clic sul colore o sul tema di colore desiderato. Il valore esadecimale del colore o del tema di colore viene copiato negli Appunti.
    • Fate clic con il pulsante destro del mouse sul colore o sul tema di colore desiderato, quindi selezionate Copia valore RGB o Copia valore HEX. 
  2. Incollate il valore del colore nella vista Codice o in CSS Designer.

Riutilizzare colori nella vista Codice

I colori salvati in Creative Cloud sono disponibili come suggerimenti di codice nella vista Codice. Durante la creazione del codice nella vista Codice, potete selezionare i colori necessari dai suggerimenti di codice. L'icona Creative Cloud accanto al colore nei suggerimenti codice indica che questi colori sono memorizzati in Creative Cloud.

Colori nella libreria di Creative Cloud visualizzati nei suggerimenti codice
Colori nella libreria di Creative Cloud visualizzati nei suggerimenti codice

I suggerimenti codice ricavano i colori da una libreria attualmente aperta nel pannello CC Libraries. Nell’immagine riportata sopra, i colori della libreria "My Library" vengono resi disponibili come suggerimenti codice. Per ottenere i colori da un’altra libreria di Creative Cloud come suggerimenti codice, aprite la libreria richiesta nel pannello CC Libraries, quindi riprendete il lavoro nella vista Codice.

Riutilizzare la grafica salvata in CC Libraries

A partire dal 16 novembre 2021, Dreamweaver ha interrotto la funzionalità di estrazione di SVG da una risorsa di Illustrator. Vi invitiamo a utilizzare questa soluzione alternativa per attivare l'opzione del formato immagine e convertire le risorse di Illustrator (.ai) in formati PNG 32/PNG 24/PNG 8/JPEG. In alternativa, gli utenti possono esportare le risorse di Illustrator in formato SVG dall'app Illustrator.

Potete salvare la grafica creata utilizzando le app Adobe per desktop e dispositivi mobili, ad esempio, Photoshop, Illustrator, Adobe Shape CC o Adobe Sketch CC, in Creative Cloud Libraries. Il pannello CC Libraries consente di inserire la grafica nella vista Dal vivo e i suggerimenti sul codice semplificano l'inserimento della grafica direttamente nel codice.

Potete inserire la grafica da CC Libraries come:

  • Risorse collegate: quando la grafica è inserita come risorsa collegata, nella vista Dal vivo viene visualizzata una piccola icona di una nuvola nell’angolo inferiore destro della risorsa. Questa icona indica che la risorsa è collegata alla risorsa originale nel cloud. L’icona nuvola è visualizzata anche accanto alla risorsa nel pannello Risorse.
  • Risorse non collegate: potete inserire una risorsa come copia locale nelle pagine Web. Nella vista Dal vivo, fate clic con il pulsante destro del mouse sulla risorsa richiesta nel pannello CC Libraries, quindi selezionate "Inserisci non collegata". Quando inserite la copia della grafica, la risorsa è copiata nel computer locale e non è collegata alla risorsa originale nel cloud. Questo significa che qualsiasi modifica o aggiornamento alla risorsa nel cloud non verrà riportata in Dreamweaver.

Potete anche scaricare le risorse in batch e salvarle nel computer per un uso futuro.

Riutilizzare la grafica nella vista Dal vivo

  1. Effettuate una delle seguenti operazioni:

    1. Trascinate la grafica dal pannello CC Libraries sulla pagina nella vista Dal vivo.

      Nota: quando trascinate la grafica dal pannello CC Libraries nella vista Dal vivo, la grafica viene inserita come grafica "collegata" (se avete definito un sito).

      I file di Illustrator vengono inseriti per impostazione predefinita come file SVG ottimizzati per il Web. Se desiderate personalizzare le proprietà dei file SVG, potete modificare le preferenze nel file options.json. Per ulteriori informazioni, consultate Estrarre file SVG ottimizzati per il Web da CC Libraries.

    2. Fate clic con il pulsante destro del mouse sulla risorsa richiesta nel pannello CC Libraries e selezionate:

      • "Inserisci collegata" per inserire la grafica come risorsa collegata. Questo significa che la risorsa manterrà il suo riferimento con la risorsa corrispondente nel cloud. Qualsiasi modifica alla risorsa nel cloud verrà riportata nella risorsa collegata in Dreamweaver.
      • "Inserisci non collegata" per inserire la grafica come risorsa non collegata.
  2. Nella finestra di dialogo Campionamento visualizzata, specificate il nome del file e le dimensioni dell’immagine. Per informazioni dettagliate, consultate Specificare le opzioni di campionamento per la grafica.

Riutilizzare la grafica nella vista Codice

La grafica salvata in Creative Cloud Libraries è disponibile come suggerimenti di codice nella vista Codice. Innanzitutto, aprite la libreria richiesta selezionandola nel pannello CC Libraries. Passate quindi alla vista Codice, e durante la creazione del codice, selezionate la grafica desiderata dai suggerimenti di codice. L’icona Creative Cloud accanto alla grafica nei suggerimenti codice indica che questa grafica è memorizzata in Creative Cloud.

Grafica in CC Libraries visualizzata come suggerimenti codice
Grafica in CC Libraries visualizzata come suggerimenti codice

Nota: quando inserite la grafica utilizzando i suggerimenti di codice, la grafica "non è collegata".

Per ottenere i colori da un’altra libreria di Creative Cloud come suggerimenti codice, aprite la libreria richiesta nel pannello CC Libraries, quindi riprendete il lavoro nella vista Codice.

Specificare le opzioni di campionamento per la grafica

Le caselle Altezza e Larghezza ricampionano la risorsa utilizzando il motore di ottimizzazione delle immagini di Dreamweaver. Potete anche selezionare il tipo di formato con cui inserire la risorsa. L’icona cloud abilitata indicata che la risorsa è inserita come risorsa collegata. Dopo aver specificato il nome del file e le opzioni di campionamento, premete Invio per inserire la risorsa.

Ricampionamento di immagini
Ricampionamento di immagini

 Nota:

  • L’opzione SVG è disponibile solo per i file di Illustrator (.ai) ed è l’impostazione predefinita per tali file. Potete cambiare il formato di tali file in JPEG utilizzando l’elenco a discesa nella finestra di dialogo di ricampionamento.
  • Un file JPEG può essere inserito solo come tale, e pertanto, per tali file non è disponibile nessun’altra opzione di formato.

Modificare la grafica

Dal pannello CC Libraries, potete aprire e modificare con rapidità le risorse InDesign e Illustrator nelle loro applicazioni native. A tal fine, fate clic con il pulsante destro del mouse sulla risorsa nel pannello CC Libraries, quindi fate clic su Modifica.

Assicuratevi che le applicazioni native, InDesign o Illustrator, siano installate nel medesimo computer dell’istanza Dreamweaver che state utilizzando. Assicuratevi inoltre di aver installato da Creative Cloud gli aggiornamenti più recenti per queste applicazioni.

Scollegare, ricampionare e rinominare la grafica collegata

Le immagini importate nelle pagine Web possono essere rinominate, ridimensionate o ricampionate da CC Libraries utilizzando una delle seguenti opzioni:

  • Selezionate la risorsa nella vista Dal vivo, quindi fate clic sull’icona nuvola. 
  • Fate clic con il pulsante destro del mouse sulla risorsa e selezionate le opzioni Risorsa collegata.
  • Fate doppio clic sull’icona nuvola accanto al nome della risorsa nel pannello Risorse.

Nella finestra di dialogo di ricampionamento visualizzata potete modificare le proprietà desiderate. Per scollegare la risorsa dalla sua sorgente in CC Libraries, fate clic sull’icona nuvola nella finestra di dialogo di ricampionamento.

Se scollegate una risorsa, le modifiche apportate al file di origine in Creative Cloud non saranno riportate nell’immagine presente sulla pagina Web.

Download della grafica

Potete scaricare in blocco la grafica richiesta come risorsa collegata da CC Libraries e inserirla successivamente nel vostro progetto. Quando utilizzate queste risorse nei progetti, esse mantengono il collegamento al corrispondente elemento nella libreria. 

  • Collegata: per scaricare la grafica come risorsa collegata, fate clic con il pulsante destro del mouse sulla risorsa nel pannello CC Libraries e selezionate Scarica collegata. Viene visualizzata la finestra a comparsa con le opzioni per nome file e ricampionamento. Specificate il nome file e le opzioni di campionamento, quindi premete Invio per salvare la risorsa nella cartella del sito.
  • Non collegata: per scaricare la grafica come risorsa non collegata, fate clic con il pulsante destro del mouse sulla risorsa necessaria nel pannello CC Libraries e selezionate Scarica copia. Viene visualizzata la finestra a comparsa con le opzioni per nome file e ricampionamento. Specificate il nome file e le opzioni di campionamento, quindi premete Invio per salvare la risorsa nella cartella del sito.
Logo Adobe

Accedi al tuo account