Kyläsivujen InfoWeb-ohje

Transkriptio

1 Kyläsivujen InfoWeb-ohje Kirjoita internet-selaimesi osoitekenttään kyläsivujen hallintaosoite; -savo.fi/admin Saavut seuraavalle sivulle, johon kirjoitat käyttäjätunnuksesi ja salasanasi: Paina Kirjaudu sisään päästäksesi hallintaan.

2 Kirjauduttuasi sisään, saavut InfoWeb-työpöydälle, jonka näkymä on seuraava: Avaa sivuhakemisto kuvan osoittamasta paikasta, viemällä hiiri ensin Sivuhakemisto -valikon päälle, kun valikko aukeaa, valitse Avaa sivuhakemisto. Aukeaa näkymä, jossa vasemmalla näkyy sivuhakemisto, josta näet oman kyläsi sivujen rakennepuun:

3 Kun olet kirjautunut oman kyläsi tunnuksilla, näet vasemmalla hakemistopuussa vain oman kyläsi sivun (tässä kuvassa Esimerkkikylä). Painettuasi kylän nimeä, näet kyseisen sivun esikatselun oikealla. Sivun muokkaaminen Avaa haluamasi sivu vasemmalta hakemistopuusta klikkaamalla sitä hiirellä. Oikealle avautuvan esikatseluikkunan yläpuolella näet Muokkaa -napin. Päästäksesi muokkaamaan sivua, paina tätä nappia.

4 Aukeaa seuraava näkymä:

5 Päästäksemme lisäämään tekstiä ja kuvia sivuillemme, pitää sivuun lisätä moduuli. Tee näin painamalla kuvan osoittamaa nappia. Aukeaa seuraavanlainen ikkuna:

6 Valitse Editori ;

7 Moduulin nimeen voit laittaa moduulille otsikon, esim. Tekstiä ja kuvia, otsikko ei kuitenkaan ole pakollinen, sillä voit valita sen näkyvyyden alempaa. Mikäli valitset otsikon olevan näkyvissä, näyttää otsikko moduulissa seuraavalta:

8 Moduulin otsikon näkyväksi laittaminen ei kuitenkaan ole suositeltavaa, sillä editorilla saat tehtyä hienommankin otsikon. Seuraavassa kuvassa moduulin nimi ei ole näkyvissä, nimi on kuitenkin sama; Tekstiä ja kuvia :

9 Kuvan osoittamasta valikosta pääset muokkaamaan moduulin asetuksia milloin vain, mm. ottamaan otsikon pois näkyvistä niin kuin olen tässä kuvassa tehnyt.

10 Mikäli ylhäällä näkyvä työkaluvalikko ei ole näkyvissä, tulee se näkyviin klikattuasi hiirellä alempaa valkoista aluetta. Tälle alueelle alamme etusivuamme rakentaa.

11 Kirjoita sivulle otsikko / haluamaasi tekstiä, maalaa se ja muuta muotoilua. Kuvassa näkyvä teksti näyttää Heading 2 - otsikkomuotoilulla seuraavalta:

12 Tekstin lisääminen sivulle siis toimii jotakuinkin samoin kuin tekstinkäsittelyohjelmassa. Työkaluvalikko muistutta a paljon tekstinkäsittelyohjelmien valikkoja, ja toimiikin suurin piirtein samoin. Raaka ohjeistus työkaluvalikon toiminnoista:

13 Tallenna tallentaa sivun, jota muokkaat Kumoa peruu viimeisimmän tekemäsi muutoksen (esim. väärin mennyt muotoilu) Tee uudelleen tekee viimeisimmän KUMOAMASI muutoksen uudestaan Leikkaa leikkaa tekstiä / kuvia Kopioi kopioi tekstiä / kuvia Liitä liittää tekstiä / kuvia Liitä ilman muotoiluja liittää esim. Wordissa valmiiksi muotoillun tekstin ilman Wordin muotoiluja Kuvan lisääminen avaa kyläsi tiedostovaraston, jonne lataat sivuille haluamasi kuvat tietokoneeltasi Kuvan tietojen muuttaminen pääset muokkaamaan kuvan ominaisuuksia, kokoa, nimeä ym. File manager vie tiedostovarastoon Lisää taulukko lisää sivulle taulukon, painaessasi napin viereistä nuolta, tulee näkyviin valikko, josta voit valita heti taulukon leveyden ja korkeuden. Määritykset ovat muokattavissa jälkikäteen.

14 Lisää erikoismerkki avaa valikon, josta voit lisätä tekstiin erikoismerkkejä, esim. Poista muotoilua tekstistä poistaa muotoilun maalaamastasi tekstinpätkästä. Esim. Wordilla muotoillusta tekstistä. Sisennys siirtää valitsemaasi tekstiä oikealle siirtää valitsemaasi tekstiä vasemmalle Listan tekeminen valitse listan tyyli Lisää linkki voit lisätä linkin esimerkiksi kylän kesäteatterin sivuille Kuvan lisääminen sivulle Lisätäksesi kuvan sivulle, klikkaa kursori sivulla sille kohdalle johon kuvan haluat lisätä. Tässä tapauksessa lisään kuvan punaisella osoitettuun kohtaan. Päätettyäsi mihin kuvan tahdot lisätä, paina ylhäällä näkyvää kuvanappia. Aukeaa seuraava näkymä:

15 Kylän tunnuksilla vasemmalla olevassa kansiopuussa pitäisi näkyä pelkästään kylän nimellä oleva kansio. Klikkaa tätä kansiota, oikealle avautuu näkymä, josta näet mitä kaikkia tiedostoja olet tallentanut kyläsi tiedostovarastoon. Oikealla ei nyt näe mitään, lisätäänpä siis kuva. Kuvan optimaalinen leveys sivuille on 565 pikseliä, jolloin se täyttää sivun sen koko leveydeltä. Suuremman kuvan käyttäminen voi tehdä kuvasta rakeisen InfoWebin pienentäessä sitä. Lisäksi turhan suurten kuvien lataaminen kestää kauemmin niin sinulle, kuin myös sivuston katselijallekin. Paina ylhäältä Lisää tiedosto -nappia

16 Painamalla Selaa pääset valitsemaan lisättävän tiedoston / kuvan omalta tietokoneeltasi. Painettuasi Selaa aukeaa seuraava näkymä: Etsi haluamasi kuva koneeltasi, valitse se ja paina Avaa.

17 Tiedoston hakemistona lukee nyt tietokoneellasi oleva hakemisto-osoite. Paina seuraavaksi Lataa, jolloin kuva latautuu tiedostovarastoosi palvelimelle.

18 Kun kuvasi nimi näkyy Ladatut tiedostot kohdassa, kuva on latautunut oikein palvelimelle. Seuraavaksi voit sulkea Tiedoston lataus ikkunan painamalla Sulje, tai oikeassa ylänurkassa olevaa raksia.

19 Mikäli kuvasi ei vielä näy oikealla olevassa sisältöosiossa, paina vasemmalta kyläsi nimeä uudelleen, jolloin sisältöosio päivittyy ja tiedostosi tulee näkyviin. Kun lisäämäsi tiedosto näkyy, paina sitä kuvan osoittamalta kohdalta, jolloin sen tausta muuttuu tummaksi kuten kuvassa. Kun tiedosto on valittu, paina ylhäältä Tuo valittu sivulle. Tällöin kuva viimein latautuu sivulle sille kohdalle, johon sen alunperinkin halusimme.

20 Ja sinnehän se kuva toivottavasti ilmestyi. Tallennetaan nyt tekemämme muutokset painamalla disketin kuvaketta työkaluvalikosta. Kun sivu on tallentunut, työkaluvalikko menee piiloon ja voimme esikatsella sivuamme painamalla Esikatselu nappia.

21 Huomaa, että vasemmalla sivustopuussa sivun päällä näkyvä punainen pompula merkkaa sivun olevan vielä julkaisematon, tehden siitä vielä näkymättömän. Mikäli tahdomme julkaista sivun näkyviin, painamme yläreunasta Julkaise nappia.

22 Punainen pompula on kadonnut sivun päältä ja se näkyy myös esikatselussa linkkivalikossa. Sivumme on nyt siis julkaistu. Sivua voi palata muokkaamaan painamalla sitä vasemmalta sivuhakemistosta ja painamalla sen jälkeen oikealle avautuvasta näkymästä Muokkaa. Tällöin ohjel ma tekee edellisestä julkaistusta sivuversiosta uuden kopion luonnoksena. Uuteen luonnokseen tehdään tarvittavat muutokset, jonka jälkeen se tallennetaan ja julkaistaan. Vanhempi julkaisu poistuu aina pois ihmisten näkyvil tä uuden version julkaisun tapahtuessa.

23 Kun julkaisen tämän uuden luonnoksen:

24 Näin.

25 Taulukkojen ja palstojen käyttäminen sisällön asettelussa Tekstit ja kuvat on helppo asetella paikoilleen taulukoilla tai palstoituksella. Taulukkoon asetellessamme teemme yksinkertaisesti muokkaustilassa uuden taulukon: Valitse taulukollesi koko hiirellä. Kuvassa valitsen taulukon kooksi 2 x 2 (harmaat neliöt) ja klikkaan hiirellä. Tyhjä ja täysin muotoilematon taulukko tulee näkyviin seuraavanlaisena:

26 Leikataan nyt aiemmin lisäämämme kuva taulukon ensimmäiseen soluun (vasen ylhäällä). Klikkaa kuvaa hiirellä, jolloin sen reunat aktivoituvat.

27 Paina työkaluvalikosta saksien kuvaa (cut leikkaa). Mikäli ohjelma kysyy sinulta leikepöydän käytöstä, vastaa Salli käyttö. Kuva häviää näkyvistä ja on liitettävissä. Siirrä nyt kursorisi taulukon ensimmäiseen soluun ja klikkaa sitä, soluun syttyy vilkkuva osoitin.

28 Paina nyt ylhäältä Liitä paste. Kuva siirtyy haluamaasi soluun.

29 Voit nyt samalla menetelmällä leikata ja liittää tekstit esimerkiksi kuvan oikealla puolella olevaan soluun.

30 Mikäli nyt haluamme muuttaa solujen muotoilua, kokoa, yhdistellä niitä tai muuttaa taulukon rakennetta yleensä, painamme taulukon reunaviivasta hiiren oikealla napilla, jolloin aukeaa valikko:

31 Show/Hide Border piilottaa taulukon muokkaustilassa näkyvät reunat. Delete Table poistaa koko taulukon. Paina Table Properties päästäksesi taulukon ominaisuuksiin.

32 Table Properties välilehdessä muokkaamme koko taulukon kokoa. Height taulukon korkeus prosenteissa tai pikseleissä. Width taulukon leveys prosenteissa tai pikseleissä. Ylläolevassa kuvassa olen laittanut oman taulukkoni leveydeksi ( Width ) 100%, jolloin se täyttää koko sivualueen. Korkeutta ( Height ) ei ole pakko määritellä, sillä taulukko muuttaa itse korkeuttaan tarvittavan verran kuvia tai tekstiä lisättäessä. On myös tapauksia, jolloin saatat tahtoa määritellä taulukon korkeuden itse.

33 Table Design välilehdessä voimme muuttaa taulukon rakennetta, lisätä rivejä, yhdistellä soluja ym. Punaisella korostettu alue näyttää taulukkomme tämänhetkisen rakenteen. Ne neljä solua jotka alun perin taulukkoa tehdessämme valitsimme. Columns pystyrivit Rows vaakarivit Plus- ja miinusmerkit luonnollisesti joko lisäävät tai poistavat taulukkoomme rivejä. Span yhdistää vierekkäiset solut. Esim. tässä tapauksessa Column Span plussan painaminen tekisi näin:

34 Kaksi ylintä vierekkäistä solua on yhdistetty yhdeksi leveäksi soluksi.

35 Cell Properties välilehdessä pääsemme muokkaamaan solujen leveyttä, korkeutta ja muotoiluja. Content Alignment tarkoittaa sitä, miten solun sisältö tasataan sen reunoihin nähden. Jos valitsen punaisen rastin sijaan esim. keskellä olevan keskitetyn valinnan ( ), sisältö keskittyy keskelle solua, niin pysty- kuin vaakasuunnassa. Soluille on myös omat Height ja Width säätönsä, ja ne määrittelevät solun leveyden ja korkeuden taulukost a. Jos esim. vaihdamme alarivin vasemmanpuoleisen solun leveydeksi 30%, se on 30% koko taulukon leveydestä, tehden oikeanpuoleisesta solusta 70% taulukon leveydestä.

36 Valitaan muokattava solu hiirellä, jolloin se muuttuu harmaaksi. Tekemämme muutokset vaikuttavat pelkästään harmaana näkyvään soluun. HUOM. Älä laita solun leveyttä tai korkeutta määritellessäsi numeroiden ja prosenttimerkin väliin välilyöntiä, vaan kirjoita kaikki yhteen: 30%.

37 Ylimmän, yhdistetyn solun leveys on 100 %, sillä se on koko taulukon levyinen yhdistettyämme kaksi ylintä solua yhdeksi. Alempiin soluihin voisi nyt esimerkiksi laittaa vasemmalle jonkin korkean pitkulaisen kuvan, jolloin solun korkeus säätyy automaattisesti. Vasempaan soluun taas voisi tehtailla jonkin kylästä kertovan jutun, johon vasemmalla oleva kuva ehkä liittyy. Näin siis tapahtuu sisällön hallinta taulukoilla.