A frameset stílusok megtekintéséhez, kattins ide!
A <frameset> <frame>, címke
A <frameset> jelölőelem használata esetében nem használhatunk <body> jelölőelemet!
- Keretek alkalmazásával a Weblapot különálló területekre, azaz részekre oszthatjuk fel.
- Minden különálló területen, egy-egy önálló XHTML dokumentum tartalmát, vagy képet jeleníthetünk meg.
- Különálló területek, azaz keretek alkalmazása akkor ajánlott, ha a Weboldal egyes részeinek a tartalma nem változik (Ellenkező esetben, mindig újra kell tölteni).
- A kerethatároló vonalak egér segítségével elmozdíthatók a böngészőben.
- Keret méreténél nagyobb terjedelmű dokumentumok esetében, az adott keretben, görgetősávok jelennek meg
Kezdő <frameset> címke és a záró </frameset> címke
- XHTML kereteket, a kezdő <frameset> címke, és a záró </frameset> címke között kell létrehozni.
- A frameset címkék egymásba is ágyazhatók. (Egymásba ágyazásnál, ugyanúgy járunk el, mint a div szakaszoknál.)
- A kezdő <frameset> és a záró </frameset> címkék közé, annyi <frame /> jelölőelemet helyezünk el, ahány részre osztottuk a Weboldalt.
Kezdő <frameset> címkében kell meghatározni:
- Milyen elrendezésű felosztást akarunk készíteni, vízszintes, vagy függőleges.
- Keretek méretét, mely egyben meghatározza a keretek számát is. ( keretek méretének megadása = keretek számával )
Vízszintes megjelenésű keret, azaz terület jelölőeleme, azaz attribútum: rows
Függőleges megjelenésű keret, azaz terület jelölőeleme, azaz attribútum: cols
-
Keret vízszintes és fügőleges értéke megadható:
- Százalékban ( % )
- Pixelben ( px )
- A maradék képernyőterületre csillag ( * ) karakter használatával lehet hivatkozni.
- Ha egyszerre több keretméretet is megadunk, akkor azokat vesszővel ( , ) kell egymástól elválasztani
Példa:
Weblapot két vízszintes részre osztjuk fel. Az első keret 25% magas, a második 75% magas.
Vízszintes felosztásnál, a keret magasságát, azaz függőleges méretét kell megadni.
<frameset rows="25%,75%">
Weblapot két függőleges részre osztjuk fel. Az első keret 25% széles, a második 75% széles
Függőleges felosztásnál, a keret szélességét kell megadni.
<frameset cols="25%,75%">
Maradék képernyőterület alkalmazása.
Az első keret méretét mindig meg kell adni, a második keret területe = a megmaradt területtel
Ha szükséges, akkor a maradék területet további részekre, keretekre tudjuk felosztani.
<frameset cols="40%,*">
A frame címke
- A <frame /> jelölőelem szolgál a tényleges kerettartalmak megadására.
- A <iframe> vagy <frame /> címkében kell megadni azon XHTML dokumentum vagy kép elérési útját, melyet az adott keretben szeretnénk megjeleníteni.
- Annyi <iframe> vagy <frame /> cimkét kell elhelyeznünk, ahány részre, azaz keretre osztottuk fel weblapunkat.
Példa, egy adott keretben történő, XHTML - lap vagy kép megjelenítésére:
<frame src="elérési_út.html" />
<frame src="elérési_út.jpg" />
<frame src="elérési_út.gif" />
|
Példa:
|
Példa:
|
|
Példa:
|
Példa:
|
Kettő vízszintes keret, azaz terület elkészítése.
Megírása XHTML - lapon
<head>
<title>Két vízszintes szakasz elkészítése</title>
</head>
<frameset rows="25%,75%">
<frame />
<frame />
</frameset>
<body>
<noframes>
</noframes>
</body>
</html>
Keret megjelenése a monitoron:kattints ide
Keretben megjelenő XHTML - lap: kattints ide
Három függőleges terület, azaz keret elkészítése.
Megírása XHTML - lapon
<head>
<title>Három Függőleges keret</title>
</head>
<frameset cols="30%,50%,*">
<frame />
<frame />
<frame />
</frameset>
<body>
<noframes>
</noframes>
</body>
</html>
Keret megjelenése a monitoron:kattints ide
Keretben megjelenő XHTML - lap: kattints ide
Vegyes keretmegoldás elkészítése
A példa, egy függőleges és kettő vízszintes területet jelenít meg.
Megírása XHTML - lapon
<head>
<title>Vegyes keretmegoldas </title>
</head>
<frameset cols="40%,*">
<frame />
<frameset rows="70%,*">
<frame />
<frame />
</frameset>
</frameset>
<body>
<noframes>
</noframes>
</body>
</html>
Megjelenése a monitoron:kattints ide
Keretben megjelenő XHTML - lap: kattints ide
Webes keretfora megjelenítése
Különálló területek, azaz keretek alkalmazása akkor ajánlott, ha a Weboldal egyes részeinek a tartalma nem változik!
Ellenkező esetben, mindig újra kell tölteni, frissíteni.
Megírása XHTML - lapon
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Webes keretek területek <iframe> /title>
</head>
<frameset rows="20%,*,20%">
<frame src="keretszoveg.html" />
<frameset cols="20%,60%,*">
<frame src="keretszoveg.html" />
<frame src="keretszoveg.html" />
<frame src="keretszoveg.html" />
</frameset>
<frame src="keretszoveg.html" />
</frameset>
<body>
<noframes>
</noframes>
</body>
</html>
Megjelenése a monitoron:kattints ide
Keretek diszítése formázása
Keretekre osztott weblap frame címkéinek formázására, írhatunk meghatározásokat CSS, azaz stíluslapon, vagy közvetlen a html - fájl fejlécében.
Ahhoz, hogy a frame jelölő címkéket megformázhassuk, mindegyik frame címkét azonosítóval kell ellátni.
-
Az azonosítók lehetnek:
- Egyediek, melyeket id jellemző után, vagy class osztályazonosító után kel megadni.
- id jellemző után, mindegyik frame címkét más és más azonosító névvel kell megkülönböztetni.
- class osztályazonosító után, mindegyik frame címkének adhatunk más és más, vagy ugyanazon azonosítót.
- De, alkalmazhatjuk egyszerre mindkét azonosító formátumot is. ( id - class )
-
Frame címkével jelölt területnek adott meghatározások:
- Keretszínt és annak vastagsági értékét: IE és MA megjeleníti
- Háttérszín (color) megjelenítése: IE és MA nem jeleníti meg
- Háttérkép beillesztését: IE és MA megjeleníti
- Belső margó, azaz padding értéket: IE megjeleníti, MA nem jeleníti meg
Adott keretbe beillesztett xhtml dokumentum háttérszíne, felül űbereli, azaz eltakarja a keretnek eredetileg meghatározott háttérképet: IE és MA egyformán jár el.
A keretek formai megjelenéséhez meghatározásokat írni, csak a fotó jellegű háttérkép (vagy a háttérszínes kép) megjelenítésének van értelme.
-
Ezen megjelenítési formátumoknak, akkor van jelentősége:
- Ha a keretet nagyobbra készítettük, mint az abban megjelenő XHTML dokumentum mérete.
- Azon keretek díszítéséhez, melyekbe nem jelenik meg XHTML dokumentum, ilyenkor a megadott háttérkép tölti ki az üres helyet, keretet.
- Adott keretben, egy olyan XHTML dokumentumot jelenítünk meg, melynek nem adtunk se háttérszínt, se háttérképet, akkor a szöveg háttereként, a keretnek megadott háttérkép jelenik meg. (böngésző válogatja.)
- Ha belső paddingot alkalmazunk. A padding értékével megegyező területet, a háttérkép tölti ki. Ez, IE -re vonatkozik.
Megjegyzés:
Ha a kereteket egyedi, vagy azonos háttérszínnel szeretnénk megjeleníteni.
Készítsünk maximum 10x10 px méretű négyzetet, tetszőleges színválasztással, majd mentsük el képformátumba. ( Pl: jpg )
Az elkészített képet, jelenítsük meg a kiválasztott keretben, és hagyjuk ismétlődni.
Az így beillesztett kép, háttérszínnek megfelelő formátumban jelenik meg.
Megírása XHTML - lapon
</head>
<frameset rows="20%,*,20%">
<frame src="ureskeretszoveg_html.html" class="elsokeret" />
<frameset cols="20%,60%,*">
<frame src="ureskeretszoveg_html.html" id="ketteskeret" />
<frame src="ureskeretszoveg_html.html" class="harmaskeret" />
<frame src="ureskeretszoveg_html.html" id="negyeskeret" />
</frameset>
<frame src="ureskeretszoveg_html.html" class="otoskeret" />
</frameset>
<body>
<noframes>
</noframes>
</body>
</html>
Meghatározások megírása CSS, azaz stíluslapon
.elsokeret {border: 2px solid red; padding: 10px; background: url(szurke_20x20.jpg);}
#ketteskeret {border: 2px solid red; padding: 10px; background: url(kek_10x10.jpg);}
.harmaskeret {border: 2px solid red; padding: 10px; background: url(sarga_10x10.jpg);}
.negyeskeret {border: 2px solid red; padding: 10px; background: url(zold_10x10.jpg);}
.otoskeret {border: 2px solid red;padding: 10px; background: url(tegla_10x10.jpg);}
Meghatározások megírása a fejlécben. (most stíluslapot nem alkalmazunk.)
<head>
<title>Formázás meghatározása fejlécben </title>
<style type="text/css">
.elsokeret {border: 2px solid red; padding: 10px; background: url(szurke_20x20.jpg);}
#ketteskeret {border: 2px solid red; padding: 10px; background: url(kek_10x10.jpg);}
.harmaskeret {border: 2px solid red; padding: 10px; background: url(sarga_10x10.jpg);}
.negyeskeret {border: 2px solid red; padding: 10px; background: url(zold_10x10.jpg);}
.otoskeret {border: 2px solid red;padding: 10px; background: url(tegla_10x10.jpg);}
</style>
</head>
Formázott keretek megjelenése a monitoron:kattints ide
Megjegyzés: Frame használatához Extra szolgáltató közlése
FRAME -es oldalak hibajavítása:
2007. július 06. péntek @ 10:07 Kategória: Hibajavítás
Amennyiben az oldalon FRAME-eket használsz, és üres lap jön be helyette, akkor olvasd el az alábbi hibajavítást:
A helytelen frame használat és a kódunk együttesen okozhatják a hibát.
Megoldás:
Be kell szúrni egy body elemet a Framset után valahogy így:
</FRAMESET>
<body>
<noframes>
</noframes>
</body>
</html>
A szabványos frame készítéshez hozzá tartozik egy noframe(s) elem beszúrása is amihez tartozik egy body elem is.
A scriptunk ezt az elemet keresi és normál esetben ide helyezi el magát.
AA AÁBCDEFGHIJKLMNOÖPQRSTUÜXYVZÁBCDEFGHIJKLMNOÖPQRSTUÜXYVZ AÁBCDEFGHIJKLMNOÖPQRSTUÜXYVZÁBCDEFGHIJKLMNOÖPQRSTUÜXYVZ AÁBCDEFGHIJKLMNOÖPQRSTUÜXYVZÁBCDEFGHIJKLMNOÖPQRSTUÜXYVZ
- - - - - - - - - - - - - - V É G E ! - - - - - - - - - - - - - -
aabcdefghijklmnopqrstuxyvzabcdefghijklmnopqrstuxyvza bcdefghijklmnopqrstuxyvza abcdefghijklmnopqrstuxyvza cdefghijklmnopqrstuxyvzabcdefghijklmnopqrstuxyvzaab abcdefghijklmnopqrstuxyvza cdefghijklmnopqrstuxyvzabcdefghijklmnopqrstuxyvza ü
Tulajdonságok és stílusok
Megjegyzés: |