3.4 Tehtävä 11: sivusto

Tämä on aika pitkä ja vaativa tehtävä, joten varaa sen tekemiseen yhteensä ainakin 2-3 tuntia.

Sivusto (engl. site) on jonkun organisaation tai yksityishenkilön tekemä useamman HTML-sivun muodostoma kokonaisuus. On suositeltatavaa, että

  1. samaan sivustoon kuuluvat web-sivut näyttävät samanlaisilta (ts. niiden rakenne ja käytetyt tyylit ja värit ovat samat), ja
  2. navigointi eli liikkuminen sivustossa on selkeää. Tämä tarkoittaa että sivuilla vieraileva tietää aina, missä hän on ja miten hän pääsee sivulta pois (jonnekin muualle).

Sivu, josta ei pääse mihinkään (ei sisällä linkkiä minnekään) kutsutaan umpikujaksi (engl. dead-end page).

Tehtävänäsi on rakentaa pieni sivusto, joka koostuu kolmesta HTML-sivusta (tiedostojen nimet suluissa):

  • kotisivu tai pääsivu (paasivu.html)
  • ansiolista (cv.html)
  • linkkilista (linkit.html)

Ennen kuin ryhdyt mihinkään toimiin niin lue ohjeet loppuun - ohjeissa sanotaan milloin voit aloittaa tekemisen ja millä tavalla se kannattaa tehdä. Samaa materiaalia käytetään myöhemmin yhdessä seuraavan jakson harjoituksessa, joten koeta pysyä ohjeiden mukaisissa rakenteissa.

Tulevissa ohjeissa kerrotaan tarkasti minkä näköinen sivusta tulisi tulla ja mitä värejä pitäisi käyttää. Voit toki varioida ohjeita ja muuttaa värejä/tekstityylejä, mutta tällöin tehtävän tekemiseen menee vielä enemmän aikaa. Jos siis haluat päästä helpommalla, tee yksinkertaisesti ohjeiden mukaisesti, ja säästä visuaaliset ambitiosi ihan kurssin loppuun, jossa saat suunnitella ja toteuttaa juuri sellaiset sivut kuin itse haluat.

Noiden kolmen tiedoston lisäksi ivusto sisältää yhden alihakemiston nimeltään kuvat, jonne kaikki sivustolle tulevat kuvat sijoitetaan.

Sivun ulkoasu ja perusrakenne on seuraava (klikkaa kuvaa jos haluat nähdä sen isompana):

  • taustaväri #808000
  • tekstin väri #000080
  • linkit #CFCF00
  • vieraillut linkit #800000
  • aktiiviset linkit #00FF00
  • vasen ja oikea marginaali 40 pikseliä, ylämarginaali 20 pikseliä
  • Jokaisen sivun yläreunassa on pienellä kursiivilla kirjaisimella teksti: Sijainti: Kotisivu (tai vastaavasti Sijainti: Linkit tai Sijainti: CV)
  • Tämän jälkeen sininen (#000080) yhden pikselin paksuinen horistontaaliviiva
  • Sitten keskitetty taulukko, jonka leveys 250 pikseliä ja cellspacing 0. Reunavärinä sama sininen kuin muuallakin eli #000080
  • Taulukossa kolme yhtä leveää solua, joista kaksi toimii linkkinä muihin sivuihin ja yksi on tavallista tekstiä
    - pääsivulla linkit sivuihin cv.html ja linkit.html - kotisivu-sana ei ole linkki
    - ansiolistasivulla linkit sivuihin kotisivulle ja linkkilistaan - cv-sana ei ole linkki
    - linkkilistasivulla linkit kotisivulle ja ansiolistaan - linkit-sana ei ole linkki
  • Taulukon jälkeen sama horisontaaliviiva kuin sen yläpuolella
  • Otsikkojen kirjaisimena Courier New (käytössä otsikkotasot 1 ja 3)
  • Muutoin käytetään oletuskirjaisinta eli sitä minkä selain antaa automaattisesti
  • Sivun lopussa pienellä kursiivilla tekijänoikeusmerkintä (c) 2005 <oma nimesi>, sitä ennen tosin 40% levyinen keskitetty ohut horisontaaliviiva, sama sininen väri kuin aiemmin

Ohjeet

  1. Luo paikalliselle koneelle (ei siis web-kotihakemistoon) hakemisto nimeltään sivusto, ja sen sisään alihakemistoon nimeltään kuvat.
  2. Jos tai kun useampi sivu tulee käyttämään samaa rakennetta, pääset helpommalla jos ensin teet yhden sivun ja sitten kopioit tämän sivun toisella nimellä ja teet tarvittavat muutokset kopioon. Tee nyt pääsivu, ja siihen yllä olevan kuvan mukainen sisältö (tekstit saavat olla siansaksaa).
  3. Kopioi paasivu.html ja anna kopiolle nimeksi cv.html. Muokkaa sitä siten, että se näyttää seuraavanlaiselta (voit vaihtaa kuvaa yms.):
  4. Lopuksi kopioi vaikka cv.html ja anna kopiolle nimeksi linkit.html. Muokkaa sitä niin että se näyttää seuraavanlaiselta:
  5. Tarkista että linkit sivulta toiselle toimivat.
  6. Lisää kuva pääsivun otsikkoon, esim.

    Käytä linkkiin osittaista URL:ia, jotta kuva näkyy myös paikallisesti selaimella. Jos käyttäisit absoluuttista URL:ia http://www2.stadia.fi/~<tunnuksesi>/kuvat/xxx.gif kuva ei tietenkään näkyisi selaimessasi, koska et ole vielä kopioinut tiedostoja paikalliselta koneelta tuolle web-palvelimelle.

    KUVIEN KOPIOINTIOHJEET:
    Kopioi muutamia kuvia luomaasi kuvat-hakemistoon. Kopioinnin voit tehdä kolmella tavalla:
    1. viittaamalla suoraan alkuperäiseen URL:iin, jonka löydät tutkimalla alkuperäisen sivun koodia (tällöin et varsinaisesti kopioi kuvaa vaan ainoastaan viittaat siihen)
    2. klikkaa sivulla näkyvää kuvaa hiiren oikealla painikkeella ja valitse ponnahdusvalikosta Tallenna nimellä, Download to disc, Save to disk tms.
    3. jos kuva sijaitsee hakemistolistauksessa eikä millään sivulla, klikkaa listauksessa olevaa kuvan nimeä niin tällöin kuva ilmestyy selaimeen. Tämän jälkeen toimi kuten b)-kohdassa.
    Teknisessä mielessä kopioida kuvia mistä tahansa netistä omaan käyttöösi. Tällöin pitää muistaa tietenkin tekijänoikeusasiat, eli esim. valokuvia et voi käyttää ilman omistajan lupaa etkä missään tapauksessa voi muualta kopioimaasi kuvaa väittää omaksesi. Hyvä tapa on luvan kysymisen ohella pistää kuvan viereen tieto siitä, mistä kuvan on peräisin.

    Tarvitset kolme erilaista kuvaa: yksi kotisivua varten, toinen cv:tä varten ja kolmas linkkisivua varten.

    Käytetään aluksi yllä mainittua tekniikkaa b, eli kopioidaan kuva suoraan WWW-sivulta omaan kuvat-hakemistoon. Löydät kuvavaihtoehdot CV:tä ja kotisivua varten [täältä]. Voit kopioida tässä vaiheessa vaikka kaikki kuvat, ja etsiä netistä parempia vaihtoehtoja jos haluat (ei ole välttämätöntä).

    Kuvavaihtoehdot linkkisivua varten löydät [täältä]. Kopioi sieltä mieleisesi kuvat-hakemistoosi käyttämällä yllä mainittua tekniikkaa c.
  7. Lisää kuva cv-sivun otsikkoon:

    Käytä tässäkin suhteellista osoitusta.
  8. Lisää kuva linkit-sivun otsikkoon:

    Harjoituksen vuoksi käytä tässä absoluuttista osoitetta eli URLia: http://www2.stadia.fi/~<tunnuksesi>/kuvat/xxx.gif Koska tuota kuvaa ei ole vielä kopioitu palvelimelle eikä kuvaa siis löydy, pistää selain kuvan tilalle puuttuvan kuvan tunnuksen:
  9. Kun olet testannut selaimella, että paikallinen versio sivustosta toimii (lukuunottamatta tuota edellämainittua kuvan puuttumista), kopioi koko sivusto-hakemiston sisältö web-kotihakemistoosi. Huom! Älä kopioi sivusto-hakemistoa sellaisenaan vaan ainoastaan sen sisältö. paasivu.html -tiedoston tulee siis sijaita public_html-hakemistossa eikä public_html/sivusto -hakemistossa.
  10. Jos käytit koulun konetta, siivoa jälkesi eli poista kaikki paikalliselle koneelle tallentamasi tiedostot ja hakemistot (ellet sitten tallentanut tiedostoja z-hakemistoosi).