Lataa kurssimoniste - Kotisivut helposti

Eija Terävä
Hiiden Opisto
Kotisivut kätevästi Weebly-ohjelmalla
30.3.2015
Verkkokirjoittaminen
Hyvää, ytimekästä suomenkieltä
Verkkotekstissä ei kannata laverrella ja kikkailla runsailla adjektiiveilla. Asia
kannattaa tiivistää ja kertoa ytimekkäästi. Käytä kirjoittaessasi hyvää
suomenkieltä. Murresanojen käyttöä tulee välttää, koska kaikki eivät niitä
ymmärrä.
Verkossa sivun sisältö kerrotaan ytimekkäissä otsikoissa
Verkkokirjoittaminen on lyhyttä ja ytimekästä, jossa otsikointi on tärkeässä asemassa. Kappaleet kannattaa
otsikoida, jotta lukija pääsee nopeasti sivun sisältöön kiinni. Selailijan mielenkiinto herpaantuu, jos hän ei
löydä heti etsimäänsä.
Kuvat ja multimedia tekstin tukena
Selailijan mielenkiinto on pidettävä yllä, jottei hän poistu
sivulta. Viestin perillemenoa on pyrittävä helpottamaan kuvilla
ja kaavioilla, äänellä tai videoilla. Vuorovaikutteisuus on
tärkeää varsinkin opetussivustoilla.
1
Eija Terävä
Hiiden Opisto
Kotisivut kätevästi Weebly-ohjelmalla
30.3.2015
Kotisivujen valmistus Weebly-palvelussa
Weebly-etusivu: http://www.weebly.com/
Weebly-kirjautumissivu: https://www.weebly.com/weebly/login.php
 Weebly toimii suoraan internetselaimella – ei tarvita ohjelman asennusta (tietokone)
 iPad:iin saatavana oma sovellus App Storesta
 voi kirjatua valmiilla Google tai Facebook-tunnuksilla
Vaihtoehdot: Vertaa eri vaihtoehtoja
Palvelun tyyppi
Sisältö
Free
-Ei sisällä alla listattuja
ominaisuuksia
-osoite muotoa:
sivustonnimi.weebly.com
Starter
-Oma verkko-osoite (Domain)
-Kävijätilastot
-Muokattava alatunniste (Footer)
-Weebly-linkki pois
alatunnisteesta
-Oma Favicon
-Kauppa 10 tuotetta
Pro
Edellisten lisäksi:
-Vaihtuva kuvaesitys
ylätunnisteeseen (Header)
-Videon ja musiikin upotus
-Salasanalla suojattu
sivusto/yksittäinen sivu
-Sivuston sisäinen hakutoiminto
-Kauppa 25 tuotetta
Business
Edellisten lisäksi:
-SSL-suojaus
-Kauppa rajattomasti tuotteita
Hinta
0$
3.29 $ / kk (3€)
6.63$ / kk (6,10€)
19.54 $ / kk (18 €)
Kuvagallerioita:
http://www.pixel77.com/ (Vektorikuvia)
http://morguefile.com/
Google kuvahaun lisäasetukset
Flickr Creative Commons
Wikimedia Commons
https://unsplash.com/
http://picjumbo.com/
http://www.freeimages.com/ (vaatii palveluun kirjautumisen)
http://pixabay.com/fi/
http://morguefile.com/
http://viintage.com/
2
Eija Terävä
Hiiden Opisto
Kotisivut kätevästi Weebly-ohjelmalla
30.3.2015
Internet-näkymä ja mobiilinäkymä (SETTINGS-valikko)
Desktop, Mobile: voi esikatsella, miltä sisältö näyttää tietokoneella ja mobiililaitteella.
Mobiilikäyttäjän on mahdollista valita sivustolle saavuttuaan kumpaa näkymää käyttää.
SETTINGSMobile
Ulkoasu (DESIGN-valikko)






valmiit teemat: Change Theme
fonttiasetusten muokkausmahdollisuus: Change Fonts
hakukenttä: Seach Box (vain Pro)
sosiaalisen mediean painikkeet: Social Icons (on/off)
puhelinnumero: Phone Number tai muuta tekstiä
(on/off)
HTML/CSS-koodin muokkaus:
muutokset HTML- ja CSS-koodissa näkyvät heti
esikatselussa
Kauppa (STORE-valikko)





STORE (kauppa): asetukset
määritetään uusi sivu kauppasivuksi: PAGESAdd PageStore Page
Starter 10 tuotetta
Pro 25 tuotetta
Business rajoittamaton määrä tuotteita
MAKSUTAVAT:
3
Eija Terävä
Hiiden Opisto
Kotisivut kätevästi Weebly-ohjelmalla
30.3.2015
PALVELU SISÄLTÄÄ:
Webbihotelli (Hosting)
 palvelintilaa kotisivujen tiedostoille
 tukipalvelu: sähköpostilla
Nettipäiväkirja (Blogging)
 Sivua lisättäessä valitaan sivutyypiksi Blog Page
Videoiden upotus ja musiikin (HD-players)
 Vain pro
 Videon (Vimeo, Youtube) ja musiikin toisto suoraan omalta kotisivulta
Lomake (Forms)
 Yhteydenottolomake
 lomakkeen tiedot tulevat sähköpostiin
Verkkotunnus (domain)
 ilmainen: www.kotisivunnimi.weebly.com
 maksullinen: .com, .net, .org (helppo määrittää)
 maksullinen: oman verkkotunnuksen yhdistäminen (tehtävä muutoksia oman verkkotunnuksen
nimipalveluihin)
Kävijätilasto (Stats)
 maksullinen
 millä sivulla käyty, mitä hakusanaa käytetty (maksullisessa palvelussa monipuolisempi tilastointi)
Ei mainoksia (No-ads)
 ei häiritseviä mainoksia
 ilmaisessa palvelussa näkyy Weebly-linkki, jonka saa pois maksulisessa palvelussa
Hakukoneoptimointi (Search Engine Optimized)=toimet, jotta hakukoneet löytävät sivustosi
mahdollisimman pian
 sivukartat
 uuden sisällön liittäminen hakuoptimointiin
 oikeaoppinen HTML
 metatiedot
 mahdollisuus myös itse määrittää sivukohtaiset määritykset: PAGESAdvanced Settings
 koko sivuston metatiedot ja Google Webmaster Tools-koodi, jonka avulla ilmoitetaan sivusto
Googlen hakukoneelle
Salasanalla suojatut sivustot/sivut (Password-protected pages)
 maksullinen: sivustolle tai tietylle sivulle kirjautumiseen vaaditaan salasana
HTML- ja CSS-koodin muokkausmahdollisuus (Full HTML/CSS Control)
 muutokset HTML- ja CSS-koodissa näkyvät heti esikatselussa
4
Eija Terävä
Hiiden Opisto
Kotisivut kätevästi Weebly-ohjelmalla
30.3.2015
SIVUSTON PERUSTAMINEN
1. SITES – valikko: Add Site (luo verkkosivusto)
2. Valitse sivuston tyyppi:
 Perinteiset kotisivut
 Blogisivusto
 Verkkokauppa
3. Valitse sivuston ulkoasu: voi tehdä myös myöhemmin
 Voit suodattaa sivustomalleja tyylin ja värin perusteella
4. Verkko-osoitteen määrittäminen:
 ilmainen: www.kotisivunnimi.weebly.com
 maksullinen: www.kotisivunnimi.com (.net tai .org)
 maksullinen: oma olemassa oleva verkko-osoite
Kotisivun nimi



Off=ei tekstiä
Text=tekstimuotoinen
Logo= yrityksen logo (kuva)
Sosiaalisen median painikkeet= Social icons
Add text= voi lisätä esim. puhelinumeron
Facebook, Twitter, LinkedIn, sähköpostipainikkeet
5
Eija Terävä
Hiiden Opisto
Kotisivut kätevästi Weebly-ohjelmalla
30.3.2015
Sijaitsevat oletusarvoisesti ylätunnisteessa. Voi ruksata pois ja ottaa päälle uudestaan DESIGN-valikosta.
Sosiaalisen median painikkeet on myös mahdollista sijoittaa mille tahansa sivulle elementtinä BUILDvalikossa.
Sivujen lisäys ja sisällön suunnittelu: PAGES
Add Page = Lisää sivu




Tavallinen verkkosivu (Standard Page)
Nettipäiväkirja eli blogi (Blog Page)
Kauppa (Store Page)
Ulkoinen linkki (External Link)= linkki toiselle sivustolle
Alisivuksi määrittäminenRaahaa sivua listassa oikealle
Muokkaustila (Build editor)

sisältö raahaataan hiirellä sivulle
6
Eija Terävä
Hiiden Opisto
Kotisivut kätevästi Weebly-ohjelmalla
30.3.2015
PERUSELEMENTIT (BASIC)








Otsikko (TITLE)
Kappale (TEXT)
Kuva (IMAGE)
Kuvagalleria (GALLERY)
Diaesitys (SLIDESHOW)
Kartta (MAP)
Yhteydenottolomake (CONTACT FORM)
Upotetty koodi (EMBED CODE)
RAKENNE (STRUCTURE)




Viiva (DIVIDER)
Tyhjä tila (SPACER)
Hakukenttä (SEARCH BOX, Pro)
Painike (BUTTON): painikkeeseen voi
liittää esim. liitetiedoston tai
siirtymisen toiselle sivustolle (Lue
lisää..)
MEDIA






HD-video (Pro)
Äänitiedosto ja soitin (AUDIO, Pro)
Tiedosto (DOCUMENT)
Youtube-video (YOUTUBE)
Flash-esitys, .swf-tiedosto (FLASH)
Tiedosto, sivulle upotettu (FILE)
KAUPPA (COMMERCE)


Tuote (PRODUCT)
GOOGLE ADSENSE
7
Eija Terävä
Hiiden Opisto
Kotisivut kätevästi Weebly-ohjelmalla
30.3.2015
MUUT TOIMINNOT (MORE)








Lainaus (BLOCK QUOTE)
Mielipidekysely (POLL)
Sosiaalisen median ikonit (SOCIAL ICONS)
RSVP lomake (RSVP FORM)
Tutkimuskysely (SURVEY)
RSS-syöte (FEED READER)
Varaus (BOOKINGS)
Keskustelupalsta (FORUMS)
Kotisivujen suunnittelulomake
1. Sivuston nimi:
2. Sivuston tarkoitus:
3. Kohderyhmä:
4. Sivustokartta:
5. Materiaali:

Kuvitus

logo

teksti
8
Eija Terävä
Hiiden Opisto
Kotisivut kätevästi Weebly-ohjelmalla
30.3.2015
Verkkovastaavan työkalut – Google
1 Kirjaudu sisään:
https://accounts.google.com/ServiceLogin?service=sitemaps&passive=1209600&continue=https%3A%2F%
2Fwww.google.com%2Fwebmasters%2Ftools%2F%3Fhl%3Dfi&followup=https%3A%2F%2Fwww.google.co
m%2Fwebmasters%2Ftools%2F%3Fhl%3Dfi&hl=fi
2 Lisää sivusto:
3 Määritä, mikä osoite ilmoitetaan Googlen hakukoneelle:
9
Eija Terävä
Hiiden Opisto
Kotisivut kätevästi Weebly-ohjelmalla
30.3.2015
4 Kopioi Googlen metakoodi leikepöydälle
5 Weeblyssä liitetään koodi SEO-määrityksissä – Muista tallentaa (Save) + PUBLISH
6 Käy nyt klikkaamassa VAHVISTA-painiketta Verkkovastaavan työkaluissa
7 Jos homma onnistui, saat seuraavan kuittauksen:
10