Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh).
Ultimo aggiornamento il
25 apr 2024
Scoprite come personalizzare i colori degli elementi di codice (colorazione del codice), ad esempio i commenti del codice, in Dreamweaver.
In Dreamweaver, potete cambiare le preferenze di colore dell’interfaccia con il comando Modifica > Preferenze > Interfaccia.
Potete scegliere tra quattro temi di colore diversi e selezionare un tema del codice chiaro o scuro.
Dopo aver impostato il tema di colore e del codice, potete personalizzare ulteriormente i colori del codice in Dreamweaver modificando i selettori nel file main.less incorporato.
Impostare i temi di colore e del codice
All’avvio di Dreamweaver, potete scegliere un tema di colore in base alle vostre preferenze. Potete anche modificare questa preferenza in qualsiasi momento.
Selezionate Interfaccia dall’elenco Categoria visualizzato sulla sinistra.
Scegliete un tema dall’elenco Temi colore.
Dopo aver impostato il tema dell’interfaccia, impostate quello del codice.
Potete scegliere tra un tema del codice chiaro o scuro. Potete quindi salvare il tema con un nome nuovo e continuare a personalizzarlo.
Fate clic su Applica per salvare le modifiche.
Personalizzare i temi del codice
Dopo aver selezionato un tema del codice, potete personalizzarne i colori salvando il tema del codice con un nuovo nome e modificandolo.
Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh).
Selezionate un tema del codice chiaro o scuro, quindi fate clic sull’icona più e salvate il tema con un nuovo nome.
Nota
I temi chiaro e scuro predefiniti non sono modificabili, per cui dovrete modificarne una copia. I nuovi temi creati possono sempre essere modificati.
Salvate il tema del codice predefinito con un nuovo nome.
Selezionate il nuovo tema del codice creato e fate clic sull’icona Modifica.
Il file main.less viene aperto in Dreamweaver; ora è possibile modificare i selettori nel tema per personalizzare i colori del codice.
Salvando il file main.less, i colori della vista Codice sono aggiornati con quelli nuovi.
Modificare i selettori nel file main.less
Prima di iniziare a modificare i selettori nel file main.less, dedicate alcuni minuti alla lettura dei commenti e delle istruzioni riportati nel file del tema. Se avete ancora dubbi su quale selettore modificare, fate riferimento alle risorse seguenti:
- Nozioni di base sui selettori - Tabelle di riferimento che forniscono informazioni sugli elementi del codice sui quali influisce un determinato selettore
- Utilizzate Token Inspector - Utilizzate Token Inspector per esaminare un determinato file ed evidenziare gli elementi del codice su cui influisce un determinato selettore.
- Se desiderate modificare i colori del codice per i commenti o modificare il colore di evidenziazione dei tag associati, consultate gli snippet di codice di esempio elencati in Esempi di personalizzazione del codice.
Ora che i selettori da modificare sono noti, modificate il file main.less.
Andate verso la fine del file fino a trovare il commento seguente:
/* I colori del codice personalizzato o le sostituzioni dovrebbero iniziare dopo questa riga */
Immettete i selettori per gli elementi di codice di cui desiderate modificare il colore. Utilizzate una sintassi simile all’esempio seguente:
.cm-tag {color: #00D0D0; }
Nota
Se hai più linguaggi di codice all'interno di un singolo file e desideri
distinguere ogni linguaggio con i propri colori del codice, consulta Personalizzare i colori del codice per file con codice misto.
Se desiderate assegnare lo stesso colore a più elementi, raggruppate i diversi selettori. Nell’esempio seguente, lo stesso colore è assegnato a più selettori separati da virgole.
.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}
Per rendere la personalizzazione di colorazione del codice specifica a un tipo di file, racchiudete i selettori degli elementi di codice all’interno del selettore del tipo di file come illustrato nell’esempio seguente:
.HTML{
.cm-tag{ color: #00D0D0;}
}
Dopo aver apportato le modifiche, salvate il file.
Dreamweaver aggiorna la vista Codice in tutti i documenti aperti con i nuovi colori.
Nota
Se nelle modifiche apportate sono presenti errori o variabili non definite, le modifiche personalizzate al codice non saranno caricate in Dreamweaver ma sarà caricato il tema del codice scuro predefinito.
Personalizzare i colori del codice per file con codice misto
Se lavorate con file in modalità mista (un file contenente diversi linguaggi di programmazione), ad esempio HTML/CSS, HTML/PHP o HTML/JavaScript, potete personalizzare i colori del codice come segue:
Create un tema del codice personalizzato seguendo le istruzioni riportate in Personalizzare i temi del codice. Selezionate il nuovo tema e applicatelo.
Uscite da Dreamweaver.
Aprite il file package.json in un editor di testo.
Per Windows: %appdata%\Adobe\Dreamweaver CC 2017\it_IT\Configuration\Brackets\extensions\user\\
Per Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/it_IT/Configuration/Brackets/extensions/user//
Aggiungete la riga seguente in theme{}:
"addModeClass": true
Aprite Dreamweaver, selezionate Modifica > Preferenze > Interfaccia, selezionate il nuova e fate clic sull’icona Modifica.
Aggiungete gli stili specifici della modalità alla fine del file main.less.
Utilizzate i selettori elencati nella tabella seguente per modificare i colori del codice per il tipo di file corrispondente.
|
Selettore |
Tipo di file di codice |
|---|---|
|
.cm-m-clike |
PHP |
|
.cm-m-css |
CSS, Less |
|
.cm-m-javascript |
JavaScript |
|
.cm-m-xml |
HTML, XML |
Ad esempio, per personalizzare i colori del codice per i nomi dei tag in CSS e dei tag di stile all’interno di HTML o PHP, utilizzate la sintassi seguente:
.cm-tag {color: #BD46BD;}
.cm-m-css.cm-tag {color: #38D08B;}
Salvate il file main.less.
Le modifiche al colore del codice sono ora visibili nei file del codice.
Esempi di personalizzazione del codice
Esaminate gli esempi seguenti per comprendere come personalizzare i colori del codice per scenari diversi.
Modificare il colore di evidenziazione dei tag accoppiati
Nel file main.less, cercate lo snippet di codice seguente e modificate il colore.
.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
/* Garantisci la visibilità sullo sfondo grigio dell'editor inline */
background-color: #B53A3A;
color: #fff!important;
Nota
Questo snippet di codice dipende dal tema. Non può essere presente in tutti i temi.
Modificare il colore dei commenti del codice
Nel file main.less, cercate lo snippet di codice seguente e modificate il colore.
.cm-comment {color: #717171; font-style: italic;}
Nozioni di base sui selettori
Per modificare i colori degli elementi di codice, modificate le proprietà dei selettori nel file main.less.
Tuttavia, prima di iniziare a modificare i selettori nel file main.less, è importante conoscere il significato dei diversi selettori e su quali elementi del codice influiscono. Esaminate la tabella seguente per comprendere quali sono gli elementi del codice nei file HTML, CSS, JavaScript e PHP sui quali influiscono questi selettori.
Per comprendere quali elementi del codice sono interessati da un determinato selettore, potete anche utilizzare Token Inspector.
| Selettori | HTML | CSS | JavaScript | PHP |
|---|---|---|---|---|
| .cm-atom | Nomi di entità come | Colore in formato esadecimale, RGB o HSL; valori di attributi predefiniti quali strong, none, auto, inherit e così via | true, false, null, undefined, NaN, Infinity | True, False, Null e costanti magiche quali __LINE__, __DIR__ e così via |
| .cm-attribute | Nome attributo | Tipi di supporti quali all, braille, print, screen e così via | ||
| .cm-bracket | Parentesi dei tag quali <, >, /> e </ | |||
| .cm-builtin | Selettore ID | Funzioni incorporate quali htmlspecialchars, trim, substr e così via | ||
| .cm-comment | Commento | Commento | Commento | Commenti |
| .cm-def | “Direttiva @” | Variabile, definizione e parametri della funzione | Il nome della funzione nella definizione della funzione | |
| .cm-error | tag di chiusura senza un tag di apertura Manca una virgoletta per un valore di attributo |
Errore dovuto a parentesi {} mancanti o virgolette mancanti per il valore di una proprietà o una proprietà non riconosciuta | ||
| .cm-keyword | Nomi di colori, !important, parole chiave in @media quali and, only e così via. | Parole chiave della struttura di controllo (if, else, …), in, of, from, default, public, private e così via | Parole chiave quali function, if, else, new, echo, isset e così via | |
| .cm-meta | Dichiarazione <!DOCTYPE> | Prefissi specifici del browser quali -webkit-, -o- e così via | Puntini di sospensione in sintassi di espansione. Ad esempio: myFunction(...iterableObj); | Dichiarazione <!DOCTYPE> e tag di inizio e fine di PHP: <?php, ?> |
| .cm-number | Qualsiasi numero con o senza unità | Un numero qualsiasi, ad esempio 12, 2,1, 123e-5, 0x11, 0b11, 0o11 e così via | Un numero qualsiasi, ad esempio 12, 2,1, 0x11, 0b11, 0123, 5,0E+19 e così via | |
| .cm-operator | Operatori: +, -, *, +=, !==, &&, >>>, e così via | Operatori quali ===, &&, !, =>, +, - e così via | ||
| .cm-property | Nome proprietà | Proprietà o metodo oggetto | ||
| .cm-qualifier | Selettore classe | |||
| .cm-string | Valore attributo | Stringa normale, ad esempio una passata a una chiamata url(), nome di font racchiuso tra virgolette e così via | Stringa letterale | Stringa letterale |
| .cm-string-2 | Proprietà non standard quali scrollbar-arrow-color, scrollbar-base-color e così via | Espressioni regolari | ||
| .cm-tag | Nome tag | Selettore di tag | ||
| .cm-variable | Nomi di font senza virgolette | Variabili/funzioni globali, riferimenti a classi | Nomi di funzioni definiti dall’utente, riferimenti a interfacce/classi, proprietà di classi, dichiarazioni | |
| .cm-variable-2 | Proprietà personalizzate, ad esempio main-bg-color | Riferimenti a variabili/funzioni in ambito | Variabili, parametri e attributi definiti dall’utente e predefiniti | |
| .cm-variable-3 | Pseudo-classi quali :hover e :focus e pseudo-elementi quali ::first-letter, ::selection e così via |
Nella tabella seguente sono riportati i modelli e le librerie di Dreamweaver interessati dai selettori nel file main.less.
|
Selettore |
Modelli (DWT) |
Libreria (LBI) |
|---|---|---|
|
.cm-templateComment |
Commenti del modello |
|
|
.cm-templateAttrVal |
Valori di attributo nei commenti del modello |
|
|
.cm-instanceParam |
Commento e attributo di InstanceParam |
|
|
.cm-instanceParamAttrVal |
Valori di attributo InstanceParam |
|
|
.cm-libraryItem |
|
Librerie inserite in un documento. Ad esempio: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; } |
La tabella seguente indica i selettori da utilizzare per personalizzare i colori del codice nei casi in cui sono presenti più linguaggi in un unico file.
|
Selettore |
Tipo di file di codice |
|---|---|
|
.cm-m-clike |
PHP |
|
.cm-m-css |
CSS, Less |
|
.cm-m-javascript |
JavaScript |
|
.cm-m-xml |
HTML, XML |
Utilizzare Token Inspector
Per scoprire come i selettori nel file del tema main.less interagiscono con gli elementi del codice nei file di codice (diversi da HTML, CSS, JavaScript e PHP), utilizzate Token Inspector.
Aprite Token Inspector con Google Chrome.
L’utilità TokenInspector è costituita dalle sezioni seguenti:
- editor di codice;
- un’opzione per cambiare la modalità e
- un elenco di selettori a destra.
A. Editor di codice B. Opzione Change Mode (Cambia modalità) C. Elenco di selettori
Copiate e incollate il contenuto di un file nell’editor di codice.
Cambiate la modalità del file digitando l’estensione del nome file e facendo clic su Change mode (Cambia modalità).
Ad esempio, se si tratta di un file HTML, cambiate l’estensione del nome file in html. La pagina si aggiorna per riflettere la modifica della modalità, indicandola nella parte superiore della pagina.
Selezionate l’elemento di codice di cui desiderate modificare l’aspetto.
Il selettore è evidenziato in Token Inspector.
(Facoltativo) Potete anche selezionare un singolo selettore per visualizzare quali elementi del codice nel file del codice sono interessati da questo selettore.
Annotate i selettori da modificare, quindi aggiornate e chiudete Token Inspector.
Altri contenuti simili
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.
