Oppimistehtävä 4
Toteuta mallikuvien mukaisia WWW-sivuja. HTML-pohjat saa valmiina, joten itselle toteutettavaksi jää sivujen ulkoasut. Kaikille tasoille yhteisiä vaatimuksia ja ohjeita ovat:
- Jos muutat alkuperäisiä HTML-dokumentteja, niin muutosten jälkeenkin niiden rakenteen pitää olla järkevä, eli käytä rakenteellisesti oikeita elementtejä.
- Jokaisen dokumentin täytyy mahdollisten muutosten jälkeenkin noudattaa joko XHTML 1.0 Strict- tai HTML5-dokumenttityyppiä. Dokumenttien on oltava valideja.
- Kaikki ulkoasumääritykset tulee tehdä ulkoisiin CSS-tiedostoihin, eli tyylimäärityksiä ei saa upottaa HTML-koodin sekaan. Taulukkotaitto ei ole sallittua.
- Eri sivujen tulee käyttää samoja tyylitiedostoja samoista sijainneista.
- CSS-tiedostojen tulee olla validia CSS 2.1:stä tai CSS 3:sta.
- Mittayksiköinä tulee käyttää skaalautuvia yksiköitä aina kun mahdollista. Pikselien käyttöä tulee välttää.
- Huomioi, että eri selaimissa sivujen ulkoasu ei ole täysin identtinen. Mallikuvat on otettu Firefox-selaimella.
- Mallikuvissa otsikkoelementtien fontti on Tahoma. Kaikkien muiden elementtien fontti on selaimen oletusfontti.
- Mallikuvissa käytetyt värit saa selville esimerkiksi Firefoxin ColorZilla-lisäosalla.
- Oppimistehtävän palauttaminen:
- Siirrä tekemäsi dokumentit WWW-palvelimelle (esim. users.jyu.fi) ja testaa, että ne toimivat sieltä.
- Pakkaa kaikki tehtävässä tekemäsi ja käyttämäsi tiedostot zip-pakettiin (säilytä myös mahdollinen luomasi hakemistorakenne). Tiedoston maksimikoko saa olla 10 Mt.
- Palauta zip-tiedosto Moodle-aktiviteettiin Oppimistehtävän 4 palauttaminen. Kerro palautuksessa myös Muistiinpanot-kentässä WWW-osoite, josta tehtävä löytyy sekä palauttamasi tehtävän taso (1, 3 tai 5).
- Palautus on tehtävä viimeistään tiistaina 17.4.2012 klo 24:00. Myöhästyneitä palautuksia ei oteta vastaan.
Taso 1
Alla on lähdekoodit kahdelle HTML-sivulle. Linkitä sivuille CSS-tiedosto ja tee siihen ulkoasumääritykset siten, että sivut näyttävät alle linkitettyjen mallikuvien mukaisilta.
Ohjeita
- Molempien sivujen tulee käyttää samaa CSS-tiedostoa.
- Lisää lähdekoodipohjiin CSS-tiedoston linkitys ja muuta oma nimesi sille varattuun paikkaan. Muita muutoksia HTML-tiedostoihin ei välttämättä tarvitse tehdä.
- Huomioi ulkoasun määrittämisessä etenkin seuraavat eri elementtien ominaisuudet, joita
mallikuvissa on muokattu:
- fontti ja fonttikoko
- värit
- marginaalit ja täytteet
- reunaviivat
- leveydet
Taso 3
Tee tason 1 tehtävät ja muokkaa sen jälkeen CSS-tiedostoa vielä siten, että saat sivuista lopulta alle linkitettyjen mallikuvien mukaisia:
Ohjeita
- Joudut muokkaamaan CSS-tiedoston lisäksi hieman myös HTML-tiedostoja. Käytännössä sinne tarvinnee lisätä muutamia div-elementtejä sekä mahdollisesti muuttaa hieman jo olemassa olevien elementtien järjestystä.
- Molempien sivujen tulee käyttää samaa CSS-tiedostoa.
- Huomioi, että ulkoasun ei tarvitse näyttää täysin samalta eri levyisillä selainikkunoilla. Skaalautuvuus on sallittua ja suotavaakin.
- Ulkoasun voi toteuttaa monilla eri tekniikoilla, mutta ainakin position- ja float-elementit lienevät tarpeellisia.
Taso 5
Tee tasojen 1 ja 3 tehtävät sekä lisäksi sivulle 1 erilliset tyylitiedostot tulostusta ja mobiililaitteita varten. Alle linkitetyistä kuvista näet, miten sivun tulisi käyttäytyä tulostettaessa ja kapealla selainikkunalla. Normaalilla selaimella leveällä (yli 800 pikseliä) selainikkunalla sivun tulee näkyä kuten 3. tasolla.
Ohjeita
- Linkitä 3. tasolla tehtyyn HTML-tiedostoon erillinen tyylitiedosto tulostusta ja kapeanäyttöisiä laitteita varten. Tulostukseen tarkoitettu tyylitiedosto tulee linkittää print-mediatyyppinä. Kapeanäyttöisille laitteille tarkoitettu tyylitiedosto linkitetään all- tai screen-mediatyyppinä. Kyseisen tyylin käyttöönotto toteutetaan mediakyselyillä siten, että tyyli tulee käyttöön automaattisesti, kun käyttäjän selainikkunan leveys jää alle 800 pikselin. Yli 800 pikselin selainikkunalla käytetään normaalia 3. tasolla tehtyä tyyliä.
- Tulostusnäkymässä ulkoasu on muutettu pitkälti 1. tasolla tehdyn ulkoasun tyyliseksi. Lisäksi kuva on poistettu näkyvistä kokonaan.
- Tulostusnäkymän toimivuutta kannattaa testata selaimen tulostuksen esikatselussa.
- Mobiilipuolella merkittävimmät muutokset suhteessa normaaliin ulkoasuun ovat fonttikoon pienentäminen 80 %:in alkuperäisestä sekä lista- ja taulukko-lohkojen asetteleminen allekkain rinnakkaisen sijasta.
- Mobiilipuolta voi testata kaventamalla selainikkunan alle 800 pikselin leveyteen.
- Mediakyselyiden käytöstä tulevista validaattorin antamista virheistä ei tarvitse välittää.
Käyttäjien kommentit