Ramki - Kurs języka HTML
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 :).
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>Kliknij aby zobaczyć
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>Kliknij aby zobaczyć
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 <nofram>. 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 :).
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>Kliknij aby zobaczyć
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 (1 lub yes) bądź nie (0 lub no). 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>marginwidth i marginheight - 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ść atrybutu target znacznika <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>ramka-menu.html znajdują 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.
Wykop tą stronę! >>>
Dodaj linka na swojej stronie! Po prostu skopiuj poniższy kod i wklej go na swojej stronie WWW. Gotowy link będzie wyglądał w taki sposób:
Ramki - Kurs języka HTML
| 
