Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
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 a metropolia.fi

Aikataulu ja sisällöt

Perusopiskelijat

Aikuisopiskelijat

Aihe

Ma 15.3. klo 8.30-11.45 To 18.3. klo 16.30-20.30

Peruskäsitteet. Yksinkertaisen verkkosivun luominen. Validointi.

Ma 22.3. klo 8.30-11.45 To 25.3. klo 16.30-20.30

Etäyhteydet: ssh, ftp. Tyylitiedostojen luominen ja linkittäminen. Värien käyttö ja typografian muotoilu tyylitiedostoilla.

Ma 29.3. klo 8.30-11.45

To 1.4. klo 16.30-20.30

Kuvan lisääminen ja asemointi. Linkit ja hakemistorakenne. 

Ke 14.3. klo 8.30-11.45

CSS-taitto

Ma 19 To 15.4. klo 168.30-2011.30 CSS-taitto 45

Taulukon luominen ja muotoilu tyylitiedostolla

Ma 1926.4. klo 8.30-11.45 To 22.

Listat ja navigaation muotoilu.

Ma 3.54. klo 168.30-2011.30 45

Yhteenveto: Kokonaisen verkkosivun luominen: taitto, navigaatio, julkaisu

Ma 10.5

Taulukon luominen ja muotoilu tyylitiedostolla

Ma 26.4. klo 8.30-11.45 To 29.4

Harjoitustyön teko

Ma 17.5. klo 168.30-2011.30 45

Harjoitustyön teko Listat ja navigaation muotoilu.

Ma 324.5. klo 8.30-11.45

Harjoitustöiden esittely

Perusopiskelijoiden kevään aikataulu

Aikuisopiskelijat

Aihe

To 618.53. klo 16.30-20.30

Peruskäsitteet. Yksinkertaisen verkkosivun luominen. Validointi.

To 25.3. klo 16.30-20.30

Etäyhteydet: ssh, ftp. Tyylitiedostojen luominen ja linkittäminen. Värien käyttö ja typografian muotoilu tyylitiedostoilla.

To 1.4. klo 16.30-20.30

Kuvan lisääminen ja asemointi. Linkit ja hakemistorakenne. 

To 15.4

Yhteenveto: Kokonaisen verkkosivun luominen: taitto, navigaatio, julkaisu

Ma 10.5. klo 8.30-11.45

To 13.5. klo 16.30-20.30

Harjoitustyön teko

CSS-taitto

To 22.4. klo 16 Ma 17.5. klo 8.30-11.45 20.30

Taulukon luominen ja muotoilu tyylitiedostolla

To 29.4. klo 16.30-20.30

Listat ja navigaation muotoilu.

To 6. To 20.5. klo 16.30-20.30

Yhteenveto: Kokonaisen verkkosivun luominen: taitto, navigaatio, julkaisu. Aloitetaan harjoitustöiden teko.

To 13.5. klo 16.30-20.30

Helatorstai - ei opetusta

To 20

Harjoitustyön teko

Ma 24.5. klo 816.30-11.45 20.30

Harjoitustyön teko

To 27.5. klo 16.30-20.30

Harjoitustöiden esittely

Perusopiskelijoiden kevään aikataulu

Harjoitustoiden viimeistely ja esittely

Aikuisopiskelijoiden kevään aikataulu

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

Kurssimateriaali

Panel
bgColor#efefef
titleYleistä

Verkkosivustojen suunnittelu ja toteutus

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?

HTML-sivun luominen

Elementit ja tagit

Tekstin muotoilu html-merkkauksella

Linkit ja hakemistorakenne linkityksessä

Kuvien lisääminen

Järjestetyt ja järjestämättömät listat

Elementit ja määritteet

Panel
bgColor#efefef
titleCSS

Ulkoasun muotoilu CSS:llä

Tyylitiedostojen muoto ja rakenne

Tyylimäärittelyn liittäminen html-sivuun

Tyyliohjeiden yhdistäminen

Tärkeimmät selektorit

CSS ja selainten tuki

Värit ja värikoodit

Tekstin ja linkkien muotoilu

Kiinteä vai mukautuva taitto?

Listat ja navigaation muotoilu

Kaksoisjulkaiseminen

Kommentointi

Panel
bgColor#efefef
titleTeknisesti toimivat sivut

DTD, Meta-elementit, merkkikoodit

Validointi

Panel
bgColor#efefef
titleMuuta materiaalia

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

Panel
bgColor#efefef
titleMitä ohjelmistoja tarvitaan?

Kurssilla käytetään tekstieditoreita html- ja tyylitiedostojen tekemiseen.

 >> Lataa Notepad++

Panel
bgColor#efefef
titleTärkeitä linkkejä

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

Merkkauskielten idea (Jukka K. Korpelan verkko-opas)

Panel
bgColor#ffffff
titleHarjoituksia

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

Taulukko-harjoituksia
CSS-taittoharjoituksia

Listojen käyttö ja navigaation rakentaminen
CSS-lohkot ja kaksoisjulkaiseminen