3.5 Kehykset

Katsopa ja tutkaile seuraavaa sivua: http://www.karvonen.info/mute/tiedotus.

Esimerkkisivu koostuu kolmesta erillisestä osasta: yläpalkista, vasemmalla olevasta menusta sekä varsinaisestä sisällöstä. Klikkaamalla johonkin menun elementtiin, oikeanpuoleisen osan sisältö muuttuu mutta muut osat pysyvät "paikoillaan".

Tässä on käytetty tekniikkaa nimeltä kehykset (engl. frames). Kehykset ovat selainikkunan itsenäisiä "ali-ikkunoita", joista kussakin on oma HTML-dokumenttinsa. Yksittäinen kehys voi olla vieritettävissä (skrollattavissa) sekä pysty- että vaakasuuntaan aivan samalla tavalla kuin tavallinenkin selainikkuna.

Itse asiassa tämän kurssin sivuilla on myös hyödynnetty samaa tekniikkaa - kurssin sisällysluettelo on yhdessä kehyksessä (tämän tekstin vasemmalla puolella) ja toisessa kehyksessä on varsinainen sisältö.

Kehyksen avulla selainikkuna voidaan kahteen osaan joko pysty- tai vaakasuunnassa. Näin saatuja osia voidaan jakaa uudelleen kahteen osaan, jolloin kehysten lukumäärää voidaan kasvattaa. Kehykset ovat aina suorakulmaisen muotoisia.

Kehysten avulla voit säästää työtä ja koodin tuplaantumista. Ajatellaanpa tilanne, jossa sinulla on 10 erilaista web-sivua ja joissa jokaisessa on samanlainen yläreuna (otsikko) ja vasemmassa reunassa navigointimenu. Sen sijaan, että otsikon ja navigointimenun koodi sijaitsee kaikissa 10 sivussa, voit kehysten avulla tehdä yhden yhteisen palkin ja yhden yhteisen menun, ja kolmanteen kehykseen rakentaa nuo edellämainitut 10 sivua ilman otsikkoa ja navigointimenua. Näin navigointimenun koodi tarvitsee kirjoittaa vain kertaalleen yhteen paikkaan.

Jos tuohon navigointimenuun pitää tehdä yksi muutos, riittää että muokkaat vain yhtä ainoaa tiedostoa. Jos kehyksiä ei olisi käytetty niin muutos pitäisi tehdä kaikkiin kymmeneen sivuun.

Internet-guru J. Korpela kirjoittaa kehyksistä seuraavaa:

"Kehysidea lienee peräisin siitä, että useissa ohjelmissa on mahdollista katsella isohkoa dokumenttia siten, että vasemmalla on kapeassa ali-ikkunassa sisällysluettelo ja oikealla isommassa ali-ikkunassa kulloinkin katsottavan osan sisältö. Seuraavassa on tästä esimerkkikuva, jossa Acrobat Readerillä luetaan sen omaa käyttöohjetta:



Tällaisella esitystavalla on useita etuja. Käyttäjä voi siirtyä vasemmassa kehyksessä, "navigointikehyksessä" haluamaansa kohtaan ja valita klikkaamalla haluamansa kohdan. Jos hän huomaa, ettei se sisältänytkään sitä mitä hän etsi, hän voi saman tien valita toisen kohdan. Erityisesti hakuteostyyppisissä dokumenteissa tämä voi olla näppärää. Esimerkiksi Eesti keele käsiraamat on kehyksiä käyttävä HTML-muotoinen dokumentti, joka havainnollistaa tätä.

Ilmeisistä ongelmista mainittakoon, että jos navigointikehys on kapeahko, otsikot täytyy kirjoittaa hyvin lyhyiksi tai niistä näkyy vain vähän alkua. Tämä helposti pilaa koko idean. Tosin jos käyttäjä voi säätää koko ikkunan kokoa ja ali-ikkunoiden suhdetta, ongelma pienenee. Sen sijaan yritys helpottaa ongelmaa pienentämällä tekstin kokoa navigointikehyksessä helposti vain aiheuttaa lisäongelmia, etenkin jos pienentämisessä ei olla hyvin kohtuullisia. Mutta kehyksellisyys joka tapauksessa asettaa suurempia vähimmäisvaatimuksia selainikkunan leveydelle. Ja kuvaruututila vaakasuunnassa on resurssi, josta järkevässä käytössä on muutenkin pulaa, koska ruudulla on useita ikkunoita. Lisäksi navigointikehys on koko ajan läsnä, silloinkin kun ei kaivata. Miksiköhän TV-ruudussa ei näytetä ruudun vasemmassa reunassa koko ajan illan TV-ohjelmaa tai saman yhtiön muiden kanavien tarjontaa? Tai miksi kirjan joka sivulla ei ole sisällysluetteloa?"

Lähde: http://www.cs.tut.fi/~jkorpela/webjulk/3.8.html

Kehyksen leveyttä (tai korkeutta) voidaan joissain tapauksissa käsin itse muuttaa. Kokeile tarttua alla olevan esimerkkisivun navigointipalkin reunaan ja vetää hiirellä (tarkka tarttumiskohta merkitty nuolilla).

http://www.info.tampere.fi/~lhphier/kotisivu/.