Ramki to konstrukcja jΩzyka HTML umo┐liwiaj▒ca podzia│ okna przegl▒darki na czΩ╢ci, do kt≤rych mo┐na za│adowaµ odrΩbne strony HTML. Za│adowane do ramek strony mo┐na niezale┐nie zmieniaµ. Definicja ramek znajduje siΩ w oddzielnym pliku HTML, kt≤ry nie zawiera sekcji <BODY>, a jedynie opisuje spos≤b wy╢wietlania innych dokument≤w. Z tego wzglΩdu dokument z definicj▒ ramek mo┐na nazwaµ meta dokumentem.
Zanim zdecydujemy siΩ na wykorzystanie ramek na swoich stronach, nale┐y dok│adnie siΩ przyjrzeµ wszystkim za i przeciw. Zacznijmy od przeciw:
Na wszystkie powy┐sze problemy jest jedno proste lekarstwo: przemy╢lane korzystanie z ramek. Dobry projekt stron jest w stanie zniwelowaµ wszystkie powy┐sze ograniczenia, a serwis zyskuje wiele nowych atut≤w:
Podsumowuj▒c, ramki to narzΩdzie webmastera kt≤re pozwala na │atwe rozwi▒zanie wielu problem≤w (szczeg≤lnie w fazie projektowej). Ramki nie stanowi▒ celu samego w sobie i nie nale┐y zak│adaµ, ┐e sam fakt wykorzystania ramek na stronach wywo│a aplauz ze strony odwiedzaj▒cych.
Dlatego te┐, maj▒c na uwadze wszystkie za i przeciw, niezw│ocznie przechodzimy do kolejnego zagadnienia.
Najprostsza odpowied╝ brzmi nastΩpuj▒co: wtedy, kiedy chcemy, aby odwiedzaj▒cy m≤g│ widzieµ w oknie przegl▒darki wiΩcej ni┐ jeden dokument na raz. Co to oznacza w praktyce? Sformu│owali╢my kilka wskaz≤wek, mog▒cych pom≤c w podjΩciu decyzji, czy zastosowaµ ramki w serwisie:
Do definiowania ramek s│u┐▒ dwa znaczniki HTML: <FRAMESET> i <FRAME>. Pierwszy z nich definiuje zbi≤r ramek, okre╢laj▒c ich wzajemny uk│ad i wielko╢µ przy pomocy atrybutu COLS lub ROWS. <FRAMESET> umieszczamy w dokumencie HTML zamiast znacznika <BODY>. Wewn▒trz wpisujemy znaczniki <FRAME>, po jednym dla ka┐dej ramki. Podstawowym atrybutem <FRAME> jest SRC, definiuj▒cy zewnΩtrzny plik, kt≤ry zostanie za│adowany do ramki.
Poni┐szy przyk│ad pokazuje dokument, w kt≤rym zdefiniowano dwie ramki. Do pierwszej z nich zostanie za│adowany plik ramka1.htm, a do drugiej ramka2.htm. S▒ to zwyk│e dokumenty HTML. Atrybut COLS="50%,50%" oznacza, ┐e ramki maj▒ byµ w oknie przegl▒darki kolumnami o szeroko╢ci r≤wnej po│owie szeroko╢ci okna.
<HTML> <HEAD> <TITLE>Ramki (pytanie 4)</TITLE> </HEAD> <FRAMESET cols="50%,50%"> <FRAME src="ramka1.htm"> <FRAME src="ramka2.htm"> </FRAMESET> </HTML>zobacz w dzia│aniu
Wielko╢ci ramek mo┐na okre╢liµ tak┐e na inne sposoby. Poni┐ej prezentujemy jeszcze kilka przyk│ad≤w.
Dwie pionowe ramki o szeroko╢ci odpowiednio 200 i 500 pikseli (je╢li szeroko╢µ okna przegl▒darki bΩdzie r≤┐na od 200+500 = 700 pikseli, to ramki zostan▒ odpowiednio przeskalowane tak, by zachowaµ proporcje):
<FRAMESET cols="200,500"> <FRAME src="ramka1.htm"> <FRAME src="ramka2.htm"> </FRAMESET>zobacz w dzia│aniu
Dwie pionowe ramki, pierwsza ma szeroko╢ci 180 pikseli, a druga zajmuje pozosta│▒ czΩ╢µ okna:
<FRAMESET cols="180,*"> <FRAME src="ramka1.htm"> <FRAME src="ramka2.htm"> </FRAMESET>zobacz w dzia│aniu
Analogicznie mo┐na definiowaµ rozmiary ramek poziomych, stosuj▒c atrybut ROWS zamiast COLS. Oto trzy poziome ramki, pierwsza (od g≤ry) ma wysoko╢µ 200 pikseli, trzecia 10% wysoko╢ci okna, a druga zajmuje pozosta│▒ czΩ╢µ:
<FRAMESET rows="200,*,10%"> <FRAME src="ramka1.htm"> <FRAME src="ramka2.htm"> <FRAME src="ramka3.htm"> </FRAMESET>zobacz w dzia│aniu
Znaczniki s│u┐▒ce do definiowania struktury ramkowej maj▒ tak┐e dodatkowe atrybuty opisuj▒ce wygl▒d ramek. Zostan▒ one opisane w dalszych punktach. Sposoby tworzenia bardziej skomplikowanych uk│ad≤w ramek znajdziesz w odpowiedzi na pytanie 12.
Ramki obs│uguje Netscape Navigator od wersji 2.0, Internet Explorer od wersji 3.0, a tak┐e aktualne wersje norweskiej Opery (3.5x).
Przegl▒darki tekstowe (np. lynx) radz▒ sobie z ramkami w taki spos≤b, ┐e po za│adowaniu strony zawieraj▒cej definicjΩ <FRAMESET> podaj▒ odwiedzaj▒cemu listΩ plik≤w z ramek w postaci odno╢nik≤w. Pozwala to na obejrzenie serwisu nawet z poziomu konsoli tekstowej. Autor jest jednak odpowiedzialny za zapewnienie po│▒cze± pomiΩdzy stronami serwisu.
Jak widaµ, zdecydowana wiΩkszo╢µ bΩd▒cych obecnie w u┐yciu przegl▒darek obs│uguje ramki. R≤┐nice mog▒ wyst▒piµ w rozumieniu dodatkowych atrybut≤w. Tak┐e obs│uga ramek z poziomu JavaScript mo┐e siΩ r≤┐niµ lub nie byµ mo┐liwa w niekt≤rych przegl▒darkach. Przy rozwi▒zaniach podanych w dalszej czΩ╢ci tego artyku│u bΩdziemy zaznaczaµ, w kt≤rych przegl▒darkach bΩd▒ dzia│aµ.
Do zapewnienia wstecznej kompatybilno╢ci s│u┐y znacznik <NOFRAMES>. Podstawowa struktura definicji ramek z wykorzystaniem tego znacznika wygl▒da nastΩpuj▒co:
<FRAMESET>
<!-- opis struktury ramkowej -->
<NOFRAMES>
<BODY>
<!-- informacje wy╢wietlane
w przegl▒darkach nie
obs│uguj▒cych ramek -->
</BODY>
</NOFRAMES>
</FRAMESET>
W wersji dla leniwych w sekcji <NOFRAMES> umieszczamy informacjΩ o tym, ┐e serwis korzysta z ramek i w celu jego obejrzenia nale┐y pos│u┐yµ siΩ odpowiedni▒ przegl▒dark▒. Nie jest to jednak rozwi▒zanie, kt≤re polecamy. Najlepiej umie╢ciµ w tej sekcji odno╢nik do takiego miejsca w serwisie, z kt≤rego u┐ytkownik mo┐e dotrzeµ przynajmniej do podstawowych informacji.
Elementy <FRAMESET>, <FRAME>, <NOFRAMES> oraz <IFRAME> (om≤wione w drugiej czΩ╢ci artyku│u) s▒ czΩ╢ci▒ standardu HTML 4.0, kt≤ry stanowi oficjaln▒ rekomendacjΩ konsorcjum W3C od kwietnia 1998 roku. Zgodne ze standardem s▒ jedynie nastΩpuj▒ce atrybuty:
Niezgodne ze standardem s▒ atrybuty framespacing i border.
Domy╢lnie przegl▒darki pozwalaj▒ u┐ytkownikowi zmieniµ rozmiar ramki poprzez przeci▒gniΩcie myszk▒ widocznej miΩdzy ramkami krawΩdzi. Je╢li jednak pracowicie dopasowali╢my rozmiary ramek i umieszczonych w nich element≤w graficznych, to zazwyczaj nie chcemy, aby u┐ytkownik popsu│ nasze dzie│o. Mo┐emy mu to uniemo┐liwiµ dodaj▒c do znacznika <FRAME> atrybut NORESIZE:
<FRAME src="ramka1.htm" noresize>
Atrybut unieruchamia granice miΩdzy dan▒ ramk▒ a ramkami s▒siednimi. Tak wiΩc w nastΩpuj▒cym przyk│adzie zachowamy mo┐liwo╢µ zmiany wzajemnego stosunku rozmiar≤w ramek drugiej i trzeciej:
<FRAMESET cols="200,*,10%"> <FRAME src="ramka1.htm" noresize> <FRAME src="ramka2.htm"> <FRAME src="ramka3.htm"> </FRAMESET>
Przegl▒darki domy╢lnie wstawiaj▒ pomiΩdzy ramkami widoczne krawΩdzie. Mo┐emy je usun▒µ stosuj▒c atrybut FRAMEBORDER=0 w obu s▒siaduj▒cych ramkach, miedzy kt≤rymi chcemy usun▒µ krawΩd╝. Aby pozbyµ siΩ odstΩpu pomiΩdzy ramkami, nale┐y dodaµ atrybut FRAMESPACING=0 (dla IE) oraz BORDER=0 (dla NN) do elementu <FRAMESET>:
<FRAMESET cols="200,*,10%" framespacing=0 border=0> <FRAME src="ramka1.htm" frameborder=0> <FRAME src="ramka2.htm" frameborder=0> <FRAME src="ramka3.htm" frameborder=0> </FRAMESET>
Uwaga. UsuniΩcie krawΩdzi miΩdzy ramkami w NN uniemo┐liwia zmianΩ ich rozmiar≤w. W IE zmianΩ rozmiar≤w uniemo┐liwia dopiero usuniΩcie zar≤wno krawΩdzi, jak i odstΩp≤w pomiΩdzy ramkami.
W │atwy spos≤b mo┐emy usun▒µ marginesy w poszczeg≤lnych ramkach. Pozwala to na przyk│ad na uzyskanie dobrego dopasowania element≤w graficznych umieszczonych w s▒siednich ramkach. Do regulacji marginesu poziomego i pionowego s│u┐▒ odpowiednio atrybuty MARGINWIDTH i MARGINHEIGHT:
<FRAMESET cols="200,*,10%" framespacing=0 border=0> <FRAME src="ramka1.htm" frameborder=0 marginwidth=0 marginheight=0> <FRAME src="ramka2.htm" frameborder=0 marginwidth=0 marginheight=0> <FRAME src="ramka3.htm" frameborder=0 marginwidth=0 marginheight=0> </FRAMESET>
Uwaga. W razie potrzeby mo┐emy te┐ ustawiµ r≤┐ne od zera warto╢ci wielko╢ci margines≤w.
Je╢li zawarto╢µ ramki nie mie╢ci siΩ, przegl▒darka w│▒cza suwaki pozwalaj▒ce u┐ytkownikowi przewijaµ zawarto╢µ. Przegl▒darki s▒ jednak czΩsto nadgorliwe i w│▒czaj▒ suwaki nawet wtedy, gdy w ramce pozosta│o jeszcze trochΩ miejsca. W│▒czaj▒ce siΩ w ╢rodku okna suwaki zazwyczaj wygl▒daj▒ nie│adnie, zak│≤caj▒c kompozycjΩ graficzn▒ opracowan▒ przez autora strony. Na szczΩ╢cie mo┐na siΩ przed tym zabezpieczyµ, umieszczaj▒c w znaczniku <FRAME> atrybut SCROLLING o warto╢ci "no":
<FRAMESET cols="200,*,20%"> <FRAME src="ramka1.htm"> <FRAME src="ramka2.htm"> <FRAME src="ramka3.htm" scrolling="no"> </FRAMESET>
Atrybut SCROLLING mo┐e przyjmowaµ jeszcze dwie inne warto╢ci: "yes" (suwaki bΩd▒ stale widoczne) lub "auto" (suwaki w│▒cz▒ siΩ w razie potrzeby - warto╢µ domy╢lna). Nie mo┐na niezale┐nie sterowaµ widoczno╢ci▒ suwaka pionowego i poziomego, jednak przy warto╢ci "auto" w│▒cza siΩ tylko ten suwak, kt≤ry jest potrzebny.
Zastosowanie w znaczniku <FRAMESET> jednocze╢nie atrybut≤w COLS i ROWS powoduje utworzenie kratowej struktury ramek: tyle rzΩd≤w, ile wynika z warto╢ci ROWS i tyle kolumn, ile wynika z COLS. W takim przypadku ci▒g element≤w <FRAME> traktowany jest nastΩpuj▒co: najpierw wype│niany jest pierwszy rz▒d ramek, potem drugi, itd. W poni┐szym przyk│adzie zostan▒ utworzone dwa rzΩdy ramek, w ka┐dym po dwie kolumny:
<FRAMESET cols="*,50" rows="50,*"> <FRAME src="r1.htm"> <FRAME src="r2.htm"> <FRAME src="r3.htm"> <FRAME src="r4.htm"> </FRAMESET>
Dowolnie z│o┐on▒ strukturΩ ramek mo┐na uzyskaµ na dwa sposoby. Pierwszy polega na tym, ┐e dokument │adowany do ramki sam zawiera definicje ramek (elementy <FRAMESET> i <FRAME>). Na og≤│ jednak przejrzystsze jest drugie rozwi▒zanie, polegaj▒ce na zagnie┐d┐aniu element≤w <FRAMESET> w ramach jednego dokumentu. Zagnie┐d┐anie polega na tym, ┐e w miejsce elementu <FRAME> wpisujemy element <FRAMESET> z dowoln▒ struktur▒ ramek. Poni┐sza przyk│adowa struktura spowoduje utworzenie trzech ramek:
<FRAMESET cols="200,*">
<FRAMESET rows="140,*">
<FRAME src="r1.htm">
<FRAME src="r2.htm">
</FRAMESET>
<FRAME src="r3.htm">
</FRAMESET>
DziΩki temu mo┐na utworzyµ nawet tak▒ konstrukcjΩ, jak w jeszcze jednym przyk│adzie. Oczywi╢cie tego typu struktury raczej nie posiadaj▒ walor≤w funkcjonalnych, a co najwy┐ej estetyczne.
Je╢li dokument za│adowany do ramki zawiera odno╢niki, to po klikniΩciu na odno╢nik przegl▒darka domy╢lnie │aduje nowy dokument do tej samej ramki. Aby m≤c zmieniµ zawarto╢µ innej ramki ni┐ ta, w kt≤rej znajduje siΩ odno╢nik, nale┐y nadaµ ramkom nazwy poprzez atrybut NAME. W znaczniku <A> za pomoc▒ atrybutu TARGET okre╢lamy, do kt≤rej ramki ma za│adowaµ siΩ dokument.
Podstawowa konstrukcja:
<FRAMESET cols="300,*"> <FRAME src="lewy.htm" NAME="lewaRamka"> <FRAME src="prawy.htm" NAME="prawaRamka"> </FRAMESET>
a w pliku lewy.htm:
<a href="inny.htm" target="prawaRamka">kliknij</a>
Je╢li ramka o nazwie podanej jako warto╢µ atrybutu TARGET nie istnieje, to przegl▒darka otworzy nowe okno, nada mu tak▒ nazwΩ i do niego za│aduje ┐▒dany dokument. Zamiast nazwy ramki docelowej mo┐na jako warto╢ci atrybutu TARGET u┐yµ s│≤w kluczowych:
Mo┐na zmieniµ ustawienia domy╢lne warto╢ci atrybutu TARGET dla pojedynczego dokumentu, wstawiaj▒c w sekcji <HEAD> nastΩpuj▒ce polecenie:
<BASE target="nazwa_ramki_docelowej">
Jak poprzednio, zamiast nazwy ramki mo┐e wyst▒piµ s│owo kluczowe.
Uwagi. Dla dokument≤w z jednym poziomem ramek (bez zagnie┐d┐onych element≤w <FRAMESET>) _top oznacza to samo co _parent. Dla dokument≤w bez ramek _top oznacza to samo co _parent i to samo co _self.
Czasem chcemy, aby po klikniΩciu na odno╢nik zmieni│a siΩ zawarto╢µ wiΩcej ni┐ jednej ramki. Mo┐na to osi▒gn▒µ na kilka sposob≤w. Ma│o eleganckie rozwi▒zanie polega na prze│adowaniu ca│ej struktury ramkowej lub jej fragmentu - czyli za│adowaniu pliku z definicj▒ ramek r≤┐ni▒c▒ siΩ od poprzedniej jedynie nazwami plik≤w ╝r≤d│owych. Nie polecamy tego sposobu, gdy┐ powoduje zamieszanie na ekranie odwiedzaj▒cego, a nadmiar plik≤w z definicjami ramek niepotrzebnie komplikuje zarz▒dzanie struktur▒ serwisu. Subtelniejsze i bardziej godne polecenia s▒ sposoby wykorzystuj▒ce JavaScript.
Spos≤b najbardziej og≤lny polega na zastosowaniu JavaScriptu bezpo╢rednio w odno╢niku. Na przyk│ad:
<a href="#" onclick="top.frames['ramka1'].location='s1.htm'; top.frames['ramka2'].location='s2.htm'">kliknij</a>
KlikniΩcie na tak skonstruowany odno╢nik spowoduje za│adowanie strony s1.htm do ramki o nazwie ramka1 oraz strony s2.htm do ramki o nazwie ramka2.
Nieco inaczej mo┐emy post▒piµ, je┐eli chcemy, aby za│adowanie dokumentu strona.htm powodowa│o za│adowanie dokumentu strona_a.htm do ramki o nazwie ramka2. W dokumencie strona.htm umieszczamy nastΩpuj▒cy fragment kodu JavaScript:
<SCRIPT language="javascript">
function init(){
if(top.frames['ramka2']){
top.frames['ramka2'].location = 'strona_a.htm';
}
}
window.onload=init;
</SCRIPT>
Odno╢nik do strony strona.htm mo┐e teraz byµ zwyk│ym odno╢nikiem HTML. Skrypt zostanie wykonany zaraz po za│adowaniu siΩ pliku strona.htm. O ile istnieµ bΩdzie ramka ramka2, zostanie do niej za│adowany plik o nazwie strona_a.htm.
Problem ten dotyczy wszystkich typ≤w serwis≤w, niezale┐nie od tego czy wykorzystuj▒ ramki czy te┐ nie.
Wyobra╝my sobie tak▒ sytuacjΩ: zrobili╢my ╢wietny serwis internetowy. Wielu webmaster≤w umieszcza na swoich stronach odno╢niki do naszego serwisu. Wiele z tych odno╢nik≤w znajduje siΩ na stronach z ramkami. Je╢li webmaster bΩdzie nieuwa┐ny lub niestaranny, to po klikniΩciu w odno╢nik nasza piΩkna strona znajdzie siΩ w ╢rodku cudzej struktury ramkowej. Negatywne konsekwencje takiego faktu s▒ oczywiste, wymie±my choµby zak│≤cenie koncepcji graficznej i ograniczenie miejsca na prezentacjΩ tre╢ci serwisu. Niemo┐liwe jest wytropienie wszystkich odno╢nik≤w do naszego serwisu i zwr≤cenie uwagi webmasterom, ┐e powinni zastosowaµ atrybut _top lub _blank w odno╢niku (patrz pytanie 13). Czy zatem mo┐emy co╢ na to poradziµ? Tak, z pomoc▒ JavaScriptu:
<SCRIPT language="JavaScript">
<!--
if(top != self){
top.location = self.location
}
//-->
</SCRIPT>
Skrypt najpierw sprawdza, czy dokument znajduje siΩ w pe│nym oknie przegl▒darki (top). Je╢li nie, to znaczy, ┐e trafili╢my do jakiej╢ ramki. W takim przypadku skrypt │aduje dokument na najwy┐szy poziom, czyli omija wszystkie ramki.
Uwaga: je╢li nasz serwis ma strukturΩ ramkow▒, to kod nale┐y wstawiµ w sekcji HEAD w dokumencie z definicj▒ ramek. W przeciwnym razie najlepiej dodaµ go we wszystkich dokumentach.
Rozwa┐my trochΩ inny scenariusz: zrobili╢my ╢wietny serwis wykorzystuj▒cy ramki. Znowu wielu webmaster≤w umieszcza na swoich stronach odno╢niki do naszego serwisu. Je┐eli odno╢nik do naszego serwisu jest odno╢nikiem do strony g│≤wnej, to wszystko jest w porz▒dku. Je╢li jednak kto╢ chcia│by umie╢ciµ odno╢nik do konkretnej strony naszego serwisu, to zaczynaj▒ siΩ problemy. Strona za│aduje siΩ bowiem do pe│nego okna przegl▒darki, a nie do w│a╢ciwej struktury ramkowej. Mo┐e to oznaczaµ, ┐e odwiedzaj▒cy zostanie pozbawiony menu nawigacyjnego lub innych istotnych element≤w serwisu. Na szczΩ╢cie z pomoc▒ JavaScriptu mo┐emy sprawdziµ, czy dokument za│adowa│ siΩ do ramki i w razie potrzeby skorygowaµ problem.
Wykorzystamy fakt, ┐e z poziomu skryptu mamy mo┐liwo╢µ analizowania adres≤w URL postaci http://nazwa.serwera/jakas_strona.html?argument. Pomys│ polega na tym, ┐e po za│adowaniu strony wewnΩtrznej s.html sprawdzimy, czy znalaz│a siΩ w ramce i je╢li nie, to za│adujemy do okna przegl▒darki dokument z definicj▒ ramek i odpowiednim argumentem bΩd▒cym nazw▒ bie┐▒cej strony: http://nazwa.serwera/strona_z_ramkami.html?s.html. Po za│adowaniu strony strona_z_ramkami.html sprawdzamy, czy istnieje fragment adresu po znaku '?'. Je╢li tak, to odczytujemy go i │adujemy do odpowiedniej ramki dokument o zadanej nazwie.
Na stronach wewnΩtrznych umieszczamy nastΩpuj▒cy fragment kodu (w sekcji HEAD):
<SCRIPT language="JavaScript">
<!--
if(top == self){
top.location = "/index.html?" + self.location.href
}
//-->
</SCRIPT>
Skrypt wykonuje nastΩpuj▒c▒ operacjΩ: je┐eli dokument nie jest w ramkach (top == self) to │adujemy plik index.html (definicja ramek) z argumentem bΩd▒cym adresem bie┐▒cego dokumentu (self.location.href).
W dokumencie z definicj▒ ramek w sekcji HEAD wstawiamy:
<SCRIPT language="JavaScript">
<!--
function init(){
if(top.location.search.length>0){
top.frames.glownaRamka.location = top.location.search.substring(1);
}
}
window.onload=init;
//-->
</SCRIPT>
Je┐eli dokument zosta│ za│adowany z argumentem (top.location.search.length>0), to do ramki z tre╢ci▒ (w naszym przyk│adzie nazywa siΩ ona glownaRamka) │adujemy dokument, kt≤rego nazwa jest argumentem. DostΩp do fragmentu adresu za znakiem '?' daje nam zmienna location.search. Wyra┐enie location.search.substring(1) usuwa z ko±cowej czΩ╢ci adresu pierwszy znak, czyli znak zapytania.
Najpro╢ciej:
top.nazwaRamki.nazwaFunkcji()
nazwaRamki to nazwa ramki, w kt≤rej znajduje siΩ dokument zawieraj▒cy funkcjΩ nazwaFunkcji(), kt≤r▒ chcemy wykonaµ. Je╢li taka ramka nie istnieje (na przyk│ad dlatego, ┐e dokument zosta│ za│adowany do pe│nego okna przegl▒darki) lub je╢li za│adowany do niego dokument nie zawiera spodziewanej funkcji, rezultatem bΩdzie b│▒d JavaScript. Dlatego dobr▒ praktyk▒ jest sprawdzenie, czy wszystko jest w porz▒dku i dopiero wtedy wywo│anie funkcji. Wygl▒da to nastΩpuj▒co:
if(top.nazwaRamki && top.nazwaRamki.nazwaFunkcji) {
top.nazwaRamki.nazwaFunkcji()
}
Inaczej m≤wi▒c: je┐eli istnieje ramka nazwaRamki i istnieje w tej ramce funkcja nazwaFunkcji, to wywo│aj j▒.
Przyjmijmy nastΩpuj▒ce za│o┐enia:
Co chcemy osi▒gn▒µ? Chcemy, aby po za│adowaniu strony stronaPierwsza.html odpowiadaj▒cy jej obrazek zmieni│ siΩ na obrazek obr1_a.gif. Analogicznie, po za│adowaniu innej strony odpowiadaj▒cy jej obrazek ma siΩ zmieniµ. DziΩki temu w ka┐dej chwili menu naszego serwisu bΩdzie wskazywaµ, w kt≤rym dziale znajduje siΩ odwiedzaj▒cy.
Skrypt, kt≤ry teraz prezentujemy, jest dosyµ z│o┐ony i uniwersalny i nie bΩdziemy szczeg≤│owo opisywaµ zasad jego dzia│ania. Przedstawimy natomiast spos≤b jego wykorzystania.
W sekcji HEAD pliku z menu serwisu wstawiamy skrypt:
<SCRIPT language="JavaScript">
<!--
img = document.images;
ie4 = document.all;
gotowe = 0;
if(img) {
imgNazwy = new Array("obr1", "obr2", "obr3");
imgLiczba = imgNazwy.length;
for(i=0; i<imgLiczba; i++) {
eval(imgNazwy[i] + " = new Image()");
eval(imgNazwy[i] + ".src = 'obrazki/" + imgNazwy[i] + ".gif'");
eval(imgNazwy[i] + "_a = new Image()");
eval(imgNazwy[i] + "_a.src = 'obrazki/" + imgNazwy[i] + "_a.gif'");
}
gotowe = 1;
}
function fOn(s) {
if(img && gotowe) {
for(i=0; i<imgLiczba; i++) {
eval("document.images." + imgNazwy [i] + "Img.src = " + imgNazwy[i] + ".src" );
}
if(s){
eval("document.images." + s + "Img.src = " + s + "_a.src" )
}
}
}
//-->
</SCRIPT>
Funkcja fOn() dezaktywuje wszystkie obrazki w menu (przywraca je do wersji podstawowej), a nastΩpnie aktywuje obrazek wskazany przez argument wywo│ania.
W sekcji BODY tego samego dokumentu wstawiamy obrazki stanowi▒ce odno╢niki:
<A href="stronaPierwsza.html"
target="ramkaGlowna"
onclick="if(ie4){this.blur()}"><IMG
name="obr1Img"
src="obrazki/obr1.gif"
width=150 height=20
alt="Punkt 1" border=0></A>
<A href="stronaDruga.html"
target="ramkaGlowna"
onclick="if(ie4){this.blur()}"><IMG
name="obr2Img"
src="obrazki/obr2.gif"
width=150 height=20
alt="Punkt 2" border=0></A>
<A href="stronaTrzecia.html"
target="ramkaGlowna"
onclick="if(ie4){this.blur()}"><IMG
name="obr3Img"
src="obrazki/obr3.gif"
width=150 height=20
alt="Punkt 3" border=0></A>
W dokumencie stronaPierwsza.html wywo│ujemy zaraz po za│adowaniu funkcjΩ fOn() z ramki menu, przekazuj▒c jako parametr nazwΩ obrazka, kt≤ry ma zostaµ obecnie wyr≤┐niony:
<SCRIPT language="JavaScript">
<!--
function init() {
if(top.ramkaMenu && top.ramkaMenu.fOn) {
top.ramkaMenu.fOn('obr1')
}
}
window.onload=init;
//-->
</SCRIPT>
W dokumentach stronaDruga.html, stronaTrzecia.html, itd. umieszczamy analogiczny skrypt zmieniaj▒c jedynie argument wywo│ania funkcji fOn(). Wywo│anie funkcji bez argumentu powoduje dezaktywacjΩ wszystkich obrazk≤w, ┐aden nie bΩdzie wyr≤┐niony.
DziΩki temu, ┐e wyr≤┐nienie odpowiedniego obrazka dokonywane jest jako rezultat za│adowania strony wewnΩtrznej, a nie klikniΩcia w odno╢nik w menu, stan ramki menu i zawarto╢µ ramki z tre╢ci▒ pozostanie zsynchronizowana nawet, je┐eli zmiana dzia│u serwisu nast▒pi w wyniku innej akcji u┐ytkownika ni┐ klikniΩcie w menu, na przyk│ad u┐ytkownik kliknie w odno╢nik na stronie wewnΩtrznej lub wywo│a funkcje Back/Forward przegl▒darki.
Aby zmieniµ liczbΩ lub nazwy poszczeg≤lnych obrazk≤w nale┐y zmodyfikowaµ nastΩpuj▒cy fragment kodu, zawieraj▒cy listΩ nazw obrazk≤w (bez rozszerze±):
imgNazwy = new Array("obr1", "obr2", "obr3");
Obrazk≤w mo┐e byµ dowolna liczba. Zak│adamy, ┐e trzymamy siΩ konwencji, ┐e wszystkie obrazki znajduj▒ siΩ w katalogu obrazki, s▒ w formacie .gif oraz aktywne wersje obrazk≤w maj▒ dodane do nazwy _a. PamiΩtaµ te┐ nale┐y o odpowiedniej modyfikacji kodu HTML umieszczonego w sekcji BODY pliku menu: musi zawieraµ tyle obrazk≤w stanowi▒cych odno╢niki, ile zdefiniowali╢my nazw obrazk≤w. Obrazkom ustawiamy atrybut NAME r≤wny nazwie obrazka z przyrostkiem Img.
Opisan▒ tu technikΩ mo┐na stre╢ciµ nastΩpuj▒co: zawarto╢µ jednej ramki jest niezmienna, natomiast │adowanie dokument≤w do drugiej ramki powoduje wywo│ywanie funkcji JavaScript zawartych w pierwszej. Mo┐na wykorzystaµ to podej╢cie tak┐e w innych przypadkach, w kt≤rych potrzebujemy wprowadzaµ drobne zmiany w jednej ramce w zale┐no╢ci od zwarto╢ci innej ramki. Pozwala to unikn▒µ zbΩdnego prze│adowywania ramki, kt≤rej zawarto╢µ zmienia siΩ minimalnie.
Microsoft wprowadzi│ w wersji 4.0 swojej przegl▒darki tak zwane p│ywaj▒ce ramki, czyli elementy IFRAME. Podstawowa r≤┐nica w stosunku do zwyk│ych ramek polega na tym, ┐e p│ywaj▒ce ramki mo┐na umie╢ciµ w dowolnym miejscu na stronie HTML. Pozwala to na uzyskanie na stronie okienka z innym dokumentem.
Sk│adnia wygl▒da nastΩpuj▒co:
<IFRAME src="nazwa_pliku" width="szekosc" height="wysokosc" align="wyrownanie"></IFRAME>
Znacznik IFRAME mo┐e posiadaµ tak┐e wszystkie te atrybuty, co znacznik FRAME (pytanie 7).
zobacz w dzia│aniu (tylko IE)
Niestety p│ywaj▒ce ramki dzia│aj▒ tylko w Internet Explorerze, dlatego te┐ nie polecamy wykorzystywania tego elementu na swoich stronach. Praktyczne zastosowanie (odrobinΩ niezgodne z pierwotnym przeznaczeniem tego znacznika...) elementu IFRAME opisali╢my w artykule "W poszukiwaniu raju" (DHTML czΩ╢µ 8, Magazyn //WWW sierpie± 1999).
I tak, i nie. Dodanie dokumentu za│adowanego do ramki do zak│adek realizujemy podobnie jak w przypadku zwyk│ych dokument≤w HTML: klikamy prawym klawiszem w oknie dokumentu i wybieramy (w zale┐no╢ci od przegl▒darki) Add Bookmark, Add to Favorites, Dodaj do ulubionych. Trzeba jednak wiedzieµ, ┐e wybranie z zak│adek tak dodanego odno╢nika spowoduje za│adowanie jedynie tego dokumentu, na kt≤rym kliknΩli╢my prawym klawiszem myszki, a nie ca│ej struktury ramek (chyba, ┐e w serwisie zastosowano rozwi▒zanie z punktu 16). Mo┐emy te┐ post▒piµ inaczej: wybieramy z menu (zale┐nie od przegl▒darki) Bookmarks -> Add Bookmark, Ulubione -> Dodaj do Ulubionych itp. Tym razem w naszych zak│adkach znajdzie siΩ odno╢nik do kompletnej struktury ramek, ale za to za ka┐dym razem za│adowane zostan▒ do ramek dokumenty pocz▒tkowe, a nie te, kt≤re znajdowa│y siΩ w nich w chwili dodawania do zak│adek. Jak widaµ, ┐adne z tych rozwi▒za± nie jest optymalne.
Starali╢my siΩ odpowiedzieµ na wszystkie zwi▒zane z ramkami pytania, jakie przysz│y nam do g│owy. Je╢li jednak co╢ pozosta│o niejasne lub masz pytania dotycz▒ce ramek, na kt≤re nie uda│o nam siΩ odpowiedzieµ, napisz do nas (pawelek@webmedia.pl lub onfocus@webmedia.pl) lub na adres redakcji (redakcja@www-mag.com.pl). Za oko│o dwa miesi▒ce ten artyku│ znajdzie siΩ w serwisie internetowym Magazynu //WWW (http://www-mag.com.pl), uzupe│niony o odpowiedzi na dodatkowe pytania Czytelnik≤w.