Harjoitus 3: Edistyneempiä CSS-muotoiluja 2008-01-05 18:53

Kolmannella harjoituskerralla opetellaan erilaisia tapoja asetella elementtejä CSS:llä.

Aiheita

• Asettelu (float, position)
• Navigointilistan tekeminen ja asettelu sivulle.
• Edellisen harjoituksen muotoilujen parantelua (typografia, värit, ulottuvuudet).

Harjoituksen kulku

• Avaa Firefoxin lisäksi Crimson Editor "Start > Programs > Applications > Crimson Editor", muodosta yhteys W-asemalle Novell-ikkunan kohdasta "File Management > KOTISIVU / Homepage W" (harmaa kuvake), ja avaa vielä harjoitustiedostot Crimson Editorissa ja Firefoxissa.
• Katso luentoesimerkeistä ainakin tiedostoa luento3_css.html sekä sen asetteluesimerkkien CSS tiedostosta luento3_css_esim.css.
• Tee asetteluja webbisivullesi, sekä täydennä ja parantele viime harjoituksessa tehtyjä muotoiluja.

Kuvien asettelu

1. Anna XHTML-sivulla kuvia ympäröiville div-elementille id- tai class-attribuutti. Jos sivulla on useampia sekä oikealle että vasemmalle kellutettavia kuvia, kannattaa merkitä molemmat tyypit omilla class-attribuuteilla.
2. Asettele CSS-tiedostossa kuvat sivulle float-ominaisuudella.
3. Lisää kuvan ja tekstin väliin marginaalia määrittämällä se kuvaa ympäröivälle div-elementille. Huom! Lisää marginaalia vain niille sivuille joilla sitä tarvitaan.

Jos tarvitset kuvankäsittelyohjelmaa kuvien kokojen muuttamiseksi, katso GIMPin asennusohje neljännen harjoituskerran ohjeesta.

Navigointilista

Tiivistetty ohje navigoinnin toteuttamisesta ja asettelusta sivulle.

1. Navigointilistan asettelemiseksi koko sivun kattavan div-elementin sisälle tehdään kaksi uuttaa div:iä, toinen sisällölle, toinen navigoinnille.
2. Navigointilista tehdään ul-elementtinä, jonka li-elementeissä on linkit muille sivuille.
3. Koko sivun kattavalle div-elementille lisätään leveyttä esim. 200px.
4. Sisältöä ympäröivälle elementille määritetään navigointia varten 200px marginaalia vasempaan reunaan.
5. Navigointilista sijoitetaan vasempaan reunaan absoluuttisella sijoittelulla.
6. Tarvittaessa osan koko sivun kattavan div-elementin CSS-määrityksistä voidaan siirtää sisältöä ympäröivälle div-elementille: esimerkiksi reunus, taustaväri ja täyttö.

Katso lisätietoja kurssimateriaalin kohdista Navigointi, Sivun asettelu (kohta "Navigointi ja sisältö rinnakkain #1"). Kysy neuvoja tarvittaessa!

Harjoitus 4

Seuraavalla harjoituskerralla jatketaan näistä aiheista, ja katsotaan mm. kuvankäsittelyä. Jos aikaa jää, voit jo valmiiksi etsiä sivullesi sopivia grafiikoita ja lisää kuvia.

Huomioi että vapun takia harjoitusryhmät 1-3 on siirretty torstaille ja perjantaille. Tarkista ajat kurssin ohjelmasta.