Valitsimet ja asemointia CSS:llä - Demo 3

Mallivideot

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

Näissä demoissa tutustutaan valitsimiin sekä WWW-sivun ulkoasun asemointiin CSS:n avulla.

Jos et vielä ehtinyt tehdä loppuun demo 2:n tehtäviä, niin viimeistele ne ennen näihin tehtäviin siirtymistä.

Valitsimet

Seuraavaksi harjoitellaan erilaisten CSS-valitsimien käyttöä. Tee seuraavat aloitustoimenpiteet:

  1. Kopioi itsellesi W:-asemalle mallitiedosto johonkin hakemistoon (klikkaa oikealla ja Save Link As...). Et saa tässä tehtävässä tehdä mitään muutoksia edellä tallentamaasi malli.html-tiedostoon.
  2. Aloita uusi tyhjä tekstitiedosto (esim. HTML-Kitillä) ja tallenna se valitsimet.css-nimellä samaan hakemistoon malli.html-tiedoston kanssa W:-asemalle.
  3. Avaa malli.html Firefox-selaimeen.
  4. Avaa Firebug-laajennuksesta dokumentin puunäkymä (Tools | Firebug | Open Firebug). Dokumentin rakenne ratkaisee, mitä valitsimia on käytettävä.
  5. Avaa Web Developer -työkalupalkista CSS | Edit CSS. Saat tässä tehtävässä tehdä muutoksia ainoastaan näihin CSS-tyyleihin ja tallentaa ne valitsimet.css-tiedostoon.

Toteuta seuraavat ulkoasumuutokset CSS-valitsimien ja -ominaisuuksien avulla. Valitsimista löytyy esimerkkejä luento 4:n sivulta.

Galleria

Tehdään Nanonanon sivustoon galleria-sivu, johon tulee modernia tietokonetaidetta esittäviä pikkukuvia myyntiin:

  1. Lataa galleriakuvat.zip ja pura paketti W:\www\galleria\-hakemistoon.
  2. Luo uusi XHTML-dokumentti ja tallenna se index.html-nimellä galleria-hakemistoon.
  3. Lisää link-elementillä viite sivuston juurihakemistossa olevaan demo2.css-tiedostoon. Lisää myös galleriasivulle pääotsikko ja jokin lyhyt johdantotekstikappale.
  4. Kopioi esim. linkit-hakemistossa olevasta index.html-tiedostosta lohkot <div class="navbartop">...</div> ja <div class="navbar">...</div> juuri luomasi dokumentin body-osaan. Muuta murupolku oikeaksi Galleria-sivulle sekä täydennä navigointilohkon sisältämät navigointilinkit kuntoon. Lisää linkki Galleria-sivulle myös muiden hakemistojen index.html-tiedostojen navigointipalkkeihin.
  5. Lisää Galleria-sivun body-osaan seuraavalla tavalla viisi lohkoa, joissa on galleriahakemiston kuvat ja näiden kuvatekstit:
    <div class="galleriakuva">
    <img alt="Viitatorni ja järvimaisema" src="viitatorni.jpg" />
    <p>Viitatorni</p>
    </div>
  6. Tutki miltä sivu näyttää nyt selaimessa.

Liu'utus

Galleriasivu, jossa kuvat liu'utettu vierekkäin

Muotoillaan gallerian kuvalohkot tasavälisiksi ja selaimen koon mukaan vierekkäin rivittyviksi.

  1. Muokkaa demo2.css-tiedostoa. Liu'uta .galleriakuva-lohkot vasempaan laitaan.
  2. Käy Nanonanon kotisivujen galleria-sivulla. Tutki mikä on suurimman kuvan leveys ja korkeus. Lisää .galleriakuva-lohkolle ominaisuudet width ja height, joihin sijoitat arvot, jotka ovat hieman yli suurimman kuvan koon. Voit käyttää tässä tapauksessa px-arvoja (miksi?). Huomioi lohkon korkeudessa myös kuvatekstin tarvitsema tila.
  3. Keskitä kuva lohkon sisällä vaakasuunnassa. Koska kuva on tekstitason elementti, niin sen voi keskittää text-align-ominaisuudella.
  4. Testaa miltä galleria näyttää nyt. Muokataan vielä kuvatekstejä. Lisää demo2.css-tiedostoon lohko, joka vaikuttaa vain galleriakuva-lohkon sisällä olevaan tekstilohkoon. Tee lohkolle seuraavat määritykset:
    • Määrää tekstilohkolle korkeus. Korkeus kannattaa määrittää suhteessa fontin kokoon, sillä se saattaa vaihdella.
    • Keskitä teksti.
    • Määrää tekstin ylivuotava osuus piiloon.
    • Poista marginaalit (margin) ja täytteet (padding).
    • Pienennä fonttikokoa hieman.
  5. Rivitetään kuvat vielä oikealla olevan navigointilohkon alapuolelle. Tämä onnistuu clear-ominaisuudella. Voit laittaa lohkoille myös pienen ylämarginaalin, jotteivät ne mene ihan kiinni navigointilohkoon.
  6. Tarkista miten clear-ominaisuus toimii Internet Explorerilla. Jos kuvat menevät selaimen oikeasta reunasta yli, niin tällöin kuvat täytyy laittaa vielä oman lohkon sisälle, esim. <div class="galleriakuvat">...</div>, ja siirtää clear-ominaisuus tälle lohkolle. Uusimmilla IE-selaimilla ongelmaa ei enää ole.

Ponnahdusteksti

Ponnahdusteksti kuvan päällä: ! Myyty

  1. Lisää pariin kuvaan kuvatekstin alle kappale, joka kertoo, että kuva on myyty:
    <p class="huomio">! Myyty</p>
  2. Siirrä absoluuttisella asemoinnilla huomio-teksti galleriakuvan keskelle. Laita taustan väriksi keltainen.
  3. Siirtyikö teksti keskelle kuvaa vai keskelle jotain muuta? Huomaa, että positiointi tapahtuu suhteessa lähimpään position-ominaisuudella asemoituun esivanhempielementtiin. Tällöin .galleriakuva-lohkolle on annettava ilman paikkamääreitä seuraava ominaisuus:
    position: relative;
  4. Muuta ensimmäisen merkin väriksi punainen ja kasvata sen kokoa kaksinkertaiseksi. Firefoxilla et saa tätä välttämättä toimimaan, koska uusin Firefox ei näytä huomioivan huutomerkkiä merkiksi, eli first-letter-pseudoluokka valitsee Firefoxissa vain kirjaimet. IE:ssä tämä sen sijaan toiminee.
  5. Piilota display-ominaisuudella huomio-lohkot.
  6. Tee uusi valitsin, joka viittaa huomio-lohkoon vain siinä tapauksessa, että käyttäjä osoittaa galleriakuva-lohkoa. Tarvitset :hover-pseudoluokkaa. Tee lohkosta näkyvä display-ominaisuudella. Lisää lohkolle lisäksi hieman korkeutta (esimerkiksi height: 2.5em;), jotta kaksinkertaiseksi kasvatettu huutomerkki mahtuu siihen.
  7. Testaa viemällä hiiren osoitinta kuvien päälle ja pois päältä. :hover ei toimi vanhoissa Internet Explorereissa (IE 7-9:ssa toimii) muille elementeille kuin linkeille.
  8. Poista XHTML-dokumentista huutomerkit Myyty-sanan edeltä ja kokeile lisätä huutomerkki automaattisesti CSS:n avulla jokaisen huomio-lohkon alkuun. Tämä ei välttämättä toimi vanhemmissa Internet Explorereissa. Internet Explorerin versioissa 8-9 before-pseudoluokka kuitenkin toimii, joten huutomerkin värin muuttaminen punaiseksi ja koon kasvattaminen voisi olla järkevää siirtää tähän luokkaan (jotta se toimisi myös Firefoxissa).

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/demo3/
© 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-01-31 11:19:06
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta