Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista
|
|
- Aimo Myllymäki
- 7 vuotta sitten
- Katselukertoja:
Transkriptio
1 Navigointi Verkkomultimedia ICT1tn Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on? Mihin sivulta pääsee? Navigointipalkit sijaitsevat selkeällä paikalla ja joka sivulla samassa kohtaa. Miten sivulle tultiin? Navigointia helpotetaan ristiinlinkityksillä Sivulta voidaan siirtyä suoraan saman aiheen sivuihin. Muista kohderyhmälle tutut termit myös navigoinnissa. Navigaation ja otsikoiden avulla pystytään esittää käyttäjän sijainti. Siirtyminen sivuston etusivulle ja edelliselle sivulle onnistuu kaikilta sivuilta.
2 Päävalikko Valikot Navigointielementit: Valikot Leivänmurupolut Muut linkit Sisältöalueen linkit Koko sivustossa samassa paikassa Pääsee sivuston eri osiin Paikka yleensä Vaakavalikkona sivun ylälaidassa Etu: selkeys Pystyvalikkona sivun vasemmassa laidassa Etu: laajennettavuus Mahtuu enemmän elementtejä kuin vaakavalikkoon Oikeassa reunassa ja sivun alalaidassa olevat valikot jäävät usein käyttäjältä huomaamatta.
3 Alivalikot Erilainen jokaisella sivulla/sivuston osassa Jos päävalikko on vaakavalikkona, niin alivalikko on yleensä päävalikon alla vaakavalikkona vasemmassa reunassa pystyvalikkona Jos päävalikko on pystyvalikkona, niin alavalikko on yleensä päävalikon elementtien välissä pystyvalikossa Erilaiset pudotusvalikot
4 Leivänmurupolut Leivänmurupolku kertoo sivun sijainnin sivustossa sivuhierarkian mukaan. antaa mahdollisuuden siirtyä sivustossa suoraan ylöspäin. Murupolun paikka yleensä on yläotsikkoalueella mahdollisen vaakavalikon alapuolella. Kotterot -> vaihtoautot -> pakettiautot Toteutuksesta Linkkisanojen oltava samoja kuin valikossa. Ei kannata käyttää, jos sivustohierarkia on matala. Sivu, jolla ollaan. Ei ole linkki. Muut linkit Varsinainen navigointivalikon lisäksi sivulla voi olla muita linkkejä: linkit muihin kieliversioihin suomeksi, på svenska linkit vakiosisältöön sivukartta ohjeet palaute hakutoiminnot tulostettava versio Apulinkkien paikka voi olla esimerkiksi otsikko-osassa oikeassa reunassa tai sivun alapalkissa. Sisältöalueen linkit tarkentavat asiaa tai antavan siitä lisää tietoa. Sijoitetaan yleensä tekstin alle, jonka aiheeseen linkki kuuluu.
5 Sivustokartta Sivustokarttaan tulee näkyviin kaikki sivut. Kartta esittää sivuston sisältörakenteen. Kartasta voi siirtyä mille sivulle hyvänsä. Miksi kannattaa tehdä sivustokartta? Antaa kokonaiskuvan sivustosta. Auttaa löytämään tietoa. Jos sivusto on erittäin laaja, niin kartan sijasta voi tehdä aakkosellisen tai asiakohtaisen hakemiston. Kotterot Vaihtokotterot henkilöauto pakettiautot erikoisuudet Jätä ilmoitus Yhteystiedot kotterot vaihtokotterot jätä ilmoitus yhteystiedot henkilöautot pakettiautot erikoisuudet
6 Linkkien ulkoasusta Linkit täytyy tunnistaa Linkit joko sijaitsevat navigointialueella tai näyttävät linkeiltä. Muualla kuin navigointialueella alleviivattuna ja yleensä sinisenä. Linkit sivuston ulkopuolelle Merkittävä sopivalla tavalla (->->) Linkkilistat Linkit tiedostoihin Kerro tiedoston muoto ja koko Auton esittely (pdf, 900kt) Navigointitehtävä 1 <div id="navigointi"> <ul> <li class="ollaan"> <a href="index.html">kotisivu</a> <a href="vaihto.html">vaihtokotterot</a> <a href="ilmoitus.html">jätä ilmoitus</a> <a href="tiedot.html">yhteystiedot</a> </ul> </div>
7 #navigointi { background-color:rgb(210,244,236); border-bottom: solid 2px rgb(153,153,153); height:2.3em; min-width:29em;} Korkeudet ja leveydet tilanteen mukaan. /* poistetaan listamerkit ja sisennykset */ #navigointiul{ list-style-type:none; margin:0px; padding:0px 0px 5px 10px;} /* muutetaan li-elementti käyttäytymään inline-elementin tavoin eli esim. rivinvaihto poistuu */ #navigointili{ display:inline; margin:0; padding:0} Tehdään kaksi kuvaa: - välilehdet, vasen ja oikea reuna - Kannattaa tehdä kuvista suuremmat, mitä tarvitaan, että välilehdet pysyvät kasassa, jos fonttia suurennetaan. <!-- span välilehden oikean puolen kaarta varten -- > <a href="vaihto.html"><span>vaihtokotterot</span></a> #navigointi a { text-decoration:none; float:left; color:rgb(00,00,00); background:url(navi_vasen.gif) no-repeat left top; padding:0px 0px 0px 4px; } #navigointi a span { display:block; float:left; color:rgb(00,00,00); background:url(navi_oikea.gif) no-repeat right top; padding:15px 15px 4px 6px; }
8 Tehdään vielä kuvat välilehdelle osoittamaan sivua jolla ollaan. <a href="vaihto.html class= ollaan > <span>vaihtokotterot</span></a> #navigointi.ollaan { text-decoration:none; float:left; color:rgb(00,00,00); background: url(navi_vasen_valkoinen.gif) no-repeat left top; margin:0; padding:0px 0px 0px 4px; } #navigointi.ollaan span { float:left; display:block; color:rgb(00,00,00); background: url(navi_oikea_valkoinen.gif) no-repeat right top; margin-left:10px; padding:15px 15px 4px 6px; } Navigointitehtävä 2 <div id="navigointi"> <ul> <a href= ">kotisivu</a> <a href="">vaihtokotterot</a> <ul> <a href="">henkilöautot</a> <a href="">pakettiautot</a> <a href="">erikoisuudet</a> </ul> <a href="">jätä ilmoitus</a> <a href="">yhteystiedot</a> </ul> Testattu: </div>
9 Piilotetaan alivalikko. #navigointi ul {margin-left:0; padding-left:0;} #navigointiliul{display:none} #navigointi li {float:left; width:7em; list-style-type:none; background-color:rgb(0,204,255); border: solid 1px rgb(204,204,204); text-align:center; padding:2px;} #navigointi a {text-decoration:none; color:rgb(255,255,255);} #navigointi li:hover ul {display:block; position:absolute; width:7em} Alivalikko näkyviin, kun hiiri tulee päävalikossa tietyn linkin päälle. Position:absolute -> alivalikko ei vie sivulta paikkaa vaan asettuu alla olevan sisällön päälle
Navigointi Verkkomultimedia ICT1tn004
Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?
LisätiedotNavigointi Verkkomultimedia ICT1tn004. Elina Ulpovaara
Navigointi Verkkomultimedia ICT1tn004 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on? Mihin sivulta
LisätiedotKopseptisuunnittelu Verkkomultimedia ICT1tn004
Kopseptisuunnittelu Verkkomultimedia ICT1tn004 Sivustokartta Käsikirjoitus Graafinen suunnitelma Elina Ulpovaara Konseptisuunnittelu ICT1TN004 toiminnallisuus toimintatarinat -> käyttötarinat kuvatarinat
LisätiedotAsemointi. 1. Lohkon korkeus ja leveys
Asemointi Asemointi on elementtien sijoittelua. Sisältö: 1. Lohko korkeus ja leveys height, width min-height, max-height, min-width, max-width overflow, overflow-x, overflow-y 2. Float - kelluva sisältö
LisätiedotKuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
Lisätiedot1. Lohkon korkeus ja leveys
Asemointi Asemointi on elementtien sijoittelua. Sisältö: height, width float - kelluva sisältö position Elina Ulpovaara 13.10.2009 1. Lohkon korkeus ja leveys Leveys - width Korkeus - height - mittayksiköt
LisätiedotUlkoasun muokkaus CSS-tiedostossa
Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css
LisätiedotCSS tyyliä sivuihin osa II. Elina Ulpovaara
CSS tyyliä sivuihin osa II Elina Ulpovaara Sisällys Laatikkomalli Margin Border Padding Outline Outline-offset Pyöristetyt kulmat Border-radius Tekstiin liittyviä css-ehdotuksia Text-align Text-decoration
LisätiedotTaulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara
Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005
LisätiedotKuva xhtml-sivulla. Mirja Jaakkola
Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri
LisätiedotH T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
LisätiedotKuvat ja taustat ICT1TN004. Elina Ulpovaara
Kuvat ja taustat Elina Ulpovaara Sisältö Kuvan toteuttaminen Kuvan käyttötarkoitus Tiedostomuodot Img-elementti Figure- ja caption elementit Kuvan sijoittelu www-sivulla Kuvan keskitys Tekstin tasaus pystysuorassa
LisätiedotCSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö
CSS - aloitus ICT01D syksy 2005 Mirja Jaakkola, Helia Ulkopuolisen tyylitiedoston käyttö Tyylimääritykset sijaitsevat erillisessä.css-tiedostossa, joka linkitetään xhtml-dokumenttin head-lohkossa linkelementillä:
LisätiedotTee html-sivu, jossa on yllä olevat kaksi taulukkoa.
TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan
Lisätiedotvalitsin on useimmiten html-elementti, jolle tyyli halutaan luoda
Valitsimista valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda Muistin virkistykseksi elementtejä http://appro.mit.jyu.fi/doc/www/xhtml/ HTML-elementtien lisäksi valitsimille voidaan luoda
LisätiedotMOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT
MOBISITE-TYÖKALU MobiSite on työkalu matkapuhelimeen soveltuvan mobiilisivuston rakentamiseen. AIMO-järjestelmän jatkuvasti päivittyvä päätelaitetunnistus tunnistaa useimmat puhelinmallit ja mukauttaa
LisätiedotDigitaalisen median tekniikat css tyylimääritykset jatkuu
Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit
LisätiedotUlkopuolisen tyylitiedoston käyttö
1 CSS - aloitus Sisältö: s. 2. Ulkopuolisen tyylitiedoston käyttö s. 3. Tyyliohjeen kirjoittaminen s. 4. style-elementti s. 5. style-attribuutti s. 6. class-attribuutti s. 7. id-attribuutti s. 8. Fontit
LisätiedotDigitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1
Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit
LisätiedotYlläpitoalue - Etusivu
Crasmanager 5.2 Ylläpitoalue - Etusivu Sivut osiossa sisällön selaus ja perussivujen ylläpito. Tietokannat osiossa tietokantojen ylläpito. Tiedostot osiossa kuvien ja liitetiedostojen hallinta. Työkalut
LisätiedotWestiekerho.fi päätoiminnallisuudet
Sitefactory Oy Juuso Hurri / Ohjelmoija juuso.hurri@sitefactory.fi 26.6.2015 Westiekerho.fi päätoiminnallisuudet Tämä dokumentti esittelee westiekerho.fi palvelun päätoiminnallisuudet joita tarvittaan
LisätiedotWWW-sivujen Verkkosivujen ulkoasu (CSS)
WWW-sivujen Verkkosivujen ulkoasu (CSS) T-111.1100 Digitaalisen median työvälineet (3 op) T-111.1100 Digitaalisen median työvälineet (3 op) Markku Laine DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan
LisätiedotKotisivu. Hakutoiminnon on oltava hyvin esillä lähes kaikilla kotisivuilla. Hakutoiminto on hyvä sijoittaa heti kotisivun yläosaan.
Kotisivu Kotisivu on sivuston pääsivu Ensi kertaa sivustolle saapuvan käyttäjän pitäisi pystyä päättelemään sivuston tarkoitus kotisivun nähtyään. Usein lähtökohtana sivuston hierarkinen pääjaottelu, mutta
LisätiedotYleistä. Suositukset. Rakenne
Yhdistysavaimen ulkoasuohjeistus Jyty-liiton yhdistyksille 27.5.2015 Yleistä Tämä on Jytyliiton yhdistyksille laadittu ohjeistus ulkoasun rakentamisesta Yhdistysavain-julkaisujärjestelmään. Tavoitteena
LisätiedotKotisivut helposti - osa 4
Kotisivut helposti - osa 4 Artikkelisarjan kolmessa ensimmäisessä osassa esiteltiin Internet-siviuihin sekä XHTML- ja CSS-ohjelmointikieliin liittyviä perusteita. Tässä osassa kerrotaan, miten aiemmin
LisätiedotKotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne
Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,
LisätiedotPutteri Käyttöliittymä ja ulkoasu
Putteri Käyttöliittymä ja ulkoasu Jukka Värri 15.10.2007 Versio: 1.0 Yleistä järjestelmästä Järjestelmän merkistö on UTF-8 (Unicode). Käyttöliittymä tulee järjestelmän mukaan. Uusia käyttöliittymiä ei
LisätiedotEnnen ensimmäistä kirjautumista käyttäjän tulee saada kutsu Sporttisaitin jäseneksi.
Ennen ensimmäistä kirjautumista käyttäjän tulee saada kutsu Sporttisaitin jäseneksi. Jäsenkutsun mukana tulee linkki, josta pääsee täyttämään omat tietonsa. Sporttisaitti ei vaadi uusia käyttäjiä laittamaan
LisätiedotHTML5 jatkuu luettelo, linkit, sisäinen kehys, taulukko. Mirja Jaakkola
HTML5 jatkuu luettelo, linkit, sisäinen kehys, taulukko Mirja Jaakkola Luettelot Luetteloelementillä esitetään eri tyyppisiä luetteloja ja listoja Luetteloelementeille on ominaista: luettelo ja luettelorivit
LisätiedotLanuti.fi Lapin nuorisotiedotus. TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, Espoo Teknotie 14 16, Napapiiri, Rovaniemi
Lanuti.fi 2015 Lapin nuorisotiedotus TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, 02150 Espoo Teknotie 14 16, 96930 Napapiiri, Rovaniemi Y-tunnus 1008465-8 www.tietotalo.fi Päivämäärä Versio Kuvaus
Lisätiedotwww.kotisivukone.fi Pikaopas kotisivujen tekoon
Kotisivut helposti! www.kotisivukone.fi Pikaopas kotisivujen tekoon Näin Kotisivukone toimii Kun olet avannut kotisivut Kotisivukoneella, tulet helppokäyttöiseen ylläpitotilaan ja voit heti aloittaa kotisivujen
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 6/8: Navigoinnin tukeminen Edellinen
LisätiedotSuvi Junes Tietohallinto / Opetusteknologiapalvelut 2013
Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aineisto-valikon tai Add an activity or resource valikon (Asetukset lohko Activity chooser on toiminnon ollessa päällä). Valitse
LisätiedotKOTISIVUKONE ULKOASUEDITORI
KOTISIVUKONE ULKOASUEDITORI Kun olet luonut itsellesi kotisivut, voit aloittaa ulkoasun yksityiskohtaisemman räätälöimisen. Kotisivukone tarjoaa helppokäyttöisen ulkoasueditorin, jonka avulla saat sivujen
LisätiedotArtikkelin lisääminen
Sisällys Artikkelin lisääminen...3 Artikkelin muokkaaminen...5 Kuvan lisääminen artikkeliin...6 Väliotsikoiden lisääminen artikkeliin...9 Navigointilinkin lisääminen valikkoon...10 Käyttäjätietojen muuttaminen...13
LisätiedotOulun yliopiston www-sivujen tekeminen
Oulun yliopiston www-sivujen tekeminen Oulun yliopiston ja sen yksiköiden www-sivuilla noudatetaan yliopiston www-politiikan peruslinjauksia sekä graafisen ohjeiston mukaista visuaalista linjaa. Yhtenäisellä
LisätiedotCSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola
CSS aloitus CSS Cascade Stylesheet Mirja Jaakkola Sisältö 3. Ulkopuolisen tyylitiedoston käyttö 4. Tyyliohjeen kirjoittaminen 5. style-elementti 6. style-attribuutti 7. class-attribuutti 8. id-attribuutti
LisätiedotH T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
LisätiedotWritten by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28
Sivupohja Joomlalle Sivupohjan tekeminen Joomlalle itse alusta saakka kuulostaa vaikealle. Työ on kuitenkin varsin helppo, jos vaan tietää tekemisen kaavan ja ymmärtää idean sivupohjasta. Joomlalle sivupohjan
LisätiedotAloitusopas verkkosivuston ylläpitoon
Aloitusopas verkkosivuston ylläpitoon JPP-Soft Oy 2(13) Sisällys Tervetuloa emedia CMS verkkopalveluiden käyttäjäksi... 3 Sivuston graafinen ilme ja rakenne... 4 Sivuston ilme ja tyyli... 5 Sivupohjat...
LisätiedotSuvi Junes Tietohallinto / Opetusteknologiapalvelut 2012
Aineistot Uudet ominaisuudet: - Ei Tiedostot-kohtaa alueen sisällä, vaan tiedostonvalitsin, jolla tiedostot tuodaan alueelle siihen kohtaan missä ne näytetään - Firefox-selaimella voi tiedostot siirtää
Lisätiedot,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU
,QWHUQHWVHODLPHQNl\WWlPLQHQ±,QWHUQHW([SORUHU Tässä pääsette tutustumaan Internet Explorerin (IE) käyttöön. Muitakin selainversioita löytyy, kuten esimerkiksi Netscape, Opera ja Mozilla. Näiden muiden selainten
LisätiedotGoogle Sites: sivun muokkaaminen (esim. tekstin, kuvien, linkkien, tiedostojen, videoiden ym. lisääminen)
Google Sites: sivun muokkaaminen (esim. tekstin, kuvien, linkkien, tiedostojen, videoiden ym. lisääminen) 1. Valitse sivu, jolle haluat lisätä sisältöä tai jota haluat muutoin muokata, ja klikkaa sitä.
LisätiedotVerkkosivut perinteisesti. Tanja Välisalo 11.2.2009
Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate
LisätiedotKyläsivujen InfoWeb-ohje
Kyläsivujen InfoWeb-ohje Kirjoita internet-selaimesi osoitekenttään kyläsivujen hallintaosoite; www.yla -savo.fi/admin Saavut seuraavalle sivulle, johon kirjoitat käyttäjätunnuksesi ja salasanasi: Paina
LisätiedotHAKUKONEMARKKINOINTI KOTISIVUJEN PÄIVITYSOHJE
KOTISIVUJEN PÄIVITYSOHJE 1 SISÄLLYSLUETTELO KIRJAUDU PALVELUUN...3 KÄVIJÄSEURANTA...4 SIVUJEN PÄIVITYS...5 Sisältö...6 Sisältö / Työkalut...8 Sisältö / Taulukko...9 Sisältö / Kuvien tuominen...10 Sisältö
LisätiedotHtml & css Verkkopalvelu AV-HELTECH
Html & css Verkkopalvelu AV-HELTECH 13.8. - 27.9.2012 http://juy.fi/kurssit/web/verkkopalvelu/syksy12 Tutorial 1 vaihe 1 eka html tiedosto vaihe 2 (muutokset edelliseen lihavoituja) art
LisätiedotKANSALAISKIOSKI Käyttöohje
KANSALAISKIOSKI Käyttöohje Suomen Mediatoimisto Käyttöohje 2(7) Sisällysluettelo Sisällysluettelo 1.Miten esitän kysymyksen kansalaiskioskissa?...3 2.Mitä ovat kysymyksen esittämisen lisävalinnat?...5
LisätiedotKylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.
Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.2012 Hakemisto 1. Sivustot internetissä... 2 2. Yleistä... 2 3.
LisätiedotLappi.fi -pikaohje Kittilän kylille:
Lappi.fi -pikaohje Kittilän kylille: Tämän pikaohjeen avulla pääsette alkuun sivujenne tekemisessä, mutta suosittelemme täydellisten Lappi.fi -ohjeiden lukemista ennen sivujenne tekemistä. Ohjeet löytyvät
LisätiedotCSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.
CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.
LisätiedotHelppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004. Elina Ulpovaara
Helppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004 Elina Ulpovaara Käyttäjäkeskeinen suunnittelu Tavoitteena: * käytettävyys tuotteeseen * hyvä käyttökokemus käyttäjälle tuotteen liiketoiminnalliset
LisätiedotTietosuoja-portaali. päivittäjän ohje
Tietosuoja-portaali päivittäjän ohje Maisa Kinnunen 2010 1 Sisältö PÄIVITTÄJÄN OHJE Kirjautuminen...3 Sivujen tekstin muokkaus...4 Tiedostojen lisääminen palvelimelle...9 Jos sinun pitää selvittää tiedoston/kuvan
LisätiedotXHTML jatkuu linkit, listat, taulukot. Mirja Jaakkola
XHTML jatkuu linkit, listat, taulukot Mirja Jaakkola Sisällys 3. Linkki (anchor) 4. Suhteellinen linkki 5. Sivun sisäinen linkki 6. CSS ja linkit 7. Tehtävä 8. Listat eli luettelot 9. Järjestämätön lista
LisätiedotKotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com
Kotisivujen teko Jan Lindholm Kirkkonummen kansalaisopisto Syksy 2014 koodari.eu jsbin.com Käyttäjätunnus / Salasana aoppilas.01 / aoppilas#2013# aoppilas.02 / aoppilas#2013# aoppilas.03 / aoppilas#2013#
LisätiedotVehmaan kunta. Wordpress käyttöopas. Betta Digital Oy
Vehmaan kunta Wordpress käyttöopas Betta Digital Oy 1 / 22 Sisällys 1. Kirjautuminen... 3 1.1. Sisäänkirjautuminen ei onnistu... 3 2. Hallintapaneeli... 5 2.1. Sisään kirjautuneen hallintanäkymä... 6 3.
Lisätiedotselector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård
selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård CSS selectorit Elementti HTML CSS otsikko h1 { color: pink; Luokka HTML CSS
LisätiedotHelppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004
Helppokäyttöisen www-sivuston suunnittelu Verkkomultimedia ICT1tn004 17.8.2009 Elina Ulpovaara Käyttäjäkeskeinen suunnittelu Tavoitteena: * käytettävyys tuotteeseen * hyvä käyttökokemus käyttäjälle tuotteen
LisätiedotNETTISIVUOHJE. MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen
NETTISIVUOHJE SISÄLTÖ 2 JULKAISUJÄRJESTELMÄ tietoa WordPress julkaisujärjestelmästä perustoiminnot (kirjautuminen, asetukset) 6 MUITA OHJEITA käyttäjän lisääminen, mediakirjasto, sähköpostien lisääminen
Lisätiedot1. Perustiedot. Sivu 1 / 4. Tietovirran nimi: Hallinnassa näkyvä tietovirran nimi. Selite: Tietovirran kuvausteksti.
Widget käyttöohjeet Sivu 1 / 4 1. Perustiedot Tietovirran nimi: Hallinnassa näkyvä tietovirran nimi. Selite: Tietovirran kuvausteksti. Yhteyshenkilö: Tietovirran yhteyshenkilön valinta (vain tietona käyttäjille).
LisätiedotMunstadi Wordpress ohjeet
Munstadi Wordpress ohjeet Sisällys Kirjautuminen... 4 Ohjauspaneeli... 4 Sisällön luominen... 6 1.1 Sivut... 6 1) Uuden sivun luominen (tai vanhan muokkaaminen)... 6 2) Otsikon valinta ja tekstisisällön
LisätiedotAT4-kotisivukurssi. 4. jakso 5.2. 5.4.2013.
AT4-kotisivukurssi 4. jakso 5.2. 5.4.2013. Ohjeita, kotisivueditori HTML-opas http://www.iki.fi/mikaves/html/ (Mika Westerholm) Kotisivueditorit: Notepad (yksinkertainen BlueGriffon (tehokas, ilmainen)
LisätiedotKuvat ovat tärkeä osa Espoon kaupungin viestintää, ja siksi ne on suunnitellaan ja valitaan huolellisesti.
-verkkosivuston KUVAMAAILMAn ohjeistus JOHDANTO Kuvat ovat tärkeä osa Espoon kaupungin viestintää, ja siksi ne on suunnitellaan ja valitaan huolellisesti. Espoo.fi-sivuston kuvat tukevat kaupungin visuaalista
LisätiedotFrontPage 2000 - Näkymät
FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava
LisätiedotVJS-96 Black Panthers joukkueen www-sivujen käyttöohjeet
Pekka Penttala 9.11.2008 1 (11) VJS-96 Black Panthers joukkueen www-sivujen käyttöohjeet VJS-96 Black Panthers joukkueen www-sivujen käyttöohjeet... 1 1 Yleistä www-sivujen käytöstä... 2 2 Sivujen osoitteet...
LisätiedotHittitoimiston Forte-kotisivujen päivitysohje
Hittitoimiston Forte-kotisivujen päivitysohje Forte-kotisivujen päivitysohje 2 Sisällysluettelo: Kirjautuminen 2 Ohjausnäkymä 3 Sivun lisääminen ja yleisnäkymä 4 Sivun muokkaus 5 Sivun hakusanaoptimointi
LisätiedotThl.fi. Käytettävyyden asiantuntija-arviointi. Terveyden ja hyvinvoinnin laitos Kati Haanpää, Katri Kleemola. Marjo Haahtela 20.12.
Thl.fi Terveyden ja hyvinvoinnin laitos Kati Haanpää, Katri Kleemola Käytettävyyden asiantuntija-arviointi Marjo Haahtela 20.12.2013 Sisältö 1. Johdanto 2. Havainnot 2.1. Nykyisiä hyviä ratkaisuja 2.2.
LisätiedotVERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE
VERKKOVELHO-YLLÄPITOTYÖKALUN KÄYTTÖOHJE 1. SISÄÄN KIRJAUTUMINEN Sisään kirjautuminen VerkkoVelho-ylläpitotyökaluun tapahtuu yrityksesi osoitteessa www.omaosoitteesi.fi/yllapito, esim. www.verkkovelho.fi/yllapito.
LisätiedotHTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.
HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan
LisätiedotTekstieditorin käyttö ja kuvien käsittely
Tekstieditorin käyttö ja kuvien käsittely Teksti- ja kuvaeditori Useassa Kotisivukoneen työkalussa on käytössä monipuolinen tekstieditori, johon voidaan tekstin lisäksi liittää myös kuvia, linkkejä ja
LisätiedotSivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi)
1 Sivupohja flat file julkaisujärjestelmälle Versio 1.1 /syyskuu 2011 Kirjoittanut Jari Sarja (www.jarisarja.fi) 2 Sisältö 1. Johdanto... 4 2. Ruudukkopohjainen taitto... 5 2.1. 960 Grid System... 5 2.2.
LisätiedotOhjeita informaation saavutettavuuteen
Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea
LisätiedotKYMP Webmail -palvelu
KYMP Webmail -palvelu Sisältö 1. Kirjautuminen... 3 2. Viestin merkinnät... 4 3. Viestien lukeminen... 4 Viestiin vastaaminen... 4 Viestin välittäminen edelleen / uudelleen ohjaus... 5 4. Viestin kirjoittaminen...
LisätiedotSuomen virtuaaliammattikoulu Kaasutustekniikka v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)
Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikoulu Kaasutustekniikka v. 0.5 > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien
LisätiedotData@Flow. Verkkosivuston hallinnan ohjeet. atflow Oy tuki@atflow.fi. AtFlow Oy, tuki@atflow.fi, +358 (0)50 452 5620
Data@Flow Verkkosivuston hallinnan ohjeet atflow Oy tuki@atflow.fi AtFlow Oy, tuki@atflow.fi, +358 (0)50 452 5620 Sisällysluettelo 1. Kirjautuminen... 2 2. Sivuston muokkaus... 2 3. Sivujen ja valikoiden
LisätiedotSuvi Junes/Pauliina Munter Tietohallinto / Opetusteknologiapalvelut 2014
Aineistot Kun laitat Muokkaustilan päälle, näet jokaisessa osiossa Lisää aktiviteetti tai aineisto - linkin. Valitse linkin takaa avautuvasta listasta, millaisen aineiston haluat alueelle tuoda, ja paina
LisätiedotOhjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä
Ohjeistus hankkeen sivujen tekemiseen julkaisujärjestelmällä Viestintäpalvelut 9.6.2015 1 Sivupohjan tekeminen Ennen kuin alat tekemään hankkeen sivuja, tilaa Viestintäpalveluilta hankesivupohja ja ilmoita
LisätiedotEntiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla
1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.
LisätiedotMOODLE TUTUKSI. Pirkko Vänttilä Oulun aikuiskoulutuskeskus 4.8.2008
2008 MOODLE TUTUKSI Pirkko Vänttilä Oulun aikuiskoulutuskeskus 4.8.2008 SISÄLLYSLUETTELO 1. ALOITUSNÄKYMÄ... 4 2. TUTUSTUMINEN... 5 3. KESKUSTELUT... 8 4. VIESTIT... 10 5. CHATIT... 10 6. TIEDOSTOJA OMALTA
Lisätiedothelsingintaiteilijaseura.fi WordPress-pikaohjeet
1/12 helsingintaiteilijaseura.fi WordPress-pikaohjeet Sisällysluettelo 1. Ohjausnäkymä...1 2. Työkalupakki... 2 3. Artikkelit, Näyttelyt ja Sivut...3 4. Artikkelin lisäys tai muokkaus... 4 Artikkelikuvan
LisätiedotSIVUSTON SUUNNITTELU. Informaatiorakenne ja navigointi
SIVUSTON SUUNNITTELU Informaatiorakenne ja navigointi SIVUSTON SUUNNITTELUN PÄÄTEHTÄVÄ saada aikaan mahdollisimman yksinkertaisia sivustoja mahdollisimman vähän häiriötekijöitä informaatioarkkitehtuuri
LisätiedotKarttapalvelun käyttöohjeet
Karttapalvelun käyttöohjeet 1 Yleistä... 2 2 Aloitusnäkymä... 2 3 Liikkuminen kartalla... 3 4 Vasemman laidan valikko... 3 4.1 Kaavayhdistelmä... 3 4.2 Valmistelussa olevat kaavat... 3 4.3 Kaavamerkinnät...
LisätiedotCSS - tyylit. 13.11.2000 Seppo Räsänen
CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot
LisätiedotTalotietojen päivittäminen
Talotietojen päivittäminen www.seurantalot.fi-sivustolle Pikaohje seurantalojen omistajayhdistyksille 17.6.2015 Suomen Kotiseutuliitto 1 Ohjeen sisältö Palveluun kirjautuminen s. 3 Talosivu s. 4 Tietojen
LisätiedotWWW.KOUVOLA.FI -OPAS. Sisältö
1 WWW.KOUVOLA.FI -OPAS Sisältö Sivukartta 2 Haku 2 Palveluhakemisto 3 Puhelinluettelo 3 Palautteet 5 Kansalaiskioski 7 Sähköpostipalaute 8 Virallinen asiointi 8 Karttapalvelu 9 Sivujen sisältö 11 Etusivu
LisätiedotKangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE. KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi
2015 Kangasniemen yrityshakemisto KÄYTTÖOHJE YRITTÄJÄLLE KANGASNIEMEN KUNTA yrityshakemisto.kangasniemi.fi 1 Sisällysluettelo 1. Sivustolle rekisteröityminen... 2 2. Yrityksen lisääminen... 3 2.1. Yritystiedot...
LisätiedotKÄYTTÖOHJE / Ver 1.0 / Huhtikuu WordPress KÄYTTÖOHJE Sotkamo 2016
/ / WordPress KÄYTTÖOHJE Sotkamo 2016 Sisältö Sisältö 1. Yleistä 2. Kirjautuminen ylläpitoon 2.1. Kirjaudu osoitteessa: http://sotkamo.valudata.fi/admin Myöhemmin: http://www.sotkamo.fi/admin 2.2 Salasana
LisätiedotKotkaliikkuu.fi. Ohjeita seuroile ja yhteisöille palvelun käytöstä
Kotkaliikkuu.fi Ohjeita seuroile ja yhteisöille palvelun käytöstä Tunnukset Tarvitset käyttäjätunnuksen ja salasanan käyttääksesi palvelua. Tunnukset ovat usein yhteisölle yhteiset. Henkilökohtaisia tunnuksia
LisätiedotKiipulan ammattiopisto. Liiketalous ja tietojenkäsittely. Erja Saarinen
Kiipulan ammattiopisto Liiketalous ja tietojenkäsittely Erja Saarinen 2 Sisällysluettelo 1. Johdanto... 3 2. Hyvät internetsivut... 3 3. Kuvien koko... 4 4. Sivujen lataus... 4 5. Sivukartta... 5 6. Sisältö...
LisätiedotOpinnäytetyö Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03
Opinnäytetyö 5.4.2006 Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03 Sisällysluettelo 1. Johdanto... 3 2. Suunnittelu... 4 2.1. PTOPlus.net... 4 2.2. Sivujen tarkoitus ja kohderyhmä...
LisätiedotCSS-jatkokurssi. Verkkosivustojen suunnittelu ja rakentaminen
Verkkosivustojen suunnittelu ja rakentaminen CSS-jatkokurssi Sisällysluettelo 1 Johdanto 2 Tiedostot 3 Sivun osiointi 4 Otsikko- ja tekstikentät 4.1 Otsikkokentät 4.2 Tekstikentät 5 Navigointi ja linkit
LisätiedotNäin tilaat tuotteita Kuulotarvikkeen verkkokaupasta
Näin tilaat tuotteita Kuulotarvikkeen verkkokaupasta 1 Sisällysluettelo 1. Kun tilaat ensimmäisen kerran ja rekisteröidyt asiakkaaksemme....2 Rekisteröidy palveluun...2 Kirjautuminen...4 Salasanan vaihtaminen...5
LisätiedotSuomen virtuaaliammattikorkeakoulu Business in The EU v. 0.5 > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)
Oppimisaihion arviointi / Arvioinnin tulos 9 Aineiston arvioinnin tulos arviointialueittain Suomen virtuaaliammattikorkeakoulu Business in The EU v. 0.5 > 80 % 80 60 % 60 50 % < 50 % Arviointialue Ominaisuuksien
LisätiedotJulkaisujärjestelmän peruskäyttö. Pikaohje
Julkaisujärjestelmän peruskäyttö Pikaohje DotNetNuke-julkaisujärjestelmä etaika Oy:n tuottamat palvelut perustuvat DotNetNuke-julkaisujärjestelmään (ks. tarkemmin www.dotnetnuke.com). Se on laaja, järeän
LisätiedotTalotietojen päivittäminen
Talotietojen päivittäminen www.seurantalot.fi-sivustolle Pikaohje seurantalojen omistajayhdistyksille 12.10.2016 Suomen Kotiseutuliitto 1 Ohjeen sisältö Palveluun kirjautuminen s. 3 Talosivu s. 4 Tietojen
LisätiedotPAIKALLISJÄRJESTÖKOHTAISTEN NETTISIVUJEN
SAK:N PAIKALLISJÄRJESTÖJEN NETTIPALVELUT s. 1/7 PAIKALLISJÄRJESTÖKOHTAISTEN NETTISIVUJEN RAKENNE Paikallisjärjestöjen omille sivuille pääsee suoralla osoitteella, joka on muotoa www.sak-paikalliset.fi/paikkakunta
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
LisätiedotKÄYTTÖOHJE. Servia. S solutions
KÄYTTÖOHJE Servia S solutions Versio 1.0 Servia S solutions Servia Finland Oy PL 1188 (Microkatu 1) 70211 KUOPIO puh. (017) 441 2780 info@servia.fi www.servia.fi 2001 2004 Servia Finland Oy. Kaikki oikeudet
LisätiedotGoogle-dokumentit. Opetusteknologiakeskus Mediamylly
Google-dokumentit 1 2 3 Yleistä 1.1 Tilin luominen 4 1.2 Docs-päävalikkoon siirtyminen 7 Dokumentit-päävalikko 2.1 Kirjaudu Dokumentteihin 9 2.2 Lähetä tiedosto Google-dokumentteihin 11 2.3 Uuden asiakirjan
LisätiedotSisältö. Päivitetty viimeksi 31.8.2011 Sivu 2 / 14
Ylläpitäjän ohje Sisältö Ylläpitäjän ohje... 1 Yleistä... 3 Vinkkejä ylläpitäjälle... 3 Osoitteet... 3 Internet-selain ja Flash-laajennus... 3 Julkinen sivunäkymä ja ylläpitonäkymä eri välilehdissä...
Lisätiedot