[Turun yliopisto, digitaalinen kulttuuri]

Yleistä | Kurssiohjelma | Linkit

Jaakko Suominen
Verkkosivustojen suunnittelun perusteet

Kehykset (Frames)

Netscape 2.0 -selaimen yhteydessä (1996) esiteltiin html-laajennus, joka mahdollista useamman WWW-sivun esittämisen yhtäaikaisesti selainikkunassa. Kehyskoodien avulla sivu voidaan jakaa kahteen tai useampaan osaan. Näin saadaan helposti pidettyä esimerkiksi navigointiin tarkoitetut kuvakkeet tai linkit tai vaikkapa sivun logo koko ajan näkyvillä.

Kehyssivut ovat periaatteessa aivan tavallisia html-sivuja, joita voi katsella myös erillisinä. Kaikki "normaalit" WWW-sivut voi avata kehysrakenteen sisälle ilman, että ne tietävät olevansa kehyksessä :) Sivun sisältö vain mahdutetaan pienempään tilaan ylempänä, pääsivulla, annettujen ohjeiden mukaan.

Jos haluat jakaa ruudun kahteen osaan, tarvitset kolme erillistä html-tiedostoa. Pääsivulla annetaan ohjeet, millä tavalla sivu jaetaan osiin. Siellä mm. määritellään, kuinka moneen osaan selainikkuna jaetaan, kuinka suuria osat ovat, voiko niitä vierittää ja onko osien välissä reunuksia. Pääsivulla annetaan niin ikään osille yksilölliset nimet ja kerrotaan, mitkä html-sivut kehysrakenteen sisään avataan ensimmäiseksi. Etusivulla voidaan määritellä myös vaihtoehtoinen esitystapa sellaisille selaimille, jotka eivät kehyksiä tue. Ohessa esimerkki pääsivusta, joka jakaa ruudun kahtia suhteessa 3:7. Vasemmasta kehyksestä tulee siis kapeampi.

<html><head>
<title>Kehyssivu</title>
</head>

<frameset cols="30%,70%">
<frame name="vasen" src="vasemmalla.html">
<frame name="oikea" src="oikealla.html">

<noframes>
<body>
<p>Tämä sivu käyttää kehyksiä, mutta käyttämäsi selain ei tue kehyksiä.</p>
</body>
</noframes>

</frameset>
</html>

Kehysrakenteen määrittelevän pääsivun lisäksi tarvitset siis sisältöä raameihin, erilliset html-sivut, jotka kehysten sisään avataan. Ne eivät poikkea muista html-sivuista oikeastaan muussa, kuin että linkkien yhteydessä voi (tai oikeastaan pitää) määritellä, mihin ikkunaan linkin kohde avautuu. Seuraavassa esimerkissä linkin kohde avautuu "oikea"-nimiseen kehykseen:

<a href="http://www.utu.fi/hum/satakunta/digi/" target="oikea">

Kaikkein helpointa kehyskokonaisuuden hallinta on jonkun WWW-editorin avulla. Esimerkiksi Frontpage-ohjelmassa kehyspohjan tekeminen on varsin yksinkertaista, kunhan vaan tajuat mitä olet tekemässä :) Frontpagen tekemää koodia voit sitten muokata suoraan käsin omia tarpeitasi vastaavaksi.

Upotetut kehykset

Ainakin Internet Explorer ja Netscapen uusimmat tukevat myös upotettuja kehyksiä. Tällöin erillinen ikkuna avautuu ikään kuin toisen sivun sisälle. Pääsivun sisältöä vieritettäessä upotettu kehys voi siirtyä kokonaan ruutunäkymän ulkopuolelle samalla tavalla kuin mikä tahansa WWW-sivun erillinen elementti, vaikkapa kuva. Seuraavassa esimerkkikoodissa tehdään upotettu kehys, jonka leveys on puolet koko ikkunan leveydessä ja korkeus yksi viidesosa. Kehyksen sisälle haetaan digitaalisen kulttuurin oppiaineen etusivu. Huom! Kehysten koon määrittelyssä voi käyttää joko suhteellisia prosenttiarvoja tai absoluuttisia kuvapistekokoja (kehyksen leveys esim. 450 kuvapistettä).

<h1>Upotettu kehys</h1>

<iframe width=50% height=20% align=center src="http://www.utu.fi/hum/satakunta/digi/" name="upotus">

<frame width=50% height=20% align=center src="http://www.utu.fi/hum/satakunta/digi/" name="upotus">

</iframe>

 

Mahdollisia ongelmatilanteita

Kehykset ovat olleet omiaan myös aiheuttamaan päänsärkyä WWW-sivujen suunnittelijoille ja käyttäjille. Aluksi ongelmana oli se, että kaikki selaimet eivät tukeneet kehyksiä tai eivät tukeneet niitä kunnolla. Tämä ongelma on pitkälti historiaa, mutta muut vaikeudet ovat edelleen olemassa.

  1. Kaikki hakukoneiden hakurobotit eivät osaa surffailla kehyssivuilla, joten "kehystetty" informaatio on vaarassa jäädä hakukoneiden listoilta pois
  2. Selainnäkymän jakaminen liian moneen ikkunaan tekee WWW-sivustosta sekavan ja yksittäisistä ikkunoista tulee helposti liian pieniä
  3. Kehysrakenteen sivujen sisäinen ja ulkoinen linkitys on tehtävä erittäin huolellisesti. Tyypillisimpiä virheitä on ulkopuolisen sivuston avaaminen oman sivuston sisälle yksittäiseen ikkunaan. Toinen tavallinen virhe on se, että navigointi-ikkunan tiedot avautuvat vahingossa kapeaan navigointi-ikkunaan eivätkä sinne, mihin ne on tarkoitettu. Kolmas erittäin tavallinen virhe on se, että navigointipalkkiin tehty paluu sivuston etusivulle avaa uuden kehysjaon yksittäisen kehyksen sisälle. Tämä ongelma ratkeaa, kun muistaa määrittää etusivulinkin avautuvaksi koko ruudun kokoiseksi (target="_top" -määritys linkkikoodin sisään).

Harkitse siis tarkkaan, onko kehysten käyttö välttämätöntä. Antaako sivuston ikkunointi jotain käytännön hyötyä?

Tehtävä