Mediatyypit ja absoluuttinen asemointi - Demo 5

• Mallivideot
• Absoluuttinen asemointi
  • Taustakuva
  • Absoluuttinen asemointi
  • Tekstin ominaisuudet
  • Numeroinnit
• Tulostus (print)
• Mobiililaitteet (handheld)
• Projisointi (projection)
• Lisätietoa

Näissä demoissa opiskellaan absoluuttista asemointia. Lisäksi opiskellaan CSS:n mediatyyppejä tekemällä Nanonanon kotisivuille oma ulkoasu tulostusta, videotykillä esittämistä sekä mobiililaitteita varten.

Absoluuttinen asemointi

Tehdään kuvan mukainen kaavio keskelle muuten tyhjää www-sivua.

Tallenna W-asemalle www-hakemiston johonkin alihakemistoon mallidokumentti ja nuolikuvio. Luo tyhjä CSS-tiedosto kaavio.css ja tallenna se samaan hakemistoon. Mallidokumenttia ei saa muuttaa, ainoastaan CSS-tiedostoa. Avaa dokumentti selaimeen ja valitse Web Developer Toolbarista CSS | Edit CSS.

Taustakuva

1. Lisää body-lohkolle taustakuva (nuolikuvio).
2. Poista taustakuvan toistuminen.
3. Asemoi kuva kiinteästi selainikkunan keskelle.

Taustakuvan lisäyksestä löydät esimerkin luennolta 3.

Absoluuttinen asemointi

1. Aseta kullekin id:llä merkitylle lohkolle ominaisuus position: absolute;.
2. Nollaa lohkoilta margin ja padding.
3. Määrää lohkon width, margin-left ja margin-right prosentteina. Muista, että lohkon viemä leveys lasketaan kaavalla margin + border + padding + width.
4. Pääotsikon tapauksessa height voidaan määrätä tässä tapauksessa esim. em-yksiköillä.
5. Asemoi lohkot top- ja left-ominaisuuksilla.
6. Määrää lohkojen päällekkäisjärjestys z-index-ominaisuudella.

Absoluuttisesta asemoinnista löytyy ohjeita luennolta 5.

Tekstin ominaisuudet

• Kirjasinta ja sen kokoa voit muuttaa font-family ja font-size-ominaisuuksilla.
• Isot kirjaimet saat text-transform-ominaisuudella.
• Ensimmäiseen kirjaimeen voit vaikuttaa :first-letter-pseudoluokalla.
• Tekstin keskittämiseen tarvitset text-align, vertical-align ja line-height-ominaisuuksia.

Numeroinnit

Muuta listojen numerointi roomalaisiksi numeroiksi ja lisää h2-tason otsikoille numerointi. Numeroinneista löydät ohjeita luennolta 4.

Tulostus (print)

Tulostus -mallivideo

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

• Tallenna print.css www-hakemistoon.
• Avaa Nanonanon sivustolla artikkelit/it-hakemistossa oleva XHTML-dokumentti ja lisää dokumenttiin linkki edellä tallentamaasi css-tiedostoon.
• Muuta lisäämäsi link-elementin media-attribuutin arvoksi print.

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

• Avaa Firefoxilla it-hakemistossa oleva sivu ja valitse Web Developer Toolbarista CSS | Display CSS By Media Type | Print.
• Siirry muokkaamaan print.css-tiedostoa valinnalla CSS | Edit CSS.
• Ensimmäisenä tulostusmuotoiluissa kannattaa piilottaa tulostamisen kannalta turhat sivuelementit eli Nanonanon sivujen tapauksessa .navbartop- ja .navbar-lohkot. Piilottaminen onnistuu display-ominaisuuden avulla:

  .navbartop, .navbar {
    display: none;
  }

• Määritellään tulostukseen sopivat marginaalit body-elementille:

  body {
    margin-top: 1cm;
    margin-left: 1cm;
    margin-right: 1cm;
    margin-bottom: 1cm;
  }

  Määrittele haluamasi marginaalit. Oikeampi tapa olisi käyttää @page-valitsinta, mutta sitä eivät selaimet juurikaan tue. Lisäksi täytyy muistaa, että määritellyt marginaalit tulevat käyttäjän omien tulostusasetusmarginaalien lisäksi.
• 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.
  Kiellä sivunvaihdot otsikkoelementtien (h1, h2, h3, h4) jälkeen. Kiellä sivunvaihdot myös .kuva-tyyliltä ja poista kuvan leijutus (float: none;).
• Varmista vielä Firefoxin Print Preview -toiminnolla, miten sivun tulostusasu muuttui.
• Lisää tulostusmuotoilut Nanonanon kotisivujen etusivulle. Mitä tulostusasetuksiin voisi vielä lisätä?
• Voit lisämuotoilla tulostusasua normaaleilla CSS-ominaisuuksilla, jos haluat. Tarkemmin tulostamiseen liittyvistä erikoisasetuksista voit halutessasi lukea W3C:n CSS2.1 Paged media -sivulta.

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 Nanonanon sivu näkymään hienosti myös mobiililaitteissa.

• Lisää it-artikkeliin viite handheld.css-tyyleihin:

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

• Valitse Web Developer Toolbarista CSS | Display CSS By Media Type | Handheld.
• Kopioi handheld.css-tiedostoon pohjaksi koko demo2.css-tiedoston sisältö, jolloin kukin ominaisuus tulee uudelleenmääritellyksi. Älä siis poista ominaisuuksia, vaan muuta niiden arvoja handheld-medialle sopiviksi!
• Muokkaa handheld.css:ään sopivat CSS-säännöt, joilla saat sivun näyttämään siistiltä kapeassa ja matalassa selaimessa. Muista tallentaa muokkaukset myös varsinaiseen CSS-tiedostoon (pelkkä Web Developer Toolbarin Edit CSS -tilassa muokkaaminen ei siis riitä), koska sivua testataan jatkossa myös Operalla.
• Testaa sivua Operan Small Screen Rendering (SSR) -tilassa. Avaa sivu Operalla ja pienennä ensin selainikkunan kooksi noin 240 x 320 px. Valitse sen jälkeen View | Small Screen ja View | Style | Author Mode, jolloin Opera siirtyy emuloimaan kännyköitä. Valitsemalla uudelleen View | Small Screen Opera palaa normaaliin näyttötilaan. Mallia voit katsoa esim. tämän kurssisivuston handheld.css-tiedostosta. Huomioi erityisesti seuraavat seikat:
  • Erityisesti kuvat voivat mobiililaitteissa olla ongelmallisia. Lisää handheld-mediaan kuville maksimileveydeksi näytön leveys:

    img {
      max-width: 100%;
    }

  • Mobiililaitteiden näytöt ovat pieniä, joten säädä sivun marginaalit minimiin. Poista turhat marginaalit myös muualta kuin body-elementiltä.
  • Poista näkyvistä mahdolliset epäoleelliset osat sivusta.
  • Poista kaikki asemoinnit. Useimmat mobiililaitteet eivät tue asemointia, mutta siltä varalta, että jokin tukee, niin kaikki asemointi täytyy joko poistaa tai varmistaa, että asemoidut lohkot varmasti mahtuvat pieneen näyttöön. Helpoin tapa poistaa kaikki asemoinnit on seuraava:

    position: static;

  • Muuta leivänmurunavigointi takaisin tavalliseksi listaksi.
  • Muuta sivun otsikoiden koot järkeviksi, esim. h1-elementin kirjasinkoko voisi olla 120% ja h2 sekä h3 jotain 100%:n ja 120%:n väliltä.
  • Määrää taulukoiden, textarea-elementin ja pre-elementin maksimileveydeksi 100%.
  • Poista kaikki lohkojen leijutukset (float), koska niille ei juurikaan ole tilaa.
• Testaa lopuksi sivua vielä uudelleen Operan Small Screen Rendering -tilassa. Korjaa mahdolliset puutteet CSS-tiedostoon. Operan mobiiliversiota käytetään selaimena useissa kännyköissä.

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 sivuittain 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ää projection.css-tiedostoon seuraavat määrittelyt:

• 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.

Valitettavasti Web Developer Toolbar ei tunnista projection-mediatyyppiä.

Lisätietoa

• Making Small Devices Look Great
• Nokia Mobile Internet Toolkit 4.1