Versions Compared

Key

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

Kurssin tavoitteet

opettaja
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ä

Aikataulu ja sisällöt

Opettaja: Eeva Meltio, eeva.

meltio@metropolia

meltio a metropolia.fi

http://kulttuurilukkari.metropolia.fi/

Panel
bgColor#ffffff
titleKurssin suorittaminen
Kurssin suorittamiseksi opiskelijan on oltava läsnä
  • Läsnäolo 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:

  • 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)
  • 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ä: *

    • 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
    Column

    Kurssimateriaali

    Panel
    bgColor#efefef
    titleYleistä

    Verkkosivustojen suunnittelu ja toteutus
    HTMLn ja CSSn

    Materiaalia

    HTML:n ja CSS:n historiaa ja peruskäsitteitä
    Internetin Selaimen ja hypertekstin kehittyminen
    Selain
    Palvelinpalvelimen 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?
    HTML-sivun luominen

    DTD, Meta-elementit, merkkikoodit

    Elementit
    Elementtien määritteet

    Tekstin muotoilu html-merkkauksella
    Linkit ja hakemistorakenne linkityksessä

    Kuvien lisääminen

    Panel
    bgColor#efefef
    titleCSS

    Ulkoasun muotoilu CSS:llä
    Tyylitiedostojen

    Verkkosivustojen suunnittelu ja toteutus

    Yleistä

    Mitä on HTML?
    Ulkoasun muotoilu CSS:llä
    Yksiköt
    DTD ja miten siihen viitataan

    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
    Validointi

    CSS:

    CSS:n 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

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

    Muuta

    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

    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 kaksoisjulkaiseminenKuvat ja Multimedia verkkosivuilla
    Selainskriptit
    Oman sivuston julkaiseminen