5.3.4. Автоматизация разработкиWeb-документов. РедакторыHtml

Мы знаем, что язык HTMLпозволяет создавать Web-документы вручную, при помощи обычного текстового редактора. Хотя освоение языкаHTML— это не столь уж и трудное дело, сама необходимость что-то изучать многими воспринимается как досадная неприятность. А нельзя ли свести процесс форматирования Web-документов к тому, как мы форматируем обычные документы в текстовых процессорах? В принципе, это возможно, но из-за особенностейWorldWideWebне всегда удобно.

Форматирование документов в современных текстовых процессорах происходит по принципу соответствия экранного образа документа его реальному содержанию, получаемому при печати. Это известный принцип WYSIWYG.Но вInternetникто не может сказать заранее, на каком компьютере и средствами какой операционной системы будет воспроизводиться документ. Автор видит на экране одно изображение, а читатель может увидеть нечто совсем другое. То есть принцип соответствия нарушается. Поэтому использование обычных текстовых процессоров для создания Web-документов считается нецелесообразным.

Вместе с тем, при создании Web-документов на языке HTMLвсе-таки многое можно автоматизировать, например расстановку закрывающих тегов, хотя, конечно, не только это. Самым мощным средством автоматического создания и публикации Web-документов ныне считается пакетMicrosoftFrontPage. Он включает в себя все необходимое для работы с Web-узлом: программуFrontPageExplorerдля навигации по Web-узлу; мощный редактор Web-страницFrontPageEditor; средства для работы с графикой; средства публикации документов и прочее.

Но чтобы приступить к самостоятельной разработке простейших Web-страниц, нет необходимости иметь в своем распоряжении и изучать весь пакет FrontPage. Упрощенная версия редактораFrontPageEditorвходит в состав системыWindows98 в качестве стандартного приложения под названиемFrontPageExpress.

Редактор FrontPage Express

Редактор FrontPageExpressпредставляет собой простое средство для создания Web-страниц без использования языкаHTML. Возможности языкаHTMLзаложены в редакторFrontPageExpressпрактически полностью. Освоение этого редактора занимает много меньше времени, чем изучение языкаHTML, хотя за это придется расплачиваться некоторым ограничением возможностей.

Основные отличия FrontPageExpressот полной версииFrontPageEditorзаключаются только в том, что теряется возможность работы с Web-узлом как с единым целым, то естьFrontPageExpressслужит не для автоматизации разработки Web-узлов, а только для создания Web-страниц. Из возможностей языкаHTMLв упрощенной версии редактора отсутствуют команды для создания фреймов.

Все остальные возможности редактирования отдельной Web-страницы сохраняются. Предоставляются также мастераишаблоныиз числа имеющихся в полной версии. В целом, редакторFrontPageExpressпредоставляет все необходимое для создания отдельной Web-страницы любой сложности.

Окно программы FrontPage Express

Программа FrontPageExpressвыпущена компаниейMicrosoftи выполнена в едином стиле продуктов, входящих в пакетMicrosoftOffice.Если на компьютере установлен пакетInternetExplorer4.0 или операционная системаWindows98, запустить эту программу можно через Главное меню — Пуск>Программы>InternetExplorer> FrontPageExpress.

Человеку, работавшему с текстовым процессором Word(или хотя быWordPad), окно программыFrontPageExpressсразу же покажется знакомым.

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

Дополнительная панель инструментов в программе FrontPageExpressсодержитполя формы. Линейка в этой программе не используется, так как точноепозиционированиеэлементов страницы средствами языкаHTMLневозможно.

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

Особенностью редактора FrontPageExpressявляется отсутствие горизонтальной полосы прокрутки, независимо от ширины окна документа. Так как размер окна, в котором документ будет просматриваться конечным пользователем, заранее неизвестен, изменение ширины окна рассматривается как средство проверки внешнего вида документа при иной ширине окна броузера. Документ при этом переформатируется так, как это сделал бы броузер. Это позволяет определить, как будет выглядеть документ при разном размере экрана компьютера.

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

Форматирование документа HTML

Форматирование документа HTMLв редактореFrontPageExpressосуществляется в основном с помощью средств панели инструментов Форматирование. Эта панель похожа на аналогичную панель программыWord, но следует помнить, что реальное редактирование осуществляется путем вставки в текст теговHTML, количество которых весьма ограничено. Например, список доступных стилей на этой панели содержит только стандартные «стили», используемые в языкеHTML, и не может быть изменен.

При изменении вида, размера и цвета шрифта в документ вставляется соответствующий тег <FONT>. Курсив и полужирный шрифт задается (как и рекомендуется) тегами выделения и сильного выделения (<ЕМ> и <STRONG>).

Выравнивание текста задается с помощью атрибутов в теге абзаца <Р>. Программа FrontPageExpressпозволяет выравнивать текст по левому или правому краю, а также по центру. Выравнивание по ширине пока не стало общепринятым стандартом (хотя оно и включено в последнюю версию языкаHTML).

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

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

Некоторые средства управления шрифтами не вынесены на панель инструментов. Для их применения надо дать команду Формат > Шрифт. В открывшемся диалоговом окне Шрифт можно изменить параметры шрифта. Вкладка «Специальные стили» позволяет оформлять элементы фразы, а также предоставляет некоторые другие возможности, например оформление верхних и нижних индексов.

Введение гиперссылок

Одним из наиболее существенных элементов WorldWideWebявляютсягипертекстовые ссылкина другие страницы. Создание таких ссылок с помощью программыFrontPageExpressне составляет особого труда. При этом можно создавать как внутренние, так и внешние гиперссылки, в том числе и на документы, которые еще не существуют в момент создания ссылки.

Для создания гиперссылки надо выделить фрагмент текста, который будет использоваться как ссылка, и щелкнуть на кнопке «Создать или изменить ссылку», находящейся на стандартной панели инструментов, или дать команду Вставка >Гиперссылка. При этом открывается диалоговое окно Создать гиперссылку (или Изменить гиперссылку). Это окно содержит три вкладки, предназначенные для создания разных видов ссылок.

Если необходимо создать внешнюю ссылку на Web-страницу, расположенную где-то в Internet, выбирают вкладкуWWW. В поле «Тип гиперссылки» указываютпротокол,используемый для обращения к ссылке. В поле Адрес (URL) вводят полныйадрес URLдля документа, на который осуществляется ссылка.

Если необходимо сослаться на документ HTML, одновременно редактируемый с помощью программыFrontPageExpress, следует выбрать вкладку Открыть страницы. Документ, на который надо дать ссылку, в этом случае выбирают в списке Открыть страницы. Так как этот документ является локальным, можно сослаться на место внутри документа, помеченноеякорем ссылки, выбрав значение из списка Закладка.

Вкладка Новая страница позволяет создать ссылку на документ HTML, который еще не существует. Для этого надо задать название новой страницы (оно будет помещено в тег <TITLE>) и имя файла, в котором будет храниться новый документ. Созданный документ будет немедленно открыт для редактирования в новом окне.

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

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

Создание таблиц и форм

Более сложные элементы Web-страниц не удается создать методом простого форматирования текстового документа. В частности, в программе FrontPageExpressесть специальные средства для созданиятаблициформ.

Для создания таблиц используют кнопку «Вставить таблицу» или команду Таблица >Вставить таблицу. При использовании кнопки число столбцов и строк выбирают в открывшейся палитре, которую можно «растянуть» за пределы начального размера (5х4). При использовании команды число строк и столбцов задают в диалоговом окне Добавить таблицу.

Дальнейшая работа с таблицей аналогична работе с таблицами в программе Word. Когда курсор находится в одной из ячеек, доступны пункты меню «Таблица», используемые для изменения внешнего вида таблицы в целом. Вводить, редактировать и форматировать данные в ячейках можно независимо друг от друга.

Редактор FrontPageExpressпозволяет создаватьформы.Форма — это особый вид документаHTML, который позволяет получать информацию от читателя. Эта информация может доставляться автору по электронной почте или с помощью специальных программ, работающих на Web-серверах.

Основное содержание формы составляют поля формы.ЯзыкHTMLподдерживает шесть видов полей формы:флажки, переключатели, текстовые поля, текстовые области, раскрывающиеся спискиикнопки.Одна из кнопок формы должна присутствовать обязательно — это кнопкаотправки формы.

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

Изменение свойств тегов HTML

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

Предположим, что в документ была введена горизонтальная разделительная линейка. Для этого используют команду Вставка > Горизонтальная линия. В языкеHTMLгоризонтальную линейку создает одиночный тег <HR>, который может содержать атрибуты, задающие длину, толщину и внешний вид линейки.

Чтобы изменить свойства объекта HTML(в данном случае линейки), надо установить на него курсор (или выделить объект) и дать команду Правка>Свойства... В данном случае команда имеет вид Свойства горизонтальной линии. Эту же команду можно подать с помощью контекстного меню или с помощью клавиатурной комбинацииALT+ENTER.

По такой команде открывается диалоговое окно свойств, содержащее параметры, относящиеся к данному элементу страницы. Вид и состав этого диалогового окна определяется тем, какой именно элемент был выбран. Регулируемые параметры соответствуют доступным атрибутам тега, задающего данный элемент.

После настройки параметров с помощью этого диалогового окна внешний вид элемента на экране изменяется в соответствии с произведенными настройками.

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

Если требуется изменить свойства элемента более высокого уровня, следует воспользоваться контекстным меню. В нем перечисляются все «открытые» на данный момент теги HTML. Выбрав соответствующий пункт, можно изменить свойства нужного тега.

Использование готовых материалов

Создание Web-страницы редко начинается с «чистого листа». Чаще всего заранее подготавливают тексты, документы, рисунки, звуковые файлы, видеозаписи и прочие объекты, которые надо разместить на Web-странице. Но, например, чтобы использовать документ Word, его надо преобразовать в форматHTML. РедакторFrontPageExpressрешает эту задачу автоматически.

Чтобы поместить на Web-страницу готовый документ, надо дать команду Вставка > Файл. В диалоговом окне «Выбрать файл» можно указать файл, вставляемый на Web-страницу.

Список «Тип файлов» показывает, что программа FrontPageExpressпозволяет импортировать файлыHTML, текстовые файлы, файлы, созданные в различных текстовых процессорах (напримерWord), и электронные таблицыExcel.Все эти файлы преобразуются в форматHTMLавтоматически.

Аналогично встраивают изображения. Из нескольких десятков видов существующих графических форматов в Internetприменяют лишь два. ФорматGIFудобен для компьютерной графики и рисунков, содержащих области сплошного цвета. ФорматJPEGиспользуют для хранения фотографий и рисунков, содержащих плавные переходы цветов.

Команда Вставка >Изображение или кнопка Вставить изображение открывают диалоговое окно Изображение.

Щелкнув на кнопке Обзор и открыв список Тип файлов, можно получить список форматов файлов, которые редактор FrontPageExpressможет автоматически преобразовать в форматыGIFили JPEG. При сохранении документа программа предложит также сохранить и преобразованный файл.

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

Наличие фонового звука никак не отображается на странице Чтобы убедиться в его наличии и, возможно, изменить параметры воспроизведения, надо дать команду Файл >Свойства страницы.

Правка кода HTML

Хотя для работы с редактором FrontPageExpressи не требуется знание языкаHTML, возможность внесения изменений непосредственно в код Web-страницы полезна для ручной правки документа или для реализации идей, которые оказываются программе не под силу.

Если непосредственно в текст документа требуется вручную ввести теги HTML, можно воспользоваться командой Вставка> РазметкаHTML.В диалоговом окне РазметкаHTMLможно ввести произвольный фрагмент кода, который может содержать как теги, так и текст. Текст, введенный таким образом, не проверяется на правильность программойFrontPageExpressи вставляется в документ в неизменном виде.

Наличие в документе встроенного пользователем кода HTMLотображается на экране в виде небольшого желтого значка. Для проверки правильности этого кода (и всей страницы в целом) документ необходимо сохранить и открыть для просмотра в броузере.

Код HTML, автоматически генерируемый программойFrontPageExpress, не всегда оптимален и может требовать ручной доработки. Чтобы произвести такую доработку, не выходя из программы, следует дать команду Вид>HTML.По этой команде код документа отображается в диалоговом окне Просмотр или правкаHTML.Здесь он доступен для редактирования.

Для наглядности различные элементы кода выделяются разным цветом. Теги изображаются фиолетовым цветом, ключевые слова атрибутов — красным, значения атрибутов — синим. Это диалоговое окно можно рассматривать как текстовый редактор, встроенный в программу FrontPageExpressи позволяющий формировать документыHTMLвручную.

Изменения вносятся в документ щелчком на кнопке ОК. При этом надо иметь в виду, что FrontPageExpressрассматривает возникающий документ как «свое творение» и может «подправить» отредактированный текст, исправляя то, что считает ошибкой. Такие правки не всегда удачны.

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

Мастера и шаблоны

Человеку, который никогда ранее не занимался созданием документов в формате HTML, может пригодиться любая помощь. Он может даже не представлять себе, с чего следует начать. Для таких случаев редакторFrontPageExpressпредоставляет в распоряжение пользователя набор мастеров и шаблонов. По команде Файл> Создать на экране появляется диалоговое окно Новая страница, позволяющее выбрать мастера или шаблон для автоматического создания документаHTML.

Мастера(Мастер персональных основных страниц и Мастер форм) автоматизируют создание документа, задавая вопросы и используя ответы пользователя для формирования документа. Каждый этап работы мастера состоит в ответе на вопросы, определяющие содержание Web-страницы. Переход к следующему этапу осуществляется щелчком на кнопке Далее. После ввода всей необходимой информации следует щелкнуть на кнопке Готово. Документ формируется автоматически в соответствии с полученными ответами.

Разумеется, мастера создают только структуру документа в соответствии с требованиями пользователя. Как правило, такой документ содержит лишь заголовки разделов, а сами разделы приходится все равно заполнять вручную. В текст подготовленного документа мастер включит комментарии, которые не отображаются при просмотре в броузере и содержат советы по дальнейшей самостоятельной работе над Web-страницей.

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

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

Публикация Web-страницы

С помощью редактора FrontPageExpressможно за считанные минуты создать простейшую Web-страницу, особенно если воспользоваться готовым шаблоном. Когда такая страница создана, встает вопрос о еепубликации.

Публикацию выполняют размещением документа (вместе со всеми сопроводительными файлами, например рисунками) в одном из каталогов на жестком диске Web-сервера, входящего в структуру Internet. Остается только решить три вопроса.

- Где найти Web-сервер, постоянно подключенный к Internet?

- Как разместить на нем созданные файлы?

- Как оплачивать данные услуги?

Web-сервер долго искать не надо, поскольку он и так уже есть у каждого, кто работает в Internet. Большинство пользователей выходят вInternetпутем подключения к серверу своегопоставщика услуг Internet (сервис-провайдера).К нему и надо обратиться с просьбой о предоставлении места на жестком диске для публикации Web-страницы.

Поставщик услуг Internetзнает, как правильно разместить ваши файлы на сервере. Вопрос сводится только к тому, как эти данные передать. Можно явиться лично и передать гибкий диск с комплектом файлов. Можно отправить данные через сеть, но для этого надо уметь работать с протоколомFTP,с помощью которого в сети пересылаются файлы. Необходимую консультацию и программное обеспечение должен предоставить тот же поставщик услуг. Можно подумать о приобретении и освоении полного пакетаFrontPage, в составе которого есть удобные средства для публикации Web-документов.

Оплата услуг по размещению Web-узлов и Web-страниц происходит на договорных условиях. Стоимость зависит от объема материала и дополнительных услуг. В настоящее время принято размещать отдельные Web-страницы клиентов бесплатно, но ограничивать их размер (например, не более 100 Кбайт). С этого и принято начинать издательскую деятельность во Всемирной Сети.