Автоматизация создания Web-документов

на примере редактора FrontPage

В начале создания Web-узла перед разработчиком встает вопрос, какие средства могут быстро и качественно выполнить поставленную задачу. В настоящее время существует два типа редакторов, создающих Web-узлы. Это редакторы, работающие непосредственно с кодом, и визуальные редакторы. У обеих технологий есть плюсы и минусы. При создании Web-сайтов с помощью кодовых редакторов разработчику необходимо знать язык HTML. Работа в визуальном редакторе, к которому относится и FrontPage, достаточно проста и напоминает процесс создания документа в Microsoft Word. Увидеть, как будет выглядеть созданная с использованием FrontPage страница при просмотре, в обозревателе можно, не выходя из редактора. По некоторым источникам в Интернете до 50% всех страниц и Web-узлов, включая и крупные проекты, создается с помощью Microsoft FrontPage. А на территории СНГ, вполне возможно, что эта цифра достигает 80-90 %.

Программа FrontPage, входящая в состав пакета Microsoft Office, предназначена для создания Web-страниц и Web-узлов. Применяя панели инструментов и команды меню, на странице можно размещать текстовую и графическую информацию, панели навигации и ссылки, предназначенные для перехода от одной страницы к другой. Кроме того, для оформления Web-страницы можно использовать таблицы, фреймы, бегущие строки, анимацию и многое другое. Чтобы ускорить разработку Web-страниц и узлов, можно применять шаблоны и мастера. FrontPage позволяет использовать в Web-узле материал, подготовленный в других программных продуктах, входящих в Microsoft Office, таких как Word, Excel, Access и PowerPoint.

Начиная работу в редакторе FrontPage, следует отдавать себе отчет, что в результате его применения получается документ HTML, построенный по тем же правилам, что и создаваемый вручную. Этот факт сразу же определяет возможности и ограничения в работе этого редактора:

· все функции редактора FrontPage однозначно реализуются тегами HTML;

· редактор FrontPage не имеет средств, которые нельзя было бы представить в виде тегов HTML;

· пользователь обычно не знает, какие именно средства HTML используют для достижения заданного эффекта и насколько корректно они применяются.

FrontPage имеет мощную поддержку в Интернете. Существует много Web-узлов, групп новостей, конференций, ориентированных на пользователей FrontPage. Также к FrontPage существует множество платных и бесплатных плагинов (plug-ins), расширяющих его возможности. Например, самые лучшие, на сегодняшний день, оптимизаторы графики Ulead SmartSaver и Ulead SmartSaver Pro от компании Ulead встраиваются плагинами не только в Photoshop, но и в FrontPage. Помимо этого, имеется целая индустрия фирм, разрабатывающих и выпускающих темы для FrontPage.

Интерфейс FrontPage схож с интерфейсом программ, входящих в Microsoft Office, что облегчает его освоение. К тому же между программами, входящими в Microsoft Office, существует полная интеграция, что позволяет использовать во FrontPage информацию, созданную в других приложениях.

Редактор FrontPage «ориентирован» на применение браузера Internet Explorer (IE), так что создаваемый им код HTML наиболее адекватно отображается именно в этом браузере. В частности, FrontPage позволяет использовать «бегущую строку», средство, которое не входит в стандарт HTML, но поддерживается Internet Explorer.

Окно программы FrontPage (рис. 10.7) представляет собой комбинацию окна редактора и окна браузера. Документ HTML отображается редактором, как специфическим браузером, отображающим даже обычно невидимые элементы (такие, как якоря). В то же время, этот текст можно редактировать средствами, аналогичными имеющимся в текстовом процессоре.

Рис. 10.7. Окно программы FrontPage в режиме «Конструктор»

В качестве основного средства форматирования используется панель инструментов Форматирование, почти идентичная подобной панели текстового процессора Word (рис. 10.8).

Рис. 10.8. Панель форматирование FrontPage

Она содержит:

• раскрывающийся список Стиль, позволяющий выбрать стиль оформления абзаца (соответствующий стандартным функциональным элементам HTML);

• раскрывающийся список Шрифт, позволяющий выбрать гарнитуру шрифта (наличие такого же шрифта в ходе просмотра документа через Интернет не гарантируется);

• раскрывающийся список Размер, позволяющий управлять размером текста (в относительных единицах HTML);

• кнопки выбора начертания - ;

• кнопки выбора выравнивания текста - ;

• кнопки увеличения, уменьшения размера шрифта - ;

• кнопки создания маркированных (неупорядоченных) и нумерованных (упорядоченных) списков - ;

• кнопки задания отступа текста: уменьшить/увеличить отступ (на основе некорректного использования элементов HTML) - ;

• кнопки задания рамок и цвета фона и шрифта - . Эти функции реализуются с помощью списков стилей, которые рассматриваются как расширение HTML.

Дополнительные элементы форматирования, не вынесенные на панель инструментов, задаются в отдельных диалоговых окнах. Их можно открыть, например, с помощью команд Формат ® Шрифт и Формат ® Список.

Для создания гиперссылки надо выделить фрагмент текста, который будет использоваться как ссылка, и дать команду Вставка ® Гиперссылка. В открывшемся диалоговом окне Добавление гиперссылки тип гиперссылки выбирают на панели Связать с (рис. 10.9). Можно выбрать для ссылки другой файл (Связать с файлом, веб-страницей), место в этом же документе (Связать с местом в документе), новую страницу своего Web-узла (Связать с новым документом; документ, на который указывает ссылка, создается немедленно) или адрес электронной почты (Связать с электронной почтой).

Кнопки Выбор рамки и Закладка позволяют указать, соответственно, имя фрейма, в котором будет открываться страница, и якорь, который необходимо использовать.

Созданная гиперссылка отображается в окне программы FrontPage так же, как и в окне браузера: синим цветом и с подчеркиванием. Чтобы проверить работоспособность ссылки, следует щелкнуть на ней правой кнопкой мыши и выбрать в контекстном меню команду По ссылке.

Рис. 10.9. Создание гиперссылки

Таблицы и формы невозможно создать только с помощью команд форматирования. Чтобы создать таблицу, используют команду Таблица ® Вставить ® Таблица. В открывшемся диалоговом окне указывают размер таблицы (в ячейках), а также дополнительные параметры, реализуемые как атрибуты соответствующих тегов. Чтобы занести информацию в таблицу, следует установить курсор в нужную ячейку и начать ввод. При работе с ячейками таблицы можно применять любые команды форматирования.

Дополнительные объекты вставляются в редактируемый документ при помощи меню Вставка. Например, для вставки изображения используется команда Вставка ® Рисунок ® Из файла. В диалоговом окне свойств изображения можно выбрать предпочтительный формат (GIF или JPEG), если исходный формат рисунка иной. При сохранении документа программа автоматически выполнит преобразование изображения и его сохранение.

Другие элементы, которые можно разместить на странице, - это:

• горизонтальная линейка (Вставка ® Горизонтальная линия);

• видеозапись (Вставка ® Рисунок ® Видеозапись);

• фоновый рисунок (Файл ® Свойства ® Форматирование ® Фон)

• фоновое звуковое сопровождение (Файл ® Свойства ® Общие ® Фоновый звук);

• встроенный фрейм (Вставка ® Встроенная рамка);

• нестандартные компоненты (Вставка ® Веб-компонент). Эти компоненты используют нестандартную разметку и способны работать не на всех серверах.

Иногда требуется вмешаться в процесс автоматического формирования Web-страницы и внести изменения непосредственно в генерируемый код HTML. Для этого надо щелкнуть на кнопке HTML-код в нижней части окна. При этом отображается не примерный вид документа, а сгенерированный программой FrontPage код HTML (рис. 10.10). Цветная маркировка позволяет немедленно увидеть ключевые слова тегов и названия атрибутов. Этот код можно редактировать вручную, однако в этой случае ответственность за правильность кода переносится с программы FrontPage на создателя страницы.

Рис. 10.10. Просмотр кода HTML в редакторе FrontPage

Редактор FrontPage также позволяет просмотреть Web-страницу в таком виде, в каком ее представит браузер (в режиме редактирования в тексте страницы имеется дополнительная маркировка, облегчающая работу). Для этого надо щелкнуть на кнопке . Отображение страницы осуществляется, исходя из возможностей браузера Internet Explorer.

Для упрощения и автоматизации создания Web-страниц редактор FrontPage позволяет использовать мастера и шаблоны. Для этого надо создать новый документ командой Файл ® Создать ® Страница или Web-узел - на экране появится Область задач в режиме Создание веб-страницы или узла. Щелкните на ссылке Шаблоны страниц в разделе Создание с помощью шаблона - откроется диалоговое окно Шаблоны страниц (рис. 10.11).

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

Рис. 10.11. Шаблоны страниц редактора FrontPage

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