Demo 3- Dokumentin ulkoasun muokkaaminen

English version

Seuraavissa tehtävissä muokataan valmiin dokumentin ulkoasu tehtävien mukaisesti. Käytä tehtävissä apunasi kurssin luentomonistetta tai WDG:n opasta CSS1:n ominaisuuksista. Opas löytyy seuraavasta osoitteesta: <URL: http://www.htmlhelp.com/reference/css/properties.html>.

1. Tee viime demojen demotehtävät loppuun ennen seuraavien tehtävien aloittamista. Lisätehtäviä ei kuitenkaan tarvitse tehdä!
2. Käynnistä HTML-kit ja avaa siihen uusi HTML-dokumentti.
3. Kopioi makroviruksia käsittelevän dokumentin lähdekoodi uuden dokumentin pohjaksi.
4. Tallenna dokumentti hakemistoon U:\tietoverkot\demo3\ nimelle makrovirukset.html . Seuraavissa tehtävissä muokataan makrovirusdokumentin ulkoasua CSS-tyylitiedoston avulla.
5. Aloita uusi tiedosto CSS-dokumenttia varten ja tallenna se nimellä makrovirukset.css .
6. Korjaa tallentamaasi makrovirukset.html tiedostoa siten, että se ottaa tyylimäärittelyt tiedostosta makrovirukset.css
7. Katso miltä makrovirukset.html tiedosto näyttää ilman tyylinmäärittelyjä. Jokaisen tehtävän jälkeen kannattaa käydä katsomassa mitä tekemäsi tyylinmäärittelyt ovat vaikuttaneet. Yritä ymmärtää jokainen määrittelemäsi ominaisuus ja sen toiminta!
8. Lisää tyylitiedostoon body-tyyli, jossa on seuraavat ominaisuudet:
   • Kirjasimen värinä on musta ja taustavärinä valkea.
   • Kirjasintyyppinä on Verdana, Arial, Helvetica ja yleisenä kirjasinperheenä on päätteetön kirjasin eli sans-serif.
   Tarkista selainikkunassa kuinka dokumentin ulkoasu on muuttunut!
9. Lisää tyylitiedostoon h1-tyyli, jossa on seuraavat ominaisuudet:
   • Kirjasimen värinä on #0066CC ja taustavärinä #FFCC66.
   • Kirjasintyyppinä on Verdana, Arial, Helvetica ja yleisenä kirjasinperheenä on päätteetön kirjasin eli sans-serif.
   • Kirjasimen koko on 2 kertaa oletuskirjasimen koko (em)
   • Teksti näytetään isoina kirjaimina (text-transform).
   • Kirjainten välistys on 0.1 kertaa oletuskirjasimen koko.
10. Lisää tyylitiedostoon h2-tyyli, jossa on seuraavat ominaisuudet:
    • Kirjasimen värinä on #0066CC ja taustavärinä #FFCC66.
    • Kirjasintyyppinä on Verdana, Arial, Helvetica ja yleisenä kirjasinperheenä on päätteetön kirjasin eli sans-serif.
    • Kirjasimen koko on 1.5 kertaa oletuskirjasimen koko (em)
11. Lisää tyylitiedostoon h3-tyyli, jossa on seuraavat ominaisuudet:
    • Kirjasimen värinä on #0066CC ja taustaväri on läpinäkyvä (transparent).
    • Kirjasintyyppinä on Verdana, Arial, Helvetica ja yleisenä kirjasinperheenä on päätteetön kirjasin eli sans-serif.
    • Kirjasimen koko on 1.2 kertaa oletuskirjasimen koko (em)
12. Lisää tyylitiedostoon p-tyyli, jossa on seuraavat ominaisuudet:
    • Kirjasimen väri on peritty (inherit) ja taustaväri on läpinäkyvä.
    • Kirjasintyyppinä on Verdana, Arial, Helvetica ja yleisenä kirjasinperheenä on pääteetön kirjasin eli sans-serif.
    • Kirjasimen koko on sama kuin oletuskirjasimen koko (em)
    • Marginaalit ovat yläpuolella, oikealla puolella ja alapuolella ovat samat kuin oletuskirjasimen koko.
    • Marginaali on vasemmalla puolella 2 kertaa oletuskirjasimen koon verran.
    • Kappale on tasattu molempiin reunoihin.
13. Lisää tyylitiedostoon .navbar-tyyli, jota käytetään navigointipalkin korostamiseen ja jossa on seuraavat ominaisuudet:
    • Kirjasimen väri on musta ja taustaväri on #EEEECC.
    • Kirjasimen koko on 0.8 kertaa oletuskirjasimen koko (em)
    • Marginaalit ovat joka puolella 0.5 kertaa oletuskirjasimen koon verran.
    • Kappaleen välistys (padding) on 0.5 kertaa oletuskirjasimen koko.
    • Kappale on keskitetty.
    • Kappaleella on ohut, yhtenäinen ja musta raja.
14. Lisää tyylitiedostoon strong-tyyli, jossa on seuraavat ominaisuudet:
    • Kirjasimen väri on #0066CC ja taustaväri on #EEEECC.
    • Kirjasin on lihavoitu (font-weight).
15. Lisää tyylitiedostoon .url-tyyli, jota käytetään WWW-osoitteiden kirjoittamisessa ja jossa on seuraava ominaisuus:
    • Kirjasintyyppinä on Courier ja yleisenä kirjasinperheenä on tasavälinen kirjasin eli monospace.
16. Lisää tyylitiedostoon .author-tyyli, jota käytetään sivun lopussa olevien tekijätietojen muotoilemiseen ja jossa on seuraavat ominaisuudet:
    • Tekstin tasaus on oikeassa laidassa.
    • Tekstin koko on 0.8 kertaa oletuskirjaisimen koko.
    • Ohut, yhtenäinen ja musta raja lohkon yläreunaan.
    • Ylä- ja alamarginaaliksi kaksi kertaa oletuskirjasimen verran tilaa.
    • Lohkon välistys on oletuskirjasimen suuruinen.
17. Lisää tyylitiedostoon tyyli, jolla voidaan määritellä ulommaiselle lista-alkiolle seuraavat ominaisuudet:
    • Lista-alkioiden erottimeksi täyttämätön ympyrä (circle).
18. Lisää tyylitiedostoon tyyli, jossa määritellä sisemmälle lista-alkiolleseuraavat ominaisuudet:
    • Marginaalia oletuskirjasimen koon verran joka puolelle listaa.
    • Lista-alkioiden erottimeksi neliö.
    • Lista-alkioihin tulevan tekstin toinen rivi alkaa lista-alkion kohdalta.
    Vinkkiä tyylin määrittelemiseksi kannattaa katsoa luentoesimerkistä.
19. Lisää tyylitiedostoon asiayhteyden mukaan määräytyvä tyyli, jossa poistetaan linkkien alleviivaus navigointipalkista (text-decoration). Muualta dokumentista ei saa poistaa linkkien alleviivausta!
20. Määrittele linkkien värit seuraavasti:
    • Lisää tyylitiedostoon tyyli, jossa määritellä vierailemattoman linkin tekstin väriksi sininen ja taustaväri on läpinäkyvä.
    • Lisää tyylitiedostoon tyyli, jossa määritellään vieraillun linkin tekstin väriksi punainen ja taustaväri on läpinäkyvä.
    • Lisää tyylitiedostoon tyyli, jossa määritellään aktiivisen linkin tekstin väriksi punainen ja taustaväri on läpinäkyvä.
    • Lisää tyylitiedostoon tyyli, jossa määritellään kohdistetun (hover) linkin tekstin väriksi musta ja taustaväriksi #EEEECC .
21. Lisää tyylitiedostoon tyyli .vasen, jossa kokeilet float-ominaisuuden toimintaa. Määrittele .vasen-tyyli leijuttamaan sisältönsä vasempaan laitaan. Tee vastaavalla tavalla .oikea-tyyli, joka ohjaa oikeaan laitaan. Määrittele kumpaankin tyyliin järkevät marginaalit. Kokeile selaimella miten dokumentissa olevien kuvien paikat muuttuvat.
22. Validoi tyylilomakkeesi ja tee tarvittavat korjaukset.

Esteettömyys

1. Tutustu Bobby-validaattoriin. Tutki mitä Bobby kertoo seuraavista WWW-sivuista:
   • Jyväskylän kaupunki
   • VR
   • Jyväskylän yliopisto
   Yritä ymmärtää miksi Bobby valittaa tietyistä asioista. Lue tarvittaessa Bobbyn antamat opastukset valituksistaan. Vertaa Bobbyn kommentteja kurssimonisteesta löytyvään lukuun sivulta 159 alkaen.
2. Voit kokeilla myös Wave-tarkistinta edellämainittuihin sivuihin. Mitä Waven perusteella selviää näiden sivujen esteettömyydestä?

Lisätehtäviä

1. Korjaa edellä tekemäsi tyylitiedosto sellaiseksi, että se menee varoituksetta läpi WDG CSSCheckUp validaattorista. Tarkista onko validaattorissa Include Warnings kohta valittuna. Varoituksissa tulee ilmi erilaisia yhteensopivuusongelmia. HTML-kitissä on pikakuvake tähän validaattoriin, mutta varoitukset eivät tule näkyviin siinä. Seuraavassa linkit validaattorin sivuille:
   • CSS CheckUp -validaattori, jolla voidaan tarkistaa tiedostot suoraan kovalevyltä, sijaitsee osoitteessa http://www.htmlhelp.com/tools/csscheck/upload.html
   • CSS Check -validaattori, jolla voidaan tarkistaa WWW:ssä oleva tiedosto, sijaitsee osoitteessa http://www.htmlhelp.com/tools/csscheck/
2. Tutustu W3C:n Core Style Sampler -sivustoon.