Web Pro CSS Intro
Upcoming SlideShare
Loading in...5
×
 
  • 1,202 views

LogMan present CSS implementation

LogMan present CSS implementation

Statistics

Views

Total Views
1,202
Views on SlideShare
1,150
Embed Views
52

Actions

Likes
0
Downloads
43
Comments
0

2 Embeds 52

http://1styearinfo.pbworks.com 48
http://www.slideshare.net 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Pro CSS Intro Web Pro CSS Intro Presentation Transcript

  • 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
  • Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 2
  • Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 3
  • Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 4
  • Получени първите Web-сайтове...  Надежда, Стефан, Николай, Цветан, Явор, ...  Някои указания:  Йерархическа структура на сайта  Демонстрация на основните TOOLS…  Динамичен сайт с достъп до БД = 6+ Published! 5
  • Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 6
  • Да работим съвместно  Демонстриране на възможностите на Google Document за създаване на CV с използване на CSS…  Споделяйте уменията си!  Следвайте най-добрите! Любимка Димитрова liuberk@gmail.com 7
  • Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 8
  • Каскадно описание Web-страници XHTML … 9
  • XHTML (script)  Версия на HTML, адаптирана към стандарта XML  ЦЕЛ: “разделяне” на дизайна на страницата от нейното съдържание или  Съдържанието чрез XHTML  Дизайн (или изобразяване) – чрез CSS… 10
  • Web-страницата се различава от Печатната страница  Web-страницата се извежда на различни екрани и браузъри;  Web-страницата включва различни шрифтове;  Web-страницата включва различни области... 11
  • CSS и разликите с X/HTML  CSS използва различен синтаксис за представяне на елементите в Web-str;  Как даден елемент ще се изобрази на екрана, а не какво е неговото съдържание... 12
  • WebPro = XHTML+CSS XHTML CSS 13
  • Пример: Дефиниране на стил 14
  • Stylesheet=Списък с описание на стилове 15
  • ПРАВИЛА ЗА ДЕФИНИРАНЕ НА CSS  ДАДЕНО ПРАВИЛО СЕ СЪСТОИ ОТ ДВЕ ЧАСТИ - SELCTOR И DECLARATION  РАЗЛИЧНИ ВИДОВЕ SELECTORs  Селекторът “казва” на браузара (FireFox) кои елементи в страницата са свързани с дадено правило;  Декларацията “казва” на браузара (FireFox, IE) какви множества от свойства да бъдат приложени. 16
  • СЕЛЕКТОРИ Селекторът е основен елемент в CSS: селектира елемент от HTML-страница, на който придава СТИЛ 17
  • Видове селектори Обикновени селектори Контекстни селектори 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 1.0em = 10px 1.1em = 11px 1.2em = 12px 2.0em = 20px 5.0em = 50px 21
  • Често дефинирани стилове (прм) .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
  • Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 36
  • Полезни сайтове...(2) Visit Adobe TV at http://tv.adobe.com 37
  • Полезни сайтове...(1) http://1styearinfo.pbworks.com/WebProWeek2 38
  • Полезни сайтове...(2) http://www.corewebprogramming.com/ http://www.w3schools.com/tags/ http://courses.coreservlets.com/ 39
  • Полезни сайтове...(3) •WWW.csscreator.com/version1/index.php •http://www.designerstoolbox.com/designresour ces/webstandards/fonts/ •http://matrixsoftware.virtualave.net/ 40
  • Какво да извършим до края на седмицата?  Регистрация +Web Site Adrs  Задание 1 - CV 41
  • 42