2011. október 29., szombat

Framek

Kicsit megcsúszva, de itt a következő lecke is (ami egyébként a W3-as tananyag kezdő fokozatának az utolsó leckéje). A mai nap témája a FRAME (frém).


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

Nincsenek megjegyzések:

Megjegyzés küldése