HTML: ramki

Jeszcze kilka lat temu ramki były bardzo popularnym sposobem na tworzenie layoutu stron internetowych. Dzięki nim bardzo łatwo można było podzielić strony na główne bloki, takie jak nagłówek, menu, treść strony oraz stopka. Z czasem jednak okazało się, że używanie ramek niesie ze sobą wiele niedogodności…

Mnogość plików

Strony oparte na ramkach zbudowane są z wielu plików HTML. Jeden plik opisuje budowę strony (jej podział na wspomniane wcześniej bloki), pozostałe zaś zawierają treść, która ma zostać umieszczona w poszczególnych ramkach. Gdy budujemy stronę z użyciem XHTML-a, musimy pamiętać, że strona definiująca budowę ramek zawiera inna linijkę określająca DOCTYPE, niż strony tworzone przez nas do
tej pory. Oto poprawne DOCTYPE dla stron opartych na ramkach:

Dla przypomnienia, DOCTYPE dla typowej strony zbudowanej w XHTML-u Transitional to:

Pierwsze ramki

Strona definiująca ramki ma następujący szkielet:

...

Brakuje tu bloku {html}{/html}, zamiast niego pojawił się natomiast blok {html}{/html}.

Znacznik {html}{/html} przyjmuje następujące parametry:

• rows – określa liczbę wierszy,
• cols – określa liczbę kolumn.

W jednym bloku {html}{/html} może wystąpić tylko jeden parametr rows lub cols. Wynika wiec z tego, że stronę możemy podzielić na ramki w postaci kolumn bądź wierszy. Parametry te przyjmują rozdzielone przecinkami rozmiary poszczególnych kolumn lub wierszy i mogą być podane w pikselach (podajemy wówczas same wielkości cyfrowe), procentach (za cyfrą dodajemy znak %) lub możemy pozwolić przeglądarce na automatyczne dostosowanie wielkości danej ramki do aktualnego rozmiaru okna przeglądarki, używając znaku *.

A oto przykład definicji strony złożonej z trzech kolumn:

...

Rozmiar pierwszej kolumny został zdefiniowany na 150 pikseli, natomiast dwóch pozostałych kolumn na wartość ustalaną przez przeglądarkę (obie te kolumny będą mieć taka sama szerokość). Po określeniu liczby i rozmiarów kolumn/wierszy należy poinformować przeglądarkę o tym, gdzie ma szukać plików HTML zawierajacych opis zawartości poszczególnych ramek. Właśnie do tego służą znaczniki {html}{/html}. Występuje ich w bloku {html} {/html}tyle, ile zostało definiowanych ramek. Znacznik {html}{/html} przyjmuje następujące parametry:

• name – nazwa ramki (przydatna do odwoływania się do niej z poziomu
  odnośników),
• src – nazwa pliku, w którym znajduje się treść dla danej ramki,
• frameborder – włącza/wyłącza obramowanie pomiędzy ramkami (odpowiednio
  wartości 0 oraz 1),
• marginwidth – służy do określenia wysokości odstępu pomiędzy
  treścią zawarta w ramce a jej obramowaniem,
• marginheight – służy do określenia szerokości odstępu pomiędzy
  treścią zawarta w ramce a jej obramowaniem,
• noresize – powoduje wyłączenie możliwości zmiany rozmiaru ramki,
• scrolling – określa sposób w jaki maja zostać wyświetlone paski
  przewijania (auto – wyświetlane będą jedynie wówczas, gdy treść przestaje się mieścić w ramce, yes – będą zawsze widoczne, no – będą zawsze ukryte).

Załóżmy wiec, że chcemy stworzyć stronę zbudowana z 3 wierszy, które zawierają treść odpowiednio w plikach r1.html, r2.html, r3.html. Oto kod HTML:

Pierwsza ramka będzie miała wysokość 75 pikseli, druga będzie dopasowywana automatycznie, trzecia zaś będzie rozciągnięta na wysokość 30 pikseli. Rys 1 pokazuje przykład tak zbudowanej strony. Analogicznie można stworzyć stronę podzieloną na kolumny:

Mamy tu stronę podzielona na 2 kolumny – pierwsza o szerokości 150 pikseli, druga natomiast jest dopasowywana automatycznie do szerokości okna przeglądarki. Możliwe, że spotkaliśmy już bardziej skomplikowane konstrukcje złożone z ramek, takie, gdzie występował nagłówek i stopka w postaci wierszy, natomiast miedzy nimi znajdowało się menu i miejsce na treść w postaci kolumn.
Można to osiągnąć, zastępując poszczególne znaczniki {html}{/html}
znacznikiem {html}{/html}:

Jak widać, druga ramka o rozmiarze automatycznie dopasowującym się do okna przeglądarki została zdefiniowana jako dwie kolumny – menu oraz content. Na rysunku znajduje sie przykład wyglądu tak zdefiniowanej strony.

W podobny sposób można tworzyć bardzo skomplikowane konstrukcje ramek.
Na każdym poziomie {html} {/html}użyć znacznika kolejnego znacznika {html}{/html}.

Połączenia pomiędzy ramkami

Po zdefiniowaniu szkieletu ramek za pomocą odpowiedniej kombinacji znaczników {html}{/html} oraz {html}{/html} należy odpowiednio zbudować odnośniki w dokumentach zawierających treść naszych ramek.

Do tworzenia odnośników wykorzystywaliśmy znacznik {html}{/html}. Teraz znacznik ten wzbogacimy o parametr target. Parametr ten określa, w której z ramek ma zostać wyświetlona treść, do której dany odnośnik odsyła czytelnika. W przypadku naszej strony odnośniki umieszczone w menu będą
najczęściej mieć następującą budowę:

O Stronie

W przypadku menu wygodne jest zdefiniowanie ramki content jako domyślnego miejsca przeznaczenia dla odnośników. Służy do tego znacznik {html}{/html}

:

Po jego zdefiniowaniu wszystkie znajdujące się w ramce menu odnośniki o postaci:

O Stronie

będą powodowały wyświetlenie treści do której kierują w ramce content.

Poza nazwami poszczególnych ramek, parametr target znacznika {html}{/html} może przyjać także jedna z czterech zdefiniowanych wartości:

• _blank – powoduje ładowanie dokumentu, na który wskazuje odnośnik, do nowego okna przeglądarki,
• _self – powoduje załadowanie dokumentu, na który wskazuje odnośnik, do tej samej ramki w której znajduje się ten odnośnik,
• _parent – powoduje załadowanie strony do ramki nadrzędnej w stosunku do ramki, w której znajduje się danych odnośnik – jeśli ramka nadrzędna nie istnieje, parametr ten ma działanie analogiczne do parametru _self,
• _top – powoduje załadowanie dokumentu do całego okna przeglądarki – zastępuje on tym samym nasz układ ramek, wyświetlając w zamian dokument do którego prowadzi odnośnik

Pamiętajmy, że do nadawania nazw ramkom nie należy używać powyższych wartości ( {stala} _blank, _self, _parent, _top{/stala}).

Znacznik <noframes>

Niestety, nie wszystkie przeglądarki potrafią obsłużyć poprawnie strony oparte na ramkach. Co prawda przeglądarek, które tego nie potrafią jest niewiele, jednak część osób używa, przynajmniej sporadycznie, przeglądarek tekstowych, które ramki interpretują nie zawsze poprawnie. Właśnie dla takich osób powstał znacznik {html}{/html}. Umieszcza się go w pierwszym bloku {html}{/html} wraz z informacja o tym, że strona wymaga przeglądarki obsługującej ramki bądź bezbramkowa wersje strony:

<body></pre>
<p>Twoja przeglądarka nie obsługuje ramek &#8211; zmień przeglądarkę, jeśli chcesz obejrzeć te stronę.</p>
<pre lang="html" line="1" ></body>

Ramki osadzone w dokumentach HTML

Poza poznanymi już ramkami istnieje jeszcze jeden ich rodzaj – ramki, które można osadzić w dowolnej stronie HTML. Są to ramki {html}{/html} – nazywa się je czasami ramkami pływającymi. Znacznik {html}{/html} przyjmuje następujące parametry:

• src – adres strony, która ma zostać wyświetlona w ramce,
• name – określa nazwę ramki – można ja wykorzystać w odnośnikach, w przedstawiony wcześniej sposób,
• frameborder – określa czy wokół ramki ma być wyświetlone obramowanie – wartość 1 oznacza że tak, 0 że nie,
• marginwidth – parametr ten służy do określenia wysokości odstępu pomiędzy treścią zawartą w ramce a jej obramowaniem,
• marginheight – parametr ten służy do określenia szerokości odstępu pomiędzy treścią zawartą w ramce a jej obramowaniem,
• noresize – blokuje możliwość zmiany rozmiaru ramki przez czytelnika,
• scrolling – określa sposób, w jaki maja zostać wyświetlone paski przewijania (autom, yes, no).

Przykład wykorzystania ramki tego typu na stronie internetowej, może wyglądać następująco (rys. 3):