Разработка HTML-документов средствами визуальных интегрированных сред

Программы разработки интерактивных Web-документов позволяют в процессе создания визуально наблюдать добавление новых компонентов к формам документа, что соответствует принципу WISYWYG (что вы видите на экране то и получите). Такие средства программирования принято называть визуальными интегрированными средами.

Интегрированные среды, по сравнению с другими средствами, предоставляют разработчику при создании HTML-документов следующие преимущества:

• — создание и редактирование HTML-документов визуально с использованием интегрированных компонентов, шаблонов документов, наборов стилей представления документа, возможности форматировать текст и ряда специфических функций;
• — быстрый просмотр документа в любом браузере, причем может использоваться внутренний браузер;
• — от разработчика не требуется знания языка HTML;
• — возрастание скорости создания HTML-документов за счет использования высокоуровневых средств разработки и снижения вероятности появления трудно находимых ошибок;
• — возможность использования кода скриптов, предоставляемых средой разработки;
• — возможность качественной отладки кода скриптов;

Среди удачно разработанных интегрированных сред визуальной разработки HTML-документов, можно выделить Dream Weaver, разработанный фирмой Macromedia и Front Page фирмой Microsoft.

Для разработки Web — сайта была выбрана среда Dream Weaver 7.0. Это обусловлено используемым в программе разработки более простым и интуитивно понятным интерфейсом, а так же более продуманным алгоритмом генерации HTML-документов в плане избыточности формируемого кода. Среда обладает всеми функциональными возможностями интегрированной среды фирмы Microsoft [21].

Рассмотрим основные возможности Dream Weave. На рис. 2.12 изображен вид программы на экране монитора при запуске.

Начнем разбор интерфейса с панели «палитра объектов», при помощи которой помещается практически всю внешнюю (не касающуюся текста) информацию на HTML-документ, она находиться слева. Эта палитра имеет несколько разных вариантов, которые могут быть открыты при помощи выпадающего меню в верхней части «палитры объектов». Рассмотрим, палитру, которая всегда отображается по умолчанию это — палитра common objects (основные объекты). В нее включено практически все, что нужно для начальной работы (слева-навправо, сверху-вниз):

• — Rollover Image — вставляет на страничку конструкцию, которая Image (картинка) — вставляет на страничку графический элемент;
• — имитирует анимированную кнопку (кнопку изменяющую свой вид при наведении на нее);
• — Table (таблица) — вставляет на страничку таблицу;
• — Tabular data (табличные данные) — вставляет готовую с таблицу с готовыми данными (например из Exel);
• — Horizontal Rule (линейка) — вставляет декоративный элемент — линейку (обычно используется как разделитель абзацев);
• — Navifgation Bar — вставляет навигационную панель, состоящую из нескольких кнопок;
• — Draw Layer (нарисовать слой) — вставляет на страничку слой (как в PhotoShop);
• — Line Break (мягкий перенос) — вставляет на страничку (в тексте) мягкий перенос;
• — E-mail Link (сслыка на электронную почту) — вставляет на страничку ссылку на электронный адрес;
• — Date (дата) — вставка в документ текущей даты (можно с автообновлением);
• — Flash — вставляет флеш-анимацию в страничку;
• — ShockWave — вставляет Shockwave-анимацию;
• — Generator — вставляет заготовку Generator;
• — FireWorks — вставляет объект FireWorks;
• — Applet — вставляет ява-апплет;
• — ActiveX — вставляет ActiveX;
• — Plugin — вставляет объект, проигрываемый плагином;
• — SSI — вставляет инклюд (подключаемый внешний HTML файл);

Справа от панели объектов находиться окно рабочей области, где отображается весь сформированный документ. Справа от области рабочего окна находятся окошко историй команд — оно позволяет отменять примененные к документу действия в широком диапазоне, и окошко рабочего режима макета страницы — обычно в его настраивают так, что бы в нем отображалось свойства стилей документа. В нижней части рабочей области экрана расположена палитра свойств текущего объекта, это очень полезное средство для задания значений необходимым атрибутам и свойствам тегов и компонентам целиком.

Кроме перечисленных характеристик, в Dream Weaver 7.0 встроена возможность быстрой отладки скриптов, а также просмотра документа в окне браузера (по нажатию клавиши F10). Причем имеется возможность разрабатывать документ в режиме простого текстового набора, при этом производиться цветовая и структурная разметкой HTML тегов.

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