Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column
width50%

Kurssin tavoitteet

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


Aikataulu ja sisällöt

Perusopiskelijat

Aikuisopiskelijat

Aihe

Paikka

Ma 15.3. klo 9-12

To 18.3. klo 17-20

Peruskäsitteet. Yksinkertaisen verkkosivun ja tyylitiedoston tekeminen. Validointi

Ilm. myöhemmin

Ma 22.3. klo 9-12

To 25.3. klo 17-20

Värien käyttö ja typografian muotoilu tyylitiedostoilla. Kuvan 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 jne. Sivuston julkaisu verkossa

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?

Column

Materiaalia

Panel
bgColor#efefef
titleYleistä

Verkkosivustojen suunnittelu ja toteutus

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

Peruskäsitteitä

  • Selain
  • Palvelin

    Selaimen ja palvelimen toiminta

    Oman sivuston julkaiseminen

    Yksiköt (px, em jne)

    Panel
    bgColor#efefef
    titleHTML

    Mitä on HTML?
    Määrittelyt ja standardit
    HTML-dokumentin luominen
    Tekstin muotoilu
    Elementit ja määritteet
    Värit
    Yksiköt
    Linkkien teko
    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 muoto ja rakenne
    Tyylimäärittelyn liittäminen html-sivuun
    span / div / display
    Tärkeimmät selektorit
    Tekstin muotoilu

    • taustavärit
    • reunite (borders)
    • marginaali
    • täyte (padding)
      Taitto
    • Validointi
    Panel
    bgColor#efefef
    titleLisätietoa

    Multimedian upottaminen verkkosivuille
    Selainskriptit

    Panel
    bgColor#efefef
    titleTärkeitä linkkejä

    HTML validaattori

    CSS Validaattori

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

    Merkkauskielten idea (Jukka K. Korpelan verkko-opas)

    Panel
    bgColor#ffffff
    titleHarjoituksia