Nettisivujen perusteet - työkaluna weebly.com Heidi Cavén, 2016
SIVUSTON PERUSIDEA Sivuston suunnittelussa huomioitavia asioita: 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. 2
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 3
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. 4
5
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. 6
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). 7
8
http://www.planeetta.net/kotisivut/hinnasto.html Jos teet sivut muualla, ostat.fi tunnuksen, riittää pelkkä nimipalvelu esim Planeetalta 9
www.domai n.fi 10
CASE: www.forssarotary.org Forssa Rotaryklubi toteutti sivunsa käyttäen Weeblyn palveluja. Weeblyltä ostettiin ainoastaan nimi, jonka vuosihinta n. 20 dollaria. 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 -> 11
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 12
Weeblyn starter -paketti 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. 13
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. 14
Nimen rekisteröinti Weeblyssä 1 2 3 15
Sivujen suunnittelu, teko ja julkaiseminen» HCavén
Weebly uusi tili» mene osoitteeseen www.weebly.com» Klikkaa sign up eli luo itsellesi tili 17
Kirjautuminen Nimi Sähköposti Salasana Kirjaudu 18
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 19
Valinta» Valitse joko Sivusto Blogi kauppa 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. 20
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 21 kuinka navigaatiolinkit sijoittuvat.
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 domainnimeksi. 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 22
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) 23
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. 24
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ä. 25
Hyväksy=keep tai peruuta=cancel 26
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 27
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 28
Työkalut» Työkalut ovat vasemmalla esim. otsikko ja tekstit» muut mm. sivujen perustaminen, teeman valinta ym. ylhäällä 29
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. 30
Työkalut» 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 31
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 32
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ä. 33
Sivuston muokkaus - sivuston nimeäminen» Vie hiiri sanan MY SITE päälle ja saat valikon, jossa voit joko lisätä tekstin tai logon 34
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 35
Lisää logo» Valitse kuva koneeltasi ja paina avaa - esimerkissä tuodaan rotaryratas 36
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. 37
Anna etusivullesi otsikko» Kirjoita haluamasi tervetulotoivotus/ sivun nimi 38
Väripohjan muuttaminen 39
Muuta tekstityyliä 40
Eri tekstityylien valinta 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 Sivun otsikko navigaatio etusivu alaotsikot Kappaleiden otsikot Kappaleiden tekstit linkit painikkeet 41
Rotaryn käyttämät fontit 42
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 43
Muuta taustakuva 44
Kuvan vaihto Valitse kuva Weeblyn kuvapankista tai tuo omalta koneelta. Muista tallettaa valinnan jälkeen 45
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, oikealle tai keskelle sekä lisätä sen ympärille tilaa 46
Tekstin lisääminen» 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. 47
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. 48
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 49
Lisää sivuja ja niille alasivuja» Klikkaa ylhäältä välilehteä PAGES» klikkaa Pages PLUS merkkiä 50
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 51
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 52
Uuden sivun asetukset» 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. 53
Alasivun teko» 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 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. 54
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. 55
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 56
» 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ä 57
Settings/SEO» SEO = jos laitat Google Analyticsin toimintaan, syötä koodi tähän 58
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 59
Settings - Blog» 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 60