Harjoitus 2: Tyylittelyä CSS:lla
1.11.2004 klo 17:14 | Harjoitukset
Tällä harjoituskerralla tutustumme CSS-tyyleihin. Käsikirjana voit käyttää taas HTML-dogin CSS-oppaita. Lisää vinkkejä ja ohjeita eri aiheista voit katsoa kurssin verkkomateriaalien CSS-ohjeista.
Tehtäviä
Vapaamuotoista tyylittelyä
Liitä edellisellä kerralla tekemiisi webbisivuihin ulkoinen tyylitiedosto ja kokeile esim. seuraavia tyylimäärittelyjä:
- Värien ja taustavärien muuttaminen, ehkä taustakuvakin...
- Tekstin koon, tyylin tai merkkilajin muutokset
- Erilaiset sisennykset ja välitykset
- Reunukset
- jne.
Lehtiartikkeleiden ulkoasumuotoilut
Ensimmäisellä harjoituskerralla oli yhtenä tehtävänä pienten lehtijuttujen merkkaus XHTML:lla. Nyt voisit kokeilla samojen juttujen ulkoasun määrittelyä CSS:lla. Voit yrittää kopioida alkuperäistä ulkoasua tai tehdä toisenlaisiakin muotoiluja.
Voit tehdä alkuperäisiin XHTML-dokumentteihisi muutoksia tyylejä varten, mutta älä tingi merkkausten semanttisesta mielekkyydestä.
Mieti myös, onko printtimedian ulkoasun täydellinen emulointi webissä järkevää. Esim. Viikki-jutun kaksipalstaisen asettelun voit huoletta korvata yhdellä palstalla: webissä kun ei ole "juoksevia" palstoituksia.
Asettelua tyyleillä
CSS-tyyleillä asemoinnin hallitseminen ei ole aivan helppoa. Jos tämä harjoitus on ensimmäinen tutustumisesi CSS-tyyleihin, kannattaa jätää nyt opittu muhimaan ja palata tyyleillä asetteluun myöhemmin.
Varmaotteisemmat ja asiasta kiinnostuneet voivat kokeilla tehdä esim yksinkertaisen, kaksisarakkeisen taiton. Tarjolla on valmiita apuvälineitä ja pohjia, mutta CSS-asemoinnin teoreettisen puolen osaaminenkaan ei kuitenkaan ole pahasta.
Kotitehtävä
Jotta merkkauksen periaatteet eivät pääse unohtumaan, kotitehtävänä on
- merkata ainakin yksi XHTML:lla yksi ykkösharkassa esitetty lehtijuttu ja
- muotoilla sen ulkoasua CSS-tyyleillä (ks. tehtävä yllä).
Tehtävät tarkastetaan neljännellä harjoituskerralla.
mei
c552t