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 CSS Designer (Okno > CSS Designer) to inspektor właściwości CSS, który umożliwia „wizualne" tworzenie stylów i plików CSS oraz ustawianie właściwości wraz z zapytaniami o multimedia.
W interfejsie CSS Designer dostępne są następujące sekcje:
Za pomocą Projektanta CSS można edytować poszczególne reguły w arkuszu stylów CSS (należy użyć karty Bieżące w Projektancie CSS) lub pracować bezpośrednio w arkuszu stylów CSS (należy użyć karty Wszystkie w Projektancie 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 @Multimedia, 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.
Wybierz warunki stosownie do potrzeb.
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.
W przypadku wielu warunków obsługiwana jest tylko operacja „And" (i).
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 CSS Designer wybierz źródło CSS w okienku Sources lub zapytanie o multimedia w okienku @Media.
W sekcji Selektory kliknij ikonę . Na podstawie elementu wybranego w dokumencie CSS Designer inteligentnie identyfikuje i proponuje odpowiedni selektor (do trzech reguł).
Możesz 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 prawym przyciskiem myszy selektor i wybierz jedną z dostępnych opcji:
Kliknij wymagany selektor i przeciągnij go do nowej pozycji za pomocą okienka 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). Jeśli preferujesz kod, możesz określić skrócony kod marginesu i dopełnienia w polach szybkiej edycji, jak pokazano w tym 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ę łącza w centrum.
W dowolnym momencie można wyłączyć lub usunąć określone wartości, na przykład wartość lewego marginesu, zachowując wartości prawą, górną i dolną.
Właściwości kontroli obramowania są uporządkowane w logiczne karty, które pomagają szybko przeglądać lub modyfikować właściwości.
Jeśli wolisz kod, możesz określić skrócony kod dla obramowań i promienia obramowania w polu tekstowym szybkiej edycji.
Aby określić właściwości sterujące krawędziami, najpierw ustaw właściwości na zakładce Wszystkie boki. Inne karty są następnie włączane, a właściwości ustawione na karcie „Wszystkie strony" są odzwierciedlane dla poszczególnych obramowań.
Po zmianie właściwości w kartach poszczególnych obramowań wartość odpowiadającej jej właściwości na karcie „Wszystkie strony" zmienia się na „niezdefiniowana" (wartość domyślna).
W poniższym przykładzie kolor obramowania został ustawiony na czarny, a następnie zmieniony na czerwony dla górnego obramowania.
Wstawiany kod zależy od ustawienia preferencji dla zapisu skróconego lub pełnego.
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. Na przykład, jeśli dla obramowania ustawiona jest tylko wartość górna, tryb obliczeniowy przenosi fokus na kartę „Góra", ignorując kartę „Wszystkie strony", ponieważ karta „Wszystkie strony" nie jest ustawiona.
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 CS5 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ć.
Każdą właściwość można wyłączyć lub usunąć za pomocą panelu CSS Designer.
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ą.
Można również użyć kontrolek usuwania i wyłączania na poziomie grupy Border Control, aby zastosować te akcje do wszystkich właściwości.
Selektory i właściwości CSS można dodawać i usuwać za pomocą skrótów klawiszowych. Można również nawigować między grupami właściwości w okienku 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 edytujesz zewnętrzny arkusz stylów CSS, wszystkie dokumenty połączone z tym arkuszem są 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.
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
