Embed Size (px)
DESCRIPTION
How to created web site menu with xhtml, css3, js
Citation preview
Структура на изложението
Тема на предходната лекция Задачи за седмицата Комуникация в SteDraNet Тема на днешната лекция Литература
2
Структура на изложението
Тема на предходната лекция Задачи за седмицата Комуникация в SteDraNet Тема на днешната лекция Литература
3
Структура на изложението
Тема на предходната лекция
Задачи за седмицата Комуникация в SteDraNet Тема на днешната лекция Литература
4
Follow the Best...Александър | Атанас |Някои указания – Основни елементи:
За нас (CVs) / Продукти /Услуги Карта-Maps/Contacts /Календар Карта на сайта...Обр. връзка
Публикувайте сайта си!
5
Структура на изложението
Тема на предходната лекция Задачи за седмицата
Комуникация в SteDraNet Тема на днешната лекция Литература
6
Да работим съвместно
Димитър Данаилов - Демонстриране на възможностите на CSS/XHTML за създаване на сайт…
Споделяйте уменията си! Следвайте най-добрите!
7
http://ie.microsoft.com/testdrive/
http://www.bultima.net/multimedia/dimidpresents.html
Структура на изложението
Тема на предходната лекция Задачи за седмицата Комуникация в SteDraNet
Тема на днешната лекция Литература
8
9
Каскадно генерирани менюта и навигация в сайта
Лесен и ТОЧЕН достъп до всички страници в сайта
Кои са основните СТИЛОВЕ? Какви са основните техники? Платформи?
10
Преглед на основните
стилове
Виж сайта на Milonic http://www.milonic.com/menusample11.
php
11
Хоризонтално + PopUp
Виж сайта на Milonic http://www.milonic.com/menusample11.
php
12
Само хоризонтални менюта
Виж сайта на Milonic http://www.milonic.com/menusample11.
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 Генератор на менюта - Сценарий
18
Стъпка 1: позиционираме кърсъра в Header (например!);
Стъпка 2: Insert > Spry > Spry Menu Bar; Стъпка 3: Избор на Horizontal или Vertical;
кликни OK;
Стъпка 4: Добавяне на елемент - Property inspector, кликни на plus бутона
над първата колона
1919
Йерархическа структура на mySite
19
FN9999
About us
My CV/EN Моето CV
МоитеПро
Интереси
PhotoGallery
Студентски живот
Календар
Dw Генератор на менютаSpry widgets
20
Сайт
Стуктура -HTML
ДействияJS
СтиловеCSS
Меню
Dw Генератор на менютаSpry widgets HTML
21
<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>…
Dw Генератор на менютаSpry widgets CSS
22
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" />
Файлове, които се Uploadingна вашия сервер
23
Dw Генератор на менютаSpry widgets Пример
24
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
25
Структура на изложението
Тема на предходната лекция Задачи за седмицата Комуникация в SteDraNet Тема на днешната лекция Литература
Полезни сайтове...(1)
Menu and Navigation Scriptshttp://www.dynamicdrive.com/
dynamicindex1/
26
Полезни сайтове...(2)
27
Атрактивни и добре структурирани менюта за нашия сайт
http://www.milonic.com
Полезни сайтове...(3)
28
Ръководство за работа с DW(напр. менюта за нашия сайт)
http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS692A7C97-48A1-4c26-9AC6-AF8B986E5557.html
Нашият сайт...
29
http://1styearinfo.pbworks.com/WebProWeek2
Какво да извършим до края на седмицата?
Формирайтеструктурата на
сайта си!Създайте ваше
меню!
30
31
