LogMan present CSS implementation

1. Web Pro - CSS
Стефан Дражев
www.drazhev.com
http://twitter.com/6plus4u
stedrazhev@gmail.com
Stephen Digitally signed by Stephen Drazhev
DN: cn=Stephen Drazhev, o=LMISKE,
ou=HQ, email=stedrazhev@gmail.com,
Drazhev c=US
Date: 2010.03.14 10:39:38 +02'00'
1

2. Структура на изложението
 Тема на предходната лекция
 Задачи за седмицата
 Комуникация в SteDraNet
 Тема на днешната лекция
 Литература
2

3. Структура на изложението
 Тема на предходната лекция
 Задачи за седмицата
 Комуникация в SteDraNet
 Тема на днешната лекция
 Литература
3

4. Структура на изложението
 Тема на предходната лекция
 Задачи за седмицата
 Комуникация в SteDraNet
 Тема на днешната лекция
 Литература
4

5. Получени първите Web-сайтове...
 Надежда, Стефан, Николай, Цветан,
Явор, ...
 Някои указания:
 Йерархическа структура на сайта
 Демонстрация на основните TOOLS…
 Динамичен сайт с достъп до БД = 6+
Published!
5

6. Структура на изложението
 Тема на предходната лекция
 Задачи за седмицата
 Комуникация в SteDraNet
 Тема на днешната лекция
 Литература
6

7. Да работим съвместно
 Демонстриране на възможностите на
Google Document за създаване на CV
с използване на CSS…
 Споделяйте уменията си!
 Следвайте най-добрите!
Любимка Димитрова
liuberk@gmail.com
7

8. Структура на изложението
 Тема на предходната лекция
 Задачи за седмицата
 Комуникация в SteDraNet
 Тема на днешната лекция
 Литература
8

9. Каскадно описание Web-страници
XHTML …
9

10. XHTML (script)
 Версия на HTML, адаптирана към
стандарта XML
 ЦЕЛ: “разделяне” на дизайна на
страницата от нейното съдържание
или
 Съдържанието чрез XHTML
 Дизайн (или изобразяване) – чрез
CSS…
10

11. Web-страницата се различава
от Печатната страница
 Web-страницата се извежда на
различни екрани и браузъри;
 Web-страницата включва различни
шрифтове;
 Web-страницата включва различни
области...
11

12. CSS и разликите с X/HTML
 CSS използва различен синтаксис за
представяне на елементите в Web-str;
 Как даден елемент ще се изобрази на
екрана, а не какво е неговото
съдържание...
12

13. WebPro = XHTML+CSS
XHTML
CSS
13

14. Пример: Дефиниране на стил
14

15. Stylesheet=Списък
с описание на стилове
15

16. ПРАВИЛА ЗА ДЕФИНИРАНЕ НА CSS
 ДАДЕНО ПРАВИЛО СЕ СЪСТОИ ОТ ДВЕ
ЧАСТИ - SELCTOR И DECLARATION
 РАЗЛИЧНИ ВИДОВЕ SELECTORs
 Селекторът “казва” на браузара (FireFox) кои
елементи в страницата са свързани с дадено
правило;
 Декларацията “казва” на браузара (FireFox,
IE) какви множества от свойства да бъдат
приложени.
16

17. СЕЛЕКТОРИ
Селекторът
е основен елемент в CSS:
селектира елемент
от HTML-страница,
на който придава
СТИЛ
17

18. Видове селектори
Обикновени селектори
Контекстни селектори
18

19. Моделът на “кутията”
Всеки елемент
има:
 Padding
 Border
 Marging
19

20. Управление на структурата
LAYOUT
 Чрез СТИЛОВЕ се контролира:
 Размера на елемента;
 Разположението на елемента
20

21. CSS и мерна единица ‘em’
 em is a unit of measure that is based on the
users default pixel font size;
 1em = the users default font-size if no other
explicit, pixel font-sizes are set via CSS;
1.0em, approximately equal to 10px
1.0em = 10px
1.1em = 11px
1.2em = 12px
2.0em = 20px
5.0em = 50px
21

22. Често дефинирани стилове (прм)
.bodybold {
font-family:arial,helvetica,sans-
serif;
font-size:12px;
line-height:16px;
font-style:normal;
font-weight:bold;
color: #000000;
}
22

23. Често дефинирани стилове (2)
23

24. Често дефинирани стилове (2’)
24

25. Често дефинирани стилове (3’)
25

26. Често дефинирани стилове (3)
26

27. Учи на базата на примери
 Сайт http://www.yahoo.com
 Сайт http://www.vancouver2010.com
 Сайт http://stedranet.ning.com
27

28. YDN Libraries & Best Practices
28

29. Dw Генератор на CSS Layout (1)
29

30. Dw Генератор на CSS Layout (2)
30

31. Dw Генератор на CSS Layout (3)
31

32. Dw Генератор на CSS Layout (4)
32

33. http://www.vancouver2010.com
33

34. Vancouver2010 CSS трикове
34

35. http://stedranet.ning.com
35

36. Структура на изложението
 Тема на предходната лекция
 Задачи за седмицата
 Комуникация в SteDraNet
 Тема на днешната лекция
 Литература
36

37. Полезни сайтове...(2)
Visit Adobe TV at
http://tv.adobe.com
37

38. Полезни сайтове...(1)
http://1styearinfo.pbworks.com/WebProWeek2
38

39. Полезни сайтове...(2)
http://www.corewebprogramming.com/
http://www.w3schools.com/tags/
http://courses.coreservlets.com/
39

40. Полезни сайтове...(3)
•WWW.csscreator.com/version1/index.php
•http://www.designerstoolbox.com/designresour
ces/webstandards/fonts/
•http://matrixsoftware.virtualave.net/
40

41. Какво да извършим до края на
седмицата?
 Регистрация
+Web Site Adrs
 Задание 1 - CV
41

42. 42