Autorem strony jest Aktualizacja Powrót do pomocy programu
Paweł Wimmer
[e-poczta] pawel.wimmer@lupus.waw.pl
[klepsydra] 15-VI-1997 [Pajaczek 2.0] Pajaczek 2.0
[zielona kropka][zielona kropka][zielona kropka]

Ramki

Uwaga: zawarte na stronie przykłady mogą być oglądane jedynie za pomocą przeglądarek akceptujących ramki (m.in. Navigator 2/4 i Internet Explorer 3/4)



[hand]Czym są ramki w dokumencie HTML?

Wiele edytorów HTML oferuje wspomaganie tworzenia ramek, ale jak na razie tylko kilka przeglądarek potrafi je interpretować, m.in. programy Netscape'a i Microsoftu. Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML, aczkolwiek powoduje wolniejsze wczytywanie stron. Błędna konstrukcja dokumentu z wieloma ramkami może spowodować niepożądane efekty.

Uwaga: ramki nie należą do formalnego standardu HTML 3.2 i są unikane przez wielu autorów stron. Są natomiast rozpatrywane jako propozycja do następnej wersji języka HTML (projekt Cougar).

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 kilku zaledwie poleceń.


[hand]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. Znaczniki <BODY></BODY> są umieszczane w ramach NOFRAMES i są interpretowane przez przeglądarki nie akceptujące ramek. W ramach <BODY></BODY> jest umieszczana "alternatywna" wersja strony.

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=&auto;yes" NAME="edytory" SRC="edyt.htm">

</FRAMESET>

<NOFRAMES>

<BODY>

</BODY>

</NOFRAMES>

</HTML>


[hand]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ć 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".

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.

[hand]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).

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

[hand]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 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.

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.

[hand]Ramki w kolumnach i wierszach

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.


[hand]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.

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

[hand]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>Przykłady</h3>
<ul type=square>
<li><a href="1.htm" target="przyklady">Przykład 1</a>
<li><a href="2.htm" target="przyklady">Przykład 2</a>
<li><a href="3.htm" target="przyklady">Przykład 3</a>
<li><a href="4.htm" target="przyklady">Przykład 4</a>
<li><a href="5.htm" target="przyklady">Przykład 5</a>
<li><a href="6.htm" target="przyklady">Przykład 6</a>
<li><a href="7.htm" target="przyklady">Przykład 7</a>
<li><a href="8.htm" target="przyklady">Przykład 8</a>
</ul>
</body>
</noframes>



Źródła:
  1. Włodzimierz Macewicz "Język składu dokumentu hipertekstowego", Wydawnictwo Mikom, Warszawa 1996
  2. Stephen Le Hunte "HTML Reference Library", plik Helpu dla Windows 3.1 i 95
  3. Ian Graham "HTML Sourcebook. A Complete Guide to HTML 3.0", New York 1996
  4. Hot Dog Professional, plik Helpu
  5. Rafał Wiosna "Każdy chce mieć własną stronę", cykl publikacji w numerach 26/95, 3/96 dwutygodnika PCkurier