Podręcznik użytkownika Anuluj

Tworzenie układu strony za pomocą panelu Projektant CSS

  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

 

Tworzenie i dołączanie arkuszy stylów, zapytań o media i selektorów oraz ustawianie właściwości CSS w panelu Projektant CSS.

Panel Projektant CSS
Panel Projektant CSS

Panel Projektant CSS (Okno > Projektant CSS) to Inspektor właściwości CSS, który umożliwia tworzenie plików i stylów CSS metodą graficzną, ustawianie właściwości oraz definiowanie zapytań o media.

W interfejsie panelu Projektant CSS są dostępne następujące sekcje:

  • Źródła: Zbiór plików CSS powiązanych z projektem.
  • @Media: Zapytania o media, które sterują wielkością ekranu.
  • Selektory: Selektory powiązane z zapytaniem o media zaznaczonym w panelu @Media.
  • Właściwości: Właściwości zaznaczonego selektora oraz opcja umożliwiająca wyświetlenie tylko tych właściwości, które zostały ustawione.

Za pomocą panelu Projektant CSS można edytować poszczególne reguły z pliku CSS (służy do tego zakładka Bieżący w tym panelu) albo pracować bezpośrednio w arkuszu stylów CSS (za pomocą zakładki Wszystkie w panelu Projektant CSS).

Tworzenie i dołączanie arkuszy stylów

  1. W sekcji Źródła panelu Projektant CSS kliknij ikonę , a następnie jedną z następujących opcji:

    • Utwórz nowy plik CSS: aby utworzyć i dołączyć do dokumentu nowy plik CSS.
    • Dołącz istniejący plik CSS: aby dołączyć do dokumentu istniejący plik CSS.
    • Zdefiniuj na stronie: aby zdefiniować style CSS wewnątrz dokumentu.
    Tworzenie i dołączanie arkuszy stylów za pomocą panelu Projektant CSS
    Tworzenie i dołączanie arkuszy stylów za pomocą panelu Projektant CSS

    W zależności od wybranej opcji zostanie wyświetlone okno dialogowe Utwórz nowy plik CSS albo Dołącz istniejący plik CSS.

  2. Kliknij przycisk Przeglądaj, aby podać nazwę pliku CSS. Jeśli tworzysz plik CSS, określ również lokalizację, w której ma zostać zapisany.

  3. Wykonaj jedną z następujących czynności:

    • Kliknij opcję Łącze, aby połączyć dokument programu Dreamweaver z plikiem CSS.
    • Kliknij opcję Importuj, aby zaimportować plik CSS do dokumentu.
  4. (Opcjonalnie) Kliknij opcję Użycie warunkowe i określ zapytanie o media, które ma zostać skojarzone z danym plikiem CSS.

Definiowanie zapytań o media

  1. W panelu Projektant CSS kliknij źródło CSS w sekcji Źródła.

  2. Kliknij ikonę w sekcji @Media, aby dodać nowe zapytanie o media.

    Zostanie wyświetlone okno dialogowe Zdefiniuj zapytanie o media, zawierające listę wszystkich warunków zapytań o media obsługiwanych przez program Dreamweaver.

  3. Odpowiednio ustaw warunki.

    Definiowanie zapytań o media
    Definiowanie zapytań o media

    Upewnij się, że dla wszystkich wybranych warunków zostały podane poprawne wartości. W przeciwnym razie związane z nimi zapytania o media nie zostaną pomyślnie utworzone.

    Uwaga:

    Jedynym operatorem obsługiwanym w przypadku wielu warunków jest AND.

Jeśli zapytanie o media zostało dodane w kodzie, to w oknie dialogowym Zdefiniuj zapytanie o media wyświetlone będą tylko obsługiwane warunki. Natomiast widoczne w tym oknie dialogowym pole tekstowe Kod będzie wyświetlać pełną postać kodu (wraz z nieobsługiwanymi warunkami).

Po kliknięciu zapytania o media w widoku Projekt/Aktywny okno przeglądarki zostanie uaktualnione w taki sposób, aby odzwierciedlić parametry w wybranym zapytaniu. Aby wyświetlić okno przeglądarki w pełnej wielkości, kliknij opcję Globalnie w panelu @Media.

Definiowanie selektorów CSS

  1. W panelu Projektant CSS wybierz źródło CSS w sekcji Źródła lub zapytanie o media w sekcji @Media.

  2. W sekcji Selektory kliknij ikonę . W zależności od elementu zaznaczonego w dokumencie, panel Projektant CSS inteligentnie rozpoznaje i udostępnia użytkownikowi odpowiedni selektor (maksymalnie trzy reguły).

    Można wykonać następujące czynności:

    • Zawęzić lub rozszerzyć szczegółowość selektora za pomocą klawisza strzałki w górę lub w dół.
    • Usunąć sugerowaną regułę i wpisać odpowiedni selektor. Należy pamiętać o wpisaniu nazwy selektora wraz z oznacznikiem określającym jego typ. Na przykład aby określić identyfikator (ID), przed nazwą selektora należy umieścić znak „#”.
    • Aby wyszukać konkretny selektor, użyj pola wyszukiwania w górnej części sekcji panelu.
    • Aby zmienić nazwę selektora, kliknij go i wpisz odpowiednią nazwę.
    • Aby zmienić kolejność selektorów, przeciągnij je na odpowiednie pozycje.
    • Aby przenieść selektor z jednego źródła do innego, przeciągnij go do wymaganego źródła w sekcji Źródła.
    • Aby powielić selektor w wybranym źródle, kliknij go prawym przyciskiem myszy i wybierz opcję Powiel.
    • Aby powielić selektor i dodać go do zapytania o media, kliknij selektor prawym przyciskiem myszy, zatrzymaj wskaźnik myszy nad opcją Powiel jako zapytanie o media, a następnie wybierz zapytanie o media.

    Uwaga: opcja Powiel jako zapytanie o media jest dostępna tylko wtedy, gdy źródło wybranego selektora zawiera zapytania o media. Nie można powielić selektora z jednego źródła do zapytania o media innego źródła.

Kopiowanie i wklejanie stylów

Style można teraz kopiować z jednego selektora i wklejać do innego. Kopiować można wszystkie style albo tylko określone kategorie, np. style układu, tekstu lub krawędzi.

Kliknij selektor prawym przyciskiem myszy i wybierz odpowiednią opcję:

  • Jeśli selektor nie zawiera żadnych stylów, opcje Kopiuj i Kopiuj wszystkie style będą niedostępne.
  • Opcja Wklej style będzie wyłączona w przypadku serwisów zdalnych, których nie można edytować. Natomiast opcje Kopiuj i Kopiuj wszystkie style pozostaną dostępne.
  • Możliwe jest wklejanie stylów, które już częściowo istnieją w selektorze (nakładanie). Wklejana jest suma zbiorów właściwości wszystkich selektorów.
  • Style można kopiować i wklejać także między plikami CSS o różnym sposobie dołączania (importowanie, łącze, styl w wierszu).
Kopiowanie i wklejanie stylów
Kopiowanie i wklejanie stylów

Zmiana kolejności selektorów

Kliknij odpowiedni selektor i przeciągnij go na nowe miejsce w panelu Selektory.

Ustawianie właściwości CSS

Właściwości są grupowane w następujące kategorie, oznaczone różnymi ikonami u góry sekcji Właściwości:

  • Układ
  • Tekst
  • Krawędź
  • Tło
  • Więcej (lista właściwości „tylko tekstowych”, które nie mają parametrów graficznych)
Uwaga:

Zanim zmienisz właściwości selektora CSS, użyj funkcji inspekcji wstecznej, aby sprawdzić, które elementy strony są związane z tym selektorem. Pozwoli to ocenić, czy wszystkie elementy podświetlone w inspekcji wstecznej rzeczywiście wymagają zmian.

Aby wyświetlane były tylko te właściwości, które zostały ustawione, zaznacz pole wyboru Ust. Aby wyświetlić wszystkie właściwości, jakie można określić dla danego selektora, usuń zaznaczenie z pola wyboru Ust.

Aby ustawić właściwość, np. width lub border-collapse, kliknij odpowiednie opcje wyświetlone obok tej właściwości w sekcji panelu Właściwości.

Przesłonięte właściwości są oznaczane przekreśleniem.

Ustawianie marginesów, odstępów i położenia

Sekcja Właściwości w panelu Projektant CSS zawiera pola umożliwiające szybkie określanie marginesów, odstępów wewnętrznych i położenia (właściwości margin, padding i position). Użytkownicy, którzy preferują kodowanie, mogą skorzystać z pól szybkiej edycji właściwości margin i padding. Można w nich wpisywać kod właściwości metodą skrótową (tak jak w poniższym przykładzie).

Właściwość margin
Właściwość margin

Kliknij opcje i wpisz odpowiednią wartość. Jeśli chcesz, aby wszystkie cztery wartości były takie same i zmieniały się jednocześnie, kliknij ikonę łańcucha na środku.

Poszczególne wartości (np. lewy margines) można w dowolnym momencie wyłączać lub usuwać, nie zmieniając pozostałych, np. prawego, górnego i dolnego marginesu.

Ustawianie właściwości krawędzi

Właściwości Sterowanie krawędziami są zorganizowane w logiczne zakładki, które ułatwiają wyświetlanie i modyfikowanie potrzebnych ustawień.

Właściwości sterujące krawędziami
Właściwości sterujące krawędziami

Użytkownicy, którzy preferują kodowanie, mogą skorzystać z pola szybkiej edycji właściwości border i border-radius. Można w nim wpisywać kod właściwości metodą skrótową.

Aby określić właściwości sterujące krawędziami, najpierw ustaw właściwości na zakładce Wszystkie boki. Spowoduje to uaktywnienie pozostałych zakładek, przy czym poszczególne krawędzie przyjmą wartości ustawione na zakładce Wszystkie boki.

Zmiana właściwości na zakładkach odpowiadających poszczególnym krawędziom spowoduje, że ustawienie tej właściwości na zakładce Wszystkie boki zmieni się na wartość „niezdefiniowana” (jest to wartość domyślna).

W poniższym przykładzie najpierw ustawiono właściwość „border color” na kolor czarny, a następnie dla górnej krawędzi zmieniono to ustawienie na kolor czerwony.

Ustawianie koloru krawędzi na wszystkich bokach
Ustawianie koloru krawędzi na wszystkich bokach

Krawędzie na wszystkich bokach
Krawędzie na wszystkich bokach

Ustawianie kolorów krawędzi na górze
Ustawianie kolorów krawędzi na górze

Kolor górnej krawędzi ustawiono na czerwony
Kolor górnej krawędzi ustawiono na czerwony

Wstawiany kod zależy od opcji wybranych w preferencjach (skróty lub pełny tekst właściwości).

Podczas inspekcji zakładki te są uaktywniane na podstawie priorytetu „ustawionych” zakładek. Najwyższy priorytet ma zakładka Wszystkie boki, a po niej kolejno zakładki Górna, Prawa, Dolna i Lewa. Jeśli na przykład ustawiono tylko wartość górnej krawędzi, to tryb obliczany uaktywni zakładkę „Górna”, ignorując zakładkę „Wszystkie boki” (ponieważ wartości na tej zakładce nie zostały ustawione).

Wyłączanie lub usuwanie właściwości

Funkcja Włącz/Wyłącz właściwość CSS umożliwia przekształcanie części kodu CSS w komentarze bezpośrednio w panelu Projektant CSS, bez potrzeby modyfikowania kodu. Przekształcenie części kodu CSS w komentarze pozwala sprawdzić, jaki wpływ mają poszczególne właściwości i wartości na wygląd strony.

Wyłączenie właściwości CSS powoduje, że program Dreamweaver dodaje do niej znaczniki komentarza CSS i etykietę [wyłączone]. Tak wyłączoną właściwość CSS można łatwo usunąć albo ponownie włączyć.

Panel Projektant CSS umożliwia wyłączanie lub usuwanie poszczególnych właściwości.

Na poniższych ilustracjach widoczne są ikony wyłączania i usuwania dla właściwości height. Ikony te pojawiają się po zatrzymaniu kursora myszy nad właściwością.

Wyłączanie/usuwanie właściwości
Wyłączanie/usuwanie właściwości

Operacje usuwania lub wyłączania można również wykonywać na poziomie całej grupy właściwości sterujących krawędziami, aby zastosować wybraną opcję do wszystkich właściwości.

Skróty klawiszowe

Selektory i właściwości CSS można dodawać i usuwać za pomocą skrótów klawiszowych. W ten sam sposób można również przechodzić między grupami właściwości w panelu Właściwości.

Skrót

Obieg pracy

CTRL + Alt + [Shift =]

Dodanie selektora (jeśli punkt aktywny jest w sekcji selektorów)

CTRL + Alt+ S

Dodanie selektora (jeśli punkt aktywny jest w dowolnym miejscu w aplikacji)

CTRL + Alt + [Shift =]

Dodanie właściwości (jeśli punkt aktywny jest w sekcji właściwości)

CTRL + Alt+ P

Dodanie właściwości (jeśli punkt aktywny jest w dowolnym miejscu w aplikacji)

Zaznaczenie + Delete

Usunięcie selektora (jeśli jest zaznaczony selektor)

CTRL + Alt + (PgUp/PgDn)

Przechodzenie między sekcjami w subpanelu Właściwości 

Identyfikowanie elementów strony związanych z selektorem CSS

Ten sam selektor CSS jest często powiązany z wieloma elementami na stronie. Na przykład tekst w głównej części strony, w nagłówku i w stopce może mieć taki sam selektor CSS. Modyfikacja selektora CSS wpływa na właściwości wszystkich elementów powiązanych z tym selektorem, co może doprowadzić do zmian w niepożądanych miejscach.

Funkcja podświetlania na żywo ułatwia identyfikowanie elementów strony związanych z danym selektorem CSS. Jeśli chcesz zmienić tylko niektóre elementy, możesz utworzyć dla nich nowy selektor CSS i zmodyfikować jego właściwości.

Aby sprawdzić, które elementy strony są powiązane z danym selektorem CSS, zatrzymaj kursor myszy nad tym selektorem w widoku aktywnym (przy wyłączonym ustawieniu Aktywny kod). Program Dreamweaver wyróżni powiązane elementy przerywaną linią.

Aby zablokować podświetlenie elementów, kliknij selektor. Elementy zostaną podświetlone niebieską obwódką.

Aby usunąć niebieskie podświetlenie z elementów, ponownie kliknij selektor.

Tryb podświetlania na żywo jest domyślnie włączony. Aby go wyłączyć, kliknij opcje widoku aktywnego w pasku narzędzi Dokument, a następnie wybierz opcję Wyłącz podświetlanie na żywo. 

Łączenie z zewnętrznym arkuszem stylów CSS

Gdy jest edytowany zewnętrzny arkusz stylów CSS, wszystkie dokumenty połączone z tym arkuszem będą uaktualniane zgodnie z wprowadzanymi zmianami.

Style CSS znajdujące się w dokumencie można wyeksportować, aby utworzyć nowy arkusz stylów CSS, a następnie dołączyć go lub dodać łącze do tego arkusza. Pozwoli to stosować zawarte w nim style.

Do stron można dołączyć każdy arkusz stylów, który został utworzony w serwisie lub skopiowany do niego.

  1. Otwórz panel Projektant CSS, wykonując jedną z poniższych czynności:

    • Wybierz polecenie Okno > Projektant CSS.
    • Naciśnij klawisze Shift + F11.
  2. W panelu Projektant CSS kliknij ikonę + obok źródeł, a następnie wybierz opcję Dołącz istniejący plik CSS.

    Dołączanie istniejącego pliku CSS
    Dołączanie istniejącego pliku CSS

  3. Wykonaj jedną z następujących czynności:

    • Kliknij przycisk Przeglądaj, aby przejść do zewnętrznego arkusza stylów CSS.
    • Wpisz ścieżkę do arkusza stylów w polu Plik/URL.
  4. Kliknij przycisk Podgląd, aby sprawdzić, czy arkusz stylów stosuje style, które chcesz wprowadzać na bieżącej stronie.

    Jeżeli stosowane style nie odpowiadają twoim oczekiwaniom, kliknij przycisk Anuluj, aby usunąć arkusz stylów. Strona powróci do wcześniejszego wyglądu.

  5. Kliknij przycisk OK.

Logo Adobe

Zaloguj się na swoje konto

[Feedback V2 Badge]