KOTISIVUN TEKEMINEN

1. Yleistä

WWW-sivut ovat HTML-kielellä kirjoitettuja tekstidokumentteja. Selainohjelma tulkitsee HTML-kielisen sivun sellaisena kuin me näemme sen. Sivulla olevat kuvat, äänet yms. osat ovat erillisiä tiedostoja, jotka on linkitetty varsinaiselle sivulle. Eri selaimet saattavat tulkita koodia hieman eri tavoin, jolloin sama sivu voi näkyä erilaisena eri selaimella.

Esimerkki. Katso tämän sivun HTML-kielinen lähdekoodi napauttamalla sivua hiiren kakkosnäppäimellä ja valitsemalla komento Näytä Lähdekoodi. Yritä löytää koodista sivun eri osat.

WWW-sivuja voidaan tehdä koodia kirjoittamalla, mutta helpoin tapa on käyttää jotain editoria, jossa elementit valitaan ja muotoillaan hiirellä kuten tekstinkäsittelyohjelmassa. Tällaisia editoreja kutsutaan nimellä WYSIWYG-editori (What You See Is What You Get). Editori luo koodin automaattisesti. Koodin ymmärtäminen ja koodaamisen osaaminen auttaa sivujen tekemisessä, mutta se ei ole välttämätöntä.

Tällä kurssilla tutustumme sivujen tekemiseen  Microsoft Office SharePoint Designer-editorilla. Editori on FrontPage-ohjelman uusin versio. Seuraavissa luvuissa luodaan malliksi yksinkertainen esimerkkisivusto. Oppimistehtävänä on toteuttaa esimerkin mukaiset sivut, joten sinun kannattaa käydä esimerkki läpi samalla itse tehden.

Huom! Voit käyttää esimerkin ja oppimistehtävän tekemiseen myös jotain muuta editoria, jos haluat.

2. Sivujen valmistelu

Ennen sivujen tekemisen aloittamista täytyy tietysti suunnitella sivujen ulkoasu, sisältö ja rakenne ja koota tarvittava materiaali. Sivujen suunnitteluun ja tarkempaan tekemiseen perehdytään tarkemmin valinnaisissa opinnoissa. Tässä keskitytään vain teknisesti yksinkertaisen sivun tekemiseen.

Ennen sivujen teon aloittamista kannattaa luoda sivustoa varten uusi kansio ja sille mahdollisesti tarvittavat alikansiot. Lisäksi kannattaa koota kuvat yms. linkitettävä materiaali. Teemme tässä esimerkissä kahdesta sivusta koostuvan sivuston, joka kertoo Liiketalouden perustutkinnosta.

Tehtävä. Luo itsellesi kansio, jonka nimi on esimerkkisivut. Luo sinne edelleen alikansio, jonka nimi on kuvat.

Tallenna kuvat-kansioon liiketalouden yksikön kuva, jonka löydät tästä:rakennus.jpg

3. Aloitussivun luominen ja tallentaminen

Tehtävä. Käynnistä SharePoint Designer. Löydät sen Microsoft Office-valikosta. Ikkunaan pitäisi avautua tyhjä sivu. Mikäli tyhjää sivua ei tule näkyviin, valitse valikkoriviltä Tiedosto|Uusi|Sivu.

Sivulle kannattaa heti alussa määritellä kuvaava otsikko eli title, joka näkyy selaimen otsikkorivillä. Myös hakukoneet näyttävät otsikon hakutuloksissaan.

Tehtävä. Valitse valikkoriviltä Tiedosto|Ominaisuudet ja kirjoita otsikoksi Liiketalouden perustutkinto.

Tehtävä. Kirjoita uuden sivun alkuun teksti: Liiketalouden perustutkinto. Muotoile kirjoittamasi teksti työkalurivin tyyli-valikon avulla tyylillä Otsikko 1. Voit muotoilla tekstiä kuten tekstinkäsittelyohjelmassa.

Ohjelma-ikkunan yläosa muistuttaa Word-ikkunaa. Vasemmassa reunassa on kansioluettelo, johon tulevat näkyviin sivuston tiedostot. Oikeassa reunassa näkyvät työkaluryhmä ja tyyliruutu voidaan tässä esimerkissä vaikka sulkea, sillä ne edellyttävät html-kielen perusteellisempaa tuntemusta.

Ikkunan keskellä on varsinainen työstettävä sivu. Sitä voidaan katsella eri näkymissä. Näkymä voidaan vaihtaa ikkunan alaosassa olevista painikkeista Rakenne, Jakaminen ja Koodi.

Tehtävä. Katso sivuasi Koodi-näkymässä. Sen pitäisi näyttää jotakuinkin tällaiselta.

Tehtävä. Tallenna sivu esimerkkisivut-kansioon nimellä index. Ohjelma antaa sille automaattisesti tiedostotunnisteen htm.

 Useammasta sivusta koostuvan sivuston pääsivun nimeksi tulee antaa Unix/Linux-palvelimilla index.htm tai index.html, jotta sivu latautuu oletuksena näkyviin. Windows-palvelimilla oletussivu voi ollla nimeltään default.htm.

4. Elementtien lisääminen sivulle

Sivulle voidaan lisätä erilaisia elementtejä, kuten kuvia, taulukoita, vaakaviivoja, lomakekenttiä jne. joko työkaluriviltä tai Työkaluryhmästä. Lisätyn elementin ominaisuuksia pääsee muuttamaan napauttamalla elementtiä hiiren kakkospainikkeella.

Tehtävä. Kirjoita sivullesi alla olevan mallin mukainen teksti ja lisää kuva työkalurivin tai Lisää-valikon Lisää kuva tiedostosta-komennolla. Saat myös luettelomerkit  työkaluriviltä.

5. Muiden sivujen luominen

Useammasta sivusta koostuva sivusto voitaisiin alunperin luoda aloittamalla uusi sivusto eikä luomalla yksittäistä sivua, kuten teimme tässä esimerkissä. Emme luo nyt sivustoa, koska emme siirrä sivuja palvelimelle emmekä päivitä niitä Sharepointilla. Luomme vain yksittäisiä sivúja, jotka linkitämme keskenään.

Uusi sivu lisätään valikkokomennolla Tiedosto|Uusi|Sivu. Tyhjä sivu aukeaa samaan ikkunaan mutta toiselle välilehdelle.

Tehtävä. Lisää molempia koulutusohjelmia varten uudet sivut. Valitse sivun tyypiksi HTML.
Kirjoita sivuille mallin mukaiset otsikot ja laita sopivat otsikot myös sivujen ominaisuuksiin.
Tallenna sivut nimillä aspa ja taha.

6. Hyperlinkkien tekeminen

Hyperlinkkien avulla voidaan tehdä linkkejä saman sivuston eri sivuille tai muihin sivustoille tai linkittää sivulle tiedostoja.

Tehtävä. Siirry pääsivulle ja valitse hiirellä asiakaspalvelun ja markkinoinnin koulutusohjelma. Lisää siihen hyperlinkki valikkokomennolla Lisää|Hyperlinkki tai vastaavalla työkalurivin painikkeella (maapallon kuva). Valitse linkitettäväksi tiedostoksi aspa.
Tee vastaavanlainen linkki toisesta koulutusohjelmasta taha-sivulle.

Huom! Voit testata linkkien toimivuuden vasta esikatselussa, et rakenne-näkymässä.

Tehtävä. Valitse pääsivulta hiirellä sanat tutkinnon perusteista ja hyperlinkki osoitteeseen http://www.oph.fi. Naputa painiketta kohdekehys ja määrittele sivu avautumaan uuteen ikkunaan (kts. kuva).

Tehtävä. Tee vielä koulutusohjelmista kertoville sivuille paluulinkit, joista pääsee pääsivulle.

7. Esikatselu

Voit sivujesi toimivuuden ja lopullisen ulkoasun selaimella. Voit tallentaa tiedostot ja avata ne selaimessa tai siirtyä esikatseluun suoraan SharePointista valikkokomennolla Tiedosto|Esikatsele selaimessa.

Tehtävä. Tallenna kaikki sivusi valikkokomennolla Tiedosto|Tallenna kaikki. Siirry sitten esikatseluun. Esimerkkisivujen tulisi näyttää selaimessa tältä.

8. Sivujen  julkaiseminen palvelimella

Voit työstää sivusi valmiiksi omalla koneellasi, mutta lopuksi ne on siirrettävä palvelimelle, jotta ne näkyisivät Internet-verkossa. Tarvitset tiedostojen siirtoon jonkun tiedostonsiirto-ohjelman(ftp). Students.osao.fi-palvelin vaatii, että tiedostojen siirtoon käytetään salattua yhteyttä. Koulun työasemissa on käytössä SSH Secure File Transfer-ohjelma, jolla siirto voidaan tehdä. Voit käyttää sitä tai jotain ilmaisohjelmaa, jossa on salattu yhteys. Yksi tällainen ohjelma on ZileZilla, joka löytyy Internetistä ja on helppo asentaa. Kaikki ohjelmat toimivat lähes samalla periaatteella.

Tehtävä. Siirrä esimerkkisivut-kansio students.osao.fi-palvelimelle. Seuraavat ohjeet on tehty SSH-ohjelmalle.

1. Käynnistä SSH Secure File Transfer-ohjelma.

2. Paina Quick Connect-painiketta ja kirjaudu sisään. Palvelin eli host on students.osao.fi. Käyttäjätunnus (User Name) on sama kuin sähköpostissa. Ohjelma kysyy salasanaa, joka on myös sähköpostin salasana.

3. Ohjelmaikkunan vasen puoli esittää paikallisen koneen kiintolevyn sisällön ja ikkunan oikea puoli students.osao.fi -palvelimella olevan kotihakemistosi sisällön.

Paina oikeanpuoleisen ikkunan yläpuolella lolevaa New Folder-painiketta, jolla voit luoda uuden kansion students.osao.fi-palvelimelle. Anna kansiolle nimeksi public_html.

4. Napauta public_html -kansiota hiiren kakkosnäppäimellä ja valitse properties. Syötä Permission mode-kentän arvoksi 755. Tällä määritellään käyttöoikeudet luotuun kansioon.

5. Avaa kansio public_html tuplaklikkauksella.

6. Siirry paikallisen koneen puolelle (vasen ikkuna) ja selaa näkyviina esimerkkisivut-kansio. Kaksoisnapauta kansiota, niin se siirtyy palvelimelle eli tulee näkyviin oikeanpuoleiseen ikkunaan.

7. Kun siirto on suoritettu, voit käydä tarkastelemassa kotisivujasi osoitteessa http://students.osao.fi/~käyttäjätunnuksesi/esimerkkisivut.

Kun osoitteeseen kirjoitetaan pelkkä kansion nimi kuten esimerkkisivut, niin palvelinohjelmisto etsii automaattisesti index.htm tiedoston ja palauttaa sen.

Jos haluat julkaista palvelimella muita sivuja, niin sinun tarvitsee toistaa vain edellisen ohjeen kohdat 5-7.

Huom! Jos jokin sivu ei näy, niin käy tarkistamassa, että kyseisellä tiedostolla on käyttöoikeudet 644, kuten kohdassa 4. Kansiolla tulee olla oikeudet 755, tiedostoille riittää 644.

9. Oppimistehtävät

Oppimistehtävä 10: Tee tässä luvussa esitetyt esimerkkisivut (punaiset tehtävät) liiketalouden perustutkinnosta ja julkaise sivut students.osao.fi-palvelimella. Kun sivut ovat valmiit, niin ilmoita niiden osoite opettajalle Moodlen tehtävä 10-palautuskohdassa.

Oppimistehtävä 11: Tee vähintään kahdesta sivusta koostuva sivusto, jonka aiheen saat valita itse. Voit tehdä vaikkapa oman kotisivusi.Sivuilla on oltava ainakin tekstiä, kuvia ja linkkejä. Julkaise sivut palvelimella siten, että ne löytyvät osoitteesta  http://students.osao.fi/~käyttäjätunnuksesi/tehtava11. Kun sivut ovat valmiit, niin ilmoita niiden osoite opettajalle Moodlen tehtävä 11-palautuskohdassa.