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 HTML5- tai XHTML 1.0 Strict -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 (ja eri levyisillä selainikkunoilla) sivujen ulkoasu ei ole täysin identtinen. Mallikuvat on otettu Firefox-selaimella.
- Mallikuvissa otsikkoelementtien fontti on Verdana. 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 Palautuksen lisätiedot -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 22.4.2014 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 samasta sijainnista.
- Lisää lähdekoodipohjiin CSS-tiedoston linkitys ja muuta oma nimesi ja päivämäärä niille 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 vähintäänkin lisätä muutamia lohkotason elementtejä (esim. div).
- Molempien sivujen tulee käyttää samaa CSS-tiedostoa samasta sijainnista.
- 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-ominaisuudet 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 600 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 600 pikselin. Yli 600 pikselin selainikkunalla käytetään normaalia 3. tasolla tehtyä tyyliä.
- Tulostusnäkymässä ulkoasu on muutettu 1. tasolla tehdyn ulkoasun tyyliseksi. Paperia on pyritty käyttämään tarkasti hyödyksi poistamalla turhia marginaaleja sekä antamalla eri lohkoille leveydeksi lähes koko paperin leveys. Lisäksi kuva otsikkoineen 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 taulukkolohkojen asetteleminen allekkain rinnakkaisen sijasta. Myös eri lohkojen leveyksiä on säädetty hyödyntämään paremmin kapean selainikkunan tila.
- Mobiilipuolta voi testata kaventamalla selainikkunan alle 600 pikselin leveyteen.
Käyttäjien kommentit