web pro css intro

Web Pro - CSSСтефан Дражев

www.drazhev.comhttp://twitter.com/6plus4ustedrazhev@gmail.com

1

Структура на изложението

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

2

Структура на изложението

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

3

Структура на изложението

Тема на предходната лекция

Задачи за седмицата Комуникация в SteDraNet Тема на днешната лекция Литература

4

Получени първите Web-сайтове...

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

Published!

5

Структура на изложението

Тема на предходната лекция Задачи за седмицата

Комуникация в SteDraNet Тема на днешната лекция Литература

6

Да работим съвместно

Демонстриране на възможностите на Google Document за създаване на CV с използване на CSS…

Споделяйте уменията си! Следвайте най-добрите!

7

Любимка Димитроваliuberk@gmail.com

Структура на изложението

Тема на предходната лекция Задачи за седмицата Комуникация в SteDraNet

Тема на днешната лекция Литература

8

XHTML …

9

Каскадно описание Web-страници

XHTML (script) Версия на HTML, адаптирана към

стандарта XML ЦЕЛ: “разделяне” на дизайна на

страницата от нейното съдържание или Съдържанието чрез XHTML Дизайн (или изобразяване) – чрез

CSS…

10

Web-страницата се различава от Печатната страница

Web-страницата се извежда на различни екрани и браузъри;

Web-страницата включва различни шрифтове;

Web-страницата включва различни области...

11

CSS и разликите с X/HTML

CSS използва различен синтаксис за представяне на елементите в Web-str;

Как даден елемент ще се изобрази на екрана, а не какво е неговото съдържание...

12

WebPro = XHTML+CSS

13

XHTML

CSS

14

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

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

15

ПРАВИЛА ЗА ДЕФИНИРАНЕ НА CSS ДАДЕНО ПРАВИЛО СЕ СЪСТОИ ОТ ДВЕ

ЧАСТИ - SELCTOR И DECLARATION РАЗЛИЧНИ ВИДОВЕ SELECTORs Селекторът “казва” на браузара (FireFox) кои

елементи в страницата са свързани с даденоправило;

Декларацията “казва” на браузара (FireFox, IE) какви множества от свойства да бъдатприложени.

16

СЕЛЕКТОРИ

17

Селекторът е основен елемент в CSS:селектира елемент

от HTML-страница, на който придава

СТИЛ

Видове селектори

18

Обикновени селектори

Контекстни селектори

Моделът на “кутията”

Всеки елемент има:

Padding Border Marging

19

Управление на структуратаLAYOUT

Чрез СТИЛОВЕ се контролира:Размера на елемента;Разположението на елемента

20

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

21

1.0em = 10px 1.1em = 11px 1.2em = 12px 2.0em = 20px 5.0em = 50px

Често дефинирани стилове (прм)

.bodybold {font-family:arial,helvetica,sans-serif;font-size:12px;line-height:16px;font-style:normal;font-weight:bold;color: #000000;}

22

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

23

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

24

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

25

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

26

Учи на базата на примери

Сайт http://www.yahoo.com

Сайт http://www.vancouver2010.com

Сайт http://stedranet.ning.com

27

YDN Libraries & Best Practices

28

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

29

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

30

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

31

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

32

http://www.vancouver2010.com

33

Vancouver2010 CSS трикове

34

http://stedranet.ning.com

35

36

Структура на изложението

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

Полезни сайтове...(2)

Visit Adobe TV at http://tv.adobe.com

37

Полезни сайтове...(1)

38

http://1styearinfo.pbworks.com/WebProWeek2

Полезни сайтове...(2)

39

http://www.corewebprogramming.com/http://www.w3schools.com/tags/http://courses.coreservlets.com/

Полезни сайтове...(3)

40

•WWW.csscreator.com/version1/index.php

•http://www.designerstoolbox.com/designresources/webstandards/fonts/

•http://matrixsoftware.virtualave.net/

Какво да извършим до края на седмицата?

Регистрация+Web Site Adrs

Задание 1 - CV

41

42