Absoluuttinen asemointi, mediatyypit ja vaihtoehtoinen tyylitiedosto - Demo 5

• Mallivideot
• Absoluuttinen asemointi
  • Taustakuva
  • Absoluuttinen asemointi
  • Tekstin ominaisuudet
  • Numeroinnit
• Tulostus (print)
• Vaihtoehtoinen tyylitiedosto mobiililaitteille
• Lisätehtäviä
  • Projisointi (projection)
  • Vanhemmat mobiililaitteet (handheld)
• Lisätietoa

Näissä demoissa opiskellaan absoluuttista asemointia. Lisäksi opiskellaan CSS:n mediatyyppejä tekemällä Nanonanon kotisivuille oma ulkoasu tulostusta ja halutessaan (lisätehtävä) myös videotykillä esittämistä varten. Lisäksi tehdään vaihtoehtoinen tyylitiedosto mobiililaitteita 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 -työkalupalkista 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 -työkalupalkista CSS | Display CSS By Media Type | Print.
• Siirry muokkaamaan print.css-tiedostoa valinnalla CSS | Edit CSS.
• Ensimmäisenä tulostusmuotoiluissa kannattaa piilottaa tulostamisen kannalta turhat elementit (navigoinnit, koristelohkot jne.) eli Nanonanon sivujen tapauksessa .navbartop- ja .navbar-lohkot. Piilottaminen onnistuu display-ominaisuuden avulla:

  .navbartop, .navbar {
    display: none;
  }

  Piilotetuilta lohkoilta vapautuu useasti tilaa (riippuu asemointitavasta), joten anna mahdollisesti vapautunut tila käyttöön sisällölle. Tämä onnistuu kasvattamalla sisällön leveyttä ja poistamalla sisällölle mahdollisesti asetetut marginaalit. Nanonanon sivuston tapauksessa tilaa ei kuitenkaan vapaudu, joten muutoksia ei tarvitse tehdä.
• 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ä kaikki selaimet eivät 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 esimerkiksi 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ää vältetäänkö sivunvaihtoja lohkon sisällä (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 ja niiden sisällä. 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.

Vaihtoehtoinen tyylitiedosto mobiililaitteille

WWW-sivuja selataan yhä enemmän kännyköillä 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.

Pienille näytöille voisi periaatteessa käyttää handheld-mediatyyppiä, mutta koska lähes kaikki vähänkään uudemmat kännykät ilmoittavat mediakseen screen (eli tietokonenäyttö), niin on järkevämpää tehdä vaihtoehtoinen tyylitiedosto (Alternate StyleSheet) mobiililaitteita varten.

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

  <link rel="Alternate StyleSheet" href="../../mobiili.css" 
  type="text/css" title="Mobiililaitteet" media="all" />

  Viite tulee lisätä all-median CSS-tiedoston jälkeen, jotta tyylitiedostossa voidaan ylikirjoittaa all-medialta tulevia tyyliasetuksia, jotka eivät sovi pieninäyttöisille laitteille.

  all-median tyyliasetukset vaikuttavat myös vaihtoehtoisiin tyyleihin, koska all-median tyylitiedosto on linkitetty ilman titleä, jolloin kyseinen tyylitiedosto on aina käytössä. Jos määrittäisimme all-median linkitykseen titlen, niin silloin kyseinen tyylitiedosto ei vaikuttaisi vaihtoehtoisiin tyylitiedostoihin.

  Vaihtoehtoisille tyylitiedostoille title on aina määriteltävä!

• Luo tiedosto mobiili.css ja tallenna se www-hakemistoon. Kopioi tiedostoon pohjaksi koko demo2.css-tiedoston sisältö, jolloin kukin ominaisuus tulee uudelleenmääritellyksi. Älä siis poista ominaisuuksia, vaan muuta niiden arvoja mobiililaitteille sopiviksi!
• Muokkaa mobiili.css:ään sopivat CSS-säännöt, joilla saat sivun näyttämään siistiltä kapeassa ja matalassa selaimessa.
• 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 (esimerkiksi koristelohkot) sivuilta. 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 alkuperäiset asemoinnit ja tee tarvittaessa asemointi uudelleen niin, että kaikki lohkot varmasti mahtuvat pieneen näyttöön (ilman sivuttaisia vierityspalkkeja). 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äällekkä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, tekstikappaleiden ja listojen kirjasinkoot järkeviksi, esim. h1-elementin kirjasinkoko voisi olla 120% ja h2 sekä h3 jotain 100%:n ja 120%:n väliltä. Tekstikappaleiden ja listojen koko voi olla vielä hieman pienempi.
  • Pienennä riviväli lähelle normaalia.
  • Määrää taulukoiden, textarea-elementin ja pre-elementin maksimileveydeksi 100%. Tällä tavalla nekään eivät aiheuta selaimeen sivuttaisia vierityspalkkeja.
• Testaa sivua haluamallasi selaimella (esimerkiksi Firefoxilla). Avaa sivu ja pienennä ensin selainikkunan kooksi noin 240 x 320 px. Ota sen jälkeen käyttöön vaihtoehtoinen tyylitiedosto (Firefoxissa View | Page Style). Kiinnitä huomiota muun muassa lohkojen ja eri elementtien näkyvyyteen pienellä näytöllä:
  • Onhan selainikkuna käytetty tiiviisti, eli turhia marginaaleja tai tyhjää tilaa ei ole?
  • Eihän selainikkunaan tule sivuttaisia vierityspalkkeja?
  • Mahtuuko teksti niille varattuihin lohkoihin?
  • Onko teksti sopivan kokoista pienelle näytölle?
• Lisää vaihtoehtoinen tyylitiedosto myös Nanonanon kotisivujen etusivulle ja testaa sen toimivuutta. Tee tarvittaessa lisämäärityksiä tyylitiedostoon.
• Lopuksi voit halutessasi tehdä sivuille ominaisuuden, jolla tyylitiedostoa voidaan vaihtaa JavaScriptin avulla. Vaihtaminen voidaan toteuttaa painikkeen tai linkin painamisen avulla. Katso ohjeet tämän toteuttamiseen luennolta 8.

Lisätehtäviä

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 vain 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 ei tunnista projection-mediatyyppiä.

Vanhemmat mobiililaitteet (handheld)

Jotkut vanhemmat kännykät ja muut pienet laitteet voivat ilmoittaa mediakseen edelleen handheld, jolloin heille voi olla järkevää suunnitella oma tyylitiedosto. Erona vaihtoehtoiseen tyylitiedostoon on se, että tyylitiedosto tulee suoraan oletuksena käyttöön handheld-laitteille ilman, että se tarvitsee erikseen valita.

• 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 ja tallenna se www-hakemistoon. Kopioi tiedostoon pohjaksi koko mobiili.css-tiedoston sisältö, koska samojen ominaisuuksien pitäisi sopia (molempien tyylitiedostojen käyttökohde on sama).
• 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ätietoa

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