Mediatyypit ja absoluuttinen asemointi - Demo 5

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

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

Absoluuttinen asemointi

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

Tallenna W-asemalle www-hakemiston johonkin alihakemistoon (esim. demo5) mallidokumentti ja nuolikuvio. Luo tyhjä CSS-tiedosto kaavio.css ja tallenna se samaan hakemistoon. Mallidokumenttia ei saa muuttaa, ainoastaan CSS-tiedostoa. Avaa dokumentti selaimeen, valitse Web Developer Toolbarista CSS | Edit CSS ja ala muokkaamaan ulkoasua mallikuvan mukaiseksi. Muista lopuksi myös tallentaa CSS-tiedosto.

Taustakuva

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

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

Absoluuttinen asemointi

1. Aseta kullekin id:llä merkitylle lohkolle (tutki XHTML-tiedoston rakennetta) ominaisuus position: absolute;.
2. Nollaa lohkoilta margin ja padding.
3. Asemoi lohkot top- ja left-ominaisuuksilla (kokeile sopivat arvot).
4. Määrää lohkojen width ja tarvittaessa myös margin-left ja margin-right prosentteina (kokeile sopivat arvot). Muista, että lohkon viemä leveys lasketaan kaavalla margin + border + padding + width.
5. Pääotsikon tapauksessa height voidaan määrätä tässä tapauksessa esim. em-yksiköillä.
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 mahdollisesti 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)

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. Linkki tulee lisätä all-median CSS-tiedoston jälkeen, jotta print-mediassa voidaan ylikirjoittaa all-medialta tulevia tyyliasetuksia, jotka eivät sovi tulostusnäkymään.
• 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: 0.5cm;
    margin-left: 0.5cm;
    margin-right: 0.5cm;
    margin-bottom: 0.5cm;
  }

  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, joten kovin isoja marginaaleja ei kannata laittaa.
• Tulostettaessa ongelmana voi olla esim. keskelle otsikkotekstiä tai kuvaa 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-tyylin sisällä ja poista kuvan leijutus (float: none;).
• Varmista vielä Firefoxin Print Preview -toiminnolla (tulostuksen esikatselu), miten sivun tulostusasu muuttui. HUOM! Ulkoasu voi näyttää erilaiselta tulostuksen esikatselussa kuin Web Developerin Display CSS By Media Type | Print -näkymässä. Syy tähän on se, että Display CSS By Media Type | Print ei käytä ollenkaan all-medialta mahdollisesti tulevia tyylimäärityksiä, mutta tulostuksen esikatselu (ja itse tulostaminen) käyttää. Aina täytyy siis varmistaa, että myös tulostuksen esikatselu näyttää hyvältä.
• 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 CSS 2.1 Paged media -sivulta.

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 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" />

  Viite tulee lisätä all-median CSS-tiedoston jälkeen, jotta handheld-mediassa voidaan ylikirjoittaa all-medialta tulevia tyyliasetuksia, jotka eivät sovi pieninäyttöisille laitteille.
• Luo tiedosto handheld.css. Kopioi 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!
• Valitse Web Developer Toolbarista CSS | Display CSS By Media Type | Handheld.
• 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.
• Mallia muotoiluihin 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. Anna mahdollinen poistetuilta lohkoilta vapautunut tila käyttöön muille lohkoille (lähinnä sisällölle) kasvattamalla näiden lohkojen leveyttä esimerkiksi seuraavalla tavalla:

    width: 100%;

  • 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. Yleensä lohkot kannattaa siis sijoittaa mobiililaitteissa päällekkäin järjestyksen määräytyessä XHTML-tiedostossa. Helpoin tapa poistaa kaikki asemoinnit on seuraava:

    position: static;

    Jos käytössä on float-asemointi, niin asemoinnin (liu'utusten) poistaminen tapahtuu seuraavasti:

    float: none;

    Asemoinnin poistamisen jälkeen lohkojen ollessa päällekäin, kannattaa varmistaa, että jokainen lohko saa käytettäväkseen leveyssuunnassa 100 % tai ainakin arvon, joka on lähellä sitä. Näin vältetään turhaa tekstin rivittymistä.

  • 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%.
• 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 varmista, että View | Style -kohdasta on valittuna Author Mode, jolloin Opera siirtyy emuloimaan kännyköitä. Valitsemalla uudelleen View | Small Screen Opera palaa normaaliin näyttötilaan. Korjaa mahdolliset puutteet CSS-tiedostoon.
• HUOM! Ulkoasu voi näyttää erilaiselta Operan Small Screen Rendering -tilassa kuin Web Developerin Display CSS By Media Type | Handheld -näkymässä. Syy tähän on se, että Display CSS By Media Type | Handheld ei käytä ollenkaan all-medialta mahdollisesti tulevia tyylimäärityksiä, mutta Operan Small Screen Rendering -tila (ja myös mobiililaitteet) käyttää. Aina täytyy siis varmistaa, että myös Operan Small Screen Rendering -tilassa sivut näyttävät hyviltä.

Operan mobiiliversiota käytetään selaimena useissa kännyköissä.

Lisätehtävä

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

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

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

Viite tulee lisätä all-median CSS-tiedoston jälkeen, jotta projection-mediassa voidaan ylikirjoittaa all-medialta tulevia tyyliasetuksia, jotka eivät sovi piirtoheittimelle tai videotykille.

Luo projection.css-tiedosto ja lisää siihen seuraavat määrittelyt:

• Poista näkyvistä navigointipalkit.
• Suurenna kirjasimen koko kaksinkertaiseksi.
• Kirjasimen koon suurentamisen vuoksi myös riviväliä täytyy suurentaa, jotta kappaleet eivät mene päällekäin. Riviväli kannattaa suurentaa body-elementille ja pienentää takaisin normaaliksi p-elementille, jolloin suurempi riviväli tulee käyttöön vaan sitä tarvitseville otsikkoelementeille.
• Pakota sivunvaihto aina ennen h2- ja h3-elementtejä.
• Kiellä sivunvaihdot .kuva-tyylin sisällä.
• Säädä koko sivun marginaalit sopiviksi.

Testaa sivuasi Operan täysnäyttötilassa ja korjaa mahdolliset puutteet. Ainakin tietyissä Operan versioissa näyttää olevan sellainen bugi, että kaikki teksti ei pysy oikeilla sivuilla ja menee hiukan päällekäin otsikoiden kanssa. Tähän näyttäisi auttavan, kun määrittelee h1-elementin marginaalin nollaan.

Valitettavasti Web Developer Toolbar ei tunnista projection-mediatyyppiä.

Lisätietoa

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