W programie Dreamweaver można zmieniać ustawienia kolorów interfejsu, korzystając z okna dialogowego Edycja > Preferencje > Interfejs.
Do wyboru są cztery różne motywy kolorów oraz ciemny lub jasny motyw dla kodu.
Po ustawieniu motywu kolorów i kodu można w jeszcze większym stopniu spersonalizować kolory kodu w programie Dreamweaver, edytując selektory we wbudowanym pliku main.less.
Kolorowaniem kodu w programie Dreamweaver CC 2017 sterują selektory zdefiniowane w pliku motywu main.less.
Aby dostosować sposób kolorowania kodu w programie Dreamweaver CC 2017, wykonaj następujące czynności:
- Ustaw preferencje domyślnego motywu kolorów i kodu w programie Dreamweaver.
- Utwórz motyw dla kodu na podstawie istniejącego motywu.
- Edytuj ten nowy motyw kodu.
- Poznaj selektory, które trzeba zmodyfikować, oraz ich wpływ na inne elementy kodu.
- Edytuj selektory w pliku motywu main.less i zapisz wprowadzone zmiany.
Podczas uruchamiania programu Dreamweaver można wybrać preferowany motyw kolorystyczny. Można również zmienić te preferencje w dowolnej chwili.
-
Uwaga:
Domyślnych motywów kodu (jasnego i ciemnego) nie można edytować, dlatego trzeba wprowadzić zmiany w kopii motywu. Nowo utworzone, własne motywy zawsze można edytować.
Kopiowanie motywu i edytowanie go
Aby zmienić kolory elementów kodu, edytuj właściwości selektorów w pliku main.less.
Jednak zanim zaczniesz plik main.less, poznaj poszczególne selektory i elementy kodu, którymi sterują. W poniższej tabeli podano informacje na temat elementów kodu w plikach HTML, CSS, JavaScript i PHP, które zmieniają wygląd pod wpływem tych selektorów.
| Selektory | HTML | CSS | JavaScript | PHP |
| .cm-atom | Nazwy encji, takie jak | Kolory w formacie hex, RGB lub HSL, predefiniowane wartości atrybutów, takie jak strong, none, auto, inherit itd. | true, false, null, undefined, NaN, Infinity | True, False, Null oraz stałe magiczne, takie jak __LINE__, __DIR__ itd. |
| .cm-attribute | Nazwa atrybutu | Typy nośników, takie jak all, braille, print, screen itd. | ||
| .cm-bracket | Nawiasy otaczające znaczniki, np. <, >, /> oraz </ | |||
| .cm-builtin | Selektor ID | Funkcje wbudowane, takie jak htmlspecialchars, trim, substr itd. | ||
| .cm-comment | Komentarz | Komentarz | Komentarz | Komentarze |
| .cm-def | Reguły typu „@” | zmienna, definicja funkcji oraz parametr funkcji | Nazwa funkcji w definicji funkcji | |
| .cm-error | Znaczniki zamykające, dla których nie istnieje znacznik otwierający Brak cudzysłowu w wartości atrybutu |
Błąd spowodowany brakiem klamry { lub }, brakiem cudzysłowów w wartościach właściwości lub nieznaną nazwą właściwości | ||
| .cm-keyword | Nazwy kolorów, !important, słowa kluczowe w regule @media, and, only itp. | Słowa kluczowe struktury sterowania (if, else, …), in, of, from, default, public, private itd. | Takie słowa kluczowe, jak function, if, else, new, echo, isset itd. | |
| .cm-meta | Deklaracja <!DOCTYPE> | Prefiksy przeglądarek, np. -webkit-, -o- itd. | Wielokropek w składni rozciągniętej. Przykład: mojaFunkcja(...iterableObj); | Deklaracja <!DOCTYPE> oraz znacznik początkowy i końcowy PHP: <?php, ?> |
| .cm-number | Dowolna liczba z jednostką lub bez jednostki | Dowolna liczba, np. 12, 2.1, 123e-5, 0x11, 0b11, 0o11 itd. | Dowolna liczba, np. 12, 2.1, 0x11, 0b11, 0123, 5.0E+19 itd. | |
| .cm-operator | Operatory: +, -, *, +=, !==, &&, >>>, itp | Operatory takie jak ===, &&, !, =>, +, - itd. | ||
| .cm-property | Nazwa właściwości | Właściwość obiektu lub metoda | ||
| .cm-qualifier | Selektor Class | |||
| .cm-string | wartość atrybutu | Zwykły łańcuch, np. przekazywany do wywołania url(), nazwy czcionek w cudzysłowach itd. | Łańcuch literału | Łańcuch literału |
| .cm-string-2 | Właściwości niestandardowe, np. scrollbar-arrow-color, scrollbar-base-color itd. | Wyrażenia regularne | ||
| .cm-tag | Nazwa znacznika | Selektor znacznika | ||
| .cm-variable | Nazwy czcionek bez cudzysłowów | Globalne zmienne i funkcje, odniesienia do klas | Nazwy funkcji zdefiniowanych przez użytkownika, odniesienia do interfejsu/klasy, właściwości klasy, rzutowania. | |
| .cm-variable-2 | Właściwości niestandardowe, np. main-bg-color | Odniesienia do zakresowych zmiennych/funkcji | Zmienne, parametry lub atrybuty zdefiniowane przez użytkownika albo predefiniowane | |
| .cm-variable-3 | Pseudoklasy, takie jak :hover, :focus itd., a także pseudoelementy, takie jak ::first-letter, ::selection itd. |
W poniższej tabeli podano, które szablony i biblioteki programu Dreamweaver zmieniają wygląd pod wpływem selektorów w pliku main.less.
| Class | Szablony (DWT) | Biblioteka (LBI) |
| .cm-templateComment | Komentarze do szablonu | |
| .cm-templateAttrVal | Wartości atrybutów w komentarzach do szablonu | |
| .cm-instanceParam | Komentarz i atrybut InstanceParam | |
| .cm-instanceParamAttrVal | Wartości atrybutu InstanceParam | |
| .cm-libraryItem | Biblioteki wstawione w dokumencie. Przykład: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; } |
Aby sprawdzić, w jaki sposób selektory w pliku motywu main.less wpływają na elementy kodu w plikach innych niż HTML, CSS, JavaScript i PHP, należy pobrać i uruchomić narzędzie Token Inspector.
Pobierz
-
Odszukaj i otwórz plik TokenInspector\CM-Modes-Interactive\demo\TokenInspector.html w przeglądarce Google Chrome.
Narzędzie TokenInspector zawiera następujące sekcje:
- edytor kodu,
- opcja zmiany trybów,
- lista selektorów (po prawej stronie).
Skorzystaj z narzędzia Token Inspektor, aby zapoznać się z selektorami
A. Edytor kodu B. Opcja Zmiana trybu C. Lista selektorów
Uwaga:
Jeśli we wprowadzonych zmianach były błędy składniowe lub niezdefiniowane zmienne, program Dreamweaver nie załaduje zmian kodu, lecz powróci do domyślnego motywu „Ciemny”.
Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.