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 (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).

Panel Projektant CSS
Panel 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.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online