web pro css intro
DESCRIPTION
LogMan present CSS implementationTRANSCRIPT
Структура на изложението
Тема на предходната лекция Задачи за седмицата Комуникация в SteDraNet Тема на днешната лекция Литература
2
Структура на изложението
Тема на предходната лекция Задачи за седмицата Комуникация в SteDraNet Тема на днешната лекция Литература
3
Структура на изложението
Тема на предходната лекция
Задачи за седмицата Комуникация в SteDraNet Тема на днешната лекция Литература
4
Получени първите Web-сайтове...
Надежда, Стефан, Николай, Цветан, Явор, ... Някои указания: Йерархическа структура на сайта Демонстрация на основните TOOLS… Динамичен сайт с достъп до БД = 6+
Published!
5
Структура на изложението
Тема на предходната лекция Задачи за седмицата
Комуникация в SteDraNet Тема на днешната лекция Литература
6
Да работим съвместно
Демонстриране на възможностите на Google Document за създаване на CV с използване на CSS…
Споделяйте уменията си! Следвайте най-добрите!
7
Любимка Димитрова[email protected]
Структура на изложението
Тема на предходната лекция Задачи за седмицата Комуникация в 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
Vancouver2010 CSS трикове
34
36
Структура на изложението
Тема на предходната лекция Задачи за седмицата Комуникация в SteDraNet Тема на днешната лекция Литература
Полезни сайтове...(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