Mediatyypit ja CSS-valitsimet - Demo 4

Mallivideot

Ongelmia videon katselussa?

Näissä demoissa opetellaan lomakkeiden muotoilua CSS:llä, 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)

Tulostus -mallivideo

CSS-ulkoasupohjan päälle voi tarvittaessa tehdä lisä- tai muutosmäärityksiä erilaisten medioiden tarpeisiin.

Projisointi (projection)

Projisointi -mallivideo

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ä. Täysnäyttötilassa Opera käyttää projection-median ulkoasumäärityksiä.

projection-tilassa toimitaan sivuttain kuten paperitulostuksessakin joten kummassakin voi käyttää samoja css-ominaisuuksia. Lisää it-artikkeliin käyttöön projection.css-tyylitiedosto:

<link rel="StyleSheet" href="../../projection.css"
type="text/css" media="projection"/>

Lisää Amayalla projection.css-tiedostoon seuraavat määrittelyt:

Valitettavasti Web Developer toolbar ei tunnista projection-mediatyyppiä.

Mobiililaitteet (handheld)

MobiiliCSS -mallivideo

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.

Valitsimet

Valitsimet -mallivideo (HTML-kit)

Seuraavaksi harjoitellaan erilaisten CSS-valitsimien käyttöä. Kopioi itsellesi V:-asemalle mallitiedosto. Valitsimista löytyy esimerkkejä luento 3:n sivulta. Aloita XetorjEditissä uusi CSS-tiedosto ja tallenna se valitsimet.css-nimellä V:-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 tai Firefoxilla koska muilla selaimilla kaikki tarvitut valitsimet eivät välttämättä vielä toimi. Mallia voit katsoa myös esimerkkiratkaisun kuvakaappauksesta.

  1. Muuta jokaisen tekstikappaleen ensimmäinen kirjain kaksi kertaa oletuskokoaan suuremmaksi
  2. Muuta "Aliquam venenatis ipsum"-alkuisen kappaleen taustaväriksi harmaa
  3. Muuta tekstikappaleiden sisällä olevien strong-elementtien väri punaiseksi ja kaikkialla muualla olevien strong-elementtien väriksi vihreä.
  4. Muuta navigointidivin sisällä oleva sed neque-teksti keltaiseks
  5. Muuta taulukon joka toisen sarakkeen taustaväriksi #000000 ja joka toisen taustaväriksi #555555
  6. Muuta taulukon otsikkorivin tekstin väri mustaksi, ensimmäisen sisältörivin tekstin väri keltaiseksi ja loppujen rivien tekstin väri valkoiseksi
  7. Muuta listaa edeltävän tekstikappaleen ympärille musta raja
  8. Muuta kaikkien niiden linkkien väri vihreäksi joissa on title-attribuutin arvona sana orci

Lisätietoa

Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/demot/demo4/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi)<URL: http://hazor.iki.fi/>
2005-11-16 11:47:08