Nettisivujen perusteet - työkaluna weebly.com. Heidi Cavén, 2016

Transkriptio

1 Nettisivujen perusteet - työkaluna weebly.com Heidi Cavén, 2016

2 SIVUSTON PERUSIDEA Sivuston suunnittelussa huomioitavia asioita: Domain-nimi (esim. 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

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 3

4 VERKKOTUNNUSTEN HINNAT eli suomenpäätteiset osoitteet (esim. 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 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: 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. 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

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 ( nimipalvelu.html) vuosikorvaus pelkästä nimipalvelusta on pieni. Esimerkkinä verkkosivusto 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 8

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

10 n.fi 10

11 CASE: Forssa Rotaryklubi toteutti sivunsa käyttäen Weeblyn palveluja. Weeblyltä ostettiin ainoastaan nimi, jonka vuosihinta n. 20 dollaria. Jos haluaa oman nimen esim. pitää hankkia myös nimipalvelinpalvelut sekä ostaa Weeblyltä starter-paketti Weeblyn maksut, kun on oma domainnimi olemassa Valitse alin -> 11

12 Perusweebly (ilmainen) + nimen osto» Perusweebly on siis ilmainen. Saat kaikki tarvittavat elementit käyttöösi.» Jos ostat pelkän nimen esim. org, kustannus on esim. kahden vuoden ostossa USD per vuosi.» Voit myös ostaa nimen 10 vuodeksi, joten maksat per vuosi USD 12

13 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

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. 14

15 Nimen rekisteröinti Weeblyssä

16 Sivujen suunnittelu, teko ja julkaiseminen» HCavén

17 Weebly uusi tili» mene osoitteeseen Klikkaa sign up eli luo itsellesi tili 17

18 Kirjautuminen Nimi Sähköposti Salasana Kirjaudu 18

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 19

20 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

21 Valitse sivustollesi teema Jotta pääset eteenpäin, sinun pitää valita teema. Valitse näistä aluksi mikä tahansa. Rotareilla on teemavaihtoehtoja valmiina - katso 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.

22 Seuraavaksi valitse sivustollesi nimi» Rotarien sivustoissa pitäisi näkyä aina sana Rotary esim. tai 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: Jos haluat myöhemmin muuttaa nimeä, se tehdään sivuston SETTINGS -kohdassa 22

23 Nimen valinta» Esimerkkinä tehty 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. 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

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. 24

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ä. 25

26 Hyväksy=keep tai peruuta=cancel 26

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ä: v=prneq2dk1by 27

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 28

29 Työkalut» Työkalut ovat vasemmalla esim. otsikko ja tekstit» muut mm. sivujen perustaminen, teeman valinta ym. ylhäällä 29

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. 30

31 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

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 32

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ä. 33

34 Sivuston muokkaus - sivuston nimeäminen» Vie hiiri sanan MY SITE päälle ja saat valikon, jossa voit joko lisätä tekstin tai logon 34

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 35

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

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. 37

38 Anna etusivullesi otsikko» Kirjoita haluamasi tervetulotoivotus/ sivun nimi 38

39 Väripohjan muuttaminen 39

40 Muuta tekstityyliä 40

41 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

42 Rotaryn käyttämät fontit 42

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 43

44 Muuta taustakuva 44

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

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, oikealle tai keskelle sekä lisätä sen ympärille tilaa 46

47 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

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. 48

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 49

50 Lisää sivuja ja niille alasivuja» Klikkaa ylhäältä välilehteä PAGES» klikkaa Pages PLUS merkkiä 50

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. 51

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 52

53 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

54 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

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. 55

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 56

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ä 57

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

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 59

60 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