Viikkotehtävä 1

Toteuta mallikuvien mukainen WWW-sivu. Kaikille tasoille yhteisiä vaatimuksia ovat:

Värit, fontit, tekstit ja asettelut tulevat olla mallikuvien mukaisia.
Dokumentin rakenteen pitää olla järkevä. Esimerkiksi Linkkejä-lohkon (tasot 3 ja 5) linkit tulevat olla listaelementtejä. Samoin Tehtävät-lohkon alalistat (tasot 3 ja 5) tulevat olla listaelementtejä, vaikkei listamerkkiä olekaan.
Jokaisen dokumentin täytyy noudattaa XHTML 1.0 Strict -dokumenttityyppiä. Dokumenttien on oltava valideja.
Sivun ulkoasu on tehtävä CSS:ää käyttäen. Taulukkotaitto ei ole sallittua. Ulkoasun on toimittava ainakin Firefox 2 -selaimessa. CSS:n on oltava myös validia CSS2:sta.
- Ulkoasun on ainakin jossain määrin skaalauduttava tekstin ja ikkunan koon muutoksiin. Pikselipohjainen, kiinteälle resoluutiolle tarkoitettu asettelu ei ole sallittua.
Muista erikoismerkkien koodaukset.
label-elementit on kytkettävä eksplisiittisesti lomake-elementteihin.
Malleissa käytetty kirjasinvalikoima on: 1. Verdana, 2. Arial tai 3. joku päätteetön fontti

Taso 1

Tee kuvien mukainen XHTML-dokumentti ja toteuta ulkoasu yhdellä ulkoisella CSS-tiedostolla.

Värit saat poimittua mallikuvista esim. Firefoxin ColorZilla-laajennuksella.
Katso mallikuvasta 2, miten asettelun tulee toimia ikkunaa kavennettaessa.
- Lomakkeella lomakekentät siis lähenevät niitä vastaavia otsikoita, mutta eivät mene missään vaiheessa otsikoiden päälle tai alle. Lomakekenttä ei myöskään rivity toiselle riville.

Tee kuvien mukainen XHTML-dokumentti ja toteuta ulkoasu yhdellä ulkoisella CSS-tiedostolla.

Värit saat poimittua mallikuvista esim. Firefoxin ColorZilla-laajennuksella.
Katso mallikuvasta 2, miten asettelun tulee toimia ikkunaa kavennettaessa.
- Lomakkeella lomakekentät lähenevät niitä vastaavia otsikoita, mutta eivät mene missään vaiheessa otsikoiden päälle tai alle. Lomakekenttä ei myöskään rivity toiselle riville.
- Sivulohkot eivät kapene. Niiden koko muuttuu ainoastaan selaimen fonttikokoa muutettaessa.

Tee kuvien mukainen XHTML-dokumentti ja toteuta ulkoasu yhdellä ulkoisella CSS-tiedostolla.

Värit saat poimittua mallikuvista esim. Firefoxin ColorZilla-laajennuksella.
Katso mallikuvasta 2, miten asettelun tulee toimia ikkunaa kavennettaessa.
- Keskimmäiset lohkot kapenevat niin kauan, että maisemakuvan leveys saavutetaan. Tämän jälkeen Linkkejä-lohko alkaa mennä keskimmäisten lohkojen alle.
- Ylimmäisessä keskilohkossa alareunan tähdet menevät kavennettaessa maisemakuvan päälle.
- Lomakkeella lomakekentät lähenevät niitä vastaavia otsikoita, mutta eivät mene missään vaiheessa otsikoiden päälle tai alle. Lomakekenttä ei myöskään rivity toiselle riville.
- Sivulohkot eivät kapene. Niiden koko muuttuu ainoastaan selaimen fonttikokoa muutettaessa.
Muista laittaa maisemakuvalle otsikko ja vaihtoehtoinen teksti.

Käyttäjien kommentit