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.

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

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

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.

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:

• Impostare le preferenze di PHP
• Suggerimenti sul codice PHP

Per informazioni generali sulle versioni 5.6 e 7.1 di PHP, consultate 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.0.x a PHP 7.1: http://php.net/manual/en/migration71.php
• Per ulteriori informazioni su PHP 7.1: http://php.net/releases/7_1_0.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 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.

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.