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 Menu Navi

1,148 views

Published on

How to created web site menu with xhtml, css3, js

Published in: Education
  • Be the first to comment

  • Be the first to like this

Web Pro Menu Navi

  1. 1. Web Pro - CSS Стефан Дражев www.drazhev.com http://twitter.com/6plus4u stedrazhev@gmail.com Digitally signed by Dr. Stephen Drazhev Dr. Stephen DN: cn=Dr. Stephen Drazhev, o=UE-Varna, ou=Informatics Drazhev Dept., email=stedrazhev@gmail.com, c=US Date: 2010.03.28 13:54:06 +03'00' 1
  2. 2. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 2
  3. 3. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 3
  4. 4. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 4
  5. 5. Follow the Best...  Александър | Атанас |  Някои указания – Основни елементи:  За нас (CVs) / Продукти /Услуги  Карта-Maps/Contacts /Календар  Карта на сайта...Обр. връзка Публикувайте сайта си! 5
  6. 6. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 6
  7. 7. Да работим съвместно  Димитър Данаилов - Демонстриране на възможностите на CSS/XHTML за създаване на сайт…  Споделяйте уменията си!  Следвайте най-добрите! http://ie.microsoft.com/testdrive/ http://www.bultima.net/multimedia/dimidpresents.html 7
  8. 8. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 8
  9. 9. Каскадно генерирани менюта и навигация в сайта 9
  10. 10. Лесен и ТОЧЕН достъп до всички страници в сайта  Кои са основните СТИЛОВЕ?  Какви са основните техники?  Платформи? 10
  11. 11. Преглед на основните стилове Виж сайта на Milonic  http://www.milonic.com/menusample11. php 11
  12. 12. Хоризонтално + PopUp Виж сайта на Milonic  http://www.milonic.com/menusample11. php 12
  13. 13. Само хоризонтални менюта Виж сайта на Milonic  http://www.milonic.com/menusample11. php 13
  14. 14. Преглед на основните стилове  Виж сайта на Milonic  http://www.milonic.com/menusample11.php 14
  15. 15. Терминология  Основни термини – Menu, Main menu, Menu items, Sub menus, Property (variable или attribute като color, bgcolor, bordercolor, separatorcolor), Style... 15
  16. 16. Променливи и атрибути 16
  17. 17. Dw Генератор на менюта (1) 17
  18. 18. Dw Генератор на менюта - Сценарий  Стъпка 1: позиционираме кърсъра в Header (например!);  Стъпка 2: Insert > Spry > Spry Menu Bar;  Стъпка 3: Избор на Horizontal или Vertical; кликни OK;  Стъпка 4: Добавяне на елемент -  Property inspector, кликни на plus бутона над първата колона 18
  19. 19. Йерархическа структура на mySite FN9999 Моите About Про Календар Photo us Интереси Gallery Моето Студентски My CV/EN CV живот 19 19
  20. 20. Dw Генератор на менюта Spry widgets Сайт Меню Стуктура - Действия Стилове HTML JS CSS 20
  21. 21. Dw Генератор на менюта Spry widgets HTML <body> <!--Create a Menu bar widget and assign classes to each element--> <ul id="menubar1" class="MenuBarHorizontal"> <li><a class="MenuBarItemSubmenu" href="#">Home </a> <ul> <li><a href="#"> Item 1.1</a></li> <li><a href="#">Item 1.2</a></li> <li><a href="#">Item 1.3</a></li> </ul> </li> <li><a href="#">About Us</a></li> … 21
  22. 22. Dw Генератор на менюта Spry widgets CSS ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 8.2em; position: absolute; left: -1000em; } <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /> 22
  23. 23. Файлове, които се Uploading на вашия сервер 23
  24. 24. Dw Генератор на менюта Spry widgets Пример <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /> 24
  25. 25. Структура на изложението  Тема на предходната лекция  Задачи за седмицата  Комуникация в SteDraNet  Тема на днешната лекция  Литература 25
  26. 26. Полезни сайтове...(1) Menu and Navigation Scripts http://www.dynamicdrive.com/ dynamicindex1/ 26
  27. 27. Полезни сайтове...(2) Атрактивни и добре структурирани менюта за нашия сайт http://www.milonic.com 27
  28. 28. Полезни сайтове...(3) Ръководство за работа с DW (напр. менюта за нашия сайт) http://livedocs.adobe.com/en_US/Spry/S DG/help.html?content=WS692A7C97- 48A1-4c26-9AC6-AF8B986E5557.html 28
  29. 29. Нашият сайт... http://1styearinfo.pbworks.com/WebProWeek2 29
  30. 30. Какво да извършим до края на седмицата? Формирайте структурата на сайта си! Създайте ваше меню! 30
  31. 31. 31

×