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:
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).
W sekcji Źródła panelu Projektant CSS kliknij ikonę 
, a następnie jedną z następujących opcji:
W zależności od wybranej opcji zostanie wyświetlone okno dialogowe Utwórz nowy plik CSS albo Dołącz istniejący plik CSS.
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.
Wykonaj jedną z następujących czynności:
(Opcjonalnie) Kliknij opcję Użycie warunkowe i określ zapytanie o media, które ma zostać skojarzone z danym plikiem CSS.
W panelu Projektant CSS kliknij źródło CSS w sekcji Źródła.
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.
Odpowiednio ustaw warunki.
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.
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.
W panelu Projektant CSS wybierz źródło CSS w sekcji Źródła lub zapytanie o media w sekcji @Media.
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:
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.
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ę:
Kliknij odpowiedni selektor i przeciągnij go na nowe miejsce w panelu Selektory.
Właściwości są grupowane w następujące kategorie, oznaczone różnymi ikonami u góry sekcji Właściwości:
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.
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).
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.
Właściwości Sterowanie krawędziami są zorganizowane w logiczne zakładki, które ułatwiają wyświetlanie i modyfikowanie potrzebnych ustawień.
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.
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).
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ą.
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.
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 |
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.
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.
Otwórz panel Projektant CSS, wykonując jedną z poniższych czynności:
W panelu Projektant CSS kliknij ikonę + obok źródeł, a następnie wybierz opcję Dołącz istniejący plik CSS.
Wykonaj jedną z następujących czynności:
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.
Kliknij przycisk OK.
