Framek

A frame-ek segítségével a képernyőt felosztva egyszerre jeleníthetünk meg több html dokumentumot a képernyőn

Használata:

<FRAMESET>
Paraméterek:
<ROWS> vesszővel tagolt lista, amely a sorok kialakítására szolgál a különböző szélesség megadási módok felhasználásával
<COLS> vesszővel tagolt lista, amely az oszlopok kialakítására szolgál a különböző szélesség megadási módok felhasználásával

Méret megadási módok:

  • méret megadása százalékban
    pl. <FRAMESET ROWS="25%,75%">
  • méret megadása képpontokban
    pl. <FRAMESET ROWS="300,600">
  • a terület felosztása bizonyos arányban
    pl. a <FRAMESET ROWS="1*,2*"> 1:2 arányban osztja fel a területet
A <FRAMESET> elemen belül elhelyezett <FRAME> elemekkel definiálhatjuk a tényleges kerettartalmat.
<FRAME> Paraméterei:
NAME: név
Nevet adhatunk az adott frame-nek. (ahhoz kell, hogy hivatkozhassunk a framere)
SRC: a frame URL-je
A területre betöltendő dokumentum nevét (elérését) adhatjuk meg
NORESIZE: átméretezhetőség
Hatására az aktuális területet határoló keret nem mozdítható el
SCROLLING: görgethetőség
Ezzel adhatjuk meg, hogy a keret tartalma görgethető legyen, vagy nem.
Értékei:
YES (kirakja a gördítősávot)
NO (nem rakja ki a görditősávot)
AUTO (csak akkor rakja ki a görditősávot, ha szükséges)
FRAMEBORDER: határoló keret
Azt határozza meg, hogy legyen-e látható keret a frame körül.
Értékei: 1 (van keret) 0 (nincs keret)
MARGINWIDTH: margó szélesség
Az adott frame tartalma és a keret közti vízszintes távolság definiálására szolgál
MARGINHEIGHT: margó magasság
Az adott frame tartalma és a keret közti függőleges távolság definiálására szolgál
Azon böngészők számára, amelyek nem képesek a frameket megjeleníteni létezik egy <NOFRAMES> elem, amelyet a <FRAMESET> </FRAMESET> elemek között kell elhelyezni. Az ebben leírt szöveget azon böngészők jelenítik meg, amelyek nem ismerik a Frame definíciót.

pl.<NOFRAMES> A Te böngésződ nem képes a keretek megjelenítésére. Kérlek olvasd el a <a href="szoveges.html">szöveg</a> változatát az oldalnak. </NOFRAMES>
Két vízszintes elhelyezkedésű framet definiálunk, amelyek egyenlő arányban (50-50%) töltik ki a böngésző ablakot.
<html>
<head>
<title>Framek vízszintesen</title>
</head>
<FRAMESET rows="50%,50%">
<FRAME SRC="demo.html">
<FRAME SRC="kepek.html">
</FRAMESET>
</html>		 Nézd meg!
Most ugyanezt függőlegesen elhelyezkedő framek esetén is nézzük meg:
<html>
<head>
<title>Framek függőlegesen</title>
</head>
<FRAMESET cols="50%,50%">
<FRAME SRC="demo.html">
<FRAME SRC="kepek.html">
</FRAMESET>
</html>		 Nézd meg!
A következő példában három framet definálunk, melyek közül kettőnek abszolut módon adjuk meg a magasságát, a harmadik pedig a maradék helyet fogja betölteni.
<html>
<head>
<title>3 frame</title>
</head>
<FRAMESET rows="150,250,*">
<FRAME SRC="demo.html">
<FRAME SRC="kepek.html">
<FRAME SRC="proba.html">
</FRAMESET>
</html>		 Nézd meg!
Fejlesszük tovább a fenti példát úgy, hogy az első frame tartalmát ne lehessen görgetni, a második frame méretét pedig ne lehessen megváltoztatni.
<html>
<head>
<title>Framek (illusztracio 4)</title>
</head>
<FRAMESET rows="150,250,*">
<FRAME SRC="demo.html" scrolling=no>
<FRAME SRC="kepek.html" noresize>
<FRAME SRC="proba.html">
</FRAMESET>
</html>		 Nézd meg!
Természetesen egy frame tartalmazhat olyan oldalt is, amely maga is frame-ekből áll. Erre mutat példát a következő oldal.
<html>
<head>
<title>Framek (illusztracio 5)</title>
</head>
<FRAMESET cols="40%,*" rows="150,*">
<FRAME SRC="demo.html" >
<FRAME SRC="kepek.html">
<FRAME SRC="proba.html">
<FRAME SRC="frame1.html">
</FRAMESET>
</html>		 Nézd meg!

A fenti hatást úgy is elérhetjük, ha a frameket egymásba ágyazva definiáljuk.
<html>
<head>
<title>Framek (illusztracio 5.2)</title>
</head>
<FRAMESET cols="40%,*" rows="150,*">
<FRAME SRC="demo.html" >
<FRAME SRC="kepek.html">
<FRAME SRC="proba.html" >
<FRAMESET rows="50%,50%">
<FRAME SRC="demo.html">
<FRAME SRC="kepek.html">
</FRAMESET>
</FRAMESET>
</html>		 Nézd meg!

Linkek a framekben

Az alábbi példa azt mutatja be, hogy hogyan lehet meghatározni, hogy egy adott oldal melyik framebe töltődjön be. A példában kialakítunk 5 db framet (nevük: menu1,menu2,elso,masodik,harmadik), majd a menu1 és menu2 frameben elhelyezünk két darab menüt (1.html, 2.html). Azt szeretnénk, hogy a menüből kiválasztott link az üres framek valamelyikében jelenjen meg.

Ehhez a linkeket a TARGET="frame neve" paraméterrel kell kiegészítenünk a linkeket tartalmazó oldalakban.
<html>
<head>
<title>6. pelda</title>
</head>
<frameset rows="50%,*" cols="50%,*">
<frameset cols="50%,*">
<frame name="menu1" src="1.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
<frame name="menu2" src="2.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
</frameset>
<frame name="elso" src="ures.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
<frame name="masodik" src="ures.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
<frame name="harmadik" src="ures.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
</frameset>
</html>		 Nézd meg!
Az 1. html tartalma:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Menü1</title>
</head>
<body bgcolor="#FFFFFF">
<h2>Menü1</h2>
<p><a href="demo.html" target="elso">Demo az elso frameben.</a></p>
<p><a href="demo.html" target="masodik">Demo a második frameben.</a></p>
<p><a href="demo.html" target="harmadik">Demo a harmadik frameben.</a></p>
</body>
</html>		 1. html

A 2.html tartalma:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Menü2</title>
</head>
<body bgcolor="#FFFFFF">
<h2>Menü2</h2>
<p><a href="kepek.html" target="elso">Képek az elso frameben.</a></p>
<p><a href="kepek.html" target="masodik">Képek a második frameben.</a></p>
<p><a href="kepek.html" target="harmadik">Képek a harmadik frameben.</a></p>
</body>
</html>		 2.html

A TARGET paraméter nem csak az általunk definiált framenév lehet, használhatjuk még a _self, _parent, _top illetve _blank opciókat.

target="_self": az adott frame helyére töltődik az oldal.(alapértelmezett)

target="_parent": az adott frame fölé, a szülőframebe töltődik az oldal.

target="_top": legfölülre.töltődik az oldal

target="_blank": egy új böngészőablakba töltődik az oldal