Absoluuttinen asemointi, mediatyypit, vaihtoehtoinen tyylitiedosto ja mediakyselyt - 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-, bottom-, left- ja right-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.

Mobiililaitteiden tyylitiedosto käyttöön mediakyselyiden avulla

Jos vaihtoehtoisen tyylitiedoston käyttöönottoon ei toteuta edellä mainittua JavaScriptiä hyödyntävää ratkaisua, jää tyylitiedosto saamatta käyttöön kaikilla niillä selaimilla, jotka eivät tarjoa valikkoa tyylitiedoston vaihtoa varten. Valitettavasti mm. mobiiliselaimet eivät kyseistä valikkoa yleensä tarjoa. JavaScript-toteutukselle vaihtoehtoinen ratkaisu on toteuttaa mobiilityylitiedoston käyttöönotto mediakyselyiden (Media Queries) avulla. Mediakyselyistä löytyy lisää tietoa luennolta 6. Toteutetaan seuraavaksi Nanonanon Galleria-sivulle mobiilityylitiedoston käyttöönotto mediakyselyiden avulla.

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

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:

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 ainakin useimmissa tilanteissa se, että määrittelee h1-elementin marginaalin nollaan.

Valitettavasti Web Developer ei tunnista projection-mediatyyppiä.

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/>
2011-02-11 15:49:57
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta