1. Интерактивни функции
Интерактивните елементи и обратната връзка с потрбителя са важни компоненти на уебсайтовете. Интерактивността изисква изпълнение на дейсвие и отговор, тя е двупосочен комуникационен процес.
1. Предимства
а) по-добро възприятие на целта и съдържанието на сайта;
б) по-лесна и по-директна навигация до страниците му.
2. Инструменти за добавяне на интерактивни елементи
а) динамични страници и използване на БД;
б) Macromedia Flash;
в) Quick Time Virtual Reality (QTVR) – формат, поддържащ 360-градусови панорамни изгледи и интерактивни компоненти;
г) JavaScript – използва се за скриптове, изпълнявани от браузъра на клиента;
д) Java Server Pages (JSP) – скриптове, които се обработват от сървъра и резултатът се изпраща на потребителя;
е) поведения на Dreamweaver – подиалогов прозорец рограми с код на JavaScript, които лесно можете да включите в уебсайт.
Поведението е комбинация от действие или серия от действия и събитие.
Действието (action) е това, което се извършва в резултат от намесата на потребителя (например размяна на едно изображение с друго).
Събитието (event) е това, което предизвиква възникването на дейсвието (например преместване на мишката над изображение или натискане на бутон).
– предварително дефинирани поведения
– добавяне на допълнителни поведения
– създаване на собствени поведения
3. Добавяне на роловър изображениe (rollover)
Изображениe, което се променя, когато потребителят премести курсора на мишката над него. Използват се 2 изображения, поставени на едно и също място.
1) лента Insert, категория Common, меню Images, бутон Rollover Image (или Insert/Interactive Image/Rollover Image) 2) отваря се диалогов прозорец Insert Rollover Image
Image Name – име на изображение (по подразбиране имената са Image1, Image2, …..). Не използвайте интервали и специални знаци и не започвайте името с число.
Бутони Browse – изберете файлове за оригиналното (първото) и алтернативното (второто) изображение. Необходимо е двете изображения да имат еднакви размери.
Preload Rollover Image – предизвиква зареждане на второто изображение още при зареждане на страницата в браузъра. Ако тази опция не е включена второто изображение няма да се зареди, докато потребителя не премести курсора на мишката над първото.
Alternate Text – въведете Alt текст
When Click Go to URL – чрез бутон Browse намерете файла, с който ще се свърже роловър изображениeто. Този файл се появява в поле Link на панел Properties при селектиране на изображението.
4. Добавяне на роловър изображениe чрез вмъкване на поведение от панел Behaviors
Този метод може да се използва, ако вече сте разположили оригиналното изображение върху страницата.
1) панел Properties, поле Image Name – въведете име на оригиналното изображение; поле Link – свържете с хипервръзка изображението със съответната му страница.
2) маркирайте изображението
3) панел Tag Inspector, страница Behaviors, бутон Add Behaviors (+), м.Actions, действие Swap Image (създава ефект на промяна – размяна на едно изображение с друго). Събитието, което Dreamweaver използва по подразбиране за това действие е onMouseOver.
4) отваря се диалогов прозорец Swap Image
списък Images – изберете оригинално изображение
бутон Browse – изберете алтернативно изображение. То се изписва в поле Set Source to. В десния край на името на изображението в списъка Images се появява *, която показва, че към него е присвоено алтернативно изображение.
Preload Images
Restore Images onMouseOut – първоначалното изображение се възстановява след отместване на мишката; ОК.
В панел Behaviors се включват:
– събитието onMouseOver и действието Swap Image, което то предизвиква
– събитието onMouseOut и действието Swap Image Restore, което то предизвиква
При комбинирането на тези действия и събития се създава роловър ефектът – изображението се променя, когато потребителят премести курсора на мишката над него и се възстановява обратно, когато премести мишката извън него.
За да изтриете поведение от панел Behaviors селектирайте го и натиснете клавиш Delete или бутон (-).
5. Добавяне на поведения към карти на изображения
Когато замяната на едно изображение с друго трябва да се извърши само когато мишката премине над точно определена част на изображението (активна точка) може да използвате карта на изображение.
1) селектирайте изображението и му дайте име
2) създайте гореща точка в изображението чрез инструмента Rectangular Hotspot от панел Properties
3) аналогично на 3), 4) и 5) от т. 4
Винаги когато е селектирана картата на изображението, заменящото изображение е посочено в панел Behaviors. Ако изображението е селектирано, но не и картата заменящото изображение няма да присъства в този панел.
6. Редактиране на действия и събития – панел Behaviors
1н.) да промените събитието, на което отговаря дадено действие
1) натискате бутон Show all events
2) избирате събитието, което ще променяте и от списъчното му поле избирате новото събитие
2н.) да прикрепите няколко действия към едно събитие – десен бутон на мишката върху действието и Add new list item
3н.) да промените реда на изпълнение на действията – чрез бутоните ▲▼от панел Behaviors.
7. Добавяне на изскачащо съобщение
1) начертайте правоъгълна гореща точка върху изображението и я селектирайте
2) панел Behaviors, бутон (+), от м. Action избутон Popup Message
3) отваря се диалогов прозорец Popup Message – въведете съобщение; OK
Действието Popup Message и съответстващото му събитие OnClick се появяват в панел Behaviors.
4) щракнете върху събитието OnClick в панел Behaviors. От появилото се меню изберете OnMouseOut.
Можете да определите в какъв тип браузъри да се показват събитията – изберете една от опциите от частта Show Events For на м. Add Behaviors. Ако изберете събитие в панел Behaviors меню Events става достъпно и показва само тези събития, които са достъпни в избрания тип браузър.
8. Показване на съобщения в лентата за състоянието
а) същност – съобщенията в лентата за състоянието дават на потребителя допълнителна информация за дестинациите на хипервръзките. Те заместват описателното име на URL адреса или пътя до съответната страница;
б) алгоритъм
1) начертайте правоъгълна гореща точка върху изображението и я селектирайте
2) панел Behaviors, бутон (+), от м. Set Text изберете Set Text of Status bar
3) отваря се диалогов прозорец Set Text of Status bar – в поле Message – въведете съобщение (кратко описание на съдържанието, до което отвежда хипервръзката); ОК
4) ОК – действието Set Text of Status bar и съотвестващото му събитие onMouseOver се появяват в панел Behaviors.
Въведеното съобщение се показва в лентата за състояние на браузъра след първото преминаване над горещата точка. При позициониране върху нея се изписва адреса на страницата.
9. Проверка на браузъра
1) селектирайте тага body
(цялото съдържание в документа се селектира) от Tag Selector – ще видите body в заглавната лента на панел Behaviors.
2) панел Behaviors, бутон (+), Check Browser
3) отваря се диалогов прозорец Check Browser
– за Netscape 4.0 и Internet Explorer 4.0, както и за по-новите им версии изберете Go To URL от съответното меню
– за по-старите версии на Netscape и Internet Explorer изберете Stay on this page
– за другите браузъри изберете същото бутон Browsе до поле URL – намерете файла, към който ще бъдат насочвани потребителите с по-нова версия на браузъра.
ОК – добавя JavaScript кода в страницата
Действието Check Browser и съответстващото му събитие onLoad се появяват в панел Behaviors.
10. Отваряне на нов прозорец на браузъра
След зареждане на страницата този прозорец може да се използва за показване на реклама, условия на ползване или на друга информация. Начини:
1н.) използвайте _blank за дестинация (target) заедно със стандартна хипервръзка – няма да имате контрол върху атрибутите на новия прозорец
2н.) чрез опцията Open Browser Window
1) селектирайте дума
2) панел Behaviors, бутон (+), Open Browser Window
3) отваря се диалогов прозорец Open Browser Window
– бутон Browsе – намерете файла, който ще се зарежда в новия прозорец
– Window Width, Window Height – ширина и височина на прозореца – подбират се в зависимост от обема на съдържанието в новия прозорец.
Допълнителни атрибути:
– Navigation toolbar – това е редът с бутони на браузъра – Back, Forward, Home, Reload и т.н.
– Location toolbar – това е редът, на който се намира полето за въвеждане на адреса
– Status bar – лента за състоянието
– Menu bar – лента с менюта
– Scrollbars as needed – определя дали да се добавят ленти за превъртане, ако съдържанието се простира отвъд видимата област
– Resize handles – позволява на потребителите да променят размерите на прозорците чрез издърпване на долния десен ъгъл или чрез натискане на бутон Maximize
– Window name – въведете име на прозорец, ако желаете да го използвате като дистинация на хипервръзка или да го контролирате чрез JavaScript.
Действието Open Browser Window вече се намира в панел Behaviors. Събитието се различава в зависимост от браузъра (on Focus – при кликване в клетка на таблица).
11. Създаване на изскачащо меню
То предлага на потребителя списък от избираеми опции и бърз достъп до различни секции на сайта.
1) селектирайте изображение
2) панел Behaviors, бутон (+), меню Actions, Show Pop-up menu
3) отваря се диалогов прозорец Show Pop-up menu със съвет, че програмата Fireworks позволява изграждане на по-сложни изскачащи менюта; бутон Continue
страница Contents
Text – въведете опция (команда) на менюто
Link – чрез иконата на папка намерете файла, към който ще води командата
– за да добавите нова опция щракнете на бутона (+) на menu. Попълнете полетата Text и Link.
– имената на опциите на менюто и съответните страници, с които са свързани, могат да бъдат редактирани – изберете елемент от списъка и въведете необходимите промени в полетата Text и Link.
– за да изтриете опция изберете я от списъка и щракнете на бутона (-) на menu.
(▲) (▼) – промяна на последователността на опциите в менюто
Бутон Indent Item – премества опция на меню на по-ниско ниво в категорията – използва се за създаване на подкатегория.
Бутон Outdent Item – премества опция на меню на по-високо ниво в категорията – използва се за създаване на подкатегория.
страница Appearance
– меню за ориентация
– меню Font
– поле Size
– стил на шрифта и подравняване
– поле за цветовете
– област за предварителен изглед
страница Advanced
– Cell Width (ширина на клетка)
– Cell Height (височина на клетка)
– Cell Padding (уплътнение)
– Cell Spacing (разстояние м/у клетки)
– Text Indent (отстъп)
– Menu Delay (забавяне на менюто) – определя колко дълго да се задържи менюто след като курсорът на мишката бъде отместен извън него (измерва се в милисекунди като 1000ms=1s)
страница Position
– бутони Menu Position – за приблизително разположение на менюто върху страницата
– X и Y – въведете стойности
– □ Hide Menu onMouseOut Event
Поведението Show Pop-up menu се намира в панел Behaviors. То е разделено на две части: Show Pop-up menu и Hide Pop-up menu. Създава се външен файл с JavaScript код с разширение .js. Името му обикновено е mm_menu.js.
За да редактирате дадено поведение:
1) селектирайте обекта, за който е приложено поведението
2) десен бутон на мишката върху действието и Edit Behaviors
За да изтриете дадено поведение: десен бутон на мишката върху действието и Delete Behaviors
Видео урок 1 – Създаване на роловър изображение
Видео урок 2 – Създаване на навигационна лента