Upload
danghuong
View
221
Download
2
Embed Size (px)
Citation preview
4/23/2013
JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
23.4.2013Aulikki Hyrskykari
LokeromalliTaustatVisuaalinen sommittelu/asemointiLomakkeet
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
ELEMENTIN SISÄLTÖ
(content area)
padding‐top
padding‐bottom
padding‐right
padding‐left
border‐top
border‐bottom
border‐right
border‐left
margin‐left
margin‐right
margin‐bottom
margin‐top
Täyte (padding)
Reunus (border)
Marginaali (margin)
Sisältö (content)
Reunus (border) – Täyte (padding) –Marginaali (margin)
Katsotaan tarkemmin seuraavaksi:
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• Reunuksen paksuus, tyyli ja värio 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
p { border‐width: 10px; }
.kehystetty { border‐style: dashed }
• Elementtillä 10px levyiset reunat (kaikki reunat):
• Elementillä katkoviivalla piirretty kehys
div { border‐color: #34fade }
• 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
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• 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)
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
valitsin { border‐width: 5px 15px 25px 35px;border‐style: inset;border‐color: blue;width: 30em;
}
valitsin { border‐width: 5px 10px;border‐style: solid dotted;border‐color: green;
}
valitsin { border: 20px groove;border‐color: green red yellow;
}
piirteellä kaksi arvoa
kaksi ensimmäistä piirrettä yhdistetty, kolmannella piirteellä kolme arvoa
• Reunuksen eri piirteet voi antaa myös yksittäin elementin eri reunoille
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
.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
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
.harvenna {margin‐left: 2em;padding: 25px 50px;
}
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
.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
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
.tauluntyyli { border‐collapse:separate;border‐spacing:10px 50px;
}
o jos piirteelle annetaan arvona vain yksi mittayksikkö, horisontaalinen ja vertikaalinen etäisyys ovat yhtä suuret.
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• 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
• Taustakuvao 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
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• 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|inherittaustakuvan mahdollinen toistaminen horisontaalisesti tai (/ja) vertikaalisesti
background‐clip: content‐box|border‐box|margin‐box|inheritrajaa 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 jokoo asemointia
- position‐piirre
o kellutusta
- float‐piirre
o elementtien näyttötavan muokkausta
- display‐piirre
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• 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‐free‐and‐online‐tools‐for‐drawingpainting‐and‐sketching/
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
aside { ...position: relative;left: 3em;top: ‐3em;
}
aside { border: 2px dotted #ce0c39;border‐radius: 10px ;padding: 1em;background‐color: #fcd4dd;
width: 70%;}
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
aside { ...position: absolute;left: 100px;top: 0px;
}
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.
Irroitetaan elementtivirrasta ja asetetaan kiinteään kohtaan selainikkunassa.
Pysyy paikallaan sivua vieritettäessä.
• Kiinteästi asemoidut elementit voivat mennä päällekkäino z‐index määrittää elementin ”syvyystason”
o mitä suurempi arvo, sen edempänä syvyystasolla
o arvona kokonaisluku, voi saada myös negatiivisia arvoja
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
.edessa {z‐index: 2;
}
.jaa‐taakse {z‐index: ‐1;
}
takana
edessä
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
aside { float:left; }p.puhdista {
clear: left;}
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.
Kun elementti on otettu irti elementti virrasta, uudelleen‐asemointi 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
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• 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[..];
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• Jos esimerkiksi muutetaano <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ödyllineno 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 mediakysely‐mahdollisuus antoi.
• Periaateo 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
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
•@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
• Tai yhdistää myös <link>‐elementtiin, jolloin sen avulla voidaan valita koko käytettävä tyylipohja, esimerkiksi:
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
@media screen and (max‐device‐width: 480px) {.column {
float: none;}
}
<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: screen, braille, embossed, handheld,
print, projection, speech, tty ja tv.
•Mediapiirteet:
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• http://todomvc.com/
• http://snl.no/
• http://foodsense.is/tastemakers
• http://bahs.com/
• http://stuffandnonsense.co.uk/
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• 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
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• 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).
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• 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 huomioono 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
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
• 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öso esimerkkikuvia lomake‐elementtien toiminnasta
o helppo kokeilla ”livenä” uusien piirteiden toimintaa
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
4/23/2013JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto
<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♦ enctype method name novalidate♦ target
<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>