Web Pro - CSS
     Стефан Дражев
    www.drazhev.com
http://twitter.com/6plus4u
 stedrazhev@gmail.com
                    ...
Структура на изложението
   Тема на предходната лекция
   Задачи за седмицата
   Комуникация в SteDraNet
   Тема на дн...
Структура на изложението
   Тема на предходната лекция
   Задачи за седмицата
   Комуникация в SteDraNet
   Тема на дн...
Структура на изложението
   Тема на предходната лекция
 Задачи    за седмицата
   Комуникация в SteDraNet
   Тема на д...
Follow the Best...
 Александър   | Атанас |
 Някои указания – Основни елементи:
   За нас (CVs) / Продукти /Услуги

  ...
Структура на изложението
   Тема на предходната лекция
   Задачи за седмицата
 Комуникация      в SteDraNet
   Тема на...
Да работим съвместно
   Димитър Данаилов - Демонстриране
    на възможностите на CSS/XHTML за
    създаване на сайт…
   ...
Структура на изложението
   Тема на предходната лекция
   Задачи за седмицата
   Комуникация в SteDraNet
 Тема     на ...
Каскадно генерирани менюта
    и навигация в сайта




                             9
Лесен и ТОЧЕН достъп
    до всички страници в сайта
 Кои са основните СТИЛОВЕ?
 Какви са основните техники?

 Платформи...
Преглед на
      основните
       стилове


                  Виж сайта на Milonic
   http://www.milonic.com/menusample11...
Хоризонтално + PopUp




                            Виж сайта на Milonic
             http://www.milonic.com/menusample1...
Само хоризонтални менюта




                            Виж сайта на Milonic
             http://www.milonic.com/menusam...
Преглед на основните стилове
   Виж сайта на Milonic
   http://www.milonic.com/menusample11.php




                    ...
Терминология

   Основни термини – Menu, Main menu,
    Menu items, Sub menus, Property
    (variable или attribute като ...
Променливи и атрибути




                        16
Dw Генератор на менюта (1)




                             17
Dw Генератор на менюта - Сценарий

   Стъпка 1: позиционираме кърсъра в Header
    (например!);
   Стъпка 2: Insert > Sp...
Йерархическа структура на mySite



                            FN9999

                       Моите
    About            ...
Dw Генератор на менюта
      Spry widgets
              Сайт


              Меню


Стуктура -   Действия   Стилове
  HTML...
Dw Генератор на менюта
            Spry widgets HTML
<body>
<!--Create a Menu bar widget and assign classes to each elemen...
Dw Генератор на менюта
                 Spry widgets CSS
                        ul.MenuBarHorizontal ul {
               ...
Файлове, които се Uploading
     на вашия сервер




                              23
Dw Генератор на менюта
               Spry widgets Пример




<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="style...
Структура на изложението
   Тема на предходната лекция
   Задачи за седмицата
   Комуникация в SteDraNet
   Тема на дн...
Полезни сайтове...(1)

Menu and
Navigation Scripts
http://www.dynamicdrive.com/
 dynamicindex1/

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




Атрактивни и добре структурирани
      менюта за нашия сайт
  http://www.milonic.com

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




  Ръководство за работа с DW
  (напр. менюта за нашия сайт)
http://livedocs.adobe.com/en_US/Spry...
Нашият сайт...




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




                                             29
Какво да извършим до края на
          седмицата?
 Формирайте
структурата на
   сайта си!
Създайте ваше
     меню!

      ...
31
Upcoming SlideShare
Loading in …5
×

Web Pro Menu Navi

1,046 views
980 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,046
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×