Navigointi Verkkomultimedia ICT1tn004. Elina Ulpovaara

Transkriptio

1 Navigointi Verkkomultimedia ICT1tn004 Elina Ulpovaara

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

3 Valikot Navigointielementit: Valikot Leivänmurupolut Muut linkit Sisältöalueen linkit Päävalikko 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. 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 ICT1TN004

5 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. Sivu, jolla ollaan. Esim. HAAGA-HELIAn sivuilta: Ei ole linkki. Toteutuksesta Linkkisanojen oltava samoja kuin valikossa. Ei kannata käyttää, jos sivustohierarkia on matala.

6 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 HH:n sivun oikea yläkulma. 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.

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

8 Ticocafe Etusivu Palvelut Tilat Softis-kahvila Bittisali Kellari Ota yhteyttä Etusivu Palvelut Tilat Softis-kahvila Bittisali Kellari Ota yhteyttä

9 Linkkien ulkoasusta Linkit täytyy tunnistaa Linkit joko sijaitsevat navigointialueella tai näyttävät linkeiltä. Muualla kuin navigointialueella yleensä alleviivattuna ja sinisenä. Linkit sivuston ulkopuolelle Merkittävä sopivalla tavalla (->->) Linkkilistat Linkit tiedostoihin Kerro tiedoston muoto ja koko Kahvilan esittely (pdf, 900kt)

10 Linkkivinkki tulostukseen <h2>ravintoloita Pasilan kulmilla</h2> <ul id="linkit"> <li><a href=" Nurkka</a> <li><a href=" <li><a href=" print { a:after {content:" (" attr(href) ") "; } Pseudoluokalla :after voidaan tulostaa elementin jälkeen tekstiä. Vastaavasti taas :before:lla voidaan tulostaa ennen elementtiä. a {color:rgb(0,0,0); text-decoration:none} } ICT1TN004

11 Navigointiesimerkki 1 <nav> <ul> <li> <a href="index.html">etusivu</a> <li> <a href="palvelut.html">palvelut</a> <li> <a href="hinnasto.html">hinnasto</a> <li> <a href="tiedot.html">yhteystiedot</a> </ul> </nav> ul:llä on oletuksena paddingleft arvoa 40px li:lle luettelomerkki pois leveydeksi 100px sopivasti marginaaleja ja padding-arvoja Linkeiltä alleviivaus pois ja väriksi musta nav ul {padding-left:0px} nav ul li {background-color:rgb(130,245,236); list-style-type:none; width:100px; margin-bottom:10px; padding:5px} nav a {text-decoration:none; color:rgb(0,0,0)}

12 Navigointiesimerkki 2 <nav> <ul> <li><a href="">etusivu</a> <li><a href="">palvelut</a> <li><a href="">tilat</a> <ul> <li><a href="">softis-kahvilat</a> <li><a href="">bittisali</a> <li><a href="">kellari</a> </ul> <li><a href="">ota yhteyttä</a> </ul> </nav>

13 nav li ul {display:none} nav li:hover ul {display:block; Piilotetaan alivalikko. position:absolute; width:120px} Alivalikko näkyviin, kun hiiri tulee päävalikossa tietyn linkin päälle. Position:absolute -> alivalikko ei vie sivulta tilaa vaan asettuu alla olevan nav ul {padding-left:0;} sisällön päälle nav li {float:left; width:120px; Valikko vaakaan. list-style:none; font-size: 20px; text-align:center; background-color:rgb(102,204,0); border:solid 1px rgb(0,0,0) nav a {text-decoration:none; color:rgb(255,255,255);} Valikon olioiden ulkoasu.

14 Kuvakartta Kuvakartalla tarkoitetaan kuvaa, joka sisältää useampia linkkejä. Kuvakartta tehdään siten, että kuvaan määritellään ns. kuumia kohtia, jotka sisältävät linkin. Huom. Koodin voi rakentaa apuohjelmien tai www-editoreiden avulla. Linkki osoitteeseen lokakuu_tarjous3.html. Linkki osoitteeseen lokakuu_tarjous4.html. ICT1TN004

15 <img src="lokakuu.png" alt= lokakuu" width="300" height="200" usemap="#lokakuu" > <map id="lokakuu" name="lokakuu"> <area shape="rect" coords="23,96,92,149" href="#" > <area shape="circle" coords="233,66,43" href="#" > <area shape="poly" coords="141,139,176,109,224,135,220,182" href="#" > </map> 96px. ICT1TN004 23px. shape-attribuutilla on kolme eri arvoa rect Suorakaide: alkupiste ja loppupiste cirle Ympyrä: ympyrän keskipisteen paikka ja säde pikseleinä poly Monikulmio: kaikki pisteet (vaakaan, pystyyn)