opettaja: Eeva Meltio, eeva.meltio@metropolia.fi
...
| | Panel |
|---|
| Opiskelija - ymmärtää verkkoteknologioiden peruskäsitteet
- ymmärtää html- ja css -dokumenttien rakenteet ja toimintaperiaatteet
- osaa rakentaa oikeaoppisia verkkosivustoja
- oppii itsenäisesti seuraamaan verkkoteknologioiden kehitystä ja etsimään lisätietoa erilaisista lähteistä
|
|
|
Aikataulu
http://kulttuurilukkari.metropolia.fi/
Rakenne ja sisältö
Alla lyhyt kuvaus kurssin opetuskertojen sisällöstä. Sivustoille tulee lisämateriaalia koko ajan, myös kurssin edetessä.
Aloitus: HTML:n ja CSS:n historiaa ja peruskäsitteitä
1. HTML-sivun luominen ja julkaisu
2. CSS ulkoasun muotoilussa
3. Taitto verkkosivuilla I
4. Taitto verkkosivuilla II
5. Listat ja navigaation muotoilu
6. Värit, kuvat ja multimedia verkkosivuilla
7. Lisää CSSn sovelluksia
8. Teknisesti toimivat sivut
9. Oman sivuston julkaiseminen
10. Sivunteko-ohjelmat
Kurssin suorittamiseksi opiskelijan on oltava läsnä opetuksessa 80%.
Harjoitustyö
Lisäksi opiskelija tekee harjoitustyönä 10-15 sivun kokonaisuuden. Sivuston aiheena on
- oma portfolio
- muu oma projekti (hyväksytä ensin opettajalla!)
Vaatimukset:
- validit html-sivut ja ulkoinen css-tiedosto (html 4.01)
- sisältävät minimissään kuvaa ja tekstiä, mielellään myös muuta mediaa
- myös tulostusnäkymä on suunniteltu
Arviointikriteerit:
- Sivuston toimivuus ja käytettävyys
- Toimivuus eli selaimilla ja käyttöjärjestelmillä
- HTML:n ja CSS:n soveltamisen laajuus sivustolla:
- rakenteen ja ulkoasun erottaminen
- typografian suunnittelu: toimivuus käyttäjän kannalta
- layout: käytettävyys, visuaalisuus
Harjoitustyön muoto:
- omassa kotihakemistossa tai muualla verkossa julkaistu toimiva sivusto
- sähköpostitse lähetetty kuvaus (3-4 sivua) sivuston tavoitteesta, kohderyhmästä ja suunnitteluperiaatteista.
Palautuspäivä: 31.5.
Linkkejä harjoitteluun:
http://www.landofcode.com/code-editor.php?
Opettaja: Eeva Meltio, eeva.meltio a metropolia.fi |
| Panel |
|---|
| bgColor | #ffffff |
|---|
| title | Kurssin suorittaminen |
|---|
| - Läsnäolo opetuksessa 80%
- Harjoitustyönä toteutettava sivusto (vähintään 1-2 sivua) sekä dokumentaatio sivun suunnittelusta ja toteutuksesta
Ohjeita harjoitustyöhön - Tee validit html-sivut ja ulkoinen css-tiedosto (html 4.01 & css 2)
- Erota rakenne ja ulkoasu toisistaan
- Julkaise sivusto kotihakemistossasi tai muualla verkossa
Ohjeita dokumentaatioon Lähetä opettajalle sähköpostitse kuvaus (1-2 sivua) - Sivuston tavoite
- Kohderyhmä
- Suunnitteluperiaatteet
- Miten toteutettu ja miksi? (onko käytetty taulukoita, tyylitiedostoja)
- Mitä opin kurssista / harjoitustyön tekemisestä?
Harkkatyön arviointikriteerit - Oikeaoppinen ja validi HTML ja CSS
- Layout: käytettävyys, visuaalisuus
- Dokumentaatiossa kuvaillut perustelut tehdyille valinnoille: miten toteutettu sivusto vastaa tavoitteisiin?
|
Aikataulu ja sisällöt Perusopiskelijat | Aihe |
|---|
Ma 14.3. | Peruskäsitteet. Yksinkertaisen verkkosivun luominen. Validointi. | Ma 21.3. | Tyylitiedostojen luominen ja linkittäminen. Värien käyttö ja typografian muotoilu tyylitiedostoilla.
| Ma 28.3. | Kuvan ja taustakuvan lisääminen ja asemointi. Linkit ja hakemistorakenne. Värit ja yksiköt. Etäyhteydet: ssh, ftp. | Ma 4.4. | CSS-taitto: Elementtien asemointitavat. | Ma 11.4. | CSS-taitto: Elementtien asemointitavat. | Ma 18.4. | Taulukon luominen ja muotoilu tyylitiedostolla | Ma 2.5. | Listat ja navigaation muotoilu. | Ma 9.5. | Harjoitustyön teko | Ma 16.5. | Harjoitustyön teko
| Ma 23.5. | Harjoitustöiden esittely
|
|
| Column |
|---|
| Panel |
|---|
| bgColor | #efefef |
|---|
| title | Validointi |
|---|
| HTML- ja CSS -dokumenttien oikeellisuus kannattaa tarkistaa ns. validaattoreilla. Validaattorit vertaavat sille annettua dokumenttia niitä koskeviin määrittelyihin ja tarkastavat dokumenttien muodollisen oikeellisuuden. |
| Panel |
|---|
| bgColor | #efefef |
|---|
| title | Mitä ohjelmistoja tarvitaan? |
|---|
| Kurssilla käytetään tekstieditoreita html- ja tyylitiedostojen tekemiseen. >> Lataa Notepad++ (vain windows-käyttöjärjestelmälle) Mac-editoreita, esim: >> TextWrangler >> Coda |
|
|
...