CSS-jatkokurssi. Verkkosivustojen suunnittelu ja rakentaminen

Koko: px
Aloita esitys sivulta:

Download "CSS-jatkokurssi. Verkkosivustojen suunnittelu ja rakentaminen"

Transkriptio

1 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 5.1 Pseudo-luokat 5.2 Navigointipalkki 5.3 Alaosan linkit 5.4 Tekstikenttien linkit 5.5 Linkkien tyylimääritteet 6 CSS3-ominaisuuksien lisääminen 7 Alasvetovalikko 8 Kirjautumislaatikko 9 Sivun viimeistely 10 Lopputehtävä 11 Linkkejä

2 1 Johdanto Tervetuloa opiskelemaan CSS-kielen jatkokurssille! Tällä kurssilla opetellaan rakentamaan websivut ennalta suunniteltua graafista mallia noudattaen ja sivun asemointiin vaikuttavia CSSkielen tyylimääritteitä hyväksi käyttäen. Sivun rakentamisen edetessä tutustutaan samalla myös uusiin CSS-kielen ominaisuuksiin. Kurssille osallistuminen vaatii HTML- ja CSS-kielen perusteiden ymmärtämistä. On suositeltavaa tutustua myös Web-suunnittelijan työkalut -kurssiin, jossa esitellään erilaisten web-suunnittelua helpottavien ohjelmien käyttöä.

3 2 Tiedostot Grafiikka Tallenna heti ensimmäisenä koneellesi CSS_Demo-niminen PSD-layout, jota käytetään kurssin esimerkkimateriaalina. Mikäli käytössäsi ei ole Adobe Photoshop -ohjelmaa, voit avata tiedoston myös ilmaiseksi saatavalla GIMP-kuvankäsittelyohjelmalla. Lataa GIMP tästä. Sivun layoutin rakenne on seuraavanlainen:

4 Aluksi on syytä pohtia, mitkä sivun elementeistä ovat CSS-tyylimäärittelyillä toteutettavia ja mitkä eivät. Tässä esimerkissä et tarvitse käyttöösi muita graafisia elementtejä kuin yläosion taustakuvan ilman kirjautumislaatikkoa. Kaikki muu on luotavissa CSS-tyylimääritteillä. Piilota siis kuvankäsittelyohjelmalla kaikki kirjautumislaatikkoon liittyvät tasot ja leikkaa kuvasta irti yläpaneelin kaupunkiaiheinen taustakuva (tarkka mitta on 1000 x 306 pikseliä). Luo projektille oma kansio ja tallenna kuva gfx-nimiseen alikansioon nimellä header.jpg. HTML- ja CSS-tiedostot CSS-tyylimääritteet kirjoitetaan omaan erilliseen tiedostoonsa, jolloin koko sivuston ulkoasun päivittäminen käy näppärästi ainoastaan yhtä tiedostoa muokkaamalla. Ensin luodaan esimerkki.html -niminen tiedosto, johon syötetään seuraavanlaiset tiedot sivun rakennetta varten: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <link rel="stylesheet" href="layout.css"/> <title></title> </head> <body> </body> </html> Tyylimääritteitä varten luodaan layout.css -niminen tiedosto, jonka sisältö on aluksi seuraava: html { body {

5 3 Sivun osiointi Sivun layout voidaan jakaa rakenteellisesti seuraaviin osiin: yläosaan, navigointipalkkiin sekä paneeleihin. Vasen paneeli sisältää sivun syötteet-osion, kun taas oikea paneeli sisältää varsinaisen sisällön esittämiseen varatut laatikot. Myös linkit sisältävä sivun alaosa on yksi paneeleista. Sivun rakenteen osiointi laatikoihin tapahtuu seuraavasti: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <link rel="stylesheet" href="layout.css"/> <title></title> </head> <body> <div id="sitemasterwrapper"> <!--Sivun yläosa --> <div id="siteheader"> <!--Navigointipalkki --> <div id="sitenavigation">

6 <!--Paneelit --> <div id="sitepanelswrapper"> <!--Vasemman paneelin sisältö --> <div id="leftinfopanelcontainer"> <!--Oikean paneelin sisältö --> <div id="rightinfopanelwrapper"> <div id="rightpanelcontainer"> <div id="leftpanelcontainer"> <div id="bottompanelcontainer"> <!--Alapaneelin sisältö --> <div id="sitefooterwrapper"> </body> </html> Huomaa, että oikean paneelin (rightinfopanelwrapper) sisältämät laatikot eivät sijoitu lähdekoodissa niiden johdonmukaisessa järjestyksessä vasemmalta oikealle. Käytännössä tämäntyyppisellä sijoittelulla ei ole väliä lopputulosta ajatellen, vaan niiden sijainti ruudulla voidaan ratkaista käyttäen tyylimääritteitä. Tämän jälkeen muokataan layout.css-dokumenttia ja luodaan sivun osioille tyylimääritteet. Jo tässä vaiheessa määritellään laatikkoelementtien koko- ja sijaintiominaisuudet sekä sijoitetaan layoutista irrotettu taustakuva sivun yläosaan. Rakenteen havainnollistamiseksi jokaiselle laatikolle on väliaikaisesti lisätty mustat reunaviivat. html { height:100%; margin-bottom:1px; body { margin:0; padding:0; #sitemasterwrapper { width:1000px; margin-left:auto; margin-right:auto; margin-top:20px; border:1px solid black;

7 #siteheader { height:308px; width:1000px; background-image:url('gfx/header.jpg'); background-repeat:no-repeat; position:relative; #sitenavigation { height:20px; margin-top:10px; border:1px solid black; #sitepanelswrapper { width:1000px; margin-top:10px; border:1px solid black; #leftinfopanelcontainer { float:left; width:156px; border:1px solid black; #rightinfopanelwrapper { float:right; width:830px; border:1px solid black; /*oikean lohkon paneelit */ #leftpanelcontainer { float:left; width:402px; min-height:200px; margin-bottom:15px; border:1px solid black; #rightpanelcontainer { float:right; width:402px; min-height:200px; margin-bottom:15px; border:1px solid black; #bottompanelcontainer { clear:both; min-height:100px; border-top:10px solid #fff;

8 margin-left:5px; margin-bottom:15px; border:1px solid black;.panelclearboth { clear:both; height:1px; /*Alapaneeli */ #sitefooterwrapper { clear:both; background-color:#9fd4f2; min-height:60px; width:1000px; margin-top:5px; border:1px solid black; Paneelien laatikoille on määritelty minimikorkeudet, jotta laatikoilla olisi visuaalista arvoa niiden ollessa tyhjinä. Myös html-valitsimelle on annettu määrittely, joka estää vierityspalkin turhan ilmestymisen joissakin selaimissa. Clear:both-määrittely pudottaa oikean paneelin alalaatikon ja alapaneelin laatikon omille riveilleen. Alapaneelin taustavärin tarkka arvo on määritelty ottamalla väri layout-kuvasta kuvankäsittelyohjelman pipetti-työkalun avulla. Paneelien sisällä oleville laatikoille on määritelty sijainti float-ominaisuutta käyttäen. Floatominaisuus pätee ainoastaan elementteihin, joiden position-ominaisuuden arvona on joko static (oletusarvo) tai relative. Tässä laatikoille ei kuitenkaan ole määritelty position-ominaisuutta, joten kaikki rightinfopanelwrapper-luokan laatikot saavat ominaisuuden oletusarvon ja sijoittuvat näin float-arvojen mukaisesti. position-ominaisuuden eri arvot:. position:static; (oletusarvo) Elementin asemointi määrittyy suhteessa muiden elementtien asemointiin. Top-, left-, right- ja bottom-ominaisuuksilla ei ole vaikutusta elementin asemointiin. position:relative; Asettelee elementin suhteessa sen normaaliin asemointiin. Siirtymä voidaan määritellä top- ja left-ominaisuuksilla. Elementtien päällekkäisyydet ovat mahdollisia. position:absolute; Määrittelee elementin asemoinnin suhteessa emoelementin asemointiin (poikkeuksena static-elementti). Elementtien päällekkäisyydet ovat mahdollisia.

9 position:fixed; Määrittelee elementille täysin absoluuttisen asemoinnin suhteessa selainikkunaan; elementti pysyy paikallaan, vaikka sivua vieritettäisiin. Elementtien päällekkäisyydet ovat mahdollisia. Esimerkki elementtien sisäkkäisestä asemoinnista: HTML: <div id="ulompilaatikko"> <div id="sisempilaatikko"> CSS: #ulompilaatikko { float:right; position:relative; width:400px; height:400px; background-color:red; #sisempilaatikko { position:absolute; top:20px; left:100px; right:100px; bottom:0px; background-color:green; A01 tehtävä a) Harjoittele värien määrittelyä selvittämällä minkä värikoodin saat poimittua allaolevasta laatikosta. Ilmoita vastaukseksi värin heksadesimaalinen arvo. b) Kuinka ilmoittaisit samanvärisen div-elementin taustavärin arvon RGB-muotoisena? Huom! Jos suoritat kurssia Muikussa, vastaa tehtäviin Muikun tehtävien kautta.

10 4 Otsikko- ja tekstikentät 4.1 Otsikkokentät Seuraavaksi paneelien laatikoille luodaan otsikkoelementit ja teksteille määritellään tyylimääritteet. Vasemman ja oikean paneelin sisältöä muokataan määrittelemällä niille otsikkokentät ja oikean paneelin laatikoille lisäksi myös tekstikentät. Alalaatikolla ei ole otsikkokenttää ollenkaan, ainoastaan tekstikenttä. Koska monet elementeistä käyttävät keskenään samoja tyylimääritteitä, ne saadaan jaettua class-valitsimien avulla. <!--Vasemman paneelin sisältö --> <div id="leftinfopanelcontainer"> <div class="secondarypaneltitle paneltitlecolor"> Feedit <!--Oikean paneelin sisältö --> <div id="rightinfopanelwrapper"> <div id="rightpanelcontainer"> <div class="primarypaneltitle paneltitlecolor"> Blogikirjoitukset <div class="panelcontent"> Tähän tekstiä... <div id="leftpanelcontainer"> <div class="primarypaneltitle paneltitlecolor"> Ajankohtaista <div class="panelcontent"> Tähän tekstiä... <div id="bottompanelcontainer"> <div class="panelcontent"> Tähän tekstiä... CSS-tiedoston perään lisätään kuvaukset otsikoille sekä tekstikentille. Myös tässä esimerkissä layoutin mukaiset värit on saatu pipettiä käyttämällä.

11 /*otsikoiden kuvaukset */.paneltitlecolor { color: #fff;.secondarypaneltitle { background-color:#32a245; padding:5px 5px 5px 10px; font-weight:bold;.primarypaneltitle { background-color:#4679cd; padding:5px 5px 5px 10px; font-weight:bold;.panelcontent { text-align:justify; padding:15px; line-height:140%; 4.2 Tekstikentät Seuraavaksi lisätään hieman sisältöä oikean paneelin tekstikenttiin (panelcontent-elementtien sisään). Jos demonstroivaa sisältöä ei ole muuten tarjolla, niin mainio sekalaista tekstiä generoiva sovellus verkossa on Lorem Ipsum. Sieltä voi kopioida harjoituskäyttöön muutaman eri pituisen tekstin. Samalla luodaan laatikot tekstien, otsikoiden, lähetysajankohdan (/lähettäjälle) sekä sivunumeroinnin ympärille. <!--Oikean paneelin sisältö --> <div id="rightinfopanelwrapper"> <div id="rightpanelcontainer"> <div class="primarypaneltitle paneltitlecolor">

12 Blogikirjoitukset <div class="panelcontent"> Decet Et Jus Aliquip Neo <div class="paneltime"> Maanantai, Elokuu 9, :00 Morbi consequat arcu nunc, et vulputate augue. Praesent vehicula rhoncus dapibus. <div class="panelpagenumber"> 1 of 4 <div id="leftpanelcontainer"> <div class="primarypaneltitle paneltitlecolor"> Ajankohtaista <div class="panelcontent roundborders"> Lorem on poistunut <div class="paneltime"> Lauantai, Kesäkuu 12, :43 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui lacus, interdum nec rutrum sed, tincidunt quis lorem. <div class="panelpagenumber"> 1 of 2 <div id="bottompanelcontainer"> <div class="panelcontent roundborders"> Toinen testi luoma artikkeli <div class="paneltime"> Kirjoittanut Teppo Praesent vehicula rhoncus dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut justo erat, fermentum eu interdum non, ullamcorper eu orci. Sed vitae volutpat ante. Aenean pharetra, ipsum ac mattis sodales, velit metus iaculis odio, vel luctus leo tortor et velit. Donec interdum tortor vel lorem rhoncus tincidunt. Praesent imperdiet commodo libero, vitae dictum quam viverra in. Suspendisse quis sem nisi, ut mollis odio. Nulla sem ipsum, sollicitudin eget aliquet et, lobortis eu nisl. Maecenas pharetra varius justo, sit amet tincidunt odio mollis vel. Integer vel diam velit. Donec viverra mi et lacus suscipit feugiat. <div class="panellinkright"> Lue lisää

13 Dokumentille valitaan aluksi yhtenäinen fontti muokkaamalla CSS-tiedoston body-osiota seuraavalla tavalla: body { font-family:verdana, arial, sans-serif; font-size:14px; margin:0; padding:0; Sen jälkeen lisätään uusille luokille tyylimäärittelyt oikean lohkon paneelin määritysten perään..paneltime { color:grey; text-decoration:none; font-style:italic; padding-bottom:5px;.panelpagenumber { margin:5px 0px; font-weight:bold; text-align:center;.panellinkright { text-align:right; margin:10px;

14 5 Navigointi ja linkit 5.1 Pseudo-luokat Ennen sivun navigaatio-osioon puuttumista on syytä tutustua pseudo- eli näennäisluokkiin. Pseudo-luokat ovat valitsimille asetettavia tiloja, joille voidaan kohdistaa erilaisia tehosteita. On olemassa myös pseudo-elementtejä, jotka puolestaan toimivat aivan kuten pseudo-luokatkin, mutta niissä tehosteiden vaikutukset kohdistuvat elementtien eri osiin. Pseudo-luokkien syntaksi on seuraavanlainen: valitsin:pseudo-luokka { ominaisuus: arvo; Esimerkkejä pseudo-luokkien ja -elementtien käytöstä: a:hover {color:#0000ff; / pseudo-luokka, kohdistuu linkin hover-tilaan h1:first-letter {color:#ff0000; / pseudo-elementti, kohdistuu h1-elementin 1. kirjaimeen Pseudo-luokkien yleisin käyttökohde ovat linkit. Linkkejä voidaan muotoilla aivan samoilla CSSominaisuuksilla kuin muutakin tekstiä, mutta niiden eri tiloja varten voidaan luoda pseudoluokkien avulla omat tyylimääritteensä. Linkin neljä tilaa ovat: a:link / linkki, jossa käyttäjä ei ole vielä vieraillut a:visited / linkki, jossa käyttäjä on jo vieraillut a:hover / linkin tila, kun sen päälle viedään hiiri a:active / linkin tila, kun sitä klikataan Yleisimmät keinot korostaa linkkien eri tiloja ovat värin muuttaminen, alleviivaus tai linkin taustavärin vaihtaminen. Esimerkkejä: a:link {color:#ff0000; text-decoration:none; a:visited {color:#00ff00; text-decoration:none; a:hover {color:#0000ff; text-decoration:underline; a:active {background-color:red; color:black; text-decoration:underline; Kun linkkien eri tilojen tyyliä määritellään, on tärkeää, että ne käydään läpi juuri edellisen listan mukaisessa järjestyksessä. A02 tehtävä: Tutki millaisia muita pseudo-luokkia /-elementtejä on olemassa. Selvitä, mitä seuraavat tehosteet tekevät:

15 1. p:before 2. li:first-child 3. a:focus Huom! Jos suoritat kurssia Muikussa, vastaa tehtäviin Muikun tehtävien kautta. 5.2 Navigointipalkki Navigointipalkin linkit saadaan tehtyä kätevästi listan avulla. Sivun sitenavigation-osioon lisätään lista, jonka linkit identifioidaan luokaksi navigationlink. <div id="sitenavigation"> <ul id= navbar > <li><a href="#" class="navigationlink">etusivu</a></li> <li><a href="#" class="navigationlink">kuvat</a></li> <li><a href="#" class="navigationlink">uutiset</a></li> <li><a href="#" class="navigationlink">historia</a></li> </ul> Seuraavaksi täydennetään CSS-dokumentin sitenavigation-osaa tekstin muotoilun osalta. Lisäksi palkin listavalitsimille lisätään tyylimääritteet. #sitenavigation { height:20px; background-color:#4679cd; padding:8px 5px 5px 10px; margin-top: 10px; color:#fff; letter-spacing:1px; font-size:90%; font-weight:bold; #sitenavigation ul { margin:0; #sitenavigation ul li { list-style:none; display:inline; padding-right:10px;

16 5.3 Alaosan linkit Myös sivun alapaneeli sisältää linkkejä. Alapaneelin sisälle luodaan jokaista linkkiriviä varten kolme pienempää laatikkoa (sitefooterblock). <!--Alapaneelin sisältö --> <div id="sitefooterwrapper"> <div class="sitefooterblock"> <a href="#" class="footerlink">käyttöehdot</a> <a href="#" class="footerlink">copyright 2010</a> <div class="sitefooterblock"> <a href="#" class="footerlink">facebook</a> <a href="#" class="footerlink">twitter</a> <a href="#" class="footerlink">rss</a> <div class="sitefooterblock"> <a href="#" class="footerlink">partnerit</a> <a href="#" class="footerlink">yhteystiedot</a> Alapalkin kolmea linkkiriviä varten lisätään tyylimääritteet sitefooterblock-valitsinta varten. Lisäksi sitefooterwrapping-valitsimen määritteisiin lisätään padding-ominaisuus, jolla linkkirivit saadaan sijoiteltua keskemmälle vaakasuunnassa. Koska padding-ominaisuus lisää laatikon täytettä vaakatasossa 400 pikseliä, voidaan laatikon leveyttä (width) pienentää saman verran 1000 pikselistä 600 pikseliin. #sitefooterwrapper { clear:both; background-color: #9fd4f2;

17 min-height: 60px; width: 600px; margin-top: 5px; padding: 20px 200px 20px 200px; border:1px solid black;.sitefooterblock { width:200px; float: left; 5.4 Tekstikenttien linkit Tässä osassa tekstikenttien kirjoituksien otsikoista tehdään linkkejä, jotta käyttäjä voi tarvittaessa avata kirjoitukset uudelle sivulle niitä klikkaamalla. Kirjoitukset olisi hyvä pystyä lukemaan myös kokonaisuudessaan tekstikentästä, jolloin niiden sivuja täytyy pystyä selaamaan jo etusivulla. Vaakasuunnaltaan pidempään laatikkoon lisätään hieman erilainen linkki aivan laatikon oikeaan alakulmaan. Nuolia kuvaavien suuremmuusmerkkien HTMLentiteetti on >. <!--Oikean paneelin sisältö --> <div id="rightinfopanelwrapper"> <div id="rightpanelcontainer"> <div class="primarypaneltitle paneltitlecolor"> Blogikirjoitukset <div class="panelcontent"> <a href="#" class="panelheader">decet Et Jus Aliquip Neo</a> <div class="paneltime"> Maanantai, Elokuu 9, :00 Morbi consequat arcu nunc, et vulputate augue. Praesent vehicula rhoncus dapibus. <div class="panelpagenumber"> 1 of 4 <a href="#" class="panellink">>></a> <div id="leftpanelcontainer"> <div class="primarypaneltitle paneltitlecolor roundborders"> Ajankohtaista <div class="panelcontent roundborders"> <a href="#" class="panelheader">lorem on poistunut</a>

18 <div class="paneltime"> Lauantai, Kesäkuu 12, :43 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui lacus, interdum nec rutrum sed, tincidunt quis lorem. <div class="panelpagenumber"> 1 of 2 <a href="#" class="panellink">>></a> <div id="bottompanelcontainer"> <div class="panelcontent roundborders"> <a href="#" class="panelheader">toinen testi luoma artikkeli</a> <div class="paneltime"> Kirjoittanut Teppo Praesent vehicula rhoncus dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut justo erat, fermentum eu interdum non, ullamcorper eu orci. Sed vitae volutpat ante. Aenean pharetra, ipsum ac mattis sodales, velit metus iaculis odio, vel luctus leo tortor et velit. Donec interdum tortor vel lorem rhoncus tincidunt. Praesent imperdiet commodo libero, vitae dictum quam viverra in. Suspendisse quis sem nisi, ut mollis odio. Nulla sem ipsum, sollicitudin eget aliquet et, lobortis eu nisl. Maecenas pharetra varius justo, sit amet tincidunt odio mollis vel. Integer vel diam velit. Donec viverra mi et lacus suscipit feugiat. <div class="panellinkright"> <a href="#" class="readmorelink">lue lisää</a> 5.5 Linkkien tyylimääritteet Seuraavaksi CSS-dokumentin perään lisätään kuvaukset linkeille. Osalle linkeistä määritellään pseudo-luokat. Linkin navigationlink hover-tilalle määritetään tehoste, joka muuttaa linkkitekstien taustavärin aina, kun niiden päälle viedään hiiren osoitin. Alapaneelin linkkien sekä Lue lisää -linkin kohdalla hover-tila puolestaan alleviivaa linkin. Tehosteita ei ole siis määriteltävä linkin kaikkiin eri tiloihin.

19 /*Linkkien kuvaukset */ a.footerlink { text-decoration: none; color: #2b2f82; font-size:90%; a.footerlink:hover { text-decoration: underline; color: #2b2f82; font-size:90%; a.navigationlink { text-decoration:none; color:#fff; padding:2px 4px 2px 4px; a.navigationlink:hover { text-decoration:none; color:#fff; background-color:#6793db; padding:2px 4px 2px 4px; a.panelheader { color:#3956c6; text-decoration:none; font-size:120%; a.panellink { color:#6356b9; font-size:70%; text-decoration:none; margin-left:20px;

20 a.readmorelink { color:#6356b9; font-size:80%; text-decoration:none; margin-left:20px; a.readmorelink:hover { color:#6356b9; font-size:80%; text-decoration:underline; margin-left:20px;

21 6 CSS3-ominaisuuksien lisääminen Tähän asti sivun tyylimääritteissä on käytetty korkeintaan CSS2-standardin mukaisia ominaisuuksia. Seuraavaksi otetaan käyttöön myös joitakin CSS3-ominaisuuksia, joilla saadaan sivustosta entistä näyttävämpi. On kuitenkin huomioitava, että CSS3 on sen verran uusi standardi, ettei se toimi vielä aivan kaikilla selaimilla. CSS3-ominaisuuksien toimivuuden eri selaimissa näet mm. täältä. Vanhemmissa selaimissa useimmat CSS3-ominaisuuksista on korvattavissa mm. javascriptin avulla. Tässä vaiheessa CSS-sivun tyylimääritteiden seasta poistetaan aiemmin havaintomielessä lisätyt reunaviivat (border:1px solid black;). CSS3-standardi toi mukanaan mahdollisuuden pyöristää laatikkoelementtien reunoja. Tämä tapahtuu Border-radius-ominaisuudella, jonka ainoa arvo määrittelee sen, kuinka monta pikseliä reunoja pyöristetään. Arvoksi käyvät myös muut mittayksiköt tai prosentit. Tyylimääritteisiin lisätään luokka roundborders ja sille border-radius-ominaisuus sekä määritykset eri selaimia varten..roundborders { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; Navigaatiopalkin hover-tilalle määritellään vastaava tehoste: a.navigationlink:hover { text-decoration:none; color:#fff; background-color:#6793db; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:2px 4px 2px 4px;

22 Kulmia on mahdollista pyöristää myös yksitellen: div { border-top-left-radius: 15px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; Yllä oleva esimerkki pyöristää ainoastaan laatikon vasemman yläkulman. Oikean paneelin tekstilaatikoiden taustana on käytetty liukuväriä, joka saadaan myös toteutettua CSS3-ominaisuudella. Eri selaimet tulkitsevat liukuvärit eri tavoin, joten niiden toimivuus voidaan varmistaa lisäämällä määritteet useaa selainta varten. Sivulla käytössä oleva liukuväri täyttää tilan lineaarisesti pystysuunnassa, joten sopiva valinta liukuväriominaisuudeksi on lineargradient, jonka arvoiksi määritellään yleensä vain aloitus- sekä lopetusväri - jossain tapauksissa myös täytön suunta. Valitsimena toimii panelcontent, jonka tyylimääritteitä täydennetään seuraavasti:.panelcontent { text-align:justify; padding:15px; line-height:140%; /* Tausta-asetus: Firefox 3.6+ */ background: -moz-linear-gradient(100% 100% 90deg, #ffffff, #d1dff8); /* Tausta-asetus: Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1dff8), to(ffffff)); /* Tausta-asetus: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(ffffff, #d1dff8); /* Tausta-asetus: Opera */ background: -o-linear-gradient(ffffff, #d1dff8); /* Tausta-asetus: Internet Explorer 5.5+ */ filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#d1dff8', endcolorstr='#ffffff'); A03 tehtävä: Muuta esimerkin tyylimäärite siten, että väriliuku toteutuu vasemmalta oikealle. Selvitä eri asetuksien kohdalta, miten tämä tapahtuu. Huom! Jos suoritat kurssia Muikussa, vastaa tehtäviin Muikun tehtävien kautta. Seuraavaksi HTML-dokumenttiin lisätään roundborders-luokka: <!--Sivuston yläosa --> <div id="siteheader" class="roundborders">

23 <!--Navigointipalkki --> <div id="sitenavigation" class="roundborders"> <ul> <li><a href="#" class="navigationlink">etusivu</a></li> <li><a href="#" class="navigationlink">kuvat</a></li> <li><a href="#" class="navigationlink">uutiset</a></li> <li><a href="#" class="navigationlink">historia</a></li> </ul> <!--Paneelien sisältö --> <div id="sitepanelswrapper"> <!--Vasemman paneelin sisältö --> <div id="leftinfopanelcontainer"> <div class="secondarypaneltitle paneltitlecolor roundborders"> Feedit <!--Oikean paneelin sisältö --> <div id="rightinfopanelwrapper"> <div id="rightpanelcontainer"> <div class="primarypaneltitle paneltitlecolor roundborders"> Blogikirjoitukset <div class="panelcontent roundborders"> <a href="#" class="panelheader">decet Et Jus Aliquip Neo</a> <div class="paneltime"> Maanantai, Elokuu 9, :00 Morbi consequat arcu nunc, et vulputate augue. Praesent vehicula rhoncus dapibus. <div class="panelpagenumber"> 1 of 4 <a href="#" class="panellink">>></a> <div id="leftpanelcontainer"> <div class="primarypaneltitle paneltitlecolor roundborders"> Ajankohtaista <div class="panelcontent roundborders"> <a href="#" class="panelheader">lorem on poistunut</a> <div class="paneltime"> Lauantai, Kesäkuu 12, :43

24 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui lacus, interdum nec rutrum sed, tincidunt quis lorem. <div class="panelpagenumber"> 1 of 2 <a href="#" class="panellink">>></a> <div id="bottompanelcontainer"> <div class="panelcontent roundborders"> <a href="#" class="panelheader">toinen testi luoma artikkeli</a> <div class="paneltime"> Kirjoittanut Teppo Praesent vehicula rhoncus dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut justo erat, fermentum eu interdum non, ullamcorper eu orci. Sed vitae volutpat ante. Aenean pharetra, ipsum ac mattis sodales, velit metus iaculis odio, vel luctus leo tortor et velit. Donec interdum tortor vel lorem rhoncus tincidunt. Praesent imperdiet commodo libero, vitae dictum quam viverra in. Suspendisse quis sem nisi, ut mollis odio. Nulla sem ipsum, sollicitudin eget aliquet et, lobortis eu nisl. Maecenas pharetra varius justo, sit amet tincidunt odio mollis vel. Integer vel diam velit. Donec viverra mi et lacus suscipit feugiat. <div class="panellinkright"> <a href="#" class="readmorelink">lue lisää</a> A04 tehtävä: Selvitä mitä muita uusia ominaisuuksia CSS3-standardi toi tullessaan. Mainitse ainakin kolme uutta ominaisuutta ja kuvaile mitä ne tekevät. Huom! Jos suoritat kurssia Muikussa, vastaa tehtäviin Muikun tehtävien kautta.

25 7 Alasvetovalikko Seuraavaksi sivun valikon toiminnallisuutta laajennetaan lisäämällä siihen alasvetovalikot, jotka tulevat näkyviin, kun hiiren osoitin viedään valikon painikkeiden päälle. Ensin valikon lista päivitetään tekemällä kuville sekä uutisille alilistat. Uutisten arkistoon on tehty lisäksi sisempi lista eri vuosien arkistointia varten. <!--Navigointipalkki --> <div id="sitenavigation" class="roundborders"> <ul id="navbar"> <li><a href="#" class="navigationlink">etusivu</a></li> <li><a href="#" class="navigationlink">kuvat</a> <ul> <li><a href="#" class="subnavlink">kevät 2011</a></li> <li><a href="#" class="subnavlink">talvi 2010</a></li> <li><a href="#" class="subnavlink">kesä 2009</a></li> </ul> </li> <li><a href="#" class="navigationlink">uutiset</a> <ul> <li><a href="#" class="subnavlink">uudet</a></li> <li><a href="#" class="subnavlink">arkisto</a> <ul> <li><a href="#" class="subnavlink">2011</a></li> <li><a href="#" class="subnavlink">2010</a></li> <li><a href="#" class="subnavlink">2009</a></li> </ul> </li> </ul> </li> <li><a href="#" class="navigationlink">historia</a></li> </ul> Alasvetovalikoille tehdään oma osio css-tiedoston perään.

26 /*Alasvetovalikon kuvaukset */ #navbar li { list-style:none; #navbar>li { float:left; #navbar li:hover a { display:block; text-decoration:none; background-color:#6793db; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; #navbar>li>ul, #navbar>li>ul>li>ul { position:absolute; display:none; width:10em; font-size:12px; padding:10px; background-color:#6793db; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; #navbar>li:hover>ul, #navbar>li>ul>li:hover>ul { display:block;.subnavlink { color:#fff;.subnavlink:hover { color:#000; Navigaatiopalkin alasvedettävät listalaatikot tulevat siis esiin, kun niiden päälle viedään hiiren osoitin. Lähtökohtaisesti valikot ovat piilossa (display:none) ja ne tuodaan esiin lista-elementtien hover-valitsimella, joissa esilletuonti on tehty määritteellä display:block;. Position:absolute -määrittely on tärkeä, sillä se estää esille tulevia listoja siirtämästä sivun muita elementtejä. Tyylittelyt saadaan tehtyä juuri tietyllä hierarkisella tasolla oleviin elementteihin kohdentamalla ominaisuudet valitsimien lapsi- ja jälkeläiselementteihin. Esimerkiksi #navbar li kohdentuu kaikkiin #navbar-valitsimen alaisten listojen li-elementteihin

27 eli jälkeläisiin, kun taas #navbar>li kohdentaa määrittelyt ainoastaan #navbar-listan omiin lielementteihin eli sen lapsiin. Näin ollen #navbar>li>ul>li>ul kohdentaa määrittelyt #navbarlistan toiseen sisäkkäiseen listaan ja #navbar>li>ul sen ensimmäiseen. Eri tasoissa olevien listojen ominaisuuksia on yhdistelty erottelemalla valitsimet pilkulla. Elementtien kohdentamista varten on olemassa mm. seuraavanlaisia valitsimia: * universaali valitsin, kohdentuu kaikkiin elementteihin E tyyppivalitsin, kohdentuu elementtiin E E F jälkeläisvalitsin, kohdentuu kaikkiin elementin E sisällä oleviin F-elementteihin E>F lapsivalitsin, kohdentuu elementin E lapsielementteihin F E,F valitsimien ryhmitys, kohdentuu valitsimeen E sekä F E+F sisarvalitsin, kohdentuu kaikkiin F-elementteihin, joita edeltää E-elementti E.a luokkavalitsin, kohdentuu kaikkiin E-elementtien class-valitsimiin a E#a luokkavalitsin, kohdentuu kaikkiin E-elementtien ID-valitsimiin a E[a] attribuuttivalitsin, kohdentuu kaikkiin E-elementtehin, joiden attribuutti on a

28 8 Kirjautumislaatikko Sivuston yläosaan tehdään viimeisenä elementtinä kirjautumislaatikko. Samalla dokumenttiin lisätään vielä yksi CSS3-ominaisuus, jolla voidaan määritellä elementin läpikuultavuus. <!--Sivuston yläosa --> <div id="siteheader" class="roundborders"> <div id="headerloginbox" class="roundborders"> <form id="loginform" action="#" method="post"> <div class="loginformusernamewrapper"> <div class="loginformgenerictext"> Käyttäjätunnus: <input type="text" class="loginformtextfield roundborders" id="loginformusername"/> <div class="loginformusernamewrapper"> <div class="loginformgenerictext"> Salasana: <input type="password" class="loginformtextfield roundborders" id="loginformpassword"/> </form> Kirjautumislaatikon tyylimääritteet lisätään CSS-dokumentin perään. Laatikon läpikuultavuus määritellään opacity-ominaisuudella, jossa arvo 0 tarkoittaa täysin läpikuultavaa ja arvo 1 sen vastakohtaa. Laatikolla on kuitenkin oltava jokin taustaväri, jotta siitä voidaan tehdä läpikuultava - tässä se on sininen. Internet Explorerin opacity-toiminnallisuutta varten lisätään edellisen perään toinenkin rivi, jossa läpikuultavuusarvo määritellään välille /*Kirjautumislaatikon kuvaukset */ #headerloginbox { position:absolute; top:20px; right:20px;

29 background-color:#3956c6; opacity:0.43; filter:alpha(opacity=43); width:250px; height:105px; #loginform { position:absolute; top:28px; right:28px;.loginformtextfield { width:227px; margin-bottom:10px; border:1px solid #fff; opacity:0.6; filter:alpha(opacity=60); color:#000; padding:2px; #loginformusername { #loginformpassword {.loginformgenerictext { color:#fff; font-weight:bold; font-size:85%; margin-bottom:2px;

30 9 Sivun viimeistely Kurssilla on tähän mennessä käytetty ns. web safe fontteja, jotka toimivat turvallisesti jokaisessa käyttöjärjestelmässä. Näiden lisäksi netistä löytyy useita kirjasinkatalogeja, joita websuunnittelijat voivat hyödyntää sivustoja rakentaessaan. Nämä kirjasimet ovat myös selainriippumattomia, sillä sivut hakevat ne verkosta aina latautuessaan. Sivuille on mahdollista tuoda myös omia -ominaisuuden avulla. Esimerkissä dokumenttiin tuodaan kirjasin Google Web Fonts -palvelusta sekä määritellään sivuilla käytettävä merkistö. Google Web Fonts -palvelu sisältää satoja web-käyttöön optimoituja kirjasimia, jotka ovat vapaasti kaikkien käytettävissä käyttötarkoituksesta riippumatta. Palvelun käyttö on nopeaa ja helppoa: valitaan vain haluttu kirjasin ja palvelu antaa saman tien ohjeet kirjasimen käyttöön ottamiseksi. Tässä esimerkissä palvelusta liitetään Droid Sans -niminen fontti sivun navigaatiopalkin linkeille. Liittäminen tapahtuu link-määritteen avulla, joka lisätään sivun headosioon. <head> <link rel="stylesheet" href="layout.css"/> <link href= rel= stylesheet type= text/css /> <title></title> </head> Vastaavasti CSS-dokumentin sitenavigation-valitsimelle täytyy lisätä font-ominaisuus muokkaamalla sitä seuraavasti: a.navigationlink { text-decoration:none; color:#fff; padding:2px 4px 2px 4px; font-family: Droid Sans, arial, serif; Sivun merkistöksi valitaan alustavarma UTF-8, joka vaatii merkistön enkoodamisen ISO standardin mukaisella tavalla. Tämä tarkoittaa käytännössä sitä, että kaikki sivun sisältöön liittyvät erikoismerkit muutetaan ASCII-pohjaiseen muotoon. Lista merkeistä löytyy mm. tältä sivulta. Kätevintä on muuttaa kaikki dokumentin merkit kerralla tekstieditorin korvaus-toiminnolla kun sivu on muuten valmis. Esimerkkisivulla suurin osa sisällöstä on kirjoitettu latinaksi, joka ei sisällä erikoismerkkejä, mutta sen sijaan niitä löytyy mm. linkeistä ä- ja ö-kirjainten muodossa. Lopulliset sivut Sivujen lopullinen HTML-dokumentti näyttää kokonaisuudessaan tältä:

31 esimerkki.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="fi" /> <link rel="stylesheet" href="layout.css"/> <link href=" rel='stylesheet' type='text/css' /> <title></title> </head> <body> <div id="sitemasterwrapper"> <!--Sivuston yläosa --> <div id="siteheader" class="roundborders"> <div id="headerloginbox" class="roundborders"> <form id="loginform" action="#" method="post"> <div class="loginformusernamewrapper"> <div class="loginformgenerictext"> Käyttäjätunnus: <input type="text" class="loginformtextfield roundborders" id="loginformusername"/> <div class="loginformusernamewrapper"> <div class="loginformgenerictext"> Salasana: <input type="password" class="loginformtextfield roundborders" id="loginformpassword"/> </form> <!--Navigointipalkki --> <div id="sitenavigation" class="roundborders"> <ul id="navbar"> <li><a href="#" class="navigationlink">etusivu</a></li> <li><a href="#" class="navigationlink">kuvat</a> <ul> <li><a href="#" class="subnavlink">kevät 2011</a></li> <li><a href="#" class="subnavlink">talvi 2010</a></li> <li><a href="#" class="subnavlink">kesä 2009</a></li> </ul> </li> <li><a href="#" class="navigationlink">uutiset</a> <ul> <li><a href="#" class="subnavlink">uudet</a></li> <li><a href="#" class="subnavlink">arkisto</a>

32 <ul> <li><a href="#" class="subnavlink">2011</a></li> <li><a href="#" class="subnavlink">2010</a></li> <li><a href="#" class="subnavlink">2009</a></li> </ul> </li> </ul> </li> <li><a href="#" class="navigationlink">historia</a></li> </ul> <!--Paneelien sisältö --> <div id="sitepanelswrapper"> <!--Vasemman paneelin sisältö --> <div id="leftinfopanelcontainer"> <div class="secondarypaneltitle paneltitlecolor roundborders"> Feedit <!--Oikean paneelin sisältö --> <div id="rightinfopanelwrapper"> <div id="rightpanelcontainer"> <div class="primarypaneltitle paneltitlecolor roundborders"> Blogi kirjoitukset <div class="panelcontent roundborders"> <a href="#" class="panelheader">decet Et Jus Aliquip Neo</a> <div class="paneltime"> Maanantai, Elokuu 9, :00 Morbi consequat arcu nunc, et vulputate augue. Praesent vehicula rhoncus dapibus. <div class="panelpagenumber"> 1 of 4 <a href="#" class="panellink">>></a> <div id="leftpanelcontainer"> <div class="primarypaneltitle paneltitlecolor roundborders"> Ajankohtaista <div class="panelcontent roundborders"> <a href="#" class="panelheader">lorem on poistunut</a> <div class="paneltime"> Lauantai, Kesäkuu 12, :43

33 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui lacus, interdum nec rutrum sed, tincidunt quis lorem. <div class="panelpagenumber"> 1 of 2 <a href="#" class="panellink">>></a> <div id="bottompanelcontainer"> <div class="panelcontent roundborders"> <a href="#" class="panelheader">toinen testi luoma artikkeli</a> <div class="paneltime"> Kirjoittanut Teppo Praesent vehicula rhoncus dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut justo erat, fermentum eu interdum non, ullamcorper eu orci. Sed vitae volutpat ante. Aenean pharetra, ipsum ac mattis sodales, velit metus iaculis odio, vel luctus leo tortor et velit. Donec interdum tortor vel lorem rhoncus tincidunt. Praesent imperdiet commodo libero, vitae dictum quam viverra in. Suspendisse quis sem nisi, ut mollis odio. Nulla sem ipsum, sollicitudin eget aliquet et, lobortis eu nisl. Maecenas pharetra varius justo, sit amet tincidunt odio mollis vel. Integer vel diam velit. Donec viverra mi et lacus suscipit feugiat. <div class="panellinkright"> <a href="#" class="readmorelink">lue lisää</a> <!--Alapaneelin sisältö --> <div id="sitefooterwrapper"> <div class="sitefooterblock"> <a href="#" class="footerlink">käyttöehdot</a> <a href="#" class="footerlink">copyright 2010</a> <div class="sitefooterblock"> <a href="#" class="footerlink">facebook</a> <a href="#" class="footerlink">twitter</a> <a href="#" class="footerlink">rss</a> <div class="sitefooterblock">

34 <a href="#" class="footerlink">partnerit</a> <a href="#" class="footerlink">yhteystiedot</a> </body> </html> Esimerkki-layoutin lopullinen CSS-tiedosto on seuraavanlainen: layout.css html { height:100%; margin-bottom:1px; body { font-family:verdana,arial,sans-serif; font-size:14px; margin:0; padding:0; #sitemasterwrapper { width:1000px; margin-left:auto; margin-right:auto; margin-top:20px; #siteheader { height:308px; width:1000px; background-image:url('gfx/header.jpg'); background-repeat:no-repeat; position:relative; #sitenavigation { height:20px; background-color:#4679cd; padding:8px 5px 5px 10px; margin-top: 10px; color:#fff; letter-spacing:1px; font-size:90%; font-weight:bold;

35 #sitenavigation ul { margin:0; #sitenavigation ul li { list-style:none; display:inline; padding-right:10px; #sitepanelswrapper { width:1000px; margin-top:10px; #leftinfopanelcontainer { float:left; width:156px; #rightinfopanelwrapper { float:right; width:830px; /*oikean lohkon paneelit */ #leftpanelcontainer { float:left; width:402px; min-height:200px; margin-bottom:15px; #rightpanelcontainer { float:right; width:402px; min-height:200px; margin-bottom:15px; #bottompanelcontainer { clear:both; min-height:100px; margin-bottom:15px; /*Alapaneeli */ #sitefooterwrapper { clear:both; background-color: #9fd4f2; min-height: 60px; width: 600px; margin-top: 5px; padding: 20px 200px 20px 200px;

36 .sitefooterblock { width:200px; float: left; /*otsikoiden kuvaukset */.roundborders { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;.paneltitlecolor { color: #fff;.secondarypaneltitle { background-color: #32A245; padding:5px 5px 5px 10px; font-weight:bold;.primarypaneltitle { background-color:#4679cd; padding:5px 5px 5px 10px; font-weight:bold;.panelcontent { text-align:justify; padding:15px; line-height:140%; /* Tausta-asetus: Firefox 3.6+ */ background: -moz-linear-gradient(100% 100% 90deg, #ffffff, #d1dff8); /* Tausta-asetus: Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1dff8), to(ffffff)); /* Tausta-asetus: Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(ffffff, #d1dff8); /* Tausta-asetus: Opera */ background: -o-linear-gradient(ffffff, #d1dff8); /* Tausta-asetus: Internet Explorer 5.5+ */ filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#d1dff8', endcolorstr='#000000');.paneltime { color:grey; text-decoration:none; font-style:italic; padding-bottom:5px;

37 .panelpagenumber { margin:5px 0px; font-weight:bold; text-align:center;.panellinkright { text-align:right; margin:10px; /*Linkkien kuvaukset */ a.footerlink { text-decoration: none; color: #2b2f82; font-size:90%; a.footerlink:hover { text-decoration: underline; color: #2b2f82; font-size:90%; a.navigationlink { text-decoration:none; color:#fff; padding:2px 4px 2px 4px; font-family: Droid Sans, arial, serif; a.navigationlink:hover { text-decoration:none; color:#fff; background-color:#6793db; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:2px 4px 2px 4px; a.panelheader { color:#3956c6; text-decoration:none; font-size:120%; a.panellink { color:#6356b9; font-size:70%; text-decoration:none; margin-left:20px;

38 a.readmorelink { color:#6356b9; font-size:80%; text-decoration:none; margin-left:20px; a.readmorelink:hover { color:#6356b9; font-size:80%; text-decoration:underline; margin-left:20px; /*Kirjautumislaatikon kuvaukset */ #headerloginbox { position:absolute; top:20px; right:20px; background-color:#3956c6; opacity:0.43; filter:alpha(opacity=43); width:250px; height:105px; #loginform { position:absolute; top:28px; right:28px;.loginformtextfield { width:227px; margin-bottom:10px; border:1px solid #fff; opacity:0.6; filter:alpha(opacity=60); color:#000; padding:2px; #loginformusername { #loginformpassword {.loginformgenerictext { color:#fff; font-weight:bold; font-size:85%;

39 margin-bottom:2px; /*Alasvetovalikon kuvaukset */ #navbar li { list-style:none; #navbar>li { float:left; #navbar li:hover a { display:block; text-decoration:none; background-color:#6793db; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; #navbar>li>ul, #navbar>li>ul>li>ul { position:absolute; display:none; width:10em; font-size:12px; padding:10px; background-color:#6793db; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; #navbar>li:hover>ul, #navbar>li>ul>li:hover>ul { display:block;.subnavlink { color:#fff;.subnavlink:hover { color:#000;

40 10 Lopputehtävä Lopputehtävänäsi on taittaa kurssilla läpikäydystä esimerkkisivusta hieman poikkeavan layoutversio web-sivuksi. Lataa layout-psd oppimisympäristöstä tai tästä linkistä. Tallenna CSStyylimäärittelyt erilliseen tiedostoon. Pakkaa tiedostot kuvineen lopuksi yhdeksi ZIP-paketiksi ja lähetä se arvioitavaksi. Kaikkea ei tarvitse tehdä tyhjästä; voit käyttää kurssilla tehtyä esimerkkisivua tehtävän pohjana. Huom! Jos suoritat kurssia Muikussa, palauta tehtävätiedosto Muikun tehtävien kautta.

41 11 Linkkejä Tässä muutama hyödyllinen linkki kurssiin liittyen: World Wide Web Consortiumin CSS-validaattori ISO merkistö Lista CSS3-ominaisuuksien toimivuudesta eri selaimilla GIMP - ilmainen kuvankäsittelyohjelma Google Web Fonts -palvelu HTML-värikartta Zengarden - näyttäviä CSS:llä muotoiltuja sivukokonaisuuksia W3schools.com - kaikenkattava CSS-opas Editoreita: Notepad++ NoteTab Light EditPad Lite (ei kaupalliseen käyttöön)

Tiera Kokouskutsu 1 (8) Rel lautakunta Aika , klo 15:00. Käsiteltävät asiat. 1 Kokouksen laillisuus ja päätösvaltaisuus

Tiera Kokouskutsu 1 (8) Rel lautakunta Aika , klo 15:00. Käsiteltävät asiat. 1 Kokouksen laillisuus ja päätösvaltaisuus Tiera Kokouskutsu 1 (8) Aika 31.08.2016, klo 15:00 Paikka Auditorio Käsiteltävät asiat 1 Kokouksen laillisuus ja päätösvaltaisuus 2 Pöytäkirjan tarkastus 3 Viranhaltijoiden päätösten otto-oikeus 4 DP 5

Lisätiedot

Tiera Pöytäkirja 6/ (7) Testilautakunta Aika , klo 22:49-22:52. Käsitellyt asiat

Tiera Pöytäkirja 6/ (7) Testilautakunta Aika , klo 22:49-22:52. Käsitellyt asiat Tiera Pöytäkirja 6/2016 1 (7) Aika 21.06.2016, klo 22:49-22:52 Paikka A1 Käsitellyt asiat 27 Kokouksen laillisuus ja päätösvaltaisuus 28 Pöytäkirjan tarkastus 29 Viranhaltijoiden päätösten otto-oikeus

Lisätiedot

Hollolan kunta. graafinen ohjeistus 6/2015

Hollolan kunta. graafinen ohjeistus 6/2015 Hollolan kunta graafinen ohjeistus 6/2015 Logo Logon suoja-alueet suoja-alue Logon suoja-alue määrittäminen tapahtuu logon o-kirjaimen avulla. Elementtejä ja tekstejä ei suositella sijoitettavaksi tälle

Lisätiedot

AP KIINTEISTÖPALVELUT

AP KIINTEISTÖPALVELUT AP KIINTEISTÖPALVELUT GRAAFINEN OHJEISTO PJG 21052012 AP KIINTEISTÖPALVELUT GRAAFINEN OHJEISTO Logo 4-6 Värimääritykset 7 Typografia 8-9 Yritysgrafiikka - Käyntikortti 10 - Kirjekuoret 11 - Lomakkeet 12-13

Lisätiedot

Oma ilme. Mika Hatanpää kaupunginsihteeri

Oma ilme. Mika Hatanpää kaupunginsihteeri Graafinen ohjeisto Oma ilme Graafisen ohjeistuksen tarkoituksena on antaa Kankaanpään kaupungin viestinnälle yhdenmukainen ja helposti tunnistettava ulkoinen ilme. Tämä ohjeisto on työväline niille, jotka

Lisätiedot

Xamk Brändi-identiteetti. Copyright Mainostoimisto Ilme 2016

Xamk Brändi-identiteetti. Copyright Mainostoimisto Ilme 2016 Xamk Brändi-identiteetti Copyright Mainostoimisto Ilme 2016 Mikkeli Kouvola Savonlinna Kotka Tunnuksessa on nähtävissä neljä eri paikkakunnilla sijaitsevaa kampusta, jotka muodostavat kivijalan kaikelle

Lisätiedot

Graafinen ohjeistus. Pienikin iskussa

Graafinen ohjeistus. Pienikin iskussa Graafinen ohjeistus Logot Original logo jota käytetään mm. rahoittajien logojen yhteydessä. Yleisimmin käytettävä logo Värillinen logo jota käytetään vaihtoehtoisesti sellaisissa julkaisuissa joihin vaakaversio

Lisätiedot

Tervetuloa kotiin! Jalasjärvi

Tervetuloa kotiin! Jalasjärvi Tervetuloa kotiin! Jalasjärvi Graafi nen ohjeistus 2011 Vapaat tontit - Rakentaminen - Mökkipörssi - Lähipalvelut - Harrastukset - /asuminen Sininen: Pantone 293 C Jalasjärven perustunnus C 96 % M 70 %

Lisätiedot

Liikemerkin suoja-alue

Liikemerkin suoja-alue 1 Liikemerkki Suomen Fysioterapeutit Ry:n liikemerkki muodostuu tunnusosasta sekä tekstiosasta. Merkki ilmentää positiivisuutta, dynaamisuutta sekä ihmisläheisyyttä viestien myös asiantuntijuutta ja ammattilaisuutta.

Lisätiedot

Graafinen ohjeisto. Muuttuva Museo. Mainostoimisto Bock s Office Oy

Graafinen ohjeisto. Muuttuva Museo. Mainostoimisto Bock s Office Oy Graafinen ohjeisto Muuttuva Museo Mainostoimisto Bock s Office Oy Johdanto Muuttuva Museo elää ajan hengessä perinteitä kunnioittaen. Se aktivoi kokemaan ja uskaltaa uudistua. Se haluaa puhutella myös

Lisätiedot

Kirkkonummen kunta. Graafinen ohjeisto

Kirkkonummen kunta. Graafinen ohjeisto Kirkkonummen kunta Graafinen ohjeisto Versio 09.01.2013 Graafisen ohjeiston tarkoitus 2 Vahva kunta on nähtävä merkittävänä kilpailuetuna. Yritys- ja julkisuuskuvan tärkeä osa on yrityksen tai organisaation

Lisätiedot

PK-PRO. Graafinen ohjeisto. Tunnukset voit ladata: www.pk-pro.fi/media 01.01.2014

PK-PRO. Graafinen ohjeisto. Tunnukset voit ladata: www.pk-pro.fi/media 01.01.2014 Graafinen ohjeisto 01.01.2014 Tunnukset voit ladata: www.pk-pro.fi/media Ohjeiston esittely Suunnittelu-, konsultointi-, valvonta- ja projektinjohtopalvelumme kattaa teollisuuden, liike-elämän, kunnan,

Lisätiedot

KUVA SOITTOKUNNASTA. KOKO 460x260px. KESKIPALSTA LEV.620px. Eurajoen Nuorisosoittokunta, Kaharin osoite Design by Sari Nieminen

KUVA SOITTOKUNNASTA. KOKO 460x260px. KESKIPALSTA LEV.620px. Eurajoen Nuorisosoittokunta, Kaharin osoite Design by Sari Nieminen LOGO 140px NAVI LEV.140px ja KORK.40px NUOTTIAVAIN LOGO Linkit Rauman Kansalaisopisto: Suomen Puhallinorkesteriliitto: Rauman musiikkiopisto: Palmgren Konservatorio: Tänään harjoitukset jo poikkeuksellisesti

Lisätiedot

Hyväksytty kaupunginhallituksessa xx.xx.2010

Hyväksytty kaupunginhallituksessa xx.xx.2010 1 Loviisan kaupungin graafinen ohjeisto Hyväksytty kaupunginhallituksessa xx.xx.2010 2 Sisällys Logon ja visuaalisen ilmeen suunnittelu ja toteutus: Aptual Oy www.aptual.fi Sisällys Logo Vaakuna Värimaailma

Lisätiedot

Sisältö. Tunnus 3 Tunnuksen käyttötapoja 4 Värit 5 Typografia - Verkossa 6 Typografia - Printissä 7

Sisältö. Tunnus 3 Tunnuksen käyttötapoja 4 Värit 5 Typografia - Verkossa 6 Typografia - Printissä 7 Graafinen ohjeisto Sisältö Tunnus 3 Tunnuksen käyttötapoja 4 Värit 5 Typografia - Verkossa 6 Typografia - Printissä 7 2 Tunnus Vaakaversio Kompaktiversio Suojaetäisyydet Logon suoja-alue Grönä Åretin versaali

Lisätiedot

Palvelutaloyhdistyksen Graafinen ohjeisto

Palvelutaloyhdistyksen Graafinen ohjeisto Palvelutaloyhdistyksen 17.7.2012 www.koskenrinne.fi/media Ohjeiston esittely Palvelutaloyhdistys Koskenrinne ry on perustettu vuonna 1945 ja se on alueen vanhin vanhusten palveluita tuottava yhdistys.

Lisätiedot

Logo Värimaailma Typografia Graafiset elementit

Logo Värimaailma Typografia Graafiset elementit Graafinen ohjeisto 4. 10. 14. 20. Logo Värimaailma Typografia Graafiset elementit 3 Liikkuva opiskelu -logosta on käytössä kaksi versiota sekä näiden värivariaatiot. Ensisijaisena logona käytetään versiota

Lisätiedot

Asemointi. 1. Lohkon korkeus ja leveys

Asemointi. 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ätiedot

SISÄLTÖ. Johdanto. Logo. Merkki. Värit. Typografia. Käyntikortti. Kirjekuoret. Kirjelomake. Presentaatio. Ilmoitukset

SISÄLTÖ. Johdanto. Logo. Merkki. Värit. Typografia. Käyntikortti. Kirjekuoret. Kirjelomake. Presentaatio. Ilmoitukset Graafinen ohjeisto 2 SISÄLTÖ 3 Johdanto 4 Logo 5 Merkki 6 Värit 7 Typografia 8 Käyntikortti 9 Kirjekuoret 12 Kirjelomake 13 Presentaatio 14 Ilmoitukset 3 JOHDANTO Tämän ohjeiston tarkoitus on opastaa logon

Lisätiedot

Graafi nen ohjeisto 1.0 JELPPIS.COM

Graafi nen ohjeisto 1.0 JELPPIS.COM Graafi nen ohjeisto 1.0 JELPPIS Sisältö Sisältö...2 Logo...3 Logo...4 Värivaihtoehdot...5 Suoja-alueet...6 Kielletty käyttö...7 Värit...8 Päävärit...9 Lisävärit...10 Typografia...11 Typografi a...12 Lomakkeet...13

Lisätiedot

Logo 2

Logo 2 Graafinen ohje 2012 Logo 2 3 4 8 9 13 14 18 19 xx x x 25 Kaari 26 27 28 29 30 Värit 35 Pääväri Sininen 2 -väri Musta 3 -väri Vaaleansininen 4 -väri Valkoinen CMYK C90 M40 Y0 K0 CMYK C0 M0 Y0 K100 CMYK

Lisätiedot

Visuaalinen identiteetti kattaa Paytrailin verkko- ja painotuoteviestinnän olennaiset elementit. Sen avulla varmistetaan, että brändin identiteetti

Visuaalinen identiteetti kattaa Paytrailin verkko- ja painotuoteviestinnän olennaiset elementit. Sen avulla varmistetaan, että brändin identiteetti Graafinen ohjeisto identiteetti #ydin Paytrailin visuaalinen identiteetti viestii uuden ajan maksujärjestelmän vahvuuksia ja tärkeimpiä ominaisuuksia: helppoutta, elämyksellisyyttä, raikkautta, luotettavuutta

Lisätiedot

Pieni suuri kaupunki. GRAAFINEN OHJEISTO KERAVAN KAUPUNKI 2017

Pieni suuri kaupunki. GRAAFINEN OHJEISTO KERAVAN KAUPUNKI 2017 Pieni suuri kaupunki. GRAAFINEN OHJEISTO KERAVAN KAUPUNKI 2017 TUNNUS pystytunnus PYSTY- JA VAAKATUNNUS vaakatunnus Keravan kaupungin tunnus muodostuu kahdesta elemen stä: vihreästä käpyaiheisesta merkistä

Lisätiedot

Eeva Haataja

Eeva Haataja Eeva Haataja 17.03.2014 1230255 Kotitehtävä 1 Graafiset käyttöliittymät http://users.metropolia.fi/~eevaih/graaf/hw1/hw1.html HW1.html

Lisätiedot

Taimi. Elinvoimaa luonnosta. Suuri teemanumero TEKEVÄT MÄKIVETOJA LEHMÄT VERTAILUSSA K-CITYMARKET PRISMA LIDL KOKEILE UUSIMMAT MEHURESEPTIT

Taimi. Elinvoimaa luonnosta. Suuri teemanumero TEKEVÄT MÄKIVETOJA LEHMÄT VERTAILUSSA K-CITYMARKET PRISMA LIDL KOKEILE UUSIMMAT MEHURESEPTIT Luomuaiheinen julkaisu 4/2017 Elinvoimaa luonnosta KOKEILE UUSIMMAT MEHURESEPTIT MÄKIVETOJA TEKEVÄT LEHMÄT VERTAILUSSA K-CITYMARKET PRISMA LIDL Suuri teemanumero RUOKA JUOMA LUONTO ELÄMÄ UUT ISET 3. BYROKRATIAN

Lisätiedot

HKL:N UUSI ILME. kuin kehittämis- ja investointihankkeissa.

HKL:N UUSI ILME. kuin kehittämis- ja investointihankkeissa. Graafinen ohjeisto HKL:N UUSI ILME HKL ilme uudistui organisaatiomuutoksen yhteydessä vuoden 2016 alussa. Muutoksen taustalla on halu pysyä mukana metro- ja raitioliikenteen voimakkaassa kasvussa ja laajenemisessa

Lisätiedot

SISÄLLYSLUETTELO

SISÄLLYSLUETTELO ETELÄ- KARJALA 1 SISÄLLYSLUETTELO 13.11.2015 // BRÄNDI...3 // VÄRIT...6 // TUNNUS...9 // TYPOGRAFIA...18 // KUVATYYLI...23 // GRAAFISET TEEMAT...27 // SOVELLUKSET...31 // LOMAKKEISTO...43 // SÄHKÖINEN

Lisätiedot

Ulkoasun muokkaus CSS-tiedostossa

Ulkoasun 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ätiedot

GRAAFINEN OHJEISTO. Euroopan unioni Euroopan aluekehitysrahasto maaseuturahasto

GRAAFINEN OHJEISTO. Euroopan unioni Euroopan aluekehitysrahasto maaseuturahasto GRAAFINEN OHJEISTO Euroopan unioni Euroopan aluekehitysrahasto maaseuturahasto Sisällysluettelo TUNNUS Perustunnus ja suoja-alueet... 3 Mustavalko- ja harmaasävyversiot... 4 KÄYTETTÄVÄT VÄRIT Käytettävät

Lisätiedot

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com

Lisätehtävät. Frantic 2015 sivu 1 www.frantic.com Lisätehtävät Frantic 2015 sivu 1 www.frantic.com Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan

Lisätiedot

Tunnus 5. Tunnuksen perusversio. Tunnuksen suoja-alue on sama kuin tekstin korkeus. Tunnus Aluksi

Tunnus 5. Tunnuksen perusversio. Tunnuksen suoja-alue on sama kuin tekstin korkeus. Tunnus Aluksi Elinkeino-, liikenne- ja ympäristökeskukset (ELY) aloittavat toimintansa vuoden 2010 alussa osana perusteellista valtion aluehallinnon uudistusta. Uudet keskukset vastaavat niistä tehtävistä, jotka aiemmin

Lisätiedot

BRÄNDIOHJEISTO VERSIO 2.0/

BRÄNDIOHJEISTO VERSIO 2.0/ BRÄNDIOHJEISTO VERSIO 2.0/8.2.2017 ESIPUHE Hyvä Hangonsillan viestinnän tekijä, Tähän dokumenttiin on koottu Hangonsillan brändin elementit. Ohjeisto on kaikkien Hangonsillan kumppanien vapaasti käytettävissä.

Lisätiedot

NURMEKSEN KAUPUNKI Graafinen ohjeisto

NURMEKSEN KAUPUNKI Graafinen ohjeisto NURMEKSEN KAUPUNKI Graafinen ohjeisto 2013 12.12.2013 SISÄLLYSLUETTELO Nurmes 3 Miksi luoda paikan ilme 3 TUNNUS 4 Nurmeksen ilme 4 Mittasuhteet 5 Versiot 6 Koko 7 Väriversiot ja niiden käyttö 8 Nurmeksen

Lisätiedot

9=1 GRAAFINEN OHJEISTO

9=1 GRAAFINEN OHJEISTO 9=1 GRAAFINEN OHJEISTO TUNNUKSEN SUOJA-ALUE Tunnuksen käyttö eri materiaaleissa edellyttää suoja-aluetta sen ympärillä. Tämän alueen sisäpuolelle ei tulisi tekstiä*. Suoja-alueen koon määrittelystä voidaan

Lisätiedot

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen

Lisätiedot

Vaadin Bugrap. User Interface Wireframes. Hannu SALONEN Vaadin Ltd. hannu@vaadin.com

Vaadin Bugrap. User Interface Wireframes. Hannu SALONEN Vaadin Ltd. hannu@vaadin.com Vaadin Bugrap User Interface Wireframes Hannu SALONEN Vaadin Ltd. hannu@vaadin.com Vaadin 7 Report a Bug Bug reports Request a Feature 456 Feature requests Milestone resolved tasks 20 active tasks 47 open

Lisätiedot

Lapin yliopiston ilmoitusmalli ja ohjeistus.

Lapin yliopiston ilmoitusmalli ja ohjeistus. Lapin yliopiston ilmoitusmalli ja ohjeistus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin lorem non dui tempor nec rhoncus risus imperdiet. Cum sociis natoque penatibus

Lisätiedot

CSS-perusteet. Verkkosivustojen suunnittelu ja rakentaminen

CSS-perusteet. Verkkosivustojen suunnittelu ja rakentaminen Verkkosivustojen suunnittelu ja rakentaminen CSS-perusteet Sisällysluettelo 1 Johdanto 2 CSS:n syntaksi 3 Valitsimet 4 CSS:n liittäminen dokumentteihin 4.1 CSS erillisenä tiedostona 4.2 CSS upotettuna

Lisätiedot

Päivitetty 12.5.2009. Graafinen ohjeisto SUOMEN EKONOMILIITTO FINLANDS 1 EKONOMFÖRBUND SEFE RY

Päivitetty 12.5.2009. Graafinen ohjeisto SUOMEN EKONOMILIITTO FINLANDS 1 EKONOMFÖRBUND SEFE RY Päivitetty 12.5.2009 Graafinen ohjeisto SUOMEN EKONOMILIITTO FINLANDS 1 EKONOMFÖRBUND SEFE RY GRAAFINEN OHJEISTO Sisällys Logo 4 logo ja slogan 5 ruotsinkieliset versiot 6 englanninkielinen logo 7 väriversiot

Lisätiedot

Graafinen ohjeistus. Suomen evankelisluterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO

Graafinen ohjeistus. Suomen evankelisluterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO Graafinen ohjeistus Suomen evankelisluterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO 1 Sisällys 1. Johdanto Kenelle, missä, miten? 3 2. Tunnus Kirkon yhteinen tunnus on yhteinen nimittäjä 5 Miten

Lisätiedot

Suostumuskoodi. Osakehuoneistorekisteri ASREK-projekti

Suostumuskoodi. Osakehuoneistorekisteri ASREK-projekti Suostumuskoodi Osakehuoneistorekisteri ASREK-projekti 3.5.2018 !2 Suostumus Jotta uusi omistaja voidaan kirjata rekisteriin tarvitaan edellisen omistajan suostumus Mahdollisesti myös panttauksen kirjaamiseen

Lisätiedot

Graafinen ohje 2012 Logo 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 xx x x 25 Kaari 26 27 28 29 30 31 32 33 34 Värit 35 Pääväri Sininen 2 -väri Musta 3 -väri Vaaleansininen 4 -väri Valkoinen

Lisätiedot

Paltamon kunnan markkinointiviestinnän. Luonnos design Little Red House / Jukka Laukkanen

Paltamon kunnan markkinointiviestinnän. Luonnos design Little Red House / Jukka Laukkanen Paltamon kunnan markkinointiviestinnän Luonnos design Little Red House / Jukka Laukkanen Suunnittelun lähtökohdat Paltamo on kunta kuntien joukossa. Erottuaakseen massasta tulee kunnan ilmeen olla jotain

Lisätiedot

GRAAFINEN OHJEISTO 11/2014

GRAAFINEN OHJEISTO 11/2014 GRAAFINEN OHJEISTO 11/2014 ROIHU -GRAAFINEN OHJEISTO SISÄLLYSLUETTELO 1. ROIHU-LOGO... 3 1.1. PÄÄLOGON KAKSI VERSIOTA... 4 1.2. VÄRIT JA LOGON KIRJASINTYYPPI... 5 1.3. PÄÄLOGON SUOJA-ALUE... 6 1.4. MUSTA

Lisätiedot

KEUDAN GRAAFINEN OHJEISTO 2018

KEUDAN GRAAFINEN OHJEISTO 2018 KEUDAN GRAAFINEN OHJEISTO 2018 Ohjeet logon, värien sekä fonttien käyttöön. Lisätietoja Keudan ilmeestä ja muusta viestinnästä voit kysyä viestintä- ja markkinointipalveluista, viestinta@keuda.fi Logo

Lisätiedot

1. Lohkon korkeus ja leveys

1. 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ätiedot

INVESTOINTI- JA TOIMITILAMARKKINAKATSAUS Päijät-Häme Arviointitoimisto Oy. Mikko Helenius & Co

INVESTOINTI- JA TOIMITILAMARKKINAKATSAUS Päijät-Häme Arviointitoimisto Oy. Mikko Helenius & Co INVESTOINTI- JA TOIMITILAMARKKINAKATSAUS Päijät-Häme 0 Arviointitoimisto Oy Mikko Helenius & Co Kiinteistön arvo yrityskaupassa Sysmä Padasjoki Hämeenkoski Kärkölä Hollola Sisältö Pääkirjois Heinola Hollola

Lisätiedot

Imatran kaupunki. Graafinen ohjeisto

Imatran kaupunki. Graafinen ohjeisto Imatran kaupunki Graafinen ohjeisto 12.11.2010 Graafinen ohjeisto Logo ja värit 3 Logo 3 Logon turva-alue 5 Värit 6 Typografia 7 Lomakkeet 8 Raporttien kansilehti 13 Rollup 14 Ilmoitukset 16 Juliste 20

Lisätiedot

Otsikko otsikko otsikko otsikko

Otsikko otsikko otsikko otsikko Terveet lapset -Monitoimijuus lasten ja nuorten ylipainon ennaltaehkäisyssä (5 op) Otsikko otsikko otsikko otsikko TERVETULOA Terveet lapset monitoimijuus lasten ja nuorten ylipainon Lorem ipsum dolor

Lisätiedot

GRAAFINEN OHJEISTO

GRAAFINEN OHJEISTO GRAAFINEN OHJEISTO 5.6.2017 Tone of Voice OMINAISUUDET Palveluhenkinen Luotettava Helposti lähestyttävä KÄYTTÄYTYY Kriittisesti Heittäytyvästi Kunnioittavasti NÄYTTÄÄ Ammattitaitoiselta Pirteältä Houkuttelevalta

Lisätiedot

Peerage of Science ja vapaa vertaisarviointi. FT Nina Pekkala Tieteen julkisuus -seminaari

Peerage of Science ja vapaa vertaisarviointi. FT Nina Pekkala Tieteen julkisuus -seminaari Peerage of Science ja vapaa vertaisarviointi FT Nina Pekkala Tieteen julkisuus -seminaari 12.4.2013 Tieteellisen vertaisarvioinnin merkitys Tutkimuksen laadun ja arvon mitta Maailmanlaajuisesti julkaistaan

Lisätiedot

graafinen ohjeisto v

graafinen ohjeisto v graafinen ohjeisto v 2.2 3.4.2012 sisällys Alkusanat 3 logo 4 Logon versiot ja käyttötarkoitukset 5 Suojaalueet ja minimikoot 6 Logon värivariaatiot 7 värit 8 Päävärit ja lisävärit sekä värivariaatioryhmät

Lisätiedot

Tunnus. Tiedosto: 4ctunnus.eps

Tunnus. Tiedosto: 4ctunnus.eps Tunnus Yleiset ohjeet Tunnus esiintyy aina tekstillisenä. Tunnuksen värit ovat identtiset EU-lipun värien kanssa. Värit: Pantone Reflex Blue ja Pantone Process Yellow ja neliväripainatuksessa seuraavasti:

Lisätiedot

Graafiset ohjeet. värit tunnus ja logo muodot typografia

Graafiset ohjeet. värit tunnus ja logo muodot typografia Graafiset ohjeet värit tunnus ja logo muodot typografia Värit Ay-toimihenkilöiden värit ovat syklaaminpunainen Pantone 206 C ja vihreään vivahtava ruskea Pantone 133 C. Lämpiminä sävyinä ne muodostava

Lisätiedot

1 1 Graafinen ohjeisto viheroksa_ohjeisto.indd 1 3/30/ :56:44 AM

1 1 Graafinen ohjeisto viheroksa_ohjeisto.indd 1 3/30/ :56:44 AM 1 Graafinen ohjeisto viheroksa_ohjeisto.indd 1 3/30/2012 12:56:44 AM 2 viheroksa_ohjeisto.indd 2 3/30/2012 12:56:45 AM 3 Sisällysluettelo Johdanto...4 Värimääritykset...5 Typografia...6 Logon käyttö...7

Lisätiedot

Graafinen ohjeisto Kuvitus: J. Sibelius Finlandia

Graafinen ohjeisto Kuvitus: J. Sibelius Finlandia Graafinen ohjeisto 10.8.2011 Kuvitus: J. Sibelius Finlandia 1 Sisältö Johdanto... 3 Visuaalisuus... 4 Merkki... 5 Tunnus... 6 Tunnuksen suoja-alue ja minimikoko... 7 Tunnuksen asemointi ja koko... 8 Tunnuksen

Lisätiedot

1. LOGO 2. VÄRIT 3. GRAAFINEN MUOTOKIELI 4. TYPOGRAFIA 5. VALOKUVAT 6. SOVELLUSESIMERKKEJÄ

1. LOGO 2. VÄRIT 3. GRAAFINEN MUOTOKIELI 4. TYPOGRAFIA 5. VALOKUVAT 6. SOVELLUSESIMERKKEJÄ GRAAFINEN OHJEISTO Raaseporin visuaalinen identiteetti muotoutuu lukemattomissa eri sähköisissä ja fyysisissä ympäristöissä. On hyvin tärkeää, että noudatamme ohjeiston tarjoamia määrityksiä. Vain siten

Lisätiedot

GRAAFINEN OHJEISTUS 1.0

GRAAFINEN OHJEISTUS 1.0 GRAAFINEN OHJEISTUS 1.0 Mainostoimisto Penbox 10-2015 TAIVASSALON LOGO Virallinen logo 2015 Taivassalon ilmeen keskeisin elementti on tunnus logotekstin yhteydessä. Yksimastoisesta purjelaivasta muodostuva

Lisätiedot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai

Lisätiedot

Esipuhe. Sisältö: 6 Esimerkkisovelluksia SUOMEN RATSASTAJAINLIITTO RY FINLANDS RYTTARFÖRBUND RF

Esipuhe. Sisältö: 6 Esimerkkisovelluksia SUOMEN RATSASTAJAINLIITTO RY FINLANDS RYTTARFÖRBUND RF Esipuhe Sisältö: Suomen Ratsastajainliitto ry (SRL) on maamme ratsastusurheilun keskusjärjestö. Ratsastajainliitto edistää ratsastusta yleisenä urheilu- ja liikuntakasvatusmuotona, järjestää ratsastuskilpailuja

Lisätiedot

Yritystalo BusinessLohja

Yritystalo BusinessLohja Yritystalo BusinessLohja Etusivu Kontaktit Yritykset Palvelut Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis,

Lisätiedot

Sivupohja flat file julkaisujärjestelmälle. Kirjoittanut Jari Sarja (www.jarisarja.fi)

Sivupohja 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ätiedot

Praesent feugiat sapien aliquet odio. Integer vitae justo. Aliquam vestibulum fringilla lorem. Sed neque lectus, consectetuer at, consectetuer sed,

Praesent feugiat sapien aliquet odio. Integer vitae justo. Aliquam vestibulum fringilla lorem. Sed neque lectus, consectetuer at, consectetuer sed, Abstract Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut purus elit, vestibulum ut, placerat ac, adipiscing vitae, felis. Curabitur dictum gravida mauris. Nam arcu libero, nonummy eget, consectetuer

Lisätiedot

Graafinen ohjeisto 13.1.2014

Graafinen ohjeisto 13.1.2014 Graafinen ohjeisto 13.1.2014 1. Logo 1.1 Logo Elon yritystunnus Elon logo kuvastaa elämän mittaista matkaa ja siirtymää työelämästä onnellisesti eläkkeelle. Toimiakseen Elon brändiä ja tarinaa vahvistavalla

Lisätiedot

Turun kauppatieteiden ylioppilaat ry GraaFinen ohjeistus versio 1.0

Turun kauppatieteiden ylioppilaat ry GraaFinen ohjeistus versio 1.0 Turun kauppatieteiden ylioppilaat ry GRAAFINEN OHJEISTUS tavoit teet TuKY ry:n viestinnän tavoit teita ovat: sivu Yhdistyksen sisäinen ja ulkoinen viestintä on tehokasta ja tarkoituksenmukaista Tuky ry

Lisätiedot

POHJOIS-POHJANMAAN LIITTO Council of Oulu Region GRAAFINEN OHJEISTO

POHJOIS-POHJANMAAN LIITTO Council of Oulu Region GRAAFINEN OHJEISTO GRAAFINEN OHJEISTO Sisällys 1. TUNNUS 3 1.1 Tunnuksen piirtäminen 3 1.2 Typografia 4 1.3 Värimääritykset 4 1.4 Tunnuksen sijoittelu 5 1.5 Suoja-alue 5 1.6 Minimikoko 5 1.7 Käyttö värillisellä pohjalla

Lisätiedot

HTML:n perusteet. Jari Sarja / Otavan Opisto 2012. Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.

HTML:n perusteet. Jari Sarja / Otavan Opisto 2012. Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3. HTML:n perusteet Jari Sarja / Otavan Opisto 2012 Tämä oppimateriaali on lisensoitu Creative Commons Nimeä-Tarttuva 3.0 -lisenssillä 1 11. Sivuston taittaminen HTML:n avulla Sivuston taittaminen tarkoittaa

Lisätiedot

TEKNOWAREN TURVAVALAISTUSJÄRJESTELMIEN AFTER SALES -PALVELUT

TEKNOWAREN TURVAVALAISTUSJÄRJESTELMIEN AFTER SALES -PALVELUT TEKNOWAREN TURVAVALAISTUSJÄRJESTELMIEN AFTER SALES -PALVELUT TURVAVALAISTUS LUOTETTAVAA TUKEA TURVAVALAISTUSJÄRJESTELMÄN KOKO ELINKAARELLE Lighting Technology TEKNOWARE Lahtelainen Teknoware Oy on kansainvälinen

Lisätiedot

#näkemystehdas. Sisällöntuotanto on myynti- ja markkinointikoneiston

#näkemystehdas. Sisällöntuotanto on myynti- ja markkinointikoneiston #näkemystehdas Sisällöntuotanto on myynti- ja markkinointikoneiston sydän. Sisältömarkkinointi on tehokas keino tarjota asiakkaallesi ostopäätöstä helpottavaa tietoa. Kiteytettynä sisältömarkkinointi tarkoittaa

Lisätiedot

Sisällys. 112 ilmeen ideologia. Graafisesta ohjeesta

Sisällys. 112 ilmeen ideologia. Graafisesta ohjeesta Graafinen ohjeisto 2011 Sisällys Graafisesta ohjeesta Graafisen ohjeen tarkoituksena on ylläpitää yhtenäistä visuaalista ilmettä, joka on yhtenä tärkeänä tekijänä rakentamassa tapahtuman tunnettuutta ja

Lisätiedot

weela.net graafinen ohjeisto

weela.net graafinen ohjeisto weela.net graafinen ohjeisto Sisällys Weela.net SISÄLLYS: Logo sivu Värimääritykset... 2 Suoja-alueet... 3 Typografia... 4 Materiaali malleja Posteri, pöytäständi A ja B... 5 Julistepohja, käyntikorttimalli

Lisätiedot

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/

Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/ Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,

Lisätiedot

HANHIKIVI 1 GRAAFINEN OHJEISTO

HANHIKIVI 1 GRAAFINEN OHJEISTO GRAAFINEN OHJEISTO SISÄLLYS Logo 4 Suoja-alue 5 Väriversiot 6 Hierarkia 7 Värit 8 Osavärit ja suhteet 9 Typografia 10 Sähköinen esitys 11 LOGO Hanhikivi 1 -logossa on kaksi elementtiä: tunnus sekä logoteksti,

Lisätiedot

Graafinen ohjeisto. v.1.0.

Graafinen ohjeisto. v.1.0. v.1.0 www.oulunarkkitehtikilta.net logon variantit linja liukuväriversio vaaka täyttö liukuväriversio vaaka tornitalo-logo linja liukuväriversio pysty täyttö liukuväriversio pysty Oulun arkkitehtikillan

Lisätiedot

Kirkkonummen kunta. Graafinen ohjeisto 2012

Kirkkonummen kunta. Graafinen ohjeisto 2012 Kirkkonummen kunta Graafinen ohjeisto 2012 Graafisen ohjeiston tarkoitus 2 Vahva kunta on nähtävä merkittävänä kilpailuetuna. Yritys- ja julkisuuskuvan tärkeä osa on yrityksen tai organisaation visuaalinen

Lisätiedot

Paikallisen nuorisoseuran. graafinen ohjeisto. Mikä on graafinen ohjeisto ja sisällys

Paikallisen nuorisoseuran. graafinen ohjeisto. Mikä on graafinen ohjeisto ja sisällys Paikallisen nuorisoseuran graafinen ohjeisto Mikä on graafinen ohjeisto ja sisällys Graafinen ohjeisto tukee Suomen Nuorisoseurojen visuaalista ilmettä sekä auttaa ilmeen yhdenmukaisuuden säilyttämisessä.

Lisätiedot

KALAJOKI VIIDEN TÄHDEN ELÄMÄÄ. Graafinen ohjeisto

KALAJOKI VIIDEN TÄHDEN ELÄMÄÄ. Graafinen ohjeisto Graafinen ohjeisto SISÄLTÖ 1. GRAAFISET ELEMENTIT 1.1. Tunnus 4 1.2. Tunnuksen käyttö 5 1.3. Vaakuna 6 1.4. Värimaailma 7 1.5. Typografia 8 2. LOMAKKEISTO 2.1. Käyntikortit 9 2.2. Asiakirjapohjat 10 2.3.

Lisätiedot

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

CSS-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ätiedot

PÄIvItÄ MaAsEuTuSi. Kampanjaohje 01.06.2015. Euroopan maaseudun kehittämisen maatalousrahasto: Eurooppa investoi maaseutualueisiin

PÄIvItÄ MaAsEuTuSi. Kampanjaohje 01.06.2015. Euroopan maaseudun kehittämisen maatalousrahasto: Eurooppa investoi maaseutualueisiin Kampanjaohje 01.06.2015 Kampanjan taustat Manner-Suomen maaseudun kehittämisohjelman uuden ohjelmakauden käynnistyessä on tärkeää välittää tieto uusista maaseudun kehittämisen mahdollisuuksista. Ohjelmakausi

Lisätiedot

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

valitsin 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ätiedot

GRAAFINEN MANUAALI.

GRAAFINEN MANUAALI. www.liberaalipuolue.fi/media LOGO Puolueen logo koostuu kolmesta eri elementistä ja niiden asettelusta. Oikein -merkki, Liberaalipuolue -teksti ja vapaus valita -teksti. Logoa pitää käyttää täysin sille

Lisätiedot

GRAAFINEN OHJEISTO 2013

GRAAFINEN OHJEISTO 2013 GRAAFINEN OHJEISTO 2013 GRAAFINEN OHJEISTO 1 Johdanto Kainuun ammattiopiston yhtenäinen graafinen ilme vahvistaa kuvaa laadukkaasta ja luotettavasta toiminnasta ja sitä kautta lisää vetovoimaisuutta ja

Lisätiedot

Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista

Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista 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ätiedot

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Entiteetit 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ätiedot

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit Kirjaudu sisään / Rekisteröidy TUOTTEET Y R ITY S OTA YHT EYT TÄ Lorem ipsum dolor sit amet, consectetur adipiscing elit Nulla facilisi. Aenean ac LO R E M I P S U M Etsi tuotetta... MYYMÄL Ä K A L U ST

Lisätiedot

LOGON OHJEISTUS 2013

LOGON OHJEISTUS 2013 LOGON OHJEISTUS 2013 PERUSSUOMALAISET NUORET LOGO Kalevan Neito Perussuomalaisten Nuorten logon merkkiosassa on kuvankaunis Kalevan neito / Suomineito. Oikealla ylhäällä on vinjettiosa Pohjantähti. Tekstiosa

Lisätiedot

BRÄNDIKIRJA. Toukokuu

BRÄNDIKIRJA. Toukokuu BRÄNDIKIRJA Toukokuu 2019 1 1. LOGO 2 1. LOGO LOGO Autokeskuksen yritystunnus on Autokeskus-logo. Autokeskuksen logoa käytetään aina vaakamuodossa. Logoa ei saa latoa, piirtää tai asetella uudelleen. Logon

Lisätiedot

H 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 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ätiedot

Graafinen ohje Työelämä 2020 -hanke

Graafinen ohje Työelämä 2020 -hanke Graafinen ohje 2 SISÄLTÖ 3 Tunnus 4 Tunnuksen käyttö värillisen taustan ja valokuvan päällä Käyttö muiden tunnusten kanssa 5 Tunnuksen rasterielementin käyttö 6 Värit ja lisävärit 7 Typografia kutsuissa,

Lisätiedot

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta

Lisätiedot

Vaadin Bugrap. User Interface Wireframes. Hannu Salonen Vaadin Ltd.

Vaadin Bugrap. User Interface Wireframes. Hannu Salonen Vaadin Ltd. Vaadin Bugrap User Interface Wireframes Hannu Salonen Vaadin Ltd. hannu@vaadin.com Dave Developer Logout Vaadin 7 Report a Bug 123 Bug reports Request a Feature 456 Feature requests Search reports Go Milestone

Lisätiedot

H 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 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ätiedot

Navigointi Verkkomultimedia ICT1tn004. Elina Ulpovaara

Navigointi 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ätiedot

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti 1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23

Lisätiedot

Graafinen ohjeistus. Suomen evankelis-luterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO

Graafinen ohjeistus. Suomen evankelis-luterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO Graafinen ohjeistus Suomen evankelis-luterilainen kirkko ja seurakunnat SUOMEN EV.LUT. KIRKKO 1 Sisällys 1. Johdanto Kenelle, missä, miten? 3 2. Tunnus 5 Kirkon yhteinen tunnus on yhteinen nimittäjä 5

Lisätiedot

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

Kotisivujen 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ätiedot

Ulkopuolisen tyylitiedoston käyttö

Ulkopuolisen 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ätiedot

ESIPUHE. Graafisen ohjeiston peruselementit ovat: Kelmun tunnuskuva Kuvamaailma Typografia Tuotteet

ESIPUHE. Graafisen ohjeiston peruselementit ovat: Kelmun tunnuskuva Kuvamaailma Typografia Tuotteet GRAAFINEN OHJEISTO SISÄLLYS 1. Sisällys 2.Esipuhe 3. Värit 4. Sävyt 5. Logo 6. Tuotemerkki 7. Kirjaisimet 8. Kuvakieli 9. Slogan 10. Sosiaalinen media 11. Lehti-ilmoitukset 12. Jäsenkortti 13. Käyntikortti

Lisätiedot

EURAN KUNTA GRAAFINEN OHJEISTO EURAN KUNTA GRAAFINEN OHJEISTO

EURAN KUNTA GRAAFINEN OHJEISTO EURAN KUNTA GRAAFINEN OHJEISTO Graafinen ohjeisto määrittelee Euran ulkoisen ilmeen ja antaa ohjeet sen toteuttamisesta. Ohjeisto opastaa kunnan logon ja muiden graafisten elementtien käytössä sekä määrittelee värit ja kirjasimet. Löydät

Lisätiedot