ramki

Lemur zaprasza

Czym są ramki w dokumencie HTML?

Wszystkie ważniejsze przeglądarki 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.

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

Ogólna struktura strony

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, aczkolwiek ich obecność nie jest konieczna.

Poniższy przykład obrazuje znaczniki wprowadzone na fikcyjnej stronie prezentującej kilka edytorów HTML. Za chwilę wyjaśnimy ich znaczenie, .

<HTML>

<HEAD>

<TITLE>Edytory HTML</TITLE>

</HEAD>

<BODY>

Zawartość strony dla przeglądarek nie obsługujących ramek

</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

Wyjaśnienie znaczników

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ć . Służą one do wprowadzenia elementów strony, które będą widoczne dla posiadacza przeglądarki, która nie akceptuje ramek. 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. Wygodnym rozwiązaniem może być podanie w ramach NOFRAMES odsyłacza do strony ze spisem treści, która posłuży takiej osobie jako punkt centralny.

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.

Parametry FRAMESET

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, we FRAMESET oprócz FRAMEBORDER=0 powinniśmy jeszcze użyć parametru FRAMESPACING=0. Możemy także dodać BORDER=0, co usunie obramowania z Navigatora, np.:

<frameset cols="20%, *" framespacing="0" frameborder="0" border="0">

Podajemy wyraźnie tę konstrukcję, gdyż jest to dość częste pytanie ze strony początkujących webmasterów.

Uwaga: parametry FRAMESPACING i BORDER nie są przewidziane do stosowania w definicji FRAMESET w specyfikacji HTML 4, aczkolwiek są interpretowane przez, odpowiednio, Internet Explorera i Netscape Navigatora.

Gdybyśmy dzielili stronę na trzy wiersze, moglibyśmy, przez analogię,
użyć konstrukcji:

Parametry FRAME

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 PDF, który moglibyśmy obejrzeć za pomocą specjalnej wtyczki (plugin) wspomagającej Navigatora i Internet Explorera.

Aby przypisać ramce dokument, musimy podać źródło dokumentu. Należy w tym celu użyć konstrukcji:

Przywoływany plik może się znajdować w tym samym katalogu lb jakimkolwiek innym - podajemy wtedy 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ć:

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.

Czytelnik dokumentu może regulować wielkość wyświetlonych ramek, przesuwając brzegi za pomocą myszki. Gdy jednak użyjemy w definicji parametru

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

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.

Ramki w kolumnach i wierszach

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>

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

Odsyłacze

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.

</NOFRAMES>

</FRAMESET>

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="paj2000.htm" TARGET="edytory">Pajączek 2000.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 2000 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.

Posiadacz takij 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 stronę, 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 zestawie.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="paj2000.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". Zalecamy więc oczywiście ten sposób. Niezależnie od tego przeglądarki interpretują poprawnie oba sposoby umieszczania NOFRAMES.