Absoluuttinen asemointi, mediatyypit, vaihtoehtoinen tyylitiedosto ja mediakyselyt - Demo 5
- Mallivideot
- Absoluuttinen asemointi
- Tulostus (print)
- Vaihtoehtoinen tyylitiedosto mobiililaitteille
- Mobiililaitteiden tyylitiedosto käyttöön mediakyselyiden avulla
- Lisätehtävä
- Lisätietoa
Mallivideot
- absolute.wmv 20.9M
- print.wmv 6.0M
- mobiili.wmv 13.4M
- mediakyselyt.wmv 9.6M
- projisointi.wmv 10.0M
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.
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
- Poista marginaalit
body
-lohkolta. - Lisää
body
-lohkolle taustakuva (nuolikuvio). - Poista taustakuvan toistuminen.
- Asemoi kuva kiinteästi selainikkunan keskelle.
Taustakuvan lisäyksestä löydät esimerkin luennolta 3.
Absoluuttinen asemointi
- Aseta kullekin id:llä merkitylle lohkolle (tutki XHTML-tiedoston rakennetta) ominaisuus
position: absolute;
. - Nollaa lohkoilta
margin
japadding
. - Asemoi lohkot
top
-,bottom
-,left
- jaright
-ominaisuuksilla (kokeile sopivat arvot). - Määrää lohkojen
width
ja tarvittaessa myösmargin-left
jamargin-right
prosentteina (kokeile sopivat arvot). Muista, että lohkon viemä leveys lasketaan kaavalla margin + border + padding + width. - Pääotsikon tapauksessa
height
voidaan määrätä tässä tapauksessa esim.em
-yksiköillä. - 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. Yleensä print-median tyylitiedosto kannattaakin linkittää viimeiseksi tyylitiedostoksi, jotta sitä ei ylikirjoiteta muissa tyyleissä.
- 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 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:
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ä..navbartop, .navbar { display: none; }
- Määritellään tulostukseen sopivat marginaalit body-elementille:
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.body { margin-top: 0.5cm; margin-left: 0.5cm; margin-right: 0.5cm; margin-bottom: 0.5cm; }
-
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.
- 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.
Viite kannattaa yleensä lisätä kuitenkin ennen tulostukseen tarkoitettua tyyliä, jottei vaihtoehtoisessa tyylissä ylikirjoiteta tulostukseen tarkoitettuja määrityksiä.
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%;
Nanonanon sivuston tapauksessa turhia koristelohkoja ei kuitenkaan ole, joten muutoksia ei tarvitse tehdä.
- 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 (kuten Nanonanon sivustolla), 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.
-
Erityisesti kuvat voivat mobiililaitteissa olla ongelmallisia.
Lisää handheld-mediaan kuville maksimileveydeksi näytön leveys:
- Testaa sivua haluamallasi selaimella (esimerkiksi Firefoxilla). Avaa sivu ja pienennä ensin selainikkunan
kooksi noin 240 x 320 px (suunnilleen tavallisen kännykän näytön koko). 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.
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.
- Poista ensin Galleria-sivulta kaikki tyylilinkitykset.
- Linkitä sen jälkeen ensimmäisenä tyylitiedostona edellisessä tehtävässä tehty mobiilipuolen tyylitiedosto:
<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 600px, jolloin tyylin linkittäminen menisi seuraavasti:
<link href="../demo2.css" rel="StyleSheet" media="all and (min-width: 600px)" type="text/css" />
- Kokeile seuraavaksi, miltä Galleria-sivu näyttää Firefoxilla. 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.
- Internet Explorerilla mediakyselyt toimivat vasta versiosta 9 lähtien, joten pakota IE-selaimille käyttöön tavallinen
tyylitiedosto tekemällä vielä yksi tyylilinkitys:
Testaa, että määrityksen jälkeen myös IE osaa käyttää tavallista tyylitiedostoa.<!--[if IE]><link href="../demo2.css" rel="StyleSheet" media="all" type="text/css" /><![endif]-->
- Tyylitiedostot linkitettiin siis toisinpäin mitä aiemmin. Koska molemmissa tyylitiedostoissa on määritelty samat ominaisuudet, ylikirjoitus toimii myös näin päin, eli tavallisessa tyylitiedostossa (demo2.css) ylikirjoitetaan mobiilipuolen tyylitiedoston (mobiili.css) ominaisuuksia. Testaamalla sivua kuitenkin 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 demo2.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 demo2.css-tiedostoja. Ylikirjoita demo2.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-tiedostoon. Validoi sekä XHTML- että CSS-koodit ja korjaa mahdolliset virheet. Mediakyselyn linkityksestä johtuvasta validaattorin mahdollisesti antamasta virheestä ei tarvitse välittää.
- HUOM! Mobiilityylin linkittämiseksi täytyy valita joko nyt tehty mediakyselyitä hyödyntävä tapa tai sitten edellisessä tehtävässä tehty tapa linkittää tyyli vaihtoehtoisena tyylinä. Samassa dokumentissa ei siis voi tehdä linkitystä molemmilla tavoilla.
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:
- 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 ainakin useimmissa tilanteissa se, että määrittelee h1-elementin marginaalin nollaan.
Valitettavasti Web Developer ei tunnista projection-mediatyyppiä.
Käyttäjien kommentit