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>

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

Kliknij aby zobaczyć

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>

    Kliknij aby zobaczyć

  • 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>

    Kliknij aby zobaczyć

  • 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>

    Kliknij aby zobaczyć

  • 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>

    Kliknij aby zobaczyć

  • 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>

    W pliku 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>

    Kliknij aby zobaczyć

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.