Sivustohierarkia / navigointi

Transkriptio

1 APTA.FI GRAAFINEN OHJEISTO SIVUSTOHIERARKIA Sivustohierarkia / navigointi RAKENNE JA LOGIIKKA Päänavigaatio ja kunkin alasivun oikeanpuoleiselle palstalle tulevat linkit on esitelty seuraavalla sivulla. PÅ SVENSKA-navi toimii seuraavasti: APTA.fi:n uudistuksessa keskeinen muutos koskee sivuston sisällön uudelleen ryhmittelyä. Päänavigaatio supistetaan kaksitasoiseksi. Alasivuilla oikeanpuolimmaisella palstalle siirretään ylänavigaatiosta suoraan ulos / tiedostoon vievät linkit. PÅ SVENSKA YLÖS > AKTUELLT OIKEALLE > KOLLEKTIVAVTAL OTSIKKONA JA SEN ALLE LINKIT (PDF) KOLLEKTIVAVTAL FÖR ARBETSTAGARE PÅ APO- TEK KOLLEKTIVAVTAL FÖR FARMACEUTISK PERSONAL KOLLEKTIVAVTAL FÖR ARBETSTAGARE PÅ APO- TEK KOLLEKTIVAVTAL FÖR ARBETSTAGARE PÅ APO- TEK KOLLEKTIVAVTAL FÖR FARMACEUTISK PERSONAL OIKEALLE > ARBETSAVTALBLANKETT OTSIKKONA JA ALLE LINKIT (PDF) ARBETSAVTALBLANKETT (KAN FYLLAS I) ARBETSAVTALBLANKETT (PDF) HAKU-elementistä mennään hakutulossivulle, joka tyylitllään tässä määritellyillä typografisilla elementeillä. 2

2 PÄÄNAVIGAATIO AKTIIVINEN SIVU YLÄNAVIGAATION 2. RIVI OIKEA NAVIGOINTIPALSTA (TIEDOSTOLINKIT, ULOS VIEVÄT LINKIT, SISÄSIVUILLE VIEVÄT TÄRKEÄT LINKIT) PÅ SVENSKA HAE ETUSIVU JÄSENTIEDOTTEET SOPIMUKSET OPPAAT LOMAKKEET TILASTOT NEUVONTA KOULUTUS LIITTO 2011 YKSITTÄINEN TIEDOTESIVU X KPL INTRO TYÖSOPI- MUSLOM. INTRO? INTRO 2011 INTRO USEIN KY- SYTTYÄ INTRO EK-TIETO INTRO HALLINTO YKSITTÄINEN TIEDOTESIVU X XKPL YKSITTÄINEN TIEDOTESIVU X XKPL YKSITTÄINEN TIEDOTESIVU X XKPL TYÖNTEKI- JÖIDEN TES (PDF) FARMA- SIAN TES (PDF) LOMAKE TÄYTETTÄ- VÄ PDF LOMAKE TULOSTET- TAVA PDF VUOSILOMAOPAS (PDF) TYKY-KANSIO (PDF) EK.FI OTA YH- TEYTTÄ KOEAIKA AIHEPIIRILISTAUKSET OIKEALLE PALSTALLE. TYÖSOPIMUS/ TYÖSUHTEEN PÄÄTTÄMINEN EK-TIEDON KOULUTUS EK-KAUP- PAPAIKKA EK-TIEDON KURSSIT LIITY JÄSENEKSI SÄÄNNÖT KAUPAN LIITTO SÄÄNNÖT LIITY JÄ- SENEKSI APTA- RAHASTO HAKU- LOMAKE MYÖNNE- TYT APURAHAT YKSITTÄINEN TIEDOTESIVU X XKPL YKSITTÄINEN TIEDOTESIVU X XKPL YKSITTÄINEN TIEDOTESIVU X XKPL VAPAAT TYÖAIKA PALKANMAKSU/ ODOTUSAJAN PALKKA SAIRAUSAJAN PALKKA TILAPÄISET POISSAOLOT / PALKANMAKSU VUOSILOMA/ LOMALTAPALUU RAHA EK.FI HAKULO- MAKE MYÖN- NETYT APURAHAT LIITY JÄSENEKSI OSOITTEEN- MUUTOS OTA YH- TEYTTÄ PALAUTE HAKULO- MAKE MYÖN- NETYT APURAHAT OSOIT- TEENMUU- TOS HAKULO- MAKE MYÖN- NETYT APURAHAT LIITY JÄSENEKSI FOOTER APTEEKKIEN TYÖNANTAJALIITTO Eteläranta 10 PL Helsinki Puh Gsm Fax etunimi.sukunimi@apta.fi LIITTO Hallinto Säännöt APTA-rahasto Osoitteenmuutos Liiity jäseneksi (Pdf) PÅ SVENSKA Kollektivavtal Arbetsavtalblankett Aktuellt SOPIMUKSET Työntekijöiden TES (Pdf) Farmasian TES (Pdf) Työsopimuslomake OPPAAT Vuosilomaopas (Pdf) TYKY-kansio (Pdf) NEUVONTA Usein kysyttyä JÄSENTIEDOTTEET LOMAKKEET TILASTOT KOULUTUS OTA YHTEYTTÄ PALAUTE 3

3 APTA.FI GRAAFINEN OHJEISTO VISUAALINEN ILME / VÄRIT Visuaalinen ilme / värimaailma VÄRIT JA NIIDEN KÄYTTÖ LINKIT JA HOVER APTA.fi:n uudistuksen päätavoite on antaa liitosta ajan mukainen, nuorekas, asiantunteva ja lähestyttävä mielikuva. Apta.fi:n päävärit ovat valkoinen, raikas vihreä sekä harmaan eri sävyt. Minimalistinen värikartta vahvistaa asiantuntevuutta ja samalla vihreä luo siihen kontrastia ja nuorekkuutta sekä toimii verkossa linkkien ja vuorovaikutteisten elementtien päävärinä. Kuvailmaisun osalta sivusto on melko minimalistinen kuva on varattu pääsääntöisesti etusivulla käytettäväksi, muu sivuston ilme muodostuu värien ja typografian harkitusta käytöstä. APTA.fi:n teknisen alustan blokkimainen rakenne on nostettu visuaaliseksi elementiksi kautta koko sivuston. Blokkien hienovarainen esiintuominen on toteutettu valitsemalla sivuston taustaväriksi hillitty vaalean harmaan sävy, #e5e8e8. Ilmeuudistuksessa keskeinen vihreä, #73c82c, on verkossa varattu logon lisäksi käytettäväksi otsikoissa, navigaatiossa ja linkeissä. Vihreää käytetään neliskulmaisena bullettivärinä myös listoissa. Näin pääsisältö yhdistyy värin kautta APTA-logoon ja antaa liitosta aktiivisen ja vuorovaikutteisen mielikuvan. Leipätekstin päävärinä on tumma harmaa, #666, jolla korostetaan tekstisisällön tasolla liiton asiantuntevuutta. Footerin yhteystiedoissa ja linkeissä harmaan sävynä käytetään astetta vaaleampaa sävyä, #999, erottamaan footerin sisältö ensisijaisesta sisällöstä. Apta.fi:n ilmeen kannalta olennaisissa vaakaviivaelementeissä käytetään pääsääntöisesti harmaan sävyä #d6d6d6. Poikkeuksen tästä tekee alasivuilla oikealla palstalla käytetty vihreä vaakaviivastoelementti, jolla nostetaan navigointisisältö esiin päätekstisisällöstä. Etusivulla Secondary content arean nostootsikkojen alla on lisäksi käytössä 5px:n paksuinen, 90px leveä vihreä #73c82c vaakalinja. Leipätekstilinkin väri on vihreä, #73c82c, hover alleviivaus. Leipätekstilinkeissä ei käytetä erikseen a visited-määrittelyä. Ylänavigaation linkit ovat vihreitä, hover- ja active-efektinä käytetään bold-leikkausta. Etusivulla ja ja alasivuilla oikean palstan pikalinkkinavigaation hover- ja active-värinä on vaaleanharmaa taustaväri, #f7f8f8. Yksittäisten jäsentiedotesivujen kohdalla oikealla palstalla käytetään Kaikki vuoden tiedotteet -selauslistaa. Näissä hover on underline, active-määritys puolestaan harmaa #666 underline. 4

4 APTA.FI GRAAFINEN OHJEISTO VISUAALINEN ILME / VÄRIT VIHREÄ #73C82C OTSIKOT, PÄÄNAVIGAATIO, TEKSTILINKIT, LISTOJEN BULLETIT JA IKONIT VAALEA HARMAA #E5E8E8. SIVUSTON TAUSTAVÄRI HARMAA #D6D6D6, LINJAT JA VIIVAELEMENTIT PAKSUUS 1PX VAALEA HARMAA #F7F8F8 OIKEAN PALSTAN NAVIGAATION HOVER- JA ACTIVE TAUSTAVÄRI TUMMA HARMAA # LEIPÄTEKSTI HARMAA #999 FOOTERIN LINKIT JA TEKSTISISÄLTÖ 5

5 APTA.FI GRAAFINEN OHJEISTO VISUAALINEN ILME / TYPOGRAFIA Visuaalinen ilme / typografia KIRJASIMET JA NIIDEN KÄYTTÖALUEET APTAn ilmeuudistuksen myötä verkossa käytettäviä kirjasimia lisätään. Aiemman Arialin rinnalle on oteuttu käytetty DIN eri leikkauksineen. Verkossa Dinistä käytetään verkkoversioperhettä FF DIN WEB ja siitä leikkauksia regular, bold ja light. Dinin ohella verkossa säilytetään Arialkirjasin leipäteksti-, ingressi- ja listatasoilla. FF DIN WEB eri leikkauksineen on varattu käytettäväksi header-blokissa, ylä- ja alanavigaatiossa, otsikoissa sekä footerissa. Etusivulla on omat nosto-otsikkonsa sekä pääotsikkonsa, joiden tyylit eivät toistu muualla sivustolla. Sivustolla aiemmin pääfonttina käytetty Arial säilyy uudistetussa apta.fi:ssä. Sen käyttö on varattu suurempiin tekstimassoihin, eli ingresseihin, leipätekstiin ja listoihin. Muiden kuin em. kirjasinten ja tässä määriteltyjen leikkausten ja värivaihtoehtojen käyttö ei kuulu apta. fi:n typografiaan. FF DIN WEB YLÄNAVIGAATIO JA HEADERIN TEKSTIT/ FF DIN WEB REGULAR HOVER+ACTIVE-LEIKKAUKSENA FF DIN WEB BOLD OIKEAN PALSTAN NAVIGAATIO JA FOOTERIN TEKSTIT JA LINKIT FF DIN WEB REGULAR OTSIKOT H1-H3 / FF DIN WEB LIGHT ARIAL VERKOSSA YKSI KÄYTETYIMMISTÄ KIRJASIMISTA VARMAN TOISTETTAVUUTENSA VUOKSI. LUETTAVUUDELTAAN SELKEÄ, SISÄLTÄÄ MONIA ERI LEIKKAUKSIA. APTA.FI:SSÄ ARIALISTA KÄYTETÄÄN LEIKKAUSTA REGULAR. ERISNIMISSÄ JA MUISSA KOROSTETTAVISSA ASIOISSA SUOSITELLAAN KÄYTETTÄVÄKSI LEIKKAUSTA BOLD. 6

6 APTA.FI GRAAFINEN OHJEISTO VISUAALINEN ILME /TYPOGRAFIA VAIN ETUSIVULLA KÄYTÖSSÄ OLEVAT TYYLIT PÄÄOTSIKKO OTSIKKONOSTOT KALENTERIELEMENTTI FF DIN WEB LIGHT PT, 36RV # 73C82C Conne sanis remoluptiis Pudigendant. TIEDOTTEET JÄSENILLE TAPAHTUMAT JA KOULUTUKSET FF DIN WEB LIGHT 26PT, 26 RV # 73C82C OTSIKON ALALINJA 5 PX KORKEA, 90 PX LEVEÄ VÄRIALUE # 73C82 Conne sanis remoluptiis Pudigendant. KUVAELEMENTTINÄ PX KORKEA VAAKAVIIVASTO TAMMIKUU FF DIN WEB REGULAR 12PT, UPPERCASE #FFF KALENTERIN PÄIVÄT ARIAL BOLD 10PT # 73C82C KALENTERIN PÄIVÄMÄÄRÄT ARIAL REGULAR 10PT, RV20PT # 73C82C

7 APTA.FI GRAAFINEN OHJEISTO VISUAALINEN ILME /TYPOGRAFIA PERUSTYYLIT HEADERIN TYYLIT APTEEKKIEN TYÖNANTAJALIITTO FF DIN WEB REGULAR 16PT, 16RV, UPPERCASE # 73C82C APTEEKKIEN TYÖNANTAJALIITTO PÅ SVENSKA, HAE FF DIN WEB REGULAR 12PT, UPPERCASE # 73C82C PÅ SVENSKA, HAE HAKUKENTTÄÄN SYÖTETTÄVÄ TEKSTI ARIAL 12PT, #999 Lorem ipsum YLÄNAVIGAATIO FF DIN WEB REGULAR 12PT, UPPERCASE # 73C82C ETUSIVU HOVER JA ACTIVE FF DIN WEB BOLD 12 PT, UPPERCASE # 73C82C ETUSIVU FOOTER-TYYLIT FF DIN WEB REGULAR 10PT, RV 14, UPPERCASE + REGULAR #999 USEIN KYSYTTYÄ usein kysyttyä usein kysyttyä OTSIKOT H1 FF DIN WEB LIGHT 36PT, 32 RV # 73C82C ALAMARGINAALI PX ALKAA 60 PX SISÄLTÖALUEEN YLÄREUNASTA Otsikko H2 FF DIN WEB LIGHT 24PT, 24RV # 73C82C 1PX YLÄLINJA #D6D6D6 YLÄMARGINAALI 30PX ALAMARGINAALI 30PX Otsikko H3 FF DIN WEB LIGHT 20PT, 20RV # 73C82C ALAMARGINAALI 20PX Otsikko INGRESSI ARIAL REGULAR 14PT, 18RV #666 Tusam ration proviti busanis mo cus, quam ad ulpa volesti qui aut lab idio quo de sae precae molupta estemporecat laccus illorescitis eum quia sam fugit, sam volentem eossum aut vernat ad quossunt OIKEAN PALSTAN NAVIGAATIO FF DIN WEB REGULAR 10PT, UPPERCASE # 73C82C KUNKIN LINKKIALUEEN KORKEUS 30PX VASEMMALLA OLEVA NUOLI JA IKONI KUVANA > USEIN KYSYTTYÄ FARMASIAN TES HOVER + ACTIVE: PALSTAN LEVYINEN 30PX KORKEA TAUSTAVÄRI #F7F8F8 > USEIN KYSYTTYÄ 8

8 APTA.FI GRAAFINEN OHJEISTO VISUAALINEN ILME /TYPOGRAFIA LEIPÄTEKSTI PERUSLISTA JÄSENTIEDOTE YLÄLISTA JÄSENTIEDOTE AIKALISTA OIKEAN PALSTAN NAVIGOINTILISTA ARIAL 12PT, 16RV #666 Tusam ration proviti busanis mo cus, quam ad ulpa volesti qui aut lab idio quo de sae precae molupta estemporecat laccus illorescitis LINKIT # 73C82C HOVER > UNDERLINE viti busanis mo cus quam ad ulpa precae molupta recat laccus illorescitis BULLET 20PT SISENNYS ARIAL 12PT, 16RV #666 Tusam ration proviti busanis mo cus, quam ad ulpa volesti qui aut lab idio quo de sae precae molupta estemporecat laccus illorescitis eum quia sam fugit, sam volentem aut of- aut vernat ad quossunt BULLET 20PT SISENNYS ARIAL 10PT, 14RV #666 ALAMARGINAALI 60PX Tusam ration proviti busanis mo cus, quam ad ulpa volesti qui aut lab idio quo de sae precae molupta estemporecat laccus illorescitis eum quia sam fugit, sam vo- eossum aut vernat ad quossunt BULLET 20PT SISENNYS ARIAL 10PT, 14RV #666 Tusam ration proviti busanis mo cus, quam ad ulpa volesti qui aut lab idio quo de sae precae molupta estemporecat laccus illorescitis eum quia sam fugit, sam vo- eossum aut vernat ad quossunt HUOM! TÄMÄ TYYLI ON KÄYTÖSSÄ YKSIT- TÄISISSÄ JÄSENTIEDOTTEISSA. LISTAN ALLE TULEVA LEIPÄTEKSTI ON MYÖS SISENNETTY 20PT, KTS. MALLISIVU AJANKOHTAISTA 25/11 OTSIKKO DIN WEB REGULAR 10PT, 14RV, UPPERCASE #73C82C LISTA ARIAL 10PT, 14RV #666 HOVER > UNDERLINE ACTIVE > HARMAA #666 UNDERLINE VUODEN 2011 TIEDOTTEET Lorem ipsum dolor sit ametsoluptae consect umendipsae mo vel maximi volupid ma nitaspidem Me est exeri dem atiumqui volore, sape excepudae pre volupid ma nitaspidem Me est exeri dem atiumqui Me est exeri dem atiumqui 9

9 APTA.FI GRAAFINEN OHJEISTO SIVUPOHJAT JA TOIMINNALLISUUDET / ETUSIVU Sivupohjat ja toiminnallisuudet / etusivu ETUSIVUPOHJA Etusivun kokonaisleveys on 780 px. Sivu jakautuu ylhäältä alas vaakasuunnassa neljään sisältöalueeseen. HEADERin sisällön muodostavat logo (toimii alasivuillla linkkinä etusivulle), oikealle ryhmitelty På Svenska-navi sekä sivuston sisältöön kohdistuva hakuelementti. PÄÄNAVIGAATIO sijoittuu näiden alle. Se sisältää 9 navia ja on etusivulla yksitasoinen. Navigaation 1. rivi a lkaa 30px logon alareunasta. 1. navirivin korkeus on 10px. Navigaation ja header-taustan väliin jää 20px tilaa. Header erotetaan alla olevasta pääsisältöalueesta 20px:n marginaalilla. MAIN CONTENT AREA sisältää vasemmalla paikan imagokuvalle ja oikealla paikan nostotekstille. Sekä kuva että teksti ovat päivitettäviä elementtejä. Tekstiin on Apta.fi-sivustolla on käytössä kaksi sivupohjaa; etusivun sivupohja ja alasivuilla omansa. Koska uudistus on tehty sivustolla jo käytössä olevan t eknisen alustan päälle, muutoksia sivupohjien leveyteen tai palstajakoon ei ole tehty. Suurin uudistus koskee navigoinnin ja sisällön uudelleen ryhmittelyä, joilla on pyritty selkeyttämään navigointia ja helpottamaan kävijän sisällön hahmottamista ja navigoimista sivustolla. Etusivun erilainen palstajako on uudistuksessa säilytetty, jotta se muodostaisi selkeän eron alasivuihin ja vahvistaisi sivustohierarkiaa ja rakennetta. mahdollista tehdä linkityksiä. Main content areaan on mahdollista vaihtoehtoisesti sijoittaa koko palstan levyinen kuva ja tehdä siitä linkitys, esim. erilaisten kampanjoiden ajaksi. Jotta tämä olisi helppoa, tekstipalstan leveys muodostuu kuvan leveydestä, kaksipalstaista jakoa käytettäessä kuvan maksimileveys on 0px jotta tekstisisällölle jää tarvittava leveys. Koko palstan kuvan leveys on 700px. SECONDARY CONTENT AREA on jaettu vaakasuunnassa kolmeen palstaan. Vasen ja keskimmäinen palsta ovat samankokoisia, leveys 210px ja ideaalikorkeus 360px. VASEN PALSTA on varattu Jäsentiedotteille. Sisältö haetaan tähän automaattisesti Jäsentiedotteet-osiosta: nostetaan kahden uusimman jäsentiedotteen aiheosiolistaus julkaisupäivämäärineen. Listan otsikko toimii linkkinä kyseiseen tiedotteeseen. Nostojen alle tulee linkki Jäsentiedotteet-osion pääsivulle (Jäsentiedotteet> 2011). Keskimmäinen palsta on varattu Tapahtumat ja koulutukset-osiolle. Päivitettävän tekstialueen sisälle on mahdollisuus kirjoittaa aihealueeseen liitttyvää tekstiä ja tehdä linkityksiä. OIKEANPUOLIMMAINEN PALSTA on leveydeltään 190px. Tähän palstaan sijoittuu ylimmäksi KALENTERI ELEMENTTI, jossa näytetään ajankohtaiset tapahtumat ja koulutukset. Kalenterin leveys on koko palsta, 190px, ideaalikorkeus 225 px. Kalenterielementti erotetaan pystysuunnassa 5 px:n korkuisella harmaalla vaaka viivalla alla olevista neljästä pikalinkistä. PIKALINKIT johtavat sivuston vuorovaikutteisiin osiohin. Linkkejä on mahdollisuus päivittää ja korvata jatkossa toisilla linkeillä. Secondary content arean kolme palstaa tasataan alareunoistaan, huolimatta niiden sisällön korkeudesta. FOOTER on jaettu 5 palstaan. Vasemmalle kahdelle palstalle sijoittuvat yhteystiedot, kolmella muulla palstalla on linkit sivuston tärkeimpään sisältöön. Linkkejä on jatkossa voitava päivittää ja lisätä. Footerin ylä- ja alamarginaali on px. 10

10 W780 APTA.FI GRAAFINEN OHJEISTO SIVUPOHJAT JA TOIMINNALLISUUDET / ETUSIVU HEADER LOGON JA NAVIN VÄLISSÄ 30PX 1. NAVITASON KORKEUS 10PX 20 PX ALAMARGINAALI 20 LOGO W250 NAVIGAATIO W700 PALSTA W150 sisältöleveys 700px vasemmalla logo (w250), joka toimii linkkinä etusivulle oikea palsta (w150) sisältää logon, PÅ SVENSKA-navin ja haun. MAIN CONTENT IMG W0 H300 TEKSTISISÄLTÖÄ W260 H sisältöleveys 700px Vasemmalla imagokuva, leveys 0, korkeus 300px. Mahdollisuus kuvan päivittämiseen. Oikealla tekstisisältöalue, leveys 260px, korkeus vaihtelee sisällön mukaan, ideaalikorkeus on kuvan korkeus eli 300px. Tekstialueelle mahdollisuus tekstin päivittämiseen ja linkitysten tekemiseen. Mahdollista vaihtoehtoisesti sijoittaa koko palstan levyinen kuva ja tehdä siitä linkitys sivustolle, mitat tällöin w700, h300px. SECONDARY CONTENT LEFT COL TEKSTISISÄLTÖÄ W210 MIDDLE COL TEKSTISISÄLTÖÄ W RIGHT COL KALENTERI & LINKIT W190 sisältöleveys 7px, jaettu 3 palstaan. LEFT COL= Tiedotteet jäsenille leveys 210px, ideaalikorkeus 360px Otsikon alle haetaan kahden uusimman jäsentiedotteen tiivistelmä. MIDDLE COL=Tapahtumat ja koulutukset leveys 210px, ideaalikorkeus 360px. Otsikon alle mahdollisuus päivittää vapaasti tekstiä ja tehdä linkityksiä. RIGHT COL=kalenterielementti ja 4 x linkit, palstan leveys 190px. Ylimmäiseksi sijoittu kalenterielementti, jonka korkeus saa olla 225px. Kalenterin alle 4 kpl:een linkkilista. Kunkin linkin korkeus on 30px. Mahdollisuus linkkien päivittämiseen tekstin osalta. Kaikki Secondary Content Arean palstat tasataan korkeussuunnassa alareunastaan. FOOTERIN YLÄMARGINAALI FOOTERIN ALAMARGINAALI 5 PALSTA 1 PALSTA 2 PALSTA 3 PALSTA 4 PALSTA 5 FOOTER sisältöleveys 700px, joka jakautuu 5 palstaan Vasemmanpuoleiset 2 palstaa sisältävät APTAn yhteystiedot. Muut 3 palstaa sisältävät linkitykset sivuston tärkeimpiin osiin. Footerissa mahdollisuus lisätä ja päivittää linkkejä. Footerin ylä- ja alamarginaali on px. 11

11 12 apta.fi / ETUSIVU

12

13 APTA.FI GRAAFINEN OHJEISTO SIVUPOHJAT JA TOIMINNALLISUUDET / ALASIVUPOHJA Sivupohjat ja toiminnallisuudet / alasivut APTA.fi:n alasivupohjien kohdalla tulee esiin uudistuksen merkittävin tekijä eli navigoinnin uudelleen ryhmittely sisällön mukaan. Aiemmin ylä navigaation toiselta tasolta ohjattiin myös tiedostoon ja kokonaan ulos sivustolta. Uudistuksessa em. ohjaukset on poistettu päänavigaatiosta ja siireretty alasivupohjan oikealle palstalle. Tällä on pyritty selkeyttämään navigointia ja lisäämään sivuston käytettävyyttä. Kun sivustolle jatkossa tulee tarve lisätä ylänavigaatioon linkkejä, tulee niille luoda myös alasivu. Tiedostolinkit tai suoraan ulos sivustolta ohjaavat linkit lisätään aihepiiriin kuuluvan sivun oikealle palstalle. ALASIVUPOHJA Alasivun kokonaisleveys on 780px. Sivu jakautuu ylhäältä alas vaakasuunnassa kolmeen sisältöalueeseen. Ylimpänä sijaitsee HEADER, jonka sisältö ja asemointi on identtinen etusivupohjan kanssa. Erona etusivupohjaan, alasivuilla PÄÄNAVI- GAATIO on välillä yksi, välillä kaksitasoinen. Navigaation 1. rivi a lkaa 30px logon alareunasta. 1. navirivin korkeus on 10px ja alamarginaali 10px. 2. navirivin korkeus on 10px. Navigaation ja header-taustan väliin jää 20px tilaa. Header erotetaan sen alla olevasta pääsisältöalueesta 20px:n marginaalilla. Headerin alle sijoittuva alasivupohjan pääsisältöalue on jaettu kahteen palstaan: vasemmalla on LEFT COL, leveys 585 px, oikeanpuolimmainen palsta, RIGHT COL, on 90px leveä. Palstoja erottaa toisistaan 5px levyinen alue. LEFT COL on rajattu molemmilta puolin px marginaaleilla. Palsta venyy korkeussuunnassa sisällön mukaan, palstan alamarginaali on px. Tähän palstaan sijoittuu sivuston suurin tekstimassa. H1-otsikkotaso määrittää korkeussuunnassa tekstin alkamiskohdan kaikilla sivuilla. Poikkeuksen tekee Jäsentiedotteet-osion vuositason sivut, joissa ennen H1;stä tulee selauselementti. Se alkaa 20px left colin yläreunasta. Selauden vaatima korkeus on 20px ja alamarginaali 20px. Sivustolla on käytössä erilaisia otsikointi- ja listaushierarkioita. Näin ollen yhdenmukaistavana elementtinä toimii aina 60px left colin yläreunasta alkava H1, sen alle vaihtelevasti tulevat ingressi- ja listatyylit ja niille määritellyt alamarginaalit määrittävät leipätekstin alkamispaikan. Left colin pääteksti sisältö on päivitettävää. RIGHT COL on varattu APTAn yhteystiedoille ja linkeille. APTA:n yhteystiedot sijoittuvat heti palstan yläreunaan viivastoelementin alle. Tämä elementti toistuu jokaisella alasivulla. Yhteystietojen alle tulee suurimmalla osalla sivuista lisäksi pikalinkkejä joko tiedostoon, sivuston sisäsivuille tai ulos sivustolta. Oikean palstan linkkejä on mahdollista lisätä ja päivittää tekstin osalta. Tiedostolinkkien eteen tulee oma ikoni, joka voidaan valita julkaisujärjestelmästä linkkiä luotaessa. Oikealle palstalle voidaan ajatella sijoitettavan myös esim. bannereita, mikäli sellaisia on sivustolle tulossa. Tällöin niiden maksimileveys on palstan leveys, eli 190 px. Alasivupohjan palstat tasataan alareunoistaan, huolimatta niiden sisällön korkeudesta. Kuten etusivulla, myös alasivupohjalla pääsisältöalueen alle sijoitetaan footer, joka on identtinen etusivupohjan footerin kanssa. 14

14 NAVIGAATIO LOGON JA NAVIN VÄLISSÄ 30PX 1. NAVITASON KORKEUS 10PX 1. JA 2. NAVITASON VÄLISSÄ 10PX 2. NAVITASON KORKEUS 10PX 20 PX ALAMARGINAALI 20 PX HEADERIN JA CONTENTIN VÄLISSÄ 20 PX ENNEN SELAUSLISTAN ALKUA 20 PX SELAUSLISTAN KORKEUS 20 PX SELAUSLISTAN ALAMARGINAALI H1 FF DIN WEB LIGHT 36PT, 32RV H1 ALAMARGINAALI PX SISÄLTÖALUEEN LEVEYS 505PX KIRJASIN JA LEIKKAUS: FF DIN WEB REGULAR, UPPERCASE 12PT, 18RV, # 73C82C HOVER JA ACTIVE: FF DIN WEB BOLD UPPERCASE 12PT, 18RV, # 73C82C 1. ja 2. navirivin välissä 10px marginaalia. 2. navirivin korkeus 10px. Kirjasin, leikkkaus ja hover kuten 1. navitasossakin. 2. tason navigaation ja headerblokin välinen marginaalion 20px. H2:N YLÄMARGINAALI 30PX H2 FF DIN WEB LIGHT 24PT, 24RV + 1PX YLÄLINJA H2:N ALAMARGINAALI 30PX PERUSLISTA VIHREÄ BULLET ARIAL 12PT, 16RV 20 PT SISENNYS 5 LEFT COL Alasivujen sivupohjan vasen palsta on varattu päätekstisisällölle. Palstan leveys on 585 px ja sen ympärillä on px levyiset marginaalit. H1 alkaa aina 60px sisältöalueen yläreunasta. H1:n alamarginaali on px. Seuraavien otsikkotasojen (h2) tai lista - ja ingressityylien alamarginaali määrittää sen jälkeen tulevien tekstityylien alkamiskohdan. RIGHT COL Yläreunassa px:n korkuinen vihreä viivasto. Yhteystiedot erottaa alle tulevista linkeistä 1px:n korkuinen #d6d6d6 harmaa vaakalinja. LEFT COLIN ALAMARGINAALI PX FOOTERIN YLÄMARGINAALI PX 5 FOOTER On identtinen etusivupohjan footerin kanssa. 15 FOOTERIN ALAMARGINAALI PX

15 apta.fi / JÄSENTIEDOTTEET

16

17 apta.fi / YKSITTÄINEN JÄSENTIEDOTE + JÄSENTIEDOTE YLÄLISTA + JÄSENTIEDOTE AIKALISTA + OIKEAN PALSTAN NAVIGOINTILISTA 18

18 SISÄLTÖALUEEN LEVEYS 505PX H1 FF DIN WEB LIGHT 36PT, 32RV H1 ALAMARGINAALI PX JÄSENTIEDOTE YLÄLISTA ARIAL 10PT, 14RV #666 LISTAN ALAMARGINAALI 30PX H2:N YLÄMARGINAALI 30PX H2 H2 ALAMARG 30PX H3 FF DIN WEB LIGHT 20PT, 20RV H3ALAMARG 20PX AIKALISTA VIHREÄ BULLET ARIAL 10PT, 14RV 20 PT SISENNYS RIGHT COL OIKEAN PALSTAN NAVIGOINTILISTA OTSIKKO DIN WEB REGULAR 10PT, 14RV, UPPERCASE #73C82C LISTA ARIAL REGULAR 10PT, 14RV #666 HOVER > UNDERLINE ACTIVE > HARMAA #666 UNDERLINE 19

19 20

20

21 apta.fi / SOPIMUKSET + INGRESSI + OIKEAN PALSTAN NAVIGAATIO 22

22 SISÄLTÖALUEEN LEVEYS 505PX H1 H1 ALAMARGINAALI PX INGRESSI ARIAL 14PT 18RV #666 INGRESSIN ALAMARG 30PX H2:N YLÄMARGINAALI 30PX H2 H2:N ALAMARGINAALI 30PX PERUSLISTA RIGHT COL OIKEAN PALSTAN NAVIGAATIO FF DIN WEB REGULAR 10PT, UPPERCASE # 73C82C KUNKIN LINKKIALUEEN KORKEUS 30PX VASEMMALLA OLEVA NUOLI JA IKONI KUVANA HOVER + ACTIVE: PALSTAN LEVYINEN 30PX KORKEA TAUSTAVÄRI #F7F8F8 22

23 24

24

25 apta.fi / OPPAAT + H2 SUORAAN H1:N ALAPUOLELLA 26

26 SISÄLTÖALUEEN LEVEYS 505PX H1 H1 ALAMARGINAALI PX H2:N YLÄMARGINAALI 30PX H2 H2:N ALAMARGINAALI 30PX 26

27 28

28