Materiaalit

Sivulle kerätään koulutuksen materiaalit sekä
linkkejä eri CSS-ohjeisiin ja muihin hyödyllisiin
sivuihin.

Huom! Kouluille tehtyjen ulkoasujen suora kopiointi
ja käyttö omalla sivulla on kiellettyä ellei erikseen muuta mainita.

Koulutusmateriaalit

CSS ohjeet

CSS_ohjeet.doc 4.8 Mt 21.02.

Lisätty mm. polkurivin/ylläpitoon rivin muuttaminen sekä
moduulityyppien tyylien muokkaus.

Lisätty myös kuvien käyttö tyyleissä.

Peruskoulutuksen kalvot

CSS_08.ppt 551 kt 22.04.

Jatkokoulutuksen kalvot

CSS_08_jatko.ppt 241.5 kt 22.04.

Malleja (vapaasti käytettävissä)

Laajennetun kalenterin tyylitelty ulkoasu

kalenteri_ulkoasu.css 4 kt 08.10.

1. Tallenna tiedosto koneellesi
2. Vie mappimoduuliin
3. Linkitä veräjäsi Ulkoasu-osion Ulkoisen CSS-tyylin osoite: -kenttään
- jos sinulla on jo yksi css-tiedoston osoite kyseisessä kentässä, lisää sen perään välilyönti ja liitä tämä siihen toisena tiedostona
- esimerkki: http://www.peda.net/veraja/demo/kekke/testi

Navigaation linkkien tyylit - tyhjä pohja

navigaation_linkkien_tyylit.txt 0.3 kt 22.08.

Navigaation linkkien ulkoasun määritys. Tyhjät pohjat.
Kopioi ja muokkaa haluamaksesi. Alla esimerkkinä tämän
Veräjän navigaation linkkien tyylit.

Navigaation linkkien tyylit - esimerkki

navigaation_linkkien_tyylit_esim.txt 1.5 kt 10.12.

Esimerkkinä tämän Veräjän navigaation tyylit.

Polkurivin muokkaus

polkurivi.txt 0.4 kt 10.12.

Polkurivin pilkkominen osiin ja tiputus alemmaksi

Kahden palstan asemointi

palstat.txt 0.1 kt 11.12.

Etusivun 2-palstan asemoinnin ulkoasuesimerkki, leveydet ja 2. palstan taustaväri. Huom! Muuta myös .modules -tyyliluokan padding-arvo ==> 0px.

Logokuvan sijoittaminen otsikkopalkkiin

titlebar_kuva.txt 0.1 kt 24.04.

Tällä koodinpätkällä voit liittää esim. logokuvan otsikkopalkkiin
eli titlebariin. Korvaa kuvan osoite oman kuvasi osoitteella. Huom! Tarvittaessa pitää piilottaa Veräjän otsikko. Tee .titlebar h1 -tyyliluokalle komento ==> display: none

Ylläpitoon -riviin taustakuva

modebar_liukuvari.txt 0.1 kt 24.04.

Tällä koodinpätkällä voit liittää headeriin, titlebariin tai navigaation
eri osiin tekemäsi liukuvärikuvan. Korvaa kuvan osoite oman
kuvasi osoitteella.

Esimerkki: http://www.peda.net/veraja/jyvaskyla/cygnaeuslukio

Taulukon sarakkeiden leveyden määritys

taulukon_sarakkeiden_leveys.txt 0.2 kt 02.10.

Tällä esimerkillä saat taulukkosi sarakkeet haluamaasi leveyksiin.