Tinklapių dizainas, 4 paskaita. CSS: aprašomasis dizainas.

Slide 1

Slide 1 text

I V PA S K A I TA CSS: aprašomasis dizainas Tinklapių dizainas Jonas Lekevičius, 2014

Slide 2

Slide 2 text

Šiandien matysite!

Slide 3

Slide 3 text

Šiandien matysite! • Keli praktiniai dalykai

Slide 4

Slide 4 text

Šiandien matysite! • Keli praktiniai dalykai • Kam skirtas CSS

Slide 5

Slide 5 text

Šiandien matysite! • Keli praktiniai dalykai • Kam skirtas CSS • CSS selektoriai

Slide 6

Slide 6 text

Šiandien matysite! • Keli praktiniai dalykai • Kam skirtas CSS • CSS selektoriai • Pagrindinės CSS savybės

Slide 7

Slide 7 text

Šiandien matysite! • Keli praktiniai dalykai • Kam skirtas CSS • CSS selektoriai • Pagrindinės CSS savybės • Kur ieškoti daugiau informacijos

Slide 8

Slide 8 text

Šiandien matysite! • Keli praktiniai dalykai • Kam skirtas CSS • CSS selektoriai • Pagrindinės CSS savybės • Kur ieškoti daugiau informacijos • Savaitės užduotis

Slide 9

Slide 9 text

3 praktiniai dalykėliai

Slide 10

Slide 10 text

vdk.lekevicius.com

Slide 11

Slide 11 text

Judėkite palengva ir labai tvarkingai

Slide 12

Slide 12 text

Pasidalinkite progresu per Dropbox

Slide 13

Slide 13 text

jonas@lekevicius.com

Slide 14

Slide 14 text

CSS: dizainas per apibūdinimus

Slide 15

Slide 15 text

CSS HTML JS

Slide 16

Slide 16 text

CSS

Slide 17

Slide 17 text

Counter Strike: Source CSS

Slide 18

Slide 18 text

Cascading Style Sheets CSS

Slide 19

Slide 19 text

Apibūdinkime dizainą žodžiais (jog net kompiuteris suprastų)

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Iš ko susideda CSS?

Slide 22

Slide 22 text

Iš ko susideda CSS? • Įvardinimo apie kuriuos elementus kalbėsime

Slide 23

Slide 23 text

Iš ko susideda CSS? • Įvardinimo apie kuriuos elementus kalbėsime • Tų elementų dizaino apibūdinimo per savybes

Slide 24

Slide 24 text

CSS selektoriai

Slide 25

Slide 25 text

Įvardinimas, kuriems elementams priskirsime savybes

Slide 26

Slide 26 text

Labas

Slide 27

Slide 27 text

Labas

Slide 28

Slide 28 text

Pažaiskime!

Slide 29

Slide 29 text

http://ﬂukeout.github.io

Slide 30

Slide 30 text

Pradėkime CSS!

Slide 31

Slide 31 text

http://lekevicius.github.io/vdk-lectures/get/4.zip

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Kur ieškoti informacijos?

Slide 34

Slide 34 text

https://developer.mozilla.org/en-US/docs/Web/CSS

Slide 35

Slide 35 text

Coda Books

Slide 36

Slide 36 text

http://docs.emmet.io/cheat-sheet/

Slide 37

Slide 37 text

Užduotys

Slide 38

Slide 38 text

SAVAITĖS UŽDUOTYS

Slide 39

Slide 39 text

SAVAITĖS UŽDUOTYS Susitvarkykite HTML

Slide 40

Slide 40 text

SAVAITĖS UŽDUOTYS Susitvarkykite HTML Patys pereikite CSS Diner dar kartą

Slide 41

Slide 41 text

SAVAITĖS UŽDUOTYS Susitvarkykite HTML Patys pereikite CSS Diner dar kartą Pradėkite kurti savo puslapio CSS

Slide 42

Slide 42 text

SAVAITĖS UŽDUOTYS Susitvarkykite HTML Patys pereikite CSS Diner dar kartą Pradėkite kurti savo puslapio CSS Pasidalinkite puslapiu per Dropbox

Slide 43

Slide 43 text

Iki!