Интерактивните елементи и обратната връзка с потрбителя са важни компоненти на уебсайтовете. Интерактивността изисква изпълнение на дейсвие и отговор, тя е двупосочен комуникационен процес.
а) по-добро възприятие на целта и съдържанието на сайта;
б) по-лесна и по-директна навигация до страниците му.
а) динамични страници и използване на БД;
б) Macromedia Flash;
в) Quick Time Virtual Reality (QTVR) – формат, поддържащ 360-градусови панорамни изгледи и интерактивни компоненти;
г) JavaScript – използва се за скриптове, изпълнявани от браузъра на клиента;
д) Java Server Pages (JSP) – скриптове, които се обработват от сървъра и резултатът се изпраща на потребителя;
е) поведения на Dreamweaver – подиалогов прозорец рограми с код на JavaScript, които лесно можете да включите в уебсайт.
Поведението е комбинация от действие или серия от действия и събитие.
Действието (action) е това, което се извършва в резултат от намесата на потребителя (например размяна на едно изображение с друго).
Събитието (event) е това, което предизвиква възникването на дейсвието (например преместване на мишката над изображение или натискане на бутон).
- предварително дефинирани поведения
- добавяне на допълнителни поведения
- създаване на собствени поведения
Изображени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 при селектиране на изображението.
Този метод може да се използва, ако вече сте разположили оригиналното изображение върху страницата.
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 или бутон (-).
Когато замяната на едно изображение с друго трябва да се извърши само когато мишката премине над точно определена част на изображението (активна точка) може да използвате карта на изображение.
1) селектирайте изображението и му дайте име
2) създайте гореща точка в изображението чрез инструмента Rectangular Hotspot от панел Properties
3) аналогично на 3), 4) и 5) от т. 4
Винаги когато е селектирана картата на изображението, заменящото изображение е посочено в панел Behaviors. Ако изображението е селектирано, но не и картата заменящото изображение няма да присъства в този панел.
1н.) да промените събитието, на което отговаря дадено действие
1) натискате бутон Show all events
2) избирате събитието, което ще променяте и от списъчното му поле избирате новото събитие
2н.) да прикрепите няколко действия към едно събитие – десен бутон на мишката върху действието и Add new list item
3н.) да промените реда на изпълнение на действията – чрез бутоните ▲▼от панел Behaviors.
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 става достъпно и показва само тези събития, които са достъпни в избрания тип браузър.
а) същност – съобщенията в лентата за състоянието дават на потребителя допълнителна информация за дестинациите на хипервръзките. Те заместват описателното име на 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.
Въведеното съобщение се показва в лентата за състояние на браузъра след първото преминаване над горещата точка. При позициониране върху нея се изписва адреса на страницата.
1) селектирайте тага body
(цялото съдържание в документа се селектира) от Tag Selector – ще видите body в заглавната лента на панел Behaviors. След зареждане на страницата този прозорец може да се използва за показване на реклама, условия на ползване или на друга информация. Начини:
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 - при кликване в клетка на таблица).
То предлага на потребителя списък от избираеми опции и бърз достъп до различни секции на сайта.
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 - Създаване на навигационна лента