Már a Netscape 2.0 és az Internet Explorer 3.0 böngészõk is ismerik a HTML nyelv egyik leglátványosabb és leghasznosabb eszközét, az oszott képernyõt. Ennek a lényege, hogy a képernyõt feloszthatjuk több részre vízszintesen ill. függõlegesen vagy keverve, és ezen kis részekbe külön-külön újabb HTML oldalakat tölthetünk be.

          Ha felosztást szeretnénk végezni, akkor a dokumentumunkban csak annyit kell leírnunk, hogy milyen felosztásról beszélünk, milyen arányban történik a felosztás, milyen oldalak töltõdjenek be az adott részekbe, stb. Ezért a felosztást végzõ HTML dokumentumnak nem lesz "teste" (<body>...</body>) (!) , hiszen ez a dokumentum csak a felosztást végzi, ezen kívûl semmilyen objektum nem szabad szerepeljen a dokumentumban, így nincs értelme a <body> TAG-et belerakni. Most azt gondolnánk, hogy akkor a felosztást a <head> </head> TAG-pár közé kell zárnunk. Ez sem igaz, mert ott csak az oldal tulajdonságaira vonatkozó dolgokról beszélhetünk... Azonban ezt a HTML részt már megadhatjuk <body> helyén, mert nem történik semmi baj. És fontos itt megadni az oldal címét, mert ez fog végig fent lenni a Címsorban, amíg a felosztáson belül dolgozunk, és nem az egyes felosztott részre megnyílt dokumentumok címei. A felosztást tehát a <head> TAG bezárása után, vagyis a </head> parancsszó után történik.

          A felosztást a <frameset> </frameset> TAG segítségével végezhetjük el. Ennek paramétereként megadhatjuk, hogy sor vagy oszlopfelsztásról beszélünk, és hogy hány részre osztódjon a képernyõ, ill. milyen arányban ( frameset = frame setting = keret beállítások).

Sor- ill. oszlopfelosztás:
Ha soronkénti felosztást szeretnénk, akkor a rows paramétert használjuk ( rows = sorok). Ennek értéke attól függ, hogy milyen felosztást várunk eredményül. Ha azt szeretnénk pl., hogy az ablakunk két részre legyen felosztva és egyenlõen, akkor így kell írnunk: rows="50%,50%" . Ha azt szeretnénk, hogy 3 részre legyen felosztva: az elsõ rész foglalja el az oldal 18%-ét, a második 200 pixelnyit, míg a harmadik a megmaradt területet - akkor ezt kell írnunk: rows="18%,200,*". A * tehát a fentmaradó területet jelzi. Miután ezt beállítottuk részleteznünk kell, hogy hova mit töltsön be. De ezt már nem a <frameset> TAG paramétereként kell elhelyeznünk, hanem a <frameset> TAG és a </frameset> záró-TAG közé kell beraknunk, mint belsõ TAG. Ez név szerint a <frame> TAG, amit nem kell bezárnunk (!) ( frame = keret). Ezt a TAG-et annyíszor kell használnunk, ahány részre felosztottuk az oldalt. Mindig ennek paramétereként megadjuk hogy az adott részbe melyik HTML dokumentum töltõdjön be, ill. az adott rész tulajdonságairól beszélhetünk... Azt, hogy az egyes keretekbe melyik oldal töltõdjön be, az src paraméterrel adjuk meg ( src = source = forrás). Az oszlopos felosztás is ugyanígy történik, csak ott nem a rows paramétert használjuk, hanem a cols -t ( cols = columns = oszlopok).

<html>
<head>
<title> Ez az oldal két egyenlő részre van felosztva függőlegesen</title>
</head>
<frameset rows="50%,50%">
  <frame src="elso.html">
  <frame src="masodik.html">
</frameset>
</html>

<html>
<head>
<title> Ez az három részre van felosztva vízszintesen: 18%, 200px és a megmaradt terület</title>
</head>
<frameset cols="18%,200,*">
  <frame src="elso.html">
  <frame src="masodik.html">
  <frame src="harmadik.html">
</frameset>
</html>

Görgõsávok:
Ha több részre osztjuk fel az oldalt, akkor minden egyes rész mellett megjelenik autómatikusan a görgõsáv (scrollbar), ha túlhaladjuk vízszintesen vagy függõlegesen a az ablakban meghatározott területet. Ha elszeretnénk tüntetni teljesen ezt a görgõsávot, még abban az esetben is, ha túlhaladta a neki meghatározott területet, akkor azt az adott rész <frame> TAG-jében tudjuk beállítani. Itt azt is be tudjuk állítani, hogy a görgõsáv mindig ott legyen attól függetlenül, hogy van-e rá szükség vagy nincs. A paraméter neve, amit erre a funkcióra használunk a scrolling ( scrolling = görgetés). Értéke lehet YES, NO vagy AUTO ( YES = igen; NO = nem; AUTO = automatikus).

<html>
<head>
<title> Ez egy három részre felosztott oldal más-más görgõ-tulajdonságokkal</title>
</head>
<frameset cols="33%,33%,33%">
  <frame src="elso.html" scrolling="YES">
  <frame src="masodik.html" scrolling="NO">
  <frame src="alma.html" scrolling="AUTO">
</frameset>
</html>

Méretezés:
Ha így hagyjuk a felosztást, akkor akárki meg tudja változtatni a egyes részek méretét, az õket összekötõ keret mozgatásával. Ezt meg tudjuk akadályozni nagyon egyszerûen. Az adott rész <frame> TAG-jébe, ahol nem szeretnénk, hogy a mellette levõ keret mozgatható legyen be kell írnunk egy olyan paramétert, aminek nincs értéke, a noresize -t ( noresize = could not resizable = nem újraméretezhetõ).

<html>
<head>
<title> Három részes felosztott oldal - az elsõt+másodikat összekötõ keret nem mozgatható, de a második igen</title>
</head>
<frameset cols="33%,33%,33%">
  <frame src="elso.html" scrolling="YES" noresize>
  <frame src="masodik.html" scrolling="NO">
  <frame src="harmadik.html" scrolling="AUTO">
</frameset>
</html>

Keretszegélyezés:
Idáig láthattuk, hogy az egyes részeket elválasztja egy vonal. Ezt el is tudjuk tüntetni, vagy állítani tudunk a vastagságán, esetleg a részek közötti teret is tudjuk állítani. Általában, ha felosztást végzünk nem igazán szoktuk berakni az elválasztó vonalat, fõleg esztétikai okok miatt. Ezeket a paramétereket a <frameset> TAG-be kell berakni. A frameborder paraméter arra való, hogy eldöntsük, akarunk szegélyt vagy nem. Így értéke lehet YES, vagy NO ( frameborder = keret-szegély). Ha adunk szegélyt, akkor meg lehet adni a vastagságát a border paraméterrel, értéke 0->... lehet (! Ha nem adtunk szegélyt, akkor is a border értékét 0-ra kell állítani, mert az egyes böngészõk mégis megjeleníthetik !). A részek közti távolságot a framespacing paraméter adja meg, amelynek értékét pixelben állíhatjuk be.

<html>
<head>
<title> Két rész, nincs szegély </title>
</head>
<frameset cols="20%,80%" frameborder="NO" border="0">
  <frame src="elso.html">
  <frame src="masodik.html">
 </frameset>
</html>

<html>
<head>
<title> Két rész, van szegély, méret 8, keretek közti távolság 20 px</title>
</head>
<frameset cols="20%,80%" frameborder="YES" border="8" framespacing="20">
  <frame src="elso.html">
  <frame src="masodik.html">
 </frameset>
</html>

Keretek (részek) nevei:
Az egyes részeknek fontos, hogy nevet adjunk, mert akkor tudunk az adott részre hivatkozni bármelyik részbõl is. Az adott rész nevét a name nevû paraméterrel adhatjuk meg ( name = név). Erre azért van szükség, mert pl. ha egy linket készitünk az elsõ részben, de azt szeretnénk, hogy a második részben jöjjön elõ a linken hívott oldal, akkor elõször is elnevezzük a két részt pl. "bal" és "jobb" - nak, majd az elsõ részen elhelyezett hivatkozás target nevû paraméter értéke nem a megszokott "_blank", "_self" stb., hanem a "jobb" lesz.

<html>
<head>
<title> Két rész, az elsõbõl hivatkozunk a második részbe.</title>
</head>
<frameset cols="30%,70%">
  <frame src="bal.html" scrolling="NO" noresize name="bal">
   <frame src="jobb.html" scrolling="AUTO" name="jobb">
</frameset>
</html>

{bal.html}
<html>
<head>
<title> Bal oldali rész </title>
</head>
<body>
<a href="alma.html" target="jobb"> Az almai fajtai </a>
(ezt a jobb oldali reszbe fogja elohozni)
</body>
</html>

Egymásba épített frame-k:
Az elején még említettem, hogy kombinálni is lehet ezeket a kereteket. Az egymásbaépítettségrõl azért beszélek, mert ha pl. azt akarjuk, hogy két oszlopra legyen osztva a képernyõnk, de még a jobb oldali rész még két felé vízszintesen, akkor már a második felosztás egy belsõ felosztás. Nézzük ennek a megvalósítását, majd aztán a magyarázatát:

<html>
<head>
<title> Két rész, a jobb oldali rész még kettõre van osztva vízszintesen</title>
</head>
<frameset cols="30%,70%">
  <frame src="elso.html" scrolling="NO" noresize name="bal">
   <frameset rows="35%,65%">
    <frame src="masodik.html" noresize name="felso">
    <frame src="harmadik.html" noresize name="also">
  </frameset>
</frameset>
</html>

Tehát ez elsõ (külsõ) felosztás két részre osztja az oldalt: a bal oldali részbe az elso.html -t tölti be, és ahelyett, hgy a jobb oldali részbe valamit betöltene, meghív még egy felosztást, amely a jobb oldali területet még két részre osztja vízszintesen, a felsõ részbe a masodik.html -t az alsó részbe a harmadik.html -t tölti be. Persze ez csak egy példa, ezt még sokféleképpen lehet kombinálni.


Példák:
  10. Keretek

Gyakorlatok:
 10. Keretek

Elõzõ lecke  Következõ lecke