HTML-opas - Ohjelmoinnin perusteita

Kehykset

Kehyksien eli "framejen" käyttö ei ole välttämätöntä. Niissä on sekä etuja että haittoja.
Voit tehdä sivuista kehyksellisen version tai aivan ilman niitä. Myös tämä sivusto on frameton.

Kehyksillä selaimen ikkuna voidaan jakaa useampaan osaan, jokaiseen näistä voidaan ladata eri WWW-dokumentti. Ominaisuus on hyödyllinen, kun esim. jos sivujen valikkopainikkeet halutaan olevan kokoajan näkyvillä. Tällaisissa tapauksissa kehykset mm. nopeuttavat sivujen latautumista hieman, sillä muutokset tarvitsee tehdä vain yhteen dokumenttiin.

Kehys sivu joka tallennetetaan index nimisenä, ei varsinaisesti näy, vaan se "sitoo eri sivut yhteen".
Teit sitten kehyksellisen tai kehyksettömät sivut, niin ensimmäinen HTML-dokumentti jonka haluat ns. pääsivuksi tallennetetaan nimellä index.htm tai index.html

WWW-sivulla, jolla kehykset määritellään ei käytetä <BODY> ja </BODY>-koodeja, vaan nämä korvataan <FRAMESET> </FRAMESET> koodeilla. Tarkempi kehysmäärittely kirjoitetaan näiden koodien sisään. Kehyksiä voidaan sijoittaa myös sisäkkäin. <FRAMESET> koodi voi saada seuraavia määritelmiä:
COLS__________Jolla määritellään sarakkeiden leveys ja lukumäärä vaakasuunnassa. ROWS_________Jolla määritellään rivien korkeus ja lukumäärä pystysuunnassa.
Sarakkeiden leveys ja rivien korkeus voidaan ilmoittaa kolmella tavalla:
1) pikseleinä 2) prosenttiosuutena 3) *-merkin avulla, jolloin sarake tai rivi täyttää kaiken vapaan tilan.
Sarakkeita tai rivejä tulostetaan yhtä monta kuin lainausmerkkien sisään on kirjoitettu pilkulla eroteltuja määrittelyjä.
Esim.1. <FRAMESET COLS="100,*"> määrittelee sivun vasempaan reunaan 100 pikselin levyisen sarakkeen, ja sen oikealle puolelle loput näytön leveydestä täyttävän sarakkeen.
Esim.2. <FRAMESET ROWS="10%,*,10%"> määrittelee sivun ylä- ja alalaitaan 10 % näytön korkeudesta olevat rivit, ja niiden väliin jäävä rivi täyttää loput sivun korkeudesta.

FRAME
Tarkemmat kehysmäärittelyt tehdään <FRAME> koodin avulla. Koodi toimii yksinään, eikä tarvitse lopettaa.
<FRAME> koodin kanssa voidaan käyttää seuraavia määritteitä:
SRC________________Kehyksessä näytettävän sivun nimi/osoite. Esim. <FRAME SRC="valikko.htm">
NAME______________Kehyksen nimi. Esim. <FRAME SRC="valikko.htm" NAME="vasen_kehys">.
Tätä nimeä voidaan käyttää kertomaan selaimelle paikka, jossa kehyksessä klikattu linkki tulee avata. Tällöin linkkiin tulee lisätä TARGET-määre.
MARGINWIDTH_____Vasemman ja oikean marginaalin leveys. Ilmoitetaan pikseleinä.
MARGINHEIGHT____Ylä- ja alamarginaalin korkeus. Ilmoitetaan pikseleinä.
SCROLLING________Määrittelee vierityspalkkien näkyvyyden kehyksessä. Mahdolliset määritykset ovat:
    Auto_______________Oletuksena vierityspalkit näkyvät, jos sivu ei mahdu kehykseen.
    No_________________Vierityspalkit eivät ole näkyvissä.
    Yes________________Vierityspalkit ovat aina näkyvissä.
FRAMEBORDER_____Määrittelee kehysten välisen reunan tulostustavan. Mahdolliset määritykset ovat:
    No_________________Kehykselle ei tulosteta reunaa.
    Yes________________Kehykselle tulostetaan reuna.
BORDERCOLOR Reunanväri esim. bordercolor="blue"
NORESIZE__________ Estää kehyksen koon muuttamisen hiirellä vetäen.

NOFRAMES
Koska jotkut selaimet eivät tue kehyksiä, kannattaa kehyssivulle sisällyttää pieni koodin pätkä tällaisille selaimille. Se tehdään <NOFRAMES> ja </NOFRAMES> koodeilla, ja sijoitetaan <FRAMESET> </FRAMESET> koodien väliin. <NOFRAMES> koodien väliin kirjoitetaan halutunlainen WWW-sivu <BODY> ja </BODY> koodit mukaanlukien.

Esimerkki 1: Perinteinen kaksi kehyksinen "valikko-sisältö" juttu, jossa vasemmalla on 120 pixeliä leveä valikko sivu ja loppu näytön alasta oikealle jää kulloinkin valikosta valittavan sivun käyttöön. Index sivun koodi on seuraava:
<HTML>
<HEAD>
<TITLE> Index sivu</TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="valikko.html" NAME="valikko" scrolling=no>
<FRAME SRC="sivu1.html" NAME="sivu1">
</FRAMESET>
<NOFRAMES>
<BODY>
Selaimesi ei tue kehyksiä.
</BODY>
</NOFRAMES>
</HTML>              Avaa Esim. 1 (miniatyyri koko)

Esimerkki 2: Valikko ylhäällä 80 pixseliä korkeana
<HTML>
<HEAD>
<TITLE> Index sivu</TITLE>
</HEAD>
<FRAMESET ROWS="80,*">
<FRAME SRC="valikko.html" NAME="valikko" scrolling=no>
<FRAME SRC="sivu1.html" NAME="sivu1">
</FRAMESET>
<NOFRAMES>
<BODY>
Selaimesi ei tue kehyksiä.
</BODY>
</NOFRAMES>
</HTML>              Avaa Esim. 2 (miniatyyri koko)

Kehysten rakentelussa vaihtoehtoja riittää, vain mielikuvitus on rajana.

Linkittäminen kehyksiin

Jos sivujen halutaan aukeavan samassa kehyksessä, käy kohdekehyksen määrittely helpoimmin lisäämällä <BASE TARGET="sivu1"> koodi sivun <HEAD> ja </HEAD> koodien väliin (esimerkeissä valikko.html sivulle).
Jos määrittelyä ei ole, on oletuksena se, että sivu aukeaa samaan kehykseen missä linkki sijaitsee. Jos linkin aukeamisen kohdepaikkaa halutaan muuttaa, voidaan se tehdä lisäämällä linkkiin määrite TARGET="sivu1". Linkkiin liitetty TARGET-määrittely on etusijalla <BASE TARGET> määrittelyyn nähden ja sitä voidaankin käyttää hyväksi mm. silloin kun on vain yksi linkki, jonka halutaan aukeavan eri kehyksessä. Lisäksi <BASE> koodi on lyhyempi kirjoittaa.