Ramki

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, a oto przyk│ad.

<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µ nieco ni┐ej. 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.

Kliknij w tym miejscu, aby zobaczyµ przyk│ad:

Gdyby╢my dzielili stronΩ na trzy wiersze, mogliby╢my, przez analogiΩ, u┐yµ konstrukcji:

Kliknij w tym miejscu, aby zobaczyµ przyk│ad:

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

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>

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