Включване на интерактивно�т/динамика във WEB �траница � помощта на FrontPage2003

DHTML (динамичен HTML) включва HTML, client-side �криптов език и CSS (Cascaded Style Sheets), но в това упражнение ще �е работи в дизайнер�ки изглед, без ди�кутиране на �ъответни� код.

Динамиката във WEB �траниците �е реализира като �е �леди за на�тъпване на н�какво �ъбите (Event), �вързано � обект от �траницата, като ако �ъбитието на�тъпи �е предприема �ъответното дей�твие (Action).

Примери за обекти и �вързани � т�х �ъбити�, ре�пективно дей�тви�:

Обект	Събитие	Име на �ъбитието	Дей�твие
изображение	двоен клик � мишката върху изображението	ondblclick	издаване на звук
тек�т	позициониране на мишката върху тек�та	onmouseover	форматиране на тек�та
тек�т	нати�кане на клавиш от клавиатурата	onkeydown	по�ва на �ъобщение

Както у�танов�ването на на�тъпило �ъбитие, така и реализаци�та на �ъответното дей�твие �тава по�ред�твом програмен код. След като добавите динамични ефекти, в директори�та на �ъздавани� от ва� �айт ще откриете файл � разширение js �ъдържащ генериран от FrontPage JavaScript код, който реализира откриването на по�очените от ва� �ъбити� и на �ъответните им дей�тви� по�ред�твом функции.

В това упражнение ще бъдат използвани �амо �криптове, предлагани/генерирани автоматично в �редата на FrontPage 2003.

При теÑ�тване на нÑ�кои от ефектите в браузер може преди визуализирането на ефекта  да получите Ñ�ъобщение, че от Ñ�ъображениÑ� за Ñ�игурноÑ�Ñ‚ има блокирано Ñ�ъдържание в разглежданата Ñ�траница (определÑ� Ñ�е от наÑ�тройката на браузера в Tools/InterentOptions – панел Security) – Ñ�лед натиÑ�кане на бутон OK в прозореца на Ñ�ъобщението и кликване/щракване Ñ� мишката върху жълтата ивица в прозореца на браузера  Ñ�е получава меню, от което Ñ�е избира Allow Blocked Content, за да Ñ�е види заложениÑ� от ваÑ� ефект.

Препоръчителен дизайнерÑ�ки подход е да Ñ�е подхожда пеÑ�теливо и да не Ñ�е претрупва Ñ�траницата Ñ� ефекти – твърде много ефекти биха размили акцента от онази чаÑ�Ñ‚ на Ñ�ъдържанието, коÑ�то бихте иÑ�кали да привлече вниманието на поÑ�етителÑ�. Ð�Ñ�кои от динамичните ефекти удължават времето за зареждане на Ñ�траницата. Важно е Ñ�траниците, Ñ�ъдържащи динамични ефекти да Ñ�е теÑ�тват в различни браузери, тъй като не вÑ�ички браузери и не във вÑ�Ñ�ка  от верÑ�иите Ñ�и Ñ�а в Ñ�ÑŠÑ�тоÑ�ние да визуализират ефектите.

1. Елементарни динамични ефекти

Ин�трументът View/Tollbars/DHTMLEffects cлед избор на обект в �траницата дава възможно�т за избор от падащо меню на на�тъпило �ъбитие On <Choose an event>, ре�пективно на  �ъответ�тващото му дей�твие Apply � възможно�т за уточн�ване на различни варианти на про�ва по�ред�твом падащо меню Settings. Съдържанието на падащите менюта �е мени в зави�имо�т от избрани� обект и �ъответ�тващото му дей�твие. С този ин�трумент не е възможно �вързването на един обект � повече от едно �ъбитие, предизвикващо н�какво дей�твие. �а практика изборът на обект избира тага, � който обектът е включен в �траницата и добав� към неговите атрибути информаци� �вързваща най-че�то име на �ъбитие � името на JavaScript-функци�, ко�то го реализира.  Затова ако �е избере ча�т от тек�т, разположен в обла�тта на дей�твие на тага <p>, ефектът �е прилага за цели� параграф, а не �амо за избрани� тек�т.

С бутон от тази лента в дизайнер�ки� изглед �тава видима или �е �крива обла�тта на дей�твие на ефекта по�ред�твом �пецифично оцвет�ване.

Ефект, �вързан � избрани� обект �е изтрива по�ред�твом Remove Effect от �ъщата лента � ин�трументи, ако в дизайнер�ки изглед �те позиционирани в зоната на дей�твие на ефекта.

Задача 1

• Създайте нов празен Ñ�айт Ñ� име Dynamic;
• Ð’ новиÑ� Ñ�айт Ñ�ъздайте Ñ�траница DynEffects1.htm;
• Ð’ тази Ñ�траница въведете текÑ�Ñ‚ на 2-3 реда, като клавиша Enter натиÑ�нете едва в краÑ� на въвеждането, за да получите повечко текÑ�Ñ‚, разположен в параграф. Изберете коÑ� да е дума в текÑ�та и Ñ�вържете Ñ�ъбитието click (еднократно натиÑ�кане на лÑ�в бутон на мишката) върху текÑ�та Ñ� промÑ�на на шрифта (Formatting) по размер, цвÑ�Ñ‚ и плътноÑ�Ñ‚, както и Ñ� добавÑ�нето на рамка за текÑ�та в цвÑ�Ñ‚, различен от този избран за текÑ�та на целиÑ� документ;
• Ð’ Ñ�ъщата Ñ�траница добавете изображение по ваш избор от наличните (в директориÑ� H:\ex5\touse), за което при Ñ�ъбитие Page Load включете ефект Fly In Ñ� наÑ�тройка From Bottom;
• Проверете как работÑ�Ñ‚ ефектите;
• Изтрийте ефекта, Ñ�вързан Ñ� изображението и добавете нов ефект – при Ñ�ъбитието Mouse over – позициониране на мишката върху изображението да Ñ�е предизвиква дейÑ�твието SwapPicture, като новото изображение да бъде по ваш избор от наличните, но различно от вече използваното по-горе в задачата;
• Поверете как работÑ�Ñ‚ ефектите;
• Разгледайте в кодов изглед промените, които е направил FrontPage за реализиране на ефектите – оÑ�вен промените в Ñ‚Ñ�лото на html-документа обърнете внимание и на промените в head Ñ�екциÑ�та.

Задача 2

�аправете така, че две думи, виждащи �е на един ред в прозореца на бараузера, при по�тав�не на мишката върху в��ка от т�х (�ъбитие mouseover) т� да �е оцвет�ва в различен от другата дума и о�танали� тек�т в документа цв�т.

Указани�:

Използвайте знаниÑ�та, придобити в упражнението отноÑ�но различните контейнери (нива, таблици) за обекти – те Ñ‚Ñ€Ñ�бва да Ñ�е включат в документа на Ñ�ъответното мÑ�Ñ�то преди въвеждането на думите.

2. Динамични ефекти, �вързани � отвар�нето/затвар�нето на �траница или �айт

Меню Format/Page Transition предо�тав� възможно�ти за �ъздаване на динамични ефекти, �вързани � на�тъпване на �ъбити�та отвар�не на нова �траница или �айт, ре�пективно затвар�нето им. В полето Duration �е указва продължително�тта на ефекта, отчитана в �екунди.

ВизуализациÑ�та на динамични ефекти от този вид (водÑ�Ñ‚ до увеличаване на времето за зареждане на Ñ�траницата) може да Ñ�е разрешава/забранÑ�ва от наÑ�тройките на браузерa – за InternetExplorer това Ñ�тава от меню Tools/InternetOptions, панел Advanced, раздел Browsing, опциÑ� EnablePageTransitions.

Задача 3

• Ð’ Ñ�айта Dynamic добавете нова Ñ�траница DynEffects2.htm;
• Включете в неÑ� изображение от директориÑ� H:\ex5\touse. Свържете Ñ�ÑŠÑ� Ñ�ъбитието отварÑ�не (PageEnter) на Ñ�траницата DynEffects2.htm в браузера например ефекта Horizontal blinds, а Ñ�ÑŠÑ� затварÑ�нето й (PageExit) – например Circle in Ñ� продължителноÑ�Ñ‚ на вÑ�еки ефект не повече от по 3-4 Ñ�екунди;
• Ð’ Ñ�траницата Index.htm (ако нÑ�мате такава – добавете Ñ�) добавете текÑ�това хипервръзка към DynEffects2.htm, а в Ñ�траница DynEffects2.htm – текÑ�това хипервръзка към Index.htm;
• Проверете дали браузерът InternetExplorer е наÑ�троен така, че да визуализира ефекти от този вид;
• ТеÑ�твайте Ñ�ъздадените ефекти;
• Ð’ дизайнерÑ�ки изглед, на произволно мÑ�Ñ�то в отворената за редактиране DynEffects2.htm Ñ� деÑ�ен клик на мишката извикайте контекÑ�тно завиÑ�имото меню и в подменю PageProperties разгледайте панел Custom.

3. Добав�не на повече дей�тви�, �вързани � различни �ъбити� за обект

По-гъвкав и мощен ин�трументариум за включване на динамика предлага меню View/Task Pane, �лед което в панела на задачите от разположеното най-горе в него падащо меню �е избира Behaviors (= поведение, като е възможно в момента там да �е вижда възможно�тта GettingStarted, а нати�кане на плътната �трелка отвар� падащо меню, от което е до�тъпна възможно�тта Behaviors).

При избран обект в дизайнер�ки� изглед меню Insert предлага възможно�ти за избор на дей�твие, като �ледващите �тъпки, които дизайнерът тр�бва да извърши зави��т от избраната възможно�т. �а н�ко� от �тъпките �е по�в�ва табличката Events Actions, като в първата колона при задържане на мишката върху името на �ъбитието (на примера горе е ondbclick) �е визуализира плътна �трелка, ко�то дава до�тъп до падащо меню за избор/�м�на на �ъбитието, чието на�тъпване предизвиква избраното дей�твие.  С този ин�трумент към един обект могат да бъдат �вързани повече от една двойка �ъбитие-дей�твие. Така оформени�т �пи�ък от двойки �ъбитие-дей�твие може да бъде редактиран чрез добав�не на ново дей�твие от меню Insert на панела �ъ� задачите, изтриване на избрана двойка по�ред�твом Delete бутона (така �е изтрива и обекта от �траницата, а не �амо дей�твието, �вързано � него). Де�ен клик � бутона на мишката върху ча�тта Action на н�ко� от въведените двойки �ъбитие-дей�твие отвар� контек�тно зави�имото меню, от където �ъщо �а до�тъпни възможно�тите за редактиране. До прозорец за редактиране можете да до�тигнете и по�ред�твом  двоен клик � мишката.

Задача 4

• Добавете към Ñ�айта Ñ�и нова Ñ�траница DynEffects3.htm
• Ð’ новата Ñ�траница наберете нÑ�каква дума, към коÑ�то за Ñ�ледните три Ñ�ъбитиÑ� добавете Ñ�ъответните дейÑ�твиÑ�/ефекти:

°         при позициониране на мишката върху думата в Status bar (лентата на Ñ�ÑŠÑ�тоÑ�нието) на браузера да Ñ�е поÑ�вÑ�ва поÑ�Ñ�нителен текÑ�Ñ‚ „върху думата”

°         при отмеÑ�тване на мишката от думата – да изчезва текÑ�Ñ‚ÑŠÑ‚ от лентата на Ñ�ÑŠÑ�тоÑ�нието

°         при двоен клик Ñ� мишката върху думата в лентата на Ñ�ÑŠÑ�тоÑ�нието да Ñ�е поÑ�вÑ�ва (докато мишката Ñ�лед двойниÑ� клик е вÑ�е още върху думата) текÑ�та „двоен клик“.

Указани�:

Използвайте SetText/SetTextofStatusBar

Задача 5

• Ð’ Ñ�траницата Index.htm добавете JumpMеnu Ñ� две позиции dhtml и dyneffects, така че при избор на позициÑ� от него в нов прозорец на бараузера да Ñ�е показва Ñ�ъответно Ñ�ъдържанието на файл DynEffects1.htm, реÑ�пективно – DynEffects2.htm;
• ТеÑ�твайте работата на менюто;
• Добавете нова опциÑ� picture на първа позициÑ� в менюто, при избора на коÑ�то в нов прозорец на браузера да Ñ�е вижда изображение по ваш избор от наличните.

Задача 6

• Ð’ Ñ�траницата Index.htm от Insert/InlineFrame включете в Ñ�траницата Ñ�и фрейм;
• Ð’ Ñ�траницата Index.htm (извън фрейма) добавете ново JumpMеnu Ñ� две позиции dhtml и pic, така че при избор на първата в InlineFrame да Ñ�е вижда DynEffects1.htm, а при избор на втората в InlineFrame да Ñ�е вижда изображение по ваш избор от наличните;
• ТеÑ�твайте функционалноÑ�тта на новото меню.

Указани�:

За да бъде включен фреймът в �пи�ъка � възможни цели (Target) на елемента JumpMеnu изберете NewPage за първоначално визуализиране във фрейма.

Задача 7

Ð’ Ñ�траницата Index.htm към първото JumpMеnu добавете Ñ‚.н. Go – бутон, така че избраната позициÑ� от менюто да Ñ�е задейÑ�тва едва Ñ�лед натиÑ�кане на бутона, а не веднага Ñ�лед избор в менюто.

Указани�:

• Добавете бутон на подходÑ�що мÑ�Ñ�то в Ñ�траницата от меню Insert/WebComponent/DynamicEffects -> InteractiveButton (или Insert/InteractiveButton);
• За новиÑ� бутон изберете дейÑ�твие JumpMеnuGo, като укажете желаното меню;
• Изтрийте дейÑ�твието Ñ�вързано Ñ� JumpMеnu, към което Ñ�те добавили бутона;
• Проверете как работи комплектът меню-бутон.

Задача 8

• • Ð’ Ñ�траницата Index.htm поÑ�редÑ�твом меню Insert/Form добавете два бутона и текÑ�тово поле. „Оживете” бутоните така, че при натиÑ�кане на единиÑ� в текÑ�товото поле да Ñ�е поÑ�вÑ�ва текÑ�та hello, а при натиÑ�кане на другиÑ� на два различни реда в InlineFrame да Ñ�е поÑ�вÑ�ва текÑ�та hi, реÑ�пективно my friend;
  • Проверете дейÑ�твието на бутон Reset за тази форма – ако Ñ�те го изтрили – добавете го;
  • Променете дейÑ�твието Ñ�вързано Ñ� първиÑ� бутон така, че при натиÑ�кането му да Ñ�е отварÑ� URL по ваш избор.

Указани�:

ДобавÑ�нето на текÑ�Ñ‚ във фрейма Ñ�тава в рамките на тагове <body> и </body>, като тези тагове Ñ�ъщо Ñ‚Ñ€Ñ�бва да бъдат включени – Ñ‚.е. Ñ‚Ñ€Ñ�бва да оформите Ñ‚Ñ�лото на малък html документ.

Задача 9

Създайте главно меню � две позиции, като поне за едната позици� добавите още две възможно�ти (кa�кадно меню) и използвайте възможно�тите на FrontPage, за да го направите функционално. Използвайте нива/�лоеве (Layers) за поме�тване на главното и подчинените менюта.

Указани�:

• Създайте нова Ñ�траница CMenu.htm;
• Покажете панела на задачите TaskPane и от менюто горe в него вмеÑ�то Behaviors изберете Layers;
• Вмъкнете в Ñ�траницата ниво/Ñ�лой, в което ще разположите главното меню и именувайте нивото/Ñ�лоÑ� gmenu (деÑ�ен клик в TaskPane върху нивото и ModifyID)
• Разпънете Ñ�лоÑ� хоризонтално, за да можете да помеÑ�тите повече от един бутон в него;
• От меню Insert/WebComponent/DynamicEffects->InteractiveButton вмъкнете два бутона, подходÑ�щи за хоризонтално разположено меню и ги именувайте например GM1, GM2;

За �ъздаване на подменю например на бутон GM1изпълнете �ледните �тъпки:

• Вмъкнете в Ñ�траницата нов Ñ�лой под първиÑ� бутон (извън първиÑ� Ñ�лой), в който ще разположите подменюто и го наречете SmG1 (деÑ�ен клик в TaskPane върху нивото и ModifyID)
• Ð’ новиÑ� Ñ�лой от меню Insert/WebComponent/DynamicEffects->InteractiveButton вмъкнете два подходÑ�щи за вертикално разположено меню бутона един под друг (използвайте комбинациÑ�та Shift+Enter – може би Ñ�и Ñ�помнÑ�те, че така Ñ�е вмъкваше тага <br>, за да преминете на нов ред в Ñ�лоÑ� Ñ�лед вмъкнат първи бутон), като първиÑ� бутон именувайте SM11, а вториÑ� – SM12;
• Ð�аправете Ñ�лоÑ� Ñ� главното меню родителÑ�ки за този Ñ� подчиненото меню, като в TaskPane поÑ�редÑ�твом drag and drop технологиÑ�та Ñ� мишката пренеÑ�ете Ñ�лоÑ� на подчиненото меню и го пуÑ�нете върху този на главното меню (ако Ñ�е наложи главното меню да Ñ�е меÑ�ти в Ñ�траницата едновременно Ñ� него ще Ñ�е меÑ�ти и подчиненото);
• Променете размерите на Ñ�лоÑ� Ñ� подменюто, ако това Ñ�е налага, за да бъде добре подравнен по границите на Ñ�ъответниÑ� бутон от главното меню;
• Ð�аправете от TaskPane Ñ�лоÑ� SmG1 Ñ� подменюто невидим (затворено око в TaskPane) – той ще Ñ‚Ñ€Ñ�бва да Ñ�е вижда Ñ�амо ако е избран Ñ�ъответниÑ� му бутон от главното меню;

За показване на подменюто, когато кур�орът премине над бутона GM1 изпълнете �ледните �тъпки:

• Изберете бутон GM1 като обект, върху който ще Ñ�е прилага дейÑ�твието и от TaskPane изберете Behaviors. Този вид бутони вече имат Ñ�вързани Ñ� Ñ‚Ñ�Ñ… дейÑ�твиÑ�, които ще Ñ�е визуализират и предÑ�тои добавÑ�нето на ново дейÑ�твие от меню Insert/ Change Property;
• Ð’ диалоговиÑ� прозорец е избрана опциÑ�та Current Element (текущ елемент), какъвто Ñ�ега е бутон GM1, но желаното дейÑ�твие е Ñ�вързано Ñ� нивото SmG1 – Ñ‚.е. Ñ‚Ñ€Ñ�бва да бъде избран друг елемент и затова поÑ�очете Select Element, при което в полето Ñ‚Ñ€Ñ�бва да Ñ�е поÑ�ви тага div за Ñ�лой. От двата възможни Ñ�лоÑ� в падащото меню Ñ� имена на елементи (ElementID) изберете SmG1 за Ñ�лоÑ� на подменюто. Ð�атиÑ�нете бутон Visibility и в получениÑ� диалогов прозорец изберете Visible, Ñ�лед което – бутон OK за затварÑ�не на диалогов прозорец Visibility. Включете поле Restore on mouseout event, за да Ñ�е възÑ�танови Ñ�тарото положение – когато курÑ�орът напуÑ�не бутона подменюто Ñ‚Ñ€Ñ�бва да Ñ�тава невидимо. Ð�атиÑ�нете бутон OK за затварÑ�не на диалогов прозорец ChangeProperty;
• Ð’ TaskPane вÑ�ички доÑ�ега уточнениÑ� за дейÑ�твието (Action) ChangeProperty Ñ�а Ñ�ъпоÑ�тавени на Ñ�ъбитието (Event) onclick за бутона GM1, което Ñ‚Ñ€Ñ�бва да промените на onmouseover, за да не е необходимо натиÑ�кането на GM1, за да Ñ�е види неговото подменю.

�ко те�твате резултата в браузер ще забележите, че нати�кането на бутон от подменюто не е възможно, защото �поред на�тройките извършени до �ега то тр�бва да изчезва �лед напу�кане на бутон GM1 от главното меню. За да бъде подменюто видимо, когато кур�орът е над него изпълнете �ледните �тъпки:

• ТрÑ�бва да Ñ�е избере в дизайнерÑ�киÑ� изглед нивото на подменюто, за да Ñ�е Ñ�менÑ�Ñ‚ неговите Ñ�войÑ�тва, но то е Ñ�крито и не Ñ�е вижда. Ð�алага Ñ�е да превключите TaskPane в Layers режим или от менюто в горната чаÑ�Ñ‚ на TaskPane, или от хипервръзката Layers в долната чаÑ�Ñ‚ на панела на задачите и в режима Layers от панела на задачите да изберете Ñ�лоÑ� на подменюто. След това отново превключете към режима Behaviors на панела на задачите;
• Ð’ режима Behaviors изберете Insert/ Change Property;
• Ð’ диалоговиÑ� прозорец Change Property изберете Current Element, Ñ�лед което натиÑ�нете бутон Visibility;
• Ð’ новиÑ� диалогов прозорец изберете Visible и натиÑ�нете OK;
• Ð’ диалоговиÑ� прозорец Change Property включете Restore on mouseout event, за да оÑ�игурите изчезването на подменюто, когато курÑ�ора го напуÑ�не;
• Ð�атиÑ�нете OK бутона, за да запазите наÑ�тройките в промÑ�ната на Ñ�войÑ�твата;
• Ð’ режима Behaviors на панела на задачите променете Ñ�ъответното Ñ�ъбитие от onclick на onmouseover;
• Запазете Ñ�траницата и Ñ� теÑ�твайте в браузер.

4. Добав�не на аплети

С програмниÑ� език Java при използване на подходÑ�щи клаÑ�ове-библиотеки Ñ�е Ñ�ъздават програми, които могат да Ñ�е включват във WEB Ñ�траници и да бъдат изпълнÑ�вани в браузер. ДобавÑ�нето на такива програмки в HTML документи Ñ�тава поÑ�редÑ�твом тагa applet, в чийто атрибут code Ñ‚Ñ€Ñ�бва да бъде поÑ�очен файл Ñ� разширение class, а в атрибутите width и height – размерът в пикÑ�ели на графичното изображение, което е визуализациÑ�та на изпълнÑ�ваниÑ� аплет в прозореца на браузера.

‘ Кода  (source) на java – програмата Ñ�е запиÑ�ва във файл Ñ� разширение java. След компилиране на java-файл Ñ�е получва class-файл, Ñ�ъдържащ Ñ‚.н. byte -код. Ð�еобходимо е да има интерпретатор за Java byte кода и наÑ�тройките на браузера да позволÑ�ват използването му, за да може да бъде Ñ�тартиран аплета.

За да e възможно добав�нето на аплети в �редата на FrontPage тр�бва да е включена възможно�тта JavaApplets, намираща �е в панел Authoring, до�тъпен от меню Tools/PageOptions.

Добав�нето на аплети в �редата FrontPage �тава чрез меню Insert/WebComponent, където от полето ComponentType �е избира Advanced Controls и в раздела ChooseAControl -  JavaApplet, �лед което �е нати�ка бутон Finish (по�ледните две дей�тви� може да бъдат изпълнени едновременно � двоен клик на мишката при избор на Java Applet).

В по�вили� �е прозорец в �ъответните  полета �е указват:

Ø  Applet sorce – името на class – файла;

Ø  Applet basе URL – път до  class – файла;

Ø  Applet parameters – на нÑ�кои аплети могат да бъдат предавани параметри от потребителÑ�, който Ñ�лед натиÑ�кане на бутон Add може да добавÑ� двойки от Ñ�тойноÑ�ти;

Ø  Layout позициониране на аплета в прозореца на браузера;

Ø  Width �тойно�т в пик�ели на ширината на аплета (задава �тойно�т на �ъответни� атрибут на тага applet);

Ø  Height �тойно�т в пик�ели на ви�очината на аплета (задава �тойно�т на �ъответни� атрибут на тага applet).

Задача 10

• Разгледайте помощта, коÑ�то FrontPage предлага по ключовите думи applet insert
• Проверете дали наÑ�тройките на FrontPage позволÑ�ват включването на аплети;
• Създайте нова Ñ�траница Applet.htm;
• Ð’ Ñ�траницата Applet.htm добавете аплет (използвайте class файла, разположен в директориÑ� H:\ex5\touse);
• Проверете резултата в браузер;
• Променете позиционирането на аплета в прозореца на браузера и проверете резултата.

Указани�:

Изберете възможно�тта Help вме�то Behaviors и в полето SearchFor наберете ключовите думи.

No related posts.