Ambiente di codifica in Dreamweaver

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.

Operazioni con il codice in Dreamweaver

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

• Vista Codice: un layout semplice e minimalista che consente di lavorare esclusivamente con il codice, senza finestre o pannelli aggiuntivi. Per ulteriori informazioni, consultate Visualizzare il codice nella finestra del documento.
• Vista Dividi: in questa vista sono visualizzate le viste Codice e Dal vivo o Progettazione, così potrete vedere le modifiche apportate al codice. Per ulteriori informazioni, consultate Codificare e modificare simultaneamente una pagina nella finestra del documento - Vista Dividi.

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

Codifica e modifica una pagina simultaneamente nella finestra Documento - Vista divisa

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

L'ispettore Codice consente di lavorare in una finestra di codifica separata, proprio come lavorare nella vista 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.

Il supporto per i suggerimenti codice è disponibile anche per CSS, javascript e PHP (versioni PHP 5.6 e 8.4.10). 

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

Supporto per l'aggiornamento alla versione 8 di PHP

dreamweaver consente di generare, modificare e visualizzare in anteprima le applicazioni web PHP. Con l'integrazione nativa della versione 8 di PHP, ottieni prestazioni migliorate, sintassi moderna e gestione avanzata dei tipi.  Questo articolo spiega come configurare dreamweaver per lavorare senza problemi con la versione 8 di PHP nel tuo ambiente locale o test.

La versione 8 di PHP introduce diversi aggiornamenti chiave che migliorano sia la velocità che l'esperienza dello sviluppatore:

• Compilazione Just-In-Time (JIT) per un'esecuzione più rapida del codice.
• Tipi di unione e argomenti denominati per definizioni di funzioni flessibili.
• Attributi (Annotazioni) per metadati più puliti.
• Sicurezza dei tipi migliorata e gestione degli errori per un codice più affidabile e manutenibile.
• Espressioni di corrispondenza e altri miglioramenti della sintassi moderna per un codice più chiaro e conciso.

dreamweaver continua a supportare l'evidenziazione della sintassi PHP, i suggerimenti codice e l'anteprima lato Server per i progetti con versione 8 di PHP quando configurato correttamente.

Supporto per le versioni PHP 5.6 e 8.4.10

dreamweaver supporta le versioni PHP 5.6 e 8.4.10. 

Puoi scegliere di compilare i file PHP della tua sede con le versioni PHP 5.6 e 8.4.10 utilizzando la finestra di dialogo Configurazione sito (per singola sede) o le preferenze dell'Applicazione (per tutti i file PHP salvati al di fuori delle sedi dreamweaver). 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 PHP in dreamweaver, consulta:

• Impostare le preferenze di PHP
• Suggerimenti sul codice PHP

Per informazioni generali sulle versioni PHP 5.6, 7.1 e 8.4.10, consulta le seguenti risorse:

• Migrazione da PHP 5.6.x a PHP 7.0.x: http://php.net/manual/en/migration70.php
• Migrazione da PHP 7.4.x a PHP8.0.x: https://www.php.net/manual/en/migration80.php
• Per saperne di più su PHP 8.4.10: https://www.php.net/releases/8_4_10.php

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 caso d'uso

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, consulta Ottieni assistenza con CSS in dreamweaver utilizzando Quick Docs.

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.

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 apri un tipo di file che normalmente non contiene HTML (ad esempio, un file javascript), il file si apre in visualizzazione Codice (o nell'ispettore del codice) invece che in visualizzazione Progettazione. Puoi specificare quali tipi di file si aprono in visualizzazione Codice.

Altri contenuti simili

• Gestire finestre e pannelli
• Salvare e commutare tra aree di lavoro
• Personalizzare le scelte rapide da tastiera
• Gestione delle librerie di tag
• Modificare il formato del codice
• Impostare i colori del codice
• Utilizzare un editor esterno
• Impostare le preferenze della funzione Convalida