Stosowanie ramek podczas tworzenia stron WWW jest kontrowersyjne – jedni chętnie z nich korzystają, inni odradzają ich stosowanie. Ja osobiście należę do tej drugiej grupy. Owszem, większość dzisiejszych przeglądarek poradzi sobie z nimi bez problemów, więc to nie one tutaj stanowią problem. Prawdziwym problemem są tutaj wyszukiwarki WWW. Część z nich wogóle nie potrafi poradzić sobie z ramkami, inne zaś w lepszy czy gorszy sposób są w stanie je obsłużyć. Jeżeli więc strona ostatecznie zostanie zindeksowana przez wyszukiwarkę, to i tak nie będzie to dobrze zrobione – wyszukiwarka widzi stronę z ramkami jako zbiór kilku osobnych stron HTML, i w wynikach wyszukiwania one będą się zazwyczaj pojawiać. Jeżeli ktoś kliknie więc na link do znalezionej strony, zobaczy ją niekompletną (np. bez bocznego menu). Owszem można sobie z tym poradzić stosując prosty skrypt JavaScript, ale nadal pozostaje problem z wyszukiwarkami które nie obsługują ramek, oraz z przeglądarkami które nie obsługują ramek. Problem jest także gdy wykonywanie skryptów jest wyłączone w przeglądarce bądź zablokowane na firewall’u (te dwa ostatnie przypadki są obecnie coraz częstsze).
Warto wspomnieć także iż ramki nie są dostępne gdy używasz DOCTYPE dla (X)HTML Strict i Transitional – musisz użyć specjalnej deklaracji Frameset (patrz poniżej).
Oczywiście są także przypadki gdy stosowanie ramek może być uzasadnione, lub powyższe zastrzeżenia nie są istotne (np. w firmowym intranecie). Poza tym ten kurs języka HTML byłby niekompletny bez tej części :).
Podział strony na wiersze i kolumny
Najprostsza strona korzystająca z ramek wygląda następująco:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Strona z ramkami</title> </head> <frameset cols="25%,*"> <frame src="ramka1.html"> <frame src="ramka2.html"> <noframes> <body> Wersja strony dla przeglądarek nie obsługujących ramek </body> </noframes> </frameset> </html>
Podstawową zmianą jest tu brak elementu <body> – zamiast niego pojawił się <frameset>.Służy on do określenia w jaki sposób strona powinna zostać podzielona na wiersze bądż kolumny. Określa to atrybut rows (podział na wiersze) lub cols (podział na kolumny). Wysokość wierszy/szerokość kolumn można podać na trzy różne sposoby:
- w procentach (np. 25%)
- w pikselach (np. 100)
- jako specjalną wartość „to co pozostało” (gwiazdka *)
W powyższym przykładzie strona została podzielona na dwie kolumny, o szerokości 25%, oraz szerokości odpowiadającej pozostałej części strony (tutaj 75%).
Strona podzielona na wiersze wyglądałaby następująco:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Strona z ramkami</title> </head> <frameset rows="100,*"> <frame src="ramka1.html"> <frame src="ramka2.html"> <noframes> <body> Wersja strony dla przeglądarek nie obsługujących ramek </body> </noframes> </frameset> </html>
Wewnątrz znacznika <frameset> umieszczone są znaczniki <frame> – po jednym dla każdej ramki. Każdy z nich za pomocą atrybutu src określa jaki dokument HTML załadować do odpowiadającej mu ramki.
Poniżej (ale ciągle w obrębie znacznika <frameset>) umieszczony jest znacznik <noframes>. Zawiera on treść strony przeznaczoną dla przeglądarek i wyszukiwarek które nie obsługują ramek. Odradzam umieszczanie tutaj jakże popularnego zdania „Twoja przeglądarka nie obsługuje ramek” – jeżeli już ktoś trafił na stronę, to szkoda byłoby go żegnać w tak mało przyjemny sposób. Poza tym pamiętaj ciągle o wyszukiwarkach :).
Zagnieżdżanie ramek
Znaczniki <frameset> można zagnieżdzać – w ten sposób można utworzyć stronę podzieloną na ramki w bardziej skomplikowany sposób:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Strona z ramkami</title> </head> <frameset rows="40%,60%"> <frameset cols="40%,*"> <frame src="ramka1.html"> <frame src="ramka2.html"> </frameset> <frameset cols=\"25%,*,100\"> <frame src="ramka3.html"> <frame src="ramka4.html"> <frame src="ramka5.html"> </frameset> <noframes> <body> Wersja strony dla przeglądarek nie obsługujących ramek </body> </noframes> </frameset> </html>
Dodatkowe atrybuty ramek
Znacznik <frame> może mieć także kilka innych atrybutów:
scrolling– określa czy suwaki do przewijania zawartości ramki mają być zawsze widoczne (wartośćyes; jeżeli suwak jest niepotrzebny, wyświetlany jest jako nieaktywny), zawsze ukryte (wartośćno) lub pokazywane tylko gdy są potrzebe (auto– jest to wartość domyślna).<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Strona z ramkami</title> </head> <frameset cols="33%,33%,*"> <frame src="ramka6.html" scrolling="yes"> <frame src="ramka6.html" scrolling="no"> <frame src="ramka6.html" scrolling="auto"> <noframes> <body> Wersja strony dla przeglądarek nie obsługujących ramek </body> </noframes> </frameset> </html>
noresize– pozwala na zabezpieczenie przed zmianą rozmiaru ramki (za pomocą myszki można przeciągnąć belkę oddzielającą dwie ramki od siebie). Domyślnie rozmiary ramek można zmieniać.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd\"> <html> <head> <title>Strona z ramkami</title> </head> <frameset cols="25%,*"> <frame src="ramka1.html" noresize> <frame src="ramka2.html" noresize> <noframes> <body> Wersja strony dla przeglądarek nie obsługujących ramek </body> </noframes> </frameset> </html>
frameborder– określa czy obramowanie ramki powinno być wyświetlane (1lubyes) bądź nie (0lubno). Domyślnie obramowania są wyświetlane.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Strona z ramkami</title> </head> <frameset cols="25%,*"> <frame src="ramka1.html" frameborder="0"> <frame src="ramka2.html" frameborder="0"> <noframes> <body> Wersja strony dla przeglądarek nie obsługujących ramek </body> </noframes> </frameset> </html>
marginwidthimarginheight– określają odpowiednio marginesy lewy/plawy oraz górny/dolny dla ramki. Zawartość ramki będzie odsunięta o podaną ilość pikseli od jej krawędzi.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Strona z ramkami</title> </head> <frameset cols="25%,*"> <frame src="ramka1.html" marginwidth="10" marginheight="50"> <frame src="ramka2.html" marginwidth="50" marginheight="10"> <noframes> <body> Wersja strony dla przeglądarek nie obsługujących ramek </body> </noframes> </frameset> </html>
name– pozwala nadać ramce nazwę. Można ją użyć jako wartość atrybututargetznacznika<a>, gdy chcemy aby strona otworzyła się w innej ramce niż bieżąca.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Strona z ramkami</title> </head> <frameset cols="25%,*"> <frame src="ramka-menu.html" name="menu"> <frame src="ramka1.html" name="strona"> <noframes> <body> Wersja strony dla przeglądarek nie obsługujących ramek </body> </noframes> </frameset> </html>
W pliku
ramka-menu.htmlznajdują się m.in. takie linie:<a href="ramka1.html" target="strona">Ramka 1</a><br> <a href="ramka2.html" target="strona">Ramka 2</a><br> <a href="ramka3.html" target="strona">Ramka 3</a><br>
Atrybut target można także zastosować dla znacznika <form> (więcej o nim będzie w rozdziale opisującym Formularze w HTML) – w ten sposób można spowodować że wynik przetwarzania formularza przez serwer zostanie wyświetlona w innej ramce.
Atrybut name można użyć także dla znacznika <frameset> – w ten sposób, odpowiednio ustawiając atrybut target można sprawić że nowa strona która się załaduje zmieni bieżący układ ramek.
Dla atrybutu target można przypisać także kilka specjalnych wartości:
_blank– strona zostanie otwarta w nowym oknie przeglądarki._top– strona zostanie otwarta bezpośrednio w oknie przeglądarki (bieżąca struktura ramek zostanie usunięta)._parent– strona zostanie otwarta w ramce która jest ramką nadrzędną dla bieżącej ramki._self– strona zostanie otwarta bieżącej ramce (wartość domyślna).
Aby łatwiej to można zrozumieć, podaję jak przeglądarka interpretuje te wartości dla różnych stron:
- Strona bez ramek –
_self=_top=_parent(ta ostatnia równość jest zapisana w standardzie DOM); - Strona podzielona tylko na wiersze (lub kolumny) –
_top=_parent; - Strona podzielona w bardziej skomplikowany sposób (zagnieżdzone znaczniki
<frameset>lub strona z ramkami wyświetlona w innej ramce) – brak równości.
Komentarze