Verkkojulkaiseminen, syksy 2004

Tällä harjoituskerralla suunnitellaan ja toteutetaan minikokoinen sivusto. Samalla syvennetään CSS-taitoja, erityisesti elementtien asettelun suhteen.

Sivuston suunnittelu

Sivuston suunnittelusta - mm. sisältölähtöisyydestä ja erilsista sivuston rakenteista - puhuttiin tarkemmin kolmennaella ja neljännellä luennolla. Aiheesta on löytyy myös ohjeita verkkomateriaaleista.

Nyt harjoitellaan kuitenkin lähinnä sivuston teknistä toteutusta, eli

• sivun sisältökenttien merkkausta XHTML:lla,
• niiden asettelua CSS:lla ja
• näin tehdyn sivupohjan kopioimista minikoisen sivuston toteuttamiseksi.

Tässä harjoituksessa sivujen sisältö voi olla vaikka puhdasta lorem ipsumia. Oikean sivuston (kuten oman lopputyön) suunnittelussa on kuitenkin tärkeää lähteä liikkelle sisällöstä: Mitä tietoa sivuille halutaan ja miten se on fiksuinta jakaa eri sivuille?

Sivupohjan asettelu

Webbisivustoissa yksittäiset sivut koostuvat tyypillisesti useista sisältökentistä, joista useimmat toistuvat eri sivuilla enimmäkseen muuttumattomina (esim. ylä- ja alatunniste, navigaatio jne.). Eri sivuilla muuttuu ainoastaan sivukohtainen sisältöosio.

Jotain pieniä muutoksia voi toki "ympäröivissä" rakenteissakin tapahtua (esim. navigaation alavalikot voivat vaihdealla eri sivuilla), mutta tässä harjoituksessa kannattaa yksikertaisuuden vuoksi pitää ne täysin staattisina.

Tee muutamasta sivusta koostuva sivusto käyttämällä sivupohjaa, johon olet valmiiksi merkannut eri sivuilla toistuvat sisältökentät:

1. Mieti aluksi, mitkä sisällöt toistuvat kaikilla sivuston sivuilla, luo tämän pohjalta yksinkertainen XHTML-sivupohja. Erota sivupohjasta eri sisältökentät div-elementeillä.
2. Voit muotoilla sivun ulkoasua käyttämällä ulkoista tyylitiedostoa. Tee tyyleillä myös kaikki sisältökenttien asemoinnit.
3. Huomaa, että navigaatiota varten joudut jo sivupohjaa tehdessäsi miettimään, monestako (pää)sivusta sivustosi koostuu - ja millä nimellä tiedostot tallennetaan.
4. Saatuasi sivupohjan rakenteen valmiiksi ja ulkoasun suunnilleen mieleiseksi, voit voit käyttää XHTML-koodia pohjana sivutson jokaiselle yksittäiselle sivulle muuttaen vain niiden sisältöosion sivulle sopivaksi.

Mistä liikkeelle?

Sivupohjan merkkaus XHTML:lla

Jos et ole vielä käyttänyt div-elementtiä elementtien jaotteluun, kannattaa lähteä liikkeelle HTML Dogin span ja div -ohjeista.

Sivupohjan koodi voi siis perusrakenteeltaan näyttää esim. tältä:

<div id="ylatunniste">
   ... muuttumaton ylätunniste ...
</div>

<div id="navigaatio">
   ... linkit sivuston sivuille ...
</div>

<div id="sisalto">
   ... sivukohtaisesti muuttuva sisältö ...
</div>

Sivupohja voi näidern lisäksi sisältää vaikka mitä muita sisältökenttiä.

Asettelu CSS:lla

Sivujen sisältökenttien asetteluun CSS:lla löytyy ohjeita ja linkkejä kurssimateriaaleista kohdasta Elementtien asettelu CSS:lla. CSS-asettelu ei ole niitä maailman helpoimpia asioita, mutta sivulta löytyy myös valmiita asettelupohjia ja työkaluja asettelun tekemiseen.

Weblogien sivupohjat

Huomaa myös saman toimintaperiaatteen toistuminen weblogeissa: eri sivuilla ainoastaan sivun sisältöosio muuttuu sivuplakkien ja ylä- ja alatunnisteen pysyessä samanlaisina sivulta toiselle.

Lokarilla tehdyn sivuston sivupohjan sisältöä voit muokata navigaatiota, linkkejä, ylä- ja alatunnistetta muuttamalla, sivupohjan asettelua taas ulkoasutyyleistä.