Absoluuttinen asemointi, mediatyypit ja vaihtoehtoinen tyylitiedosto - Demo 5

Mallivideot

Videot eivät sisällä ääntä.
Ongelmia videon katselussa?

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.

Ympyrä-kaavio

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

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.

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ä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:

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.

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

Lisätietoa

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/demot/demo5/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2010-02-02 11:37:29
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto