Demo 7 - CSS-asemointi sekä mobiililaitteiden ja tulostuksen tyylitiedostot

• Mallivideot
• Sivun asemointi CSS:llä käyttäen float-ominaisuutta
  • HTML-sivun tekeminen pohjalle
  • Tyylitiedoston tekeminen
• Sivun asemointi CSS:llä käyttäen position:fixed-arvoa
  • HTML-sivun tekeminen pohjalle
  • Tyylitiedoston tekeminen
• Tyylitiedosto mobiililaitteita varten
• Tyylitiedosto tulostusta varten

Näissä demoissa opetellaan sivun asemointia CSS:llä sekä erillisten tyylitiedostojen ja mediakyselyiden käyttöä.

Sivun asemointi CSS:llä käyttäen float-ominaisuutta

Tässä tehtävässä on tarkoitus tehdä vaiheittain oikealla näkyvän kuvan kaltainen sivun asemointi käyttäen hyväksi CSS:n float-ominaisuutta.

HTML-sivun tekeminen pohjalle

1. Tee W-asemallesi opetusteknologia/demot-hakemistoon kansio nimelle demo6.
2. Aloita tekemällä tyhjä HTML-sivu, jossa on standardin mukainen HTML5- tai XHTML-dokumentin rakenne. Anna dokumentin nimeksi float.html.
3. Määritä dokumentti käyttämään float.css-nimistä tyylitiedostoa samasta kansiosta, missä float.html-tiedostokin sijaitsee (tyylitiedosto tehdään myöhemmin tässä tehtävässä).
4. Lisää dokumenttiin seuraavan nimiset div-lohkot (laita nimi lohkon class-attribuutin arvoksi) ja niihin sisältöä (tekstiä) esimerkiksi mallikuvan mukaisesti. Sisältölohkossa kannattaa käyttää p-elementtiä kappalejakoon. Myös navigointilohkoissa voit käyttää p-elementtiä rivittämään linkkitekstit omille riveilleen. Lohkojen järjestys HTML-koodissa tulee olla seuraavan listan kaltainen.
   • ylatunniste (sisältää ylätunnisteen sisällön)
   • vasennavi (sisältää vasemman navigointipalkin sisällön)
   • sisalto (sisältää sivun varsinaisen sisällön)
   • oikeanavi (sisältää oikean navigointipalkin sisällön)
   • alatunniste (sisältää alatunnisteen sisällön)
5. Voit lisätä sivulle vielä sivua kuvaavan title-elementin.

Tyylitiedoston tekeminen

1. Luo tyhjä tyylitiedosto nimelle float.css.
2. Tee tyylitiedostoon vastaavan nimiset luokat, jotka annoit div-lohkoille. Tyylitiedostoa kannattaa muokata esimerkiksi edellisten demojen tapaan Web Developerin Edit CSS -valinnan avulla ja tallentaa lopussa muutokset myös itse tyylitiedostoon.
3. Muotoillaan ensin ylatunniste-luokkaa. Laita luokalle taustaväriksi #FFFF99 ja leveydeksi 98%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan koko selainikkunan leveys). Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
4. Muotoillaan seuraavaksi vasenta navigointipalkkia (vasennavi). Se on tarkoitus liu'uttaa selainikkunan vasempaan reunaan, joten laita float-arvoksi left. Taustaväriksi laita #99CCFF ja leveydeksi 23%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan 25% selainikkunan leveydestä). Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
5. Muotoillaan seuraavaksi sisalto-luokkaa. Luokka on tarkoitus liu'uttaa vasemman navigointilohkon viereen, joten laita sillekin float-arvoksi left. Taustaväriksi laita #CCCCFF ja leveydeksi 48%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan 50% selainikkunan leveydestä). Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
6. Muotoile seuraavaksi oikeanavi-luokka kuten vasennavi-luokka. Ainoastaan taustaväriä tarvitsee muuttaa. Laita taustaväriksi #FF99CC. Huomaa, että oikea navigointipalkkikin siis tulee liu'uttaa vasempaan reunaan, jotta kaikki kolme lohkoa saadaan rinnakkain. Yhteensä lohkot vievät koko selainikkunan verran (100%) tilaa leveyssuunnassa.
7. Muotoile lopuksi alatunniste-luokka kuten ylatunniste-luokka. Muuta taustavärin arvoksi #66FF99. Lisäksi laita luokalle clear-ominaisuus, jonka arvo laita siten, että luokan kummallekaan puolelle ei saa tulla muita lohkoja.

Nyt sivusi pitäisi olla suunnilleen mallikuvan kaltainen. Validoi tuottamasi HTML- ja CSS-koodit ja korjaa mahdolliset virheet. Testaa sivua selaimella.

Sivun asemointi CSS:llä käyttäen position:fixed-arvoa

Tässä tehtävässä on tarkoitus tehdä vaiheittain oikealla näkyvän kuvan kaltainen sivun asemointi käyttäen hyväksi CSS:n position:fixed-arvoa. Ylä- ja alatunniste sekä molemmat navigointipalkit on asemoitu kiinteästi selainikkunaan, eli sivun varsinainen sisältö näkyy "kehyksien" sisällä ja siinä voi liikkua selainikkunan vierityspalkkien avulla.

HTML-sivun tekeminen pohjalle

1. Tallenna edellisessä tehtävässä tekemäsi HTML-tiedosto nimelle fixed.html.
2. Voit muuttaa lohkojen järjestyksen siten, että tärkeimmät tiedot ovat HTML-tiedostossa ylimpänä (esimerkiksi sisalto-lohko ylimmäksi). position:fixed-arvoa käytettäessä lohkojen järjestyksellä ei ole merkitystä, joten järjestys kannattaa miettiä "tärkeysjärjestykseksi" esimerkiksi ruudunlukijoita (voivat lukea sivua ylhäältä alas) ja div-lohkoja ymmärtämättömiä selaimia varten.
3. Poista sisalto-lohkon div-elementti, mutta jätä sen sisältö ennalleen (eli tekstikappaleet ovat muutoksen jälkeen suoraan body-elementin "lapsia").
4. Muuta dokumentti käyttämään fixed.css-nimistä tyylitiedostoa samasta sijainnista, missä fixed.html-tiedostokin sijaitsee (tyylitiedosto tehdään myöhemmin tässä tehtävässä).
5. Voit muuttaa vielä title-elementin arvon sivua kuvaavaksi.
6. Muita muutoksia ei tarvitse tehdä - lohkojen nimet, sisällöt yms. saavat pysyä entisellään.

Tyylitiedoston tekeminen

1. Tallenna edellisessä tehtävässä tekemäsi CSS-tiedosto nimelle fixed.css.
2. Muokataan ensin ylatunniste-luokkaa. Kaikki jo olemassa olevat arvot saavat jäädä luokkaan. Lisää luokalle position-ominaisuus ja anna sen arvoksi fixed. Sijoita lohko alkamaan selainikkunan vasemmasta yläkulmasta (anna sopivat top- ja left-arvot). Anna lohkolle korkeudeksi 3em.
3. Muokataan seuraavaksi alatunniste-luokkaa. clear-ominaisuuden voit poistaa, muut jo olemassa olevat arvot saavat jäädä. Määritä luokalle position:fixed-arvo siten, että lohko alkaa näytön vasemmasta alareunasta. Anna lohkolle korkeudeksi 3em.
4. Seuraavaksi muotoillaan vasennavi-luokkaa. Poista luokalta float-ominaisuus ja muuta leveydeksi 15%. Lisää luokalle position:fixed-ominaisuus siten, että top-arvo on 4em ja left-arvo 0%. Näin lohko alkaa heti ylätunnisteen alareunasta. Määritä luokan korkeudeksi 100%.
5. Tee oikeanavi-luokkaan samat muutokset kuin vasennavi-luokkaan sillä muutoksella, että luokka alkaa näytön oikeasta reunasta (pystysuunnassa edelleen ylätunnisteen alareunasta).
6. Poista kokonaan sisalto-luokka CSS-tyylitiedostosta.
7. Määritä CSS-tyylitiedostoon body-elementille seuraavat ominaisuudet: kaikkien reunojen täyte (padding) 0.5em, marginaali (margin) ylhäällä ja alhaalla 4em sekä marginaali vasemmalla ja oikealla 17%. Näin body-elementin sisältö asettuu navigointien sekä ylä- ja alatunnisteiden väliin ilman, että tarvitsee käyttää erillistä luokkaa sisällölle.

Nyt sivusi pitäisi olla suunnilleen mallikuvan kaltainen. Validoi tuottamasi HTML- ja CSS-koodit ja korjaa mahdolliset virheet. Testaa sivua selaimella.

HUOM! Nyt harjoituksena tehty asemointi, missä kaikki neljä laitalohkoa kiinnitetään näyttöön EI ole yleensä järkevä, sillä näyttöön kiinnittäminen vie turhan paljon tilaa sivun varsinaiselta sisällöltä etenkin pienemmillä näytöillä (esimerkiksi älypuhelimet). Järkevämpää olisi siis kiinnittää näyttöön esimerkiksi vain joko vasemman laidan tai oikean laidan lohko ja lisäksi joko ylätunniste tai alatunniste. Muut lohkot voisi laittaa vierimään sivun mukana, jolloin ne eivät vie niin paljon tilaa sivun varsinaiselta sisällöltä.

Eräs käyttökelpoinen tyyli tehdä vastaavia ulkoasuja on käyttää hyväksi reunuksia (border). Ks. vanha WWW-julkaiseminen kurssin demotehtävä.

Tyylitiedosto mobiililaitteita varten

WWW-sivuja selataan yhä enemmän kännyköillä ja muilla mobiililaitteilla. Näiden laitteiden suurin rajoitus on pieni näyttö. Sopivilla CSS-asetuksilla saadaan sivut 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ä mobiililaitteille oma "tavallinen" (screen-median) tyylitiedosto, jonka käyttöönotto vain mobiililaitteille toteutetaan mediakyselyiden (Media Queries) avulla. Mediakyselyistä löytyy lisää tietoa luennolta 4.

Koska kaikkien kännyköiden selaimet eivät välttämättä ymmärrä mediakyselyitä, kannattaa sivun pohjatyylitiedostoksi (kaikille selaimille) linkittää mobiilipuolen tyylitiedosto, minkä jälkeen linkitetään "tavallinen tyylitiedosto" mediakyselyitä varmasti ymmärtäviä tietokoneiden selaimia varten. Tavallisessa tyylitiedossa sitten ylikirjoitetaan mobiilipuolen tyyliasetukset "normaaleille" tietokoneiden selaimille sopiviksi.

• Poista ensin Opetusteknologia-kurssisivuston etusivulta kaikki tyylilinkitykset.
• Linkitä sen jälkeen ensimmäisenä tyylitiedostona mobiilipuolen tyylitiedosto (itse tiedosto tehdään myöhemmin tässä tehtävässä):

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

• Tämän jälkeen linkitä mediakyselyiden avulla "tavallinen tyylitiedosto" siten, että ne tietokoneen selaimet, joiden selainikkunan koko on tiettyä raja-arvoa suurempi, ottavat kyseisen tyylitiedoston käyttöön. Raja-arvoa voi myöhemmin säätää sopivaksi; aluksi voi käyttää esimerkiksi arvoa 800px, jolloin tyylin linkittäminen menisi seuraavasti:

  <link href="tyyli.css" rel="StyleSheet" media="all and (min-width: 800px)" type="text/css" />

• Lisää vielä head-elementin sisälle viewport-metatagi, jolla määrittelet sivun "kehykseksi" (engl. viewport) laitteen selainikkunan todellisen leveyden. Määritys auttaa mobiililaitteita. Lisää tietoa viewportista löytyy luennolta 4.

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

• Luo tiedosto mobiili.css ja tallenna se opetusteknologia-hakemistoon. Kopioi tiedostoon pohjaksi koko tyyli.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.
• Huomioi erityisesti seuraavat seikat:
  • Erityisesti kuvat voivat mobiililaitteissa olla ongelmallisia. Lisää mobiilipuolelle 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ä.
  • Kapeilla näytöillä lohkoille kannattaa yleensä antaa käyttöön koko näytön leveys. Muuta .navbar-lohkon leveys takaisin koko näytön levyiseksi:

    width: 100%;

  • 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 (esim. 90%).
• Kokeile seuraavaksi, miltä sivu näyttää selaimella (esim. Firefox). Jos mediakyselyt toimivat oikein, leveällä selainikkunalla käyttöön tulee tavallinen tyylitiedosto, mutta kun kavennat selainikkunan antamaasi raja-arvoa pienemmäksi, niin käyttöön vaihtuu mobiilipuolen tyylitiedosto.
• Testaa mobiiliasetuksia pienentämällä selainikkunan kooksi noin 240 x 320 px (suunnilleen tavallisen peruskännykän näytön koko). 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?
    • Jos sivuttaiset vierityspalkit tulee, on jonkun lohkon kokonaisleveys yli 100%. Muista, että kokonaisleveyteen vaikuttavat elementin marginaalit (margin), täytteet (padding), reunaviivat (border) ja itse elementin leveys (width).
  • Onko teksti sopivan kokoista pienelle näytölle?
• Testaamalla sivua leveällä selainikkunalla huomataan, että muutamat mobiilipuolen asetukset (mm. eri elementtien fonttien koot) eivät muutu "normaalin" kokoiseksi, vaikka selain käyttää tavallista tyylitiedostoa. Syy tähän on se, että mobiilipuolella määriteltiin muutamia fontin koon määrityksiä, joita ei oltu määritelty tavallisessa tyylitiedostossa. Siellä niihin kelpasi selaimelta tulevat oletusasetukset. Nyt kuitenkin kyseiset määritykset tulee ylikirjoittaa tyyli.css-tiedostossa vastaamaan selaimen oletusasetuksia.
• Ongelmaksi muodostuu se, että mistä tietää sopivat oletusasetukset? Apuna voi käyttää W3C:n ohjetta, jossa annetaan suosituksia selaimen oletustyyleiksi. Esimerkiksi h1-elementin fonttikoon tulisi olla 2em, h2-elementin 1.5em jne. Muista myös, että tekstikappaleen (p-elementti) oletusfonttikoko on 1em.
• Vertaa seuraavaksi mobiili.css- ja tyyli.css-tiedostoja. Ylikirjoita tyyli.css-tiedostossa oletusasetuksille kaikki ne ominaisuudet, joille on määritetty joku arvo mobiilipuolella, muttei vielä tavallisessa tyylitiedostossa. Näitä ominaisuuksia ovat mm. otsikkoelementtien, tekstikappaleiden ja listojen fonttikoot. Esimerkiksi pääotsikon fontin ylikirjoitus menee seuraavasti (rivi tulee sijoittaa CSS-tiedostossa h1-lohkoon):

  font-size: 2em;

• Testaa lopuksi, että määritykset toimivat nyt oikein. Tee tarvittaessa lisämäärityksiä CSS-tiedostoihin. Validoi sekä HTML- että CSS-koodit ja korjaa mahdolliset virheet.

Tyylitiedosto tulostusta varten

CSS-ulkoasupohjan päälle voi tarvittaessa tehdä lisä- tai muutosmäärityksiä myös print-median (tulostus) tarpeisiin.

• Tallenna print.css opetusteknologia-hakemistoon.
• Lisää Opetusteknologia-kurssisivuston etusivulle linkki edellä tallentamaasi CSS-tiedostoon. Linkki tulee lisätä viimeiseksi muiden tyylitiedostojen linkityksen 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" />

  HUOM! print-mediatyypille ei kannata koskaan määrittää titleä, koska silloin se ei ole aina käytössä (persistent), jolloin selaimet eivät osaa ottaa sitä automaattisesti käyttöön valittaessa tulostuksen esikatselu.

• Avaa sivu Firefoxilla ja valitse Web Developer -työkalupalkista CSS | Display Styles By Media Type | Display Print Styles.
• Siirry muokkaamaan print.css-tiedostoa valinnalla CSS | Edit CSS.
• Ensimmäisenä tulostusmuotoiluissa kannattaa piilottaa tulostamisen kannalta turhat elementit (navigoinnit, koristelohkot jne.) eli etusivun tapauksessa .navbar-lohko. Piilottaminen onnistuu display-ominaisuuden avulla:

  .navbar {
    display: none;
  }

  Myös Navigointi-otsikko (h2-elementti) olisi hyvä saada piiloon. Käy antamassa html-tiedostossa kyseiselle otsikolle attribuutti class ja sen arvoksi piilo. Tämän jälkeen kyseisen elementin voi piilottaa CSS-puolella:

  .piilo {
    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. Marginaaleja määritettäessä täytyy muistaa, että määritellyt marginaalit tulevat käyttäjän omien tulostusasetusmarginaalien lisäksi, joten kovin isoja marginaaleja ei kannata laittaa. Esimerkiksi eri elementtien marginaaleja voi usein hieman pienentää, jotta paperi käytetään tarkemmin hyväksi.
• Tee tarvittaessa myös muita haluamiasi määrityksiä tulostuspuolelle.
• Tallenna tekemäsi muutokset print.css-tiedostoon.
• Varmista vielä Firefoxin Print Preview -toiminnolla (tulostuksen esikatselu), miten sivun tulostusasu muuttui. HUOM! Ulkoasu voi näyttää erilaiselta tulostuksen esikatselussa kuin Web Developerin Display Styles By Media Type | Display Print Styles -näkymässä. Syy tähän on se, että Display Styles By Media Type | Display Print Styles 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ä.
• Validoi lopuksi tuottamasi HTML- ja CSS-koodit ja korjaa mahdolliset virheet.

Tarkemmin tulostamiseen liittyvistä erikoisasetuksista voit halutessasi lukea W3C:n CSS 2.1 Paged media -sivulta.