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ä
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öä.
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:
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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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 {
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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="layout.css"/> <title></title> </head> <body> <div id="sitemasterwrapper"> <!--Sivun yläosa --> <div id="siteheader"> <!--Navigointipalkki --> <div id="sitenavigation">
<!--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;
#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;
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.
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.
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ä.
/*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">
Blogikirjoitukset <div class="panelcontent"> Decet Et Jus Aliquip Neo <div class="paneltime"> Maanantai, Elokuu 9, 2010-14: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, 2010-10: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ää
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;
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:
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;
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;
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, 2010-14: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, 2010-10: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.
/*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;
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;
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;
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 11.10+ */ 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">
<!--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, 2010-14: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, 2010-10: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> 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.
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.
/*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
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
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 0-100. /*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%; margin-bottom:2px;
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 kirjasimia @font-face -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= http://fonts.googleapis.com/css?family=droid+sans&v1 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-8951-1- 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ä:
esimerkki.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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="http://fonts.googleapis.com/css?family=droid+sans&v1" 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>
<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, 2010-14: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, 2010-10: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> <!--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> </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;
#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;
.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 11.10+ */ 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;
.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;
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%;
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;
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.
11 Linkkejä Tässä muutama hyödyllinen linkki kurssiin liittyen: World Wide Web Consortiumin CSS-validaattori ISO-8951-1-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)