Web Pro Menu Navi

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

Структура на изложението
 Тема на предходната лекция
 Задачи за седмицата
 Комуникация в SteDraNet
 Тема на днешната лекция
 Литература

2


3


4

Follow the Best...
 Александър | Атанас |
 Някои указания – Основни елементи:
 За нас (CVs) / Продукти /Услуги

 Карта-Maps/Contacts /Календар

 Карта на сайта...Обр. връзка

Публикувайте сайта си!

5


6

Да работим съвместно
 Димитър Данаилов - Демонстриране
на възможностите на CSS/XHTML за
създаване на сайт…
 Споделяйте уменията си!
 Следвайте най-добрите!
http://ie.microsoft.com/testdrive/

http://www.bultima.net/multimedia/dimidpresents.html

7


8

Каскадно генерирани менюта
и навигация в сайта

9

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

 Платформи?

10

Преглед на
основните
стилове

Виж сайта на Milonic
 http://www.milonic.com/menusample11.
php

11

Хоризонтално + PopUp

php

12

Само хоризонтални менюта

php

13

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

14

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

 Основни термини – Menu, Main menu,
Menu items, Sub menus, Property
(variable или attribute като color, bgcolor,
bordercolor, separatorcolor), Style...

15

Променливи и атрибути

16

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

17

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

 Стъпка 1: позиционираме кърсъра в Header
(например!);
 Стъпка 2: Insert > Spry > Spry Menu Bar;
 Стъпка 3: Избор на Horizontal или Vertical;
кликни OK;
 Стъпка 4: Добавяне на елемент -
 Property inspector, кликни на plus бутона
над първата колона

18

Йерархическа структура на mySite

FN9999

Моите
About Про Календар
Photo

us Интереси
Gallery

Моето Студентски
My CV/EN
CV живот

19
19

Dw Генератор на менюта
Spry widgets
Сайт

Меню

Стуктура - Действия Стилове
HTML JS CSS

20

Spry widgets HTML
<body>

<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

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

Файлове, които се Uploading
на вашия сервер

23

Spry widgets Пример

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

24


25

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

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

26


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

27


Ръководство за работа с DW
(напр. менюта за нашия сайт)
http://livedocs.adobe.com/en_US/Spry/S
DG/help.html?content=WS692A7C97-
48A1-4c26-9AC6-AF8B986E5557.html

28

Нашият сайт...

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

29

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

30

Web Pro Menu Navi

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

More from LogMan Graduate School on Knowledge Economy

More from LogMan Graduate School on Knowledge Economy (20)

Web Pro Menu Navi