Лабораторна робота №3 Робота з редактором web-сторінок Dreamweaver. Посилання. Зв'язок з іншими документами. Використання об'єктів як посилання.

Мета: познайомитися з редактором web-сторінок Dreamweaver, опанувати основні прийоми роботи з редактором. Вивчити структуру та основні типи посилань, опанувати способи створення гіперзв’язків у HTML-документах.

1. Основні теоретичні відомості.

Програма Dreamweaver призначена для зручного і якісного створення web-документів і має зручний інтерфейс.

Мал.1 Елементи інтерфейсу програми Dreamweaver

Розглянемо основні елементи інтерфейсу програми Macromedia Dreamweaver(мал. 1).

Головне меню програми дозволяє виконувати всі основні операції як з HTML документом у цілому (створення, збереження, імпорт, експорт, конвертування), так і з окремими блоками й елементами документа.

Панель інструментів дозволяє одержати швидкий доступ до найбільш часто використовуваних конструкцій web документу й впровадити їх у документ.

Меню створення файлу дозволяє створювати web файли різних типів.

Область HTML коду містить код документа. У цій області створюється як сам документ так і його елементи й модулі.

Область перегляду дозволяє переглядати найпростіші конструкції документа, для перегляду всього документа необхідно використовувати браузер.

Панель властивостей відображає властивості окремих об'єктів документа й дозволяє їх редагувати.

Перед початком роботи необхідно настроїти редактор на роботу з кириличним текстом. Для цього необхідно виконати команду Edit→Preferences і вікні діалогу Preferences встановити настройки так, як показано на малюнку 2.

Мал. 2 Настроювання властивостей нового документа

На малюнку 3 показана головна панель інструментів доступ до яких можна також одержати з опцій головного меню Insert і Modify.

Мал.3 Головне меню й панель інструментів

Розглянемо призначення основних елементів панелі інструментів і панелі головного меню:

• Hyperlink (гіперпосилання)- вставляє в документ гіперпосилання;

• Email Link (посилання на електронну пошту) - вставляє на сторінку посилання на електронну адресу;

• Named Anchor (якір) - визначає ім'я області, куди буде здійснений перехід по гіперпосиланню;

• Draw Layer (намалювати шар) - вставляє на сторінку шар (аналогічно створенню шару в програмі PhotoShop);

• Table (таблиця) - вставляє на сторінку таблицю

• Image (картинка) - вставляє на сторінку графічний елемент;

• Image (зображення заповнювач) - заповнює зазначену область зображенням;

• Flash - вставляє флеш-анімацію на сторінку;

• FireWorks - вставляє об'єкт FireWorks;

• Scrolling (прокручування) - прокручування зображення;

• Navigation Bar - вставляє навігаційну панель складається з декількох кнопок;

• Horizontal Rule (лінійка) - вставляє декоративний елемент - лінійку (звичайно використовується як роздільник абзаців);

• Date (дата) - вставка в документ поточної дати (можна з автообновленням);

• Tabular data (табличні дані) - вставляє готову таблицю з готовими даними (наприклад з Excel);

• Comments (коментарі) - вставляє коментарі;

• Tag (тег) - вставляє теги.

Крім головної панелі інструментів у програмі передбачені спеціалізовані панелі інструментів (див. мал.4), які включаються вибором відповідної панелі після натискання на кнопку Common (див. мал.3). За допомогою кнопки Common можна вивести на екран наступні панелі інструментів: Common – загальні, Layout – шари, Forms – форми, Text – текст, HTML, Application – додатка, Flash elements - елементи флеш, Favorites – вибір головного об'єкта.

Мал. 4 Вибір додаткової панелі інструментів.

Уведення HTML коду здійснюється в кодовій частині. Для цього ми змінюємо пропоновану кодову сторінку в заголовній частині. Для перемикання на російськомовну сторінку необхідно прописати тег meta у наступному вигляді:

<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">.

де charset = utf - 8 перемикання на російськомовну кодову сторінку.

Мал. 5 Уведення тегу	Мал. 6 Уведення властивостей

Редактор після набору відкриваючої тегової дужки < включає інтелектуальну систему уведення, за допомогою якої легко безпомилково ввести потрібний тег (див. мал. 5). Уведення властивостей може бути також здійснений напівавтоматичне за допомогою інтелектуальної системи уведення. Для її включення необхідно усередині тегу нажати пробіл, після цього в випадаючому меню будуть відображені тільки ті властивості, якими володіє обраний вами тег (див. мал. 6).

Робота з редактором починаться зі створення корню сайту, для цього треба в опції сайт вибрати опцію Manager, New. Ввести ім'я сайту, його адресу (Мал.7), виключити використання серверних технологій, ввести ім’я папки, де будуть зберігатися log файлі. Ви повинні відмовитись від зв’язку з сервером (вибрати None), потім Даліє і Done.

Папка сайту

Мал. 7 Створення нового сайту