Aulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA

Koko: px
Aloita esitys sivulta:

Download "Aulikki Hyrskykari Antti Sand. JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA"

Transkriptio

1 Aulikki Hyrskykari Antti Sand

2 Edellinen luento o Sääntöjen kohdistaminen (periytyminen, painoarvo) o CSS värit, mittayksiköt o Typografiaa, kirjasinkokojen hallinnasta, webbikirjasimet o Lokeromalli alustavasta Tällä luennolla o Lokeromallia kehystykset, taustakuvat o Visuaalinen sommittelu rautalankamallit asemointi o Mukautuva suunnittelu responsiivinen suunnittelu

3 margin-left border-left padding-left padding-right border-right margin-right Sisältö (content) Täyte (padding) margin-top border-top padding-top ELEMENTIN SISÄLTÖ (content area) Reunus (border) Marginaali (margin) padding-bottom border-bottom margin-bottom

4 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: dotted Elementillä väritetty 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

5 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).

6 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: dotted; border-color: green; kaksi ensimmäistä piirrettä yhdistetty, kolmannella piirteellä kolme arvoa valitsin { border: 20px groove; border-color: green red yellow;

7 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

8 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;

9 .kehystetty { border-radius: 10px; Eri kulmat voi pyöristää eri tavoin.kehystetty { border: 10px double orange; border-radius: 5px 50px 50px 50px;

10 able, th, td Jos taulukolle annettu css-sääntö o piirtyvät reunukset kullekin taulukon solulle erikseen (solujen välissä kaksi viivaa) table, td { border: 1px solid black; Hallinta border-collapse-piirteen avulla border collapse: collapse separate inherit table, td { border: 1px solid black; table { border-collapse:collapse;

11 border-spacing:20px 5px; Solujen väliin jätettävää tilaa o voi säädellä solun täytteen (padding) 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 table, td { border: 1px solid black; border-collapse:separate; border-spacing:20px 5px; o jos piirteelle annetaan arvona vain yksi mittayksikkö, horisontaalinen ja vertikaalinen etäisyys ovat yhtä suuret.

12 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

13 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)

14 Kaksi vierekkäistä (tai sisäkkäistäkin) elementtiä Vertikaalisuunnassa marginaalit limittyvät o jos molemmat marginaalit positiivisia tai negatiivisia, käytetään itseisarvoltaan isompaa marginaalia Jos marginaalit eri merkkisiä, luvut lasketaan yhteen Horisontaalissa suunnassa limittymistä ei tapahdu Tommy Olsson and Paul O Brien: Collapsing Margins Andy Budd: No margin for Error

15 Periaate yksinkertainen: o mieti ensin millaisista visuaalisista 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) o kellutusta (float) tai o elementtien näyttötavan kellutusta (display) muokkausta käyttäen

16 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 : maksullinen, mutta hiukan riisuttua versiota pääsee käyttämään ilmaiseksi verkkoversiona: - Pencil: open source ohjelma - lista muista vastaavista välineistä:

17 aside { border: 2px dotted #ce0c39; border-radius: 10px ; padding: 1em; background-color: #fcd4dd; width: 70%; aside {... position: relative; left: 3em; top: -3em;

18 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: fixed; left: 100px; top: 0px; Irroitetaan elementtivirrasta ja asetetaan kiinteään kohtaan selainikkunassa. Pysyy paikallaan sivua vieritettäessä.

19 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; edessä.jaa-taakse { z-index: -1; takana

20 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

21 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>) taustakuvan pysyminen paikallaan / kuvan liikkuminen sivua vieritettäessä display: block inline inline-block none inherit[..];

22 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 )

23

24 Ajatuksena kelluttaa kukin palsta vasemmalle edellisen palstan viereen.. palsta1,. palsta2,.palsta3 { width: 300px; float: left; margin: 10px; 960px

25 Kiinteässä asettelussa o elementit eivät mukaudu ikkunan koon muutokseen o elementtien mitat annetaan pikseleinä tai em-yksikköinä Skaalautuva sommittelussa o elementit venyvät ikkunan koon muutoksen mukaisesti o elementtien mitat annetaan prosentteina Entä jos sisältö ei mahdu? o overflow: visible hidden scroll auto ts. jos sisältö ei mahdu: annetaan value yli, leikataan, elementissä on vierityspalkit tai vierityspakit tuodaan automaattisesti tarvittaessa

26 Elementtien sijoittelun parempi kontrolli + rivin pituuden kontrollointi reunojen tyhjät tilat Jos käyttäjä muuttaa kirjasinkokoa, muutos saattaa aiheuttaa ongelmia o Sivun saa mukautumaan selainikkunan kokoon + sisältö kutistuu pieneen näyttöön leveässä näytössä helposti hankalan pitkiä rivejä o Sommittelu saattaa muuttua paljon ajatellusta»min-width, max-width: CSS piirteiden avulla edelliset voi yhdistää elastiseksi sommitteluksi (liquid layout)

27 Ethan Marcot: 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 perusteella

28 @media media-type [and (media-feature-experssion)] * Mediakyselyt-moduuli on valmis CSS3-standardi (W3C Recommendation 19 June 2012) Mediakyselyä voi käyttää kuten valitsinta, 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" />

29 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.

30

31 Ruudukoita (gridejä) käytetään sommittelussa yleisesti Valokuvissa tasapainon tai jännitteen luomiseksi Kolmanneksen sääntö (Rule of third s) yleinen sommitteluohje o 3x3 ruudukon risteyskohdat kuvan kannalta tärkeitä

32 JWT 2015 Aulikki Hyrskykari, Antti Sand, SIS, UTA

33 oetuja sivuston sivujen kesken yhtenäisempi vaikutelma tukee käyttäjää etsitty informaation etsinnässä (lisää ennustettavuutta) helpottaa uuden sisällön lisäämistä 12 x 60 px palstat, 20 px etäisyydellä toisistaan, sivuilla 10px marginaalit

34 Huom! sekä container_12 että gid_n luokka Esimerkiksi 12 palstaa:.container_12 { margin-left: auto; margin-right: auto; width: 960px;.container_12.grid_4 { width: 300px;.container_12.grid_6 { width: 460px; <section class="container_12 grid_4"> leveyteni on 1/3 sivusta </section> <section class="container_12 grid_4"> leveyteni on 1/3 sivusta </section> <section class="container_12 grid_4"> leveyteni on 1/3 sivusta </section> <div class="clear"></div> <section class="container_12 grid_6"> leveyteni on 1/2 sivusta </section> <section class="container_12 grid_6"> leveyteni on 1/2 sivusta </section>

35 o Edellinen tuottaisi sivulle 10 px 20 px 20 px leveyteni on 1/3 sivusta leveyteni on 1/3 sivusta leveyteni on 1/3 sivusta 10 px leveyteni on 1/3 sivusta 20 px leveyteni on 1/3 sivusta 4/14/2015

36 Mahdollistaa erilaisia sommitteluja

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin) 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

Lisätiedot

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014

Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/31/2014 1.4.2014 Aulikki Hyrskykari Edellinen luento o Sääntöjen kohdistaminen (periytyminen, painoarvo) o CSS värit, mittayksiköt o Typografiaa, kirjasinkokojen hallinnasta, webbikirjasimet o Lokeromalli alustavasta

Lisätiedot

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) T-111.1100 Digitaalisen median työvälineet (3 op) T-111.1100 Digitaalisen median työvälineet (3 op) Markku Laine DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

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

CSS tyyliä sivuihin osa II. Elina Ulpovaara

CSS tyyliä sivuihin osa II. Elina Ulpovaara CSS tyyliä sivuihin osa II Elina Ulpovaara Sisällys Laatikkomalli Margin Border Padding Outline Outline-offset Pyöristetyt kulmat Border-radius Tekstiin liittyviä css-ehdotuksia Text-align Text-decoration

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

WWW-sivujen Verkkosivujen ulkoasu (CSS)

WWW-sivujen Verkkosivujen ulkoasu (CSS) WWW-sivujen Verkkosivujen ulkoasu (CSS) ME-C2300 Verkkojulkaisemisen perusteet (5 op) T-111.1100 Digitaalisen median työvälineet (3 op) Antti Tolppanen DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan

Lisätiedot

Kuva xhtml-sivulla. Mirja Jaakkola

Kuva xhtml-sivulla. Mirja Jaakkola Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri

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

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1 Digitaalisen median tekniikat css tyylimääritykset jatkuu 31.3.2004 Harri Laine 1 CSS fontit font-family: pilkulla eroteltu luettelo fonttinimiä, ensimmäistä listasta löytyvää fonttia käytetään fontit

Lisätiedot

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara

Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005

Lisätiedot

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård

selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård selector { CSS property: value; property2: value; Code Camp for Girls 2015 - Sonja Jaakkola & Sanna Nygård CSS selectorit Elementti HTML CSS otsikko h1 { color: pink; Luokka HTML CSS

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

CSS. Tekstin muotoilua

CSS. Tekstin muotoilua CSS Tekstin muotoilua Tekstin muotoilu Kirjasimen ominaisuudet font-family font initial inherit; font-style normal italic oblique initial inherit; font-variant normal small-caps initial inherit; font-weight

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

Kuvat ja taustat ICT1TN004. Elina Ulpovaara

Kuvat ja taustat ICT1TN004. Elina Ulpovaara Kuvat ja taustat Elina Ulpovaara Sisältö Kuvan toteuttaminen Kuvan käyttötarkoitus Tiedostomuodot Img-elementti Figure- ja caption elementit Kuvan sijoittelu www-sivulla Kuvan keskitys Tekstin tasaus pystysuorassa

Lisätiedot

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28

Written by Administrator Wednesday, 05 October 2011 08:06 - Last Updated Monday, 17 October 2011 15:28 Sivupohja Joomlalle Sivupohjan tekeminen Joomlalle itse alusta saakka kuulostaa vaikealle. Työ on kuitenkin varsin helppo, jos vaan tietää tekemisen kaavan ja ymmärtää idean sivupohjasta. Joomlalle sivupohjan

Lisätiedot

HTML-ohjeet. Sivun perusrakenne