Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Pro CSS Intro

858 views

Published on

LogMan present CSS implementation

Published in: Education
  • Be the first to comment

  • Be the first to like this

Web Pro CSS Intro

  1. 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. 2. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 2
  3. 3. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 3
  4. 4. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 4
  5. 5. Получени първите Web-сайтове...  Надежда, Стефан, Николай, Цветан, Явор, ...  Някои указания:  Йерархическа структура на сайта  Демонстрация на основните TOOLS…  Динамичен сайт с достъп до БД = 6+ Published! 5
  6. 6. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 6
  7. 7. Да работим съвместно  Демонстриране на възможностите на Google Document за създаване на CV с използване на CSS…  Споделяйте уменията си!  Следвайте най-добрите! Любимка Димитрова liuberk@gmail.com 7
  8. 8. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 8
  9. 9. Каскадно описание Web-страници XHTML … 9
  10. 10. XHTML (script)  Версия на HTML, адаптирана към стандарта XML  ЦЕЛ: “разделяне” на дизайна на страницата от нейното съдържание или  Съдържанието чрез XHTML  Дизайн (или изобразяване) – чрез CSS… 10
  11. 11. Web-страницата се различава от Печатната страница  Web-страницата се извежда на различни екрани и браузъри;  Web-страницата включва различни шрифтове;  Web-страницата включва различни области... 11
  12. 12. CSS и разликите с X/HTML  CSS използва различен синтаксис за представяне на елементите в Web-str;  Как даден елемент ще се изобрази на екрана, а не какво е неговото съдържание... 12
  13. 13. WebPro = XHTML+CSS XHTML CSS 13
  14. 14. Пример: Дефиниране на стил 14
  15. 15. Stylesheet=Списък с описание на стилове 15
  16. 16. ПРАВИЛА ЗА ДЕФИНИРАНЕ НА CSS  ДАДЕНО ПРАВИЛО СЕ СЪСТОИ ОТ ДВЕ ЧАСТИ - SELCTOR И DECLARATION  РАЗЛИЧНИ ВИДОВЕ SELECTORs  Селекторът “казва” на браузара (FireFox) кои елементи в страницата са свързани с дадено правило;  Декларацията “казва” на браузара (FireFox, IE) какви множества от свойства да бъдат приложени. 16
  17. 17. СЕЛЕКТОРИ Селекторът е основен елемент в CSS: селектира елемент от HTML-страница, на който придава СТИЛ 17
  18. 18. Видове селектори Обикновени селектори Контекстни селектори 18
  19. 19. Моделът на “кутията” Всеки елемент има:  Padding  Border  Marging 19
  20. 20. Управление на структурата LAYOUT  Чрез СТИЛОВЕ се контролира:  Размера на елемента;  Разположението на елемента 20
  21. 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. 22. Често дефинирани стилове (прм) .bodybold { font-family:arial,helvetica,sans- serif; font-size:12px; line-height:16px; font-style:normal; font-weight:bold; color: #000000; } 22
  23. 23. Често дефинирани стилове (2) 23
  24. 24. Често дефинирани стилове (2’) 24
  25. 25. Често дефинирани стилове (3’) 25
  26. 26. Често дефинирани стилове (3) 26
  27. 27. Учи на базата на примери  Сайт http://www.yahoo.com  Сайт http://www.vancouver2010.com  Сайт http://stedranet.ning.com 27
  28. 28. YDN Libraries & Best Practices 28
  29. 29. Dw Генератор на CSS Layout (1) 29
  30. 30. Dw Генератор на CSS Layout (2) 30
  31. 31. Dw Генератор на CSS Layout (3) 31
  32. 32. Dw Генератор на CSS Layout (4) 32
  33. 33. http://www.vancouver2010.com 33
  34. 34. Vancouver2010 CSS трикове 34
  35. 35. http://stedranet.ning.com 35
  36. 36. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 36
  37. 37. Полезни сайтове...(2) Visit Adobe TV at http://tv.adobe.com 37
  38. 38. Полезни сайтове...(1) http://1styearinfo.pbworks.com/WebProWeek2 38
  39. 39. Полезни сайтове...(2) http://www.corewebprogramming.com/ http://www.w3schools.com/tags/ http://courses.coreservlets.com/ 39
  40. 40. Полезни сайтове...(3) •WWW.csscreator.com/version1/index.php •http://www.designerstoolbox.com/designresour ces/webstandards/fonts/ •http://matrixsoftware.virtualave.net/ 40
  41. 41. Какво да извършим до края на седмицата?  Регистрация +Web Site Adrs  Задание 1 - CV 41
  42. 42. 42

×