Poradnik webdesignera
Strona główna
Uwagi ogólne
Błędy
Przykazania
Artykuły
Linki
Słowo od autorki
Dreamweaver MX - obsługa CSS
Kaskadowe Arkusze Stylów (CSS Cascading Style Sheets) są bardzo wygodnym
mechanizmem pozwalającym na definiowanie właściwości elementów zamieszczonych
na naszej strony internetowej. Dzięki arkuszom możemy w jednym miejscu
określić atrybuty poszczególnych obiektów (np. wielkość czcionki nagłówków,
rodzaj czcionki, pogrubienie, tło tabeli itp.). W przypadku, gdy chcemy
zmienić wygląd któregoś z nich wystarczy tą zmianę wprowadzić do arkusza
stylów, zamiast mozolnie edytować wszystkie pliki naszej strony.
Macromedia Dreamweaver MX daje możliwość łatwego wykorzystania stylów
nawet przez początkujących użytkowników, którzy nie znają składni CSS.
Tworzenie nowego arkusza stylów
Wybieramy z menu File > New (lub naciskamy kombinację CTRL+N). W oknie dialogowym "New Document" w zakładce "General" zaznaczamy "CSS Style Sheets". Mamy do wyboru ponad 20 predefiniowanych arkuszy uwzględniających różne rozwiązania kolorystyczne, rodzaje czcionek, nagłówki, tabele czy odnośniki.
Wszystkie stworzone przez nas arkusze można oczywiście dowolnie rozbudowywać i edytować korzystając z panelu "CSS Styles". W tym celu wybieramy z menu Window > CSS Styles lub przyciskamy kombinację klawiszy Shift+F11. W panelu mamy do dyspozycji dwa podglądy arkusza:
- Apply Style (zastosuj style) - w tym widoku wyświetlane są jedynie nowe style zdefiniowane przez użytkownika, które możemy zastosować do poszczególnych elementów naszego dokumentu.
- Edit Styles (edytuj style) - w opcji edycji wyświetlone są wszystkie style stosowane do danego dokumentu czyli również te, które zmieniają parametry podstawowych znaczników (np.: body, H1, table, a:active itp.).
Tworzenie i edycja stylów
W prawym dolnym rogu panelu CSS Styles znajdują się następujące ikonki (opis od lewej):
1. załączenie arkusza stylów z zewnętrznego pliku
2. dodanie nowego stylu
3. edycja danego stylu
4. usunięcie danego stylu
Opcje te są również dostępne pod prawym klawiszem myszki.
Klikając na ikonkę ze znakiem plus otwieramy okno dialogowe nowego stylu. Możemy zarówno stworzyć nasz własny styl (Make custom Style), redefiniować standardowe ustawienia znaczników HTML (Redefine HTML Tag) - na przykład wielkość czcionek w nagłówkach, kolor tła, kolory odnośników itp., jak i zmieniać właściwości odnośników (Use CSS Selector) w zależności od tego czy dana lokalizacja była już odwiedzona (a:visited), czy kursor znajduje się nad odnośnikiem (a:hoover) itd.
Nowy styl możemy zdefiniować w obrębie aktualnego dokumentu (This document
only) lub zapisać w zewnętrznym pliku (New Style Sheet File).
Po wybraniu żądanych opcji klikamy "ok" i przechodzimy do okna dialogowego
definicji stylu, w którym w wygodny sposób możemy definiować poszczególne
parametry.
Przyporządkowywanie stylów do elementów dokumentu
Wszystkie style, które odnoszą się do standardowych znaczników języka HTML są do nich automatycznie przyporządkowywane. Oznacza to, że jeżeli na ten przykład zadeklarujemy, że nagłówki H2 mają być wyświetlane czcionką Verdana, w kolorze pomarańczowym, o rozmiarze 12, lub wszystkie tabele mają mieć zielone tło i żółty kolor czcionki, to zadeklarowane ustawienia będą stosowane do wszystkich nagłówków H2 oraz wszystkich tabel użytych w dokumencie.
Mamy również dodatkową możliwość kontrolowania wyglądu naszej strony poprzez definiowanie własnych klas oraz identyfikatorów. W tym przypadku do określonych elementów musimy przypisać daną klasę lub identyfikator. W tym celu korzystamy z okna Properties (Window > Properties lub kombinacja klawiszy: CTRL+F3), w którym klikając na ikonkę litery A możemy przełączyć pomiędzy trybem bezpośredniego formatowania a zdefiniowanymi stylami. Te same możliwości daje nam panel CSS style w widoku Apply Style. Zaznaczamy fragment tekstu lub element, do którego chcemy zastosować wcześniej zdefiniowany styl i klikamy na nazwę stylu.
Korzystanie z zewnętrznego arkusza stylów
Jeżeli style, które stworzyliśmy odnoszą się jedynie do aktualnego dokumentu możemy je wyeksportować do osobnego pliku, żeby później stosować do innych stron naszej witryny. Z menu File wybieramy Export > Export CSS Styles. Trzeba pamiętać, że nazwa pliku może się składać jedynie z małych liter i nie może zawierać spacji. W celu dodania zewnętrznego arkusza stylów do danego pliku klikamy w panelu CSS Styles na przycisk Attach Style Sheet (pierwszy po lewej na dole okna) i wybieramy żądany plik. Plik możemy podpiąć jako odnośnik (opcja Link) lub wkleić jego zawartość do dokumentu (opcja Import). Jeżeli wybieramy plik, który znajduje się poza obrębem naszego zdefiniowanego siteu jesteśmy proszeni o skopiowanie go do katalogu, który się w nim znajduje.
Agnieszka Richter
Przydatne adresy:
Web Style Sheets - Strona W3C
http://www.w3.org/Style/
Cascading Style Sheets, level 2 CSS2 Specification
http://www.w3.org/TR/REC-CSS2/
HTMLzon@ CSS
http://republika.onet.pl/0,1,1615,1612,artykuly.html
Kaila Studio - linki - HTML, CSS, Java Script
http://www.kailastudio.com.pl/design/linki/linkihtm.htm
Style stosowane - poradnik niesystematyczny
http://www.wsp.krakow.pl/~andrus/style/style.html
Przewodnik po CSS2
http://www.pckurier.pl/webmaster/poradniki/css2/
Webmaster - zasoby webmasterskie: CSS
http://webmaster.pckurier.pl/zasoby/css.html
Artykuł został napisany dla Optimus
Pascal S.A. Publikowanie całości lub fragmentów niniejszego artykułu
jest zabronione bez zgody właściciela.