23.4.2013 Aulikki Hyrskykari Lokeromalli Taustat Visuaalinen sommittelu/asemointi Lomakkeet margin top Sisältö (content) Täyte (padding) border top padding top margin left border left padding left ELEMENTIN SISÄLTÖ (content area) padding right border right margin right Reunus (border) Marginaali (margin) padding bottom border bottom margin bottom Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)
Reunuksen paksuus, tyyli ja väri o border width: [thin medium thick mittayksikkö inherit] 1 4 o border style: [none hidden dotted dashed solid double width groove ridge inset outset] 1 4 o border color: [trasparent color inherit] 1 4 Elementtillä 10px levyiset reunat (kaikki reunat): p { border width: 10px; Elementillä katkoviivalla piirretty kehys.kehystetty { border style: dashed Elementillä sinisellä värillä piirretty kehys Tämä olisi tulos, jos oheiset säännöt olisi annettuna tämän tekstin sisältävään p elementtiin div { border color: #34fade Kolme edellistä reunuksen piirrettä on mahdollista kirjoittaa yhteen sääntöön seuraavasti: p { border: 10px dotted #34fade; Jos joku tai jotkin kolmesta piirteestä puuttuu ko. piirteelle käytetään oletusarvoa Järjestyksen tulee kuitenkin aina olla yllä annettu (paksuus, tyyli, väri). Reunuksen eri reunat voivat olla erilaiset, annetaan silloin 4 arvoa järjestyksessä yläreunasta lähtien myötäpäivään (top, right, bottom, left)
valitsin { border width: 5px 15px 25px 35px; border style: inset; border color: blue; width: 30em; piirteellä kaksi arvoa valitsin { border width: 5px 10px; border style: solid dotted; border color: green; kaksi ensimmäistä piirrettä yhdistetty, kolmannella piirteellä kolme arvoa valitsin { border: 20px groove; border color: green red yellow; Reunuksen eri piirteet voi antaa myös yksittäin elementin eri reunoille.kehys { border width top: 1px; border width right: 10px; border width bottom: 1px; border width left: 50px; Ylläolevan kanssa yhtenevä sääntö olisi siis:.kehys { border width: 1px 10px 1px 50px; Tarve yksittäisen reunapiirteen käyttöön esim. jos halutaan asettaa vain vasen reunus
Täytteen ja marginaalin määritys o vain yksi, mittayksikköarvoinen attribuutti o muuten analoginen reunuksen kanssa opadding: [mittayksikkö] 1 4 omargin: [mittayksikkö] 1 4.harvenna { margin left: 2em; padding: 25px 50px;.kehystetty { border radius: 10px; Eri kulmat voi pyöristää eri tavoin.kehystetty { border: 10px double orange; border radius: 5px 50px 50px 50px;
Jos taulukolle määritelty <table border="1"> o piirtää reunukset kullekin taulukon solulle erikseen o kahden solun väliin piirtyy aina kaksi viivaa o hallinta border collapse piirteen avulla border collapse: collapse separate inherit Solujen väliin jätettävää tilaa o voi luonnollisestikin säädellä normaalisti (solun padding, margin) avulla, tai o tähän tilanteeseen erityisesti: border spacing o vierekkäisten solujen etäisyys toisistaan CSS mittayksiköillä ilmaistuna border spacing: h etäisyys [v etäisyys] inherit.tauluntyyli { border collapse:separate; border spacing:10px 50px; o jos piirteelle annetaan arvona vain yksi mittayksikkö, horisontaalinen ja vertikaalinen etäisyys ovat yhtä suuret. Värin määrittelyssä color: värikoodi inherit edustaväri elementin piirtoväri, periytyvä background color: värikoodi läpinäkyvä inherit täyttöväri elementin taustaväri, ei periydy background image: uri none inherit Taustakuva o oletusarvoisesti taustakuva toistuu o sekä horisontaalisesti että vertikaalisesti o sen avulla helppo toteuttaa mm. taustatekstuureja Esimerkki taustakuvan käytöstä Esimerkki kuvan käytöstä tekstuurin luomiseksi
Taustakuvan esittämistä voi kontrolloida seuraavilla piirteillä background attachment: scroll fixed inherit taustakuvan pysyminen paikallaan / kuvan liikkuminen sivua vieritettäessä background position: [left righ center top center bottom] [mittayksikkö x mittayksikkö y] taustakuvan vasemman yläreunan piirtopaikka, oletus left top, joka voitaisiin ilmaista myös esim. 0% 0% tai 0em 0em background repeat: repeat repeat x repeat y no repeat inherit taustakuvan mahdollinen toistaminen horisontaalisesti tai (/ja) vertikaalisesti background clip: content box border box margin box inherit rajaa elementistä lokeromallin osaan, johon taustakuva vaikuttaa background size: mittayksikkö taustakuvan koon skaalaus annettuun kokoon Esimerkki kuvan käytöstä taustalla (ei toistoa) Periaate yksinkertainen: o mieti ensin millaisista elementeistä sivusi koostuu o piirrä elementeistä rautalankamalli o kirjoita elementit omiksi osikseen o käytä ensisijaisesti HTML5:n rakenteen määrittelyyn esiteltyjä semanttisia elementtejä o toissijaisesti geneeristä div elementtiä Sen jälkeen voit asemoida elementit sivulle joko o asemointia - position piirre o kellutusta - float piirre o elementtien näyttötavan muokkausta - display piirre
Ajatuksena miettiä o mitä sisältöä sivulla halutaan esittää, ja o miten paljon sille halutaan varata tilaa Rautalankamallin voi o piirtää käsin paperille, o tarkoitukseen löytyy myös erilaisia wireframe, tai protoiluvälineitä: - balsamiq : http://www.balsamiq.com/ maksullinen, mutta hiukan riisuttua versiota pääsee käyttämään ilmaiseksi verkkoversiona: http://builds.balsamiq.com/b/mockups web demo/ - Pencil: http://builds.balsamiq.com/b/mockups web demo/ open source ohjelma - lista muista vastaavista välineistä: http://designbeep.com/2011/05/12/33 freeand online tools for drawingpainting and sketching/ aside { border: 2px dotted #ce0c39; border radius: 10px ; padding: 1em; background color: #fcd4dd; width: 70%; aside {... position: relative; left: 3em; top: 3em;
aside {... position: absolute; left: 100px; top: 0px; Irroitetaan elementtivirrasta ja asetetaan kiinteään kohtaan äitielementtiään. Koska äitielementti liikkuu sivua vieritettäessä, myös siihen absoluuttisesti sidottu elementti liikkuu. aside {... position: absolute; left: 100px; top: 0px; Irroitetaan elementtivirrasta ja asetetaan kiinteään kohtaan selainikkunassa. Pysyy paikallaan sivua vieritettäessä. Kiinteästi asemoidut elementit voivat mennä päällekkäin o z index määrittää elementin syvyystason o mitä suurempi arvo, sen edempänä syvyystasolla o arvona kokonaisluku, voi saada myös negatiivisia arvoja.edessa { z index: 2; takana.jaa taakse { z index: 1; edessä
aside { float:left; Elementti voidaan kelluttaa horisontaalisessa suunnassa alkuperäiseltä paikaltaa oikealle tai vasemmalle. Koska äitielementti liikkuu sivua vieritettäessä, myös siihen absoluuttisesti sidottu elementti liikkuu. aside { float:left; p.puhdista { clear: left; Kun elementti on otettu irti elementti virrasta, uudelleenasemointi vaikuttaa sen jäljessä tuleviin elementteihin Jäljessä tulevat elementit ottavat käyttöön vapautuneen tilan Vaikutuksen voi eliminoida clear piirteellä. clear: right left both Lohkotason elementti o erotetaan muista elementeistä rivinvaihdolla o varaa iselleen horisontaalisesti tilaa 100% äiti elementtinsä leveydestä. Rivitason elementti o varaa tilaa vain sisällön tarpeen mukainen lokero Jos jatkuu useammalle riville, uudella rivillä se varaa itselleen uuden lokeron Elementit luokittelu lohkotason ja rivitason elementteihin o itse asiassa kyse on piirteen display oletusarvosta o ne elementit, joilla display piirteen oletusarvo on - block luokiteltiin lohkotason elementeiksi (esim. <p>) - inline luokiteltiin rivitason elementeiksi (esim. <strong>) display: block inline inline block none inherit[..];
Jos esimerkiksi muutetaan o <p>: display piirteen arvoksi inline: peräkkäiset kappaleet kirjoittuvat yhteen o <strong>: display piirteen arvoksi block: vahvennetut tekstinosat erotettaan muista elementeistä rivinvaihdolla inline block elementillä on o lohkotason elementin lokeromalli o silti se käyttäytyy muuten kuten rivitason elementti (ei erotu muista elementeistä rivinvaidolla) none yhdessä jonkin skriptikielen kanssa käytettynä hyödyllinen o elementti voidaan kääntää näkymättömäksi o näkymätön elementti ei varaa tilaa elementtivirrasta o dokumentti käyttäytyy kuten elementtiä ei olisi lainkaan olemassa. display piirteellä on iso valikoima muitakin arvoja, mm. o elementti voidaan saada käyttäytymään kuten listan rivi, o taulukko o jokin taulukon osa (rivi, sarake, solu, otsikko ) Ethan Marcotte: Responsive Web Design (2010) o antoi nimen ja kirjoitti näkyväksi periaatteet, joita CSS3:n uusi mediakyselymahdollisuus antoi. Periaate o aiemmin käytäntönä pyrkiä luomaan sivuista erilliset mobiiliversiot o laitteistokirjon kasvaessa kestämätön käytäntö sivuston sisällöstä kirjoitetaan vain yksi versio lineaariseksi elementtien virraksi mediakyselyiden hyväksikäyttäen voidaan tilanteen mukaan tuottaa samasta sisällöstä kullekin laitteelle sopiva visuaalinen sommittelu Resposive Design ajatuksen muunnelmia (sama perusajatus) o progressive design, content focused tai mobile first suunnittelu Sivun sisällön esittämiselle suunnitellaan erilliset rautalankamallit riippuen sen laitteen ominaisuuksista, jolla sivua katsotaan Rautalankamallit toteutetaan omina CSS tiedostonaan, ja valinta kulloinkin käytettävästä CSS tiedostosta tehdään mediakyselyn antaman vastauksen
@media media type [and (media feature experssion)] * Mediakyselyt moduuli on valmis CSS3 standardi (W3C Recommendation 19 June 2012) Mediakyselyä voi käyttää myös kuten valitsinta, esimerkiksi @media screen and (max device width: 480px) {.column { float: none; Tai yhdistää myös <link> elementtiin, jolloin sen avulla voidaan valita koko käytettävä tyylipohja, esimerkiksi: <link rel="stylesheet" type="text/css" media="screen and (max device width: 480px)" href="mobiili.css" /> Voidaan tiedustella selaimelta ovatko tietyt ehdot voimassa o siinä ympäristössä, jossa dokumenttia ollaan esittämässä. o tiedustellaan ensin laitetta: mediatyyppi, (media type) o sen jälkeen yhden tai useammman mediapiirteen (media feature expression) voimassaoloa Mediatyypit: Mediapiirteet: screen, braille, embossed, handheld, print, projection, speech, tty ja tv.
http://todomvc.com/ http://snl.no/ http://foodsense.is/tastemakers http://bahs.com/ http://stuffandnonsense.co.uk/ Tähän asti on käsitelty miten WWW sivuja käytetään tiedon välittämiseen käyttäjälle. Lomakkeiden avulla voidaan saada tietoa toiseen suuntaan, käyttäjältä sivun julkaisijalle. Lomakkeet ovat keskeinen osa vuorovaikutteisten verkkopalvelujen toteuttamisessa, esimerkiksi o hakukoneet o verkkokaupat o informaatiopalvelut (kirjastot, tietokannat jne.) o www pohjaiset sähköpostipalvelut o mielipidekyselyt o tapahtumiin, kursseille yms. ilmoittautumiset
Lomakkeet koostuvat kahdesta osasta: (1) WWW sivulla näkyvästä, HTML:n ja CSS:n avulla määritellystä lomakkeesta ja (2) Lomakkeelle annettujen tietojen käsittelyn tekevästä ohjelmasta ("lomakkeenkäsittelijä", tallennettuna palvelimelle). Lomakkeet on koettu HTML:ssä hankaliksi, koska o muotoilu ja käsittely vaatii muita sivuelementtejä enemmän sekä CSS että Javascript koodausta HTML5:ssä tämä on pyritty ottamaan huomioon o sisältää huomattavan määrän uusia elementtejä o uusia attribuutteja lomakkeen käsittelyä varten Selaimet eivät kovin kattavasti tue vielä o HTML tulkit jättävät tunnistamattomat elementit tai attribuutit käsittelemättä o uudet ominaisuudet jäävät vain huomiotta o tulevat käyttöön sitä mukaan kun uudet selainversiot osaavat niitä tulkita
Wufoo (http://wufoo.com/html5/) o voit tarkistaa miten eri selaimet ja selainversiot tukevat HTML5 lomakkeen uusia - input tyyppejä - input attribuutteja - lomake elementtejä Sivustolla myös o esimerkkikuvia lomake elementtien toiminnasta o helppo kokeilla livenä uusien piirteiden toimintaa <form {lomake elementin attribuutit> {elementit lomakkeen sisällä määräävät lomakkeen sisällön {elementti, joka lähettää lomakkeen käsittelyyn (input type="submit") </form> Lomakkeen mahdolliset attribuutit: accept charset action autocomplete novalidate target enctype method name