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.

Informazioni sulla colorazione del codice in Dreamweaver CC 2017

La colorazione del codice in Dreamweaver CC 2017 è controllata dai selettori presenti nel file del tema main.less.

Per personalizzare la colorazione del codice in Dreamweaver CC 2017, effettuate le seguenti operazioni:

  1. Impostate le preferenze predefinite per il team di colore e del codice in Dreamweaver. 
  2. Create un tema del codice utilizzandone uno esistente come base.
  3. Modificate il nuove tema del codice.
  4. Determinate quali selettori dovete modificare e quale sarà l'impatto sugli altri elementi del codice.
  5. Modificate i selettori nel file del tema main.less e salvate le modifiche.

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.

  1. Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh).

  2. Selezionate Interfaccia dall'elenco Categoria visualizzato sulla sinistra.

  3. Scegliete un tema dall'elenco Temi colore. 

  4. 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.

    Temi del codice predefiniti
    Temi del codice predefiniti

  5. 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.

  1. Selezionate Modifica > Preferenze (Windows) o Dreamweaver > Preferenze (Macintosh).

  2. 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.

    Copia e modifica di un tema
    Copia e modifica di un tema

  3. Salvate il tema del codice predefinito con un nuovo nome.

    Creazione di un tema del codice basato su un tema del codice predefinito
    Creazione di un tema del codice basato su un tema del codice predefinito

  4. 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.

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.

Selettori HTML CSS JavaScript PHP
.cm-atom  Nomi di entità quali   Colore in formato esadecimale, RGB o HSL format; 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
Virgoletta mancante per il valore di un attributo
Errore dovuto a parentesi { o } mancanti o virgolette mancanti per il valore di una proprietà o un nome di proprietà non riconosciuto    
.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, ad esempio ===, &&, !, =>, +, - 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, :focus e così via 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.

Classe 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; }

Interazione tra selettori e altri file di codice

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), scaricate e utilizzate Token Inspector.

Scarica

  1. Scaricate e decomprimete Token Inspector.

  2. Navigate e aprite il file TokenInspector\CM-Modes-Interactive\demo\TokenInspector.html in 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.
    Utilizzo di Token Inspector per comprendere i selettori
    Utilizzo di Token Inspector per comprendere i selettori

    A. Editor di codice B. Opzione Change Mode (Cambia modalità) C. Elenco di selettori 
  3. Copiate e incollate il contenuto di un file nell'editor di codice.

  4. 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.

    Indicazione della modalità in Token Inspector
    Indicazione della modalità in Token Inspector

  5. Selezionate l'elemento di codice di cui desiderate modificare l'aspetto.

    Il selettore è evidenziato in Token Inspector.

  6. (Facoltativo) Potete anche selezionare un singolo selettore per visualizzare quali elementi del codice nel file del codice sono interessati da questo selettore.

  7. Annotate i selettori da modificare, quindi aggiornate e chiudete Token Inspector.

Modificare i selettori nel file main.less

Ora che i selettori da modificare sono noti, potete modificare il file main.less.

  1. Andate verso la fine del file fino a trovare il commento seguente:

    /* Custom code colors or overrides should start after this line */

  2. 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; }

  3. 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;}

  4. 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;}
    }
  5. 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.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online