3.6 Kehyselementit

Kehykset määritellään alla olevan esimerkin mukaisesti käyttämällä kahta tunnistetta:

  1. frameset määrittää miten päin ikkuna jaetaan kahteen osaan (pysty- tai vaakasuoraan) ja missä suhteessa.
  2. frame-elementillä määritellään mikä HTML-dokumentti ladataan kehykseen. Tällä elementillä ei ole lopputunnistetta.
Esimerkki
<html>
<head>
	<title>Kehystesti</title>
</head>

<frameset rows="120,200" framespacing="2" border="2" frameborder="2" bordercolor="#5511aa">
	<frame src="http://www.google.com" name="haku2"   scrolling="Auto">
	<frame src="http://www.ask.com"  name="haku2" scrolling="Auto">
</frameset>

</html>

Esimerkkisivu, joka aukeaa uuteen ikkunaan. Voit hiirellä muuttaa kehysten kokoa tarttumalla kehyksen reunukseen (esimerkkisivussa tummansininen) ja vetämällä sitä hiirellä.

Frameset

Frameset-elementillä voi olla seuraavanlaisia attribuutteja:

rows="x,y" - esim rows="400,100", rows="400,*" tai rows="30%,70%"
ikkuna jaetaan kahteen osaan vaakasuunnassa. Ylemmän osan korkeus on x yksikköä ja alemman osan korkeus y-yksikköä. Yksikkönä voidaan käyttää pikseleitä tai prosenttiosuuksia (x prosenttia ikkunan korkeudesta). Arvona voi olla myös * eli "mikä tahansa", esim. "80,*" (80 pikseliä korkea yläpalkki ja loput ikkunasta on alempaa osaa).
cols="x,y"
ikkuna jaetaan kahteen osaan pystysuunnassa, vasemman osan leveys on x yksikköä ja oikeanpuoleisen osan leveys y-yksikköä (sama kuin yllä)
framespacing="x"
kehysten välinen etäisyys pikseleissä
border="yes|no"
tuleeko kehysten väliin reunaviiva
frameborder="yes|no"
tuleeko kehysten väliin reunaviiva - Microsoft Internet Explorer -yhteensopivuuden vuoksi kannattaa käyttää tätä rinnakkain border -attribuutin kanssa. Siis jos käytät border-attribuuttia, käytä myös tätä jotta IE osaisi näyttää sivun oikein.
bordercolor="color"
jos kehysten välissä on viiva, tämä määrää sen värin

Frame

Kun ikkuna on jaettu kahteen osaan, määritellään frame-elementeillä kummankin osan nimi ja sisältö. Alla lista elementin attribuuteista.

src="URL"
Kehykseen ladattavan HTML-dokumentin osoite (ts. kehyksen alkutila, kehyksen sisältöhän voi muuttua kun selaaja klikkailee linkkejä)
name="nimi"
Kehyksen yksilöllinen tunniste nimi
scrolling="yes|no|auto"
Scrolling-attribuutilla voidaan vaikuttaa kehyksen vierittämiseen (vierityspalkin olemassaoloon). Arvolla no kehykseen ei koskaan tule vierityspalkkia, arvolla yes se tulee aina eli silloinkin kun sitä ei tarvita. Auto-arvolla vierityspalkki ilmestyy kehykseen silloin kun sivu ei mahdu siihen kokonaisuudessaan.
framespacing="x"
Kyseisen kehyksen ympärille jäävä tyhjä alue pikseleissä
marginheight="x"
Määrittää pystysuunnassa kehyksen reunan ja sisällön väliin jäävän marginaalin paksuuden.
marginwidth="x"
Määrittää vaakasuunnassa kehyksen reunan ja sisällön väliin jäävän marginaalin paksuuden.
noresize
Tämä attribuutti estää käyttäjää muuttamasta kehyksen kokoa jälkikäteen. Muutoin tämä on mahdollista vetämällä hiirellä kehyksen reunaa.

Tuota nimeä tarvitaan silloin kuin jonkun linkin halutaan vaikuttavan johonkin toiseen kehykseen (kohta siitä esimerkki).

Edellisen sivun alussa annetussa esimerkkisivussa (http://www.karvonen.info/mute/tiedotus) oli kahden kehyksen sijaan kolme kehystä. Tutkipa sen koodia (View -> Source) jotta näet miten se on toteutettu.

01   <html>
02   <head>
03   	<title>MUSIIKKITEKNOLOGIEN TIEDOTUSFOORUMI</title>
04   </head>
05   <frameset rows="72,*" framespacing="0" frameborder="0">
06   	<frame src="top.html">
07   	<frameset cols="200,*" frameborder="0">
08   		<frame src="menu.html" name="menu">
09   		<frame src="content.html" name="content">
10   	</frameset>
11   </frameset>
12   </html>

Ensin ikkuna on jaettu kahteen osaan, jossa yläosan korkeus on 72 yksikköä ja kaikki sen alapuolella on alaosaa (koodin rivi 5).

Sitten tulee ensimmäinen frame-elementti, jolla määritellään yläosaan ladattava HTML-dokumentti (top.html, rivi 6). Alaosan frame-elementin sijaan sen paikalla onkin toinen frameset (rivi 7), jolla alaosa jaetaan kahteen vierekkäiseen osaan: menu (rivi 8) ja content (rivi 9):

Näin voidaan siis toteuttaa ikkuna, joka on jaettu useaan osaan: ensin jaetaan perinteisesti kahteen osaan ja tämän jälkeen ainakin toinen näistä kahdesta osasta jaetaan uudelleen kahtia ja niin edelleen.

Yhteensopivuus

Maailmalla on käytössä paljonkin selaimia, jotka eivät tule kehyksiä. Tällaisia ovat vanhat tekstipohjaiset selaimet sekä useat PDA-laitteet (kämmentietokoneet ja kännykät). Nyt jos rakennat sivut käyttäen kehyksiä, jäävät kaikki nämä käyttäjät huomioimatta, ja sivujen saavutettavuus kärsii.

Tästä syystä on hyvä tapa tehdä näitä selaimia varten sisällöstä oma versio, joka sijoitetaan noframes-elementtiin. Alla olevassa esimerkissä vaihtoehtoista sisältöä ei tosin ole kirjoitettu vaan noframes-elementtiin on laitettu linkki sivuun, jossa on sivun keskeinen asiasisältö (rivit 13-18). Tämä teksti tulee näkyviin ainoastaan selaimissa, jotka eivät tue kehyksiä.

01   <html>
02   <head>
03   	<title>MUSIIKKITEKNOLOGIEN TIEDOTUSFOORUMI</title>
04   </head>
05   <frameset rows="72,*" framespacing="0" frameborder="0">
06   	<frame src="top.html">
07   	<frameset cols="200,*" frameborder="0">
08   		<frame src="menu.html" name="menu">
09   		<frame src="content.html" name="content">
10   	</frameset>
11   </frameset>
12 
13   <noframes>
14   <body>
15   	<p>Tämä sivu käyttää kehyksiä, 
     	mutta <a href="content.html">tästä</a> pääset käsiksi 
16   	keskeiseen sisältöön ilman kehyksiä.</p>
17   </body>
18   </noframes>
19
20   </html>