Valitsimet ja asemointia CSS:llä - Demo 3
Mallivideot
HUOM! Demojen sisältö on muuttunut hiukan videoiden luomisen jälkeen, joten ne eivät päde ihan suoraan demotehtävien tekemiseen. Myöskin käytettävä editori vaikuttaa hiukan demotehtävien suorittamiseen. Videoista saa kuitenkin pääkohdat demotehtävien tekemiseen.
- selectors.wmv 4.9M
- galleria.wmv 9.4M
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:
- 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.
- Aloita uusi tyhjä tekstitiedosto (esim. HTML-Kitillä) ja tallenna se valitsimet.css-nimellä samaan hakemistoon malli.html-tiedoston kanssa W:-asemalle.
- Avaa malli.html Firefox-selaimeen.
- Avaa Firebug-laajennuksesta dokumentin puunäkymä (Tools | Firebug | Command Line | Inspector). Dokumentin rakenne ratkaisee, mitä valitsimia on käytettävä.
- 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.
- Avaa uudelle välilehdelle avuksesi Selectoracle-sivu jota voit käyttää apuna css-valitsimien ymmärtämiseen. Kirjoita selectoracleen valitsin josta tarvitset selvennystä ja selectoracle kertoo sinulle englanniksi mitä valitsin tekee.
Toteuta seuraavat ulkoasumuutokset CSS-valitsimien ja -ominaisuuksien avulla. Valitsimista löytyy esimerkkejä luento 4:n sivulta.
- Muuta jokaisen tekstikappaleen ensimmäinen kirjain kaksi kertaa oletuskokoaan suuremmaksi.
- Muuta "Aliquam venenatis ipsum" -alkuisen kappaleen taustaväriksi harmaa. Tutki
dokumentin rakennetta
body
-elementin sisältä Firebugin avulla. - Muuta tekstikappaleiden sisällä olevien strong-elementtien väri punaiseksi ja kaikkialla muualla olevien strong-elementtien väriksi vihreä.
- Muuta navigointidivin sisällä oleva sed neque -teksti keltaiseksi.
- Muuta taulukon joka toisen sarakkeen taustaväriksi #000000 ja joka toisen taustaväriksi #555555. Tutki Firebugilla mitä elementtejä taulukkorivien sisältä löytyy.
- Muuta taulukon otsikkorivin tekstin väri mustaksi, ensimmäisen sisältörivin tekstin väri keltaiseksi ja loppujen rivien tekstin väri valkoiseksi.
- Muuta listaa edeltävän tekstikappaleen ympärille musta raja.
- Muuta kaikkien niiden linkkien väri vihreäksi, joissa on title-attribuutin arvona sana orci.
Galleria
Tehdään Nanonanon sivustoon galleria-sivu, johon tulee modernia tietokonetaidetta esittäviä pikkukuvia myyntiin:
- Lataa galleriakuvat.zip ja pura paketti W:\www\galleria-hakemistoon.
- Luo uusi XHTML-dokumentti ja tallenna se index.html-nimellä galleria-hakemistoon.
- Lisää
link
-elementillä viite sivuston juurihakemistossa olevaan demo2.css-tiedostoon. Lisää myös galleriasivulle pääotsikko ja jokin lyhyt johdantotekstikappale. - Kopioi esim. linkit-hakemistosta lohkot
<div class="navbartop">...</div>
ja<div class="navbar">...</div>
juuri luomasi dokumentinbody
-osaan. - Lisää 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>
- Tutki miltä sivu näyttää nyt selaimessa.
Liu'utus
Muotoillaan gallerian kuvalohkot tasavälisiksi ja selaimen koon mukaan vierekkäin rivittyviksi.
- Muokkaa demo2.css-tiedostoa. Liu'uta .galleriakuva-lohkot vasempaan laitaan.
- 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?).
- Keskitä kuva lohkon sisällä vaakasuunnassa. Koska kuva on tekstitason elementti, niin sen voi keskittää text-align-ominaisuudella.
- 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.
- Rivitetään kuvat vielä oikealla olevan navigointilohkon alapuolelle. Tämä onnistuu clear-ominaisuudella.
- 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.
Ponnahdusteksti
- Lisää pariin kuvaan kuvatekstin alle kappale, joka kertoo että kuva on myyty:
<p class="huomio">! Myyty</p>
- Siirrä absoluuttisella asemoinnilla huomio-teksti galleriakuvan keskelle. Laita taustan väriksi keltainen.
- 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ä ominaisuus
position: relative;
- Muuta ensimmäisen merkin väriksi punainen ja kasvata sen kokoa kaksinkertaiseksi.
- Piilota
display
-ominaisuudella huomio-lohkot. - 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-ominaisuudessa. - Testaa viemällä hiiren osoitinta kuvien päälle ja pois päältä. :hover ei toimi vanhoissa Internet Explorerin muille elementeille kuin linkeille. Kannattaa siis testata Firefoxilla.
- 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 Internet Explorerissa.
Käyttäjien kommentit