Verkkoteknologian perusteet
...
| | Panel |
|---|
| 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 |
| Panel |
|---|
| bgColor | #ffffff |
|---|
| title | 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
|
|
|
...
Alla lyhyt kuvaus kurssin opetuskertojen sisällöstä. Sivustoille tulee lisämateriaalia koko ajan, myös kurssin edetessä.
Aloitusluento: HTML:n ja CSS:n historiaa ja peruskäsitteitä
1. HTML-sivun teko ja julkaisu
2. Tekstin merkkaus ja perusmuotoilut
Yleistä verkkosivustojen typografiasta
HTML ja tekstin merkkaus
CSS tekstin muotoilussa
Lisää selektoreista. Selektorien käytön periaatteet.
Testaaminen tyylien kanssa ja ilman.
Selaimet ja niiden väliset erot.
Harjoituksia.
3. Typografia ja taitto I
Verkkosivustojen taitto, yleisiä periaatteita ja vaihtoehtoja
HTML- taulukkorakenteen perusteet: tieto- ja taittotaulukot
Taulukoiden ulkoasun muotoilu tyylitiedostoilla (perusteet)
Harjoituksia.
4. Typografia ja taitto II
Taulukoiden ulkoasun muotoilu tyylitiedostoilla
Listat ja navigaation rakentaminen
Harjoituksia.
5. Typografia ja taitto III
CSS-taitto
Kuvien käyttö ja niiden sijoittaminen verkkosivuille
Yksiköt ja prosentit. Yksikön valinnan periaatteet.
Harjoituksia.
6. Listat ja navigaation rakentaminen
CSS-taiton syventäminen (display, positioning)
Sivujen taitto kokonaisuutena: kiinteä vai mukautuva taitto?
Käyttäjän omat tyylitiedostot
Kaksoisjulkaiseminen
Harjoituksia.
7. Värit, taustat ja läpinäkyvyys
Värien käyttö verkkosivuilla
Muiden objektien upotus tarkemmin
Läpinäkyvyys.
Harjoituksia.
8. Teknisen tiedon syventäminen: DTD, skriptit jne.
DTD ja miten siihen viitataan.
DTD:n vaikutus sivuston näkymiseen (quirks- ja standards-tilat)
Html:n versioita: mitä html:n versiota käyttäisin?
Metatiedot ja metaelementti, hakurobotit
URLit: tarkoitus, rakenne ja URL-koodaus
Selainskriptit yleisesti: mitä ovat, mitä hyötyä?
Harjoituksia.
9. WWW-julkaisemisen erityiskysymyksiä
Validointi
Esteettömyys
Oman palvelintilan hankkiminen: erilaiset mahdollisuudet verkkosivujen säilyttämiseen ja ylläpitoon.
Harjoitellaan ja kerrataan aikaisemmin opittua.
10. Sivunteko-ohjelmat
- 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 |
|---|
| Panel |
|---|
| bgColor | #efefef |
|---|
| title | Validointi |
|---|
| 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 |
|---|
| title | Mitä 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 |
|
|
...