Sivupohjien täyttö suppeat sivupohjat Tässä kuvataan sivupohjien muokkaus askelittain yksinkertaisemman sivupohjan avulla. Tätä ohjetta tunnollisesti seuraamalla saat aikaan yksinkertaiset, mutta toimivat kotisivut yhdistyksellesi. Ohjeessa on käytetty kaikkein yksinkertaista ulkoasua. Keskity siihen vasta kun kaikki tarvittava tieto on sivuillasi. Avaa aina muokattava sivutiedosto editorissa ja selaimessa. Selaimessa sen avaat tuplaklikkaamalla tiedostoa, editorissa avaat klikkaamalla tiedostoa hiiren oikealla napilla ja valitsemalla avaa ohjelmalla -> muistio, eng. notepad (tai ohjelmalla textpad jos olet sen asentanut käyttöön). Sivupohjan etusivu (index.html) Etusivu on aina oltava muotoa index.html, onkin tärkeää että sitä ei nimetä uudelleen. Sivun koodaus ja <head></head> -lohko Sivun aivan yläosaan tulee aina yllä kuvattu sivun määrittely. Siinä mm. valitaan sivuston koodaus ja käytettävä kieli. Älä tee siihen muutoksia jos et ole aivan varma mitä olet tekemässä. <head> </head> elementtiin joudut jo tekemään joitakin muutoksia. Siellä määritellään sivun otsikko ja joitakin metatietoja. description-kohtaan voit lisätä jotakin kuvaavia termejä, nämä auttavat hakukoneita löytämään sivusi. Huomaa, että niiden on tultava aina lainausmerkkien sisään ja ne erotellaan pilkulla. Esim: kirkonkylän kyläsivut, kyläsivut, kyläyhdistys. Title-elementin sisälle tulee kotisivujen otsikko joka näkyy selaimen otsikkorivillä. Pidä se lyhyenä ja kuvaavana. Esimerkki:
Tulos: <body> -elementin alku ja sivun yläbanneri Lisää tähän <h1> </h1> -otsikkoelementtiin yhdistyksesi nimi. Maksimipituus noin 40 merkkiä. Jos nimestä tulee pidempi eikä se näytä siistiltä otsikkopalkissa, joudut muokata tyylitiedostoon tekstin kokoa. Katso ohjeet siitä css-osiosta. Jos haluat banneriksi kuvan, vaikkapa kyläraitin tai kylätalon kuvan, ohjeet myös siihen löytyvät laajemman sivumallin ohjeesta. Esimerkki:
Tulos: Navigointipalkki Tässä luodaan yläosan navigointipalkki. Jos säilytät sivun sisällön sivupohjien mukaisena, näitä ei tarvitse muokata. Muokkaamista ei suositella, mutta jos sivusi sitä edellyttävät, se on kuvattu laajempien kotisivujen ohjeissa.
Sivun tekstiosat Kotisivun tekstiosat on jaettu kahteen eri sarakkeeseen. Vasemmanpuolimmainen joka on sivukoodissa ensimmäisenä käsittää ¾ sivun koosta (n. 660px) ja on varsinaista tekstiosaa varten. Oikeanpuoleinen osa on ¼ sivun koosta (n. 190px). Sivun koko leveyssuunnassa on yhteensä 900 pikseliä, joten sen käyttö on matkapuhelimella ja muilla mobiililaitteilla helppoa. Ensimmäisenä käsittelyssä on vasemmanpuoleinen tekstiosa: Sivu on itseasiassa jaettu taulukolla kahteen eri kokoiseen soluun. Tässä aloitetaan taulukko aloituselementillä, ja siihen ei ole tarvetta koskea. Ole kuitenkin huolellinen että nämä elementit säilyvät sivupohjissa oikeilla paikoillaan että sivuston rakenteellisuus säilyy.
Yllä on vasen osa kokonaisuudessaan. Ylimmällä koodirivillä määritellään osan kooksi 75% koko taulukon leveydestä. Seuraavana on tekstiosan otsikko. Huomaa että <h1> </h1> -otsikkoa käytetään vaan kerran kussakin solussa. Jaa tekstiä alaotsikolla niin moneen osaan kuin haluat, <h2> </h2> on seuraavan tason otsikko, <h3> </h3> on pienin mallissa käytetty otsikkotaso. Muista että teksti täytyy tulla kappale-elementtien sisälle eli: <p> Tekstiä. </p>. Kappale-elementtien sisällä tehdyt tekstin ulkoasun muokkaukset eivät näy selainikkunassa, kaikki muotoilu tulee käyttää elementtejä käyttäen, sijoita jokainen kappale siis oman kappale-elementtinsä sisälle. Muista, että kappaleelementitkin ovat vain tekstiä, joten kun kirjoitat niitä, ole tarkkana että merkki tulee oikein hakasineen. Esimerkkisivulla tekstin sisään on lisätty jonkin verran linkkejä muualle esimerkkisivustoon. Linkki on aina muotoa <a href= linkin osoite > linkin kuvaus </a>. Pidä huolta että linkin osoite tulee lainausmerkkien sisälle. Huomaa taas että koodin muotoilu editorissa ei näy selainikkunassa. Esimerkki:
Otsikkojen ja kappaleiden määrää ei ole mitenkään rajattu, myöskin linkkejä ja kuvia voi tekstin sisään lisätä. Yleensä kuitenkin vähemmän on parempi, varsinkin etusivu tulisi avautua kokonaisuudessaan selainikkunassa ensimmäisellä avauksella. Voit sijoittaa loput materiaaleista sitten muualle sivustolle. Tulos:
Seuraavaksi käsitellään oikeanpuoleinen sarake. Se on varsin monikäyttöinen ja siihen voi lisätä monenlaisia tietoja, kuten yhteystietoja, tietoiskuja, linkkejä aineistoihin, tai vaikkapa pieniä kuvia elämöittämään sivuja. Käyttöä ei ole mitenkään rajattu, mutta kuvien maksimikoko on rajattu 190 pikseliin leveyssuunnassa. Myös pitkät sähköpostiosoitteet, nimet ja vastaavat voivat aiheuttaa ulkoasun vääristymää jos niissä ei ole välilyöntejä että selain pystyy ne automaattisesti rivittämään. Tarkista siis aina selainikkunassa että ulkoasu näyttää siistiltä. Huomaa että henkilökohtaiset yhteystiedot on paras laittaa aina sivuille kuvana, että tietoturva säilyy. Jos lisäät yhdistyksen sähköpostiosoitteen sellaisenaan sivulle, tulee olla varma siitä että sähköpostipalvelussa on käytössä tarvittavat roskapostisuodatukset. Muista aina pyytää asianomaiselta lupa ennen kuin lisäät mitään henkilöön liittyviä tietoja sivuille. Lisää etusivulle vähimmäistietoina yhdistyksen virallinen nimi ja Y-tunnus, yhdistyksen puhelinnumero ja sähköpostiosoite. Jos yhdistyksen puhelinnumerona on yksityisnumero, lisää myös henkilön nimi ja asema yhdistyksessä, sekä ajat, jolloin numerosta voi henkilöä tavoitella. Voit lisätä tiedot sivulle monella eri tavalla, alla on yksi esimerkki. Esimerkki:
Jäsentelyssä on käytetty <br /> -elementtiä, joka aiheuttaa tekstissä pakotetun rivinvaihdon. Älä kuitenkaan käytä tätä jäsentelemään normaalia tekstiä, sitä varten on kappale-elementit. Voit kuitenkin käyttää niitä varovaisesti luomaan listoja, jos et halua käyttää varsinaisia luetteloelementtejä <ul> </ul> numeroimattoman tai <ol> </ol> numeroidun listan luomiseksi Tulos:
Seuraavana koodissa päätetään tekstiosat sisältävä taulukko sekä sivun pääosan elementti. Ole tarkkana että nämä lohkopäätökset säilyvät oikeassa paikassaan, muuten sivun rakenteellisuus rikkoontuu ja sivu ei välttämättä toimi selaimessa. Viimeisenä elementtinä koodissa on alabanneri. Alabanneria käytetään kuitenkin vain joissakin tyylitiedostoissa luomassa ulkoasukokonaisuuksia ja silloinkin sitä tarvitsee harvoin muokata. Niiden eroista löydät ohjeet kyseisten tyylitiedostojen kansioista sivupohja-paketeissa. Muissa ulkoasuissa siihen ei tarvitse tehdä muutoksia. Viimeisenä koodissa on päätöselementit, joilla lopetetaan sivun runko </body> Sekä lopullinen selaimessa näkyvä nettisivu sidotaan paketiksi </html>. Päätöselementti päättää aina verkkosivun. Olet saanut ensimmäisen sivun valmiiksi, tarkista siis selaimessasi että se näyttää toimivalta ja oikealta. Jos sisältö näyttää oikealta, mutta ulkoasu ei miellytä silmääsi, älä tässä vaiheessa huolehdi siitä, sillä sitä muokataan myöhemmin kun sivut ovat muutoin valmiit. Tärkeintä on että saat kaikki tarvittavat ja tärkeät tiedot sivuillesi. Jatka seuraavan sivun muokkausta. Se ei ole yhtään sen vaikeampi kuin ensimmäinenkään. Olet nyt oppinut tekemään kotisivuja.
Toinen alasivu (ajankohtaista.html) Olet saanut valmiiksi ensimmäisen sivun kokonaisuudessaan. Jatko onkin helpompaa sillä suuri osa sivujen sisällöstä on sama kuin etusivulla. Näin luodaan yhtenäinen rakenne koko sivustolle. Muuta siis: head, banner ja navi osat vastaamaan etusivun vastaavia. Jos haluat eritellä sivut toisistaan, voit muuttaa head-lohkon title-kohdan Kirkonkylän kyläsivut vaikka muotoon Kirkonkylän kyläsivut - ajankohtaista. Muutoin jatketaan main-lohkon sisältä. Tässä sivun sisällöksi on luotu yksinkertainen tapahtumalista. Jäsentelyyn ei ole käytetty mitään muuta kuin yksinkertaisia muotoiluelementtejä. Huomaa että on käytetty <strong> </strong> -elementtiä jolla päivämäärät on erotettu tekstistä. Muuten tapahtumat on jaoteltu yksittäisiin kappaleisiin. Luo uusi tapahtuma kopioimalla ja liittämällä koko kappale, muuttamalla päivämäärä ja muokkaamalla tekstiksi haluamasi sisältö. Voit lisätä linkkejä tapahtumien omille sivuille ja vastaaviin sisältöihin. Tämä on helpoin tapa tehdä tapahtumalista, mutta käytä sitä vain, jos yhdistykselläsi on muutama tapahtuma vuodessa, sillä tapahtumat on lisättävä listaan aina muokkaamalla itse sivukoodia. Jos tapahtumia on enemmän tai yhdistykselläsi on mm. kylätalon tai muiden kiinteistöjen varauksia, joita tarvitsee myös listata, on syytä etsiä joku toinen ratkaisu. Laajempien sivupohjien esimerkeissä on esitelty Google-kalenteripalvelun upottaminen sivulle, se onkin äärimmäisen suositeltavaa helppouden ja käytettävyyden kannalta. Muista että vanhat tapahtumamerkinnät on syytä poistaa, muuten sivustolla annetaan lukijoille kuva ettei siitä huolehdita. Google-kalenteripalvelu toimii tässäkin tapauksessa paremmin, sillä se näyttää vain ajankohtaisen sisällön ensimmäisellä avauksella.
Voit aina aloittaa yksinkertaisella tapahtumalistalla ja vaihtaa myöhemmin. Esimerkki: Tulos: Sivulla on vielä oikeanpuolinmainen sarake. Voit käyttää sitä vaikka muistuttamaan tärkeimmistä tapahtumista jotka tiedetään jo hyvissä ajoin etukäteen. Käyttöä sarakkeelle voi olla monenlaista, joten sovella sitä mielesi mukaan.
Tässä on lisätty tiedot tulevista kesän markkinoista. Tekstissä on linkki kuvitteelliselle markkinasivulle. Voit tehdä aina samaan kansioon oman sivun tapahtumaa tai tilaisuutta varten. Nimeä se omaksi tiedostoksiin, lisää sivustolle linkki sinne. Voit myös käyttää toista ulkoasua tarvittaessa erottamaan sitä muusta sivustosta. Voit vaikka nimetä jonkun valinnaisen tyylitiedoston tyyli2.css nimiseksi ja muokata <head> -lohkossa sisältämä linkki johtamaan sinne. Esimerkki: Tulos:
Kolmas alasivu (kyla.html) Kolmannen alasivun muokkaaminen aloitetaan taas muuttamalla head, banner ja navi osat vastaamaan etusivun vastaavia. Sivun runko-osat ovat yleensä ainoat, jotka vaativat jotain muutoksia, sillä sivuston looginen rakenne halutaan säilyttää jokaisella alasivulla. Huomaa ettei tiedostonnimiin tule ääkkösiä. Kylästä tulee siis kyla jne. Yksinkertaisemmassa mallissa kaikki kylää koskevat tiedot on liitetty yhden sivun alle, tämä ei kuitenkaan ole välttämättä tarkoituksenmukaista, varsinkin jos halutaan liittää enemmän kylää koskevia asioita. Jos sivusto pidetään hyvin kevyenä, pärjätään tosin tälläkin. Laajemmassa versiossa kyläsivu on jaettu useampaan alasivuun ja se onkin ehkä paras tapa tehdä tämä kyseinen sivuston osa. Tässä vaiheessa osaat jo muokata sivupohjien tekstiä. Jos asia vielä tuottaa päänvaivaa, katso ohjeen alusta index.hml -sivun muokkauksen ohjeesta. Kirjoita laajemmat tekstikappaleet aluksi normaaleiksi
tekstitiedostoiksi, sen jälkeen kopioi ne sivupohjaan (ole tarkkana että ne tulevat oikeaan kohtaan taulukon solun sisälle, korvaa siis esimerkissä olevat otsikko- ja kappale-elementit omalla tekstilläsi). Sen jälkeen lisää otsikoiden ympärille sopivan tason otsikkoelementti ja lisää tekstin kappaleiden ympärille kappaleelementti. Tällöin teksti säilyy kotisivullasi suurin osin samannäköisenä kuin tekstitiedostossasi. Toimi siis seuraavasti: Tämä on otsikko Tämä on kappaleen tekstiä. Tämä on toisen kappaleen tekstiä. Tämä on alaotsikko Kopioi -> liitä ja muokkaa: Tämä on kappaleen tekstiä. <h1>tämä on otsikko</h1> <p>tämä on kappaleen tekstiä.</p> <p>tämä on toisen kappaleen tekstiä.</p> <h2>tämä on alaotsikko</h2> <p>tämä on kappaleen tekstiä.</p> Tällä tavalla teet nopeasti sivuille sisältöä varsinkin jos sinulla on valmiita tekstidokumentteja joissa on sopivaa sisältöä. Tällä sivulla ei haittaa vaikka tekstiä on enemmänkin, ja se ei avaudu ensimmäisessä ikkunassa. Liitä tänne kaikki kylää koskevat tiedot, yhdistystä koskeville tiedoille on oma sivunsa. Jos käytät pohjaa jonkun muun kuin kyläyhdistyksen käyttöön, voit tehdä tästä sivusta omasi yksinkertaisesti korvaamalla kaikki kylään liittyvät maininnat omalla otsikollasi, myös siis tiedostonnimen sekä navigaatiopalkeissa olevat viittaukset.
Neljäs alasivu (yhdistys.html)