22
Kotisivujen tekemisestä

Kotisivujen tekemisestä

  • Upload
    talon

  • View
    22

  • Download
    1

Embed Size (px)

DESCRIPTION

Kotisivujen tekemisestä. 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. - PowerPoint PPT Presentation

Citation preview

Page 1: Kotisivujen tekemisestä

Kotisivujen tekemisestä

Page 2: Kotisivujen tekemisestä

LähtökohtaLähtökohta

Kotisivun teossa lähtökohta on asia jota ilmaistaanasia 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…

.

Page 3: Kotisivujen tekemisestä

Jäsentäminen

Page 4: Kotisivujen tekemisestä

Jokaiselle löytyy ratkaisu…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.

Page 5: Kotisivujen tekemisestä

Harrasteista kotisivujaHarrasteista 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…

Page 6: Kotisivujen tekemisestä

Yrittäjän ratkaisutYrittäjän ratkaisut

Yrittäjän kannattaa hankkia oma domain eli 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

Page 7: Kotisivujen tekemisestä

Yrittäjän ratkaisutYrittä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.

Page 8: Kotisivujen tekemisestä

Frontpagessa on kaksi pääominaisuutta: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.

Page 9: Kotisivujen tekemisestä

HTML eli hötömölö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.

Page 10: Kotisivujen tekemisestä

Ei pelkästään HTML:ää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.

Page 11: Kotisivujen tekemisestä

Index-sivuIndex-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.

Page 12: Kotisivujen tekemisestä

Oletamme että ohjelman käynnistäminen on hallinnassaOletamme että ohjelman käynnistäminen on hallinnassa

Tässä avataan Frontpagella valmista sivua

Page 13: Kotisivujen tekemisestä

Frontpagen eri näkymät

Page 14: Kotisivujen tekemisestä

työskentelytilassa näkyviä elementtejätyöskentelytilassa näkyviä elementtejä

Page 15: Kotisivujen tekemisestä

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)

Page 16: Kotisivujen tekemisestä

linkkinäkymän tarkastelu linkkinäkymän tarkastelu

Page 17: Kotisivujen tekemisestä

Linkin luominen

Page 18: Kotisivujen tekemisestä

Linkin luominenTässä oletuksena oleva linkki jossa avautuva sivu jättää mahdollisen reunapalkin kotisivulta esille, alempana on 1 samaan kehykseen avautuva2 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.

Page 19: Kotisivujen tekemisestä

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.fihttp://www.yle.fi

Toisin kuin selainta käyttäen htm-tiedoston linkki ei saa olla yksinkertaisemmassa www-muodossa vaan http://

Page 20: Kotisivujen tekemisestä

kuvan lisääminenkuvan 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

Normaalikuvatai

300 X 225 pixeliä400 X 300 pixeliä

Klikattava iso kuva

700 X 525 pixeliä

Thumbnail 120 – 140 pix. leveä

Page 21: Kotisivujen tekemisestä

TehtäväTehtävä

1. Avaa Frontpagella HTML sivu paikalliselta kiintolevyltä tai levykkeeltä.

2. Lisää siihen kuva jonkin edellisen kuvan tilalle

3. Lisää linkki paikallisessa hakemistossa olevaan htm-tiedostoon

4. Lisää ulkoinen linkki yleisradion sivulle www.yle.fi

5. Tallenna tiedosto uudella nimellä siten että lisäät tiedoston nimen perään kirjaimen c

Page 22: Kotisivujen tekemisestä

Kiitos!