Podręcznik użytkownika Anuluj

Dostosowywanie ustawień kolorowania kodu

  1. Podręcznik użytkownika programu Dreamweaver
  2. Wprowadzenie
    1. Podstawy projektowania serwisów WWW o elastycznym układzie
    2. Dreamweaver — co nowego
    3. Programowanie zawartości WWW za pomocą programu Dreamweaver — przegląd
    4. Dreamweaver / Popularne pytania
    5. Skróty klawiszowe
    6. Wymagania systemowe programu Dreamweaver
    7. Podsumowanie funkcji
  3. Program Dreamweaver a platforma Creative Cloud
    1. Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
    2. Biblioteki Creative Cloud w programie Dreamweaver
    3. Używanie plików programu Photoshop w programie Dreamweaver
    4. Praca z programami Adobe Animate oraz Dreamweaver
    5. Wydzielanie przygotowanych do wyświetlania w Internecie plików SVG z bibliotek
  4. Przestrzenie robocze i widoki w programie Dreamweaver
    1. Przestrzeń robocza programu Dreamweaver
    2. Optymalizacja przestrzeni roboczej programu Dreamweaver do programowania wizualnego
    3. Wyszukiwanie plików według nazwy lub zawartości | Mac OS
  5. Konfigurowanie serwisów
    1. Informacje o serwisach programu Dreamweaver
    2. Konfigurowanie lokalnej wersji serwisu
    3. Nawiązywanie połączenia z serwerem publikacji
    4. Konfigurowanie serwera testowego
    5. Importowanie i eksportowanie ustawień serwisu programu Dreamweaver
    6. Przenoszenie istniejących serwisów z serwera zdalnego do lokalnego katalogu głównego serwisu
    7. Funkcje ułatwień dostępu w programie Dreamweaver
    8. Ustawienia zaawansowane
    9. Ustawianie preferencji serwisu dotyczących transferu plików
    10. Określanie ustawień serwera proxy w programie Dreamweaver
    11. Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
    12. Korzystanie z systemu Git w programie Dreamweaver
  6. Zarządzanie plikami
    1. Tworzenie i otwieranie plików
    2. Zarządzanie plikami i folderami
    3. Odbieranie plików i wysyłanie ich na serwer
    4. Pobieranie plików do edycji i odkładanie ich na serwer
    5. Synchronizacja plików
    6. Porównywanie plików w poszukiwaniu różnic
    7. Maskowanie plików i folderów w serwisie programu Dreamweaver
    8. Włączanie funkcji Uwagi do projektu w serwisach programu Dreamweaver
    9. Zapobieganie potencjalnemu obejściu funkcji Gatekeeper
  7. Układ i projekt
    1. Korzystanie z wizualnych pomocy do układu
    2. Informacje o tworzeniu układu strony za pomocą stylów CSS
    3. Projektowanie elastycznych serwisów WWW z użyciem struktury Bootstrap
    4. Tworzenie i używanie zapytań o media w programie Dreamweaver
    5. Prezentacja zawartości za pomocą tabel
    6. Kolory
    7. Tworzenie reagujących projektów za pomocą układów elastycznej siatki
    8. Narzędzie Extract w programie Dreamweaver
  8. CSS
    1. Podstawowe informacje o stylach CSS
    2. Tworzenie układu strony za pomocą panelu Projektant CSS
    3. Korzystanie z preprocesorów CSS w programie Dreamweaver
    4. Ustawianie preferencji stylów CSS w programie Dreamweaver
    5. Przenoszenie reguł CSS w programie Dreamweaver
    6. Konwertowanie stylu CSS wewnątrz znacznika na regułę CSS w programie Dreamweaver
    7. Posługiwanie się znacznikami DIV
    8. Stosowanie gradientów na tło
    9. Tworzenie i edytowanie efektów przejść CSS3 w programie Dreamweaver
    10. Formatowanie kodu
  9. Zawartość strony i zasoby
    1. Ustawianie właściwości strony
    2. Ustawianie właściwości CSS dla nagłówków i łączy
    3. Praca z tekstem
    4. Znajdowanie i zastępowanie tekstu, znaczników i atrybutów
    5. Panel DOM
    6. Edytowanie w widoku aktywnym
    7. Kodowanie znaków dokumentu w programie Dreamweaver
    8. Zaznaczanie i wyświetlanie elementów w oknie Dokument
    9. Ustawianie właściwości tekstu na panelu Inspektor właściwości
    10. Sprawdzanie pisowni na stronie internetowej
    11. Używanie linii poziomych w programie Dreamweaver
    12. Dodawanie i modyfikowanie kombinacji czcionek w programie Dreamweaver
    13. Praca z zasobami
    14. Wstawianie i aktualizowanie dat w programie Dreamweaver
    15. Tworzenie list ulubionych zasobów w programie Dreamweaver i zarządzanie nimi
    16. Wstawianie i edytowanie obrazów w programie Dreamweaver
    17. Dodawanie obiektów multimedialnych
    18. Dodawanie zawartości wideo w programie Dreamweaver
    19. Wstawianie wideo HTML5
    20. Wstawianie plików SWF
    21. Dodawanie efektów dźwiękowych
    22. Wstawianie obiektów audio HTML5 w programie Dreamweaver
    23. Praca z elementami bibliotek
    24. Stosowanie pisma arabskiego i hebrajskiego w programie Dreamweaver
  10. Łączenie i przeglądanie
    1. Informacje o łączeniu i przeglądaniu stron
    2. Tworzenie łączy
    3. Mapy obrazu
    4. Rozwiązywanie problemów dotyczących łączy
  11. Efekty i widgety jQuery
    1. Używanie widgetów jQuery interfejsu użytkownika i elementów mobilnych w programie Dreamweaver
    2. Używanie efektów jQuery w programie Dreamweaver
  12. Tworzenie kodu serwisów WWW
    1. Informacje o tworzeniu kodu w programie Dreamweaver
    2. Środowisko programistyczne w programie Dreamweaver
    3. Ustawianie preferencji kodowania
    4. Dostosowywanie ustawień kolorowania kodu
    5. Pisanie i edytowanie kodu
    6. Podpowiedzi i uzupełnianie kodu
    7. Zwijanie i rozwijanie kodu
    8. Ponowne wykorzystywanie fragmentów kodu za pomocą funkcji Urywki
    9. Linting: oczyszczanie kodu z błędów
    10. Optymalizacja kodu
    11. Edytowanie kodu w widoku Projekt
    12. Praca z zawartością znacznika HEAD strony
    13. Wstawianie dołączeń po stronie serwera w programie Dreamweaver
    14. Korzystanie z bibliotek znaczników w programie Dreamweaver
    15. Importowanie własnych znaczników do programu Dreamweaver
    16. Używanie zachowań JavaScript (instrukcje ogólne)
    17. Stosowanie wbudowanych zachowań JavaScript
    18. Omówienie języków XML i XSLT
    19. Wykonywanie transformacji XSL po stronie serwera w programie Dreamweaver
    20. Wykonywanie przekształceń XSL po stronie klienta w programie Dreamweaver
    21. Dodawanie encji znaków w kodzie XSLT w programie Dreamweaver
    22. Formatowanie kodu
  13. Obiegi pracy związane z wieloma produktami
    1. Instalowanie i używanie rozszerzeń programu Dreamweaver
    2. Aktualizacje w aplikacji w programie Dreamweaver
    3. Wstawianie dokumentów Microsoft Office w programie Dreamweaver (tylko Windows)
    4. Praca z programami Fireworks i Dreamweaver
    5. Edycja zawartości w stronach programu Dreamweaver za pomocą aplikacji Contribute
    6. Integracja programu Dreamweaver z aplikacją Business Catalyst
    7. Tworzenie spersonalizowanych kampanii rozsyłanych pocztą elektroniczną
  14. Szablony
    1. Informacje o szablonach programu Dreamweaver
    2. Rozpoznawanie szablonów oraz dokumentów opartych na szablonach
    3. Tworzenie szablonu programu Dreamweaver
    4. Tworzenie edytowalnych regionów w szablonach
    5. Tworzenie powtarzalnych regionów i tabel w programie Dreamweaver
    6. Używanie regionów opcjonalnych w szablonach
    7. Definiowanie edytowalnych atrybutów znacznika w programie Dreamweaver
    8. Tworzenie zagnieżdżonych szablonów w programie Dreamweaver
    9. Edytowanie, aktualizowanie i usuwanie szablonów
    10. Eksportowanie i importowanie zawartości XML w programie Dreamweaver
    11. Stosowanie szablonu lub usuwanie go z istniejącego dokumentu
    12. Edycja zawartości w szablonach programu Dreamweaver
    13. Reguły składni dla znaczników szablonu w programie Dreamweaver
    14. Ustawianie preferencji podświetlenia dla regionów szablonów
    15. Korzyści wynikające z używania szablonów w programie Dreamweaver
  15. Urządzenia mobilne i obsługa wielu ekranów
    1. Tworzenie zapytań o media
    2. Zmiana orientacji strony na urządzeniach mobilnych
    3. Tworzenie aplikacji internetowych przeznaczonych na urządzenia mobilne za pomocą programu Dreamweaver
  16. Dynamiczne serwisy, strony i formularze WWW
    1. Podstawowe informacje o aplikacjach internetowych
    2. Konfigurowanie komputera do programowania aplikacji
    3. Rozwiązywanie problemów z połączeniami z bazą danych
    4. Usuwanie skryptów połączenia w programie Dreamweaver
    5. Projektowanie stron dynamicznych
    6. Omówienie źródeł zawartości dynamicznej
    7. Definiowanie źródeł zawartości dynamicznej
    8. Dodawanie dynamicznej zawartości do stron
    9. Modyfikowanie dynamicznej zawartości w programie Dreamweaver
    10. Wyświetlanie rekordów z bazy danych
    11. Udostępnianie aktywnych danych w programie Dreamweaver oraz rozwiązywanie problemów z takimi danymi
    12. Dodawanie własnych zachowań serwerowych w programie Dreamweaver
    13. Tworzenie formularzy w programie Dreamweaver
    14. Zbieranie informacji od użytkowników za pomocą formularzy
    15. Tworzenie oraz włączanie formularzy ColdFusion w programie Dreamweaver
    16. Tworzenie formularzy WWW
    17. Rozszerzona obsługa elementów formularza w języku HTML5
    18. Tworzenie formularzy za pomocą programu Dreamweaver
  17. Tworzenie aplikacji metodą graficzną
    1. Tworzenie stron wzorca i szczegółów w programie Dreamweaver
    2. Tworzenie stron wyszukiwania i wyników
    3. Tworzenie strony wstawiania rekordów
    4. Tworzenie strony uaktualniania rekordów w programie Dreamweaver
    5. Tworzenie stron usuwania rekordów w programie Dreamweaver
    6. Używanie poleceń ASP do modyfikacji bazy danych w programie Dreamweaver
    7. Tworzenie strony rejestracji
    8. Tworzenie strony logowania
    9. Tworzenie strony, do której dostęp będą mieli tylko uwierzytelnieni użytkownicy
    10. Zabezpieczanie folderów w aplikacji ColdFusion za pomocą programu Dreamweaver
    11. Korzystanie ze składników ColdFusion w programie Dreamweaver
  18. Testowanie, podgląd i publikacja serwisów WWW
    1. Podgląd stron
    2. Podgląd stron WWW programu Dreamweaver na wielu urządzeniach
    3. Testowanie serwisu programu Dreamweaver

 

Informacje o dostosowywaniu kolorów poszczególnych elementów kodu (kolorowaniu kodu), np. komentarzy do kodu, w programie Dreamweaver.

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.

Ustawianie motywów kolorów i motywów kodu

Podczas uruchamiania programu Dreamweaver można wybrać preferowany motyw kolorystyczny. Można również zmienić te preferencje w dowolnej chwili.

  1. Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh).

  2. Z listy Kategoria po lewej stronie wybierz pozycję Interfejs.

  3. Wybierz motyw z listy Motywy kolorów. 

  4. Po ustawieniu motywu interfejsu określ motyw kodu.

    Można wybrać motyw jasny albo ciemny. Tak ustawiony motyw można następnie zapisać pod nową nazwą i dostosowywać dalej.

    Domyślne motywy kodu
    Domyślne motywy kodu

  5. Kliknij przycisk Zastosuj, aby zapisać wprowadzone zmiany.

Dostosowywanie motywów kodu

Po wybraniu motywu kodu dostosuj kolory, zapisując motyw pod nową nazwą i edytując go.

  1. Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh).

  2. Wybierz jasny lub ciemny motyw kodu, a następnie kliknij ikonę plusa i zapisz motyw pod nową nazwą.

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

    Tworzenie nowego motywu
    Tworzenie nowego motywu

  3. Zapisz domyślny motyw kodu pod nową nazwą.

    Tworzenie motywu kodu opartego na motywie domyślnym
    Tworzenie motywu kodu opartego na motywie domyślnym

  4. Wybierz nowo utworzony motyw kodu i kliknij ikonę Edytuj.

    Plik main.less zostanie otwarty w programie Dreamweaver i będzie można zmodyfikować selektory motywu, aby dostosować kolory kodu.

    Po zapisaniu pliku main.less widok Kod zostanie odświeżony i wyświetli nowe kolory.

Edytowanie selektorów w pliku main.less

Zanim zaczniesz edytować selektory w pliku main.less, zapoznaj się z komentarzami i instrukcjami w pliku motywu. Jeśli nie masz pewności, które selektory edytować, skorzystaj z następujących zasobów:

  • Omówienie selektorów — tabele referencyjne z informacjami o elementach kodu, na które wpływają poszczególne selektory.
  • Narzędzie Token Inspector — skorzystaj z narzędzia Token Inspector, aby „zbadać” konkretny plik i podświetlić elementy kodu, które są modyfikowane przez dany selektor.
  • Jeśli chcesz edytować kolory kodu w komentarzach lub zmienić kolor podświetlenia par znaczników, przejrzyj przykładowe urywki kodu podane w sekcji Przykłady dostosowywania kodu.

Znając już selektory, które wymagają edycji, możesz rozpocząć wprowadzanie zmian w pliku main.less.

  1. Przejdź na koniec pliku i odszukaj następujący komentarz:

    /* Za tym wierszem powinny się zaczynać definicje własnych kolorów lub przesłonięć */

  2. Wpisz selektory odpowiadające elementom kodu, których kolory chcesz edytować. Użyj następującej składni:

    .cm-tag {color: #00D0D0; }

    Uwaga:


    Jeśli jeden plik zawiera kod w wielu językach programowania, a dla każdego z nich mają być stosowane odrębne motywy kolorowania, zobacz Dostosowywanie kolorów kodu w plikach mieszanych.

  3. Jeśli chcesz przypisać ten sam kolor wielu elementom, możesz zdefiniować ich selektory jako jedną grupę. W poniższym przykładzie poszczególne selektory, rozdzielone przecinkami, otrzymują ten sam kolor.

    .cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}

  4. Aby zmiany kolorowania kodu dotyczyły tylko plików wybranego typu, należy otoczyć selektory elementów kodu selektorem typu pliku, tak jak w poniższym przykładzie:

    .HTML{
    .cm-tag{ color: #00D0D0;}
    }
  5. Po wprowadzeniu zmian zapisz plik.

    Program Dreamweaver odświeży widok Kod we wszystkich otwartych dokumentach, wyświetlając nowe kolory.

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

Dostosowywanie kolorów kodu w plikach mieszanych

Pracując nad plikami zawierającymi różne typy kodu (pochodzące z różnych języków programowania) — na przykład kombinację kodu HTML/CSS, HTML/PHP lub HTML/JavaScript — można dostosować jego kolory w następujący sposób:

  1. Utwórz niestandardowy motyw kodu, wykonując instrukcje podane w sekcji Dostosowywanie motywów kodu. Wybierz nowy motyw i zastosuj go.

  2. Zamknij program Dreamweaver.

  3. Otwórz plik package.json w edytorze tekstu.

    Windows: %appdata%\Adobe\Dreamweaver CC 2017\pl_PL\Configuration\Brackets\extensions\user\\

    Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/pl_PL/Configuration/Brackets/extensions/user//

    Dodaj następujący wiersz w bloku theme{}: 

    "addModeClass": true

    Edytowanie pliku package.json
    Edytowanie pliku package.json

  4. Otwórz program Dreamweaver i wybierz polecenie Edycja > Preferencje > Interfejs. Wybierz nowo utworzony motyw i kliknij ikonę Edytuj.

  5. Dodaj style specyficzne dla danego typu kodu na końcu pliku main.less.

    Użyj selektorów podanych w poniższej tabeli, aby zmienić kolory kodu dla odpowiednich typów plików.

    Selektor

    Typ pliku

    .cm-m-clike

    PHP

    .cm-m-css

    CSS, Less

    .cm-m-javascript

    JavaScript

    .cm-m-xml

    HTML, XML

    Na przykład w celu dostosowania kolorów nazw znaczników w kodzie CSS oraz znaczników „style” w kodzie HTML lub PHP należy użyć następującej składni:

    .cm-tag {color: #BD46BD;} 
    .cm-m-css.cm-tag {color: #38D08B;}
  6. Zapisz plik main.less. 

    Zmiany kolorów będą teraz widoczne w plikach z kodem.

Przykłady dostosowań kodu

Poniżej przedstawiono przykłady ułatwiające dostosowanie kolorów kodu w różnych sytuacjach.

Dostosowywanie koloru podświetlania pary znaczników

W pliku main.less wyszukaj następujący fragment kodu i dostosuj kolor.

.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
    /* Ensure visibility against gray inline editor background */
    background-color: #B53A3A;
    color: #fff!important;
Uwaga:

Ten fragment kodu jest uzależniony od motywu. W niektórych motywach może nie występować.

Dostosowywanie koloru komentarzy do kodu

W pliku main.less wyszukaj następujący fragment kodu i dostosuj kolor.

.cm-comment {color: #717171; font-style: italic;}

Omówienie selektorów

Aby zmienić kolory elementów kodu, edytuj właściwości selektorów w pliku main.less.

Jednak zanim zaczniesz modyfikować 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.

Można także skorzystać z narzędzia Token Inspector, aby poznać elementy kodu modyfikowane przez poszczególne selektory.

Selektory HTML CSS JavaScript PHP
.cm-atom  Nazwy encji, takie jak   Kolory w formacie szesnastkowym (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 „@” Zmienne, definicje funkcji oraz parametry 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 klamer { }, brakiem cudzysłowów w wartościach właściwości lub nieznaną 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: +, -, *, +=, !==, &&, >>> itd. Operatory, np. ===, &&, !, =>, +, - 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 i :focus, 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.

Selektor

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

W poniższej tabeli wymieniono selektory, które umożliwiają dostosowywanie kolorów kodu w przypadku plików zawierających wiele języków programowania.

Selektor

Typ pliku

.cm-m-clike

PHP

.cm-m-css

CSS, Less

.cm-m-javascript

JavaScript

.cm-m-xml

HTML, XML

Korzystanie z narzędzia Token Inspector

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 uruchomić narzędzie Token Inspector.

  1. Otwórz narzędzie Token Inspector 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
    Skorzystaj z narzędzia Token Inspektor, aby zapoznać się z selektorami

    A. Edytor kodu B. Opcja Zmiana trybu C. Lista selektorów 

  2. Skopiuj i wklej zawartość pliku do edytora kodu.

  3. Zmień tryb pliku, wpisując jego rozszerzenie i klikając opcję Zmień tryb.

    Na przykład jeśli pracujesz z plikiem HTML, zmień rozszerzenie na html. Strona zostanie zaktualizowana zgodnie ze zmianą trybu. Bieżący tryb jest wskazywany na górze strony.

    Wskaźnik trybu w narzędziu Token Inspector
    Wskaźnik trybu w narzędziu Token Inspector

  4. Zaznacz element kodu, którego wygląd chcesz zmienić.

    Token Inspector wyróżni wówczas odpowiedni selektor.

  5. (Opcjonalnie) Można także zaznaczyć pojedynczy selektor, aby sprawdzić, jakie elementy kodu są przez niego modyfikowane.

  6. Zapisz selektory, które chcesz zmienić, a następnie zamknij narzędzie Token Inspector.

Więcej zasobów tego rodzaju

Logo Adobe

Zaloguj się na swoje konto