A oto definicja ramek w jΩzyku HTML:
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frtest1.htm" name="fr1">
<FRAME SRC="frtest2.htm" name="fr2">
</FRAMESET>
</HTML>
Najpierw informujesz przegl▒darkΩ, ile ramek chcesz wy╢wietliµ. Jest to zdefiniowane w znaczniku <frameset...>. Gdy podasz informacjΩ o wierszach, przegl▒darka podzieli okno na wiersze. Mo┐esz tak┐e utworzyµ kolumny, wstawiaj▒c cols zamiast rows . Mo┐esz r≤wnie┐ u┐yµ kilku znacznik≤w <frameset...>. A oto przyk│ad:
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
</FRAMESET>
Definicja powoduje utworzenie dw≤ch kolumn, przy czym druga kolumna jest podzielona na trzy r≤wne czΩ╢ci. 50%,50% w pierwszym znaczniku <frameset> m≤wi przegl▒darce, jak du┐e maj▒ byµ ramki (jak szerokie kolumny).
My╢lΩ, ┐e podstawowe zasady tworzenia ramek s▒ │atwe do zrozumienia. A teraz sp≤jrz na nastΩpny przyk│ad:
KlikniΩcie na przycisku wy╢wietli okno, w kt≤rym bΩdziesz m≤g│ kolejnymi klikniΩciami na przyciskach przywo│aµ tekst w drugiej ramce (po ka┐dym klikniΩciu u┐yj przycisku Back w listwie przegl▒darki - przyp. t│um.)
Aby utworzyµ ramki, bΩdziesz potrzebowa│ (frames.htm):
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frame1.htm" name="fr1" noresize>
<FRAME SRC="frame2.htm" name="fr2">
</FRAMESET>
</HTML>
Oto ╝r≤d│o frame1.htm:
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function hi() {
document.write("Hi!<br>");
}
function yo() {
document.write("Yo!<br>");
}
function bla() {
document.write("bla bla bla<br>");
}
// -->
</script>
</HEAD>
<BODY>
To jest nasza pierwsza ramka!
</BODY>
</HTML>
A teraz frame2.htm:
<HTML>
<body>
To jest nasza druga ramka!
<p>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Hi" onClick="parent.fr1.hi()">
<INPUT TYPE="button" VALUE="Yo" onClick="parent.fr1.yo()">
<INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>
Wow! Skrypty robi▒ siΩ coraz d│u┐sze! Co zosta│o zrobione? U┐ytkownik │aduje pierwszy plik (frames.htm). Ten z kolei tworzy ramki i │aduje do ramek dokumenty - frame1.htm do ramki o nazwie 'fr1' i frame2.htm do ramki o nazwie 'fr2'. Jak dot▒d jest to jΩzyk HTML. Jak mo┐esz siΩ przekonaµ, frame1.htm zawiera pewne funkcje JavaScript. Ale nie zosta│y one wywo│ane w pierwszym skrypcie. Czy te funkcje w og≤le s▒ do czego╢ potrzebne? A mo┐e jestem zbyt leniwy, ┐eby usun▒µ te niepotrzebne funkcje? Choµ z pewno╢ci▒ jestem typem gnu╢nego faceta, te akurat funkcje s▒ naprawdΩ potrzebne. S▒ one wywo│ywane przez skrypt drugiej ramki 'frame2.htm'. W tym skrypcie tworzymy przyciski, w taki sam spos≤b, jaki opisali╢my w pierwszej czΩ╢ci Wprowadzenia. W│asno╢µ onClick jest ju┐ nam tak┐e znana. Tylko co oznacza to 'parent.fr1'?
Je╢li s▒ Ci znane obiekty, nie bΩdzie to dla Ciebie nowo╢µ. Jak zobaczyli╢my wy┐ej, frame1.htm i frame2.htm s▒ przywo│ywane przez frames.htm. Dokument frames.htm jest nazywany ramk▒ nadrzΩdn▒ dla tych dw≤ch ramek, te za╢, w konsekwencji, s▒ ramkami podrzΩdnymi dla frames.htm. Mo┐esz tutaj dostrzec rodzaj pewnej hierarchii, kt≤ra powoduje interrelacje miΩdzy r≤┐nymi ramkami. Spr≤bujΩ pokazaµ tΩ ideΩ za pomoc▒ semigrafiki:
frames.htm nadrzΩdna
/ \
/ \
/ \
fr1(frame1.htm) fr2(frame2.htm) podrzΩdne
Tego rodzaju uk│ad mo┐na oczywi╢cie rozszerzaµ. Mo┐esz utworzyµ dalsze ramki podrzΩdne dla ramek, kt≤re same s▒ ju┐ podrzΩdne.
frames.htm nadrzΩdna
/ \
/ \
/ \
fr1(frame1.htm) fr2(frame2.htm) podrzΩdne szczebla 1
/ \
/ \
/ \
gchild1 gchild2 podrzΩdne szczebla 2
Je╢li chcesz co╢ zindeksowaµ w ramce nadrzΩdnej z frame2.htm, po prostu wstaw parent przed funkcj▒, kt≤r▒ wywo│ujesz. Adresowanie funkcji zdefiniowanych w frame1.htm z ramki nadrzΩdnej mo┐e byµ wykonane przez wstawienie fr1 przed wywo│aniem funkcji. Dlaczego fr1 ? W skrypcie dla ramki nadrzΩdnej (frames.htm) utworzy│e╢ r≤┐ne ramki i nada│e╢ im odmienne nazwy. Ja sam wybra│em fr1 dla pierwszej ramki. NastΩpny krok jest │atwy. Jak jest wywo│ywana pierwsza ramka, gdy chcesz siΩ do niej odnie╢µ z poziomu drugiej ramki (trzymanej w drugim okienku, nazwanym fr2 )? Jak widzisz, na moim okropnym rysunku nie ma bezpo╢redniego po│▒czenia miΩdzy ramkami frame1.htm i frame2.htm. Nie mo┐esz wiΩc bezpo╢rednio wywo│ywaµ z ramki frame2.htm funkcji zdefiniowanych w frame1.htm. Musisz je wywo│aµ za po╢rednictwem ramki nadrzΩdnej. Poprawnym indeksem jest wiΩc parent.fr1. Je╢li chcesz wywo│aµ funkcjΩ hi() z ramki frame2.htm, napisz po prostu parent.fr1.hi(). To jest w│a╢nie to, co zosta│o zrobione w drugim skrypcie we w│asno╢ci onClick.
Je╢li utworzy│e╢ jakie╢ ramki i kto╢ korzysta z odsy│acza, ramki nie znikaj▒. Tak jest w porz▒dku, je╢li u┐ytkownik 'pozostaje' w Twojej ramce. M≤g│byµ utworzyµ pasek z menu, kt≤ry ca│y czas pozostaje na ekranie. Ale je╢li Tw≤j czytelnik skacze do innej strony w Internecie, pasek z menu mo┐e nie byµ ju┐ wcale potrzebny. Jak wiΩc mo┐esz usun▒µ ramki, gdy zosta│y ju┐ utworzone?
Po prostu dodaj TARGET=_top do znacznika <a href...>. Wygl▒da to mniej wiΩcej tak:
<a href="goaway.html" TARGET="_top">je╢li nie chcesz siΩ ju┐ wiΩcej gapiµ na moj▒ stronΩ</a>
Oczywi╢cie musisz dodaµ TARGET=_top do ka┐dego odsy│acza, kt≤ry wyprowadza czytelnika 'na zewn▒trz'. Je╢li ka┐dy odsy│acz na stronie prowadzi na zewn▒trz, mo┐esz tak┐e napisaµ <base target="_top"> w czΩ╢ci nag│≤wkowej Twojego dokumentu HTML. Oznacza to, ┐e ka┐dy odsy│acz na stronie bΩdzie usuwa│ ramki po klikniΩciu.