Dreamweaver 4 Dla Każdego, ROZDZ12, Szablon dla tlumaczy


Rozdział 12. Korzystanie z kaskadowych arkuszy stylów

Czy zdarzyło Ci się już słyszeć terminy takie jak arkusz stylów, CSS, warstwy i inne, lecz nie wiesz co one znaczą? Wszystkie te nazwy odnoszą się do kaskadowych arkuszy stylów (CSS), rozwijającego się standardu wprowadzonego przez Konsorcjum W3C (World Wide Web Consortium; www.w3c.org) będącego de facto organizacją zajmującą się standardami internetowymi.

Tam, gdzie kończy się HTML, tam zaczyna się CSS - a przynajmniej w aspekcie układu i stylu dokumentu internetowego. Wraz z rozwojem przeglądarek i śmiałości twórców stron WWW, termin kaskadowe arkusze stylów przejdzie do codzienności, a same arkusze CSS będą stosowane na niemal wszystkich stronach WWW. Ponieważ to wiemy, nie możemy nie sięgnąć po tę technologię. Zacznijmy od zastanowienia się nad tym, czym w rzeczywistości są arkusze CSS. Oto lista najważniejszych tematów, które tu poruszymy:

Dlaczego stosować arkusze stylów?

O impresji dzieła multimedialnego lub wizualnego wywieranej na publiczność decydują dwa czynniki: treść i styl. Tak jest zawsze, niezależnie od tego, czy dzieło ma postać wirtualną, jak strona WWW, czy też materialną. W odniesieniu do publikacji sieciowych termin treść oznacza zawartość strony WWW. To przede wszystkim zawartość przyciąga czytelników. Z drugiej strony styl to finezja, dekoracja i ostatnie muśnięcie, dzięki którym danie staje się bardziej smakowite.

Tradycyjny HTML usiłuje wspomóc projektanta w stylizacji stron, ale bieżąca implementacja języka jest mało precyzyjna i ma ograniczone możliwości. I tu właśnie pojawiają się kaskadowe arkusze stylów, propozycja autorstwa W3C standaryzacji zaawansowanych atrybutów stylu do zastosowań na stronach WWW. Dzięki arkuszom stylów nie ma już potrzeby stosowania stylu do każdego elementu, czy nawet każdej strony. Jeden styl może być wykorzystywany w całej witrynie, a jego aktualizacja wymaga jedynie zmian w jednym pliku. Co więcej, wszelkie zmiany wprowadzone w procesie aktualizacji są natychmiast uwzględniane na wszystkich stronach, do których styl został zastosowany. Arkusze stylów wykazują dwojakiego rodzaju przewagę nad tradycyjnym formatowaniem HTML:

Podobnie jak w przypadku potraw, styl i stopień perfekcji jego definicji zależą od dwóch spraw. Pierwsza to czas i pieniądze. Budżet i ograniczenia czasowe określające termin przygotowania witryny wymuszają włączenie bądź wyłączenie pewnych rozwiązań (podobnie jak w przypadku wyboru między barem szybkiej obsługi a restauracją z prawdziwego zdarzenia). Drugim czynnikiem są Twoi czytelnicy. Typowy kierowca ciężarówki zamówi z dużym prawdopodobieństwem solidny stek, a typowa nastolatka dbająca o linię będzie preferowała sałatkę szefa. Zawsze więc staraj się przeanalizować Twoją potencjalną publiczność pod kątem preferencji i w oparciu o taką analizę równoważ zawartość i styl każdej aplikacji.

Arkusze stylów budowane są z reguł, które rezydują w dokumencie lub osobnym pliku połączonym z dokumentem. Reguła zawiera dwa elementy: selektor i deklarację. Deklarację tworzy z kolei para: właściwość i wartość. Oto przykład reguły CSS:

h3 {text-decoration: underline }

W tym przykładzie h3 to selektor. To on właśnie wiąże arkusz stylów z dokumentem. W tym przypadku definiowany jest styl elementu HTML jakim jest nagłówek Heading 3. Wyrażenie text-decoration: underline to deklaracja - definicja sposobu, w jaki chcesz wpłynąć na znacznik <H3>. W naszym przykładzie text-decoration to właściwość, a underline wartość. Tak więc reguła spowoduje zastosowanie podkreślenia do tekstu zawartego między znacznikami <H3></H3>. Jak zauważysz, inne atrybuty znacznika <H3> nie zostaną usunięte - innymi słowy formatowanie poprzez arkusze CSS nie usuwa formatowania domyślnego, a jedynie go rozszerza. Nie oznacza to jednak, że nie masz możliwości całkowitej zmiany definicji stylu H3. Jest taka możliwość, a w dalszej części rozdziału dowiesz się jak z niej korzystać.

Grupowanie stylów

Jak widzisz, zmiana właściwości znacznika jest bardzo prosta. Co więcej, jak już wspominałem, można zmienić także całą definicję znacznika. Jak to zrobić? Tutaj dochodzimy do innej cechy kaskadowych arkuszy stylów. Reguła arkusza CSS może zawierać wiele deklaracji. Rozbudowując poprzedni przykład możesz dodać deklaracje koloru i rozmiaru, podobne to przedstawionych poniżej:

h3 { text-decoration: underline; color: blue; font-size: 14pt }

Nie tylko deklaracje można grupować, lecz także selektory. O ile deklaracje oddziela się średnikami, to grupowane selektory przecinkami. Oto przykład arkusza CSS, w którym definiowane są identyczne style dla tekstu nagłówka H3 i tekstu pogrubionego:

h3, b { text-decoration: underline; color: blue; font-size: 14pt }

Dziedziczenie stylu

Inną charakterystyczną cechą arkuszy CSS jest możliwość ich zastosowania do wielu znaczników poprzez dziedziczenie. Elementy zawarte w selektorze CSS będą dziedziczyć deklarację stylu tego selektora. Na przykład jeżeli w obszarze elementu H3 znajdują się inne znaczniki, odziedziczą one deklaracje stylu określone dla H3. Oto przykład tego, o czy tu mówiliśmy:

<h3>Witam na mojej <em>NOWEJ</em> stronie WWW</h3>

W tym przykładzie tekst NOWEJ odziedziczyłby właściwości takie jak podkreślenie, niebieski kolor tekstu i rozmiar czcionki 14 punktów, o ile oczywiście zastosowana zostałaby deklaracja stylu H3 taka, jak w poprzednim przykładzie. Znacznik <em> również wpłynąłby na styl tekstu, powodując dodanie emfazy (kursywa).

Dziedziczenie funkcjonuje także w relacji element nadrzędny-element podrzędny. Dzięki tej zależności istnieje możliwość określenia atrybutów stylu stosowanych na całej stronie za pomocą jednego stylu. Można to uzyskać definiując selektor body, tak jak w tym oto przykładzie:

body { font-family: Arial, Helvetica, sans-serif; font-size: 12pt }

W ten sposób wszystkie elementy dokumentu HTML domyślnie dziedziczą zdefiniowane w deklaracji właściwości (oczywiście o ile mogą mieć takie właściwości). Nie jest to żelazna reguła, od której nie ma odstępstwa. Odstępstwa są możliwe, a wprowadza się je bezpośrednio dla danego przypadku. Mówi o tym następny punkt.

Nie bez powodu nazywa się je kaskadowymi!

Mówiąc o cechach kaskadowych arkuszy stylów CSS ograniczaliśmy się na razie do dwóch członów ich nazwy. Poruszaliśmy kwestię stylu i arkusza. Trzeci aspekt, także znajdujący odzwierciedlenie w nazwie, jest niewątpliwie decydujący i chyba równie ważny co pozostałe. To oczywiście termin kaskadowy. Termin ten opisuje zasadę przejmowania pierwszeństwa przez style lokalne nad stylami zdefiniowanymi na poziomie strony, które z kolei dominują nad stylami globalnymi.

Wyobraź sobie, że korzystasz z zewnętrznego arkusza stylów, który definiuje styl całego tekstu przypisując mu krój czcionki Arial, rozmiar 12 pt i kolor czarny (można by to osiągnąć poprzez zmianę definicji znacznika <body>). Taka definicja miałaby wpływ na wszystkie elementy dokumentu HTML, dla których dopuszczalne jest stosowanie którejkolwiek z tych trzech właściwości. Jest to dobra metoda ustanawiania i stosowania ogólnego układu i stylu strony WWW. Jeśli na przykład zdecydowałbyś się na dodanie do fotografii podpisów pisanych kursywą o rozmiarze 8 punktów drukarskich i na dodatek chciałbyś zastosować do tego celu styl nagłówka H1, aby wyróżnić znacząco podpisy, należałoby utworzyć nowy styl, stanowiący redefinicję stylu H1. Wówczas w arkuszu stylów styl lokalny zdominuje styl wyższego poziomu. Umożliwi to zastosowanie stylu podpisu do podpisów i zapewni im żądany wygląd nawet w warunkach zasad stylu globalnego.

Stosowanie stylów na stronach WWW

Zanim nauczysz się stosować style CSS z poziomu programu Dreamweaver, musisz poznać trzy metody stosowania stylów w dokumencie HTML. Omówimy je w kolejności malejącej kontroli (co oznacza, że definicje stylów są dominowane przez definicje definiowane na niższym poziomie).

Atrybuty stylu

W metodzie najniższego poziomu wykorzystuje się atrybuty stylu, które umieszczane są w znaczniku HTML, do którego styl ma być zastosowany. Ustawienia stylu wprowadzone w ten sposób dominują nad wszelkimi innymi definicjami stylu (tego typu zastosowanie stylu nosi nazwę stylu wpisanego - przypis tłum.). Oto przykład typowego zastosowania atrybutów stylu:

<div id=”Layer1” style=”position:absolute; width:358px; height:378px; z-index:1; left: 160px; top: 225px”></div>

Jest to kod definiujący element DHTML zwany warstwą. Rozdział 10., „Korzystanie z warstw”, omawia szczegółowo zastosowania i możliwości warstw. Jak możesz zobaczyć, położenie warstwy na stronie WWW określone jest w arkuszu CSS. Ponieważ warstwy zazwyczaj miewają różne pozycje, reguły CSS są definiowane w obrębie każdego znacznika warstwy osobno.

Style osadzone

W metodzie pośredniego poziomu styl stosowany jest w obrębie strony, lecz nie w poszczególnych znacznikach. Takie podejście pozwala zdefiniować styl strony bez potrzeby przygotowywania odrębnego pliku. Jedną z największych zalet takiego rozwiązania jest szybka aktualizacja stylu - mówiliśmy o tym wcześniej. Chociaż regułę stylu można wpisać w dowolnym miejscu dokumentu, standardowo przyjmuje się, że miejscem osadzonego stylu CSS jest sekcja HEAD dokumentu. Oto typowa definicja stylu osadzonego:

<head>

<meta blah blah...>

<head>

<style type=”text/css”>

<!--

.background { background-color: #0066FF; background-image: url(bg.gif); background-repeat: no-repeat }

p { font-family: Arial, Helvetica, sans-serif; font-size: 12 pt }

-->

</style>

</head>

</head>

Analizując ten kod źródłowy zauważysz w pierwszej kolejności, że osadzony arkusz stylów jest zawarty w elemencie STYLE, którego wartością atrybutu type jest text/css. Zauważysz także prawdopodobnie, choć być może nie będziesz wiedział na razie co to oznacza, że rzeczywista definicja stylu umieszczona jest w znacznikach komentarza HTML.

W tych przeglądarkach, które nie potrafią obsługiwać arkuszy stylów, znaczniki komentarza obejmujące wszystkie reguły CSS spowodują potraktowanie kodu jako komentarza (i pominięcie go). Z kolei te przeglądarki, którym arkusze CSS nie są obce, wiedzą, że między znacznikami zawarte są definicje stylów.

Zewnętrzne arkusze stylów

Ostatnia z metod wykorzystuje zewnętrzne arkusze stylów. Jest to idealne rozwiązanie tam, gdzie celem jest stworzenie ogólnego stylu całej witryny (na przykład witryny firmy). Zmiana jednej reguły, wpłynie na styl wszystkich stron, na których umieszczono odwołania do zewnętrznego arkusza stylów. Jest to jeden z powodów, dla których arkusze CSS mają tak szerokie możliwości.

Zewnętrzne arkusze stylów są łączone z dokumentem za pomocą połączenia. Aby zastosować do dokumentu zewnętrzny arkusz CSS, możesz skorzystać z dwóch metod. Pierwsza metoda opiera się na imporcie. Oto jej przykład:

<style type=”text/css”>

@import”arkusz_stylow.css”;

</style>

W metodzie alternatywnej definiowane jest połączenie do pliku zewnętrznego zawierającego arkusz CSS:

<link rel=”stylesheet” href=”arkusz_stylow.css” type="text/css">

Wyrażenie to powinno znaleźć się na zewnątrz jakichkolwiek znaczników określających styl, lecz nadal w obrębie znaczników <head></head>. Ta metoda uznana jest za standardową metodę łączenia zewnętrznych arkuszy stylów z dokumentem, jest także metodą domyślną w programie Dreamweaver. Wynika to między innymi z tego, że połączenia jako takie są obsługiwane przez większość przeglądarek. Zawartość pliku .css ma taką samą postać jak w przypadku każdego innego arkusza stylów. Oto przykładowa definicja:

.background { background-color: #0066FF; background-image: url(bg.gif); background-repeat: no-repeat }

p { font-family: Arial, Helvetica, sans-serif; font-size: 12 pt }

HTML a CSS

Rozdział 4., „Praca z tekstem” omawiał między innymi style HTML. Jeśli można stosować zwykły HTML w taki sam sposób jak CSS, to po co w ogóle stosować CSS? Przynajmniej pięć cech odróżnia style CSS od stylów HTML. Są to zalety i wady:

Zalety:

Wady:

Dreamweaver 4 udostępnia co najmniej 65 atrybutów pozwalających precyzyjnie definiować styl, z których można korzystać z poziomu okna dialogowego Style Definition. Rzeczywista liczba możliwych atrybutów jest ograniczana tylko kompatybilnością przeglądarki i specyfikacją CSS, która jest znacznie nowsza niż specyfikacja HTML i stawia sobie styl i projekt jako punkt centralny. Arkusze CSS mają naturę globalną. Reguły zawarte w arkuszu stylów można stosować do każdej strony witryny, a dzięki globalnemu charakterowi edycja arkusza jest wyjątkowo prosta - zmiany w jednym pliku wpływają na wiele dokumentów. Edycja stylów HTML nie jest tak wygodna. Ewentualne modyfikowanie raz zastosowanego stylu HTML wymaga żmudnej pracy nad zmianą definicji stylu w każdym znaczniku i na każdej stronie.

Wadą arkuszy CSS jest brak kompatybilności, czy też raczej częściowa kompatybilność aktualnej specyfikacji CSS z przeglądarkami sieciowymi. Wersje 3 i starsze nie obsługują ich wcale. Wersja 4 obsługuje do pewnego stopnia, a wersja 5.0 i nowsze nareszcie umożliwiają szeroką obsługę arkuszy.

Ponieważ interpretacja stylu zdefiniowanego za pomocą stylów HTML wymaga od przeglądarki tylko znajomości starych, zwykłych znaczników HTML, a nie arkuszy CSS, przeglądarki bez trudu rozumieją takie definicje. Nie ma w tym nic dziwnego, biorąc pod uwagę, że HTML to naturalny język przeglądarki, język, w którym ona powstała. Kolejna wada arkuszy CSS to inna filozofia zapisywania ich kodu. Chociaż ze swej natury proste, arkusze CSS mogą nieco zdezorientować niewprawnego programistę. Jednak efektywne opanowanie zasad ręcznego definiowania reguł arkuszy CSS zawsze owocuje. Warto więc poświęcić im parę chwil. Pamiętaj także, że kaskadowe arkusze stylów udostępniają wiele właściwości, o których w przypadku języka HTML nawet nie może być mowy.

Ćwiczenie 12.1. porównanie stylów HTML i CSS

To ćwiczenie pozwoli Ci poznać różnice między stylami HTML a CSS. Dzięki temu lepiej zrozumiesz użyteczność i potrzebę kaskadowych arkuszy stylów. Będziesz korzystał z plików, które znajdziesz w folderze Ch12 na dysku CD dołączonym do książki.

  1. Skopiuj pliki z foldera Ch12 na swój dysk twardy.

  2. Otwórz plik index.html - znajdziesz go w folderze Excersise 1 umieszczonym w folderze Chapter 12 (jest to folder podrzędny Ch12). Następnie wyświetl paletę HTML Styles korzystając ze skrótu Ctrl+F11.
    W oknie palety wyświetlany będzie styl o nazwie Legal Info. Jeśli nie, kliknij przycisk New Style i utwórz styl HTML stosując takie same ustawienia jak pokazane na rysunku 12.1

  3. Rys. 12.1.

    Jeśli styl HTML nie będzie wyświetlany w oknie palety HTML Styles, musisz utworzyć go sam

    1. Przewiń stronę i zaznacz jej stopkę.

    2. Zastosuj zdefiniowany właśnie styl Legal Info klikając jego nazwę na palecie HTML Styles. W pewnych sytuacjach może być konieczne naciśnięcie przycisku Apply, u dołu palety - to zależy od sposobu skonfigurowania programu Dreamweaver (jeśli zaznaczysz pole wyboru obok tego przycisku, wskazany styl będzie stosowany automatycznie, w przeciwnym razie będziesz musiał nacisnąć Apply - przypis tłum). Efekt końcowy tej operacji pokazuje rysunek 12.2.

    3. Spróbuj teraz cofnąć operację zastosowania stylu do zaznaczonego obszaru nie korzystając z opcji Undo. Jedynym sposobem usunięcia stylu jest pozbycie się go ręczne. Nawet jeśli zastosujesz jeden ze stylów przeznaczonych do usuwania stylu (Clear Selection Style), zaburzysz jedynie formatowanie. Różnica między stylem HTML a CSS staje w tym momencie oczywista.
      Zamknij plik bez zapisywania. Jeśli już go zapisałeś, skopiuj go ponownie z dysku CD. W taki sam sposób jak poprzednio zastosujesz teraz styl Legal Info z palety CSS Styles. Efekt wizualny będzie identyczny jak poprzednio, lecz usunięcie stylu przestanie być problemem.

    4. Otwórz oryginalną kopię pliku index.htm z foldera podrzędnego Exercise 1 foldera Chapter 12 na dysku CD. Otwórz paletę CSS Styles - zastosuj Shift+F11 lub kliknij zakładkę CSS Styles.

    5. Rys. 12.2.

      Jeśli poprawnie wykonałeś zadanie, zastosowanie stylu HTML da taki właśnie efekt

      1. Zauważysz na liście dwa style: background i Legal Info (patrz rysunek 12.3). Styl background definiuje styl tła w taki sposób, by nie było ono składane z kafelków - nim jednak nie będziemy się teraz zajmować. Skup się na stylu Legal Info.

      2. Zaznacz ten sam tekst, co poprzednio (w kroku 2.), a następnie zastosuj styl Legal Info z palety CSS Style - wystarczy po prostu kliknąć nazwę stylu. Być może trzeba będzie zastosować styl naciskając przycisk Apply (patrz przypis w punkcie 4.).

      3. Do zaznaczonego tekstu zostanie zastosowany nowy styl. Rzuć okiem na kod źródłowy, aby sprawdzić, jakie znaczniki zostały dodane. Zobaczysz dwa znaczniki <span>, tak jak na rysunku 12.4.

      4. Spróbuj teraz usunąć styl. Zaznacz ponownie tekst i kliknij na palecie CSS Styles nazwę None. Oto prosty sposób zaznaczenia właściwego fragmentu tekstu: umieść punkt wstawiania w obrębie tekstu, a następnie kliknij na pasku stanu selektor znacznika <span.legalinfo>.
        Jeśli styl został zastosowany poprzez dwa różne znaczniki <span> (lub <div>), zastosuj opisaną metodę do każdego z nich osobno i usuń styl.

      5. Rys. 12.3.

        Na tej stronie zastosowano dwa style

        Rys. 12.4.

        Znacznik <span> umożliwia zastosowanie stylu do zaznaczonego tekstu

        Mam nadzieję, że teraz wiesz na czym polega różnica między stylem HTML a stylem CSS. Myślę również, że już nie trzeba Cię przekonywać, że arkusze CSS mogą znacznie uprościć życie twórcy stron WWW.

        Tworzenie i stosowanie arkuszy stylów

        Podstawowa wiedza na temat arkuszy CSS i zasad ich stosowania to odpowiednia baza, aby spróbować własnych sił w implementacji arkuszy CSS. Wcześniej jednak powinieneś poznać narzędzia i okna programu Dreamweaver umożliwiające efektywne wykorzystanie stylów CSS. Są to: paleta CSS Styles, okna dialogowe New Style i Edit Style Sheet oraz okno Style Definition. Dzięki nim będziesz mógł:

        • Tworzyć nowe style.

        • Stosować na swoich stronach WWW istniejące style.

        • Modyfikować istniejące style.

        • Tworzyć połączenia do plików zawierających arkusze stylów.

        • Usuwać style użyte na stronie WWW.

        Zaczniemy od poznania palety CSS Styles - stanowi ona w programie Dreamweaver podstawowe centrum kontroli nad stylami CSS.

        Paleta CSS Styles

        Paleta CSS Styles, pokazana na rysunku 12.5, to centrum tworzenia, wyboru i obsługi stylu. Aby ją wyświetlić, wybierz pozycję CSS Styles w menu Window lub zastosuj kombinację Shift+F11. Jeśli na stronie WWW osadzono jakieś style CSS, pojawią się one w oknie tej palety. Style utworzone lub dołączone do strony także się tu znajdą.

        Aby zastosować styl z wyświetlanej na palecie listy, zaznacz blok tekstu lub znacznik HTML, do którego styl ma zostać zastosowany. Następnie kliknij nazwę wybranego stylu. Jeśli Dreamweaver potrafi wyświetlić styl w oknie dokumentu, zobaczysz, że zaznaczony fragment tekstu zmieni się odpowiednio do definicji stylu. W przeciwnym razie, aby zobaczyć efekty formatowania, będziesz musiał wyświetlić dokument w kompatybilnej przeglądarce.

        Domyślnie, style są stosowane do zaznaczonego tekstu automatycznie. Jeśli preferujesz metodę ręcznego stosowania stylów, wyczyść na pasku palety CSS Styles pole wyboru obok przycisku Apply. Pamiętaj, że w takim przypadku, aby efekty wybranego stylu stały się widoczne, musisz kliknąć przycisk Apply.

        Z prawej strony przycisku Apply znajdziesz cztery ikony: Attach Style Sheet, New Style, Edit Style Sheet i Delete Style.

        Rys. 12.5.

        Paleta CSS Styles

        Dodatkowa opcja dotycząca arkuszy stylów to opcja Export CSS Styles. Jest ona dostępna w menu podrzędnym Export menu File lub w menu rozwijanym palety CSS Styles (kliknij przycisk ze strzałką z prawej strony palety, aby rozwinąć jej menu). Opcja ta umożliwia przekształcenie stylów osadzonych w zewnętrzne arkusze stylów, które można później stosować także do innych stron WWW.

        Tworzenie nowego stylu

        Naciśnięcie przycisku New Style na pasku palety CSS Style lub przycisku New w oknie dialogowym Edit Style Sheet spowoduje wyświetlenie okna New Style (patrz rysunek 12.6). W nim właśnie definiujesz trzy podstawowe właściwości swojego arkusza stylów: nazwę, typ i obszar definiowania stylu. Nazwa stylu jest szczególnie istotna, ponieważ umożliwi odwoływanie się do stylu na stronach WWW. Oczywiście powinieneś pamiętać o podstawowych zasadach obowiązujących przy definiowaniu nazw.

        Twoja pierwsza decyzja odnośnie tworzonego stylu dotyczy typu stylu. Do wyboru masz możliwość utworzenia zwykłego stylu, zmiany definicji wskazanego znacznika HTML lub zdefiniowanie formatowania określonej kombinacji znaczników. Ta ostatnia może nie być dla Ciebie oczywista, ponieważ nic na ten temat jeszcze nie mówiliśmy. Tym trzem możliwościom odpowiadają w oknie dialogowym New Style te trzy opcje:

        • Make Custom Style (Class) - utworzenie klasy stylu pozwala zastosować definicję formatowania do dowolnego obszaru zaznaczonego tekstu, bez względu na rodzaj otaczających go znaczników HTML, które kontrolują jego wygląd.

        • Redefine HTML Tag - ta opcja umożliwia zmianę definicji znacznika poprzez wprowadzenie innych atrybutów.

        • Use CSS Selector - w tym przypadku możesz na przykład określić atrybuty określonych stanów znacznika <a> (stosowanego do definiowania połączeń).

        Rys. 12.6.

        Zdefiniuj typ tworzonego arkusza

        Zastanów się teraz, gdzie chcesz zdefiniować styl. Jeśli będziesz stosować go w dokumencie, powinieneś zaznaczyć w sekcji Define In przycisk opcji This Document Only. Jeśli jednak definicja stylu mogłaby znaleźć zastosowanie także na innych stronach Twojej witryny, zapisz styl w zewnętrznym pliku. Mówiąc krótko, opcja This Document Only odpowiada utworzeniu arkusza stylów osadzonego w danym dokumencie. Zewnętrzny arkusz stylów (plik o rozszerzeniu nazwy .css) może być stosowany w wielu dokumentach, nawet należących do różnych witryn, ponieważ plik .css rezyduje na serwerze WWW i stamtąd jest odczytywany.

        Po wskazaniu miejsca zdefiniowania i typu stylu, musisz podać nazwę stylu lub wybrać znacznik, ewentualnie selektor stylu CSS (zależy to od wybranego typu). Oto parę porad, które mogą Ci się przydać przy wprowadzaniu tego typu informacji.

        • Nazwa klasy musi rozpoczynać się od kropki, po której pojawia się litera. Reszta nazwy może być kombinacją liter i cyfr. Jeśli zapomnisz o kropce rozpoczynającej nazwę klasy, Dreamweaver wstawi ją automatycznie.

        • Wybrany przez Ciebie znacznik HTML musi być poprawny. Możesz wpisać go w polu tekstowym (lecz pomijając nawiasy) lub wybrać z listy rozwijanej. Do kwestii redefinicji znaczników HTML podchodź z pewną dozą ostrożności - wprowadzone tu zmiany będą miały szerokie i poważne konsekwencje na wszystkich stronach Twojej witryny.

        • Selektor CSS to dowolny, poprawnie zdefiniowany selektor, taki jak na przykład #webStyle. Na liście rozwijanej znajdziesz cztery najczęściej stosowane selektory: a:active, a:link, a:hover i a:visited. Odpowiadają one różnym stanom znacznika <a> (zależnym od użytkownika). Pozwalają one zmienić wygląd i zachowanie połączeń na stronach WWW.

        Po wprowadzeniu podstawowych ustawień tworzonego arkusza CSS, naciśnij OK. Jeśli zdecydowałeś się na przygotowanie zewnętrznego arkusza stylów, pojawi się teraz okno dialogowe umożliwiające zapisanie stylu w wybranym katalogu. Wreszcie wyświetlone zostanie okno Style Definition. Jest to miejsce, w którym można definiować właściwości stylu. Więcej informacji na temat typów i działania stylów znajdziesz w podrozdziale „Style i atrybuty”.

        Edycja stylu

        Edycja istniejącego stylu jest niezwykle prosta. Zacznij od naciśnięcia przycisku Edit Style Sheet w oknie palety CSS Styles. Spowoduje to wyświetlenie okna Edit Style Sheet, takiego jak pokazane na rysunku 12.7. Wybierz w nim styl, który chcesz modyfikować i naciśnij przycisk Edit. Edycja stylu przebiega w taki sam sposób jak proces jego tworzenia w oknie dialogowym Style Definition. Jedyna różnica polega na tym, że pola tego okna są już wypełnione bieżącymi ustawieniami. Przycisk Edit jest stosowany także w przypadku redefiniowanych znaczników - umożliwia wyświetlenie ich właściwości.

        Definiowanie połączeń do zewnętrznych arkuszy stylów

        W przypadku dużych witryn najlepszym rozwiązaniem jest przygotowanie nadrzędnego arkusza stylów, z którego za pośrednictwem zdefiniowanych na stronach witryny połączeń pobierane są podstawowe informacje o sposobach formatowania. Z kolei każdy oddział firmy może mieć własne style w dokumentach lokalnych, które zmienią odpowiednio definicję nadrzędną zawartą w pliku zewnętrznym.

        Istnieją dwa sposoby umożliwiające korzystanie z zewnętrznego arkusza stylów. Można dokonać importu stylu lub zdefiniować połączenie do niego prowadzące. Import jest równoznaczny z pobraniem definicji stylu i umieszczeniem jej w dokumencie. Styl jest więc osadzany w dokumencie i jego edycja jest możliwa z tego właśnie poziomu. W przypadku zaimportowania stylu ewentualne zmiany wprowadzone w jego zewnętrznej kopii nie będą miały wpływu na kopię lokalną, chyba że przeprowadzona zostanie ręczna procedura aktualizacji lub ponowna operacja importu.

        Rys. 12.7.

        Okno dialogowe Edit Style Sheet

        Aby podłączyć zewnętrzny arkusz stylów, kliknij w oknie palety CSS Styles przycisk Attach Style. Znajdź plik zawierający żądany arkusz stylów. Zaimportowany arkusz stylów można następnie stosować w dokumencie.

        Alternatywna droga tworzenia połączenia do zewnętrznego pliku prowadzi przez okno dialogowe Edit Style Sheet. Przycisk Link wywołuje okno dialogowe Link External Style Sheet. Pozwala ono zarówno importować arkusze stylów, jak i tworzyć do nich połączenia.

        Usuwanie arkusza stylów

        Po tym wszystkim, co powiedziane zostało na temat wspaniałości arkuszy stylów, sama myśl o ich usuwaniu wydaje się szalona. A jednak jest to czasami konieczne. Umiejętność całkowitego usunięcia stylu ze stron witryny lub czasowego jego wyłączenia będzie Ci bez wątpienia kiedyś choć raz potrzebna.

        Metodą czyniącą najmniej szkód jest rezygnacja ze stosowania stylu. W tym przypadku połączenie między dokumentem a zewnętrznym arkuszem stylu pozostaje nienaruszone, zachowane zostają także style zdefiniowane lokalnie, rezydujące w sekcji HEAD dokumentu. Zacznij od zaznaczenia elementu lub obszaru tekstu, do którego zastosowano styl. Następnie kliknij w oknie palety CSS Styles opcję None. Spowoduje to usunięcie wszelkich stylów zastosowanych do wskazanego fragmentu.

        Druga metoda polega na całkowitym usunięciu stylu z dokumentu. Nie ma tu znaczenia, czy chodzi o styl osadzony, czy też zewnętrzny - istniejące w sekcji HEAD dokumentu odwołanie do niego zostanie usunięte. Jeśli jednak używasz klas, odwołania do klas umieszczone w obszarze dokumentu pozostaną. Aby się ich pozbyć, musisz zaznaczyć odpowiedni tekst lub element i wybrać w oknie palety CSS Styles opcję None, tak jak poprzednio. Aby definitywnie usunąć styl, naciśnij w oknie palety CSS Styles przycisk Edit Style Sheet, zaznacz styl, którego chcesz się pozbyć i naciśnij przycisk Remove. Ten sam efekt osiągniesz zaznaczając styl w oknie palety CSS Styles i naciskając przycisk Delete Style. Wolę tę pierwszą metodę, ponieważ w tej drugiej styl może zostać chwilowo zastosowany do elementu, który był zaznaczony w dokumencie. Aczkolwiek ta preferencja jest czysto osobista.

        Ćwiczenie 12.2. Tworzenie zewnętrznego arkusza stylów usuwającego podkreślenia połączeń

        W tym ćwiczeniu zdefiniujesz reguły CSS powodujące usuwanie podkreślenia połączeń umieszczonych na stronie WWW. Jest to częste pragnienie projektantów stron, a jednocześnie doskonała okazja, aby przekonać się jak ogromne możliwości tkwią w arkuszach stylów. Zastosujemy pliki umieszczone w folderze podrzędnym Chapter 12 foldera Ch12 na dysku CD dołączonym do książki.

        1. Skopiuj pliki z foldera Chapter 12 na swój dysk twardy. Otwórz w oknie dokumentu programu Dreamweaver plik index.htm ulokowany w folderze Exercise 2.

        2. Wyświetl paletę CSS Styles stosując skrót klawiaturowy Shift+F11. Następnie naciśnij przycisk Attach Style Sheet. Spowoduje to otwarcie okna dialogowego Select Style Sheet. Znajdź w nim plik plainlinks.css (jest on umieszczony w tym samym folderze, co index.htm), zaznacz go i naciśnij przycisk Select (patrz rysunek 12.8).

        3. Spowoduje to automatyczne utworzenie połączenia do pliku stylu, co pokazuje rysunek 12.9. Ten konkretny styl zmienia definicję znacznika <a>. Zapisz plik, wyświetl go w swojej ulubionej przeglądarce i przetestuj połączenia. Jak zauważysz, efekty zmian widoczne są tylko na stronie index.htm.

        4. Kontynuuj i utwórz połączenia do tego arkusza stylów na wszystkich stronach. Wyświetl ponownie stronę index.htm i przejdź na inne strony witryny - zauważysz, że wszystkie wyświetlane na nich połączenia są bez podkreślenia.

        5. Teraz wprowadzisz zmiany w arkuszu stylu zapisanym w pliku plainlinks.css, tak aby połączenia były nadkreślane (kreska pojawi się nad nimi, a nie pod). Upewnij się najpierw, czy paleta CSS Styles jest wyświetlana, a następnie kliknij przycisk Edit Style Sheet. Pojawi się okno dialogowe podobne do tego z rysunku 12.10.

        6. Rys. 12.8.

          Zaznacz plik i naciśnij przycisk Select, aby utworzyć połączenie do bieżącego dokumentu

          Rys. 12.9.

          Zwróć uwagę na kod źródłowy - pojawia się w nim definicja połączenia - oraz na efekt działania zewnętrznego arkusza stylów w dokumencie

          Rys. 12.10.

          Edycja arkusza stylów plainlinks.css

          1. Kliknij dwukrotnie etykietę plainlinks.css, aby wyświetlić listę stylów zawartych w tym pliku. Ponieważ zdefiniowano jedynie styl dla znacznika <a>, tylko taka zawartość pliku pojawi się w sekcji File Contents. Raz jeszcze kliknij dwukrotnie etykietę <a>, aby otworzyć okno dialogowe Style Definition for <a>.

          2. Jak zauważysz, jedynym zdefiniowanym atrybutem jest atrybut Decoration. Została mu przypisana wartość None. Twoim zamiarem jest zmiana tego atrybutu w taki sposób, aby połączenia były wyświetlane jako nadkreślane. Wyczyść więc pole wyboru None i zaznacz pole wyboru Overline. Po tej operacji kliknij OK. Naciśnij przycisk Save, aby zapisać arkusz stylów, a następnie przycisk Done zamykający okno dialogowe Edit Style Sheet.

          3. Teraz finał - wyświetl stronę w ulubionej przeglądarce (polecam przeglądarkę Internet Explorer lub Netscape 6, które gwarantują poprawne działanie). Wprowadzona modyfikacja, jak zapewne zauważyłeś, nie jest uwzględniana w oknie programu Dreamweaver. Jeśli cofniesz się do okna Style Definition, zauważysz, że właściwość oznaczona jest gwiazdką i opatrzona komentarzem informującym, że nie jest wyświetlana ona w oknie dokumentu programu Dreamweaver. Na rysunku 12.11 przedstawiony jest efekt końcowy.

          4. Rys. 12.11.

            Ukończone dzieło. Nie bój się poeksperymentować z innymi kombinacjami stylu połączeń

            Style i atrybuty

            Po zdefiniowaniu nazwy i typu arkusza stylów (i miejsca obowiązywania definicji) lub po wybraniu bieżącego stylu do edycji, wyświetlane jest okno Style Definition dla tego stylu. Okno to pozwala definiować style i określać ich atrybuty. Okno Style Definition ma osiem kategorii czy też grup stylów, które można definiować. Kategorie są pogrupowane zgodnie z kryterium podobieństwa, lecz nic nie stoi na przeszkodzie, aby w jednym arkuszu stylów CSS użyć stylów z różnych kategorii. Oto lista kategorii:

            • Type

            • Background

            • Block

            • Box

            • Border

            • List

            • Positioning

            • Extensions

            Aby wyświetlić ustawienia dla innej kategorii, kliknij po prostu jej nazwę na liście Category. Zawartość okna dialogowego dostosuje się dynamicznie do wskazanej pozycji. Zauważ, że style oznaczone gwiazdką nie są wyświetlane w oknie dokumentu programu Dreamweaver. Aby zobaczyć efekty ich działania, musisz wyświetlić stronę w oknie przeglądarki. Przeanalizujmy teraz poszczególne kategorie i ich ustawienia stylu.

            Kategoria Type

            Ustawienia kategorii Type określają wygląd tekstu (patrz rysunek 12.12). Jednym z częściej implementowanych na dzisiejszych stronach WWW stylów jest styl czcionki o ustalonej szerokości - należy on niewątpliwie do tej kategorii. Jest szczególnie przydatny przy stosowaniu na stronach warstw. Tabela 12.1 prezentuje style tekstu i ich krótkie opis.

            Początek ramki

            Uwaga

            Elementy oznaczone w tabeli gwiazdką (*) to elementy, które nie są w pełni obsługiwane w dzisiejszych przeglądarkach, lub są obsługiwane nieoprawnie.

            Koniec ramki

            Rys. 12.12.

            Style tekstu - kategoria Type

            Tabela 12.1. Style tekstu - kategoria Type

            Ustawienie

            Działanie

            Font

            Umożliwia wybranie stosowanych czcionek. Tekst na stronie WWW zostanie wyświetlony pierwszym z wybranej listy krojów czcionki, o ile jest on zainstalowany na komputerze użytkownika. W przeciwnym razie zastosowana zostanie druga w kolejności czcionka i tak do skutku. Możesz zdefiniować własną listę krojów pisma.

            Size

            Określa rozmiar czcionki w pikselach lub względem otaczającego tekstu. Tak więc, konieczne jest podanie wartości liczbowej i jednostki. Jednostkę wybiera się z listy rozwijanej umieszczonej z prawej strony pola Size. Wielu projektantów woli stosować piksele, ponieważ zapewnia to powtarzalność efektu w różnych przeglądarkach.

            Weight

            Określa grubość czcionki. Można ją zdefiniować w pikselach lub względem otaczającego tekstu. Poeksperymentuj z różnymi ustawieniami i wybierz najlepsze według Ciebie. Zwykłemu tekstowi odpowiada wartość 400, a czcionce pogrubionej 700.

            Style

            Umożliwia zdefiniowanie pisma zwykłego, kursywy i pochyłego.

            Variant

            Pozwala przełączać się między czcionką zwykła a kapitalikami. W przypadku wybrania kapitalików, cały tekst jest wyświetlany wielkimi literami, a wersaliki są nieco większe niż zwykłe litery.*

            Line Height

            Definiuje wysokość wiersza (musisz podać liczbę i jednostkę). Jest to odstęp między kolejnymi wierszami dokumentu, zazwyczaj o wartości kilku pikseli. Odstęp ten można dowolnie zwiększać lub zmniejszać.*

            Case

            Przekształca tekst w tekst pisany wielkimi lub małymi literami, albo wersalikami.

            Decoration

            Umożliwia dodanie podkreślenia, nadkreślenia i przekreślenia oraz efektu migającego tekstu. Tego ostatniego efektu nie nadużywaj. Irytuje on wielu użytkowników. Opcje tej sekcji pozwalają wyłączyć podkreślanie połączeń, czego tak bardzo pragną twórcy stron WWW.

            Color

            Umożliwia wybranie koloru tekstu.

            Kategoria Background

            Ustawienia kategorii Background zaprezentowane na rysunku 12.13 służą wyłącznie do definiowania tła dokumentów. Początkowo tła stron były automatycznie składane z kafelków - identycznych obrazów powtarzających się w pionie i poziomie. Nie dość, że ograniczało to kreatywność, to jeszcze na dodatek działało irytująco po odwiedzeniu iluś tam stron. Dzięki arkuszom CSS znacznie powiększyła się kontrola projektanta nad tłem strony. Tabela 12.2 opisuje poszczególne ustawienia kategorii Background.

            Rys. 12.13.

            Style tła - kategoria Background

            Tabela 12.2. Style tła - kategoria Background

            Ustawienie

            Działanie

            Background Color

            Umożliwia wybranie koloru tła, które będzie stosowane poprzez arkusz stylów CSS.

            Background Image

            Umożliwia wybranie obrazu jako tła, które będzie stosowane poprzez arkusz stylów CSS.

            Repeat

            Umożliwia złożenie tła z powtarzalnych elementów i określenie sposobu zestawiania elementów. Do wyboru są cztery możliwości. Ustawienie no-repeat wymusza jednokrotne wyświetlenie obrazu, bez powtórzeń. Opcja Repeat działa podobnie jak domyślna metoda składania tła z kafelków - obraz jest powtarzany w pionie i w poziomie strony. Opcja Repeat-x powoduje wyświetlenie powtórzeń tylko w poziomie, a Repeat-y - tylko w pionie.

            Attachment

            Pozwala wybrać, czy tło ma przewijać się wraz ze stroną, czy też pozostać nieruchome i niezależne od przewijania strony.

            Horizontal Position

            Umożliwia zdefiniowanie pozycji obrazu wskazanego jako tło (na osi x). Pozycja jest określana względem elementu HTML, do którego styl jest dołączony.

            Vertical Position

            Umożliwia zdefiniowanie pozycji obrazu wskazanego jako tło strony (na osi y). Pozycja jest określana względem elementu HTML, do którego styl jest dołączony.

            Kategoria Block

            Ustawienia kategorii Block (pokazane na rysunku 12.14) dotyczą formatowania bloku tekstu. Wśród zawartych tu możliwości są opcje pozwalające zmieniać odstępy między wyrazami i literami oraz ustawienia wcięcia - a więc są to rzeczy, których zwykły HTML po prostu nie udostępnia. Tabela 12.3 opisuje funkcje poszczególnych ustawień.

            Rys. 12.14.

            Style bloku tekstu - kategoria Block

            Tabela 12.3. Style bloku tekstu - kategoria Block

            Ustawienie

            Działanie

            Word Spacing

            Umożliwia określenie odstępów między wyrazami. Jednostką domyślną jest em. Można stosować zarówno wartości dodatnie, jak i ujemne.*

            Letter Spacing

            Umożliwia określenie odstępów między poszczególnymi literami. Jednostką domyślną jest em. Można stosować zarówno wartości dodatnie, jak i ujemne.*

            Vertical Alignment

            Określa sposób wyrównania w pionie. Można zastosować wartości z listy rozwijanej lub wprowadzić wartość procentową.

            Text Align

            Definiuje sposób wyrównania tekstu. Możliwości są następujące: left (do lewego marginesu), right (do prawego marginesu), center (wycentrowanie) i justify (wyjustowanie).

            Text Indent

            Definiuje głębokość wcięcia pierwszego wiersza tekstu.

            Whitespace

            Określa sposób traktowania odstępów i tabulacji. Ustawienie Pre zachowuje odstępy, podobnie jak znacznik <pre> języka HTML. Opcja Nowrap powoduje zawijanie tekstu, tylko wówczas gdy wstawiono znacznik <br>.

            Kategoria Box

            Jeśli znane są Ci ustawienia formatowania tabel, ustawienia tej kategorii nie sprawią Ci kłopotu. Mogą być stosowane do różnych elementów strony, lecz głównie są używane do obrazów. W oznaczonym dwoma gwiazdkami komentarzu, który znajdziesz w oknie dla tej kategorii, znajduje się informacja, że efekty niektórych ze stylów pojawią się w oknie dokumentu tylko w przypadku zastosowania tych ustawień do pewnych elementów dokumentu. Na przykład efekty ustawień Float i Clear można przeglądnąć w Dreamweaverze tylko w przypadku obrazów. Poszczególne ustawienia tej kategorii opisuje tabela 12.4.

            Rys. 12.15.

            Style kontrolujące ustawienie elementów na stronie - kategoria Box

            Tabela 12.4. Style kontrolujące ustawienie elementów na stronie - kategoria Box

            Ustawienie

            Działanie

            Width

            Określa szerokość elementu, do którego zastosowano styl.

            Height

            Określa wysokość elementu, do którego zastosowano styl.

            Float

            Powoduje przemieszczenie elementu na lewą lub prawą stronę dokumentu. Jeśli przesuwany element trafi w obszar tekstu, tekst zostanie obłamany wokół niego.

            Clear

            To ustawienie jest stosowane razem z Float. Zapobiega wyświetlaniu elementu w tej samej płaszczyźnie horyzontalnej, w jakiej wyświetlany jest element ruchomy. Ustawienia Float i Clear powinny mieć tą samą wartość. Do wyboru są następujące możliwości: Left, Right, None.

            Padding

            Ustawienia tej sekcji umożliwiają zdefiniowanie odstępu między elementem a obramowaniem lub marginesami. Z każdej strony elementu można zdefiniować inny odstęp (pola Top (od góry), Right (z prawej), Bottom (od dołu) i Left (z lewej)).

            Margin

            Ustawienia tej sekcji umożliwiają zdefiniowanie marginesów między obramowaniem elementu a innymi elementami. Można określić cztery marginesy: Top (górny), Right (prawy), Bottom (dolny) i Left (lewy).

            Kategoria Border

            Ustawienia kategorii Border pokazane na rysunku 12.16 pozwalają skonfigurować i wyświetlić obramowania wokół różnych elementów, takich jak obrazy lub tekst. Są one bardzo użyteczne przy umieszczaniu akapitów tekstu w ramkach. Poszczególne ustawienia tej kategorii opisuje tabela 12.5.

            Rys. 12.16.

            Style obramowania - kategoria Border

            Atrybuty Width i Color można definiować niezależnie dla każdej z krawędzi obramowania (górnej (Top), prawej (Right), dolnej (Bottom) i lewej (Left)). Aby uniknąć powtórzeń, tutaj omówimy tę procedurę tylko raz.

            Tabela 12.5. Style obramowania - kategoria Border

            Ustawienie

            Działanie

            Width

            Umożliwia zdefiniowanie grubości obramowania w oparciu o miarę względną lub liczbową.

            Color

            Umożliwia wybranie koloru krawędzi obramowania.*

            Style

            Pozwala wybrać styl obramowania (dla wszystkich czterech krawędzi). Wśród opcji są: dotted (kropki), dashed (linia przerywana), solid (linia ciągła), double (linia podwójna), groove (pseudo 3D - rowek), ridge (pseudo 3D - linia wypukła), inset (wypukłe) i outset (wklęsłe).

            Kategoria List

            Ta grupa ustawień zaprezentowana jest na rysunku 12.17. Pozwala ona konfigurować listy HTML. Zamiast domyślnych znaków wypunktowania, można zastosować własny znak graficzny. Można tu także określić sposób łamania tekstu pozycji listy. Poszczególne ustawienia tej kategorii opisuje tabela 12.6.

            Rys. 12.17.

            Style listy - kategoria List

            Tabela 12.6. Style listy - kategoria List

            Ustawienie

            Działanie

            Type

            To ustawienia określa typ znaku wypunktowania lub numerowania. Do wyboru są dyski, kółka, kwadraty, liczby dziesiętne, liczby rzymskie pisane małymi i wielkimi literami, małe i wielkie litery.

            Bullet Image

            Jeśli chcesz zastąpić domyślny znak wypunktowania własnym, to pole umożliwia wskazanie ulokowania pliku zawierającego znak.

            Position

            To ustawienia wpływa na sposób łamania tekstu pozycji listy do następnego wiersza. Domyślnie stosowane jest łamanie tekstu względem wcięcia (Outside). Można to zmienić wybierając pozycję Inside - wówczas tekst jest zawijany względem marginesu strony.

            Kategoria Positioning

            Ustawienia tej kategorii zaprezentowane na rysunku 12.18 oferują większą kontrolę i elastyczność nad pozycjonowaniem elementów strony (aczkolwiek tylko w przypadku przeglądarek obsługujących je). Stanowią także podstawę tworzenia warstw (pozwalają zamienić blok tekstu lub zaznaczony tekst w nową warstwę poprzez zastosowanie domyślnego znacznika definiowania warstw - przypis tłumacza). Pozwalają określić dokładnie pozycje elementów względem całej strony lub innego jej elementu. Szczegółowy opis poszczególnych ustawień zawiera tabela 12.7.

            Rys. 12.18.

            Style pozycjonowania - kategoria Positioning

            Tabela 12.7. Style pozycjonowania - kategoria Positioning

            Ustawienie

            Działanie

            Type

            Określa sposób definiowania pozycji elementu. Do wyboru są trzy możliwości: pozycjonowanie bezwzględne (opcja Absolute), względem innego elementu (opcja Relative) i brak pozycjonowania (opcja Static).

            Visibility

            Określa widzialność elementu. Wartość Inherit wskazuje, że widzialność jest taka, jak w określona znaczniku nadrzędnym względem elementu.

            Z-index

            To ustawienia informuje o kolejności ułożenia elementów w stosie. Im większa liczba, tym bliżej „szczytu” stosu znajduje się element.

            Overflow

            Ustawienia tej sekcji definiują miejsce elementu na ekranie (atrybuty Left i Top) oraz jego rozmiary (atrybuty Width i Height).

            Clip

            Ustawienia tej sekcji określają wyświetlaną na ekranie część elementu (atrybuty Top, Right, Bottom i Left).

            Kategoria Extensions

            Ustawienia tej kategorii pokazane na rysunku 12.19, takie jak Filter, są nowe i często radykalne w swej naturze. Należy pamiętać, że są one obsługiwane tylko przez przeglądarkę Internet Explorer. Ich opis znajdziesz w tabeli 12.8.

            Rys. 12.19.

            Style rozszerzeń - kategoria Extensions

            Tabela 12.8. Style rozszerzeń - kategoria Extensions

            Ustawienie

            Działanie

            Page Break

            Wymusza łamanie strony w czasie drukowania przed lub po obiekcie, do którego zastosowano styl.

            Cursor

            Zmienia postać wskaźnika myszki, gdy znajdzie się on nad obrazem kontrolowanym przez styl. Lista możliwości jest bardzo rozbudowana. Niektórzy użytkownicy nie lubią, gdy ktoś zmienia im postać wskaźnika myszki, korzystaj więc z tej możliwości z umiarem.

            Filter

            Umożliwia zastosowanie do obiektu kontrolowanego przez styl efektów specjalnych. Ich natura jest podobna do działania filtrów programu PhotoShop. Spróbuj poeksperymentować z tymi filtrami - niektóre efekty są zadziwiające. Więcej informacji na ten temat znajdziesz pod adresem www.msdn.microsoft.com/workshop/author/filter/reference/reference.asp.

            Podsumowanie

            Ten rozdział dotyczył arkuszy CSS. Wśród podejmowanych tematów znalazła się dyskusja o istocie arkuszy stylów i ich wpływie na możliwości projektowe. Zajmowaliśmy się także poszczególnymi stylami i ich atrybutami. Nauczyłeś się definiować arkusz CSS i stosować go w swoich dokumentach. Wiesz już także, jaka jest różnica między stylem HTML a stylem CSS.

            2 Część I Podstawy obsługi systemu WhizBang (Nagłówek strony)

            2 G:\DREAM_trans\rozdz12.doc



            Wyszukiwarka

            Podobne podstrony:
            Dreamweaver 4 Dla Każdego, ROZDZ14, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, ROZDZ15, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, ROZDZ11, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, ROZDZ07, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, ROZDZ03, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, STR 788, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, ROZDZ22, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, ROZDZ22, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, ROZDZ23, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, ROZDZ00, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, ROZDZ09, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, ROZDZ04, Szablon dla tlumaczy
            Dreamweaver 4 Dla Każdego, ROZDZ01, Szablon dla tlumaczy

            więcej podobnych podstron