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!

 

Kezdő <frameset> címke és a záró </frameset> címke

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

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

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:
<FRAMESET COLS="33%,33%,*">
<frame src="#.html" />
<frame src="#.html" />
<frame src="#.html" />
</FRAMESET>

Példa:
<FRAMESET ROWS="33%,33%,*">
<frame src="#.html" />
<frame src="#.html" />
<frame src="#.html" />
</FRAMESET>


 

Példa:
<FRAMESET cols="40%, 60%">
<FRAMESET rows="100, 200">
<frame src="#.html">
<frame src="#.gif">
</FRAMESET>
<frame src="#.html">
</FRAMESET>

Példa:
<FRAMESET cols="40%, 60%">
<frame src="#.html">
<FRAMESET rows="100, 200">
<frame src="#.html">
<frame src="#.gif">
</FRAMESET>
</FRAMESET>


 

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.

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.

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

  • A <frameset> jelölőelem használata esetében nem használhatunk <body> jelölőelemet!
  • Vízszintes területek:
    • rows
  • Függőleges területek:
    • cols
  • Keret vízszintes és fügőleges értéke megadható:
    • Százalékban ( % )
    • Pixelben ( px )
  • A maradék terület jele, csillag:
    • ( * )
  • Több keretméret elválasztása vesszővel:
    • ( , )
  • Vízszintes felosztás:
    • <frameset rows="25%,75%">
  • Függőleges felosztás:
    • <frameset cols="25%,75%">
  • Maradék terület:
    • <frameset cols="40%,*">
  • Kerettartalmat jelölő, jelölőelem:
    • <frame />
  • Kerettartalom meghívása:
    • <frame src="keretszoveg.html" />
  • Keretbeli ablak neve:
    • name="....."
  • Ablakba betöltendő oldal címe:
    • src="elérési_útvonal.html"
  • Dokumentum-szintű azonosítók:
    • id="....." vagy class="....."
  • Megjelenítendő információ az elemről:
    • title
  • Helyi stílusdefiníciók megadása:
    • style="border-style: none; width: 100%; height: 320px;"
  • Hosszabb leírást tartalmazó állomány (html fájl) elérési címe:
    • longdesc A title helyett használatos a nem képi megjelenítést végző böngészők számára.
  • Ablak, nem átméretehzető:
    • noresize= "noresize"
      Ha lehet, kerüljük ezt az alkalmazást.
      Megtiltotta, hogy a felhasználó beállítása az optimális képernyőt
  • Ablak tartalma görgethető-e?:
    • Alapértelmezettscrolling="auto"
    • Mindig scrolling="yes"
    • Sosem scrolling="no"
  • Ablak melletti választóvonal (keret) látszódjon-e?:
    • nem látszik: frameborder="0"
    • látszik: frameborder="1"
  • Minden keretvonal elrejtése:
    • <FRAMESET frameborder="0">
  • Csak az adott területnél, keret elrejtése:
    • <FRAME frameborder="0">
  • Ablak melletti margó szélessége:
    • padding-right: ...........px padding-left: ...........px
  • Ablak alatti ill. feletti margó szélessége:
    • padding-top: ...........px padding-bottom: ...........px
  • Egyenlő margó meghatározásakor:
    • padding: ...........px
  • Ablak széle és a tartalom melletti margó szélessége (jobbról és balról is egyforma):
    • marginwidth="egész szám"
    Hatása attól függ, hogy a beillesztett html fájl, milyen meghatározásokkal van megformázva.
  • Ablak széle és a tartalom melletti margó szélessége (Fentről és lentről is egyforma):
    • marginheight="egész szám"
    Hatása attól függ, hogy a beillesztett html fájl, milyen meghatározásokkal van megformázva.
  • Háttérszín nem, de háttérkép beilleszthető:
    • background: url(elérési_út.jpg);
  • Befejezés végén elhelyezendő (A szabványos keretkészletes html fájlt, így kell befejezni):
    • <body>
      <noframes>
      </noframes>
      </body>
      </html>
  • Megjegyzés:

  • Háttérszín helyett, készítsünk egy 10x10px-es egyszínű képet és ismétlődést meghagyva, imitálhatunk tetszőleges háttérszínt.
  • Explorer: A kereteknél, háttérkép csak akkor lesz látható és csak akkora területen, amekkora padding értéket meghatároztunk az adott keretnél.
  • Mozilla Firefox: A kereteknél, paddinggal nem foglalkozik, háttérkép teljes területen látszik.