Nettisivujen perusteet - työkaluna weebly.com

Heidi Cavén, 2016

2

Sivuston suunnittelussa huomioitavia asioita:

SIVUSTON PERUSIDEA

• Domain-nimi (esim. www.rotary1410.org) • Nimipalvelin (ohjaa kävijän oikealle sivulle) • Sivuston rakentaminen/rakennuttaminen • Helppo päivitettävyys • Maksut • Navigaatiorakenne (max 6-8 pääsivua) • Kuvien ym. muiden asiakirjojen/esitysten käyttö • Käyttäjäystävällisyys • Graafiset ohjeet • jne. jne.

3

Domain-nimi• jokaisella sivustolla on oltava nimi =verkkotunnus, jonka kävijä kirjoittaa

selaimeensa. • Verkkotunnuksia eli domain-nimiä käytetään osoitteina internetin tärkeimmissä

palveluissa, kuten verkkosivujen ja sähköpostien osoitteissa. Viestintävirasto vastaa .fi-päätteisten osoitteiden hallinnoinnista ja myöntää päätettä edeltävän sanan eli fi-verkkotunnuksen.

• Fi-verkkotunnus antaa mahdollisuuden käyttää omaa yksilöllistä nimeä sähköpostin ja www-sivujen osoitteena. Tunnukset myöntää Viestintävirasto, mutta tunnuksia voit hankkia myös yli tuhannen palveluntarjoajan kautta.

• Lisäksi saat palveluntarjoajalta verkkotunnuksesi edellyttämät nimipalvelimet, kotisivutilan ja sähköpostipalvelun fi-verkkotunnuksen hyödyntämiseen.

• Verkkotunnukset muilla lopuilla kuin .fi voi hankkia netin nimitarjoajien kautta TAI esim nettisivuja tekevän palveluntarjoajan kautta

• esimerkkeinä Weebly (käyttäjänä mm. Forssan Rotaryklubi), Wordpress (Innerwheel Salo, piirin 1410 sivut), jne

4

VERKKOTUNNUSTEN HINNAT

• www.domain.fi eli suomenpäätteiset osoitteet (esim. www.rotary.fi)

• Hinnasto – Uusi verkkotunnus: 12 € / yksi vuosi, 33 € / kolme vuotta tai 50 € / viisi vuotta

(alv 0 %) – Todistus verkkotunnuksen haltijasta eKirjeenä: 5 € (alv 0 %) – Todistus verkkotunnuksen haltijasta käsin allekirjoitettuna: 10 € (alv 0 %) – Verkkotunnuksen uusiminen: 12 € / yksi vuosi, 33 € / kolme vuotta tai 50 € / viisi

vuotta (alv 0 %) – Maksutta voi vaihtaa palveluntarjoajaa tai tehdä nimipalvelinmuutoksen.

5

6

Verkkotunnuksen eli nimen hankinta

• Nimen hankkiminen on helppoa, mutta se ei riitä • Tarvitset myös tahon, joka koodaa nimesi/sivustosi selainten löydettäväksi • Jos haluat ostaa nimen: www.rotary1410.fi, saat sen Ficoralta eli

viestintävirastosta. Pelkkä nimi on siis pelkkä nimi - siihen ei vielä sisälly sivuja, niiden suunnittelua/päivitystä eikä sivujen vaatimaa tilaa

• Jos haluat eri päätteisen verkkotunnuksen esim. www.rotary1410.org, sen saa monelta eri myyjältä. Tässä kannattaa miettiä eri vaihtoehtoja. Esim. Weebly tarjoaa mahdollisuutta tehdä sivut heidän ohjelmallaan, saada siihen vaadittavan tilan, ostaa nimen ja mikäli sivusto vaatii erityisominaisuuksia, Weeblyltä voi myös hankkia maksullisen palvelun.

7

Nimipalvelin

• Kun hankit verkkotunnuksen osoittamaan jo olemassa olevaan sivustoon tai varaat sen odottamaan myöhempää käyttöä, tarvitset verkkotunnuksen lisäksi Nimipalvelu -palvelun.

• Verkkotunnuksella tulee aina olla nimipalvelut (DNS). Erillistä nimipalvelua ei tarvita, jos verkkotunnuksella on käytössä nimipalvelimet sisältävä palvelu

• esimerkkinä Planeetta (http://www.planeetta.net/verkkotunnus/nimipalvelu.html)

• vuosikorvaus pelkästä nimipalvelusta on pieni. Esimerkkinä verkkosivusto www.nopsajalka.fi. Sivu on tehty Weeblyllä-> koska haluttiin käyttää omaa suomipäätettä .fi, Weeblyltä hankittiin starter-paketti, Planeetalta nimipalvelin. Nyt kävijät kirjoittavat osoitteen, mutta eivät tiedä, missä itse sivusto on tehty (millä ei periaatteessa olekaan mitään merkitystä, kunhan sivusto toimii ja päivitys on helppoa).

8

9

Jos teet sivut muualla, ostat .fi tunnuksen, riittää pelkkä nimipalvelu esim Planeetalta

http://www.planeetta.net/kotisivut/hinnasto.html

10

www.domain.fi

11

• Jos haluaa oman nimen esim. www.forssarotary.fi, pitää hankkia myös nimipalvelinpalvelut sekä ostaa Weeblyltä starter-paketti

• Weeblyn maksut, kun on oma domainnimi olemassa

• Valitse alin ->

CASE: www.forssarotary.org

• Forssa Rotaryklubi toteutti sivunsa käyttäen Weeblyn palveluja. • Weeblyltä ostettiin ainoastaan nimi, jonka vuosihinta n. 20

dollaria.

12

Perusweebly (ilmainen) + nimen osto

» Perusweebly on siis ilmainen. Saat kaikki tarvittavat elementit käyttöösi.

» Jos ostat pelkän nimen esim. www.rotarytemplate.org, kustannus on esim. kahden vuoden ostossa 16.95 USD per vuosi.

» Voit myös ostaa nimen 10 vuodeksi, joten maksat per vuosi 12.57 USD

13

Jos haluat pitää esim. .fi -nimen, tarvitset starter -paketin.

Kannattaa ottaa kahdeksi vuodeksi – tulee edullisemmaksi.

Tämän lisäksi tarvitset vielä nimipalvelin palvelut esim. Planeetalta.

Weeblyn starter -paketti

14

Pelkän domainnimen osto Weeblyssä

» Jos haluat ostaa pelkän nimen, pitää sinun poistua sivun muokkaustilasta painalmalla ISOA W-kirjainta jolloin siirryt aloitus eli kirjautumistilaan

» Seuraavassa diassa kuvaohjeet

» 1 Klikkaa kohtaa DOMAINS

» 2 Klikkaa kohtaa REGISTER

» 3 lisää nimi, jonka haluat rekisteröidä.

» Järjestelmä tarkistaa saatavuuden ja jos kaikki ok, sinut ohjataan maksusivulle.

15

Nimen rekisteröinti Weeblyssä

1

2

3

Sivujen suunnittelu, teko ja julkaiseminen

» HCavén

17

Weebly – uusi tili

» mene osoitteeseen www.weebly.com

» Klikkaa sign up eli luo itsellesi tili

18

Nimi

Sähköposti

Salasana

Kirjaudu

Kirjautuminen

19

Sivun julkaisun tarkistus

» Tässä vaiheessa sivusto tarkistaa, että olet oikealla asialla eli et ole robotti tai muu automatisoitu sivusto yrittäen muodostaa tunnuksia.

» kirjoita sanat kuvasta täsmälleen samoin tavoin laatikkoon

20

Kun perustat nettisivuja, voit tehdä ne joko blogiperustaiseksi tai kauppasivustoksi eli myydä tuotteita.

Rotarien tarkoituksena on perustaa Sivusto, johon voi lisätä halutessaan esim. blogin.

Valinta

» Valitse joko – Sivusto – Blogi – kauppa

21

Valitse sivustollesi teema

Jotta pääset eteenpäin, sinun pitää valita teema. Valitse näistä aluksi mikä tahansa. Rotareilla on teemavaihtoehtoja valmiina - katso www.rotary1410.fi sivuston blogista - mikäli haluat käyttää jotain näistä, laita viestiä heidicaven@gmail.com.

Teeman voi vaihtaa myöhemmin tai sitä voi itse säätää haluamallaan tavalla esim. värien suhteen. Kiinnitä huomiota teeman valinnassa siihen kuinka navigaatiolinkit sijoittuvat.

22

Seuraavaksi valitse sivustollesi nimi» Rotarien sivustoissa pitäisi näkyä aina sana Rotary esim.

www.forssarotary.org tai www.raisiojokilaaksorotary.org.

» Käytä tässä samaa nimeä kuin olet suunnitellut domain-nimeksi. Kun käytät tätä perusversiota, ennen nimen hankintaa sivustosi näkyy nimenä esim: www.forssarotary.weebly.com

Jos haluat myöhemmin muuttaa nimeä, se tehdään sivuston SETTINGS -kohdassa

23

Nimen valinta

» Esimerkkinä tehty www.heidinrotaryklubi.weebly.com

» Nimen voi ostaa myöhemmin, jos haluaa (kohta kaksi:rekisteröi uusi domainnimi - valitse

» heidinrotaryklubi.org - vie maksusivulle - huom! katso ohjeet dioista 11-15)

» Tai jos on olemassa jo oma nimi esim. www.heidinrotaryklubi.fi,kohdassa kolme Connect voit kirjoittaa sen tähän (jos käytössä on esim .fi –päätteinen nimi, pitää hankkia myös nimipalvelinpalvelut)

24

Kirjautumisen jälkeinen näkymä

Uudelle käyttäjälle sivusto aukeaa suoraan valittuun teemaan. Seuraavan kerran kun kirjaudut, näkymä on tämä, ja klikkaamalla EDIT SITE pääset muokkaamaan sivustoa.

25

Näkymän valinta» Ennen varsinaista sivuston rakentamista ohjelma kysyy vielä,

millaisen näkymän haluat sivullesi. Alla olevista vaihtoehdoista näet, miten tekstit ja kuvat sijoittuvat valitussa näkymässä. Valitse haluamasi näkymä klikkaamalla sitä.

26

Hyväksy=keep tai peruuta=cancel

27

Työskentelynäkymä - Miten päästään liikkeelle?

» Kun olet valinnut teeman ja näkymän, aukeaa sinulle varsinainen sivu

» Vasemmalla näkyy työkalut - oikealla miltä sivusi näyttää

» Mikäli haluat katsoa englanninkielisen videon sivuston käytöstä, klikkaa tätä linkkiä: https://www.youtube.com/watch?v=PRneq2dK1bY

28

Yläosan navigaatiolinkit

» Ylhäällä on tärkeät navigaatiolinkit eli BUILD=rakenna, PAGES=lisää/hallinnoi sivuja, THEME=teeman valinta/vaihto, STORE=kaupallinen osuus, SETTINGS=asetukset.

» Viimeinen ikoni näyttää miltä sivusto näyttää tietokoneella/mobiililaitteessa

29

Työkalut

» Työkalut ovat vasemmalla esim. otsikko ja tekstit

» muut mm. sivujen perustaminen, teeman valinta ym. ylhäällä

30

Työkalujen esittely

» Työkalujen käyttö on helppoa - raahaat vaan hiirellä ne siihen kohtaan sivua, johon kyseisen elementin haluat.

» Esimerkiksi raahatessasi kuvatyökalun kohdalleen, näytölle tulee SININEN VIIVA osoittamaan kohtaa johon kuva sijoittuu. Viiva voi olla kuvaelementin alapuolella koko alueen pituinen tai voit laittaa kuvan esim. tekstin viereen, jolloin viiva näkyy pystysuorana elementin reunassa. Kiinnitä huomiota viivaan, jotta saat elementin omalle paikalleen.

» kun olet laittanut tekstit ja kuvat paikalleen, pitää sivu julkaista oranssista PUBLISH-painikkeesta yläkulmasta, jotta muutkin näkevät työsi. Tästä lisää myöhemmin.

31

» T = otsikko

» Text = tekstikenttä

» Image = kuvan lisäys

» Gallery = useamman kuvan galleria

» Slideshow = esitys

» Map = esim google-kartta

» Contact form = yhteydenottokaavake

» Newsletter Form = tällä voit ottaa uutiskirjeen tilauksen (jos sellainen on)

» Button = nappi, jota painamalla voit ohjata käyttäjää eteenpäin

» Embed Code = sisällytä koodi, esim Facebook-feed

Työkalut

32

Työkalut 2

» Divider = elementtien väliin tuleva viiva

» Spacer = saat tyhjää tilaa

» elementit joissa salama = kuuluvat maksulliseen ohjelmaan

» Document = asiakirjan liitäntä, esim pdf-ohje, jonka voi ladata omalle koneelle

» Youtube = videolinkki

» Flash = flashlinkki

» File = Voit ladata tiedoston muiden ladattavaksi

» Commerce osaston elementit, mikäli myyt jotain

33

Elementit käyttöön

» Parhaiten opit käyttämään eri elementtejä kokeilemalla niitä sivuille.

» Eri elementeistä vielä lisäohjeita myöhemmin, mm. otsikon, tekstin ja kuvan lisäämisestä.

34

Sivuston muokkaus - sivuston nimeäminen

» Vie hiiri sanan MY SITE päälle ja saat valikon, jossa voit joko lisätä tekstin tai logon

35

Logon lisääminen

» Klikkaa kohtaa logo ja seuraavaksi aukeaa ikkuna, jossa voit tuoda omalta koneelta tekemäsi logon.

» Kun olet valinnut tuotavan kuvan, paina vihreätä palkkia upload a photo…

» ks. seur. dia

36

Lisää logo

» Valitse kuva koneeltasi ja paina avaa - esimerkissä tuodaan rotaryratas

37

Logon tuominen sivulle

» Tuonnin jälkeen kuva asettuu aloilleen. Vie hiiri logon päälle, valitse EDIT ja voit vielä muokata sitä esim vaihtamalla kuvan, rajaamalla, kierittämällä, muuttamalla läpinäkyvyyttä, lisäämällä efektejä jne.

38

Anna etusivullesi otsikko

» Kirjoita haluamasi tervetulotoivotus/ sivun nimi

39

Väripohjan muuttaminen

40

Muuta tekstityyliä

41

etusivu

navigaatio

alaotsikot

Sivun otsikko

Kappaleiden otsikotKappaleiden tekstitlinkit

painikkeet

Font styles eli eri tekstityyppien valinta sivustolle. Rotaryn suositus tekstifonteista on tuotu kuvana graafisesta oheistuksesta seuraavalle sivulle. Huom. vasemmalla on maksulliset fontit, oikealla ilmaiset. Käytä Open Sans Condensed

Eri tekstityylien valinta

42

Rotaryn käyttämät fontit

43

Valitse fonttityylisi

» Mikäli haluat vaihtaa fontteja,valitse joka kohdassa itsellesi sopivin tyyli

» Voit muuttaa myös fontin kokoa

» Paluu aina otsikon CHANGE FONT takaisin päin nuolesta

Open Sans

44

Muuta taustakuva

45

Kuvan vaihto

Valitse kuva Weeblyn kuvapankista tai tuo omalta koneelta. Muista tallettaa valinnan jälkeen

46

Tuo kuva sivulle

» Kun tuot koneeltasi kuvan sivulle, olisi hyvä valmistella kuvat etukäteen siten, että ne ovat webresoluutioisia ja pienikokoisia. Suuret kuvat vievät turhaan tilaa ja latautuvat hitaasti.

» Tuotua kuvaa voi muuttaa, joko korvaamalla tai muokkaamalla kuvaa. Voit myös lisätä siihen linkityksen eli klikkaamalla kuvaa aukeaa eri sivu. Voit keskittää kuvan vasemmalle, oikealletai keskelle sekä lisätä sen ympärilletilaa

47

» Raahaa työkaluista tekstielementti haluamasi kohtaan sivulle, kirjoita teksti ja homma valmis.

» Tuo vielä tekstielementin yläpuolelle otsikkoelementti.

» Jos tuot paljon eri tekstejä, esim eri ajankohtaisia tapahtumia, voit lisätä DIVIDER eli jako elementin välille. Tämä tuo ohuen viivan eri elementtien väliin helpottaen niiden sisällön haivannollistamista.

Tekstin lisääminen

48

Julkaiseminen

» Kun olet saanut kaikki valmiiksi, paina PUBLISH eli julkaise.

» Jos haluat katsoa, miltä sivusi näyttää netissä, klikkaa sinistä osoitetta ja sinulle aukeaa uusi sivu juuri julkaistun sisällön kanssa

» Julkaisun jälkeen ohjelma ehdottaa sinulle vielä vihjeitä, nimen ostoa jne, mutta voit sulkea tämän ikkunan oikean yläreunan rastista.

49

Elementtien poistaminen yläkulman rastista» Jos olet tuonut jonkin teksti- tai kuvaelementin etkä

haluakaan pitää sitä, saat koko elementin poistettua painamalla elementin yläkulman rastista

50

» Klikkaa ylhäältä välilehteä PAGES

» klikkaa Pages PLUS merkkiä

Lisää sivuja ja niille alasivuja

51

Sivun lisääminen

» Valitse minkä sivun haluat lisätä

» Tavallisen sivun

» Blogisivun

» kauppasivun

» Tai linkittää tämän sivunimen alle aukeavaksi ulkopuolisen sivun esim. www.rotary1410.fi

52

Uusi sivu

» Anna sivulle nimi kohtaan NEW PAGE ja MUISTA tallettaa=SAVE heti ylhäällä. Usein talletus unohtuu, kun aloittaa sivumääritykset ja kaikki työ menee hukkaan

» Valitse miltä sivu näyttää kohdasta HEADER TYPE

» jos haluat sivun isolla aloituskuvalla, valitse = Tall header

» Pienemmällä aloituskuvalla = Short Header

» Ei kuvaa lainkaa = no header

» Aloitussivu = Landing page

53

» Visibility = valitse julkinen = public (muut vaihtoehdot vaativat maksullisen version).

» Seuraava välilehti Advanced = sivukohtaiset asetukset

» page title = anna sivulle otsikko, joka näkyy selaimessa

» page description = kuvaile sivun sisältöä

» Meta keywords = hakusanoja, joilla sivustoa voitaisiin etsiä esim. Rotary, klubinnimi, paikkakunta jne. Erottele pilkulla.

» Footer code, header code = voit lisätä esim laskurin.

» Jos et halua hakukoneiden löytävän tätä sivua, rastita viimeinen kohta.

Uuden sivun asetukset

54

» Alasivu tehdään samoin kuin pääsivukin, tässä mallina Toimintasivu

» Kun sivu on valmis, raahaa se listalla sen sivun alle, jossa haluat alasivun olevan.

» Sivu jää alusta hiukan auki = alasivun merkki

» Voit yleensäkin vaihtaa sivujärjestystä raahaamalla sivut haluamaasi järjestykseen

» Palaa rakenna BUILD -sivulle, jossa näet viemällä hiiren pääsivun päälle ja alasivu aukeaa

Alasivun teko

raahaaminen tarkoittaa hiiren vasemman korvan alhaalla pitoa siirron ajan eli mene sivun nimen päälle, klikkaa hiiren vasenta korvaa, pidä alhaalla ja siirrä sivu kohdalleen. Lopuksi päästä irti vasemmasta korvasta.

55

SETTINGS - General

» Voit määritellä koko sivustoa koskevia lisäasetuksia ylänavigaatiosta kohdasta settings

» Vasemmassa valikkoreunassa on eri vaihtoehtoja.

» Kun lisäät esim sivun otsikon, muista tallettaa se rivin lopussa.

56

Settings - General - Sivuston nimi

» Lisää sivuston otsikko kohdassa SETTINGS, Site Title.

» Sivustoa muokatessa helpottaa oikean sivuston valinta (mikäli hallitset useita sivuja)

» Muista painaa SAVE eli talleta

57

» Yleissivun alaosa:

» muuta päiväys haluamaasi muotoon, valitse aikamuoto 12/24h

» Klikkaa Time zone kohtaa, alle tulee hakukenttä ja kirjoita Tallinn (sama aika kuin meillä UTC +2:00)

» Jos joskus haluat poistaa sivusi näkyvistä, alin un-publish auttaa tässä

58

» SEO = jos laitat Google Analyticsin toimintaan, syötä koodi tähän

Settings/SEO

59

Settings - Editors - päivittäjäoikeudet» Kutsu täällä lisää päivittäjiä sivuston

ylläpitoon. Lisää ADD EDITORS.

» Ilmaisessa versiossa kaikilla on ADMIN eli pääkäyttäjäoikeudet, joten huolehdi että päivittäjät osaavat hommansa

» Lisää sähköpostiosoite ja lisää haluamasi teksti esim. Tervetuloa päivittämään klubin nettisivuja

» Lopuksi paina SAVE EDITOR sivun alareunasta

60

» Blogisivun voit lisätä joko PAGES = Sivut kohdasta tai Settings - Blog

» Blogi on hyvä tapa pitää jäsenistö tietoisena ajankohtaisista uutisista, tapahtumista ym. Blogiin saat enemmän tekstiä kuin esim Facebook-sivuille. Voit jakaa esim. blogikirjoituksen Facebooksivuilla ja saada laajempaa huomiota kirjoituksellesi

Settings - Blog