Guida utente Annulla

Scrivere e modificare codice

Cerca

Ultimo aggiornamento il 3 mag 2021

Dreamweaver

Apri app

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

In Dreamweaver potete lavorare con il codice in diversi modi.

Potete aprire un nuovo file di codice usando 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. Ottenete aiuto con CSS quando necessario utilizzando gli utili Doc rapidi di Dreamweaver.

Potete inoltre inserire il codice tramite il pannello Inserisci o utilizzare le scelte rapide di codifica, ad esempio le abbreviazioni Emmet.

Se vi accorgete che state copiando e incollando più volte lo stesso segmento di codice, provate queste funzioni che vi consentono di risparmiare tempo:

Il pannello Snippet è indispensabile per creare e inserire rapidamente nel codice snippet di codice preformattati.
I cursori multipli consentono di creare e modificare contemporaneamente più righe di codice.

Dreamweaver fornisce un insieme di strumenti avanzati per la modifica che semplificano il processo di navigazione e modifica del codice.

Utilizzate la funzione cerca 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. Inoltre, potete utilizzare la funzione Modifica rapida per modificare il codice in file correlati senza aprire il file in una nuova scheda.
Fate clic con il pulsante destro del mouse per visualizzare un menu di scelta rapida semplice e pertinente che consente di modificare direttamente il codice.
Utilizzate Applica tag per racchiudere il testo tra tag.

Continuate a leggere per scoprire maggiori informazioni su queste funzioni del codice.

Inserire il codice usando il pannello Inserisci

Posizionate il punto di inserimento nel codice.
Selezionate una categoria appropriata nel pannello Inserisci.
Nel pannello Inserisci, fate clic su un pulsante o selezionate una voce dal menu a comparsa.

Con questa procedura, il codice è visualizzato immediatamente nella pagina o viene visualizzata una finestra di dialogo in cui si richiedono maggiori 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 per CSS si espandono in pagine CSS, LESS, SASS, SCSS o all’interno di tag di stile in pagine HTML.

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

Nota:

Dreamweaver supporta attualmente le abbreviazioni Emmet 1.2.2.

Esempio 1: inserire codice HTML utilizzando Emmet

Per aggiungere rapidamente il codice HTML per creare un elenco non ordinato con tre elementi, aprite il file HTML e digitate la seguente abbreviazione Emmet nella vista Codice tra i tag <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, selezionate l’intera abbreviazione e premete Invio.

L’abbreviazione si espande nel codice seguente:

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <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: inserire codice CSS utilizzando Emmet

Per inserire il codice CSS per creare un raggio del bordo con i prefissi fornitore, aprite il file CSS e digitate la seguente abbreviazione Emmet all’interno di una classe:

-bdrs

Premendo 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. Posizionate quindi il cursore sul punto di inserimento e fate 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. Tutto ciò che dovete fare, è digitare il testo del commento.

Per aggiungere commenti, potete anche usare le scelte rapide da tastiera con Ctrl+/ (Windows) o Comando+/ (Mac).

Se utilizzate la scelta rapida da tastiera senza selezionare del testo, il commento è applicato alla riga corrente. Se selezionate il testo e utilizzate la scelta rapida da tastiera, il commento è 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. Per rimuovere i commenti, potete anche usare le scelte rapide da tastiera con Ctrl-/ (Windows) o Comando-/ (Mac).

Alternare i commenti del codice

Per visualizzare e nascondere alternativamente i commenti nella vista Codice, premete Ctrl+/ in Windows o Comando+/ su Mac per il commento o la riga selezionata.

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 più cursori o selezioni.

Aggiungere più cursori o selezioni

Potete aggiungere più cursori in modi diversi in base alle esigenze.

Per aggiungere lo stesso testo in più posizioni senza sostituire il testo esistente, aggiungete più cursori.

Per sostituire il testo esistente, potete effettuare più selezioni. Potete selezionare righe di testo contigue, non contigue o entrambe e aggiungervi cursori.

Per aggiungere più cursori o selezioni nella stessa colonna su più righe contigue:

Tenete premuto il tasto Alt, quindi trascinate in verticale. Quando trascinate in verticale, i cursori sono aggiunte a ogni riga su cui trascinate.

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

Selezionare e aggiornare più righe di testo contemporaneamente

Nota:

Per aggiungere rapidamente i cursori o includere più righe in una selezione, usate la scelta rapida da tastiera Maiusc-Alt-Freccia su o giù.

Dopo avere aggiunto i cursori (o selezionato il testo) in più posizioni, iniziate a digitare.

Se sono presenti più cursori, il nuovo testo verrà aggiunto.

Se avete selezionato contenuto su più righe di testo, il testo selezionato verrà sostituito con il nuovo testo digitato.

Per aggiungere più cursori su colonne diverse su più righe:

Per aggiungere cursori su righe di testo non contigue, premete il tasto Ctrl e fate clic sulle diverse righe in cui posizionare il cursore.

Aggiunta di cursori su più righe di testo non contigue

Per selezionare righe di testo non contigue, selezionate del testo, quindi premete il tasto Ctrl (Windows) o Comando (Mac) e continuate a selezionare.

Per aggiungere cursori all’inizio/alla fine di ogni riga:

Selezionate più righe di testo e premete i tasti freccia destra o sinistra.

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

Premete i tasti Maiusc+Alt+Freccia su/giù, quindi premete il tasto freccia destra.

Per selezionare righe di testo contigue e non contigue:

Potete combinare queste tecniche per selezionare sia righe di testo contigue e separate all’interno di una singola selezione.

Selezionate prima le righe di testo non contigue, quindi premete Ctrl-Alt (Windows) o Comando-Alt (Mac) e trascinate per aggiungere un insieme di righe alle selezioni multiple esistenti.

Selezionare righe di testo contigue e non contigue

Aiuto con CSS in Dreamweaver con Doc rapidi

Quando lavorate con file CSS, LESS o SCSS in Dreamweaver, potete reperire rapidamente ulteriori informazioni sulle proprietà o sui valori CSS.

Posizionate il cursore su una proprietà o un valore e premete Ctrl + K; Dreamweaver apre la documentazione dal progetto Web Platform Docs.

Potete aprire contemporaneamente più editor in linea e visualizzatori di documenti.

Per chiudere un solo editor in linea o un visualizzatore di documenti, fate clic sulla “X” in alto a sinistra o premete Esc mentre Doc rapidi è attivo.

Per chiudere tutti gli editor in linea e i documenti, posizionate il cursore nell’editor di codice principale e premete Esc.

Analizzare il codice

Dreamweaver supporta il linting (analisi del codice per possibili 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 è visualizzato in rosso per indicare che contiene errori e passandoci sopra il cursore verrà 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 Progettazione o Dal vivo, potete usare questa funzione per racchiudere oggetti con un tag.

Selezionate il testo nella vista Codice oppure un oggetto nella vista Progettazione e premete Ctrl+T sulla tastiera.

Viene visualizzato un menu a comparsa che consente di scegliere da una serie di tag HTML.
Selezionate un tag dal menu.

Se state utilizzando la vista Codice, il testo selezionato viene racchiuso con il tag. Se state utilizzando la vista Progettazione o Dal vivo, l’oggetto selezionato viene racchiuso con il tag.

Modificare il codice tramite il menu di scelta rapida Codifica

Utilizzate il menu di scelta rapida di Dreamweaver per effettuare 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). Sono disponibili le seguenti opzioni:

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, consultate Modifica rapida.

Taglia, copia, incolla

Fate clic su queste opzioni per effettuare rapidamente operazioni di taglia, copia e incolla del testo senza dover accedere al menu Modifica.

Cerca e sostituisci, Trova successivo, Trova precedente

Fate clic su queste opzioni per effettuare rapidamente operazioni di ricerca e sostituzione del testo 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, vedete Operazioni con gli snippet di codice.

Apri file correlato

Fate clic con il pulsante destro del mouse sopra al tag di un collegamento/script e selezionate Apri file correlato per aprire il file.

Associa foglio di stile

Associate un foglio di stile CSS esistente alla pagina.

Selezione

Il sottomenu Selezione include le varie opzioni di modifica del codice che potete utilizzare su una parte del codice, ad esempio, alternare commenti di riga e blocco, espandere e comprimere la selezione, convertire CSS in linea in regole, spostare regole CSS e codice di stampa.

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 suggerimenti per il codice, rende disponibili gli strumenti selettore colore, browser di URL ed Elenco font.

Applicare un rientro ai blocchi di codice

Durante la scrittura e la modifica del codice nella vista Codice o nella finestra di ispezione Codice, potete cambiare il rientro di blocchi o righe di codice selezionati, spostandolo a destra o sinistra di una tabulazione.

Applicare un rientro al blocco di codice selezionato

Premete Tab o
Premete Ctrl+] o
Selezionate Modifica > Rientro codice.

Annullare il rientro del blocco di codice selezionato

Premete Maiusc+Tab o
Premete Ctrl+[ o
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.

Potete accedere a Navigazione codice dalle viste Progettazione, Codice e Dividi e anche dalla finestra di ispezione Codice.

Per una panoramica video sulle operazioni con Navigazione codice eseguita dal team di progettazione di Dreamweaver, consultate www.adobe.com/go/dw10codenav.

Per vedere un’esercitazione sull’utilizzo della vista Dal vivo, dei file correlati e di Navigazione codice, potete consultare www.adobe.com/go/lrvid4044_dw.

Aprire Navigazione codice

Fate clic tenendo premuto Alt (Windows) o tenendo premuti i tasti Comando e Opzione (Macintosh) in qualsiasi punto della pagina. Navigazione codice visualizza i collegamenti al codice che riguarda l’area in cui avete fatto clic.

Fate clic all’esterno di Navigazione codice per chiuderlo.

Nota:

Potete aprire Navigazione codice anche facendo clic sul relativo indicatore . Questo indicatore viene visualizzato vicino al punto di inserimento all’interno della pagina dopo che il mouse è rimasto inattivo per 2 secondi.

Individuare il codice mediante Navigazione codice

Aprite Navigazione codice dall’area della pagina a cui siete interessati.
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. Queste descrizioni sono utili quando desiderate distinguere tra numerose regole con lo stesso 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 di Navigazione codice, fate clic tenendo premuto Alt (Windows) o tenendo premuto Comando+Opzione (Macintosh) per aprire Navigazione codice e deselezionate l’opzione Disattiva indicatore.

Passare a una funzione JavaScript o VBScript

Nella vista Codice e nella finestra di ispezione Codice, potete visualizzare un elenco di tutte le funzioni JavaScript o VBScript nel codice e passare direttamente a ognuna di esse.

Visualizzate il documento nella vista Codice (Visualizza > Codice) o nella finestra di ispezione Codice (Finestra > Finestra di 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.
- Nella finestra di ispezione Codice, fate clic sul pulsante Navigazione codice ({ }) nella barra degli strumenti.
Selezionate 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.

Prima di utilizzare JavaScript Extractor, tenete presenti le seguenti limitazioni:

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 sul supporto JavaScript in Dreamweaver eseguita dal team di progettazione di Dreamweaver, consultate www.adobe.com/go/dw10javascript.

Per utilizzare JavaScript Extractor:

Aprite una pagina contenente JavaScript.
Fate clic su Strumenti > Esternalizza JavaScript.
Nella finestra di dialogo Esternalizza JavaScript, modificate le selezioni predefinite, se necessario.
- Selezionate Esegui solo esternalizzazione JavaScript se desiderate che tutto il codice JavaScript venga spostato in un file esterno e venga fatto riferimento a quel file nel documento corrente. Questa opzione lascia nel documento i gestori di eventi, ad esempio onclick e onload e i comportamenti visibili nel pannello Comportamenti.
- Selezionate Esternalizza JavaScript e associa in modo non intrusivo se desiderate che Dreamweaver 1) sposti il codice JavaScript in un file esterno e faccia riferimento a tale file nel documento corrente e 2) rimuova i gestori di eventi dal codice HTML e li inserisca in fase di runtime utilizzando JavaScript. Se selezionate questa opzione, non potrete più modificare i comportamenti nel pannello Comportamenti.
- Nella colonna Modifica, deselezionate le modifiche che non desiderate apportare oppure selezionate le modifiche che non sono state selezionate per impostazione predefinita.
  Per impostazione predefinita, le seguenti modifiche vengono elencate ma non selezionate:
  
  Blocchi di script nell’intestazione del documento che contengono chiamate a document.write() o document.writeln().
  
  Blocchi di script nell’intestazione del documento che contengono firme di funzioni correlate al codice di gestione di EOLAS, che utilizza document.write().
  
  Blocchi di script nel corpo del documento, a meno che tali blocchi contengano solo widget Spry o costruttori di dataset Spry.
- Dreamweaver assegna automaticamente un ID agli elementi che non dispongono già di uno. Se necessario, potete cambiare questi ID modificandoli nelle relative caselle di testo.
Fate clic su OK.

Nella finestra di dialogo di riepilogo è riportato un elenco 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 creare disordine nell’ambiente di codifica con molti pannelli e icone, la modalità Modifica rapida in Dreamweaver rende disponibile il codice e gli strumenti in linea specifici al contesto che consentono di accedere rapidamente alla sezione di codice richiesta.

Per accedere alla modalità Modifica rapida potete:

Fare clic con il pulsante destro del mouse su uno snippet di codice e selezionare Modifica rapida dal menu di scelta rapida visualizzato
Premere Ctrl + E (Windows) o Comando + E (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. Potete modificare queste regole in linea direttamente, senza mai lasciare il contesto del file HTML.

Quando più regole corrispondono, passate da una all’altra utilizzando l’elenco a destra, oppure usate Alt-Freccia su/giù.

Per creare una regola CSS direttamente dall’editor in linea, fate clic su Nuova regola o premete Ctrl-Alt-N (Windows) o Comando-Opzione-N (Mac).

Utilizzo della modalità Modifica rapida con file JavaScript

In un file JavaScript, posizionate il cursore sul nome di una funzione. Modifica rapida visualizza il corpo della funzione, anche se è presente in altri file a cui fa riferimento con una dichiarazione require()).

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

Quando aprite Modifica rapida con il cursore posizionato all’interno di un valore di colore, potete 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, posizionate il cursore su una funzione temporale di transizione cubic-bezier() o steps(); Modifica rapida visualizza un editor grafico della curva di transizione.

Anche le funzioni temporali predefinite, ease, ease-in, ease-out, ease-in-out, step-start e step-end sono punti iniziali validi.

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 del codice JavaScript, potete rinominare funzioni e determinare l’ambito di una variabile in modo da richiamarla da un blocco di codice nel quale è stata 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 fate clic con il pulsante destro del mouse sull’area del codice in Dreamweaver, nel menu a discesa viene visualizzata l’opzione Refactoring L’opzione Refactoring contiene le 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 il funzionamento di ciascuna opzione di refactoring, fate riferimento alle sezioni riportate di seguito:

Rinomina

L’opzione Rinomina è utilizzata per modificare tutte le occorrenze del nome di una variabile o di una funzione nel codice JavaScript. Ai fini del refactoring, il trascinamento della variabile non è necessario.

Per rinominare in JavaScript, effettuate le seguenti operazioni:

Evidenziate o posizionate il cursore di testo sul codice che deve essere modificato.
Fate clic con il pulsante destro del mouse sul testo selezionato, quindi selezionate Refactoring > Rinomina. Per rinominare, potete anche utilizzare la scelta rapida da tastiera Ctrl + Alt + R in Windows o Comando + Opzione + R in macOS.
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. Per sostituire il nome corrente, digitate un nuovo nome univoco per la variabile o la funzione.

Prima: Rinomina

Dopo: Rinomina

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. Potete anche utilizzare il tasto di scelta rapida Ctrl + Alt + V in Windows o Comando + Alt + V in 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 alla funzione.

Per eseguire il refactoring utilizzando l’opzione Estrai in funzione, effettuate le seguenti operazioni:

In JavaScript, selezionate un’espressione o una serie di espressioni.

Selezione di un’espressione
Fate clic con il pulsante destro del mouse e selezionate Refactoring > Estrai in funzione. Potete anche utilizzare il tasto di scelta rapida Ctrl + Alt + M in Windows o Comando + Alt + M in Mac.
Selezionate l’ambito di destinazione per estrarre la funzione dal menu a comparsa visualizzato.

Tipi di ambito
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 dell’opzione Estrai in funzione sono:
- Identifica i parametri da passare in base agli identificatori disponibili nella selezione o nell’ambito estratto.
- Identifica i parametri da restituire dalla funzione in base agli identificatori i cui valori sono modificati nella selezione.
- Crea inoltre una funzione con un nome univoco.
Nelle figure seguenti è visualizzato l’output generato in base al rispettivo ambito di destinazione selezionato.
Costruttore

Classe

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. Durante l’esecuzione del programma, questo blocco di codice è contrassegnato come eccezione.

Selezionate o posizionate il cursore sul codice, fate clic con il pulsante destro del mouse e selezionate Refactoring > Racchiudi in Try Catch. Posizionando il cursore, l’opzione trova le istruzioni circostanti; in caso contrario verifica se nel codice sono presenti istruzioni. Se presenti, le istruzioni sono racchiuse in un blocco Try Catch.

Racchiudi in condizione

Utilizzate l’opzione Racchiudi in condizione per racchiudere un’espressione in un codice da compilare solo se si verifica una determinata condizione.

Selezionate un’espressione nel codice, fate clic con il pulsante destro del mouse e selezionate Refactoring > Racchiudi in condizione.

Converti in funzione a freccia

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

Posizionate il cursore in una funzione, fate clic con il pulsante destro del mouse e selezionate Refactoring > Converti in funzione a freccia.

Nota:

Se l’istruzione selezionata contiene un parametro, allora la struttura del parametro è definita come parametro => {istruzioni}.
Se l’istruzione selezionata non contiene nessun parametro o contiene più di un parametro, ad esempio parametro (parametro1, parametro2), allora la struttura del parametro è definita come parametro (parametro1, parametro2) => {istruzioni}.

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à. Il setter non può essere creato per una proprietà a cui è assegnato un valore effettivo.

Posizionate il cursore su un membro di un’espressione di oggetto, fate clic con il pulsante destro del mouse e selezionate Refactoring > Crea getter/setter.

Consigli per la risoluzione dei problemi

Nella tabella seguente sono riportati suggerimenti per la risoluzione dei problemi dei corrispondenti messaggi di errore visualizzati a causa di un’errata selezione del codice:

Nome funzione	Messaggio di errore	Suggerimento per la risoluzione del problema
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

Potete utilizzare le funzioni di ricerca e sostituzione di Dreamweaver per cercare qualsiasi tipo di testo, codice o spazi vuoti nel sito o nella 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 necessario per le immagini e i colori, potete visualizzarle in anteprima direttamente nella vista Codice.

Anteprima immagine

Posizionate il mouse su qualsiasi URL dell’immagine per visualizzarla in anteprima nella vista Codice. Le immagini con i seguenti riferimenti possono essere visualizzate in anteprima:

url();
data-uri()
Valore dell’attributo SRC del tag img

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

Se Dreamweaver non è in grado di visualizzare l’anteprima di un percorso remoto, viene visualizzato il messaggio “Impossibile caricare l’immagine”.

Potete visualizzare un’anteprima per 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 di 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 colori predefiniti, ad esempio oliva, acqua, rosso.

L’anteprima dei colori è disponibile in tutti i tipi di documento per i formati colore sopra riportati.

Fate clic con il pulsante destro del mouse su un valore e selezionate Modifica rapida per aprire il selettore colore e selezionare un colore diverso.

Nota:

Per disattivare l’anteprima di immagini e colori, deselezionate l’opzione Visualizza > Opzioni vista Codice > Anteprima risorsa.

Stampare il codice

Potete stampare il codice per modificarlo non in linea, archiviarlo o distribuirlo.

Aprite una pagina nella vista Codice.
Selezionate File > Stampa codice.
Specificate le opzioni di stampa, quindi fate clic su OK (Windows) o Stampa (Macintosh).

Ottieni supporto in modo più facile e veloce

Nuovo utente?