- Mi az? - A framek segítségével egy html oldalon beül elhelyezhetünk még egy html oldalt. Mindegy egyes html dokumentum különálló lesz a többitől.
- Mikor használjuk? - Frameket használunk például akkor, amikor YouTube videót akarunk beszúrni az oldalra.
SZINTAXIS:
<html>
<head>
<frameset>
<frame src = "frame.html"/>
<frame src = "frame2.html"/>
</frameset>
</head>
</html>
PÉLDA:
<html>
<head>
<frameset cols = "60%, 40%">
<frame src = "frame_a.htm"/>
<frame src = "frame_b.htm"/>
</frameset>
</head>
</html>
EZT KELL LÁTNOD (ha W3-as szerkesztőt használsz):
ELEMZÉS:
Gondolom feltűnt, hogy most először nem a <body> nyitó és </body> záró tag között dolgozunk. Ennek az az egyetlen oka, hogy frameket csak a fejben a <head> és a </head> tag-ek között definiálhatunk.
<farmeset> - tag. Magába foglalja az egy vagy több frame-t.
cols - attribútum. Akkor használjuk, hogyha a frameket függőlegesen szeretnénk megjeleníteni. Értéke a frame-k szélességének mértéke (megadhatjuk %-ban, pixelszámban is. Ha azt szeretnénk, hogy a maradék helyet töltse ki, akkor a *-ot használjuk. Ez esetben a 60% az első frame-re, a 40% a második frame-re vonatkozik. Az értékeket vesszővel választjuk el.)
rows - attribútum. Ha azt szeretnénk, hogy a frame-k vízszintesen jelenjenek meg akkor a cols helyére írjuk. Pl.: <frameset rows = "50%, 50%" > Így néz ki:
<frame> - tag. Framet definiál :D
src - attribútum. Jelentése forrás (source). Értékének a megjelenítendő html dokumentum nevét adjuk meg (ha nem abban a mappában található, ahol az, amiben meghívjuk, akkor a helyét is meg kell adni).
IDE TARTOZIK MÉG:
- Ha nem szeretnénk, hogyha a böngészőben át lehessen méretezni a frameket, akkor használjuk a noresize attribútumot. Pl.: <frame noresize = "noresize" src = "frame_a.html" />.
- Ha nem szeretnénk, hogy a frame-en legyen görgetősáv, akkor használjuk a scrolling attribútumot.
Pl.: <frame scrolling = "no" src = "frame_a.html" />
- Hogyha a weboldalt olvasó böngészője nem támogatja a frameket (nagyon ritka), akkor használjuk a noframes tag-et. Ez a tag magába foglalja a bodyt, hiszen a framek mindenképpen kitöltik az egész területet. Tehát a noframes tag-en belül lévő body tag-en belül megjelenő szöveg akkor jelenik meg, hogyha a böngésző nem támogatja a frame-ket.
Pl.:
<noframe>
<body>
<h6>Ez akkor látszik, ha nem támogatja a böngésző.</h6>
</body>
<noframe>
- Framek egymásba ágyazására is van lehetőség. Ilyenkor a <frameset>-en belül egy újabb <frameset>-et nyitunk (és majd zárunk).
Pl.:
<frameset rows="50%,50%">
<frame src="frame_a.htm" />
<frameset cols="25%,75%">
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</frameset>
EZT FOGOD LÁTNI:
FONTOS!
Framek használata linkként. (Lépésről-lépsére)
1. Hozzunk létre egy új html fájlt Jegyzettömbben (vagy abban, amilyen szerkesztőt használsz). Mentsük el main.html néven.
2. Hozzunk létre a main.html-en belül 2 linket a már megtanult módon (a href = "") a bodyn belül. A href értéke az első linken legyen proba1.htm a másodikon pedig proba2.htm. Ha lehet, akkor külön sorban legyenek (br/). A link szövege legyen az, amire hivatkozik (proba1, proba2)
3. Mentsük el.
3. Hozzunk létre egy új html fájlt a szerkesztőnkben. A neve legyen proba1.html.
4. Az oldal háttérszíne legyen kék (body style = "background-color : blue;"). Jelenjen meg a Próba1 szöveg h1-es címmel (h1../h1).
5. Mentsük el.
6. Hozzunk létre egy új html fájlt a szerkesztőnkben. A neve legyen proba2.html.
7. Az oldal háttérszíne legyen piros (body style = "background-color : red;"). Jelenjen meg a Próba2 szöveg h1-es címmel (h1../h1).
8. Mentsük el.
9. Hozzunk létre egy új html fájlt a szerkesztőnkben. A neve legyen teljes.html.
10. Hozzunk benne létre 3 frame-t (frameset, frame). Legyenek függőlegesek (cols). Mérete az elsőnek 25%, a másodiknak 50%, a harmadiknak pedig a maradék (*).
11. Az első frame hivatkozzon a main.html fájlra, a második a proba1.html fájlra, a harmadik pedig proba2.html-re.
12. Ahhoz a frame-hoz, amelyik a proba1-re mutat, írjuk be a következőt: id = "elso", a másikhoz pedig azt, hogy id = "masodik" (pl.: frame id = "elso" src = "proba1.html"). Ezzel egy egyedi azonosítót adunk annak a frame-nek.
13. Térjünk vissza a main.html fájlhoz. A linkekhez, a már tanult módon, adjunk hozzá egy target attríbútumot, aminek az értéke az elsőnél legyen masodik, a másodiknál pedig elso (pl.: a href = "proba1.html" target = "masodik"). Ez azt jelenti, hogy a linkre való kattintásnál a link címe nem a teljes ablakban jelenik meg, hanem a targetelt frame-ben.
A megoldás innen letölthető
Ezzel azt hiszem meg is beszéltük a FONTOSABB dolgokat a framekről. Már csak az inline framek vannak hátra. A lecke holnap kerül ki.
12. Ahhoz a frame-hoz, amelyik a proba1-re mutat, írjuk be a következőt: id = "elso", a másikhoz pedig azt, hogy id = "masodik" (pl.: frame id = "elso" src = "proba1.html"). Ezzel egy egyedi azonosítót adunk annak a frame-nek.
13. Térjünk vissza a main.html fájlhoz. A linkekhez, a már tanult módon, adjunk hozzá egy target attríbútumot, aminek az értéke az elsőnél legyen masodik, a másodiknál pedig elso (pl.: a href = "proba1.html" target = "masodik"). Ez azt jelenti, hogy a linkre való kattintásnál a link címe nem a teljes ablakban jelenik meg, hanem a targetelt frame-ben.
A megoldás innen letölthető
Ezzel azt hiszem meg is beszéltük a FONTOSABB dolgokat a framekről. Már csak az inline framek vannak hátra. A lecke holnap kerül ki.
Nincsenek megjegyzések:
Megjegyzés küldése