Kotisivujen tekemisestä

1. Kotisivujen tekemisestä

2. Lähtökohta • Kotisivun teossa lähtökohta on asia jota ilmaistaan. • Mieti mitä haluat sivullasi viestittää? • Laadi ensin paperille lista • Hahmota pääasiat ja nimeä ne. • Tutki vielä olisivatko jotkut niistä vielä yhdistettäviksi, mikäli ne ovat lähellä toisiaan. • Alkukarsinnan jälkeen ei pitäisi olla enempää kuin kuusi pääaihetta. • Jos pääset neljään, niin hyvä. Se on mahdollista, katso vaikka… • .

3. Jäsentäminen

4. Jokaiselle löytyy ratkaisu… Perusratkaisusta riippuu minkälainen sivusta muodostuu ja mitä ohjelmia kotisivun tekoon tarvitaan. Jos aikomuksena on pelkästään viestittää: Heippa Maailma, tässä minä, minuun saa yhteyden seuraavasti... riittää mainiosti käynti Lasipalatsin kotisivuautomaatilla, jossa jokainen voi maksutta ja vähällä vaivalla luoda oman kotisivunsa.

5. Harrasteista kotisivuja Harrastaja voi hankkia kotisivutilansa Internetpalveluntarjoajaltaan tai etsiä ilmaisvaihtoehtoja Esimerkiksi Mikrobitin tilaajana kotisivu voidaan laittaa lehden kotisivulle vaikkapa harrastaisi neuletöitä Voidaan liittyä Surf Eun tai Sunpoint-netin asiakkaaksi ja saada sieltä tilaa sekä automatisoituja kotisivupalveluja hankkimatta erityisiä ohjelmia Voidaan hakea netistä muu ilmainen kotisivutila, jolla on kuitenkin palveluntarjoajan hankkimaa mainontaa…

6. Yrittäjän ratkaisut Yrittäjän kannattaa hankkia oma domaineli yksilöllinen nimi, joka näkyy netissä. Domainin hinta esim com-päätteellä on 33€ vuodessa. Tähän tulee päälle kotisivutilan vuokraaminen. Vaihtoehtona on ns. Webhotelli, jossa nimiasia ja kotisivutila hoituu samalla, kaupan päälle voidaan tarjota helppoja automaattisia toimintoja, joilla sivua päivitetään. Googlen ja vastaavien portaalien hakutoiminnalla voidaan hakea webhotelleja netistä ja ottaa sitä kautta yhteyttä näiden palvelujen tarjoajiin

7. Yrittäjän ratkaisut Ohjelmiakin kauppapaikan kotisivun tekoon on; esimerkiksi Hybris Shop ja Smilehouse Shop Engine Monet muutkin ohjelmat soveltuvat: Auscomp, Netobjects Fusion jne. Suurin osa on maksullisia. Kun Microsoft on vakiinnuttanut asemansa, myös webtyökalu Frontpage on laajasti käytössä. Aikaisempi ilmaisohjelma Frontpagesta oli suoraan sanoen huono. Ilmaisella Open Officella on toiminta jonka avulla websivun tallennus onnistuu, mutta isojen sivukokonaisuuksien hallinta on toistaiseksi vaikeaa.

8. Frontpagessa on kaksi pääominaisuutta: • Se mädättää aivot, kun ei tarvitse itse ajatella: se on ihan toimiva ja helposti hallittava ohjelma, jonka avustuksella voi keskittyä itse sisältöön; • Jos osaat tekstinkäsittelyä esim. Wordia ja osaat hakea ja vaihtaa kuvia, osaat kolmanneksen Frontpagesta. • Jos osaat hahmottaa hakemistorakennetta ja opit linkin tekemisen, olet saavuttanut puolet. • kolme neljännestä on saavutettu kun osaat käsitellä taulukoiden ja solujen ominaisuuksia. • Kun opit vielä siirtämään valmiit tiedostot palvelimelle, osaat tekniseltä kannalta kaiken oleellisen vaikka et tietäisi koodeista mitään.

9. HTML eli hötömölö HTML = Hypertext Markup Language -> rakenteista tekstiä, jota selaimet pystyvät näyttämään yleisohjeen mukaisesti. Yleisohje sijoitetaan <merkkien sisään> nimeämistarkoituksessa. Selain tietää esimerkiksi että <b> tarkoittaa: muuta seuraava teksti lihavoiduksi eli bold ja selain jatkaa lihavoinnin näyttämistä kunnes tulee vastaan </b> joka kumoaa lihavoinnin. Näitä tavallinen kotisivun tekijän ei tarvitse osata ulkoa, vaikkakin näitä ns. tageja on vain muutaman sivun verran. HTML:n lisäksi on muitakin kielistandardeja kuten SGML ja XML.

10. Ei pelkästään HTML:ää htm / html on selaimella näkyvää materiaalia. Sen kanssa käytetään myös erillisiä tiedostoja, kuten gif ja jpg. HTML-tiedosto ei sisällä esim. kuvatiedostoa vaan viittauksen tiedostoon, jonka selaimen on tarkoitus näyttää. Kun kopioidaan kuvallisia tiedostoja nettipalvelimelle, myös kuvat on siirrettävä vastaavaan hakemistoon palvelimelle. Mikä tahansa tiedostomuodossa oleva on laitettavissa nettiin ja sopivan linkin avulla siirrettävissä vastaanottajan koneeseen. Jos nettisivulla surffaavan henkilön koneesta puuttuu ohjelma tai ominaisuus, hienosta sivusta ei ole mitään hyötyä. Jossain tapauksissa sivulle voidaan laittaa linkki kyseisen katselu/kuunteluohjelman valmistajan sivulle, josta ohjelma voidaan ladata. Videon tapauksessa se olisi vaikkapa Mediaplayerin tai RealPlayerin lataussivulle johtava linkki.

11. Index-sivu Websivulle tullaan tavallisesti yhden osoitteen kautta, joka on pääsivu. Tälle pääsivulle laitetaan luettelo, jolla linkitetään alasivut. Alasivujen nimeämisessä pääkriteerit: 1. Nimi ytimekäs ja kuvaava. 2. Älä käytä ääkkösiä 3. Älä käytä välilyöntiä vaan tarvittaessa alleviivausta_sanojen_välissä. 4 Vaikkakin ohjeellinen: käytä vain pieniä kirjaimia. Tiedostotunnus on joko htm tai htmlMicrosoft lanseerasi tämän lyhyemmän, mutta linux- ja unix-ihmiset suosivat pitempää ja varmempaa muotoa.

12. Oletamme että ohjelman käynnistäminen on hallinnassa Tässä avataan Frontpagella valmista sivua

13. Frontpagen eri näkymät

14. työskentelytilassa näkyviä elementtejä

15. Mitä tahansa toisen ohjelman luomaa kotisivua pääsee muokkaamaan Frontpagen avulla. Kaikki palvelimet eivät kuitenkaan anna netistä tallennettavalle sivulle kaikkea tarvittavaa tietoa mm. tietoturvasyistä. Tässä kokeiltiin tehdä taloyhtiön sisäinen sivusto, joka luotiin Netobjects Fusionilla. Vasemmassa reunassa on linkkeinä toimivaa grafiikkaa, johon teksti on sulautettu. (ns. linkillinen kuva)

16. linkkinäkymän tarkastelu

17. Linkin luominen

18. Linkin luominen Tässä oletuksena oleva linkki jossa avautuva sivu jättää mahdollisen reunapalkin kotisivulta esille, alempana on 1 samaan kehykseen avautuva 2 koko sivun täyttävä 3 uudessa ikkunassa avautuva sivu, jossa kotisivusi jää alle 4 uusi sivu avautuu pääkehyksessä Tavallisimmat ovat oletusasetus ja uudessa ikkunassa avautuva sivu, jota voi suositella silloin kun linkki johtaa oman kotisivun ulkopuolelle.

19. Linkin luominen Linkin voi luoda myös uutisryhmään ja linkin avulla voi käynnistää surffaajan sähköpostiohjelman, jonne vastaanottajaksi on merkitty tekijän sähköpostiosoite. Linkki voi viitata mihin tahansa tiedostoon, esimerkiksi ladattavaan ohjelmaan, soitettavaan musiikkitiedostoon, kuvaan videoon, Powerpoint esitykseen ja lukemattomiin muihin. Linkki voidaan luoda viittaamaan paikallisessa hakemistossa olevaan tiedostoon tai webissä olevaan tiedostoon tai sivuun. Paikalliseen tiedostoon viittaava linkki on ns. suhteellinen, johonkin netissä olevaan viittaus on absoluuttinen, esimerkki: Yleisradion sivu; osoitekenttään kirjoitetaan: http://www.yle.fi Toisin kuin selainta käyttäen htm-tiedoston linkki ei saa olla yksinkertaisemmassa www-muodossa vaan http://

20. kuvan lisääminen Lisäyksen jälkeen tehty rajaaminen tai kuvan pienentäminen ei paranna kuvan laatua vaan säilyttää tiedostokoon samana. Kannattaa siis ensin miettiä kuvan koko ja sitten vasta lisätä se nettisivulle

21. Tehtävä • Avaa Frontpagella HTML sivu paikalliselta kiintolevyltä tai levykkeeltä. • Lisää siihen kuva jonkin edellisen kuvan tilalle • Lisää linkki paikallisessa hakemistossa olevaan htm-tiedostoon • Lisää ulkoinen linkki yleisradion sivulle www.yle.fi • Tallenna tiedosto uudella nimellä siten että lisäät tiedoston nimen perään kirjaimen c

22. Kiitos!