Weblapprogramozás

- Oktatási segédanyag középiskolák számára

Keretek használata

Van egy másik lehetőség is a tartalom elrendezésére. Ez pedig az ún. keretek (angolul frame-ek) használata. A fő különbség, hogy míg a táblázatnál a látható oldal egy .html fájlból állt, amikor keretek segítségével készítjük az oldalunkat, az aktuális oldalt több .html fájl fogja alkotni egy előre meghatározott keret-szerkezet segítségével.

Hogy ilyen módon elrendezzük az oldal tartalmát, meg kell terveznünk itt is az oldal szerkezetét, majd el kell készítenünk a hozzátartozó fájlokat. Keretek használatakor a tartalmat leíró fájlokon kívül, mindig lesz még egy állomány, amely a keret-szerkezetet tartalmazza. Mivel ez tipikusan a kezdőlap, általában index.html-nek szokták elnevezni.

A megvalósítandó terv

Jó példa lesz a keretek használatának a bemutatására az előző fejezetben megtervezett oldal (Álmos Gedeon oldala) keretes változatának az elkészítése. Annyi könnyebbséget adunk most magunknak, hogy a láblécet kihagyjuk.

Tehát a terv:

Cím

Menü1
Menü2
Menü3

A tartalom.

Ehhez egyrészt a keretszerkezetet leíró fájl kell elkészíteni, másrészt a tartalmat.

A keretszerkezetet leíró fájl

Egy speciális .html állományról van szó, amelynek a törzs része üres és a fej részben kell megadni az oldal vázát. Ehhez két címkét tudunk majd használni: a <frameset>-et, amely egy sorokból vagy oszlopokból álló szerkezetet tud leírni, valamint a <frame>-et, amely egy keretet és a tulajdonságait tudja meghatározni. Először nézzük a <frameset> címkét!

A <frameset> címke használata

Az oldalt sorokra vagy oszlopokra tudja felbontani a keret-szerkezetben.

Paraméterei:

rows= az oldal sorokra való felosztása
cols= az oldal oszlopokra való felosztása
frameborder= megjelenjen-e a keretek között vonal (szegély)
                         (értéke: yes, no)
bordercolor= a keretek között megjelenő szegély színe
framespacing= mennyi hely maradjon ki a keretek között

A fent látható rows és cols paraméterek közül egyszerre csak egyet tudunk használni: egy adott oldalt (vagy keretet) egy lépésben vagy oszlopokra, vagy pedig sorokra tudunk felosztani. Ettől bonyolultabb elrendezéseket a <frameset> címkék egymásba ágyazásával kapunk.

A rows és cols használata:

Idézőjelek közé, az egyes sorok vagy oszlopok méreteit kell vesszővel elválasztva megadni. Ahány értéket megadunk, annyi sorra vagy oszlopra lesz felosztva az oldalunk.

Az értékeket különböző módokon adhatjuk meg:

1. Százalékban

Például:

<frameset rows="30%,70%">

Ekkor az oldal két sorra (sávra), egy 30 és egy 70 százalékos méretűre lesz felosztva.

30%
70%

2. Arányszámokkal

<frameset cols="30*,100*,100*">

Ekkor az oldal 3 oszlopra lesz felosztva, amelyek szélessége úgy aránylik egymáshoz (sorrendben), mint a 30 : 100 : 100.

30% 100% 100%

 

3. Konkrét értékekkel

<frameset cols="100,*">

Ha a "*" karaktert is belevesszük a felsorolásba az értékeknél, akkor a 100 nem arányt, hanem képpontot jelent, a *-os rész pedig a fennmaradó területet. Vagyis a baloldalon kapunk egy pontosan 100 képpont széles oszlopot, a jobb oldali oszlop pedig az oldal (vagy keret) maradék része.

100 maradék

 

A <frame> címke használata

Már fel tudjuk osztani az oldalt sorokra vagy oszlopokra. Nézzük a további teendőinket: A <frameset> címke és záró párja, a </frameset> címke közé pontosan annyi keretet, vagyis <frame> címkét kell írni, ahány sort vagy oszlopot készítettünk a <frameset>-tel.

Például:

<frameset cols="100,*">
 <frame (paraméterek)>
 <frame (paraméterek)>
</frameset>

A következőkben nézzük meg az adott keretet leíró <frame> címke paramétereit:

src= a keretben megjelenő .html fájl neve
name= a keret neve
scrolling= görgethető legyen-e a keret tartalma
                   (értéke: yes, no, auto)
noresize= paraméter nélkül kell beírni, nem átméretezhetővé teszi a keretet.

Első példa:

Készítsünk egy egyszerű oldalt, ahova a bal oldalra egy 100 képpont széles menüt helyezünk (ahol letiltjuk a görgetést), a jobb oldalra pedig az egyes menüpontok tartalmát (itt szükség szerint legyen görgetősáv, valamint ne lehessen átméretezni a keretet)!

<frameset cols="100,*">
 <frame src="menu.html" scrolling="no" name="menu">
 <frame src="nyito_oldal.html"
     scrolling="auto" name="tartalom" noresize>
</frameset>

Második példa:

Készítsünk egy olyan keret-szerkezetet, ahol van egy 120 képpont nagyságú fejléc az oldal tartalma felett, és egy 50 képpont nagyságú lábléc az oldal tartalma alatt!

<frameset rows="120,*,50">
 <frame src="fejlec.html" scrolling="no" name="fejlec">
 <frame src="nyito_oldal.html"
     scrolling="auto" name="tartalom" noresize>
 <frame src="lablec.html" scrolling="no" name="lablec">
</frameset>

Bonyolultabb szerkezet meghatározása

Bonyolultabb szerkezetet tudunk elérni a <frameset> címkék egymásba ágyazásával. Ilyenkor a <frameset>-en belüli <frame> címke helyett egy újabb <frameset> szerkezetet írunk.

Példaként tökéletesen megfelel a fejezet elején felvázolt terv:

Fejléc (sor)

Menü
(bal oszlop)

Tartalom
(jobb oszlop)

Legyen a fejlécünk 80 pont magas, a menü 150 pont széles, a Tartalom keret pedig ne legyen átméretezhető! Ehhez először felosztjuk az oldalt két sorra a méreteknek megfelelően, majd az alsót tovább osztjuk két oszlopra. Nézzük a címkék egymásba ágyazását:

<frameset rows="80,*">
  <frame src="fejlec.html" scrolling="no" name="fejlec">
  <frameset cols="150,*">
    <frame src="menu.html" scrolling="auto" name="menu">
    <frame src="nyito.html" scrolling="auto"
           name="tartalom" noresize>
  </frameset>
</frameset>

Ezt a részt a fejezet elején írtak szerint az első oldal (index.html) fejrészébe kell elhelyezni, és a törzsébe nem szabad semmit sem írni:

<HTML>
 <HEAD>
  <TITLE>Keret példa</TITLE>
  <frameset rows="80,*">
   <frame src="fejlec.html" scrolling="no" name="fejlec">
   <frameset cols="150,*">
    <frame src="menu.html" scrolling="auto" name="menu">
    <frame src="nyito.html" scrolling="auto"
           name="tartalom" noresize>
   </frameset>
  </frameset>
 </HEAD>
 <BODY>
 </BODY>
</HTML>

A szerkezet kész, nincs más dolgunk, mint, hogy a tartalmat feltöltsük!

A tartalom feltöltése

A tartalom nagy részét a hozzá tartozó (háttér)képekkel együtt az előző fejezet oldalairól másoltam. Ennek technikai végrehajtása azt hiszem, nem igényel különösebb magyarázatot.

A fejrészt a szerkezet szerint felső sorba betöltődő fejlec.html-ben valósítottam meg: fejlec.html

A menü részt a szerkezet szerint baloldalra betöltődő menu.html-ben valósítottam meg: menu.html

A tartalmakat pedig négy fájlban helyeztem el, amelyek a jobb oldalon fognak megjelenni, és a szerkezet szerint a nyito.html töltődik be először:
nyito.html, tema_1.html, tema_2.html, tema_3.html

Végül az indító oldal pedig itt található: index.html, a linkre kattintva kipróbálható az elkészült oldal!

Hivatkozások a keret-szerkezetben

Egy fontos dolog maradt ki az eddigiekből, ami szükséges egy keretes oldal működtetéséhez. Ez pedig a hivatkozások használata.

Egy hivatkozás, ha nem adjuk meg, hogy pontosan melyik keretbe töltődjön be, akkor a saját keretébe fog betöltődni.

Ki lehet próbálni a következő oldalon: rossz_hivatkozas.html
(Próbáljuk meg a menüt használni!)

A rossz menü kódja:

<p align="left">
 <a href="nyito.html">Nyitó oldal</a><br>
 <a href="tema_1.html">Első téma</a><br>
 <a href="tema_2.html">Második téma</a><br>
 <a href="tema_3.html">Harmadik téma</a>
</p>

Ezt nagyon egyszerűen ki lehet javítani! Figyeljük meg, hogy a szerkezetnél minden keretet a <frame> címke name paraméterével elneveztünk! Ez nem véletlen, a hivatkozásokban ugyanis ezeket a neveket tudjuk majd használni, ezek segítségével lehet megadni, hogy konkrétan melyik keretbe töltődjön be a megnyíló oldal!

A javításhoz nem kell mást tennünk, mint a hivatkozás <a> címke target paraméterében megadjunk a cél keret nevét!

Példa:

<a href="cel_dokumentum.html" name="cel_keret_neve">
     Link szövege </a>

Most már világos, hogyan is kell kinéznie a menü kódjának. Mivel a jobb oldali keret <frame> címkéjében a névnél az szerepel, hogy "tartalom", ezért ezt a nevet kell megadni a menü hivatkozásaiban is. Lássuk a helyes kódot:

<p align="left">
 <a href="nyito.html" target="tartalom">Nyitó oldal</a><br>
 <a href="tema_1.html" target="tartalom">Első téma</a><br>
 <a href="tema_2.html" target="tartalom">
         Második téma</a><br>
 <a href="tema_3.html" target="tartalom">Harmadik téma</a>
</p>

Készen vagyunk, az oldal elkészült! :)

A forrásfájlok összegyűjtve megtalálhatóak a Forrásoknál.

Kiegészítés: Láthattuk a fenti anyagban, hogyan lehet egy összetett oldalt keretek segítségével elkészíteni. Fontos azonban tudni, hogy a keretek használata ma már nem annyira javallott. A keretek alkalmazása számos hátránnyal jár (pl. nem nyomtatható egyben az oldal, kereső-program problémák, navigáció nehézsége, stb.), ezért, ha csak pár lapból álló oldalt készítünk, ne használjunk kereteket, nyugodtan szerepeljen a menü minden egyes oldalon. Mi jelentheti akkor a megoldást? A stíluslapokkal (CSS) definiált oldal-szerkezet. Ezek használatába a következő fejezet nyújt egy kis betekintést.

Tovább a stíluslapokhoz >>

Weblapprogramozás oktatása középiskolában - Készült: 2007