Лабораторна робота № 6. Тема: Робота з редактором Macromedia Dreamweaver

Тема: Робота з редактором Macromedia Dreamweaver.

Мета: Навчитись використовувати засоби Dreamweaver для розробки web-сторінок

ХІД РОБОТИ:

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. Головна сторінка сайту

ТЕОРЕТИЧНІ ВІДОМОСТІ

Елемент <BGSOUND>

Елемент <BGSOUND> використовується для завдання фонового звучання відразу ж після завантаження сторінки. Він може не мати кінцевого тега і може мати атрибути:

· src

· Цей атрибут вказує URL звукового файла у форматі WAV, AU або MIDI, МР3.

· Синтаксис: <bgsound src="URL/пісня.mid ">

· loop

· Цей атрибут задає кількість відтворень звукового файла. Він може приймати значення 1, 2... або infinite - нескінченно.

· Синтаксис: < bgsound loop= значення >

Елемент <MARQUEE>

Елемент <MARQUEE> використовується з метою створення в документі рядка, що біжить.

<MARQUEE атрибути> Текст рядка </MARQUEE>

Він може мати атрибути:

· bgcolor

· Цей атрибут задає колір фону рядка, що біжить. Синтаксис: <MARQUEE bgcolor="колір">

· height

· Цей атрибут задає висоту рядка, що біжить, в пікселях або відсотках від всього вікна.

· Синтаксис: <MARQUEE height=число>

· align

· Цей атрибут задає вирівнювання рядка, що біжить, по верхньому краю top, по середині middle або по нижньому краю bottom.

· Синтаксис: <MARQUEE align=...>

· direction

· Цей атрибут задає напрям руху рядка, що біжить: left вліво, right управо, up вгору, down вниз.

· Синтаксис: <MARQUEE direction="...">

· behavior

· Цей атрибут задає поведінку рядка, що біжить, або scroll прокрутка, або slide прокрутка із зупинкою, або alternate рух від краю до краю.

· Синтаксис: <MARQUEE behavior="...">

· hspace

· Цей атрибут задає зсув в пікселях рядка, що управо біжить.

· Синтаксис: <MARQUEE hspace=число>

· vspace

· Цей атрибут задає порожній простір рядка, що вище і нижче біжить.

· Синтаксис: <MARQUEE vspace=число>

· loop

· Цей атрибут задає кількість проходів рядка, що біжить.

· Синтаксис: <MARQUEE loop=число>

· scrollamount

· Цей атрибут задає швидкість руху рядка, що біжить, якщо його значення рівно 1, то вона буде ледве повзти, якщо його значення більше 10, то вона буде рухатися дуже швидко.

· Синтаксис: <MARQUEE scrollamount=число>

· scrolldelay

· Цей атрибут задає часовий інтервал між кроками рядка, що біжить, за допомогою нього можна примусити рядок рухатися ривками.

· Синтаксис: <MARQUEE scrolldelay=число>