Podstawowe informacje na temat warstw
Aby efektywnie posługiwać się warstwami, musisz znać podstawy. Musisz wiedzieć, jak rysować warstwy, jak je organizować, 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 po przeczytaniu tekstu.

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ą.
Warto wstawianym warstwom nadawać nazwy, bowiem ułatwia identyfikację.

Kod HTML i warstwy
Domyślnie,  tworzy warstwę stosując znacznik <DIV>. Przełącz się do widoku kodu, 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.

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.

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.
Coraz częściej warstwy są powszechniej wykorzystywane do tworzenia stron internetowych i wypierają starodawne tabele. Dzisiejsza technologia potrafi warstwami całkowicie zastąpić tabele, choćbywa to trudniejsze w programowaniu.
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 korzystasz z nakładania się warstw, weź pod uwagę następujące ostrzeżenia:

Przetestuj nakładające się warstwy w różnych przeglądarkach i na różnych platformach sprzętowych.
Zredukuj do minimum liczbę nałożeń warstw. Jeśli jest ona większa niż 10, sam prosisz o kłopoty.
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.

Jeśli tylko poświęcisz parę chwil na zastanowienie się nad zasadami funkcjonowania warstw, 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. Aby efektywnie korzystać z warstw, musisz wiedzieć czym są, jak działają i
jakie kwestie natury technicznej wiążą się z ich stosowaniem.

O tym trzeba wiedzieć:

• Definiowanie warstw
• Określanie wymiarów warstw
• Pozycjonowanie warstw
• Konfigurowanie właściwości warstw
• Warstwy zagnieżdżone
• Właściwości warstw
• Konwersja warstw
• 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   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ń.

Pierwszym elementem rzucającym się w oczy w przypadku układu ramek są obramowania. Można jednak zmieniać ich wygląd, a nawet całkowicie je usuwać. Szerokość obramowania układu ramek definiuje się w pikselach w polu Border Width inspektora Property. Aby całkowicie usunąć obramowanie, wystarczy wpisać w tym polu wartość 0. W końcu, można także zmienić kolor i sposób prezentacji obramowania. Aby zmienić kolor, wpisz szesnastkowy kod koloru w polu Border Color lub kliknij próbkę koloru obok tego pola i wybierz próbnikiem kolor z palety. Aby zastąpić pseudo-trójwymiarowe obramowania zwykłymi, rozwiń listę Borders i wybierz pozycję Yes lub No. Opcja Default pozostawia wybór przeglądarce.

Inne atrybuty znacznika <FRAME> dostępne to Name, Scroll, Borders, Color, Resize, Margin Width i Margin Height. Przyjrzyjmy się ich funkcjom i sposobowi konfiguracji.

Name
Nie myl tego atrybutu z nazwą pliku dokumentu. Atrybut Name jest bardzo użyteczny, aczkolwiek niedoceniany. Przede wszystkim identyfikacja ramki za pomocą jednoznacznej i opisowej nazwy pozwala skierowywać połączenia na tę ramkę. Gdyby ramka nie mała nazwy, nie można byłoby definiować połączeń, a to z kolei oznaczałoby znaczne ograniczenie możliwości  wymiany zawartości ramki. Po drugie, stosowanie nazw zawsze ułatwia odwoływanie się do ramek z poziomu skryptów. Pamiętaj, aby zawsze definiować nazwy ramek.

Scroll
Atrybut Scroll umożliwia wyświetlenie w ramce pasków przewijania. Opcja ta jest szczególnie
użyteczna, jeśli chcesz umieścić w ramce zawartość przekraczającą jej rozmiary. Atrybut Scroll
ma cztery wartości, które dostępne są:

• Yes – w przypadku wybrania tej wartości, ramka zawsze będzie miała pasek przewijania, bez względu na to, jak obszerny dokument jest w niej wyświetlany. Nie polecam tej opcji, chyba że masz wyraźny powód, by ją stosować.
• No – w tym przypadku rezygnujesz z udostępnienia przewijania, co może spowodować, że zawartość dokumentu nie da się w całości odczytać. Można stosować takie rozwiązanie, jeśli masz pewność, że zawartość ramki zawsze ma określony rozmiar lub jeśli skonfigurowałeś rozmiary ramki w jednostkach bezwzględnych, dobierając je do zawartości. Ze względu na arbitralność tego ustawienia, decydując się nie powinieneś mieć także pewność, że użytkownik korzysta przynajmniej z tej samej lub wyższej rozdzielczości jak ta, przy której przygotowano strony witryny.
• Auto – ta opcja automatycznie włącza lub wyłącza wyświetlanie pasków przewijania w zależności od potrzeb. Jest użyteczna, jeśli objętość zawartości ramki jest nieprzewidywalna w innych przeglądarkach, a także wtedy, gdy nie są Ci znane ustawienia ekranu i przeglądarki użytkownika.
• Default – opcja pozostawia kwestię wyświetlenia pasków przewijania w gestii przeglądarki.

Borders i Border Color
Atrybuty te pozwalają zdefiniować obramowanie i jego kolor. Ustawienia te są niezależne od ustawień dla elementu FRAMESET. Przypisując atrybutom określone wartości czynisz próbę zdominowania ustawień wprowadzonych w elemencie FRAMESET. „Czynić próbę” jest tu właściwym określeniem, bowiem jeśli obramowania nie są od siebie niezależne, tak jak na przykład w dokumencie składającym się z wielu zestawów ramek, wszystkie będą dzieliły ten sam typ i atrybuty.

Resize
Domyślnie, użytkownik ma możliwość zmiany rozmiarów ramek za pomocą myszki. Nie jest to to, o co chodzi projektantom. Dlatego masz do dyspozycji atrybut, który pozwala wyłączyć zachowanie domyślne. Uniemożliwi to użytkownikowi przeciąganie krawędzi ramek i zmianę rozmiarów ramek w oknie przeglądarki .  Pamiętaj, że to ustawienie musisz definiować osobno dla każdej ramki, której rozmiary chcesz zablokować.

Margin Width i Margin Height
Domyślnie, wszystkie dokumenty układu ramek mają marginesy. Jest to obszar wokół obramowania, w którym nie można umieścić zawartości. Aby go zlikwidować i wykorzystać całą przestrzeń ramki, skorzystaj z atrybutów Margin Width i Margin Height, i przypisz im wartość 0. Dzięki temu zawartość ramki można dosunąć do obramowania.