Digitaalisen median tekniikat, kevät 2005

Harjoitus 2

Tehtävä 1-4

Jatkamme viime kerralla harjoitustilaisuudessa annetun tehtävän (http://www.cs.helsinki.fi/u/laine/dime/k04/harjoitus1plus.html) käsittelyä.

• Tutustu netissä erilaisiin tapoihin toteuttaa valikko CSS:llä
• Tee harjoituksissa aloitetusta sivustosta täysin toiminnallinen:
  • valikot toimivat siten, että valinta valikosta 2 vaihtaa valikon 3 sisällön ja valinta valikosta 3 vaihtaa sivun osaan 4. Valikossa 5 on ainakin kolme valintaa (nämä voivat kaikki avata saman demosivun). Yhdellä avautuvista sivuista on yrityksen pääkonttorin kuva (etsi verkosta joku sopiva kuva). Toteuta ainakin 2 sisällöltään erilaista valikkoa osaan 3.
• Muotoile sivu seuraavasti:
  • Yläosan otsake on keskitetty, sininen teksti
  • Yleisesti sivun fontti on san-serif, yläotsakkeen fontti voi olla jokin muu, ei Times Roman
  • Yhteystiedot on tasattu oikealta
  • Yhteystietolokerolle on annettu jokin taustaväri
  • Valikko 2:ssa valikkoalkion merkkinä on kansion (folder) tyypillinen kuvasymboli. Valikkoalkioita ei ole alleviivattu. Valittu alkio erottuu muista, mutta aiemmin valittu ei erotu. Valikon otsakkeella on sopiva taustaväri. Otsakelaatikko on koko kehyksen levyinen.
  • Valikko 3:n otsakerakenne samanlainen kuin valikossa 2. Valikkoalkiot sijaitsevat eri riveillä, mutta ilman lista-alkion merkintää. Valittu alkio erottuu muista.
  • Valikko 5 on toteutettu siten, että alkiot näyttävät napeilta. Koska sisältö aukeaa uuteen ikkunaan ei valittu alkio erotu mitenkään muista. Nappi voisi näyttää painuvan alas kun kursori tulee sen päälle. Valikon html-rakenne on kuitenkin lista.
  • Alueella 4 oleva tuote-esittely sisältää
    • Otsakkeen (keskitetty täysleveään taustakuvalla varustettuun otsakekenttään)
    • 2cm sisennetyn korkeintaan 300px levyisen tuotteen kuvan
    • Kuvan vieressä oikealla ylhäällä laatikossa hintasuositus
    • Kuvan alapuolella vaakapalkkina toteuttu valikko (rakenteellisesti lista), kukin alkio antaa erilaista lisätietoa tuotteesta (ensimmäinen avatkoon tuotteen käyttöä kuvaavan videon (videon voi avata erillisessä esitysohjelmaikkunassa - etsi jostain jokin mpeg tai avi, jolla demoat
    • Tuotteen lyhyen kuvauksen (lokerossa, jonka marginaali vasemmalta ja oikealta 2 cm, lokerolla ohut reunus, lokeron sisällä tyhjää ylhäällä ja alhaalla 1 merkkikorkeus, sivuilla 2, fonttikoko 90% perusfontista, vaalea taustaväri

  Harjoituksen pohjaksi voit ottaa tiedostoja hakemistosta http://www.cs.helsinki.fi/u/laine/dime/testi/ . Linkkilistoja pitää täydentää target-määreillä, jotta linkit toimisivat. Ideana on että jokaisella tuoteryhmällä on oma hakemistonsa, jossa tuotteet.html sisältää tuoteluettelon. Vain alihakemistossa a on sisältöä.