Mediatyypit ja CSS-valitsimet - Demo 4
Mallivideot
- print.wmv 1.5M
- projection.wmv 1.1M
- selectors.wmv 4.9M
Näissä demoissa opetellaan CSS:n mediatyyppejä tekemällä Nanonanon kotisivuille oma ulkoasu tulostusta, videotykillä esittämistä sekä mobiililaitteita varten. Lisäksi harjoitellaan tärkeimpien CSS-valitsimien käyttöä
Tulostus (print)
- Avaa demo 2:ssa tekemäsi demo2.css-tiedosto HTML-kitiin.
- Lisää aivan css-tiedoston loppuun uusi lohko tulostusmedian css-asetuksia varten
seuraavalla tavalla:
@media print { } -
Seuraavaksi lisää edellä tekemäsi lohkon sisään aivan tavallisia css-asetuksia. Ensimmäisenä
tulostusmuotoiluissa kannattaa piilottaa tulostamisen kannalta turhat sivuelementit eli
Nanonanon sivujen tapauksessa .navbartop- ja .navbar-lohkot.
Piilottaminen onnistuu display-ominaisuuden avulla:
@media print { .navbartop, .navbar { display: none; } } - Kokeile selaimen Print Preview -toiminnolla miten sivun tulostusasu muuttui.
- Määritellään sivulle sopivat marginaalit @page-valitsimella:
Määrittele haluamasi marginaalit ja kokeile taas miltä sivu näyttää selaimen tulostusesikatselussa. Kaikki selaimet eivät ymmärrä @page-valitsinta. Määritä myös body-elementille sopivat marginaalit. W3C:n CSS-validaattori herjaa @page-säännöstä vaikka se olisi ihan oikein. Kannattaa käyttää CSS-tiedostojen validointiin myös WDG:n CSS-validaattoria, joka löytää joitain virheitä paremmin kuin W3C:n CSS-validaattori. Toisaalta WDG:n validaattori ei ymmärrä CSS2:ssa käytetty >-merkkiä valitsimissa vaan valittaa niistä. Kumpikin validaattori löytyy HTML-kitin online-välilehdeltä.@page { margin-top: 1cm; margin-left: 1cm; margin-right: 1cm; margin-bottom: 1cm; } -
Tulostettaessa ongelmana voi olla esim. keskelle otsikkotekstiä osunut sivunvaihto. Tätä
ongelmaa voi yrittää välttää page-break-before, page-break-inside
ja page-break-after-ominaisuuksilla:
- page-break-before määrää tehdäänkö sivunvaihto ennen lohkoa (always) vai vältetäänkö sitä (avoid). Oletusarvo on auto.
- page-break-inside määrää tehdäänkö sivunvaihtoja lohkon sisällä (always) vai vältetäänkö sitä (avoid). Oletusarvo on auto.
- page-break-after määrää tehdäänkö sivunvaihto lohkon jälkeen (always) vai vältetäänkö sitä (avoid). Oletusarvo on auto.
- Voit lisämuotoilla tulostusasua normaaleilla css-ominaisuuksilla jos haluat. Tarkemmin tulostamiseen liittyvistä erikoisasetuksista voit halutessasi lukea W3C:n CSS2.1 Paged media-sivulta.
Projisointi (projection)
CSS:stä löytyy oma mediatyyppi piirtoheittimellä ja videotykillä tehtäviä esityksiä varten. Voit kokeilla Operalla miltä tämä demosivu näyttäisi jos projection-median asetukset ovat käytössä. Käynnistä Opera-selain ja aseta se täysnäyttötilaan painamalla F11-näppäintä.
projection-tilassa toimitaan sivuttain kuten paperitulostuksessakin joten kummassakin voi käyttää samoja css-ominaisuuksia. Lisää Nanonanon css-tiedostoon seuraavat asetukset koskien projection-mediatyyppiä:
- Poista näkyvistä navigointipalkit
- Suurenna kirjasimen koko kaksinkertaiseksi
- Pakota sivunvaihto aina ennen h2- ja h3-elementtejä
- Kiellä sivunvaihdot .kuva-tyylin sisällä
- Säädä koko sivun marginaalit sopiviksi
Mobiililaitteet (handheld)
WWW-sivuja selataan yhä enemmän kännyköillä, pda-laitteilla ja muilla pienillä vempaimilla. Näiden laitteiden suurin rajoitus on pieni näyttö. Sopivilla CSS-asetuksilla saadaan myös Nanonanon sivu näyttämään hienosti mobiililaitteissa.
- Kokeile miten Operan small screen rendering -tekniikka näyttää Nanonanon sivut. Avaa sivu operalla ja paina Shift+F11 jolloin opera siirtyy emuloimaan kännyköitä. Painamalla uudelleen Shift+F11 opera palaa normaaliin näyttötilaan. Operan mobiiliversiota käytetään selaimena useissa kännyköissä.
- Lisää Nanonanon css-tiedostoon handheld-mediatyyppi. Kokeile sivua Operalla.
- Muuta Operan asetuksista näkyviin selaimen koko File|Preferences|Windows|Show window size. Kavenna operan ikkuna n. 200 pikseliä leveäksi. Ikkunan koon näet nyt ikkunan yläpalkista.
- Lisää handheld-asetuksiin sopivat css-säännöt joilla saat sivun näyttämään siistiltä kapeassa ja matalassa selaimessa.
- Erityisesti kuvat voivat mobiililaitteissa olla ongelmallisia. Lisää handheld-mediaan kuville maksimileveydeksi näytön leveys:
img { max-width: 100%; }
Valitsimet
Seuraavaksi harjoitellaan erilaisten CSS-valitsimien käyttöä. Kopioi itsellesi W:-asemalle mallitiedosto. Valitsimista löytyy esimerkkejä luento 3:n sivulta. Aloita html-kitissä uusi CSS-tiedosto ja tallenna se valitsimet.css-nimellä W:-asemalle. Seuraavissa tehtävissä saat tehdä muutoksia vain ja ainoastaan tähän css-tiedostoon. Mitään muutoksia et saa tehdä edellä tallentamaasi mallitiedostoon vaan joudut miettimään millaisten valitsimien avulla pystyt seuraavat asiat toteuttamaan. Joudut kuitenkin tarkkaan tutkimaan millainen rakenne mallidokumentissa on.
Dokumentin rakennetta voit tutkia Mozillan DOM Inspector -työkalulla (Tools|Web Development|DOM Inspector). Valitsimien toimintaa sinun pitää testata Mozillalla koska muilla selaimilla kaikki tarvitut valitsimet eivät välttämättä vielä toimi. Mallia voit katsoa myös esimerkkiratkaisun kuvakaappauksesta.
- Muuta jokaisen tekstikappaleen ensimmäinen kirjain kaksi kertaa oletuskokoaan suuremmaksi
- Muuta "Aliquam venenatis ipsum"-alkuisen kappaleen taustaväriksi harmaa
- Muuta tekstikappaleiden sisällä olevien strong-elementtien väri punaiseksi ja kaikkialla muualla olevien strong-elementtien väriksi vihreä.
- Muuta navigointidivin sisällä oleva sed neque-teksti keltaiseks
- Muuta taulukon joka toisen sarakkeen taustaväriksi #000000 ja joka toisen taustaväriksi #555555
- Muuta taulukon otsikkorivin tekstin väri mustaksi, ensimmäisen sisältörivin tekstin väri keltaiseksi ja loppujen rivien tekstin väri valkoiseksi
- Muuta listaa edeltävän tekstikappaleen ympärille musta raja
- Muuta kaikkien niiden linkkien väri vihreäksi joissa on title-attribuutin arvona sana orci
Käyttäjien kommentit