Keretek

Keretek (frame-ek) használatával könnyen megvalósítható az oldalak váltása és az áttekinthető navigáció a weblapon. Keretekre osztani egy lapot tulajdonképpen nem is olyan nehéz. Az alapötlet a következő: minden frame egy szabályos, teljes HTML dokumentum, amelyet egy tartalmazó oldal “ural”. Ha a lapot két részre akarjuk osztani, létre kell hoznunk egy-egy szabályos HTML oldalt mindkét frame számára, és egy harmadikat a fődokumentum számára. Ez a fődokumentum fogja
tartalmazni a <FRAME> elemeket, amelyek meghatározzák az oldal kinézetét. Gyakorlatilag ez mást nemigen tartalmaz.

Két fő FRAME elem van a leírónyelvben; a <FRAMESET> és a <FRAME>. Ezeknek az elemeknek és attribútumaik megfelelő alkalmazásával csodákat művelhetünk.

Először is: szükségünk lesz néhány html dokumentumra; tehát indítsuk el Notepad nevű, vagy azzal egyenértékű programunkat és írjuk be a következő kódot:

<HTML>
 <HEAD>
  <TITLE>Frame - oldal</TITLE>
 </HEAD>
 <BODY>
  Egyik
 </BODY>
</HTML>

Mentsük el egyik.html néven, aztán készítsünk még egy lapot:

<HTML>
 <HEAD>
  <TITLE>Frame - oldal</TITLE>
 </HEAD>
 <BODY>
  Másik
 </BODY>
</HTML>

Hogy fantáziánkat bizonyítsuk, mentsük el ezt masik.html néven. Aztán készítsünk még néhányat, mindegyiket más-más szöveggel, és sorban mentsük el őket (más-más néven).

És most ugrik a majom a vízbe: készítsük el a fődokumentumot!


<HTML>
 <HEAD>
  <TITLE>FRAME főlap</TITLE>
 </HEAD>
 <FRAMESET>
 </FRAMESET>
</HTML>

Ki vette észre a furcsaságot? A fődokumentumban nincsen <BODY> tag! Helyét a <FRAMESET> </FRAMESET> páros foglalta el. Ha kicsodálkoztuk magunkat, mentsük el ezt a lapot is, ugyanabba a könyvtárba, ahova az előzőeket is. Hasonlóan fantáziadús nevet fogunk neki adni; legyen index.html.

Mostantól, hogy egyszerűbb, könnyebben átlátható legyen, elhagyom a HTML deklarációkat, csak a <FRAMESET> elemen belül történtekkel foglalkozunk.

Álljunk neki meghatározni, hogyan is nézzenek ki frame-jeink. Mondjuk meg böngészőnknek, hogy ossza fel ablakát két oszlopra; foglalja el mindkettő az ablak 50-50% -át!


<FRAMESET COLS="50%,50%" >
</FRAMESET>

Ettől még nem sok minden fog történni, de kiindulásnak jó lesz :)
Főleg, ha azt is megmondjuk a böngészőnek, hogy mi is legyen az egyes keretekben:


<FRAMESET COLS="50%,50%">
 <FRAME SRC="egyik.html">
 <FRAME SRC="masik.html">
</FRAMESET>

Próbáljuk ki! És tekintsünk büszkén első teljes értékű FRAME-es lapunkra!

Még egy dolog, mielőtt továbbmegyünk: A <FRAMESET> html elemet container, magyarul tartalmazó elemnek nevezzük, mert más elemet, jelesül a <FRAME> elemet tartalmaz. A tartalmazó elemeket onnan ismerhetjük fel, hogy tartalmuk előtt van kezdő <tag>, utána pedig egy záró </tag> deklaráció.

A <FRAMESET> elem végzi el az ablak felosztását…, és semmi mást. Meghatározza hogyan legyen a böngészőablak felosztva: miképpen legyenek a keretek elhelyezve.

Feloszthatjuk-e kettőnél több részre a böngészőablakot? Miért ne? Csak minden egyes frame-hez hozzá kell rendelni egy-egy önálló HTML oldalt.


<FRAMESET COLS=" 20%,20%,20%,20%,20%">
 <FRAME SRC="egyik.html">
 <FRAME SRC="masik.html">
 <FRAME SRC="harmadik.html">
 <FRAME SRC="negyedik.html">
 <FRAME SRC="satobbi.html">
</FRAMESET>

Nézzük meg, milyen lett!

A FRAME-eknek nem kötelező egyforma széleseknek lenniük, de oda kell figyelni, hogy a százalékösszeg -ha egy mód van rá- 100% legyen :)
A szélességet megadhatjuk képpontokban is, ez azonban más lapkiosztási érdekességeket rejt magában.

Egy böngészőablakot nem csak függőlegesen oszthatunk fel. Ha vízszintesen szeretnénk ezt megtenni, a FRAMESET elem attribútumai a következőképpen nézhetnek ki:


<FRAMESET ROWS="10%,20%,30%,15%,25%">
 <FRAME SRC="egyik.html">
 <FRAME SRC="masik.html">
 <FRAME SRC="harmadik.html">
 <FRAME SRC="negyedik.html">
 <FRAME SRC="satobbi.html">
</FRAMESET>

Így kell kinéznie.

Térjünk vissza az első próbálkozásunkhoz, osszuk két egyforma részre az ablakot, függolegesen.


<FRAMESET COLS="50%,50%">
 <FRAME SRC="egyik.html">
 <FRAME SRC="masik.html">
</FRAMESET>

Írjuk át egy kissé a kódot, az első 50% helyett álljon magában az 50, a másodikat cseréljük le egy * -ra.


<FRAMESET COLS="50,*">
 <FRAME SRC="egyik.html">
 <FRAME SRC="masik.html">
</FRAMESET>

Ebben az esetben az első helyen álló szám a FRAME szélességét pixelben (képernyőpont) adja meg, a * pedig a teljes fennmaradó részt jelenti.

Itt kell tennünk egy kis kitérőt, néhány fontos megjegyzés erejéig: Ha készítünk egy háromkeretes oldalt, amelyiknek a bal és jobb kerete 100-100 pixel széles, (<frameset cols="100,*,100">)akkor 800×600 -as képernyőfelbontás esetén a középső frame 600 pixel széles lesz. Marha jól fog kinézni. Otthon, amíg tervezzük (design). Bárkinek megmutatjuk, megdícsér. El is szállunk magunktól, feltöltjük a szerverre: aztán megnézi valaki 640×480 -as felbontással. A középső frame most már csak 440 pixel. Amit oda terveztünk, szétesik, elcsúszik.

Ez az oka a legtöbb frame-mel készített oldal hibájának. A legnépszerűbb frame-kiosztás szerint látható baloldalt egy keskeny navigációs sáv, jobbra pedig egy nagyobb méretű főablak. Ezt is könnyu elszúrni, ha a frame -ek méretét relatívan (%-ban) adjuk meg (pl.: <FRAMESET COLS="15%,85%">). Otthon valószínűleg minden jól fog kinézni, de… más képernyőfelbontással a navigációs sáv esetleg túl keskeny lesz; az ott található linkek több sorba kerülnek, legrosszabb esetben gombnak használt képeink miatt megjelenik egy vízszintes görgetősáv! Oda a design!

A megoldás az lesz, hogy figyelembe vesszük, minek is a %-a az a bizonyos %. Az előző példában említett 15% a vízszintes képernyőfelbontás 15%-a! Ez azt jelenti, hogy a bal oldali frame minden felbontásnál más szélességben fog megjelenni! Mit tehetnénk? A megoldás most sem bonyolult: legyen a bal frame szélessége abszolút módon meghatározva, a jobb frame pedig maradjon relatív (rugalmas: <FRAMESET COLS="120,*">).

Nézzük, mikre lehet még rávenni a frame-eket:
Osszuk fel az első frame-et három részre. A felső kerete legyen 50 pixelnyi magas, a maradék kettő pedig egyforma; és mindegyikben ugyanazt a lapot szeretnénk látni. Íme az ehhez szükséges változtatások:


<FRAMESET COLS="50,*,2*">
 <FRAMESET ROWS="50,*,*">
 <FRAME SRC="elso.html">
 <FRAME SRC="elso.html">
 <FRAME SRC="elso.html">
</FRAMESET>
 <FRAME SRC="masodik.html"><
 <FRAMESET ROWS="50%,50%">
  <FRAME SRC="harmadik.html">
  <FRAME SRC="negyedik.html">
 </FRAMESET>
</FRAMESET>

Minta

Megéri a gépelést (vagy copyzást), érdemes kipróbálni. Az eredmény valami fantasztikus!
Mindenesetre általános jótanácsként vegyük figyelembe, hogy nem érdemes háromnál több részre felosztani az ablakot.

Mi van, ha a böngésző özönvíz előtti?

Itt az ideje gondolnunk a fejlődő országok lakóira is, akik nem rendelkeznek minden igényünket kielégítő böngészővel; valamilyen módon nem ártana, ha ők is meg tudnák tekinteni lapjaink tartalmát
(elvégre azért készítettük, töltöttük fel).

Ha szeretnénk ezt megvalósítani, meg kell ismerkednünk egy új HTML elemmel: ez pedig a <NOFRAMES> lesz.


<FRAMESET COLS="50%,50%">
 <FRAME SRC="egyik.html">
 <FRAME SRC="masik.html">
</FRAMESET>

<NOFRAMES>
 <BODY>

Mint látjuk, a frame-ek deklarálása után kell elhelyezni a <NOFRAMES>
elemet, amit pedig a <BODY> követ.

Ide helyezhetjük el azt a tartalmat, amit azoknak szánunk, akik böngészője nem képes a frame-eket kezelni. A régebbi böngészők nem értelmezik az e fölött lévő tartalmat, csak azzal foglalkoznak, amit a <NOFRAMES>-en és a <BODY>-n belül találnak. A frame-eket ismerő böngészők pedig azt hagyják figyelmen kívül, ami a <NOFRAMES> -en belül van.


  </BODY>
 </NOFRAMES>
</FRAMESET>

Térjünk vissza egy pillanatra elso frame-ünkhöz:


<FRAMESET COLS="50%,50%">
 <FRAME SRC="elso.html">
 <FRAME SRC="masodik.html">
</FRAMESET>

Mint a táblázatok esetén, egy frame-be is illeszthetünk képet; pontosabban a frame tartalma lehet html oldal helyett kép is:


<FRAMESET COLS="50%,50%">
 <FRAME SRC="images/world.gif" WIDTH=146 HEIGHT=162>
 <FRAME SRC="masodik.html">
</FRAMESET>

Természetesen általában nem így szeretnénk frame-ünket elhelyezni, hanem a szokásos kialakításban: baloldalt keskeny navigációs sáv, jobboldalt a tényleges tartalom. Azonban ha beállítjuk a bal frame szélességét;


<FRAMESET COLS="146,*">
 <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>

Minta

érdekes jelenségnek lehetünk tanúi: a 146 pixeles kép nem fér bele a 146 pixeles frame-be! Ennek az az oka, hogy a frame-nek van egy keretszélessége, és a böngésző a frame szélességét a kerete közepéig számolja ki. Most két lehetőségünk van:
Az első, hogy gördítosávokat rakunk frame -ünk oldalaira;

<FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=?>

Figyelem nem becsapódni! A kérdőjel helyére kell beírni a görgetés lehetőségeit:

SCROLLING=

YES

A gördítősáv mindíg látszik

SCROLLING=

NO

A gördítősáv sosem látszik

SCROLLING=

AUTO

A gördítősáv akkor jelenik meg, ha szükséges

Foglaljuk össze, milyen attribútumokat adhatunk egy frame-nek a fent említetteken kívül:

NAME=

“név”

A frame általunk adott neve

SRC=

“URL”

A frame tartalmának helye

FRAMEBORDER=

1, 0

A szegély vastagsága

MARGINWIDTH=

“szám”

Az oldalsó margók vastagsága pixelben

MARGINHEIGHT=

“szám”

A felső, illetve alsó margók vastagsága pixelben

NORESIZE

 

A frame a böngészőben nem átméretezhető

Mielőtt a FRAME fejezetet lezárnánk, meg kell említeni egy fontos lehetőséget, amit frame-ek nélkül nem (pontosabban csak komoly programozási munkával) tudnánk megtenni. Az előzőekben említettük a FRAME NAME attribútumot.


<FRAMESET COLS="20%,80%">
 <FRAME SRC="elso.html" NAME="balframe">
 <FRAME SRC="masodik.html" NAME="jobbframe">
</FRAMESET>

Említettük azt is, hogy a szokásos frame – elrendezés szerint a bal oldali, keskenyebb frame navigációs szerepet tölt be, és a jobboldali (mondjuk így:) főframe pedig a tartalmat szolgáltatja. Ehhez nyújt segítséget a NAME. Hogyan?

Kiépítettük frame-jeinket a fenti példa alapján. Ez szép, de kevés, hiszen nem csak ezt a két oldalt szeretnénk megmutatni a látogatóknak. Van egy harmadik, negyedik, stb. oldalunk, amit szeretnénk a frame-be becsalogatni.
Módosítsuk az “elso.html” nevu oldalunkat töröljük a <BODY>-ból a szöveget; írjuk be helyette a következőt:


<A HREF="elso.html" TARGET="jobbframe">Első</A><BR>
<A HREF="masodik.html" TARGET="jobbframe">Második</A><BR>
<A HREF="harmadik.html" TARGET="jobbframe">Harmadik</A><BR>

Minta

Így ha a baloldali ablakban rákattintunk egy linkre, annak tartalma a jobboldali frame-ben fog megjelenni. Ám nem csak névvel elnevezett frameket használhatunk; pontosabban van négy “mágikus” név:

  1. _top : a linket a teljes böngészőablakban nyitja meg;
  2. _blank : a linket új böngészőablakban nyitja meg;
  3. _self : a linket ugyanabban a frame-ben, vagy ablakban nyitja meg, ahol rákattintottunk;
  4. _parent : a linket a frame “szülő” frameset-jében nyitja meg.

(Ha valaki le tudja írni magyarosabban, szóljon :)

2 válasz

  1. Ors - 2010. 04. 10.

    Nagy segitseg volt… kossz… eleg ertelmesen es egyszeru a magyarazat :D szoval nagy segitseg a kezdoknek :D… kossz

  2. Zoli - 2010. 05. 14.

    Örülök az oldalnak. Sok minden tisztább lett.
    De még mindig nem tudom, hogy hogyan lehet pontos méreteket adni a kereteknek.
    Gondolok itt arra, hogy például ha nagyobb felbontásra kerül a képernyő, akkor ne nyujtsa szét az egészet.
    Szívesen hallgatnék pár tanácsot vagy ötletet.

    Üdv: Mirr-Murr

Szólj hozzá!

  • Kezelés