Digitaalisen median tekniikat, syksy 2007

Harjoitus 3 (24.9.-28.9.)

Viime kerran Harjoituksissa Firma OY:n tuote-esittelysivun ulkoasu ladottiin kehysrakenteita käyttäen. Samoin toiminnallisuus perustui tiedostojärjestelmän ja hakemistorakenteiden käyttöön. Tällä kerttaa on tarkoitus päätyä suunnilleen samankaltaiseen sivuun ilman kehysrakenteita. Tiedostossa http://www.cs.helsinki.fi/u/laine/dime/s07/h07_3_1.html on lähtökohtana oleva sisältö joka pitäisi muotoilla. Esimerkki tuote-esittelysivusta on erillisessä tiedostossa http://www.cs.helsinki.fi/u/laine/dime/s07/tuote_1.html. Jotta toiminnallisuus saavutettaisiin ilman skriptejä esittely esitetään sisäkehyksessä.

1. Sijoittele sivun elementit harjoitusten 2 kuvan mukaisesti. Joudut varmaankin lisäämään perusaineistoon ainakin div-elementtejä ja muissa tehtävissä muutakin, joten tee aineistosta itsellesi kopio. Huom: Tuotevalikkoa ei saa ilman skriptejä käyttäytymään samoin kuin kehysratkaisussa.

2. Muotoile sivun ulkoasua seuraavasti:

• Yleisesti sivun fontti on Arial tai muu san-serif fontti, yläotsakkeen fontti voi olla jokin hienompikin.
• Firman nimi on keskitetty, sininen teksti
• Yhteystiedot esitetään oikealta tasattuina, yhteystieto-osalla on hieman poikkeava taustaväri.
• Tuoteryhmä- ja tuotevalikon otsakkeille määritellään taustaväri ja mahdollisesti kehys. Voit myös käyttää jotain soveltuvaan taustakuvaa.

Tuote-esittelysivu sisältää:

• Otsakkeen (keskitetty täysleveään taustakuvalla varustettuun otsakekenttään)
• 2cm sisennetyn korkeintaan 250px levyisen tuotteen kuvan
• Kuvan vieressä oikealla ylhäällä laatikossa hintasuositus
• 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

3.Tutustu netissä erilaisiin tapoihin toteuttaa valikko CSS:llä. Määrittele valikot seuraavasti:

• Tuoteryhmävalikossa valikkoalkion merkiksi asetetaan kansion (folder) tyypillinen kuvasymboli. Valikkoalkioita ei alleviivata. Valittu alkio (active) erottuu muista, mutta aiemmin valitut eivät erotu. (Huom: tuoteryhmävalikon toiminnallisuus ei nyt ole kovin hyvä - käytännössä pitäisi näkyä vain valittu ryhmä eikä mitään linkkisiirtymista tapahtuisi. Tämän saa aikaan esim. JavaScriptillä voit miettiä miten - mutta kurssilla ei ole vielä ehditty niin pitkälle).
• Tuotevalikon valikkoalkiot sijaitsevat eri riveillä mutta ilman mitään lista-alkion merkintää. Valittu alkio erottuu muista.
• Linkki-valikko 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.

4. Tuoteryhmä- ja tuotevalikot voi toteuttaa usealla tavalla, tässä on 2 erillistä valikkoa. Olisi mahdollista käyttää myös monitasoista valikkoa. Näitä voidaan toteuttaa joko pelkästään CSS:llä ja CSS:n ja JavaScriptin yhdistelmällä. Tutustu joihinkin ratkaisuihin ja selvitä miksi CSS- ratkaisut eivät välttämättä toimi Internet Explorerissa ilman temppuja.

5. Perinteisesti JavaScriptiä on käytetty erilaisiin lomakkeisiin liittyviin tarkistuksiin. Tee pieni lomake, jossa on päiväyskenttä ja jokin numeerinen kenttä. Laadi ohjelma, joka tarkistaa että tiedot ovat muodollisesti oikein. Tyypillisesti virheistä on ilmoitettu ponnahdusikkunassa. Virheestä voi kuitenkin ilmoitta myös lomakkella muuttamalla jonkin kentän tai lomakkelle piilotetun ilmoituksen ominaisuuksia (näkyvyys). Käytä tätä tapaa.