A FRAME egy igen hasznos HTML tag. Segítségével a böngészo felületét kis mezokre oszthatjuk, és azokban különbözo, egymástól független weblapokat jeleníthetünk meg. Ezt úgy képzeljük el, hogy a teljes rendelkezésre álló teret egy táblázatként értelmezzük, amely álltalunk választott, tetszoleges számú és méretu sorból és oszlopból állhat. Az így keletkezo mezok tartalmát pedig egy már létezo weblap határozza meg.
Maga a FRAME szó is keretet jelent, azaz keretbe foglal egy weblapot. Az olyan dokumentumokban ahol használjuk nem kell a <body> elemet használnunk, egyszeruen a <head> és a </html> közzé kell beírnunk a FRAME beállításit és az adott dokumentum ennyibol fog állni. Azaz egy egyszeru inicializáló részt kell ebben az esetben létrehoznunk.
Lássuk a beállítási lehetoségeket:
<frameset rows="sorok mérete" cols="oszlopok mérete"> </frameset> - ez a tag kelti "életre" a FRAME beállítást. Itt kell megadnunk a kívánt sorok és oszlopok méretét, pixelben kell megadnunk. Ha az adott "szelet" nem meghatároozott méretu, akkor használjuk a * karaktert. Pl.: 21,50,* vagy 100,*,20,*
<frame name="hivatkozási név" src="forrás" frameborder="keret szélessége" marginwidth="margó szélessége" marginheight="margó magassága" noresize scrolling="yes|no|auto"> - az elozo tag-pár közzé ékelheto elem a jelenlegi. Ez határozza meg az adott mezo tartalmát. Meg kell adnunk a mezo nevét, azért, hogy késobb egy-egy hivatkozásban a "target" opció használatakor tudjunk rá hivatkozni, így teremtve kapcsolatot a különbözo mezok között. A forrás azt a weblapot kell, hogy jelölje amelyiket be szeretnénk tölteni a cellába. Megadhatjuk a keret és a margók méreteit is. Ha használjuk a "noresize" opciót, akkor az adott mezo nem lesz átméretezheto, a "scrolling" opció a lap szélén megjeleno görgetosávra vonatkozik. "yes" esetén mindíg, "no" esetén soha és "auto" esetén pedig csak akkor látszik, ha szükség van rá.
<noframes> </noframes> - Ez a tagpár az elozoek után használatos. Ma is használatos még néhány olyan régi böngészo amely nem ismeri a FRAME elemet. Ezek számára szól a tag-pár közzé foglalt rész, tehát ez egy alternatíva...
Ezzel megismertük a <FRAME> elem használatát. Most nézzünk rá egy érdekes példát:
Tegyük fel, hogy csinálunk egy olyan weblapot amely 4 db FRAME cellából fog majd állni. Soronként 2-2 darabból. A felso sor vékonyabb lesz, kb: 50 képpont. Ott elhelyezünk két képet, az egyik egy mozgó animáció lesz amelyre kattintva levelet tudunk küldeni magunknak, a másik egy álló kép lesz, amivel "áttérhetünk" nem FRAME-es beállításra.
Az alsó sor tartalmaz majd egy menülistát és egy olyan mezot aminek a tartalma a kiválasztott menüpontoktól függ majd.
Ezen oldalt az eddig megismert HTML elemekkel nagyon egyszeruen megírhatjuk. Lássuk hogyan:
Eloször is a levélküldo rész listája:
<html>
<head>
<title>E-mail</title>
</head>
<body bgcolor=#fc36a3>
<a href="mailto:valaki@cim.hu">
<img src="email.gif" width="100" height="50" border="0">
</a>
</body>
</html>
Aztán a "kilépés", itt a hivatkozás "target" opciójának az értéke _top, ez azt jelenti, hogy az adott böngészo teljes tartalmát újratölti a megadott weblappal. (Jelen esetben kilép a FRAME-bol...)
<html>
<head>
<title>End</title>
</head>
<body bgcolor=#fc36a3>
<center>
<a href="pelda4_end.html" target="_top">
<img src="end.jpg" height="50" border="0">
</a></center>
</body>
</html>
A menüsort egy szimpla listaként hozzuk létre, a hivatkozások mindíg a szomszédos cellába mutatnak, aminek a neve jelen esetben "main":
<html>
<head>
<title>Menü</title>
</head>
<body bgcolor=#ad98f4>
<ul type=square compact>
<a href="pelda4_4a.html" target="main"><li> Elsõ menüpont</a>
<a href="pelda4_4b.html" target="main"><li> Második menüpont</a>
<a href="pelda4_4c.html" target="main"><li> Harmadik menüpont</a>
<a href="pelda4_4d.html" target="main"><li> Negyedik menüpont</a>
</ul>
</body>
</html>
Azadott menüponthoz hozzunk létre 4 db tetszoleges oldalt, pl:
<html>
<head>
<title>1</title>
</head>
<body bgcolor=#9bf95b>
<center>
<h1> Elso menüpont </h1>
</center>
</body>
</html>
A "kilépo" oldal pedig szintén bármi lehet...
Ezzel megismerkedtünk egy összetettebb probléma megoldásával. Az ismert HTML elemek segítségével próbáljunk meg bonyolultabb lapok létrehozását. Biztosan érdekes és hasznos ídotöltés lesz.
