Guida utente Annulla

Ambiente di codifica 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

 

Scoprite come utilizzare l’ambiente di codifica di Dreamweaver per velocizzare il processo di scrittura del codice.

Se desiderate scrivere il codice in Dreamweaver, potete scegliere di utilizzare l’area di lavoro Sviluppatore. Questa area di lavoro mostra per impostazione predefinita la vista Codice e contiene solo i pannelli File e Snippet agganciati a sinistra della schermata.

Se sono richieste altre funzionalità, fate clic su Finestra e scegliete il pannello appropriato.

Nota:

se le aree di lavoro predefinite non offrono le funzionalità richieste, potete personalizzarne il layout. Aprite e ancorate i pannelli dove desiderato, quindi salvate l’area di lavoro come area di lavoro personalizzata. Per ulteriori informazioni, consultate Creare aree di lavoro personalizzate.

Operazioni con il codice in Dreamweaver

In Dreamweaver potete lavorare con il codice in diversi modi. Potete utilizzare:

Per spostarvi tra viste diverse, potete fare clic sui pulsanti di attivazione/disattivazione Codice, Dividi e Progettazione/Dal vivo nella parte superiore dell’area di lavoro.

Potete anche utilizzare la finestra di ispezione Codice per visualizzare il codice HTML in una finestra mobile. La finestra di ispezione Codice consente di visualizzare simultaneamente il design e il codice del sito Web senza dover dividere la vista a metà. Per ulteriori informazioni, consultate Visualizzare il codice in una finestra separata con la finestra di ispezione Codice.

Visualizzare il codice nella finestra del documento - Vista Codice

Selezionate Visualizza > Codice.

Codificare e modificare simultaneamente una pagina nella finestra del documento - Vista combinata

  1. Selezionate Visualizza > Codice e progettazione.

    Il codice viene visualizzato nel riquadro superiore e la pagina nel riquadro inferiore.

  2. Per visualizzare la pagina in primo piano, selezionate Vista Progettazione in primo piano dal menu Visualizza nella barra degli strumenti Documento.
  3. Per regolare la dimensione dei riquadri all’interno della finestra del documento, trascinate la barra di divisione fino alla posizione desiderata. La barra di divisione si trova tra i due riquadri.

    La vista Codice viene aggiornata automaticamente ogni volta che applicate delle modifiche nella vista Progettazione. Quando apportate delle modifiche nella vista Codice, aggiornate manualmente il documento nella vista Progettazione facendo clic su quest’ultima e premendo F5.

Visualizzare il codice in una finestra separata con la finestra di ispezione Codice

La finestra di ispezione Codice consente di lavorare in una finestra di codifica separata, come nella vista Codice.

  1. Selezionate Finestra > Finestra di ispezione Codice. La barra degli strumenti comprende le seguenti sezioni:

    Gestione file

    Carica o scarica il file.

    Anteprima/debug nel browser

    Consente di visualizzare l’anteprima di un documento ed eseguirne il debug in un browser.

    Aggiorna vista Progettazione

    Aggiorna il documento in vista Progettazione in modo che rifletta eventuali modifiche apportate nel codice. Le modifiche apportate nel codice non vengono visualizzate automaticamente in vista Progettazione finché non eseguite alcune azioni come il salvataggio del file o la selezione di questo pulsante.

    Navigazione codice

    Consente di spostarsi rapidamente nel codice. Vedere Passaggio a una funzione JavaScript o VBScript.

    Opzioni di visualizzazione

    Consente di determinare come viene visualizzato il codice. Vedere Impostazione dell’aspetto del codice.

Scrivere codice più velocemente in Dreamweaver

La vista Codice in Dreamweaver offre funzioni di codifica intuitive che semplificano la transizione allo sviluppo nella vista Codice per i progettisti e consentono ai programmatori esperti di trarre vantaggio da riferimenti visivi quali rientro automatico, colorazione del codice e font ridimensionabili, riducendo così gli errori e migliorando la leggibilità.

Di seguito sono elencate alcune funzioni offerte da Dreamweaver.

Suggerimenti sul codice e completamento del codice

La funzione suggerimenti codice (o completamento codice) di Dreamweaver vi consente di selezionare tag, attributi e stili CSS da un menu a comparsa durante la digitazione. Questo completamento automatico del codice vi consente di scrivere codice più velocemente, riducendo gli errori.

Di seguito è riportato un esempio che ne mostra il funzionamento in HTML. 

Quando iniziate a digitare “<”, Dreamweaver apre un menu a comparsa che elenca tutti i tag HTML disponibili. Continuando a digitare il tag, Dreamweaver aggiorna automaticamente le opzioni HTML disponibili e consente di selezionare un tag pertinente. Quando premete Invio, Dreamweaver inserisce automaticamente il tag. Visualizza quindi un secondo menu a comparsa nel quale sono elencate tutte le proprietà disponibili di tale tag.

I suggerimenti sul codice sono supportati anche per CSS, JavaScript e PHP (versione 5.6 e 7.1). 

Per ulteriori informazioni, consultate Suggerimenti sul codice e completamento del codice.

Supporto per le versioni 5.6 e 7.1 di PHP

Dreamweaver supporta le versioni 5.6 e 7.1 di PHP. 

La scelta della versione di PHP (5.6 o 7.1) da utilizzare per la compilazione del sito può essere effettuata individualmente per ogni sito dalla finestra di dialogo Configurazione sito o per tutti i file PHP salvati esternamente ai siti Dreamweaver dalle preferenze dell’applicazione. In Dreamweaver sono quindi configurati i suggerimenti sul codice e i controlli di linting per la versione selezionata del linguaggio PHP.

Per i nuovi siti in Dreamweaver, il compilatore PHP predefinito è impostato sulla versione specificata in Modifica > Preferenze > PHP.

Per ulteriori informazioni sul supporto per PHP in Dreamweaver, consultate:

Per informazioni generali sulle versioni 5.6 e 7.1 di PHP, consultate le seguenti risorse:

Suggerimenti sul codice per oggetti JavaScript

Dreamweaver supporta i suggerimenti sul codice di oggetti in JavaScript. Dreamweaver fornisce suggerimenti per oggetti JavaScript di base quali array, date, numeri e stringhe. 

Inoltre, Dreamweaver tiene traccia delle funzioni JavaScript create e fornisce suggerimenti utilizzando i nomi delle funzioni che create.

Per ulteriori informazioni, consultate Suggerimenti sul codice e completamento del codice.

Refactoring del codice JavaScript

Dreamweaver supporta il refactoring del codice. Il refactoring del codice è una tecnica di ristrutturazione del codice informatico esistente senza modificarne il comportamento esterno. La leggibilità del codice migliora, semplificandone così la comprensione. Il debug del codice può essere completato in meno tempo grazie alla creazione di funzioni più brevi e alla corretta sostituzione. Con il refactoring di JavaScript, potete rinominare le funzioni e determinare l’ambito delle variabili.

Per ulteriori informazioni, consultate Scrivere e modificare codice.

Colorazione del codice per diversi tipi di file

Dreamweaver supporta la colorazione del codice per HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML e YAML.

Più cursori per attività ripetitive

Scrivi più di una riga di codice alla volta per eseguire in rapidità operazioni come creare un elenco puntato, aggiornare una serie di stringhe e applicare più modifiche contemporaneamente.

Questa funzione aumenta notevolmente la produttività, poiché non è necessario scrivere la stessa riga di codice più volte. I diversi cursori consentono di scrivere il codice una sola volta.

Durante la modifica del codice, potete:

  • Aggiungere più cursori per aggiungere nuovo contenuto in più punti
  • Selezionare testo in più punti per applicare la stessa modifica in zone diverse del documento

Per ulteriori informazioni, consultate Aggiungere più cursori o selezioni.

Modifica rapida dei file di codice correlato

Per modificare rapidamente il codice, posizionate il cursore su snippet di codice specifici e utilizzate il menu di scelta rapida o premete Ctrl-E (Windows) o Comando-E (Mac) per accedere a Modifica rapida.

Dreamweaver visualizza opzioni del codice specifiche al contesto e strumenti in linea.

Scenario di utilizzo

Considerate l’esempio seguente:

State modificando un file HTML e notate che qualcosa nella vista Dal vivo non è corretto. Passate quindi alla vista Codice e realizzate che per risolvere il problema, dovete modificare un altro file correlato (ad esempio un file CSS). 

Invece di passare a un’altra scheda, fate clic con il pulsante destro del mouse sul codice pertinente e selezionate Modifica rapida o utilizzate una scelta rapida da tastiera; Dreamweaver aprirà la sezione di codice relativa nel file CSS correlato all’interno del file HTML stesso.

Potete quindi modificare il codice CSS senza dover passare a tale file o cambiare scheda. Le modifiche sono aggiornate automaticamente nel file CSS.

Per ulteriori informazioni, consultate Modifica rapida.

Documentazione CSS nel contesto

Doc rapidi fornisce la documentazione delle proprietà CSS direttamente nella vista Codice.

Per apprendere le proprietà CSS non è più necessario passare da Dreamweaver a una pagina web. Per visualizzare Doc rapidi, premete Ctrl+K (Windows) o Comando+K (Mac).

Per ulteriori informazioni, consultate Aiuto con CSS in Dreamweaver con Doc rapidi.

Supporto integrato per Emmet

Emmet è un plug-in che consente di codificare e generare codice HTML e CSS in modo estremamente rapido.

Il plug-in Emmet è incluso con Dreamweaver e consente di utilizzare le abbreviazioni Emmet senza dover installare il plug-in.

Utilizzate le abbreviazioni Emmet nella vista Codice o nella finestra di ispezione Codice di Dreamweaver; premendo il tasto Tab queste abbreviazioni vengono espanse in codice HTML o CSS.

Le abbreviazioni per HTML si espandono in pagine HTML e PHP.

Le abbreviazioni per CSS si espandono in pagine CSS, LESS, Sass, SCSS o all’interno di tag di stile in pagine HTML.

Per ulteriori informazioni sull’uso di Emmet, consultate Utilizzare il toolkit Emmet con Dreamweaver.

Compressione del codice

Dreamweaver consente di comprimere sezioni di codice per consentire di focalizzare l’attenzione sulle sezioni che si stanno attivamente modificando. 

Il codice può essere compresso in base ai tag o alle parentesi, oppure in base alla selezione. 

Per ulteriori informazioni, consultate Comprimere ed espandere codice.

Convalida del codice

Dreamweaver offre funzionalità avanzate di linting per semplificare il debug degli errori nel codice. 

Esso analizza il codice per trovare potenziali errori o utilizzi sospetti del codice. Tra gli elementi che la funzione lint in Dreamweaver aiuta a individuare vi sono errori di sintassi HTML, errori di analisi in CSS e avvisi nei file JavaScript.

Per ulteriori informazioni sul linting del codice in Dreamweaver, consultate Linting del codice.

Se lavorate con PHP e il documento contiene codice non valido, Dreamweaver lo visualizza nella vista Progettazione (se è aperto) e lo evidenzia nella vista Codice (in base alle preferenze impostate).

Se selezionate il codice in una delle viste, la finestra di ispezione Proprietà visualizza informazioni sui motivi per cui il codice non è valido e su come correggerlo.

Nota:

l’opzione che consente di evidenziare il codice non valido in vista Codice è disattivata per impostazione predefinita. Per attivarla, passate alla vista Codice (Visualizza > Codice) e selezionate Visualizza > Opzioni vista Codice > Evidenzia codice non valido.

Potete anche specificare le preferenze per fare in modo che il programma riscriva automaticamente vari tipi di codice non valido quando aprite un documento.

Per ulteriori informazioni sulla configurazione delle preferenze di codifica, consultate Impostare le preferenze di codifica.

Supporto per preprocessori CSS

Dreamweaver ora supporta i più comuni preprocessori CSS, ad esempio SASS, Less e SCSS, con colorazione completa del codice, suggerimenti del codice e compilazione. 

Grazie al supporto per i preprocessori CSS, potrete risparmiare tempo quando lavorate su siti di grandi dimensioni con fogli di stile complicati.

Per ulteriori informazioni sul supporto per i preprocessori CSS in Dreamweaver, consultate Utilizzare i preprocessori CSS in Dreamweaver.

Salvare e riutilizzare gli snippet di codice

Salvate i blocchi di codice comunemente utilizzati come snippet di codice nel pannello Snippet. Potete quindi inserire questi blocchi di codice in diverse pagine.

Gli snippet salvati nel pannello Snippet non sono specifici al sito, per cui possono essere riutilizzati in diversi siti.

Potete anche utilizzare gli snippet su dispositivi diversi e anche tra diverse versioni di Dreamweaver utilizzando le impostazioni di sincronizzazione.

Per ulteriori informazioni, consultate Riutilizzo del codice con gli snippet.

Anteprima in tempo reale nel browser

Visualizzate rapidamente in anteprima le modifiche al codice in tempo reale senza dover aggiornare manualmente il browser. Dreamweaver ora si connette al browser in modo che le modifiche siano visualizzate istantaneamente senza ricaricare la pagina.

Per ulteriori informazioni, consultate Anteprima in tempo reale nel browser.

Personalizzare le scelte rapide da tastiera

In Dreamweaver potete adottare le scelte rapide da tastiera preferite. Se siete abituati a utilizzare scelte rapide da tastiera specifiche (ad esempio, Maiusc+Invio per inserire un’interruzione di riga o Ctrl+G per raggiungere una posizione specifica all’interno del codice), potete aggiungerle anche in Dreamweaver mediante l’Editor delle scelte rapide da tastiera.

Per istruzioni, consultate Personalizzare le scelte rapide da tastiera.

Aprire i file nella vista Codice per impostazione predefinita

Quando aprite un file che in genere non contiene codice HTML, come i file JavaScript, questo viene visualizzato in vista Codice o nella finestra di ispezione Codice. Potete specificare quali tipi di file aprire nella vista Codice.

  1. Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh).
  2. Selezionate Tipi di file/editor dall’elenco Categoria visualizzato sulla sinistra.
  3. Nella casella Apri in vista Codice, aggiungere le estensioni dei file che desiderate vengano aperti automaticamente nella vista Codice.

    Digitate uno spazio tra le estensioni dei nomi di file. Potete aggiungere altre estensioni.

Logo Adobe

Accedi al tuo account