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

Transcript

1. 1.

   I V PA S K A I TA CSS: aprašomasis

   dizainas Tinklapių dizainas Jonas Lekevičius, 2014
2. 2.

   Šiandien matysite!

3. 3.

   Šiandien matysite! • Keli praktiniai dalykai

4. 4.

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

5. 5.

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

   • CSS selektoriai
6. 6.

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

   • CSS selektoriai • Pagrindinės CSS savybės
7. 7.

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

   • CSS selektoriai • Pagrindinės CSS savybės • Kur ieškoti daugiau informacijos
8. 8.

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

   • CSS selektoriai • Pagrindinės CSS savybės • Kur ieškoti daugiau informacijos • Savaitės užduotis
9. 9.

   3 praktiniai dalykėliai

10. 10.

    vdk.lekevicius.com

11. 11.

    Judėkite palengva ir labai tvarkingai

12. 12.

    Pasidalinkite progresu per Dropbox

13. 13.

    jonas@lekevicius.com

14. 14.

    CSS: dizainas per apibūdinimus

15. 15.

    CSS HTML JS

16. 16.

    CSS

17. 17.

    Counter Strike: Source CSS

18. 18.

    Cascading Style Sheets CSS

19. 19.

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

20. 20.

    None
21. 21.

    Iš ko susideda CSS?

22. 22.

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

23. 23.

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

    • Tų elementų dizaino apibūdinimo per savybes
24. 24.

    CSS selektoriai

25. 25.

    Įvardinimas, kuriems elementams priskirsime savybes

26. 26.

    <p id="intro">Labas</p>

27. 27.

    <p class="description">Labas</p>

28. 28.

    Pažaiskime!

29. 29.

    http://flukeout.github.io

30. 30.

    Pradėkime CSS!

31. 31.

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

32. 32.

    None
33. 33.

    Kur ieškoti informacijos?

34. 34.

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

35. 35.

    Coda Books

36. 36.

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

37. 37.

    Užduotys

38. 38.

    SAVAITĖS UŽDUOTYS

39. 39.

    SAVAITĖS UŽDUOTYS Susitvarkykite HTML

40. 40.

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

41. 41.

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

    Pradėkite kurti savo puslapio CSS
42. 42.

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

    Pradėkite kurti savo puslapio CSS Pasidalinkite puslapiu per Dropbox
43. 43.

    Iki!