|
Читайте также: |
Найрізноманітніші властивості, що використовуються у World Wide Web, створюються за допомогою сценаріїв JavaScript. Застосовуючи поведінки, можна зробити так, щоб зображення змінювались при наведенні на них курсору миші ін. Поєднуючи можливості поведінки з шарами отримуються широкі можливості, які допомагають зробити ефектною і до того ж, зі швидким завантаженням.
Для роботи з поведінками у Dreamweaver використовується вікно Behaviors.
Відкрити вікно Behaviors, натиснути знак + і вибрати пункт поведінки – визначити параметри і натиснути ОК, поведінка з’явиться на панелі Behaviors, змінити подію, яка запускає поведінку можна в лівій частині панелі Behaviors.
У діалоговому вікні відповідної поведінки можна вказати її парамерти. Поведінка Open Browser Window вказує на наступне, якщо користувач натискує на зображення, то відкривається нове вікно браузера. Можна задати властивості відображення цього вікна (URL, розміри вікна, відображення меню, панелі інструментів і ін.).
Змінити поведінку можна вибравши її на панелі Behaviors.
Події – це дії, які виконує користувач працюючи з Web-сторінкою. Натиснення на зображенні є подією, як і завантаження сторінки з браузеру і натиснення клавіші на клавіатурі. Деякі події доступні лише до певних об’єктів на сторінці.
· onAbort. Спрацьовує, коли користувач зупиняє завантаження зображення.
· onBlur. Коли певний елемент виходить з під контролю користувача, наприклад натиснення за межами поля.
· onChange. Коли користувач змінює значення на сторінці, вибирає елемент меню чи змінює значення текст. поля
· onDblClick. Коли користувач двічі натискує на елемент
· onError. Коли виникає помилка при завантаженні сторінки чи зображення, напр. не знайдене
· onFocus. Коли елемент стає об’єктом уваги.
· onKeyDown. При натисненні будь-якої клавіші клавіатури
· onKeyPress. Коли користувач натискає і відпускає клавішу клавіатури
· onLoad. Спрацьовує після завантаження сторінки
· onMouseDown. При натисненні кнопки миші
· onMouseMove. При переміщенні курсору в межах об’єкту
· onMouseOut. Коли користувач забирає курсор з елементу
· onMouseOver. Коли курсор миші вперше потрапляє на певний елемент
· onMouseUp. Коли кнопка після натиснення відпускається
· onMove. Коли переміщується вікно чи фрейми
· onResize. Коли користувач змінює розмір вікна чи фрейму
· onScroll. Коли користувач прокручує сторінку вгору чи вниз.
· onUnload. Коли користувачи покидає сторінку чи закриває її вікно.
ХІД РОБОТИ:
1. Завантажити редактор Web-сторінок DreamWeaver
2. У початковому вікні, вибрати команду HTML у стовпці Create New.
3. Вибрати пункт меню Site/Manage Sites, натиснути кнопку New у діалоговому вікні вибрати закладку Advanced (додаткові параметри), вибрати категорію Local Info (Локальна інформація), ввести ім’я сайту, вибрати шлях та натиснути ОК. Зберегти сторінку під назвою “Index” за допомогою меню File-Save. Задати заголовок сторінки у полі Title.
4. Вибрати пункт меню Modify/ Page Properties (Змінити/параметри сторінки), у діалоговому вікні, категорії Apperance вибрати колір фону, колір тексту; а у категорії Title/Encoding вибрати шрифт Cyrillic Windows.
5. Додати таблицю (1*3) (за допомогою кнопки Table панелі Insert), зробити її границі невидимими, по центру написати заголовок сторінки, а по-боках вставити малюнки (за допомогою кнопки Rollover Image (зображення-прокрутку) списку Image на панелі Insert.
6. Вставити ще-одну таблицю, в її комірках розмітити фотографії (за допомогою кнопки Image списку Image на панелі Insert) текст та гіперпосилання (Рис 1).
7. Натиснути F 12 для перегляду сторінки у браузері
8. Задати для зображень текст підказки.
9. Забезпечити щоб при натисканні на малому зображенні відкривалось вікно із збільшеною його копією.
10. За допомогою елементу <MARQUEE> зробити в тексті рухому стрічку.
11. Створити ще дві Web-сторінки і посилання на них з головної сторінки.
12. Створити гіперпосилання з кінця сторінки на початок.
13. За допомогою елементу <BGSOUND> задати фоновий звук при завантаженні головної сторінки
14. Визначити гіперпосилання на сторінці.
15. Створити новий стиль натиснувши кнопку New CSS Style, у полі Selector type (тип селектора) вибрати тип створюваного стилю – Advanced, властивості Define in (визначити у) вибрати щойно створений файл, у списку Selector почергово вибравши пункти: a:link, a:hover, a:visited, a:active - та задати їм властивості, курсив тип курсору і т.д. (на задавайте ті властивості, які вже були визначені).
16. Створити крім головної сторінки ще дві сторінки сайту.
17. Відкрити вікно Layers.
18. Відкрити панель інструментів Layout.
19. Натиснути на кнопці Draw Layer панелі Layout Insert і нарисувати шар на сторінці. Розмісти на сторінці потрібну кількість шарів для створення копії головної сторінки з використанням шарів.
(Змінювати властивості шарів можна виділивши їх на сторінці або вибравши у вікні шарів).
20. Здійснити накладення шарів (текст зверху зображення, зображення на зображенні)
21. Відкрити вікно Behaviors та додати поведінки до зображень сторінки:
22. Програвання звукового файлу при натисненні на зображенні (Play Sound)
23. Відображення повідомлення при закритті сторінки (Popup Message)
24. Відкриття нового вікна малого розміру із зображенням без меню і панелі інструментів (Open Browser Window).
Рис.1. Головна сторінка сайту
КОНТРОЛЬНІ ПИТАННЯ
Дата добавления: 2015-09-11; просмотров: 80 | Поможем написать вашу работу | Нарушение авторских прав |