![[hand]](../grafika/hand.gif){kind=small}
Czym są ramki w dokumencie HTML?Czym są ramki w dokumencie HTML?
Coraz więcej przeglądarek potrafi interpretować ramki, które stały się już oficjalnym standardem języka HTML (w wersji 4.0). Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML i dlatego są chętnie stosowane przez wielu webmasterów.
W tej chwili (marzec 1998) Internet został zdominowany przez dwie firmy produkujące przeglądarki. Netscape i Microsoft dzielą się prawie po połowie tym wielkim rynkiem, pozostawiając zaledwie kilka procent dla innych produktów. Praktycznie wszystkie systemy operacyjne są obsługiwane przez produkty Netscape'a i/lub Microsoftu, więc używanie przeglądarek ignorujących ten element jest raczej kwestią wyboru, jak to czynią np. niektórzy użytkownicy Linuxa, posługujący się tekstową przeglądarką Lynx. Dla przykładu, strony Wydawnictwa Lupus są wizytowane w 98 procentach przez posiadaczy Internet Explorera i Navigatora, które akceptują stosowanie ramek na stronach.
Najbardziej typowym przykładem użycia ramek jest umieszczenie w jednej spisu treści i przeznaczenie drugiej na wywoływane dokumenty (odrębne strony HTML), dowiązane do poszczególnych pozycji spisu. Gdyby ktoś się martwił, że ramka przeznaczona na dokumenty jest zbyt mała, może ją łatwo powiększyć, przeciągając po prostu jej brzegi za pomocą myszki (o ile ramka nie jest zablokowana przez autora strony). W ten sposób można powiększyć ramkę do wielkości niemal całego obszaru roboczego przeglądarki, niezależnie od domyślnych parametrów utworzonych przez autora strony.
Na bieżącej stronie pokażemy sposoby tworzenia ramek - okaże się, że ich konstruowanie jest dość proste (na pewno nie trudniejsze niż tworzenie tabel), a uzyskany efekt wart pracy włożonej w poznanie niewielu poleceń.
Podstawową rolę w "ramkowym" dokumencie pełni specjalna strona, na której definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych dokumentów w momencie uaktywnienia łącza hipertekstowego. Pozostałe strony, wchodzące w skład całego, wielostronicowego dokumentu, są stronami podrzędnymi.
Zauważmy od razu, że na podstawowej stronie nie powinno być żadnych znaczników poza blokiem nagłówkowym i definicją samych ramek. Dopiero znaczniki NOFRAMES pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki nie interpretujące ramek. Znaczniki <BODY></BODY> mogą być umieszczane jedynie w obrębie NOFRAMES.
Poniższy przykład obrazuje znaczniki wprowadzone na fikcyjnej stronie prezentującej kilka edytorów HTML. Za chwilę wyjaśnimy ich znaczenie, a oto przykład.
<HTML>
<TITLE>Edytory HTML</TITLE>
<FRAMESET COLS="25%,*%">
<FRAME SCROLLING="auto" NAME="lista edytorów" SRC="spisedyt.htm">
<FRAME SCROLLING="yes" NAME="edytory" SRC="edyt.htm">
</FRAMESET>
<NOFRAMES>
<BODY>
</BODY>
</NOFRAMES>
</HTML>
Kluczowe znaczenie ma para znaczników <FRAMESET> </FRAMESET>. Stanowią one, z dodatkowymi parametrami, ramy dla całej konstrukcji i między nimi są umieszczane bardziej szczegółowe znaczniki, dotyczące liczby ramek, podziału strony i wielkości ramek.
Zwróćmy uwagę na "wyłamującą się" parę znaczników <NOFRAMES> </NOFRAMES>, o której będziemy mówić nieco niżej. Służą one do wprowadzenia elementów strony, które będą widoczne dla posiadacza przeglądarki innej niż Navigator i Internet Explorer (pomijając mniej znane programy). Jeśli natomiast czytelnik strony używa Navigatora lub Internet Explorera, wszelkie informacje między tymi znacznikami zostaną zignorowane. W ten sposób autor strony może utworzyć dokument uniwersalny, uniezależniony od konkretnej przeglądarki. Nietrudno się domyślić, że treść między znacznikami <NOFRAMES> </NOFRAMES> powinna stanowić swoisty równoważnik strony "ramkowej". Odradzamy raczej stosowany dość często komunikat "Twoja przeglądarka nie obsługuje ramek" - szacunek dla gości strony wymaga obsłużenia także tej wąskiej grupy, która z jakichś powodów posługuje się programami nie akceptującymi ramek.
Znacznik <FRAME> służy do wprowadzenia konkretnej ramki. Znacznik jest uzupełniany dodatkowymi parametrami, mówiącymi o zawartości (zagnieżdżone strony), o tym, czy ramka zawiera suwaki, a także definiującymi nazwę ramki.
Aby konstrukcja mogła działać, konieczne jest podzielenie strony - pionowe lub poziome. Poniższy kod (kontynuujemy nasz przykład) zawiera informację o podzieleniu strony na dwie kolumny. Służy do tego parametr COLS="x,y", umieszczany w otwierającym znaczniku FRAMESET. Liczby x i y służą do liczbowego określenia szerokości ramek. Możemy podać obie wartości w pikselach, w procentach szerokości strony, a także określić szerokość jednej kolumny i oznaczyć szerokość drugiej za pomocą wieloznacznika * (ma to sens przy podziale na większą liczbę kolumn lub wierszy).
Możemy zastosować parametr BORDER=x, wprowadzonywany przez Navigatora i akceptowany przez Internet Explorera 4, który określa w pikselach szerokość obramowania rozdzielającego ramki. Parametr BORDERCOLOR=kolor pozwala określić kolor obramowania rozdzielającego ramki. Parametr FRAMEBORDER=yes|no lub 1|0 (zalecana jest "liczbowa" postać) pozwala wyświetlać lub chować obramowanie rozdzielające ramki (domyślnie jest ono wyświetlane). Parametr jest na pewno akceptowany przez Navigatora 4.04 i Internet Explorera 4.01.
Uwaga: aby usunąć obramowania w Internet Explorerze, oprócz FRAMEBOERDER=0 powinniśmy jeszcze użyć parametru FRAMESPACING=0.
Powyższe trzy parametry nie są przewidziane do stosowania w definicji FRAMESET w specyfikacji HTML 4, aczkolwiek podaje je "HTML Reference Library 4".
<FRAMESET COLS="18%,82%">
Kliknij w tym miejscu, aby zobaczyć przykład:
Gdybyśmy dzielili stronę na trzy wiersze, moglibyśmy, przez analogię, użyć konstrukcji:
<FRAMESET ROWS="200,*,200">
Kliknij w tym miejscu, aby zobaczyć przykład:
Sam podział na ramki to nie wszystko. Należy im jeszcze przypisać jakieś dokumenty, zazwyczaj w formacie HTML (choć mógłby to być na przykład plik w formacie Envoya, który moglibyśmy obejrzeć za pomocą specjalnego programu wspomagającego Netscape'a - Envoy Plug-in.
Aby przypisać ramce dokument, musimy podać źródło dokumentu. Należy w tym celu użyć konstrukcji:
<FRAME SRC="nazwa_pliku.htm">
Byłoby dobrze, gdyby przywoływany plik znajdował się w tym samym katalogu, choć możemy także podać nazwę pliku z pełną ścieżką dostępu:
Jeśli przywoływany plik jest spory objętościowo, zapewne nie zmieści się w całości w ramce. Możemy w takim razie użyć parametru, który wyświetli ramkę razem z suwakami. Stosowny parametr ma postać:
<FRAME SCROLLING=yes>
Gdy dokument jest niewielki, np. zawiera jakiś tytuł, który ma pozostawać na ekranie, możemy zrezygnować z suwaków i wstawić parametr SCROLLING=no, ustawiając zarazem odpowiednio szerokość lub wysokość przeznaczonej dla niego ramki. Gdy użyjemy parametru SCROLLING=auto, suwaki pojawią się wtedy, gdy dokument będzie większy niż ramka.
Ponieważ stosując ramki używamy jednocześnie często odsyłaczy, powinniśmy jakoś nazwać naszą ramkę. Nazwa będzie służyć jako punkt orientacyjny dla odsyłaczy.
<FRAME NAME="jakaś_tam_nazwa">
Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji parametru
<FRAME NORESIZE>
zabezpieczymy ramkę przed skalowaniem.. Domyślnie, wszystkie ramki są skalowalne.
Parametr FRAMEBORDER=1|0 pozwala ustalić, czy obramowanie danej ramki będzie wyświetlane, czy też nie. W przypadku IE należy jeszcze dodać FRAMESPACING=0 (nie przewiduje go jednak HTML 4).
Parametr MARGINHEIGHT=x wymusza dodatkowy odstęp (margines) u góry i u dołu konkretnej ramki, odsuwając treść od obramowania. Z kolei MARGINWIDTH=x wymusza margines lewy i prawy.
Parametr BORDERCOLOR=kolor określa kolor obramowania danej ramki. Parametr jest akceptowany poprawnie przez Navigatora, natomiast IE akceptuje go z błędami. Element ten nie jest jednak przewidziany przez HTML 4 dla definicji FRAME.
Ostatecznie cała definicja ramki może mieć postać:
<FRAME SCROLLING=yes NAME="jakaś_tam_nazwa" SRC="nazwa_pliku.htm">
W identyczny sposób określamy pozostałe ramki - tyle, ile kolumn (lub wierszy) zadeklarowaliśmy w definicji FRAMESET. W ten sposób zostaną "na dzień dobry" wczytane pewne strony początkowe.
Powyżej zostały przedstawione dwa konkretne przykłady, obrazujące podział strony na dwie kolumny lub trzy wiersze. Możliwe jest jednak dość dowolne mieszanie definicji kolumn i wierszy, co pozwala np. na utworzenie strony, w której znajdują się trzy wiersze, wiersz środkowy jest podzielony na trzy, a wiersz ostatni na dwie kolumny (łącznie 6 ramek) Oczywiście należy dość ostrożnie zwiększać liczbę ramek, gdyż może to ujemnie wpłynąć na czytelność strony. Vide:
To chyba dość niefortunny podział, choć oczywiście bynajmniej nie zabroniony.
Cała sztuka polega na tym, że najpierw dzielimy (w naszym konkretnym przykładzie) stronę na wiersze, a następnie w drugim i trzecim wierszu deklarujemy dodatkowy podział na kolumny - trzy w drugim i dwie w trzecim. Odpowiedni kod mógłby mieć postać:
<FRAMESET ROWS=200,*,200>
<FRAME SRC=strona6.htm>
<FRAMESET COLS=35%,*,35%>
<FRAME SRC=strona7.htm>
<FRAME SRC=strona8.htm>
<FRAME SRC=strona9.htm>
</FRAMESET>
<FRAMESET COLS=50%,50%>
<FRAME SRC=strona10.htm>
<FRAME SRC=strona11.htm>
</FRAMESET>
</FRAMESET>
Objaśnienie:
Rozpoczęliśmy konstrukcję od zadeklarowania w pierwszej linii liczby wierszy (trzy).
W drugiej linii od razu wstawiliśmy ramkę z przypisaną jej stroną, gdyż wiersz nie ulega żadnemu podziałowi.
W trzeciej linii ponawiamy definicję FRAMESET (niższego rzędu), dzieląc drugi wiersz na trzy kolumny.
W czwartej, piątej i szóstej linii wstawiamy definicje konkretnych trzech ramek dla drugiego wiersza, przypisując im odpowiednie strony.
W siódmej linii musimy zakończyć tę "lokalną" definicję FRAMESET.
W ósmej linii tworzymy kolejną "lokalną" definicję FRAMESET, tym razem dla trzeciego wiersza, dzieląc go na dwie kolumny.
W dziewiątej i dziesiątej linii wstawiamy definicje dwóch konkretnych ramek dla trzeciego wiersza, przypisując im odpowiednie strony.
W jedenastej linii kończymy "lokalną" definicję FRAMESET.
W dwunastej linii kończymy "globalną" definicję FRAMESET.
Teraz powinniśmy się zastanowić, co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało odpowiednią stronę w innej ramce. Jest to kluczowa sprawa, jeśli chcemy wykorzystać ramki w dokumentach. Zauważmy, że kliknięcie na odsyłaczu w spisie treści w lewej ramce powoduje załadowanie dokumentu do prawej ramki, a nie do ramki ze spisem treści. W tym miejscu wykorzystujemy nazwy, które nadawaliśmy poszczególnym ramkom.
Powróćmy do przykładu przedstawionego wyżej w punkcie Ogólna struktura strony.
Strona ta składa się z dwóch ramek. Lewa zawiera spis treści, natomiast do prawej są ładowane odpowiednie strony z opisami. Lewej nadaliśmy nazwę lista edytorów, natomiast prawej edytory.
<FRAMESET COLS="25%,*">
<FRAME SCROLLING="auto" NAME="lista edytorów" SRC="spisedyt.htm">
<FRAME SCROLLING="auto" NAME="edytory" SRC="edyt.htm">
</FRAMESET>
<NOFRAMES>
</NOFRAMES>
Nietrudno się domyślić, że należy dokonać pewnych manipulacji na stronie, która jest stale widoczna w lewej ramce o nazwie lista edytorów. Do ramki tej jest ładowana strona zawarta w pliku o nazwie - spisedyt.htm.
Lista tematów zawiera odsyłacze do odpowiednich stron. Należy je tak skonstruować, aby kliknięcie na odsyłaczu przywoływało wskazaną stronę, ale zarazem ładowało ją do ramki o nazwie edytory. Można to uczynić za pomocą następującej konstrukcji:
<A HREF="fp97.htm" TARGET="edytory">FrontPage 97</A>
<A HREF="hs25.htm" TARGET="edytory">HomeSite 2.5</A>
<A HREF="paj20.htm" TARGET="edytory">Pajączek 2.5</A>
itd.
HREF="nazwa_ładowanej_strony" dotyczy nazwy pliku, w którym jest zapisana dana strona
TARGET="nazwa_ramki" dotyczy docelowego miejsca, do którego ma być załadowana strona. Widzimy tutaj rolę, jaką pełnią nazwy ramek.
FrontPage 97, HomeSite 2.5 i Pajączek 2 są konkretnymi tematami w ich spisie, pozwalającymi po prostu wybrać interesujące nas zagadnienie.
Oczywiście należy pamiętać o poprawnej konstrukcji, a więc <A HREF=...> </A>
Zwróćmy jeszcze uwagę na cztery zastrzeżone nazwy w przypadku parametru TARGET.
TARGET="_blank"
TARGET="_self"
TARGET="_parent"
TARGET="_top"
W pierwszym przypadku przywoływany dokument zostanie załadowany do nowego, pustego okna (uruchomi nową kopię przeglądarki.
W drugim przypadku (przypadek domyślny) nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku.
W trzecim przypadku przywoływany dokument zamieni dokument nadrzędny w hierarchii dla bieżącego dokumentu.
W czwartym przypadku przywoływany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a więc na samą "górę".
Szczególnie przydatny i często stosowany jest ten ostatni parametr. Użycie "_top" pozwoli uniknąć dość kłopotliwej sytuacji, gdy do ramki jest ładowany dokument, który sam składa się z ramek. "_top" usuwa więc wszelkie istniejące ramki i wyświetla dokument "na czysto". Naturalnie moglibyśmy tutaj z powodzeniem użyć "_blank", ale pozbawiamy się w ten sposób "historii" skoków.
NOFRAMES
NOFRAMES jest ukłonem w stronę użytkowników, którzy nie mogą oglądać ramek w swojej przeglądarce, a więc wszystkich tych osób, które nie posiadają nowej przeglądarki
Posiadacz starszej przeglądarki zobaczyłby pustą stronę, gdyby między <NOFRAMES> </NOFRAMES> nie było żadnej informacji. Dlatego musimy w tym miejscu powtórzyć informację zawartą w jednej z ramek. W naszym przykładzie podstawową stroną jest strona o nazwie Edytory HTML (plik edytory.htm). Strona ta zawiera definicję dwóch ramek: do lewej jest na stałe przypisana strona spisedyt.htm, do prawej natomiast są wlewane inne strony, zależnie od wskazanego tematu. Z kolei między <NOFRAMES> </NOFRAMES> znalazło się powtórzenie treści strony spisedyt.htm (lista edytorów), jako strony wyjściowej dla osób nie posiadających Navigatora czy Internet Explorera. Tym samym osoby te, wywołując kurs, zobaczą stronę Edytory HTML (edytory.htm), ale w taki sposób, jakby wywołały stronę Lista edytorów (spisedyt.htm). Z poziomu tej strony mogą sięgać do konkretnych tematów, które będą oczywiście zajmować cały ekran, a nie ramkę, jak w Navigatorze czy Internet Explorerze. Naturalnie powinny się tutaj znaleźć stosowne odsyłacze hipertekstowe, które pozwolą nawigować w całym, wielostronicowym kursie HTML.Przypomnijmy, że gdy używamy nowych programów, wszelkie informacje między znacznikami NOFRAMES zostaną zignorowane.
W naszym przykładzie będzie to następujący blok:
<noframes>
<body>
Twoja przeglądarka nie akceptuje ramek
<br>
<hr>
<h3>Edytory HTML</h3>
<ul type=square>
<li><a href="corelweb.htm" target="edytory">Corel WebGraphics Suite</a>
<li><a href="webmast.htm" target="edytory">Corel WebMaster Suite</a>
<li><a href="fp97.htm" target="edytory">FrontPage 97</a>
<li><a href="hedit11.htm" target="edytory">Hedit 1.1</a>
<li><a href="homesite.htm" target="edytory">HomeSite 2.5</a>
<li><a href="hotdog3.htm" target="edytory">HotDog 3</a>
<li><a href="composer.htm" target="edytory">Netscape Composer</a>
<li><a href="paj20.htm" target="edytory">Pajączek 2</a>
</ul>
</body>
</noframes>
Uwaga: nie jest do końca jasne, czy NOFRAMES umieszczać w ramach FRAMESET, czy też poza nim. Uprzednio autorzy podręczników sugerowali tę drugą możliwość, ale w specyfikacji HTML 4 pojawiła się informacja, że NOFRAMES mogą być umieszczone w ramach FRAMESET "pierwszego rzędu". Niezależnie od tego przeglądarki interpretują poprawnie oba sposoby umieszczania NOFRAMES.