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


Rozdział 10. Korzystanie z warstw

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.

Parę słów o warstwach

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.

Warstwy a tabele

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.

Czy warstwy powinny się nakładać?

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:

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

Podstawowe informacje na temat warstw

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.

Rysowanie warstw

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

Początek ramki

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.

Koniec ramki

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.

Usuwanie warstw

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.

Początek ramki

Kod HTML i warstwy

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.

Koniec ramki

Umieszczanie zawartości na warstwie

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[Author:r]

Początek ramki

Podpowiedź

Aby zapobiec nakrywaniu się warstw w dokumencie, zaznacz w oknie palety Layers (wywołasz ją klawiszem F2) pole wyboru Prevent Overlaps.

Koniec ramki

Początek ramki

Uwaga

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.

Koniec ramki

Definiowanie rozmiarów warstw

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 --> [Author:r]

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:

  1. Zaznacz warstwę, której rozmiary chcesz określić, klikając jej nazwę na liście palety Layers.

  2. Podaj w polach W i H inspektora Property (Ctrl+F3) szerokość i wysokość warstwy w pikselach.

  3. Dreamweaver zastosuje do warstwy nowe rozmiary. Kliknij w obszarze strony (lecz poza warstwą), aby zmodyfikowana warstwa powróciła na swoje miejsce między innymi warstwami.

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).

Początek ramki

Podpowiedź

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.

Koniec ramki

Jednoczesna zmiana rozmiarów kilku warstw

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:

Pozycjonowanie warstw

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.

Przesuwanie warstw

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.

Początek ramki

Podpowiedź

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.

Koniec ramki

Określanie pozycji warstwy przy pomocy inspektora Property

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”.

Ćwiczenie 10.1. Tworzenie warstw i określanie ich pozycji

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.

  1. Otwórz paletę obiektów (Ctrl+F2), kliknij ikonę Draw Layer i narysuj na stronie warstwę. Wymiary warstwy nie są w tej chwili istotne.

  2. Otwórz paletę Layers (F2) i kliknij dwukrotnie warstwę o nazwie layer1. Zmień jej nazwę na colorweel.

  3. Kliknij warstwę. Wybierz w menu Insert pozycję Image i wybierz z foldera Ch10 obraz weel.

  4. Zaznacz warstwę klikając jej obramowanie lub nazwę na liście palety Layers. Korzystając z inspektora Property (Ctrl+F3) zdefiniuj wymiary warstwy. Wpisz w polu W wartość 642 oraz taką samą wartość w polu H (powstanie idealny kwadrat, a stosowana jednostka miary to piksele). Zwróć uwagę, że wymiary 642x642 to także wymiary obrazu.

  5. Nadal posługując się inspektorem Property przesuń warstwę w górę strony. Atrybutowi L przypisz wartość 70, a atrybutowi T wartość 0.

  6. Kliknij poza obszarem warstwy, aby usunąć z niej zaznaczenie.

  7. Narysuj drugą warstwę stosując narzędzie Draw Layer z palety obiektów. Nie martw się na razie jej pozycją.

  8. Kliknij na liście palety Layers nazwę layer2 i zmień jej nazwę na swatches.

  9. Umieść punkt wstawiania w obszarze nowej warstwy. Wybierz w menu Insert pozycję Table i zdefiniuj ustawienia w oknie dialogowym Insert Table, zgodnie z rysunkiem 10.8. Zwróć uwagę, że choć umieścić tabelę na warstwie, odwrotnie jest to niemożliwe. Innymi słowy, nie da się wstawić warstwy do tabeli. Warstwa ulokuje się nad tabelą, a strona nie będzie poprawnie wyświetlana w żadnej przeglądarce.

  10. Rys. 10.8.

    Oto atrybuty Twojej tabeli

    1. Zaznacz myszką komórki tabeli. W inspektorze Property przypisz atrybutowi Horz wartość Left, a atrybutowi Vert wartość Top. Jeśli nie potrafisz zaznaczyć wszystkich komórek na raz, możesz stosować wyrównanie do każdej komórki z osobna, klikając je kolejno i definiując ustawienia.

    2. W folderze Ch10 na dysku CD znajdziesz zestaw pięciu obrazów, które należy wstawić do tabeli. Rozpoczynając od pierwszego wiersza wstaw do kolejnych komórek obrazy w następującej kolejności:
      DYEHEAD.GIF
      RED.GIF
      GREEN.GIF
      BLUE.GIF
      YELLOW.GIF
      Rysunek 10.9 prezentuje ukończoną tabelę - możesz porównać ją z efektami własnej pracy.

    3. Po wstawieniu wszystkich obrazów do właściwych komórek tabeli, zdefiniuj za pomocą ustawień inspektora Property obramowanie tabeli przypisując mu wartość 0 i zastosuj wyrównanie do lewego marginesu (left).

    4. Określ teraz wymiary warstwy swatches. Zaznacz ją klikając nazwę na liście palety Layers lub obramowanie. W polach W i H inspektora Property wpisz wartości 312 i 411 (w pikselach).

    5. Zmień pozycję warstwy (warstwa nadal musi być zaznaczona) wpisując w polach L i T inspektora Property wartości 15 i 0.

    6. Zapisz plik i obrazy na swoim dysku twardym, a następnie wyświetl dokument w przeglądarce.

    Dokument, który powstał w tym ćwiczeniu zawiera dwie warstwy. Na pierwszej umieściliśmy obraz, na drugiej, która nakłada się na pierwszą, wstawiliśmy tabelę. W komórkach tabeli wkleiliśmy obrazy.

    Rysunek 10.9 prezentuje ukończony dokument w oknie programu Dreamweaver. Rysunek 10.10 pokazuje wygląd tego dokumentu w przeglądarce Netscape 4. Nie ma żadnych różnic - to dobra nowina! Lecz raz jeszcze powtarzam - dokumenty takie jak ten, zawierający nakładające się warstwy, powinny być testowane w różnych przeglądarkach i na różnych platformach sprzętowych.

    Rys. 10.9.

    Strona zawierająca warstwy w oknie programu Dreamweaver 4

    Rys. 10.10.

    Ta sama strona w oknie przeglądarki Netscape Navigator 4

    Definiowanie właściwości warstwy

    Dotychczas inspektor Property był Ci pomocny przy definiowaniu rozmiarów warstwy i jej pozycji. Jego możliwości są jednak dużo większe. Znajdziesz w nim ustawienia widzialności warstwy, porządku wyświetlania warstw oraz koloru tła lub wyboru obrazu jako tła. Możesz także umieścić w nim instrukcje na wypadek, gdyby zawartość warstwy przekroczyła rozmiary warstwy.

    Atrybuty znaczników <DIV> i <SPAN>

    Jest wielce prawdopodobne, że będziesz definiował warstwy korzystając ze znaczników <DIV> i <SPAN>. Są to bowiem znaczniki obsługiwane zarówno przez przeglądarkę Netscape Navigator 4.x, jak i przez Internet Explorera 4.x. Pamiętaj, że znaczniki <LAYER> i <ILAYER> są specyficzne dla Navigatora 4.x i nie będą interpretowana przez Internet Explorera.

    Przeanalizujmy szczegółowo atrybuty znaczników <DIV> i <SPAN>. Wróć do rysunku 10.3, jeśli chcesz sobie przypomnieć wygląd inspektora Property dla warstwy zdefiniowanej za pomocą tych znaczników.

    Layer ID

    Layer ID to nazwa warstwy. Możesz się do niej odwoływać w skryptach manipulujących warstwami. Jeśli zmienisz identyfikator warstwy w inspektorze Property, zmieni się on także na liście palety Layers.

    L i T

    Oba atrybuty definiują współrzędne zaznaczonej warstwy. L określa współrzędną X, a T współrzędną Y. Liczby L i T wskazują położenie lewego górnego rogu warstwy względem lewego górnego rogu dokumentu.

    W i H

    Te atrybuty określają szerokość i wysokość warstwy.

    Z-index

    Atrybut Z-index wskazuje kolejność warstw w stosie. Warstwa o najwyższej wartości atrybutu Z-index znajduje się na wierzchu stosu. Najmniejsza wartość atrybutu Z-index (a mogą być one nawet ujemne) oznacza warstwę na spodzie stosu. Jeśli zmienisz wartość tego atrybutu w inspektorze Property, zmieni się on także na liście palety Layers (kolumna Z).

    Korzystając z palety Layers można zmieniać kolejność wyświetlania warstw. Aby jedną warstwę przesunąć nad inną:

    1. Zaznacz na liście palety Layers nazwę przesuwanej warstwy.

    2. Kliknij i przeciągnij nazwę do innej pozycji na liście (wyżej lub niżej).

    3. Pojawienie się czarnej kreski oznacza, że można zwolnić klawisz myszki.

    Możesz to zadanie wykonać inaczej. Kliknij w kolumnie Z palety Layers Z-index dla przesuwanej warstwy i wpisz nową wartość.

    VIS

    Ten atrybut określa widzialność warstwy. W programie Dreamweaver domyślną wartością atrybutu Visibility jest default. Dla większości przeglądarek oznacza to, że warstwa powinna być widoczna. Jeśli nie chcesz ryzykować, że nie zostanie ona wyświetlona, zaznacz warstwę i w inspektorze Property wybierz z listy VIS pozycję Visible. Aby ukryć warstwę, wybierz pozycję Hidden. Ta wartość jest często stosowana przy korzystaniu z behawiorów typu show-hide.

    Zwróć uwagę na postać ikony oka w oknie palety Layers. Gdy atrybut VIS ma wartość Inherit, ikona oka nie jest wyświetlana. Pojawia się natomiast po wybraniu wartości Visible. Zdefiniowanie wartości Hidden powoduje pojawienie się ikony zamkniętego oka.

    W przypadku warstw zagnieżdżonych można korzystać z wartości Inherit, aby wskazać, że warstwa podrzędna powinna mieć identyczną widzialność jak warstwa nadrzędna. W punkcie „Warstwy zagnieżdżone”, w dalszej części tego rozdziału, znajdziesz inne informacje na temat relacji warstwa nadrzędna-warstwa podrzędna.

    BG Image i BG Color

    Podobnie jak tabele, warstwy mogą mieć kolorowe tło, można też zastosować jako ich tło obrazy. Atrybuty BG Image i BG Color umożliwiają przypisanie obrazu lub koloru jako tła warstwy. Jeśli tego nie chcesz, po prostu pozostaw te pola puste. Zaznaczając kilka warstw, możesz jednocześnie do wszystkich zastosować ten sam kolor tła lub obraz. Oczywiście w tym przypadku także korzystasz z pól BG Image i BG Color inspektora Property.

    Jeśli wybierzesz jako tło warstwy obraz, tło zostanie złożone z kafelków, czyli powtórzeń obrazu. Aby tego uniknąć, wstaw na warstwę obraz w sposób opisany w ćwiczeniu 10.1. Inna metoda, to zastosować jako tło nieco większy obraz, a wymiary warstwy dopasować do wymiarów obrazu - wówczas nie będzie powodu do składania tła z części.

    Tag

    Pole Tag inspektora Property wskazuje typ tworzonej warstwy. Wybierz z listy <DIV> lub <SPAN>, aby warstwy były obsługiwane w obu typach przeglądarek: Netscape Navigator i Internet Explorer, w wersjach 4.x.

    Overflow

    Jeśli objętość wstawianej zawartości przekracza wymiary warstwy, opcja Overflow określa sposób reakcji na taką sytuację. Rola tego ustawienia jest istotna, bowiem różne przeglądarki różnie wyświetlą zawartość warstw. Może się zdarzyć, że dla jednej i tej samej strony w jednych przeglądarkach atrybut Overflow nie będzie potrzebny, a w innych nie będzie się można bez niego obyć. Oto jego możliwe wartości:

    Clip

    Jeśli chcesz pokazać tylko część zawartości warstwy a ukryć pozostałość, skorzystaj z atrybutu Clip. W polach L (z lewej), R (z prawej), T (od góry) i B (od dołu) podaj w pikselach odległości od krawędzi warstwy. Wartości te definiowane są względem warstwy, a nie strony.

    Atrybut ten jest rzadko używany. Może być przydatny w przypadku stosowania linii czasowych, ponieważ umożliwia uzyskanie efektu znikania i pojawiania się poprzez zwiększenie wartości atrybutu Clip w kolejnych ramkach.

    Początek ramki

    Uwaga

    Być może kusi Cię stosowanie znaczników <FRAME> i <IFRAME> (warstwy Netscape) ze względu na ich ciekawe możliwości, takie jak na przykład możliwość wyświetlenia innego dokumentu HTML na warstwie.

    Jeśli tak, to musisz wiedzieć, że znaczniki <FRAME> i <IFRAME> nie są często stosowane, ponieważ nie są obsługiwane w Netscape 6.

    Koniec ramki

    Jeszcze o warstwach

    Umiejętność rysowania i pozycjonowania warstw nie wystarczy, aby z nich wydajnie korzystać. Warto, abyś poznał narzędzia, które są pomocne przy manipulowaniu warstwami. W tym rozdziale zajmiemy się zagnieżdżaniem warstw, definiowaniem ich właściwości i kolejności wyświetlania, a także zmianą atrybutu widzialności warstwy.

    Warstwy zagnieżdżone

    Zasada zagnieżdżania warstw jest taka sama, jak tabel. Warstwa zagnieżdżona jest po prostu warstwą umieszczoną na innej warstwie (na warstwie nadrzędnej).

    Przemieszcza się wraz z warstwą nadrzędną i może dziedziczyć jej widzialność.

    Musisz mieć świadomość, że w wielu przeglądarkach warstwy zagnieżdżone będą wyświetlane nie całkiem tak, jak to zaplanował projektant strony. Na przykład w pewnych wersjach Netscape wyświetlona zawartość strony zostanie ograniczona do zawartości pierwszej z warstw zagnieżdżonych.

    W oknie palety Layers warstwy zagnieżdżone umieszczane są pod nazwą warstwy nadrzędnej (patrz rysunek 10.11).

    Rys. 10.11.

    Warstwa o nazwie hideme jest zagnieżdżona na warstwie o nazwie colorweel

    Korzystając z tej palety także można zagniżdżać warstwy. Otwórz paletę Layers (F2), zaznacz na liście nazwę warstwy zagnieżdżanej, wciśnij klawisz Ctrl i przeciągnij ją na warstwę, która ma być warstwą nadrzędną. Gdy wokół nazwy pojawi się prostokątne obramowanie, zwolnijklawisz myszki. Warstwę zagnieżdżoną można także utworzyć z poziomu menu. Kliknij warstwę i wybierz w menu Insert pozycję Layer lub przeciągnij ikonę Layer z palety obiektów. Jeśli techniki te nie są skuteczne, wyświetl okno dialogowe Preferences (pozycja Preferences w menu Edit) i wyświetl ustawienia kategorii Layer, anastępnie sprawdź czy zaznacznaczono pole wyboru Nesting: Nest When Created Within a Layer.

    Początek ramki

    Podpowiedź

    Nawet jeśli pole Nesting: Nest When Created Within a Layer nie jest zaznaczone, możesz narysować warstę zagnieżdżoną, jeśli w trakcie rysowania wciśniesz klawisz Alt.

    Koniec ramki

    Właściwości warstwy

    Jeśli korzystasz z warstw w stały, określony sposób, warto już na wstępie dostosować właściwości warstw do swoich potrzeb. W ten sposób uchronisz się przed koniecznością konfigurowania ustawień przy każdorazowym wstawianiu warstwy.

    Aby zmienić właściwości warstwy, wybierz w menu Edit pozycję Preferences, a w oknie dialogowym Preferences wyświetl ustawienia kategorii Layers. Okno dialogowe Preferences zaprezentowane zostało na rysunku 10.12, natomiast jego ustawienia opisane są w tabeli 10.1.

    Rys. 10.12.

    Definiowanie ustwień dla warstwy

    Tabela 10.1. Właściwości warstwy

    Opcja

    Funkcja

    Tag

    Kontroluje typ znacznika zastosowanego do utworzenia warstwy. Najlepszy wybór to <DIV> lub <SPAN>, bowiem te znaczniki są obsługiwane w przeglądarkach wersji 4 i wyższych Netcape Navigator i Internet Explorer. Znaczniki <LAYER> i <ILAYER> działają tylko w Netscape Navigatorze 4.x.

    Visibility

    Określa widzialność warstwy. Możliwe wartości to default, visible, hidden i inherit.

    Width i Height

    Te ustawienia pozwalają zmienić domyślne rozmiary warstwy.

    Background Color

    Korzystając z próbnika kolorów można wskazać kolor tła warstwy.

    Background Image

    Kliknij przycisk Browse i wybierz obraz, który posłuży jako tło warstwy.

    Nesting

    Zaznacz to pole wyboru, aby umożliwić tworzenie warstw zagnieżdżonych. Warstwę zagnieżdżoną można utworzyć nawet wówczas, gdy opcja jest wyłączona. Wystarczy w trakcie rysowania warstwy wcisnąć klawisz Alt.

    Netscape 4 Compatibility

    Umożliwia korektę problemu z pozycjonowaniem warstw, który pojawia się w przeglądarkach Netscape wersji 4 i wyższych po wstawieniu skryptu JavaScript do sekcji HEAD dokumentu. Jeśli umieszczono w niej skrypt, przy każdej zmianie rozmiarów okna, strona będzie ponownie ładowana. Jest to konieczne, aby warstwy zostały ponownie umieszczone na swoim miejscu.

    Konwersja warstw w tabele

    Jeśli zdefiniowano w dokumencie warstwy, które nie zawierają warstw zagnieżdżonych oraz nie nakrywają się, można je przekształcić w tabele. W ten sposób możesz przygotować dokument pod kątem przeglądarek, które nie obsługują warstw. Konwersja odwrotna także jest możliwa - tak więc z tabel możesz utworzyć warstwy. Wiedz jednak, że tego typu manipulacje znacznie komplikują kod, a to z kolei opóźni jego interpretację przez przeglądarkę. Jeśli chcesz mieć większą swobodę przy definiowaniu układu strony, skorzystaj z widoku układu (Layout View).

    Aby wyświetlić opcje konwersji, zaznacz konwertowany obiekt (tabelę lub warstwę), wybierz w menu Modify pozycję Convert, a następnie wybierz z menu podrzędnego typ kowertowanego obiektu. Rysunki 10.13 i 10.14 prezentują wynikowe okna dialogowe.

    Pamiętaj,aby zapisać kopię strony, na wypadek gdybyś nie był zadowolnony z rezultatu! W takiej sytuacji możesz też cofnąć ostatnie czynności korzystając ze skrótu klawiaturowego Ctrl+Z.

    Rys. 10.13.

    Okno dialogowe konwersji warstw w tabele

    Rys. 10.14.

    Okno dialogowe konwersji tabel w warstwy

    Wprawianie warstw w ruch

    Kiedy już wiesz jak korzystać z warstw, nie musisz być programistą, aby tworzyć animacje, przewijany tekst oraz obiekty, które można przeciągać w nowe ulokowania.

    Posługując się warstwami musisz jednak pamiętać o różnym ich interpretowaniu przez przeglądarki - tak więc nie oczekuj identycznych rezultatów.

    Możesz wykorzystać warstwy oraz ich twórczy potencjał w wielu sytuacjach. Na przykład w sieciach lokalnych, gdy wiesz na pewno, że większość użytkowników korzysta z przeglądarek Internet Explorer wersji 4 i wyższych, prawdopodobieństwo problemów technicznych wywołanych obecnością warstw jest bardzo niewielkie. Innym przykładem może być specjalizowana strona WWW, do której dostęp ma tylko kilka komputerów. W takim przypadku wiadomo jakie przeglądarki będą stosowane, co pozwala kreatywnie wykorzystać warstwy.

    Wiedząc jakiego oprogramowania używa użytkownik, masz większą kontrolę nad warstwami i możesz lepiej wykorzystać ich możliwości.

    Ćwiczenie 10.2. Posługiwanie się paletą Layers

    W tym ćwiczeniu będziemy korzystać z wariantu pliku, nad którym pracowałeś w ćwiczeniu 10.1. Przesuniesz się o krok dalej w kwestii stosowania warstw i nabierzesz wprawy w posługiwaniu paletą Layers. Nauczysz się także wprawiać warstwy w ruch. W efekcie tej pracy powstanie zawierający warstwy dokument DHTML (aczkolwiek rozszerzenie jego nazwy to nadal .HTM lub .HTML), w którym użytkownicy będą mogli wybierać obiekty i przemieszczać je dowolnie po ekranie.

    Zacznij od otwarcia pliku SWATCHES.HTML z foldera Ch10 na dysku CD dołączonym do książki.

    1. Otwórz paletę Behaviors (Shift+F3) i paletę Layers (F2). Zwróć uwagę na wyświetlaną w oknie palety listę warstw. Każda próbka koloru ma tu swoją własną warstwę o wymiarach 60x60 pikseli. Rysunek 10.15 prezentuje dokument, a na jego tle widoczna jest paleta Layers. Poćwicz przeciąganie próbek kolorów w inne miejsca. Kliknij warstwę, aby ją zaznaczyć, a następnie złap za uchwyt w lewym górnym rogu i przesuń (szybko).

    2. Rys. 10.15.

      Paleta Layers prezentuje wszystkie warstwy utworzone w dokumencie

      1. Twoje zadanie polega na przypisaniu każdej warstwie behawioru Drag Layer. Zacznijmy od zaznaczenia na liście palety Layers warstwy red1.

      2. Po zaznaczeniu warstwy, kliknij umieszczony na warstwie obraz próbki koloru. Gdy zostanie on zaznaczony, kliknij w oknie palety Behaviors przycisk ze znakiem plus (+) i rozwiń listę behawiorów. Wybierz z niej behawior Drag Layer. Pamiętaj, że to obraz musi być zaznaczony, a nie warstwa.

      3. Na rysunkach 10.16 i 10.17 znajdziesz instrukcje wypełnienia okna dialogowego Drag Layer. Sprawdź w nim, czy warstwą wybraną do przesuwania jest red1 (lub warstwa o innej nazwie, którą sam wybrałeś).

      1. Wybierz warstwę, która ma być przesuwana, z listy rozwijanej Layer zakładki Basic.

      2. Z listy Movement wybierz pozycję Unconstrained (także ustawienie zakładki Basic).

      3. W zakładce Advanced wybierz z listy Drag Handle pozycję Entire Layer.

      4. Zaznacz pole wyboru While Dragging i wybierz z listy rozwijanej Bring Layer to Front pozycję Then Leave on Top.

      5. Kliknij OK.

      Sprawdź w oknie palety Behaviors (warstwa nadal powinna być zaznaczona), czy akcja została przypisana (patrz rysunek 10.18).

      Rys. 10.16.

      Okno dialogowe Drag Layer, zakładka Basic

      Rys. 10.17.

      Okno dialogowe Drag Layer, zakładka Advanced

      Rys. 10.18.

      Paleta Behaviors, a w niej akcja przypisana warstwie

      1. Powtórz kroki 2, 3 i 4 dla pozostałych próbek kolorów. Pamiętaj, że za każdym razem będziesz musiał zmieniać nazwę warstwy w oknie Drag Layer, tak więc ilekroć zaznaczysz warstwę, sprawdzaj na liście palety Layer czy jest to warstwa właściwa.

      2. Po przypisaniu behawiorów do wszystkich próbek, zapisz rezultaty oraz pliki obrazów na swoim dysku twardym, a potem wyświetl dokument w przeglądarce. W oknie przeglądarki powinno być możliwe przeciąganie poszczególnych próbek po ekranie (w przeglądarce Netscape 4 musiałem klikać dwukrotnie). Rysunek 10.19 prezentuje wygląd dokumentu w przeglądarce Netscape 4.

      3. Rys. 10.19.

        Oto rezultat końcowy - użytkownik może tworzyć kombinacje kolorystyczne przeciągając próbki kolorów po ekranie

        W tym ćwiczeniu nauczyłeś się definiować behawiory pozwalające przeciągać warstwy po ekranie i upuszczać je w nowym ulokowaniu. Jest to tylko początek tego, co możesz zrobić z warstwami, jeśli potrafisz już przypisywać im behawiory. Na przykład możesz rozbudować to ćwiczenie o dołączenie dźwięków, które będą towarzyszyć przeciąganiu obrazu. Behawior Drag Layer można wykorzystać także do przycumowania obrazu do określonego punktu ekranu. Powodzenia we wszystkim, czego spróbujesz!

        Początek ramki

        Rozszerzenie CourseBuilder

        Gry bazujące na opcji drag-and-drop mogą być zarówno zabawne jak i uczące. Macromedia nie ignoruje tego faktu i z tego względu proponuje rozszerzenie CourseBuilder dla programów Dreamweaver 4 i Dreamweaver UltraDev 4.

        Po dołączeniu rozszerzenia, dostosowywanie środowiska nauczania on-line odbywa się w oknie dialogowym (patrz rysunek 10.20). Rozszerzenie CourseBuilder mogłyby znaleźć zastosowanie w takich projektach jak egzaminy, ankiety, gry i układanki. Po utworzeniu interfejsu, wstawiana jest zawartość, plik jest zapisywany i publikowany w sieci.

        Rozszerzenie CourseBuilder jest bezpłatne, o ile masz własną kopię programów Dreamweaver 4 lub Dreamweaver UltraDev 4. Możesz je ściągnąć spod adresu www.macromedia.com/exchange/Dreamweaver.

        Koniec ramki

        Rys. 10.20.

        Ustawienia kategorii Drag-and-Drop okna dialogowego CourseBuilder

        Podsumowanie

        W tym rozdziale omówione zostały sposoby tworzenia i stosowania warstw obsługiwanych w wersjach 4.x (i nowszych) przeglądarek. Nauczyłeś się zmieniać rozmiary i pozycje warstw oraz wstawiać na warstwy zawartość. Poznałeś nie tylko podstawy posługiwania się warstwami, lecz także techniki zaawansowane, a wśród nich technikę tworzenia obiektów, które można dowolnie przeciągać w obrębie strony oraz technikę tworzenia animacji z wykorzystaniem linii czasowych. Stosując na swoich stronach warstwy nie zapomnij o częstym testowaniu dokumentów w różnych przeglądarkach i na różnych platformach sprzętowych.

        Warto także powędrować czasami po sieci, aby sprawdzić czy nie ma nowych rozszerzeń przeznaczonych dla programu Dreamweaver oraz poszerzających możliwości projektowania warstw.

        -->

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

        2 G:\DREAM_trans\rozdz10.doc

        tu chyba inny rysunek?

        tu chyba inny rysunek?

        inny folder w tekście, inny na dysku CD

        [Author:r]

        Wyszukiwarka