Kotisivu ohje Kotisivu - ohjelmisto on webbipohjainen kotisivujen julkaisujärjestelmä jossa käyttäjä ei tarvitse erityistaitoja kyetäkseen julkaisemaan webbisivuja. Jos osaat käyttää Microsoft Word tekstinkäsittelyohjelmaa, osaat luoda myös webbisivuja! Ohjelman hankkiminen ja asennus Voit hankkia ohjelman ottamalla yhteyttä meihin (http://www.hdsoft.fi/) ja antamalla palvelimesi käyttäjätunnuksen ja salasanan jonka jälkeen asennamme ohjelmiston valmiiksi. Ohjelma vaatii PHP 4:n joka on käytössä lähes jokaisessa www palvelimessa. Voit asentaa ohjelman myös itse purkamalla ja kopioimalla lähettämämme zip tiedoston sisällön www palvelimellesi. Ohjelman käyttöön ei sisälly muita kuluja kuin ohjelman lisenssimaksu ja mahdolliset webbipalvelusi käyttömaksut. Ohjelman käyttö Kun ohjelma on asennettu ja menet www sivullesi, näet kuvan 1 mukaisen, tyhjän www sivun: Kuva 1. Tyhjä webbisivu. Kuvan 1 oikeassa alareunassa näet tekstin Steelman from HD SofT 2006 Pääkäyttäjä. Tämä teksti näkyy jokaisen sivun alareunassa. Napsauttamalla Pääkäyttäjä linkkiä avautuu vain sinulle tarkoitettu muokkaustila (kuva 2) johon päästäksesi sinun tulee syöttää saamasi käyttäjätunnus ja salasana.
Kuva 2. Pääkäyttäjän kirjautumissivu. Syötä saamasi käyttäjätunnus ja salasana ja napsauta Kirjaudu painiketta jonka jälkeen voit käyttää vasemman reunan linkkejä Pääkäyttäjän etusivu, (Ulos/sisään)kirjautuminen, Muokkaa webbisivuja, Muuta asetuksia ja Lähetä tiedostoja normaalisti. Onnistuneen kirjautumisen jälkeen avautuu kuvan 3 mukainen sivu ( Pääkäyttäjän etusivu ): Kuva 3. Pääkäyttäjän etusivu. Tällä sivulla on tärkeää se, että jokaisen Asia kohdan Tila tulisi olla vihreällä tekstillä. Jos tekstin väri on punainen, on jotain vialla ja sivusto ei välttämättä toimi oikein. Alla on esitetty kukin tila ja mahdollinen vinkki tilanteen korjaamiseksi. JavaScript: Selaimesi JavaScript tuki ei ole päällä tai on väärä, editori jolla sivuja luodaan ei välttämättä toimi Kovalevytila: Palvelimesi kovalevytila on vähissä, yritä poistaa ylimääräisiä tiedostoja Hakemistot: Kotisivu ohjelmisto vaatii toimiakseen tietyt kansiot jotka luodaan asennuksen yhteydessä Kirjoitusoikeus: Kotisivu ohjelmisto vaatii kirjoitusoikeuden em. hakemistoihin jotta ohjelmisto toimisi oikein
Voit luoda uuden webbisivun (tai päivittää jo olemassa olevaa sivua tai poistaa olemassa olevan webbisivun) napsauttamalla Muokkaa webbisivua linkkiä jolloin sinun tulisi nähdä kuvan 4 mukainen sivu: Huom! Editorin latautuminen voi kestää etenkin hitaalla webbiyhteydellä jonkin aikaa. Huom! Jos sinulla on jokin muu kuin Internet Explorer selain, editori ei välttämättä toimi. Kuva 4. Webbisivujen muokkaus Uusi webbisivu luodaan kirjoittamalla sivulla olevaan editoriin tekstiä, kopioimalla teksti esim. Microsoft Word dokumentista tai webbisivulta tai vastaavasta. Kun sivu on valmis, voi sille antaa järjestysnumeron joka on sivun tunniste. Jokaisella sivulla on oma tunnisteensa jota käyttämällä voit linkittää sivuja toisiinsa. Jos annat sivulle linkkinimen, luodaan sivun vasempaan reunaan linkkinimen mukainen linkki em. sivulle. Testataan sivun tekemistä, luodaan ensimmäinen sivu. Anna järjestysnumeroksi vaikkapa 1, sivun linkkinimeksi Etusivu. Varsinaiseksi sivun sisällöksi voit laittaa vaikkapa tekstin Tämä on ensimmäinen sivuni!. Napsauta lopuksi Tallenna painiketta, tuloksena pitäisi olla seuraava näkymä: Kuten kuvasta 5 näet, olemme luoneet yhden webbisivun nimeltä Etusivu. Kuvassa on korostettu kohtaa missä löydät luomasi webbisivun ja siihen liittyvät toiminnot Näytä, Poista ja Muokkaa.
Kuva 5. Yksi webbisivu luotuna. Jos haluat nähdä miltä luomasi webbisivu näyttää, napsauta Näytä painiketta jolloin ohjelma avaa uuden sivun ja lataa luomasi webbisivun siihen. Kuvassa 6 olemme napsauttaneet Näytä painiketta: Kuva 6. Tarkastelemme juuri luomaamme webbisivua.
Kuten ehkä huomasit, luomamme webbisivu näkyy ihan oikein eli teksti Tämä on ensimmäinen sivuni! näkyy ja sivun vasemmassa reunassa on linkki em. sivulle, linkin nimi on Etusivu. Voit sulkea ikkunan. Voit halutessasi päivittää juuri luomaasi webbisivua napsauttamalla Muokkaa painiketta jolloin näet alla olevan kuvan mukaisen tilanteen: Kuva 7. Aikaisemmin luomamme webbisivun muokkaus. Lisätään yksi rivi tekstiä eli Hyvältä näyttää! ja tallennetaan sivu napsauttamalla Päivitä perussivu painiketta. Huom! Sivu tulee aina tallentaa sen luonnin tai muuttamisen jälkeen napsauttamalla joko Tallenna perussivu tai Päivitä perussivu painikkeita, muutoin muutokset eivät tallennu! Luodaan nyt toinen sivu, annetaan sille nimeksi Sivu 2, sivun järjestysnumero voi olla vaikkapa 5 ja sivun sisältö vaikkapa Tämä on toinen sivu! : Esimerkeissämme olemme tehneet hyvin minimalistisia webbisivuja, voit toki laittaa sivuille paljon enemmänkin tekstiä. Kuten ehkä huomasit, editori näyttää lähes samalta kuin Microsoft Word eli siinä on mahdollisuus valita eri fontteja, eri fonttikokoja, erilaisia tekstityylejä, lihavointia, kursivointia, yms. Monesti on helpointa luoda sivu ensin Microsoft Word:lla ja kopioida se suoraan editoriin. Muista, että kuvia et voi kopioida suoraan (paitsi jos kuva on linkitetty joltain webbisivulta). Tässä ohjeessa emme käsittele enempää webbisivujen ulkoasua vaan kerromme kuinka voit liittää liitetiedostoja kuten kuvia webbisivuillesi ja tehdä linkkejä.
Kuva 8. Toinen sivu. Nyt meillä on luotuna kaksi sivua: Kuva 9. Kaksi sivua luotuna. Seuraavaksi voisimme harjoitella linkin tekemistä, tehdään linkki Etusivu :lta Sivu 2 :lle. Napsauta Muokkaa linkkiä Etusivu :n kohdalla. Kirjoita editoriin uusi rivi, vaikkapa Tästä pääset sivulle 2.. Valitse sitten sana Tästä joko maalaamalla tai tuplanapsauttamalla em. sanaa, tuloksen näet alla:
Kuva 10. Linkkiteksti maalattuna. Napsauta sen jälkeen merkkiä (osoitettu nuolella kuvassa 10) jolloin avautuu ns. linkki-ikkuna. Tähän ikkunaan voimme syöttää linkkiosoitteen johon linkkiteksti viittaa. Linkkiosoite voi olla webbisivu, esim. http://www.hdsoft.fi/ tai sähköpostiosoite myynti@hdsoft.fi. Kuva 11. Linkki-ikkuna. Syötä Sivu 2 :n linkki kohtaan URL. Linkki on muotoa http://localhost/homepage/index.php?sivu=5. Mistä em. linkki sitten löytyy? Katso kuvaa 11
hiukan tarkemmin ja huomaat, että kunkin sivun ( Etusivu, Sivu 2 ) kohdalla löytyy Sivun URL jossa on em. sivun absoluuttinen osoite eli ns. linkki. Maalaa em. linkki, kopioi se ja liitä linkki-ikkunan URL kenttään. Jos kyseessä on sähköpostilinkki (esim. myynti@hdsoft.fi), kirjoita sähköpostiosoite URL kenttään ja napsauta kerran Luo sähköpostilinkki painiketta. Lopuksi napsauta Ok painiketta jolloin linkki on luotu. Muistaa tallentaa webbisivu napsauttamalla Päivitä perussivu painiketta! Voimme testata linkin toimintaa napsauttamalla Näytä painiketta Etusivu :n kohdalla: Kuva 12. Etusivu johon on luotu linkki sivulle 2. Napsauttamalla Tästä painiketta siirryt sivulle 2: Kuva 13. Sivu 2.
Seuraavaksi voisimme muokata hiukan yleisiä, webbisivustoon liittyviä asetuksia. Napsauta Muuta asetuksia linkkiä. Avautuvasta valikosta voit valita jonkin asetuksen, esim. Otsikkoteksti joka näytetään selaimen yläpalkissa jokaisella sivulla. Hetken päästä avautuu asetukseen liittyvä lomake, johon voit syöttää asetuksen arvon, tällä kertaa syötämme siihen tekstin Minun webbisivuni : Kuva 14. Asetuksen arvon muuttaminen. Tallenna muuttunut asetus napsauttamalla Tallenna asetus painiketta! Nyt jokaisen luomasi webbisivun otsikkona on Minun webbisivuni. Vastaavasti voit muuttaa muitakin asetuksia. Muista kuitenkin, että joidenkin asetusten muuttaminen voi vaatia tietämystä HTML:stä eli älä muuta jos et tiedä mitä olet tekemässä! Esimerkiksi em. asetuksessa ei saa olla mitään HTML muotoilua kuten <p> ja </p> tageja. Myös webbisivuja muokattaessa voi olla joskus kätevää jos voi muokata suoraan HTML koodia. Mistä HTML muotoilun sitten näkee? Kuvassa 15 on nuolella esitetty painike jota napsauttamalla editori vaihtaa tilaansa joko ns. editointitilan ja HTML tilan välillä:
Kuva 15. HTML tilaan siirtyminen. Kokeile muokata esim. Etusivu :a ja napsauttaa HTML tila päälle niin näet minkälaista HTML koodia editori tuottaa! Kuva 16. Etusivu :n HTML koodia. Lopuksi opimme siirtämään ns. liitetiedostoja (kuvia, pdf tiedostoja, yms.) palvelimelle ja linkittämään niihin (eli näyttämään kuvia, luomaan linkkejä kuviin / pdf - tiedostoihin / yms. ja luomaan sivuobjekteja). Napsauta siis Lähetä tiedostoja linkkiä!
Kuva 17. Tuo tiedostoja Tässä esimerkissä lähetämme palvelimelle kolme erilaista tiedostoa, kuvan (kuva.jpg), pdf tiedoston (ohje.pdf) ja mp3 tiedoston (musiikki.mp3). Käyttämälläni tietokoneella em. tiedostot löytyvät C:\tiedostot kansiosta. Napsautan siis Browse/Selaa painiketta ja avautuvasta ikkunasta siirryn C:\ tiedostot kansioon ja valitsen sieltä kuva.jpg tiedoston: Jos haluat lähettää yhden tiedoston kerrallaan palvelimelle, napsauta Lähetä tiedostot painiketta ja odota kunnes sivu on latautunut uudestaan. Jos haluat lähettää useamman kuin yhden tiedoston kerrallaan, napsauta Lisää uusi tiedosto painiketta ja valitse seuraava tiedosto kunnes haluamasi tiedostot on valittu. Napsauta lopuksi Lähetä tiedostot painiketta. Jos tiedostojen lähetys sujuu onnistuneesti, on näkymä kuvan mukainen: Kuva 18. Palvelimella olevat tiedostot. Tärkeää on huomata, että jokaisen tiedoston kohdalla on Tiedoston URL jota käytetään linkin luomisessa. Seuraavaksi luomme kuvalinkin eli valitse ja kopioi kuvan linkki leikepöydälle (kuvan linkki on esimerkissämme http://localhost/homepage/upload/kuva.jpg ). Jos haluat nähdä
liitetiedoston sisällön, napsauta liitetiedoston nimeä (esim. kuva.jpg) jolloin liitetiedoston sisältö avautuu uuteen ikkunaan. Kuva 19. Tiedoston valitseminen. Luomme nyt siis linkin juuri äsken siirtämääsi kuvaan (ja myöhemmin muihin tiedostoihin). Voit toki linkittää myös johonkin ulkopuoliseen, muualla Internet:ssä olevaan kuvaan. Napsauta nyt kuitenkin Muokkaa webbisivuja linkkiä. Luodaan uusi sivu jonka järjestysnumero on 10, linkkinimi on Linkkisivu ja sisältönä on aluksi yksi kuva. Kuva luodaan napsauttamalla editorissa olevaa - painiketta: Kuva 20. Kuvan lisääminen webbisivulle. Nyt avautuu Lisää kuva ikkuna johon syötetään kuvan URL osoite. Jos haluat nähdä miltä kuva näyttää tai varmistua, että osoite on oikea, voit napsauttaa Esikatselu painiketta jolloin
linkin osoittama kuva ladataan ikkunan alaosaan. Napsauta lopuksi Ok painiketta jolloin näet kuvan webbisivullasi. Kuva 21. Lisää kuva ikkuna. Voit muuttaa kuvan kokoa tarttumalla hiirellä kuvan reunoissa oleviin palikoihin ja raahaamalla em. palikoita pitäen hiiren vasemman painikkeen alhaalla: Kuva 22. Kuvan koon muuttaminen.
Muistaa napsauttaa lopuksi Tallenna perussivu painiketta tallentaaksesi juuri luoman webbisivun (jonka sisältönä on yksi kuva). Seuraavaksi muokkaamme samaa sivua ja lisäämme linkin musiikki.mp3 tiedostoon. Napsauta siis Muokkaa painiketta. Kirjoita kuvan alle teksti Kuuntele hyvää musiikkia!. Maalaa musiikkia kohta ja napsauta - painiketta. Syötä avautuvaan linkki-ikkunaan musiikki.mp3 tiedoston URL eli linkkiosoite joka löytyy Lähetä tiedostoja sivulta, esimerkissämme linkkiosoite on http://localhost/homepage/upload/musiikki.mp3. Napsauta lopuksi Ok painiketta luodaksesi linkin ja Päivitä perussivu painiketta päivittääksesi webbisivun. Napsauttamalla Näytä painiketta tulisi sinun nähdä seuraavanlainen sivu: Kuva 23. Linkkisivu webbisivu jossa on kuva ja linkki musiikkitiedostoon. Napsauttamalla musiikkia linkkiä selaimesi lataa musiikki.mp3 tiedoston ja aloittaa soittamaan sitä. Käyttämälläni tietokoneella musiikin toistaminen tapahtuu seuraavasti:
Kuva 24. Musiikin toistaminen. Vastaavalla tavalla voit luoda linkin myös muihin tiedostoihin kuten kuviin, pdf tiedostoihin, yms. Joskus on kuitenkin kätevää näyttää esim. pdf tiedoston sisältö webbisivun sisällä eikä pelkästään ulkoisena linkkinä. Tällöin täytyy käyttää ns. IFRAME tagia. Seuraavassa esimerkissämme muokkaamme em. sivun HTML koodia ja lisäämme OBJECT tagin joka näyttää sivun alareunassa (sivun sisällä) pdf tiedoston. Napsauta siis Muokkaa painiketta, sitten voitkin napsauttaa - painiketta siirtäksesi HTML tilaan joka näyttää kuvan 25 mukaiselta (kuvaan on jo lisätty alla oleva HTML koodi). Lisättävä HTML koodi: <iframe align="center" src="http://localhost/homepage/upload/ohje.pdf" width="100%" height="100%" /></iframe> Kuva 25. HTML koodin muokkaus. Siirry takaisin editori tilaan napsauttamalla samaa - painiketta. Näet nyt sivun alareunassa PDF tiedoston sisällön suoraan webbisivulla. Napsauta lopuksi Päivitä perussivu painiketta. Kuvassa 26 on esitetty miltä webbisivumme näyttää kun napsautat Näytä painiketta:
Kuva 26. Lopullinen webbisivu. Kun olet muokannut ja luonut tarpeeksi webbisivuja, on hyvä kirjautua ulos pääkäyttäjän sivuilta napsauttamalla (Ulos/sisään)kirjautuminen linkkiä ja linkin takaa löytyvää Uloskirjautuminen painiketta. Siirry lopuksi normaalikäyttäjien näkymään napsauttamalla Etusivulle linkkiä. Kuvissa 27, 28 ja 29 on esitelty luomamme sivut: Kuva 27. Sivu 2.
Kuva 28. Etusivu. Kuva 29. Linkkisivu.