Framek használata

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 különböző méretdefiniciók egymással is kombinálhatóak, ahogy azt a példákban látni fogjuk))

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>

    Az 1. példában két vízszintes elhelyezkedésű framet definiálunk, amelyek egyenlő arányban (50-50%) töltik ki az a böngésző ablakot.

    1. példa (frame1.html)

    <html>
    <head>
    <title>Framek (illusztracio 1)</title>
    </head>
    <FRAMESET rows="50%,50%">
    <FRAME SRC="demo.html">
    <FRAME SRC="kepek.html">
    </FRAMESET>
    </html>

    		 Hatása
    demo
    kepek

    A kódot módosíthatod az alábbi ablakban:

    Most ugyanezt függőlegesen elhelyezkedő framek esetén is nézzük meg:

    2. példa (frame2.html)

    <html>
    <head>
    <title>Framek (illusztracio 2)</title>
    </head>
    <FRAMESET cols="50%,50%">
    <FRAME SRC="demo.html">
    <FRAME SRC="kepek.html">
    </FRAMESET>
    </html>

    		 Hatása
    d k
    e e
    m p
    o e
    k

    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.

    3.példa (frame3.html)

    <html>
    <head>
    <title>Framek (illusztracio 3)</title>
    </head>
    <FRAMESET rows="150,250,*">
    <FRAME SRC="demo.html">
    <FRAME SRC="kepek.html">
    <FRAME SRC="proba.html">
    </FRAMESET>
    </html>

    		 Hatása
    demo
    kepek
    proba

    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.

    4.példa (frame4.html)

    <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>

    		 Hatása
    demo
    kepek
    proba

    Természetesen egy frame tartalmazhat olyan oldalt is, amely maga is frame-ekből áll. Erre mutat példát a következő oldal.

    5. példa (frame5.html)

    <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>

    		 Hatása
    demo kepek
    p
    r
    o
    b
    a    		 f

    demo
    r
    a
    m
    e
    1

    kepek

    A fenti hatást úgy is elérhetjük, ha a frameket egymásba ágyazva definiáljuk.

    5.2 példa (frame5_2.html)

    <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>

    		 Hatása
    demo kepek
    p
    r
    o
    b
    a    		 f

    demo
    r
    a
    m
    e
    1

    kepek

    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.

    6.pelda (frame6.html)

    <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>

     

    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>

    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>

    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

     

    Anchorok

    Gyakorta látunk olyan megoldásokat, ahol a link egy oldal valamelyik részére mutat. (ez az oldal természetesen lehet egy másik frameben is.) Ezt a lehetőséget az anchorok biztosítják nekünk. Ez annyit jelent, hogy az oldal egy részét névvel látjuk el, majd erre a névre hivatkozhatunk más oldalakról is.

    Formátuma:

    <A name="azonosito"> ..... </A>

    Ekkor az oldal ezen részére a <a href="#azonosito"> ... </a> linkkel hivatkozhatunk. (az azonosítónak egyedinek kell lennie a dokumentumon belül)

    Ha a hivatkozás egy másik HTML dokumentum egy részére mutat, akkor az anchor azonosítója előtt az oldal nevét (ill. elérhetőségét) is fel kell tüntetni.

    Formátuma

    <a href="masik_html_oldal#azonosito"> ... </a>

    pl. Nézzük a linkek oldal egy részletét. Az oldal tetején kiválaszthatjuk, hogy a dokumentum mely részére kívánunk ugrani. pl. A Java linkre kattintva a Javaval foglalkozó részhez ugorhatunk. Ehhez annnyit kellett tenni, hogy a Java címsort ellátjuk egy anchorral, amelynek a neve legyen pl. java.

    <a name="java">Java</a>

    Így a dokumentum ezen részére már hivatkozhatunk. Ezt meg is tesszük a dokumentum elején, a következőképpen:

    <a href="#java">JAVA</a>

    Beépített anchorokat is használhatunk:

    #top az oldal tetejére ugrik
    #bottom az oldal aljára ugrik

    Ha az egyik oldalban egy másik frameben lévő oldal egy bizonyos részére szeretnénk linket rakni, akkor azt is megtehetjük, ha használjuk a target paramétert.

    Tegyük fel hogy az oldalunkban A legjobb barátom: Péter szövegre egy linket szeretnénk elhelyezni a tartalom frameben található baratok.html oldal egy részére, amelyet a Peter anchorral láttunk el. Ezt a következő sorral tehetjük meg.

    <a href="baratok.html#Peter" target="tartalom">A legjobb barátom: Péter</a>