Jeśli tylko poświęcisz parę chwil na zastanowienie się nad zasadami funkcjonowania warstw w programie Dreamweaver, natychmiast zauważysz, jak niesamowity wpływ mogą mieć warstwy na powiększenie interaktywności i wygląd strony. Zanim jednak poniesie Cię wyobraźnia, przeczytaj uważnie ten rozdział. Aby efektywnie korzystać z warstw, musisz wiedzieć czym są, jak działają i jakie kwestie natury technicznej wiążą się z ich stosowaniem.
Oto lista tematów omawianych w tym rozdziale.
q Definiowanie warstw
q Określanie wymiarów warstw
q Pozycjonowanie warstw
q Konfigurowanie właściwości warstw
q Warstwy zagnieżdżone
q Właściwości warstw
q Konwersja warstw
q Wprawianie warstw w ruch
W świecie grafiki komputerowej termin „warstwa” określa zazwyczaj technikę układania na sobie obiektów graficznych i tekstowych, w celu uzyskania efektu collage’u lub głębi zdjęcia czy też ilustracji. Po wyeksportowaniu pliku z programu do obróbki grafiki, spreparowany za pomocą warstw obraz zostaje spłaszczony, aby pomniejszyć rozmiar pliku. Dokument oryginalny pozostaje natomiast na dysku twardym projektanta i jest wykorzystywany w przypadku konieczności wprowadzania zmian.
Jeśli takie właśnie miałeś pojęcie o warstwach, czas abyś poznał nowe znaczenie terminu „warstwa”. W programie Dreamweaver warstwy – stanowiące technikę języka DHTML (Dynamic Hypertext Markup Language) – służą wielu innym celom, nie tylko tym, o których wspomnieliśmy wcześniej. Są pomocne w rozwiązywaniu kwestii technicznych, mogą być stosowane jako narzędzie definiowania układu strony, pozwalają na tworzenie animacji – a nie są to wszystkie z możliwych zastosowań.
Przede wszystkim musisz jednak pamiętać, że warstwy są obsługiwane dopiero w przeglądarkach wersji 4 i wyższych. Starsze nie wyświetlą warstw – pojawi się w nich jedynie komunikat o błędzie lub strona zostanie zaprezentowana bez pewnych elementów albo z zaburzonym ich wyrównaniem. Chociaż Dreamweaver udostępnia opcję konwersji warstw w tabele (dzięki czemu strona może zostać poprawnie wyświetlona w starszych przeglądarkach), lecz nie jest to rozwiązanie satysfakcjonujące, jeśli stosowałeś warstwy nakładające się lub inne techniki, których efektu nie da się odtworzyć w tabelach.
Pomimo swoich wad, warstwy umożliwiają uzyskanie interesujących efektów, takich jak behawiory typu show-hide oraz animacje z wykorzystaniem linii czasowych. I w przeciwieństwie do tabel, warstwy można pozycjonować w dowolnym miejscu strony (a tabele domyślnie ustawiają się przy górnym lewym rogu strony).
Behawiory typu show-hide, animacje i specjalne możliwości dotyczące określania pozycji są trudne do uzyskania w przypadku opierania układu strony na tabelach. Jednak tabele są obsługiwane niemal przez wszystkie typy przeglądarek, a w ręku doświadczonego projektanta stron WWW stanowią narzędzie formatowania o wyjątkowych możliwościach.
Jeśli jest możliwość zrealizowania pomysłu projektu przy użyciu tabel, ogranicz się do stosowania tabel i niech Cię cieszy spokój umysłu jaki towarzyszy świadomości, że nie będzie problemu z obsługą Twojego dzieła w żadnej przeglądarce. Jeśli jednak chcesz poeksperymentować z warstwami, lub gdy musisz z nich skorzystać, w programie Dreamweaver masz do dyspozycji narzędzia definiowania i edycji warstw oraz manipulacji nimi – a wszystko bez jednej linii kodu.
W programach do obsługi grafiki warstwy umieszczane są na sobie (stąd termin warstwy). Jednak w przypadku warstw DHTML do nakładania się warstw należy podchodzić z ostrożnością. Dokument zawierający warstwy jest tak wyświetlany, jak pozwala przeglądarka. Jeśli przeglądarka nie jest w stanie zinterpretować lub obsłużyć znaczników stosowanych do tworzenia warstw, postać strony WWW zostanie wypaczona. Obecność warstw nakładających się tylko pogorszy sytuację.
Jeśli jednak korzystasz z nakładania się warstw, weź pod uwagę następujące ostrzeżenia:
q Przetestuj nakładające się warstwy w różnych przeglądarkach i na różnych platformach sprzętowych.
q Zredukuj do minimum liczbę nałożeń warstw. Jeśli jest ona większa niż 10, sam prosisz o kłopoty.
q Umieszczaj na warstwach standardowe elementy, takie jak tekst, obrazy GIF i JPEG oraz tabele. Unikaj stosowania takich, które wymagają modułów dodatkowych lub nie są powszechnie obsługiwane (na przykład obrazów PNG).
q Jeśli na nakładających się warstwach umieszczasz tabele, zadbaj o zastosowanie wyrównania do zawartości poszczególnych komórek (na przykład: w pionie – top, lub w poziomie – left). Stosowanie ustawień domyślnych może spowodować poprzesuwanie się warstw.
Ponieważ jesteś już świadom ryzyka, jakie niesie ze sobą stosowanie warstw, jeśli chcesz je podjąć, możemy przejść dalej i zastanowić się nad tym, co można zrobić z warstwami.
Początek ramki
Uwaga
Po opanowaniu podstaw korzystania z warstw, sięgnij wyżej i spróbuj zdefiniować w obrębie warstwy animację. Informacje na temat animacji znajdziesz w rozdziale 17., „Animacje z liniami czasowymi”. Są tam także ćwiczenia pomocne w definiowaniu animowanych warstw.
Koniec ramki
Aby efektywnie posługiwać się warstwami, musisz znać podstawy. Musisz wiedzieć, jak rysować warstwy, jak je organizować na palecie Layers, jak wstawiać zawartość i jak pozycjonować warstwy na stronie. Te właśnie informacje znajdziesz tutaj. Ponadto, będziesz mógł je sprawdzić w praktyce, wykonując ćwiczenie dołączone na końcu tego podrozdziału.
Warstwę można narysować na istniejącej zawartości, która nie znajduje się na innej warstwie. Można też utworzyć stronę składającą się wyłącznie z warstw. Nie istnieje ograniczenie liczby stosowanych warstw, jednak nie należy zbyt przesadzać z ich mnożeniem, a szczególnie wówczas, gdy się nakładają. Wyświetlenie w przeglądarce strony zawierającej wiele warstw zajmie dużo czasu, a jej przygotowywanie w programie Dreamweaver lwią część zasobów komputera. Oczywiście są tacy, co z sukcesem stosują kilkadziesiąt warstw na jednej stronie. Jednak stanowią oni wyjątek od reguły.
W fazie rysowania warstw należy korzystać z widoku standardowego (Standard View), a nie układu (Layout View). W widoku standardowym otwarty jest dostęp do ikony Draw Layer w kategorii Common na palecie obiektów (patrz rysunek 10.1). Jeśli nie masz dostępu do tej ikony, oznacza to, że powinieneś przełączyć się z widoku układu do standardowego.
Po przełączeniu się do widoku standardowego, można narysować warstwę na stronie. W tym celu skorzystaj z ikony Draw Layer pokazanej na rysunku 10.1 lub wybierz w menu Insert pozycję Layer. Powinieneś korzystać raczej z ikony Draw Layer, bowiem ta metoda daje kontrolę nad rozmiarami tworzonej warstwy. W przypadku wstawiania warstwy z poziomu menu rozmiary warstwy są domyślne.
Rys. 10.1.
Ikona Draw Layer
Podpowiedź
Domyślne rozmiary warstwy można modyfikować, podobnie jak inne domyślne ustawienia dla warstw. Wybierz pozycję Preferences w menu Edit, a w oknie dialogowym Preferences wybierz kategorię Layers.
Wstawiona przez Ciebie warstwa ma postać prostokąta. Jeśli ją zaznaczysz, wokół pojawi się czarne obramowanie zaopatrzone w uchwyty (są to uchwyty pozwalające zmieniać rozmiary). Warstwa, która nie jest zaznaczona ma z kolei uchwyt selekcji (zakładkę wyświetlaną w lewym górnym rogu). Wybierz w menu Window pozycję Layers lub naciśnij klawisz F2, aby wyświetlić paletę Layers, w której wstawiona warstwa będzie już umieszczona. Rysunek 10.2 prezentuje dwie warstwy. Warstwa zaznaczona prezentowana jest na liście palety Layers czcionką pogrubioną.
Rys. 10.2.
Tworzenie dokumentu zawierającego warstwy
Warto wstawianym warstwom nadawać nazwy, bowiem ułatwia identyfikację warstw na liście palety Layers. Kliknij dwukrotnie domyślną nazwę wyświetlaną na liście palety Layers (zostanie ona zaznaczona) i zastąp ją własnym tekstem. Możesz także zaznaczyć warstwę klikając jej zakładkę (lub krawędź) i zdefiniować nazwę w polu Name inspektora Property.
Jeśli chcesz usunąć warstwę, zaznacz ją i naciśnij klawisz Delete lub Backspace. Aby zaznaczyć kilka warstw, wciśnij klawisz Shift i klikaj żądane warstwy. Aby je usunąć, także użyj klawiszy Delete lub Backspace.
Domyślnie, Dreamweaver tworzy warstwę stosując znacznik <DIV>. Przełącz się do widoku kodu (F10), aby zobaczyć kod źródłowy definiujący warstwę. Będzie on przypominał przykładowy kod, zaprezentowany poniżej. Kod ten umieszczany jest w sekcji BODY:
<div id=”Layer1” style=”position:absolute; width:200px; height:115px”>Zawartość warstwy</div>
Inne znaczniki HTML także umożliwiają definiowanie warstw. Oto one: <SPAN>, <ILAYER> i <LAYER>. Znaczniki <DIV> i <SPAN> są interpretowane przez wersje 4 obu przeglądarek: Netscape i Internet Explorer. Znaczniki <ILAYER> i <LAYER> pozwalają zdefiniować warstwy wyświetlane tylko przez przeglądarki Netscape 4.x.
Aby zastąpić znacznik domyślny innym, wybierz w menu Edit pozycję Preferences, a kategorii Layers okna dialogowego Preferences wybierz znacznik z listy Tag.
Chociaż czasami istnieją powody, aby definiować warstwy niewidzialne, na razie zakładamy, że będziemy umieszczać na warstwie jakąś zawartość, której nie zamierzasz ukrywać przed odbiorcami strony.
Umieszczanie zawartości na warstwie to prosta operacja. Kliknij warstwę, rozwiń menu Insert i wybierz wstawiany element. Na warstwie możesz także umieszczać tekst lub inne elementy multimedialne, korzystając ze Schowka lub palety Assets. Ta ostatnia udostępnia zasoby, które można po prostu przeciągać na warstwę.
Najtrudniejszą fazą operacji jest czasami zaznaczenie samej warstwy. Jeśli zdefiniowano na stronie kilka warstw, łatwo się pogubić. Z tego względu przyzwyczaj się do stosowania palety Layers (patrz rysunek 10.3). Jeśli wybierasz nazwę warstwy z listy palety Layers, warstwa zostanie automatycznie zaznaczona w oknie dokumentu i będzie wyświetlana na pierwszym planie.
Są także inne metody zaznaczania warstw. Można kliknąć uchwyt selekcji warstwy, obramowanie lub niewidzialny element symbolizujący warstwę (żółta ikona).
Rys. 10.3.
Korzystaj z palety Layers przy zaznaczaniu warstw
tu chyba inny rysunek?
Aby zapobiec nakrywaniu się warstw w dokumencie, zaznacz w oknie palety Layers (wywołasz ją klawiszem F2) pole wyboru Prevent Overlaps.
Za jednym zamachem możesz zaznaczyć kilka warstw. W tym celu wciśnij klawisz Shift i klikaj nazwy warstw na liście palety Layers, które chcesz zaznaczyć. Możesz także klikać same warstwy. Ostatnia z zaznaczonych warstw będzie miała pełne uchwyty w kolorze czarnym. W przypadku pozostałych zaznaczonych warstw uchwyty będą puste. Ta opcja jest przydatna, gdy chcesz dla kilku warstw zdefiniować identyczne rozmiary lub pozycje.
Po zdefiniowaniu warstwy i umieszczeniu na niej zawartości, przyszedł czas na określenie jej rozmiarów. Jeśli umieściłeś na warstwie na przykład obraz, rozmiary warstwy możesz dokładnie dopasować do rozmiarów obrazu.
Na rysunku 10.4 przedstawione są dwie nakładające się warstwy ulokowane w centrum strony. Warstwa spodnia jest odrobinę większa niż warstwa górna, spoczywająca na niej. Powstaje więc coś w rodzaju ramki obrazu. Do obu warstw oraz do samej strony zastosowano jednolity kolor tła.
Rys. 10.4.
Nakrywające się warstwy mogą utworzyć efekt obramowania. Przetestuj wyświetlanie takich warstw w różnych przeglądarkach
Jeśli chcesz rozmiary warstwy zdefiniować precyzyjnie, powinieneś skorzystać z inspektora Property (Ctrl+F3). Zaznacz warstwę, a inspektor Property wyświetli jej właściwości. Ich szczegółowym omówieniem zajmiemy się w dalszej części rozdziału. Na rysunku 10.4 warstwa zawierająca obraz ma wymiary 228x158 pikseli (zwróć uwagę na pola W i H inspektora Property).
Aby zdefiniować rozmiary warstwy korzystając z inspektora Property:
Rozmiary warstwy można zmieniać korzystając z uchwytów. W ten sposób można zgrubnie powiększyć lub pomniejszyć warstwę, a do precyzyjnego dopasowania wykorzystać pola W i H inspektora Property (Ctrl+F3).
Ręcznie także możesz dopasować rozmiar warstwy z dokładnością do jednego piksela. Zaznacz warstwę, a następnie wciśnij klawisz Ctrl i naciskaj klawisze ze strzałkami w żądanym kierunku – z każdym naciśnięciem rozmiar będzie zmieniany o 1 piksel.
Jeśli kilku warstwom chcesz nadać te same rozmiary, sprawa jest prosta. Zaznacz żądane warstwy korzystając z pomocy klawisza Shift (wciśnij klawisz Shift i klikaj warstwy lub ich nazwy na palecie Layers). Następnie:
q Wybierz w menu Modify pozycję Align, a z menu podrzędnego pozycję Make Same Width lub Make Same Height (patrz rysunek 10.5).
q Podaj w polach W i H inspektora Property wartości atrybutów (w pikselach) (patrz rysunek 10.5).
W przypadku posługiwania się warstwami ważne jest, aby zrozumieć zasady pozycjonowania warstw w dokumencie. Pozycję warstwy w dokumencie określają współrzędne X,Y, których wartości możesz wyświetlić w inspektorze Property.
Aby zmienić pozycję warstwy, wystarczy przesunąć warstwę w nowe ulokowanie na ekranie. W tym celu zaznacz ją (korzystając z uchwytu zaznaczania w górnym lewym rogu) i przeciągnij w wybrane miejsce. Zwolnij klawisz myszki, aby zatwierdzić nową pozycję.
Rys. 10.5.
Po zaznaczeniu kilku warstw, inspektor Property wyświetli ustawienia pozwalające zmienić jednocześnie rozmiary tych warstw
Możesz zaznaczyć warstwę i przesuwać ją o jeden piksel korzystając z klawiszy ze strzałkami. Alternatywnie, możesz zdefiniować nową pozycję warstwy korzystając z pól L i T inspektora Property.
Wyrównanie można zastosować do kilku warstw jednocześnie. Zaznacz warstwy i wybierz w menu Modify pozycję Align, a następnie wskaż sposób wyrównania w menu podrzędnym. Warstwy zostaną wyrównane względem ostatniej z zaznaczanych. Pamiętaj, że przesunięte zostaną także warstwy zagnieżdżone czy podrzędne.
Inspektor Property umożliwia precyzyjne definiowanie pozycji warstwy. Pola L (left – lewa strona) i T (top - góra) staną się dostępne po zaznaczeniu warstwy. Wpisz w nie wartości określające współrzędne warstwy. Początek układu współrzędnych znajduje się w lewym górnym rogu strony.
Jeśli na przykład warstwa ma „stapiać się” z lewą i górną krawędzią okna przeglądarki, obie współrzędne powinny mieć wartość 0. Aby przesunąć ją w dół i (lub) w prawo, podaj przesunięcie L i T w pikselach. Współrzędnym możesz nadać także wartości ujemne. W tym przypadku część warstwy będzie znajdować się poza wyświetlanym obszarem strony.
Na rysunku 10.6 warstwa zawierająca obraz kalifornijskich lasów czerwonych styka się z górną i lewą krawędzią okna przeglądarki. Na rysunku 10.7 ta sama warstwa została przesunięta o 240 pikseli w dół i zajmuje teraz dolną część dokumentu.
Rys. 10.6.
Warstwa dotyka krawędzi okna; jej współrzędne wynoszą 0,0
Rys. 10.7.
Nowe współrzędne warstwy to 0,240
Jeśli wolisz uniknąć posługiwania się współrzędnymi, możesz skorzystać z siatki. Włącz opcję Snap to Grid, a wówczas przy przeciąganiu warstwy, zostanie ona przyciągnięta do najbliższego węzła siatki po zwolnieniu klawisza myszki. Aby wyświetlić siatkę, wybierz w menu View pozycję Grid, a następnie pozycję Snap to Grid w menu podrzędnym. Jak pamiętasz, siatka to narzędzie pomocnicze i nie jest wyświetlana w oknie przeglądarki. Więcej informacji na jej temat znajdziesz w rozdziale 7., „Zagadnienia związane z projektowaniem stron WWW”.
W tym ćwiczeniu utworzysz dokument zawierający dwie nakładające się warstwy. Dokument ten to część witryny Weaving, nad którą pracę rozpocząłeś w rozdziale 8., „Definiowanie układu strony za pomocą tabel”.
Jak pamiętasz, we wcześniejszej części tego rozdziału wspominaliśmy o ryzyku związanym z nakładaniem się warstw. Tutaj to ryzyko jest jednak minimalne. Warstwy są tylko dwie, więc ryzyko jest znacznie mniejsze niż w przypadku wielu warstw.
Zacznij od otwarcia pliku DYES.HTML znajdującego się w folderze Ch10 na dysku CD dołączonym do książki.
Wolf-1