![[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.
<HTML>
<TITLE>Przyk│ad</TITLE>
<FRAMESET COLS="25%,*%">
<FRAME SCROLLING="auto" NAME="lista" SRC="spist.htm">
<FRAME SCROLLING="yes" NAME="opis" SRC="opis.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, natomiast prawej opis.
<FRAMESET COLS="25%,*">
<FRAME SCROLLING="auto" NAME="lista" SRC="spist.htm">
<FRAME SCROLLING="auto" NAME="opis" SRC="opis.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. Do ramki tej jest │adowana strona zawarta w pliku o nazwie - spist.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 opis. Mo┐na to uczyniµ za pomoc▒ nastΩpuj▒cej konstrukcji:
<A HREF="fp.htm" TARGET="opis">Kuter</A>
<A HREF="hs.htm" TARGET="opis">Tra│owiec</A>
<A HREF="pj.htm" TARGET="opis">Tankowiec</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.
Kuter, tra│owiec i tankowiec s▒ konkretnymi tematami w ich spisie, pozwalaj▒cymi po prostu wybraµ interesuj▒cy nas opis.
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>Typy Statk≤w</h3>
<ul type=square>
<li><a href="fp.htm" target="opis">Kuter</a>
<li><a href="hs.htm" target="opis">Tra│owiec</a>
<li><a href="pj.htm" target="opis">Tankowiec</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.