Versions Compared

Old Version 101

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
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.fi

meltio a metropolia.fi

Panel
bgColor#ffffff
titleKurssin 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 Aikuisopiskelijat

Aihe

Paikka

Ma 1514.3. klo 9-12

To 18.3. klo 17-20

Peruskäsitteet. Yksinkertaisen verkkosivun ja tyylitiedoston tekeminenluominen. Validointi Ilm. myöhemmin

Ma 2221.3. klo 9-12

To 25.3. klo 17-20

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.

Ilm. myöhemmin

Ma 29.3. klo 9-12

To 1.4. klo 17-20

Taulukkotaitto ja taulukon muotoilu tyylitiedostolla

Ilm. myöhemmin

Ke 14.3. klo 9-12

To 15.4. klo 17-20

CSS-taitto jatkuu

Ilm. myöhemmin

Ma 19.4. klo 9-12

To 22.4. klo 17-20

CSS-taitto ja taulukkotaitto, harjoituksia

Ilm. myöhemmin

Ma 26.4. klo 9-12

To 29.4. klo 17-20

Lisää tekstin muotoilusta: listat,

Ilm. myöhemmin

Ma 3.5. klo 9-12

To 6.5. klo 17-20

Kerrataan opittua ja tehdään harjoituksia

Ilm. myöhemmin

Ma 10.5. klo 9-12

To 13.5. klo 17-20

Harjoitustyön teko

Ilm. myöhemmin

Ma 17.5. klo 9-12

To 20.5. klo 17-20

Harjoitustyön teko

Ilm. myöhemmin

Ma 24.5. klo 9-12

To 27.5. klo 17-20

Harjoitustöiden esittely

Ilm. myöhemmin

http://kulttuurilukkari.metropolia.fi/

Kurssin suorittaminen

  • Läsnäolo opetuksessa 80%
  • Harjoitustyönä toteutettava sivusto (vähintään 4-5 sivua) sekä dokumentaatio (4-5 sivua A4) 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
  • Suunnittele myös tulostusnäkymä
  • Julkaise sivusto kotihakemistossasi tai muualla verkossa
Ohjeita dokumentaatioon
  • Lähetä opettajalle sähköpostitse kuvaus (3-4 sivua) sivuston tavoitteesta, kohderyhmästä ja suunnitteluperiaatteista
Harkkatyön arviointikriteerit
  • Oikeaoppinen ja validi HTML ja CSS
  • Layout: käytettävyys, visuaalisuus
  • Dokumentaatiossa kuvaillut perustelut tehdyille valinnoille: miten toteutettu sivusto vastaa tavoitteisiin?

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

HTML:n ja CSS:n historiaa
Internetin ja hypertekstin kehittyminen

Peruskäsitteitä

  • Selain
    • Palvelin

    HTMLn ja CSSn historiaa ja peruskäsitteitä
    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

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


    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
    titleLisätietoaMuuta materiaalia

    Multimedian upottaminen verkkosivuillelisää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

    Panel
    bgColor#ffffff
    titleHarjoituksia

    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 kaksoisjulkaiseminen