Versions Compared

Old Version 93

changes.mady.by.user Eeva Meltio

Saved on

compared with

New Version Current

changes.mady.by.user Eeva Meltio

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Section

http://kulttuurilukkari.metropolia.fi/

Kurssin suorittaminen

Kurssin suorittamiseksi opiskelijan on oltava läsnä opetuksessa 80%.

Lisäksi opiskelija tekee harjoitustyönä vähintään 4-5 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 & css 2)
  • 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ä: *

Column
width50%

Kurssin tavoitteet

Panel
bgColor#ffffff
title

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ä

Opettaja: Eeva Meltio, eeva.

meltio@metropolia

meltio a metropolia.fi

Panel
Aikataulu ja sisällöt
bgColor
Perusopiskelijat
#ffffff
Aikuisopiskelijat
title

Aihe

Paikka

Ma 15.3. klo 9-12

To 18.3. klo 17-20

Peruskäsitteet, perus-html-sivun luonti

Ilm. myöhemmin

Ma 22.3. klo 9-12

To 25.3. klo 17-20

Peruskäsitteet

Ilm. myöhemmin

Ma 29.3. klo 9-12

To 1.4. klo 17-20

Peruskäsitteet

Ilm. myöhemmin

Ke 14.3. klo 9-12

To 15.4. klo 17-20

Peruskäsitteet

Ilm. myöhemmin

Ma 19.4. klo 9-12

To 22.4. klo 17-20

Peruskäsitteet

Ilm. myöhemmin

Ma 26.4. klo 9-12

To 29.4. klo 17-20

Peruskäsitteet

Ilm. myöhemmin

Ma 3.5. klo 9-12

To 6.5. klo 17-20

Peruskäsitteet

Ilm. myöhemmin

Ma 10.5. klo 9-12

To 13.5. klo 17-20

Peruskäsitteet

Ilm. myöhemmin

Ma 17.5. klo 9-12

To 20.5. klo 17-20

Peruskäsitteet

Ilm. myöhemmin

Ma 24.5. klo 9-12

To 27.5. klo 17-20

Peruskäsitteet

Ilm. myöhemmin

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

Kurssimateriaali

Column
Materiaalia

Panel
bgColor#efefef
titleYleistä

Verkkosivustojen suunnittelu ja toteutus
HTMLn ja CSSn HTML:n ja CSS:n historiaa ja peruskäsitteitä
Internetin ja hypertekstin kehittyminen
Selain
PalvelinVerkkosivustojen suunnittelu ja toteutus
Selaimen ja palvelimen toiminta
Oman sivuston julkaiseminen ja ylläpito
Yksiköt (px, em jne)
Miksi on tärkeää opiskella html ja css systemaattisesti?

Panel
bgColor#efefef
titleHTML

Mitä on HTML?
Määrittelyt ja standardit
HTML-dokumentin sivun luominen Tekstin muotoilu

DTD, Meta-elementit, merkkikoodit

Elementit ja
Elementtien määritteet Värit
Yksiköt
Linkkien teko
Hakemistorakenne

Tekstin muotoilu html-merkkauksella
Linkit ja hakemistorakenne linkityksessä

Kuvien lisääminen
Järjestetyt ja järjestämättömät listat
DTD ja miten siihen viitataan Validointi

Panel
bgColor#efefef
titleCSS

Ulkoasun muotoilu CSS:llä
CSS:n Tyylitiedostojen muoto ja rakenne
Tyylimäärittelyn liittäminen html-sivuun
span / div / display Tyyliohjeiden yhdistäminen
Tärkeimmät selektorit

CSS ja selainten tuki

Värit ja värikoodit
Tekstin ja linkkien muotoilu

Listat ja navigaation muotoilu
Kommentointi

Panel
bgColor#efefef
titleLayoutin teko

Kiinteä vai mukautuva taitto?
Taulukkotaitto
CSS-asemointi

Panel
bgColor#efefef
titleValidointi

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
titleMuuta materiaalia

Multimedian lisääminen sivuille
Vierityspalkin lisääminen ja sen ulkoasun muuttaminen tyylitiedostoilla
Selainskriptit
Kaksoisjulkaiseminen

Panel
bgColor#efefef
titleMitä 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

Panel
bgColor#efefef
titleTärkeitä linkkejä

http://www.w3.org/, World Wide Web Consortium

Ohjeet sivujen julkaisemiseen (Metropolian tietohallinto)

Merkkauskielten idea (Jukka K. Korpelan verkko-opas)
W3Schools HTML Tutorial

Layout Gala (40 validia html/css-layoutia)
http://browsershots.org/ Ottaa kuvan sivustosta kaikilla selaimilla -> hyvä tarkistukseen

  • taustavärit
  • reunite (borders)
  • marginaali
  • täyte (padding)
    Taitto
    • Validointi

    Panel
    bgColor#efefef#ffffff
    titleLisätietoaHarjoituksia

    Tunneilla tehdyt harjoitukset

    Perusharjoituksia html-sivujen tekoon
    Perusharjoituksia tyylitiedostojen käytöstä

    Taulukko-harjoituksia
    CSS-taittoharjoituksia

    Listojen käyttö ja navigaation rakentaminen
    CSS-lohkot ja kaksoisjulkaiseminenMultimedian upottaminen verkkosivuille
    Selainskriptit