Scrivere e modificare codice

Ultimo aggiornamento il 27 apr 2021

Scoprite come lavorare nella vista Codice e ottenete il massimo dalle funzioni di codifica di Dreamweaver.

Ci sono diversi modi per lavorare con il codice in Dreamweaver.

Puoi aprire un nuovo file di codice utilizzando la finestra di dialogo Nuovo documento e iniziare a digitare il codice.

Creare un nuovo file di codice in Dreamweaver

Durante la digitazione, sono visualizzati i suggerimenti sul codice che vi consentono di selezionare il codice ed evitare errori di ortografia. Ottieni aiuto con CSS quando ne hai bisogno utilizzando l'utile Documentazione rapida di Dreamweaver.

Puoi anche inserire codice utilizzando il pannello Inserisci o utilizzare scorciatoie di codifica come le abbreviazioni Emmet.

Se ti ritrovi a copiare e incollare lo stesso pezzo di codice più volte, prova queste funzioni per risparmiare tempo:

Il pannello Frammenti è prezioso per creare e inserire rapidamente frammenti di codice preformattati nel codice.
I cursori multipli ti consentono di creare e modificare più righe di codice contemporaneamente.

Dreamweaver offre anche un robusto set di strumenti di modifica che rendono scorrevoli la navigazione e le modifiche al codice.

Usa la funzione trova e sostituisci di Dreamweaver per cercare tag, attributi o testo nel codice.
Utilizzate Navigazione codice per passare al codice correlato all’interno e all’esterno del file corrente. Ancora meglio, usa la funzione Modifica rapida per modificare il codice nei file correlati senza nemmeno aprire il file in una nuova scheda.
Fai clic con il pulsante destro del mouse sul codice per visualizzare un menu di scelta rapida semplice e pertinente che ti consente di modificare direttamente il codice.
Usa Racchiudi con tag per racchiudere il testo nei tag.

Continua a leggere per ottenere maggiori informazioni su tutte queste funzioni di codice.

Inserire il codice usando il pannello Inserisci

Posizionate il punto di inserimento nel codice.

Selezionate una categoria appropriata nel pannello Inserisci.

Fai clic su un pulsante nel pannello Inserisci o seleziona un elemento da un menu a comparsa nel pannello Inserisci.

Quando fai clic su un'icona, il codice appare immediatamente nella pagina o viene visualizzata una finestra di dialogo che richiede ulteriori informazioni per completare il codice.

Il numero e il tipo di pulsanti disponibili nel pannello Inserisci varia in base al tipo di documento corrente. Un altro fattore determinante è la scelta tra vista Codice e vista Progettazione.

Utilizzare il toolkit Emmet con Dreamweaver

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

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 CSS si espandono nelle pagine CSS, LESS, SASS, SCSS o all'interno del tag style in una pagina HTML.

Di seguito sono riportati alcuni esempi che illustrano come utilizzare le abbreviazioni Emmet nella vista Codice. Per informazioni dettagliate e riferimenti, consulta la documentazione Emmet.

Nota

Dreamweaver supporta attualmente le abbreviazioni Emmet 1.2.2.

Esempio 1: inserimento di codice HTML utilizzando Emmet

Per aggiungere rapidamente codice HTML per un elenco non ordinato con tre elementi, apri il file HTML e digita la seguente abbreviazione Emmet nella vista Codice all'interno di <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Verificate che il cursore sia posizionato subito dopo l’abbreviazione di Emmet e premete Tab per espandere l’abbreviazione. In alternativa, seleziona l'intera abbreviazione e premi Invio.

L'abbreviazione si espande nel seguente codice:

<div>

<ul>

<li>Lorem Ipsum</li>

</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>

<p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>

<p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>

<p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>

</div>

Esempio 2: inserimento del codice CSS mediante Emmet

Per inserire il codice CSS per creare il raggio del bordo con prefissi vendor, apri il file CSS e digita la seguente abbreviazione Emmet all'interno di una classe:

-bdrs

Quando premi Tab, l'abbreviazione si espande nel codice seguente:

-webkit-border-radius: ;

-moz-border-radius: ;

border-radius: ;

Utilizzo dei commenti di codice

Un commento è un testo descrittivo che viene inserito nel codice HTML per spiegarne la funzione o fornire altre informazioni. Il testo del commento appare solo nella vista Codice e non viene visualizzato in un browser.

Aggiungere commenti al codice

Per aggiungere commenti, immettere innanzitutto il testo del commento. Puoi quindi posizionare il cursore nel punto di inserzione e fare clic sull'icona Inserisci dalla barra degli strumenti per aprire il sottomenu Applica commento.

Potete anche selezionare il testo e trasformarlo in commento. Il testo selezionato viene racchiuso in un blocco di commento.

Potete aggiungere commenti utilizzando varie opzioni di sintassi. Selezionate la sintassi appropriata e Dreamweaver inserirà i tag. Devi solo inserire il testo del commento.

Puoi anche utilizzare le scelte rapide da tastiera Ctrl+/ (su Windows) o Cmd+/ (su Mac) per aggiungere commenti.

Se utilizzate la scelta rapida da tastiera senza selezionare del testo, il commento è applicato alla riga corrente. Se selezioni il testo e usi la scelta rapida da tastiera, il commento viene applicato al testo selezionato.

Rimuovere i commenti dal codice

Per rimuovere i commenti del codice, selezionate il codice e fate clic sull’icona Rimuovi commento nella barra degli strumenti. Puoi anche usare le scelte rapide da tastiera Ctrl+/ (su Windows) o Cmd+/ (su Mac) per rimuovere i commenti.

Alternare i commenti del codice

Per alternare tra mostrare e nascondere i commenti nella visualizzazione codice, premi semplicemente Ctrl+/ su Windows o Cmd+/ su Mac per il commento o la riga selezionati.

Utilizzare i cursori multipli per aggiungere o modificare il testo in più posizioni

Aggiungete i cursori in più punti o selezionate più sezioni di codice e modificatele contemporaneamente utilizzando la funzione per cursori multipli di Dreamweaver.

Nota

Le operazioni di copia e incolla e trova e sostituisci non funzionano con cursori multipli o selezioni multiple.

Aggiungere più cursori o selezioni

Puoi aggiungere più cursori in modi diversi a seconda delle tue esigenze.

Se vuoi aggiungere lo stesso testo in più posizioni senza sostituire alcun testo esistente, aggiungi cursori multipli.

Per sostituire il testo esistente, potete effettuare più selezioni. Puoi selezionare righe di testo continue o discontinue, o entrambe, e aggiungere cursori a esse.

Per aggiungere cursori multipli o selezioni multiple sulla stessa colonna attraverso righe continue:

Tenete premuto il tasto Alt, quindi trascinate in verticale. Quando trascini verticalmente, vengono aggiunti cursori a ogni riga attraversata.

Per selezionare righe di testo contigue, premete il tasto Alt e trascinate in diagonale. Quando trascini in diagonale, Dreamweaver seleziona un blocco rettangolare di testo all'interno di tale selezione.

Selezionare e aggiornare più righe di testo contemporaneamente

Nota

Per aggiungere rapidamente cursori o includere più righe in una selezione, usa le scelte rapide da tastiera Shift+Alt+Su o Giù.

Una volta aggiunti i cursori (o selezionato il testo) in più posizioni, inizia a digitare.

Se hai più cursori, viene aggiunto nuovo testo.

Se hai selezionato contenuto in più righe di testo, il testo selezionato viene sostituito con il nuovo testo inserito.

Per aggiungere cursori multipli su colonne diverse attraverso le righe:

Per aggiungere cursori a righe di testo discontinue, premi il tasto Ctrl e fai clic sulle diverse righe dove vuoi posizionare il cursore.

Aggiunta di cursori su più righe di testo non contigue

Per selezionare righe di testo discontinue, seleziona del testo, poi premi il tasto Ctrl (Windows) o il tasto Cmd (Mac) e continua a fare ulteriori selezioni.

Per aggiungere cursori all'inizio/fine di ogni riga:

Seleziona più righe di testo e premi i tasti freccia Sinistra o Destra.

Per aggiungere cursori nelle righe precedenti o seguenti per una selezione:

Premi i tasti Shift+Alt+Su/Giù e poi premi il tasto freccia destra.

Per selezionare righe di testo continue e discontinue:

Puoi combinare queste tecniche per selezionare sia righe continue che separate di testo all'interno di una singola selezione.

Prima seleziona le righe di testo discontinue, poi premi Ctrl+Alt (su Windows) o Cmd+Alt (su Mac) e trascina per aggiungere un set di righe alle selezioni multiple esistenti.

Selezionare righe di testo contigue e non contigue

Aiuto con CSS in Dreamweaver con Doc rapidi

Quando lavori con file CSS, LESS o SCSS in Dreamweaver, puoi ottenere rapidamente ulteriori informazioni sulle proprietà CSS o sui valori.

Posiziona il cursore all'interno di una proprietà o di un valore e premi Ctrl + K, Dreamweaver apre la documentazione dal progetto Web Platform Docs.

Puoi aprire contemporaneamente più editor incorporati e visualizzatori di documenti.

Per chiudere un singolo editor incorporato o visualizzatore di documenti, fai clic sulla "X" in alto a sinistra o premi Escape mentre Quick Docs è in focus.

Per chiudere tutti gli editor incorporati e i documenti, posiziona il cursore nell'editor del codice principale e premi Escape.

Analizzare il codice

Dreamweaver supporta il linting (analizza il codice per potenziali errori) per HTML, CSS e JavaScript.

Nel pannello Output sono elencati gli errori e gli avvisi rilevati con il linting. Per ulteriori informazioni, consultate Codice di linting.

Inoltre, Dreamweaver mostra un’anteprima rapida dell’errore nella colonna del numero di riga della riga in questione. Il numero di riga viene visualizzato in rosso per indicare che contiene errori e quando ci passi sopra con il mouse, viene visualizzata una breve descrizione dell'errore.

Nota: viene visualizzato solo il primo errore nella riga. Se la riga contiene solo un avviso, ne viene visualizzata la descrizione. Se la riga contiene un avviso e un errore, viene visualizzata solo la descrizione dell'errore.

Racchiudere il testo nel codice utilizzando Applica tag

Usate Applica tag nella vista Codice per racchiudere determinate righe di testo con un tag. Nella vista Design o Live, puoi utilizzare questa funzione per racchiudere oggetti con un tag.

Seleziona testo nella vista Codice o un oggetto nella vista Design e premi Ctrl+T sulla tastiera.

Appare una finestra a comparsa che ti consente di scegliere tra diversi tag HTML.

Seleziona un tag dal menu.

Se state utilizzando la vista Codice, il testo selezionato viene racchiuso con il tag. Se stai lavorando nella vista Design o Live, l'oggetto selezionato viene racchiuso con il tag.

Modifica il codice con il menu contestuale Codifica

Utilizza il menu contestuale di Dreamweaver per apportare modifiche rapide al codice.

Per accedere al menu di scelta rapida, fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto il tasto Comando (Mac). Le seguenti opzioni sono disponibili per l'uso:

Modifica rapida

Fate clic su questa opzione per accedere alla modalità Modifica rapida. In questa modalità, Dreamweaver fornisce il codice specifico al contesto e gli strumenti in linea per ottenere rapidamente la sezione di codice necessaria. Per ulteriori informazioni, consulta Modifica rapida.

Taglia, copia, incolla

Fai clic su queste opzioni per tagliare, copiare e incollare rapidamente il testo senza dover accedere al menu Modifica.

Cerca e sostituisci, Trova successivo, Trova precedente

Fai clic su queste opzioni per trovare e sostituire il testo rapidamente senza dover accedere al menu Trova.

Crea nuovo snippet

Usate questa opzione per creare snippet di codice da salvare per riutilizzarli successivamente. Selezionate il codice, quindi fate clic su Crea nuovo snippet, per creare uno snippet dal codice selezionato. Per ulteriori informazioni, consultate Operazioni con gli snippet di codice.

Apri file correlato

Fai clic destro su un collegamento/tag script e fai clic su Apri file correlato per aprire il file.

Associa foglio di stile

Allega un foglio di stile CSS esistente alla tua pagina.

Selezione

Il sottomenu Selezione include varie opzioni di modifica del codice che puoi utilizzare su una porzione selezionata di codice, come attivare/disattivare commenti di riga e blocco, espandere e comprimere la selezione, convertire CSS incorporato in regole, spostare regole CSS e stampare codice.

Navigazione codice

Fate clic su questa opzione per individuare le origini codice correlate, quali le regole CSS interne ed esterne, le server-side include, i file JavaScript esterni, i file di modello di livello principale, i file di libreria e i file di origine iframe. Per ulteriori informazioni, vedete Lavorare con Navigazione codice.

Strumenti suggerimenti per il codice

Il sottomenu Strumenti Suggerimento Codice porta a portata di mano il selettore colore, il browser URL e gli strumenti dell'elenco Font.

Applicare un rientro ai blocchi di codice

Mentre scrivi e modifichi codice nella vista Codice o nell'Ispettore codice, puoi cambiare il livello di rientro di un blocco o di una riga di codice selezionati, spostandoli a destra o a sinistra di una tabulazione.

Applicare un rientro al blocco di codice selezionato

Premi Tab, o
Premi Ctrl+], oppure
Selezionate Modifica > Rientro codice.

Rimuovi il rientro del blocco di codice selezionato

Premi Maiusc+Tab, oppure
Premi Ctrl+[, oppure
Selezionate Modifica > Rientro a sinistra codice.

Lavorare con Navigazione codice

La funzione Navigazione codice visualizza un elenco delle origini codice correlate a una particolare selezione nella pagina. Utilizzatela per individuare le origini codice correlate, quali le regole CSS interne ed esterne, le server-side include, i file JavaScript esterni, i file di modello di livello principale, i file di libreria e i file di origine iframe. Quando fate clic su un collegamento in Navigazione codice, Dreamweaver apre il file che contiene la porzione di codice pertinente. Il file viene visualizzato nell’area dei file correlati, se è abilitato. Se non ci sono file correlati abilitati, Dreamweaver apre i file selezionati sotto forma di documenti separati nella finestra del documento.

Se fate clic su una regola CSS in Navigazione codice, Dreamweaver la apre direttamente. Se la regola è interna al file, Dreamweaver la visualizza in una vista combinata. Se la regola si trova in un file CSS esterno, Dreamweaver apre il file e visualizza la regola nell’area dei file correlati al di sopra del documento principale.

Puoi accedere al Navigatore di codice dalle viste Progettazione, Codice e Divisa e anche dall'Ispezione codice.

Per una panoramica video dal team di ingegneria di Dreamweaver sull'utilizzo del Navigatore di codice, consulta www.adobe.com/go/dw10codenav.

Per un video tutorial sull'utilizzo di Live View, dei file correlati e del Navigatore di codice, consulta www.adobe.com/go/lrvid4044_dw.

Aprire Navigazione codice

Alt+clic (Windows) o Comando+Opzione+Clic (Macintosh) ovunque sulla pagina. Il Navigatore di codice visualizza i collegamenti al codice che influisce sull'area su cui hai fatto clic.

Fate clic all'esterno di Navigazione codice per chiuderlo.

Nota

Puoi anche aprire il Navigatore di codice facendo clic sull'indicatore del Navigatore di codice . Questo indicatore appare vicino al punto di inserimento sulla pagina quando il mouse è rimasto inattivo per 2 secondi.

Naviga nel codice con il Navigatore di codice

Apri il Navigatore di codice dall'area della pagina che ti interessa.

Fate clic sulla porzione di codice a cui volete passare.

Navigazione codice raggruppa le origini del codice correlato in base al file ed elenca i file alfabeticamente. Ad esempio, supponete che le regole CSS in tre file esterni influiscano sulla selezione nel documento. In tal caso, Navigazione codice elenca i tre file e le regole CSS pertinenti alla selezione. Per le regole CSS pertinenti a una specifica selezione, Navigazione codice funziona in modo simile al pannello Stili CSS in modalità Corrente.

Nota

Quando passate sopra dei collegamenti a una regola CSS, Navigazione codice visualizza le descrizioni delle proprietà della regola. Questi suggerimenti sono utili quando desideri distinguere tra molte regole che condividono un nome.

Disabilitare l’indicatore di Navigazione codice

Aprite Navigazione codice.

Selezionate Disattiva indicatore nell'angolo inferiore destro.

Fate clic all'esterno di Navigazione codice per chiuderlo.

Per riabilitare l'indicatore del Navigatore di codice, Alt+Clic (Windows) o Comando+Opzione+Clic (Macintosh) per aprire il Navigatore di codice e deseleziona l'opzione Disabilita indicatore.

Vai a una funzione JavaScript o VBScript

Nella vista Codice e nell'Ispezione codice, puoi visualizzare un elenco di tutte le funzioni JavaScript o VBScript nel codice e saltare a una qualsiasi di esse.

Visualizza il documento nella vista Codice (Vista > Codice) o nell'Ispezione codice (Finestra > Ispezione codice).

Effettuate una delle operazioni seguenti:

Nella vista Codice, fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto Control (Macintosh) in qualsiasi punto della vista Codice, quindi selezionate il sottomenu Funzioni dal menu di scelta rapida.

Nota

Nella vista Progettazione, il sottomenu Funzioni non viene visualizzato.

Se il codice contiene funzioni JavaScript o VBScript, queste vengono visualizzate nel sottomenu.

Nota

Per visualizzare le funzioni in ordine alfabetico, fate clic con il pulsante destro del mouse tenendo premuto il tasto Control (Windows) o fate clic tenendo premuti i tasti Ctrl e Opzione (Macintosh) nella vista Codice, quindi selezionate il sottomenu Funzioni.

Nell'Ispettore codice, fai clic sul pulsante Navigazione codice ({ }) nella barra degli strumenti.

Seleziona un nome di funzione per passare alla funzione nel codice.

Estrarre JavaScript

JavaScript Extractor (JSE) consente di rimuovere tutto o la maggior parte del codice JavaScript dal documento Dreamweaver, di esportare tale codice in un file esterno e di collegare il file esterno al documento. JSE consente inoltre di rimuovere dal codice i gestori di eventi, ad esempio onclick e onmouseover, quindi di collegare in modo non intrusivo al documento il codice JavaScript associato a tali gestori.

Nota le seguenti limitazioni di JavaScript Extractor prima di utilizzarlo:

JSE non estrae i tag degli script nel corpo del documento (ad eccezione dei widget Spry). L’esternalizzazione di questi script potrebbe causare risultati imprevisti. Per impostazione predefinita, Dreamweaver elenca questi script nella finestra di dialogo Esternalizza JavaScript, senza però selezionarli per l’estrazione. Potete selezionarli manualmente, se necessario.
JSE non consente di estrarre JavaScript da aree modificabili di file .dwt (modello di Dreamweaver), da aree non modificabili di istanze del modello o da voci della libreria di Dreamweaver.
Dopo l’estrazione di JavaScript tramite l’opzione Esternalizza JavaScript e associa in modo non intrusivo, non potrete più modificare i comportamenti di Dreamweaver nel pannello Comportamenti. Dreamweaver non è in grado di esaminare e inserire nel pannello Comportamenti i comportamenti che sono stati associati in modo non intrusivo.
Dopo avere chiuso la pagina, non potrete più annullare le modifiche. Le modifiche possono comunque essere annullate, finché rimanete nella stessa sessione di modifica. A questo scopo, selezionate Modifica > Annulla Esternalizza JavaScript.
Alcune pagine complesse potrebbero non funzionare come previsto. Prestate attenzione quando estraete JavaScript da pagine nel cui corpo è presente document.write() e che contengono variabili globali.

Per una panoramica video del team di ingegneria di Dreamweaver sul supporto JavaScript in Dreamweaver, consulta www.adobe.com/go/dw10javascript.

Per utilizzare JavaScript Extractor:

Apri una pagina che contiene JavaScript.

Fai clic su Strumenti > Esternalizza JavaScript.

Nella finestra di dialogo Esternalizza JavaScript, modifica le selezioni predefinite se necessario.

Seleziona Solo esternalizza JavaScript se desideri che Dreamweaver sposti qualsiasi JavaScript in un file esterno e faccia riferimento a quel file nel documento corrente.Questa opzione lascia i gestori di eventi come onclick e onload nel documento e mantiene i Comportamenti visibili nel pannello Comportamenti.
Seleziona Esternalizza JavaScript e allega in modo discreto se desideri che Dreamweaver 1) sposti JavaScript in un file esterno e vi faccia riferimento nel documento corrente, e 2) rimuova i gestori di eventi dall'HTML e li inserisca in fase di esecuzione utilizzando JavaScript.Quando selezioni questa opzione, non puoi più modificare i Comportamenti nel pannello Comportamenti.
Nella colonna Modifica, deseleziona le modifiche che non desideri apportare o seleziona le modifiche che Dreamweaver non ha selezionato per impostazione predefinita.
Per impostazione predefinita, Dreamweaver elenca ma non seleziona le seguenti modifiche:
- Blocchi script nell'intestazione del documento che contengono chiamate document.write() o document.writeln().
- Blocchi di Script nella testata del documento che contengono firme di funzioni relative al codice di gestione EOLAS, noto per l'uso di document.write().
- Blocchi di script nel corpo del documento, a meno che i blocchi non contengano solo costruttori di widget Spry o set di dati Spry.
Dreamweaver assegna automaticamente ID agli elementi che non hanno già ID.Se non ti piacciono questi ID, puoi cambiarli modificando le caselle di testo ID.

Fate clic su OK.

La finestra di dialogo di riepilogo fornisce un riassunto delle estrazioni.Dopo avere esaminato tali estrazioni, fate clic su OK.

Salvate la pagina.

Dreamweaver crea un file SpryDOMUtils.js e un altro file contenente il codice JavaScript estratto. Il file SpryDOMUtils.js viene salvato in una cartella SpryAssets del sito, mentre l’altro file viene salvato allo stesso livello della pagina da cui è stato estratto JavaScript. Non dimenticate di caricare entrambi questi file dipendenti sul server Web quando caricate la pagina originale.

Modifica rapida

Invece di ingombrare l'ambiente di codifica con molti pannelli e icone, la modalità Modifica rapida in Dreamweaver inserisce codice e strumenti specifici del contesto in linea consentendoti di accedere rapidamente alla sezione di codice necessaria.

Puoi accedere alla modalità Modifica rapida:

Fai clic con il pulsante destro del mouse su uno snippet di codice e seleziona Modifica rapida dal menu contestuale che appare
Premi Ctrl + E (su Windows) o Cmd+E (su Mac)

Utilizzo della modalità Modifica rapida con file HTML

In un file HTML, posizionate il cursore all’interno di una classe o un attributo id (nome o valore) o nel nome del tag. Modifica rapida mostra tutte le regole CSS, SCSS e LESS corrispondenti nel progetto. Puoi modificare queste regole direttamente in linea, senza mai lasciare il contesto del file HTML.

Quando più regole corrispondono, naviga tra di esse utilizzando l'elenco sul lato destro (oppure usa Alt-Su/Giù).

Per creare una regola CSS direttamente dall'editor in linea, fai clic su Nuova regola o premi Ctrl-Alt-N (su Windows) o Cmd-Opt-N (su Mac).

Utilizzo della modalità Modifica rapida con file JavaScript

In un file JavaScript, posizionate il cursore sul nome di una funzione. Modifica rapida ti mostra il corpo della funzione (anche se è presente in altri file referenziati da un'istruzione require()).

Utilizzo della modalità Modifica rapida con file CSS, SCSS o LESS

Quando attivi la Modifica rapida con il cursore all'interno di un valore di colore, puoi accedere al selettore colore e modificare rapidamente i colori utilizzati nel codice CSS.

Accesso al selettore colore in un file CSS

In un file CSS, LESS o SCSS, posiziona il cursore su una funzione di temporizzazione di transizione cubic-bezier() o steps() e la Modifica rapida visualizza un editor grafico di curve di transizione.

Le funzioni di andamento predefinite ease, ease-in, ease-out, Andamento in entrata e in uscita, step-start e step-end sono anche validi punti di partenza.

Modifica della curva di Bezier con Modifica rapida

Refactoring del codice

Il refactoring del codice è una tecnica di ristrutturazione del codice informatico esistente senza modificarne il comportamento esterno in modo da migliorarne la leggibilità, la manutenibilità e semplificarne la comprensione e il debug. Questa tecnica è utilizzata in presenza di codice duplicato, metodi lunghi o classi di grandi dimensioni. Il debug del codice può essere completato in meno tempo grazie alla creazione di funzioni più brevi e alla corretta sostituzione.

Con il refactoring JavaScript, puoi rinominare le funzioni e impostare l'ambito di una Variabile in modo da poterla chiamare dall'interno di un blocco di codice in cui è definita.

Nota

Il refactoring del codice è ora disponibile solo nei file .js.

Refactoring di JavaScript

Il refactoring del codice può essere implementato per i documenti di tipo HTML, PHP e JavaScript. Quando fai clic con il pulsante destro del mouse sull'area del codice in Dreamweaver, l'opzione Refactor viene visualizzata nel menu a discesa.Refactor è costituito dalle seguenti opzioni:

Rinomina
Estrai in variabile
Estrai in funzione
Racchiudi in Try Catch
Racchiudi in condizione
Converti in funzione a freccia
Crea getter/setter

Per comprendere le funzionalità di ogni opzione di refactoring, consulta le seguenti sezioni:

Rinomina

L’opzione Rinomina è utilizzata per modificare tutte le occorrenze del nome di una variabile o di una funzione nel codice JavaScript. La selezione di una variabile con clic e trascinamento non è necessaria per il refactoring.

Esegui i seguenti passaggi per rinominare in JavaScript:

Seleziona o posiziona il cursore del testo nel codice che richiede una modifica.

Fai clic con il pulsante destro del mouse sul testo selezionato e poi seleziona Refactor > Rename. Puoi anche utilizzare le scelte rapide da tastiera Ctrl + Alt + R su sistema operativo Windows o Comando + opzione + R su macOS per rinominare.

Nella schermata è visualizzata una vista con più cursori, nella quale potete modificare tutte le occorrenze della variabile. I miglioramenti nella funzionalità a più cursori consentono di selezionare l’occorrenza successiva alla selezione corrente. Riscrivi un nome univoco di Variabile o funzione per sostituire il nome attuale.

Estrai in variabile

Utilizzate l’opzione Estrai in variabile per sostituire un’espressione con una variabile, una variabile locale o una costante. In JavaScript selezionate un’espressione e fate clic con il pulsante destro del mouse su di essa. Selezionate quindi Refactoring > Estrai in variabile. Puoi anche utilizzare Ctrl + Alt + V su sistema operativo Windows e Cmd + Alt + V su macOS.

Estrai in funzione

Utilizzate l’opzione Estrai in funzione per sostituire un’espressione nella chiamate di una funzione all’interno di un parametro. Il valore predefinito del nuovo parametro può essere inizializzato all'interno del corpo della funzione o passato tramite chiamate di funzione.

Esegui i seguenti passaggi per eseguire il refactoring utilizzando Extract to Function:

Seleziona qualsiasi espressione o un insieme di espressioni in JavaScript.

Estrai in funzione — Selezione di un’espressione

Fai clic con il pulsante destro del mouse e seleziona Refactor > Extract to Function. Puoi anche utilizzare Ctrl + Alt + M su Windows o Cmd + Alt + M su Mac OS.

Seleziona l'ambito di destinazione per estrarre la funzione dal menu pop-up visualizzato sullo schermo.

L’output varia a seconda dell’ambito di destinazione selezionato. Ad esempio, l'ambito di destinazione può essere un costruttore, la classe selezionata o una funzione globale.

Le caratteristiche di Extract to function sono:

Identifica i parametri da passare in base agli identificatori disponibili nella selezione o nell'ambito estratto.
Identifica i parametri di ritorno da restituire dalla funzione in base agli identificatori i cui valori vengono modificati nella selezione.
Inoltre crea una funzione con un nome univoco.

Le seguenti schermate mostrano l'output basato sul rispettivo ambito di destinazione selezionato.

Ambito di destinazione: Costruttore — Costruttore

Ambito di destinazione: Nome classe — Classe

Ambito di destinazione: Globale — Globale

Racchiudi in Try Catch

Utilizzate l’opzione Racchiudi in Try Catch per intercettare un’eccezione in un blocco di codice che potrebbe generare un errore dopo la compilazione del programma. Questa opzione racchiude il blocco di codice in un blocco try catch. Questo blocco di codice viene contrassegnato come eccezione durante l'esecuzione del programma.

Seleziona o posiziona il cursore sul codice, fai clic con il pulsante destro del mouse e seleziona Refactor > Wrap in Try Catch. Se posizioni il cursore in una posizione, trova le istruzioni circostanti, altrimenti verifica se il codice è costituito da istruzioni o meno. Se sono presenti istruzioni, allora racchiude il codice in un blocco Try Catch.

Racchiudi in condizione

Usa Wrap in Condition per un'espressione nel codice per compilare solo per una condizione specifica.

Seleziona un'espressione nel codice, fai clic con il pulsante destro del mouse e seleziona Refactor > Wrap in Condition.

Converti in funzione a freccia

Una funzione freccia è un'espressione che non ha le proprie espressioni di funzione come this, arguments, super o new.target. Queste espressioni di funzione sono per espressioni non di metodo e non possono essere utilizzate come costruttore.

Posiziona il cursore in una funzione, fai clic con il pulsante destro del mouse e seleziona Refactor > Convert to Arrow Function.

Nota

Se l'istruzione selezionata ha un parametro, la struttura del parametro appare come param => {statements}.
Se l'istruzione selezionata ha zero o più di un parametro come param (param1, param2), la struttura del parametro appare come param (param1, param2) => {statements}.

Crea getter/setter

In Javascript, un setter può essere utilizzato per eseguire una funzione in cui una proprietà specificata richiede una modifica. I setter sono spesso utilizzati con i getter per creare un tipo di pseudo proprietà. Non puoi creare un setter per una proprietà che ha un valore effettivo.

Posiziona il cursore su un membro di un'espressione oggetto, fai clic con il pulsante destro del mouse e seleziona Refactor > Create Getters/Setters.

Consigli per la risoluzione dei problemi

La seguente tabella fornisce suggerimenti per la risoluzione dei problemi per i messaggi di errore corrispondenti visualizzati sullo schermo, a causa di una selezione errata del codice:

Nome della funzione	Messaggio di errore	Suggerimento per la risoluzione dei problemi
Rinomina	Nessuna espressione nella posizione specificata	Posizionate il cursore prima o dopo il nome di una variabile o di una funzione.
Estrai in variabile	La selezione non rappresenta un’espressione	Selezionate un’espressione nel codice prima di effettuare il refactoring del codice.
Estrai in funzione	Il blocco selezionato deve rappresentare un insieme di istruzioni o un’espressione	Verificate di aver selezionato il blocco con una serie di istruzioni o un’espressione.
Racchiudi in Try Catch	Selezionate del codice valido da racchiudere in un blocco try-catch	Verificate di aver selezionato del codice prima di selezionare l’opzione di refactoring try catch.
Racchiudi in condizione	Selezionate del codice valido da racchiudere in un blocco condizionale	Verificate di aver selezionato un’espressione prima di selezionare l’opzione di refactoring Racchiudi in condizione.
Converti in funzione a freccia	Posizionate il cursore all’interno di un’espressione della funzione	Verificate di aver posizionato il cursore all’interno di un’espressione di funzione prima di selezionare l’opzione di refactoring.
Crea getter/setter	Posizionate il cursore sul membro di un’espressione di oggetto	Verificate di aver posizionato il cursore su un membro di un’espressione di funzione prima di selezionare l’opzione di refactoring Crea getter/setter.

Trovare e sostituire il testo

Puoi utilizzare le funzionalità trova e sostituisci di Dreamweaver per cercare qualsiasi tipo di testo, codice o spazio vuoto nella tua sede o cartella.

Potete cercare in tutto il codice, tag compresi, o limitare la ricerca solo al testo riprodotto nella vista Progettazione o al solo codice.

Per eseguire operazioni avanzate di ricerca e sostituzione, potete anche utilizzare potenti algoritmi di corrispondenza degli schemi (espressioni regolari).

Quando trovate il testo, potete scegliere di sostituirlo specificando testo, codice o spazi vuoti.

Per ulteriori informazioni, consultate Trovare e sostituire il testo.

Anteprima di immagini e colori nella vista Codice

Dopo aver inserito il codice pertinente per immagini e colori, puoi visualizzarne l'anteprima direttamente nella vista Codice.

Anteprima immagine

Posizionate il mouse su qualsiasi URL dell’immagine per visualizzarla in anteprima nella vista Codice. Puoi visualizzare l'anteprima delle immagini che sono referenziate come uno dei seguenti:

url();
data-uri()
Valore dell'attributo src del tag img

Dreamweaver visualizza anche l'anteprima di immagini in host remoti.

Se Dreamweaver non riesce a visualizzare l'anteprima per i percorsi remoti, mostra il messaggio «Impossibile caricare l'immagine».

Puoi visualizzare in anteprima i seguenti tipi di immagine:

JPEG
JPG
PNG
GIF
SVG

Anteprima colore

Posizionate il mouse sui valori di colore per visualizzarli in anteprima nella vista Codice. I formati supportati sono:

Valori colore esadecimali a 3 e 6 cifre: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Nomi di colore predefiniti, come Olive, Teal, red.

L'anteprima colore è disponibile in tutti i tipi di documento per i formati colore indicati sopra.

Fai clic con il pulsante destro del mouse su un valore e seleziona Modifica rapida per aprire il selettore colore e scegliere un colore diverso.

Nota

Per disattivare le anteprime per immagini e colori, deseleziona l'opzione Visualizza > Opzioni visualizzazione codice > Anteprima risorsa.

Stampare il codice

Stampa il codice per modificarlo offline, archiviarlo o distribuirlo.

Aprite una pagina nella vista Codice.

Selezionate File > Stampa codice.

Specifica le opzioni di stampa, quindi fai clic su OK (Windows) o Stampa (Macintosh).

Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.

Apri l'app

Indietro

Personalizzare la colorazione del codice

Avanti

Suggerimenti sul codice e completamento del codice

Formazione

Apprendere con tutorial video dettagliati e istruzioni pratiche direttamente nell'app.

Community

Partecipa alle discussioni, trova risposte, impara dagli esperti e condividi le tue conoscenze.

Home Adobe

Accedi alle tue app e ai servizi preferiti di Creative Cloud, alla gestione dei file e molto altro.