Verkkojulkaisemisen oppimateriaaleja

Webbisivujen elementtien asemointiin on käytännössä olemassa kolme erilaista tekniikkaa: CSS-tyylit, taulukot ja kehykset.

Asettelu CSS:n ja div-elementtien avulla

Selainten CSS-tuen parannuttua myös asettelun tekeminen CSS:n avulla on yleistynyt nopeasti. Asettelu tehdään jakamalla sivun loogiset sisältökentät div-elementtien sisään ja määrittelemällä niiden paikka CSS-tyylien avulla.

CSS on asetteluun erityisetsi rakenteen ja sisällön erottelun periaatteen näkölkulmasta ihanteellinen tapa: Asettelua voidaan muuttaa samasta tyylitiedostosta kuin muitakin ulkoasumäärityksiä itse sisältöön ja HTML-koodiin koskematta. HTML- koodi säilyy siistinä, sillä tekstisisällön ja peruselementtien lisäksi HTML-dokumentti sisältää vain rakenneosat määritteleviä div-elementit, jotka on vielä parhaassa tapauksessa nimetty sisältöä kovaavilla id- tai class-attribuuteilla.

Havaintokuva: Div-elementeillä on määritelty neljä eri sisältökenttää (otsikkokenttä, navigaatio, leipäteksti ja oranssi "bonuskenttä") ja näille on annettu mitat ja koordinaatit tyylitiedostossa. Huomaa että CSS:lla vapaudutaan taulukoiden ja kehysten käyttämästä "ruudukosta": kenttien ei tarvitse välttämättä olla linjassa ja ne voivat mennä päällekkäinkin.

Elementtien asemointi CSS:n avulla

Taulukot (tables)

Taulukot ovat oleet tähän asti yleisin tapa tehdä asettelua sivulle: Koko sivu on jaettu taulukon avulla "ruudukoksi" ja sisältö on lätkitty taulukkosolujen sisään.

Semanttisesti taulukoiden käyttö on kuitenkin virheellinen tapa tehdä asetteluja: taulukot on tarkoitettu taulukoidun tiedon esittämiseen, ei asetteluun. Taulukoita käytettäessä dokumentin ulkoasumäärittely ja varsinaisen sisältö ovat myös samassa koodissa, eikä asettelua voida haluttaessa muuttaa keskitetysti CSS-tyylien avulla.

Taulukkotaitto ei siten ole sekään suositeltava, vaikkakin kehyksiin verrattuna melko "harmiton" tapa tehdä asettelua. Asemointitaulukko kannattaa kuitenkin pitää mahdollismman yksinkertaisena.

Havaintokuva: Sivupohjana on neljän rivin ja kolmen sarakkeen taulukko (3x4 solun "ruudukko"), jonka soluja on yhdistelty (katkoviivat)

Taulukkotaitto

Kehykset (frames)

Kehysten eli "freimien" avulla selainikkuna voidaan jakaa vaaka- tai pystysuunnassa osiin, joissa esitetään erilliset HTML-dokumentit. Kehysten avulla ei siis niinkään asetella sivua, vaan itse selainikkunaa.

Kehysten hyötynä on sivusto päivitettävyyden helpottuminen: Navigaatio- tai otsikkopalkki voidaan tehdä omaksi tiedostokseen ja päivittää erillään "leipätekstisivusta". Kehyksen osilla on myös kullakin erillisinä ikkunoina oma vierityspalkkinsa: navigaatiopalkki voi olla koko ajan näkyvissä, vaikka teksti-ikkunaa vieritettäisiinkin.

Huonoja puolia kehyksissä on kuitenkin runsaasti enemmän: Kehyksiä käyttävässä sivustossa osoitteena näkyy koko ajan kehykset määrittelevän sivuston osoite, eikä alaivuille voi linkittää suoraan niin, että myös kehykset tulisivat näkyviin. Erityisen vakavaa on, että jos selain ei tue kehyksiä, sivusto ei näy ollenkaan. Kehyksistä ollankin käytännössä kokonaa luopumassa tavallisilla verkkosivuilla.

Havaintokuva: Kuvassa sivu on jaettu kehyksillä ensin kahdeksi ikkunaksi vaakasuunassa (vihreä otsikkopalkki ylös), sitten uudestaan pystysuunnassa (keltainen "navigaatiopalkki" vasemmalle) ja vielä kerran vaakasuunnassa (sininen alatunnistekenttä).

Asemointi kehyksillä