Esittely latautuu. Ole hyvä ja odota

Esittely latautuu. Ole hyvä ja odota

CSS ja sen sovellukset 9.2.2006 Vesa Jussila. Esitys  Yleistä –Historia –Etuja ja huonoja puolia –Mediatyypit  Käyttö –Laatikkomalli –CSS-taitto –Sovelluksia.

Samankaltaiset esitykset


Esitys aiheesta: "CSS ja sen sovellukset 9.2.2006 Vesa Jussila. Esitys  Yleistä –Historia –Etuja ja huonoja puolia –Mediatyypit  Käyttö –Laatikkomalli –CSS-taitto –Sovelluksia."— Esityksen transkriptio:

1 CSS ja sen sovellukset 9.2.2006 Vesa Jussila

2 Esitys  Yleistä –Historia –Etuja ja huonoja puolia –Mediatyypit  Käyttö –Laatikkomalli –CSS-taitto –Sovelluksia

3 Mitä on CSS?  Cascading Style Sheets, Porrastetut tyyliarkit  Kuvataan HTML, XHTML ja XML dokumenttien ulkoasua  Ulkoasun erottaminen sisällöstä

4 Etuja  Luettavissa helposti eri alustoilla  Dokumentit kevenee  Ylläpito helppoa  Uusia keinoja ja mahdollisuuksia taitossa

5 Huonoja puolia ja ongelmia  Selaintuki vaihtelevaa –Useimmat selaimet ei tue täydellisesti CSS2 spesifikaatiota  Erilainen ajattelutapa taitossa  Puutteellinen pystysuuntainen asettelu

6 Historia  Kehittely aloitettiin 1994  CSS Level 1 (1996)  CSS Level 2 (1998)  CSS Level 2 revision 1 (2004)  CSS Level 3 kehityksessä (2001…)

7 Mediatyypit  Yksi CSS:n tärkeimmistä ominaisuuksista  Tyylejä eri alustoille  Yksi huonoiten tuettuja ominaisuuksia

8 Mediatyypit  all - kaikille laitteille  aural - kuulomuotoilumalli  braille- kosketeltava media  embossed- sivutettu braille  handheld- kädessä pidettävät laitteet

9 Mediatyypit  print- sivutettu printtimedia  projection- heijastettavat  screen- tietokoneen näyttö  tty- kiinteää kirjasin leveyttä käyttävät laitteet  tv- televisio-tyyppiset matalaresoluutioiset laitteet

10 Käyttöotto  3 eri tapaa liittää: –Suoraan HTML-koodin sekaan (Inline) –HTML-sivun elementtiin –Linkitys ulkoiseen CSS-tiedostoon  Ulkoinen tapa suositeltu

11 Mediatyyppien käyttöotto  Mediatyyppejä voidaan käyttää kolmella eri tavalla: @import url(“voice.css") aural; @media aural { body { volume: medium; } }

12 CSS ja taulukkotaiton erot  Taulukoilla asetetaan ruudukkoon elementtejä  CSS:llä pinotaan ja asetellaan laatikoita

13 Laatikkomalli

14 CSS-taitto  HTML-tiedosto rakentuu Div- elementeistä Päänavigaatio Sivunavigaatio Sisältöä Vesa Jussila

15 CSS-taitto  Div-elementit sijoitetaan CSS:n avulla #center { width: 627px; } #header { clear: both; } #navi-main { clear: both; } #navi-right { float: right; clear: right; width: 163px;} #content { float: left; clear: left; } #footer { clear: both; }

16 Sovelluksia  Kuvanvaihto hiiren ollessa elementin päällä  Kehyksien (frameset ja iframe) korvaaminen  JavaScriptin kanssa monimutkaisiakin navigaatioita yksinkertaisesti http://www.twinhelix.com/dhtml/fsm enu/demo/ http://www.twinhelix.com/dhtml/fsm enu/demo/

17 Yhteenveto  Muodostunut de facto standardiksi WWW-tuottajien kesken  Taulukoille vielä käyttöä  Selain epäyhteensopivuuksien takia aina testaus tärkeää

18 Ulkoasu ja sisältö erotettu  Radio Zen: http://csszengarden.com/?cssfile=/058/05 8.css http://csszengarden.com/?cssfile=/058/05 8.css  Invasion of the Body Switchers: http://csszengarden.com/?cssfile=/142/14 2.css http://csszengarden.com/?cssfile=/142/14 2.css  Revolution: http://csszengarden.com/?cssfile=/102/10 2.css http://csszengarden.com/?cssfile=/102/10 2.css  Attack of the CSS Zen Garden: http://csszengarden.com/?cssfile=http://a djustafresh.com/zen/mozattack.css http://csszengarden.com/?cssfile=http://a djustafresh.com/zen/mozattack.css

19 Linkkejä  http://www.w3schools.com/css/ http://www.w3schools.com/css/  http://glish.com/css/ http://glish.com/css/  http://www.w3.org/Style/CSS/ http://www.w3.org/Style/CSS/  http://www.w3.org/Style/LieBos2e/h istory/ http://www.w3.org/Style/LieBos2e/h istory/  http://jigsaw.w3.org/css-validator/ http://jigsaw.w3.org/css-validator/


Lataa ppt "CSS ja sen sovellukset 9.2.2006 Vesa Jussila. Esitys  Yleistä –Historia –Etuja ja huonoja puolia –Mediatyypit  Käyttö –Laatikkomalli –CSS-taitto –Sovelluksia."

Samankaltaiset esitykset


Iklan oleh Google