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ä visuaalisella verkkoilmeellä ja verkkosivurakenteella varmistetaan sivujen käyttäjää palveleva tunnistettavuus ja käytettävyys. Tässä ohjeistuksessa on määritelty yliopiston ja sen yksiköiden verkkosivujen visuaalinen perusilme, keskeiset graafiset elementit ja navigointijärjestelmä. Yleisesti noudatettavien perusratkaisujen ohella ohjeistus mahdollistaa yksiköiden erilaisten tarpeiden ja omaleimaisuuden toteuttamisen yksiköiden verkkosivuilla. Yksiköt vastaavat verkkosivujensa sisällöstä yliopiston www-politiikan periaatteita noudattaen (29.10.2004). Oulun yliopiston verkkosivujen ohjeistusta ja www-politiikan noudattamista koordinoi viestintäpalvelut ja tietohallinto. Hannu Pietilä hallintojohtaja Tapio Mäkinen viestintäpäällikkö
Oulun yliopiston www-sivujen teko-ohjeistus 1.2.2007 Oulun yliopiston www-ohjeistus sisältää sivumallit yksiköiden etusivusta ja alasivusta. Sulkeissa olevat numerot, (x), edustavat tämän ohjeistuksen mukana tulevassa kuvassa (alh.) olevia apunumeroita. Yliopiston graafisen ilmeen tärkeimpiä tunnusmerkkejä ovat tunnus, sininen väri sekä mosaiikkikuvio. Nämä elementit esiintyvät jokaisella sivulla, niin pääsivustolla kuin laitossivuillakin. Yliopiston virallinen kirjasintyyppi on Gill Sans. Tämän lisäksi www-sivuilla käytetään Arial-kirjasintyyppiä, ja Gill Sansin korvaavana kirjasintyyppinä Trebuchet MS -kirjasintyyppiä.
Sivumallit Yksiköiden käytössä ovat nämä sivumallit: -Yksikön etusivu (ks. tämän ohjeistuksen sivu 1) -Yksikön alasivu (ks. ohjeistuksen viimeinen sivu) -Yllämainittujen englanninkieliset versiot -Riisuttu erikoisversio, joka on tarkoitettu paljon tilaa vaativille www-sovelluksille. Alasivut ovat template-tiedostomuodossa ja löytyvät Templates-kansiosta samasta hakemistosta tämän ohjeistuksen kanssa. Etusivupohjat ovat htm-muodossa sivumallit-kansiossa. Yleistä Mallisivujen layout on toteutettu CSS-tasoilla. Sivut ovat osittain skaalautuvia. Sivujen maksimileveys on 923 px ja oletusleveys 70% selainikkunan leveydestä. Vasen alue Sivun vasempaan osaan kuuluvat yliopiston sininen alue (1) (yliopiston yhteiset linkit) sekä harmaa alue (2) (yksikön omat linkit). Vasemman alueen leveys on 183px ja korkeus 100% selainikkunan korkeudesta. Vasen yläosa Sivun vasemmassa yläkulmassa (1) on sinisellä taustalla viisi linkkiä yliopiston pääsivustolle. Näitä linkkejä ei saa muuttaa tai poistaa. Linkit ovat: Yliopiston etusivulle http://www.oulu.fi/yliopisto/ University in English http://www.oulu.fi/english/ Opiskelemaan yliopistoon http://www.oulu.fi/opetus/opiskelemaan.html Tiedekunnat ja laitokset http://www.oulu.fi/opetus/tiedekunnat_ja_laitokset.html Yliopiston kirjasto http://www.kirjasto.oulu.fi/ Alueen taustaväri on #00407A Linkkien väri on valkoinen, ja niiden edellä on värillisiä neliökuvakkeita, kaksi vihreää ja kolme punaista. Alueella on hakukenttä (3), jolla voidaan suorittaa sanahakuja yliopiston palvelimilta. Jos hakutoiminto ei hae yksikön omilta sivuilta tyydyttävästi, voi yksikkö käyttää sen lisäksi sisäistä hakua (7), joka sijoitetaan harmaalle alueelle. Vasemman yläosan ja alemman harmaan alueen välissä on mosaiikkikuvio (4), joka noudattaa yliopiston visuaalista ilmettä. Tätä elementtiä ei saa poistaa tai muokata.
Harmaa alue Vasemman reunan harmaa alue (2) on tarkoitettu yksikön omille linkeille. Alueen taustaväri on #EEEEEE. Alue käyttää taustakuvaa vasentausta.gif, johon on sisällytetty alueen oikean reunan reunavarjo. Ylimpänä on linkki tiedekunnan etusivulle (5). Linkkitekstiksi vaihdetaan tiedekunnan nimi, esim. Lääketieellinen tiedekunta. Tiedekunta-sanan voi tarvittaessa lyhentää muotoon tdk. Tiedekuntalinkin alle tulevat linkit yksikön omille sivuille (6). Linkkien tekstikoko on 12px ja riviväli automaattisesti määriytyvä. Linkkien edellä käytetään > -merkkiä ( suurempi kuin ). Linkkien alapuolella voi olla yksikön sivuston sisäinen hakutoiminto (7), jos toimiva sellainen on mahdollista rakentaa, ja jos sille on tarvetta. Hakukentän tulee olla samannäköinen kuin yliopiston hakutoiminto, mutta painikkeen tekstin tulee olla Hae X:n sivuilta, jossa X on yksikön nimi. Jos yksikön nimi on liian pitkä, käytetään painikkeessa sanaa yksikkö tai laitos. Jos tarvetta omaan hakuun ei ole, poistetaan tämä kenttä kokonaan. Vasemmassa alakulmassa on palautelinkki (8), johon yksikkö vaihtaa oman webmasterinsa sähköpostiosoitteen tai linkin omaan palautelomakkeeseensa. Alimpana vasemmassa reunassa ovat yksikön osoitetiedot (9), joiden pitää näkyä joka sivulla. Roskapostin estämiseksi sähköpostiosoitteessa käytetään (at)-muotoa. Mallisivuissa on yliopiston tiedot, mutta nämä siis korvataan yksikön omilla tiedoilla. Tunnusalue Sivun keskialueen yläosassa (10) on yliopiston tunnus sekä mosaiikkikuviota. Tämän osan on oltava identtinen kaikilla yliopiston sivuilla. Englanninkielisillä sivuilla käytetään englanninkielistä tunnusta. Tunnuksesta on linkki yliopiston etusivulle.
Siniset palkit ja kuva Yksiköiden sivumalleja on kaksi. Ensimmäisessä, jota ensisijaisesti käytetään yksikön etusivulla, on kaksi sinistä vaakapalkkia (11) ja niiden välissä suuri kuva (12). Kuva on taustakuvaelementtinä, jotta se leikkautuisi vasemmalta eikä oikealta kun selainikkunaa pienennetään. Kuvatiedoston osoite löytyy tyylitiedostosta. Yksikköjä suositellaan vaihtamaan kuvan paikalle oma, jos sellainen löytyy. Toisessa sivumallissa (ks. liite), joka on tarkoitettu yksikön alasivun malliksi, on vain yksi vaakapalkki, ei isoa kuvaa tai toista vaakapalkkia. Elementtien korkeudet: ylempi vaakapalkki 20 px kuva 162 px alempi vaakapalkki 20 px Ylemmässä vaakapalkissa on yksikön nimi Gill Sans 14px versaalilla. Yksikön etusivun alempi vaakapalkki on tyhjä. Palkkien oletusväri on sininen, mutta yksikkö voi halutessaan korvata sen tiedekuntansa tunnusvärillä jos sellainen on. Isossa kuvassa lukee oletuksena teksti Oulun yliopisto (13), jonka sivuntekijän tulee vaihtaa oman yksikkönsä nimeksi, säilyttäen kuitenkin tekstityylin. Sivuntekijän tiedostoissa on psd-muotoinen tiedosto, jossa olevaa tekstiä voi muokata Photoshopilla. Tekstin kirjasinlaji on Gill Sans ja teksti on 26 px versaalia. Mikäli yksikön nimi on kovin pitkä, voidaan tekstikokoa pienentää. Tekstin ja kuvan reunojen väliin on jätettävä noin 10 px marginaali. Valkoinen teksti tummalla pohjalla on paras, mutta jos kuva sitä vaatii, voi teksti olla muunkin värinen. Sisältöosa Sisältöosan (14) taustaväri on valkoinen. Marginaalit ovat 4px 16px 4px 12px. Leipätekstin fonttikoko määritellään suhteellisena, ja se on 90%. Kirjasin on Arial. Otsikot ovat Gill Sans -kirjasinta, ja niiden fonttikoot ovat: h4: 16 px h5: 14 px Suurempia tai pienempiä otsikkoja ei suositella käytettäväksi. Sisältöosan alussa (paitsi etusivulla) on linkkimato, joka osoittaa sivun sijainnin sivuston sisällä. Linkkimato alkaa yksikön etusivusta ja jatkuu tasoittain alemmas, päättyen > -merkkiin. Linkkimato on suositeltava, mutta ei pakollinen. Linkkimadon alla on 1px paksuinen, koko sisältöikkunan levyinen viiva, jonka väri on #AAAAAA. Varsinainen sisältöosa voidaan jakaa yhteen, kahteen tai erikoistapauksissa kolmeen palstaan. Kukin palsta on DIV-elementtinä. Palstojen välillä on vähintään 10px marginaalit. Kaksipalstaisen sivun layoutina suositellaan käytettäväksi 1:1 leveyssuhdetta tai 2:1 leveyssuhdetta. Kaksipalstaisessa layoutissa suositellaan noudatettavan yliopiston pääsivuston logiikkaa, eli varsinainen sisältö vasempaan, leveämpään palstaan, ja linkit oikeaan palstaan. Sivumalleissa on oletuksena kaksi palstaa. Jos halutaan tehdä yksipalstainen sivu, poistetaan oikeanpuoleinen DIV-elementti ja annetaan vasemmanpuoleiselle elementille leveydeksi 94%.
Tausta Sivujen taustan (15) väri on harmaa #CCCCCC jossa on mosaiikkikuvio sisältöalueen rajassa. Mosaiikkikuvio on säilytettävä. Tiedekunnan päätöksellä taustavärinä voidaan käyttää muutakin väriä kuin harmaata (esim. tiedekunnan perusväriä). Tällöin ko. taustaväriä tulee käyttää kaikilla tiedekunnan laitosten sivuilla. Sivun alalaidassa on sininen reunaviiva (16), paksuudeltaan 8 px ja väriltään #00407A. Pasi Terästi, www-tiedottaja Liite: yksikön alasivu