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

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

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. Tallenna jatkossa tässä tehtävässä tekemäsi tiedostot kyseiseen hakemistoon.
2. Aloita tekemällä tyhjä HTML-sivu, jossa on standardin mukainen HTML5-dokumentin rakenne. Anna dokumentin nimeksi float.html.
3. Määritä dokumentti käyttämään float.css-nimistä tyylitiedostoa samasta hakemistosta, missä float.html-tiedostokin sijaitsee (tyylitiedosto tehdään myöhemmin tässä tehtävässä).
4. Lisää dokumenttiin alla olevan listan mukaiset elementit tarvittavine luokkamäärityksineen (class-attribuutti) ja niihin sisältöä (tekstiä) esimerkiksi mallikuvan mukaisesti. Sisältölohkossa kannattaa käyttää p-elementtiä kappalejakoon. Navigointilohkoissa sisältö on tehty listoiksi (hyödynnä ul- ja li-elementtejä). Lohkojen järjestys HTML-koodissa tulee olla seuraavan listan kaltainen.
   • header-elementti (sisältää ylätunnisteen sisällön)
   • nav-elementti, jolle luokaksi vasennavi (sisältää vasemman navigointipalkin sisällön)
   • div-elementti, jolle luokaksi sisalto (sisältää sivun varsinaisen sisällön)
   • nav-elementti, jolle luokaksi oikeanavi (sisältää oikean navigointipalkin sisällön)
   • footer-elementti (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 elementit ja niiden luokkamääritykset, jotka kirjoitit HTML-tiedostoon. Tyylitiedostoa kannattaa muokata esimerkiksi edellisten demojen tapaan Web Developerin Edit CSS -valinnan avulla ja tallentaa lopussa muutokset myös itse tyylitiedostoon.
3. Muotoillaan ensin header-elementtiä (ylätunnistetta). Laita elementille 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 (nav-elementti, jonka luokka 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 sisältölohkoa (div-elementti, jonka luokka sisalto). Lohko 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 oikea navigointipalkki vastaavasti kuin vasen navigointipalkki. 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 (footer-elementti) samalla tavalla kuin ylätunniste. 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.

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.

• Jatketaan harjoittelua edellisissä demoissa tehdyn harjoitussivuston parissa. 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.2 Paged media -sivulta.

Lisätehtävä: 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 tämän demon ensimmäisessä tehtävässä tekemäsi HTML-tiedosto demo6-hakemistoon nimelle fixed.html.
2. Voit muuttaa lohkojen järjestyksen siten, että tärkeimmät tiedot ovat HTML-tiedostossa ylimpänä (esimerkiksi sisaltö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 CSS:ää ymmärtämättömiä selaimia varten.
3. Poista sisältö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ä - elementtien ja niiden luokkien nimet, sisällöt yms. saavat pysyä entisellään.

Tyylitiedoston tekeminen

1. Tallenna tämän demon ensimmäisessä tehtävässä tekemäsi CSS-tiedosto nimelle fixed.css.
2. Muokataan ensin ylätunnistetta (header-elementti). Kaikki jo olemassa olevat arvot saavat jäädä elementille. Lisää elementille position-ominaisuus ja anna sen arvoksi fixed. Sijoita ylätunniste alkamaan selainikkunan vasemmasta yläkulmasta (anna sopivat top- ja left-arvot). Anna ylätunnisteelle korkeudeksi 3em.
3. Muokataan seuraavaksi alatunnistetta (footer-elementti). clear-ominaisuuden voit poistaa, muut jo olemassa olevat arvot saavat jäädä. Määritä elementille position:fixed-arvo siten, että alatunniste alkaa näytön vasemmasta alareunasta. Anna alatunnisteen korkeudeksi 3em.
4. Seuraavaksi muotoillaan vasenta navigointipalkkia (nav-elementti, jonka luokka vasennavi). Poista lohkolta float-ominaisuus ja muuta leveydeksi 15%. Lisää lohkolle position:fixed-ominaisuus siten, että top-arvo on 4em ja left-arvo 0%. Näin lohko alkaa heti ylätunnisteen alareunasta. Määritä lohkon korkeudeksi 100%.
5. Tee oikean reunan navigointipalkille (nav-elementti, jonka luokka oikeanavi) samat muutokset kuin vasemmalle navigointipalkille sillä muutoksella, että lohko alkaa näytön oikeasta reunasta (pystysuunnassa edelleen ylätunnisteen alareunasta).
6. Poista kokonaan sisältölohko (div.sisalto) 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ä vastaavan näköinen ulkoasu on käyttää hyväksi reunuksia (border). Ks. vanha WWW-julkaiseminen kurssin demotehtävä.