Урок 7
Microsoft FrontPage



Среди начинающих пользователей Интернета бытует мнение, что на практике при создании собственного web-сайта нет необходимости изучать сложные структуры языка разметки гипертекста или его расширений, поскольку помимо «классического» метода подготовки html-документов вручную существует и другой достаточно популярный способ — применение web-редакторов, автоматически генерирующих большую часть необходимого пользователю кода. Можно смело сказать, что это весьма распространенное заблуждение несет в себе малую толику рационального зерна, по крайней мере, в том, что визуальныер едакторы HTML действительно являются весьма удобным средством разработки ресурсов Интернета.

Существует великое множество HTML-редакторов, построенных по принципу WYSIWYG, что расшифровывается как «What You See Is What You Get» (To, что вы видите, вы и получаете). В рамках этого урока я остановлюсь на одном из самых распространенных и популярных из них — на программе Microsoft FrontPage, а именно ее реализации, названной разработчиками FrontPage Express. Это не означает, что другие пакеты плохи, сложны в освоении или неудобны, отнюдь. Дело лишь в том, что FrontPage Express входит в комплект поставки Microsoft Windows 98 и 2000, а также в состав дистрибутивов Microsoft Office 2000 и Microsoft Internet Explorer 5.0. Если вы пользуетесь этими версиями операционных систем или одним из указанных программных продуктов, то автоматически являетесь владельцем копии FrontPage Express и ни малейших проблем с получением и установкой необходимого программного обеспечения у вас уже не возникнет. Освоив базовые принципы работы с FrontPage, вы без труда сможете изучить любой другой визуальный html-редактор, например, Adobe Page Mill, Hot Dog или Homesite, выбрав из них тот, который наиболее соответствует вашим вкусам, потребностям и задачам. Безусловно, я кратко коснусь также известных версий этой программы FrontPage98 и FrontPage2000,поясню их основные достоинства и недостатки.

В отношении Microsoft FrontPage существует расхожее мнение, будто применительно к данному редактору аббревиатуру WYSIWYG можно, не покривив душой, расшифровать как «Не важно, что вы видите, все равно ничего не получите». Уверяю вас, несмотря на то, что, как и любой другой продукт Microsoft, эта программа обладает весьма своенравным «характером», она все же вполне функциональна и работоспособна. Существует множество сайтов, вы полненных с применением Microsoft FrontPage, которые можно назвать вполне профессиональными. К тому же мы все равно не будем использовать данную программу для разработки проекта «от и до»: как уже упоминалось в предыдущих уроках, оптимальный метод работы с визуальными редакторами в процессе подготовки сайта — создание с их помощью сложных таблиц и шаблонов, так сказать, «скелетов» будущих страниц, с последующим редактированием кода вручную. Поэтому в данном уроке мы будем рассматривать FrontPage с точки зрения не столько элементов его интерфейса, сколько реальных приемов, которые можно выполнить с его помощью.

Поддерживая устоявшуюся традицию, я мог бы с пафосом сказать, что FrontPage является наиболее мощным и удобным из всех современных HTML-редакторов, доступных для использования начинающим web-мастером. Разумеется, я не буду делать этого. Хотя бы потому, что Microsoft не платит мне денег за рекламу. Главное достоинство этого пакета по сравнению с другими аналогичными продуктами именно для начинающих web-дизайнеров состоит в том, что он имеет стандартный для программ Microsoft Office интерфейс со стандартным же расположением элементов управления, а потому пользователям, знакомым, например, с Microsoft Word, не придется переучиваться, чтобы освоить данный редактор «с нуля». Опять же, поскольку книга, которую вы держите в руках, рассчитана, прежде всего, на новичков, описывать в ней полуавтоматический редактор с аскетичным, но вполне функциональным интерфейсом, подразумевающий наличие у пользователя хороших базовых навыков html-программиро-вания, было бы несправедливо по отношению к читателю.

Не лишен FrontPage и букета серьезных недостатков, среди которых следует прежде всего/отметить его уникальную способность генерировать значительное количество так называемого паразитного кода, то есть лишних тегов HTML, занимающих в листинге документа место, но не несущих какой-либо смысловой нагрузки. Надо сказать, что этим грешат многие визуальные html-редакторы,однако чемпионом по написанию ненужных тегов безусловно является Microsoft FrontPage, лидируя с большим отрывом. Следует помнить, что в большинстве случаев ответственность за обилие паразитного кода в листинге html-документов несет сам web-мастер, поскольку девяносто процентов неисполняемых директив появляется в коде web-страниц из-за множества исправлений, которые он делает в основном окне редактора. После создания, уничтожения и повторного создания какого-либо визуального объекта на web-странице FrontPageне «затирает» за собой остатки от предыдущего, уже удаленного элемента, в результате чего количество таких «хвостов» растет в арифметической прогрессии, порой превышая все разумные рамки. Из этого факта следуют три простых вывода. Во-первых, согласно выработанному алгоритму, переходите к компоновке страницы не раньше, чем подготовите ее эскиз на бумаге, представив себе прозрачную таблицу, в которую впоследствии «уложится» верстка. Во-вторых, прежде чем выполнить какое-либо действие в Microsoft FrontPage, подумайте, следует ли его выполнять. И наконец, в-третьих, удалив или заменив какой-либо объект в главном окне редактора, перейдите в окно текстового редактирования проекта и подправьте код вручную. Генерацию большей части паразитных тегов, создаваемых программой без непосредственной помощи пользователя, можно, немного повозившись, отключить в настройках FrontPage. Все остальные ненужные команды без труда удаляются последующим редактированием документа в лучшем на сегодня html-редакторе — программе Microsoft Notepad.

Итак, переходим к делу. Но прежде, чем мы обратимся непосредственно к правилам разработки элементов web-страниц в программе Microsoft FrontPage, поговорим об установке пакета.

  Установка FrontPage Express

Если вы используете Microsoft Windows 98, FrontPage Express является обычно компонентом группы программ Internet Explorer или Средства Интернета, вызываемых через раздел Программы меню Пуск. Если этот компонент не установлен в вашей системе, для его установки необходимо вставить дистрибутивный диск Windows 98 в привод CD-ROM и выполнить следующую последовательность команд: Пуск > Настройка > Панель управления. В открывшемся окне Панели управления необходимо выбрать ярлык Установка и удаление программ (Add/Remove Programs) и в нем открыть вкладку Установка Windows (Windows Setup). Здесь следует выделить мышью пункт Средства Интернета и нажать на кнопку Состав (рис. 7.1).

Рис. 7.1. Установка FrontPage Express с дистрибутивного диска Windows 98

Выделив в окне Средства Интернета пункт Microsoft FrontPage Express, нажмите кнопку ОК. Когда это окно автоматически закроется, в окне Свойства: Установка и удаление программ нажмите кнопку Применить. FrontPage Express будет автоматически установлен на ваш компьютер.

Если компьютер работает не под управлением Windows 98, но вы используете Microsoft Internet Explorer 5.0, для установки FrontPage Express вам потребуется запустить процесс установки Internet Explorer в режиме Добавить/удалить компоненты. Согласившись с условиями лицензионного соглашения и выбрав в перечне компонентов Microsoft FrontPage Express, завершите установку в обычном режиме (рис. 7.2).

I

Рис. 7.2. Установка FrontPage Express с дистрибутивного диска Internet Explorer 5.0

И наконец, если вы пользуетесь офисным пакетом Microsoft Office 2000, установить Microsoft FrontPage можно, повторно запустив программу установки с дистрибутивного диска Microsoft Office и выбрав в списке предлагаемых компонентов пункт Редактор HTML-файлов, содержащийся во вкладке Средства Office(рис. 7.3).

Рис. 7.3. Установка Microsoft FrontPage с дистрибутивного диска Microsoft Office 2000

После нажатия на кнопку Обновить мастер установки Microsoft Office 2000 установит FrontPage на ваш компьютер.

  Приступая к работе

Интерфейс программы Microsoft FrontPage Express выглядит так, как показано на рис. 7.4.

Рис. 7.4. Интерфейс программы FrontPage Express

Уже в процессе загрузки редактор FrontPage Express автоматически сгенерирует для вас код пустой web-страницы, включающий элементы <НЕАD> и <BODY>, в чем вы можете убедиться, открыв окно Просмотр или правка HTML (рис. 7.5), которое вызывается на экран при выборе пункта HTML... системного меню Вид. Данное окно играет роль своеобразного «редактора в редакторе», позволяя вам подправлять создаваемый программой FrontPage Express код HTML вручную. По большому счету, окно Просмотр или правка HTML напоминает упрощенную версию текстового редактора Notepad с одним существенным отличием: если в нижней панели окна установлен флажок Показывать цветовую кодировку, редактор станет отображать теги языка разметки гипертекста фиолетовым цветом, их атрибуты — красным, значения атрибутов — синим, а вводимый пользователем текст — черным, что значительно облегчает процесс правки html-кода. Это окно вам предстоит использовать всякий раз, когда будет возникать необходимость внести в листинг редактируемого документа какие-либо изменения.

Рис. 7.5. Окно Просмотр или правка HTML

Прежде чем приступать непосредственно к созданию web-страницы, следует установить начальные значения параметров документа. Для этого необходимо вызвать на экран соответствующее окно (рис. 7.6), воспользовавшись пунктом меню Файл > Свойства страницы или щелкнув в любом месте рабочего окна FrontPage Express правой кнопкой мыши и выбрав пункт с аналогичным названием в появившемся меню.

Рис. 7.6. Окно настроек свойств страницы

Вкладка Общие диалогового окна Свойства страницы содержит следующие настройки, которые пользователь по желанию может изменить. Пункт Папка указывает на директорию, в которой сохранен документ. В поле Заголовок следует ввести название страницы, записываемое программой между тегами <TITLE> и</TITLE> кода HTML web-страницы. В поле Базовое место можно указать URL вашего сайта. В пункте Кадр назначения по умолчанию можно указать имя фрейма,в котором должен загружаться документ. Диалоговое меню Направление чтения документа позволяет вам установить направление движения курсора при вводе текстов, чуть ниже можно задать фоновый звук в формате MIDI, который будет воспроизводиться всякий раз при открытии документа в броузере, отрегулировав его настройки (можно установить количество повторов или заставить звуковой файл воспроизводиться непрерывно). Наиболее важным в окне настроек свойств документа является пункт определения кодировки документа: в меню для сохранения и Для отображения рекомендуется указать пункт Кириллица для кодировки Windows 1251 или Кириллица KOI8-R для кодировки KOI.

Вкладка Фон определяет настройку фонового цвета документа, текста и гиперссылок, эти цвета будут автоматически указаны программой в теге <BODY>. Здесь же можно указать название и адрес размещения фонового рисунка для вашей web-страницы.

Вкладка Поля позволяет вам установить верхний и левый отступы от границ рабочего окна броузера, отображаемые при открытии документа. Границы отсчитываются в пикселах. И наконец, вкладка Специальный содержит список содержащихся в документе МЕТА-определителей, поддающийся настройке пользователем.

Установив исходные значения параметров страницы, можно переходить непосредственно к подготовке содержимого документа.

  Размещение текста

Текст, помещаемый в документ HTML для отображения в клиентском броузере, набирается в рабочем окне FrontPage Express как в обычном текстовом редакторе. Стиль вводимого текста (обычный стиль, стили заголовка, определяемого тегами <Н1> — <Н7>, стили списков или определений) настраивается в меню Изменение стиля, расположенном в панели управления форматированием текста редактора FrontPage Express. Здесь же можно задать название используемого при наборе шрифта (рекомендуется использовать шрифт, установленный по умолчанию), определить позиционирование текста нажатием кнопок Выравнивание по левому краю, Выравнивание по правому краю или Выравнивание по центру, аналогично тому, как это делается в редакторе Microsoft Word, отрегулировать размер шрифта с использованием кнопок Увеличить размер текста или Уменьшить размер текста и, наконец, задать для выделенного участка текста жирное, наклонное или подчеркнутое написание. Нажатие на кнопки управления величиной шрифта уменьшает или увеличивает размер отображаемых символов выделенного участка текста на один пункт. Следует помнить, что Microsoft FrontPage Express версии 2.0 не поддерживает в составе интерфейса форматирование текста по всей ширине экрана с использованием директивы ALIGN="JUSTIFY", поэтому такое позиционирование можно задать, только записав соответствующий тег вручную в окне Просмотр или правка HTML. Изменить цвет символов, которыми отображается текст в окне броузера, можно, выделив мышью какой-либо отрывок текста, нажав на кнопку Цвет символов и выбрав нужный цвет в предлагаемой программой цветовой палитре.

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

СОВЕТ Рекомендуется импортировать текст в html-документ из буфера обмена, предварительно набрав его в редакторе Notepad (Блокнот). При переносе текстов на web-страницу из других текстовых редакторов, например из Microsoft Word, иногда происходит нарушение форматирования текстовых блоков.

  Списки и разделители

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

Разрыв текста можно создать, выбрав пункт меню Вставка > Разрыв, указав в появившемся диалоговом окне параметры переноса строк после разрыва абзаца. Горизонтальная разделительная линия вставляется в web-страницу с помощью пункта меню Вставка > Горизонтальная линия. Параметры отображения разделительной линии, такие как цвет, высота, ширина, позиционирование, можно изменить, выделив линию нажатием левой кнопки мыши и выбрав в меню, появившемся по нажатии правой кнопки, пункт Свойства горизонтальной линии (рис. 7.7).Окно настройки свойств выделенной мышью разделительной линии вызывается также нажатием сочетания клавиш Alt+Enter.

Рис. 7.7. Окно настройки свойств разделительной линии

  Размещение иллюстраций

Графические изображения включаются в web-страницу нажатием стандартной для приложений MS Office кнопки Добавить рисунок, расположенной в инструментальной панели FrontPage Express, либо с помощью пункта меню Вставка >Изображение. Параметры отображения картинки в броузере можно изменить, выделив изображение нажатием левой кнопки мыши и выбрав нужный пункт выпадающего по нажатии правой кнопки меню Свойства изображения, либо нажатием на клавиши Alt+Enter, если рисунок уже выделен. В появившемся диалоговом окне (рис. 7.8) можно установить практически полный спектр возможных настроек отображения иллюстрации.

Рис. 7.8. Окно настройки свойств изображения

Вкладка Общие диалогового окна Свойства изображения позволяет указать адрес расположения графического файла, его тип и параметры (чересстроность и прозрачность для GIF, качество и разрешение для JPEG), ввести в поле Текст альтернативный текст, отображающийся на web-странице в случае, если клиентский броузер не поддерживает загрузку рисунков, или задать имя фрейма, в котором должна отображаться картинка. Вкладка Видеозапись управляет настройками видео ролика, который можно интегрировать в html-документ вместо картинки, а вкладка Внешний вид открывает возможность установить толщину рамки изображения, если оно предназначено для организации гиперссылки, указать позиционирование картинки на странице, ширину отступов от рисункав пикселах и геометрические размеры изображения.

ПРИМЕЧАНИЕ Если вы планируете использовать изображение, интегрированное в html-документ, в качестве гиперссылки, рекомендуется установить значение толщины рамки картинки (вкладка Внешний вид диалогового окна Свойства изображения) ровной нулю.

  Гиперссылки

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

Ссылку на новую страницу можно указать, открыв в окне, появившемся по нажатии кнопки Создать или изменить ссылку, вкладку Новая страница, где в поле Название страницы следует ввести значение тега <TITLE>, в поле URL-адрес страницы — путь к директории на диске, где будет размещаться создаваемый редактором файл, а в поле Кадр назначения — параметр атрибута TARGET текущей гиперссылки. Как только все значения будут указаны, необходимо нажать кнопку ОК для запуска меню, определяющего тип создаваемого вами html-документа (рис. 7.9).

Рис. 7.9. Меню создания новой страницы

Данное меню содержит шесть пунктов. При выборе пункта Нормальная страница FrontPage Express автоматически создает чистую страницу, не содержащую каких-либо компонентов. Пункт Мастер персональных основных страниц поможет вам настроить параметры создаваемого html-документа в диалоговом режиме(рис. 7.10). Пункт Мастер форм предназначен для облегчения процесса создания web-страниц, содержащих интерактивные формы. Пункт Новая страница папки для Web-представления позволит вам создать документ, который может быть использован как в качестве шаблона для проектирования других документов вашего сайта, так и для оформления системных папок в случае, если ваша операционная система поддерживает функцию web-интеграции. И наконец, пункты Форма обозрения и Форма подтверждения предназначены для организации web-страниц, включающих в себя дополнительные компоненты интерактивных форм, например форму опроса посетителей вашего ресурса или форму, посредством которой пользователи смогут подтвердить введенные ранее данные.

Рис. 7.10. Мастер создания новой домашней странички

  Таблицы

Для того чтобы создать новую таблицу в редакторе Microsoft FrontPage Express, необходимо воспользоваться командой Вставить таблицу системного меню Таблица либо нажать одноименную кнопку, расположенную на стандартной панели инструментов (она аналогична соответствующей кнопке текстового редактора Microsoft Word). В результате на экране появится диалоговое окно, которое позволит вам установить параметры создаваемой таблицы (рис. 7.11).

Рис. 7.11. Диалоговое окно Добавить таблицу

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

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

СОВЕТ Выделить несколько строк таблицы либо снять выделение с какой-нибудь одной строки можно щелчком на них левой кнопкой мыши, удерживая при этом клавишу Shift. Отдельные ячейки выделяются одновременным щелчком левой кнопкой мыши с нажатием клавиши Ctrl.

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

Рис. 7.12. Окно настройки параметров текущей таблицы

С использованием этого окна можно не только изменить все заданные первоначально значения, такие как размер рамки или экранная ширина таблицы, но и указать фоновое изображение или фоновый цвет, которые будут «подложены» под таблицу, а также установить цвета рамки. Аналогичные параметры можно изменить для каждой отдельно взятой ячейки, отметив ее курсором мыши и выполнив последовательность команд Таблица > Свойства ячейки.

СОВЕТ Если вы хотите сделать границы созданной таблицы невидимыми, установите нулевое значение параметра Размер рамки в диалоговом окне Свойства таблицы системного меню Таблица.

  Формы

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

Рис. 7.13. Окно настроек свойств формы

Рис. 7.14. Окно установок обработчика форм

ПРИМЕЧАНИЕ Следует учитывать, что форма, созданная вами с использованием размещенного на удаленном сервере сценария CGI, не будет работать на локальном компьютере. Настройку и окончательную отладку формы вам придется осуществлять непосредственно на сервере в режиме on-line, что может занять чрезвычайно много времени.

Завершая тему создания форм средствами редактора Microsoft FrontPage Express, хочется дать несколько общих рекомендаций, которые позволят вам подготовить формы более грамотно, сделать их простыми в заполнении и популярными у посетителей вашего сайта.

  Прочие элементы FrontPage

Помимо перечисленных Microsoft FrontPage Express позволяет оперировать с другими элементами документов HTML. Например, вы можете включить в html-код произвольный комментарий, воспользовавшись пунктом меню Вставка >Примечание. Можно интегрировать в web-страницу элемент управления ActiveX, апплет Java, анимацию PowerPoint или какой-либо иной plug-in, вызвав одну из опций меню Вставка > Другие составляющие. Для того чтобы добавить в html-документ сценарий VBScript или Java Script, необходимо воспользоваться пунктом меню Вставка > Сценарий, набрав в появившемся на экране окне код создаваемого вами скрипта.

Если вы хотите разнообразить свою страницу не функциональным, а чисто декоративным объектом, можете включить в заголовок html-документа бегущую строку, описание которой FrontPage Express автоматически превратит в код Java Script, обрабатываемый интерпретатором броузера одновременно с кодом HTML, либо применит для ее представления теги HTML 4.O. Для этого вам необходимо использовать пункт меню Вставка > Бегущая строка, при выборе которого на экране появится окно настройки свойств бегущей строки (рис. 7.15).

Рис. 7.15. Окно настройки свойств бегущей строки

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

ПРИМЕЧАНИЕ Учтите, что в некоторых случаях бегущая строка корректно отображается только в броузере Microsoft Internet Explorer. Программа Netscape Navigator может вывести ее на экран с ошибками, например, в виде статической текстовой строки, проигнорировав разметку анимации.

Весьма интересны с точки зрения компоновки html-документа так называемые компоненты WebBot, интеграция которых в web-страницу предусмотрена редактором FrontPage Express посредством пункта меню Вставка > КомпонентWebBot (рис. 7.16).

Рие. 7.16. Окно вставки компонентов WebBot

Функция Включить позволяет вставить в web-страницу другой размещенный в Интернете html-документ без использования фреймов, функция Найти поможет вам создать форму для организации локальной поисковой системы по вашему

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

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

Как вы можете видеть, программа Microsoft FrontPage Express является весьма простым и удобным инструментом для создания шаблонов web-страниц, код которых впоследствии можно оптимизировать вручную в любом текстовом редакторе. Эта несложная программа позволит вам избежать утомительной процедуры написания длинных программных кодов разметки гипертекста, особенно часто повторяющихся его фрагментов, появляющихся, например, при подготовке таблиц. Да и визуальное представление интегрируемых вами в html-документ компонентов значительно упрощает компоновку страницы, поскольку, создавая ее шаблон, вы можете видеть на экране монитора внешний вид всех объектов, из которых состоит разрабатываемый вами ресурс.

Освоив FrontPage Express, вы без труда перейдете к другим, более сложным версиям пакета Microsoft FrontPage, речь о которых пойдет чуть ниже, причем для этого вам не придется переучиваться заново или осваивать принципиально новый интерфейс. Все версии Microsoft FrontPage построены по одному и тому же принципу, просто они обладают различным набором функциональных возможностей.

  Microsoft FrontPage 98

Программный комплекс Microsoft FrontPage 98 предназначен не столько для разработки web-страниц, сколько для управления удаленным web-сервером и отладки составляющих сайт документов на локальном компьютере.

Данное приложение включает в свой состав три динамически связанные между собой программы. Первая из них — web-сервер, эмулирующий на локальном компьютере функции полноценного сервера Интернета, что позволяет обращаться к web-страницам, размещенным на вашем винчестере, по протоколу HTTP, то есть так, как если бы они уже были опубликованы во Всемирной сети. Этодает вам ряд существенных преимуществ при отладке разрабатываемых html-документов, поскольку, загружая их с диска с использованием протокола передачи гипертекста, вы можете без труда устранить ошибки в назначенных гиперсвязях или ликвидировать все проблемы, возникающие при отображении в броузере различных активных элементов.

Вторая программа, входящая в комплект поставки FrontPage 98, называется FrontPage Explorer.

Данное приложение позволяет проверить целостность гиперссылок внутри всего проекта, опубликовать сайт в Интернете при помощи встроенного FTP-клиента или отправить на предоставляющий вам web-хостинг сервер только те документы, которые были изменены вами с момента последней публикации. Доступ к разрабатываемому ресурсу открывается в программе FrontPage Explorer только по паролю, поэтому посторонние пользователи компьютера не смогут каким-либо образом изменить содержимое сайта в ваше отсутствие. Еще одним существенным достоинством FrontPage Explorer является то, что он позволяет открывать, редактировать и сохранять документы не только с использованием локального диска, но и непосредственно на удаленном сервере, где размещается ваш сайт.

И наконец, последняя программа, составляющая пакет FrontPage 98, называется FrontPage Editor. Именно в ней осуществляется редактирование html-документов, причем по своему интерфейсу FrontPage Editor практически идентичен уже знакомому вам редактору FrontPage Express.

Существенным отличием FrontPage Editor от FrontPage Express является то, что рабочее окно данного приложения имеет три вкладки, расположенные в левом нижнем углу. Первая из них представляет разрабатываемую web-страницув виде визуальной структурной разметки элементов документа, таких как заголовки, таблицы и кнопки навигации, вторая позволяет редактировать составляющий документ код HTML, третья демонстрирует страницу в режиме предварительного просмотра, причем так, как она будет выглядеть в броузере Microsoft Internet Explorer.

Пакет Microsoft FrontPage 98 содержит более пятидесяти шаблонов графического оформления web-страниц (так называемые «темы» FrontPage), включающих фоновые рисунки, кнопки, разделительные линии, порядка десяти примеров уже готовых сайтов и домашних страничек, содержащих гостевые книги, формы конференций и локальных поисковых систем, более двадцати шаблонов для отдельных html-документов с уже разработанными таблицами компоновки элементов страниц. Кроме того, редактор FrontPage Editor содержит расширенные средства работы с фреймами, огромный спектр всевозможных интерактивных форм различного назначения, широчайший ассортимент компонентов Web-Bot, внушительную коллекцию уже готовых интерактивных элементов, таких как счетчики посещений, выполненные в виде Java-апплетов кнопки, реагирующие на движения указателя мыши, и др. Здесь же имеются средства для работы с серверными базами данных, инструменты для создания программной анимации, например, бегущих строк, движущихся текстов и картинок, перемещающихся заставок, а также полнофункциональный редактор для подготовки различных сценариев на языке Java.

Иными словами, с применением программного пакета Microsoft FrontPage 98вы сможете создать полноценный web-сайт, самостоятельно разработав практически все необходимые вам интерактивные компоненты — доски объявлений, web-конференции и локальные поисковые системы, либо «собрав» их из форм FrontPage Editor, либо воспользовавшись уже готовыми шаблонами. Единственное, о чем вам следует помнить, так это о том, что используемые в MicrosoftFrontPage скрипты, предназначенные для передачи данных от клиентского компьютера серверу и обратно, входят в специальный пакет утилит, называемый серверными расширениями FrontPage. Если администратор предоставляющего вам web-хостинг интернетовского узла установил этот пакет на серверном компьютере, все интерактивные компоненты будут работать на вашем сайте безпроблем. В противном случае процедура вызова соответствующего сценария, встроенная в созданные с помощью FrontPage формы, будет обращаться при попытке передачи данных «в никуда», что, естественно, приведет к появлению ошибки и полной неработоспособности интерактивных компонентов вашего сайта.

  Microsoft FrontPage 2000

Microsoft FrontPage 2000 (рис. 7.17) является более поздней реализацией программного пакета Microsoft FrontPage 98. С одной стороны, редактор стал значительно удобнее, поскольку все три программы, бывшие ранее независимыми приложениями, объединены здесь в одном интерфейсе. Появилась возможность редактировать страницу и шаблоны непосредственно в главном окне программы, настраивать по собственному вкусу панель инструментов, включать проверку орфографии и использовать другие грамматические модули Microsoft Office.

Рис. 7.17. Интерфейс программы Microsoft FrontPage 2000

Стало возможным модифицировать прилагаемые к комплекту поставки «темы» — графические шаблоны web-страниц, а также автоматически проверять документ на корректность отображения в разных типах броузеров. Обеспечена практически полная совместимость программы с другими приложениями Microsoft Office 2000.

С другой стороны, пользователю, привыкшему работать с FrontPage Express или FrontPage 98, где редактирование web-страниц осуществляется «в полный экран», первое время чрезвычайно трудно привыкнуть к созданию документа в оконном режиме. Не очень хорошо продумана система взаимодействия с серверными базами данных. Часть функций предыдущей версии редактора вообще не претерпела изменений. В целом, пакет Microsoft FrontPage 2000 позволяет делать практически то же самое, что и Microsoft FrontPage 98.

  Типичные ошибки

Народная мудрость гласит, что умные пользователи учатся на чужих ошибках, а все остальные — на своих собственных. В этом разделе мы рассмотрим ряд типичных ошибок, которые допускают web-дизайнеры, работающие с пакетом Microsoft FrontPage различных версий.

  1. При переносе проекта на сервер перестают работать интегрированные вweb-страницы сайта интерактивные формы.

Возможных причин данной проблемы может быть три: 

  1. На удаленном узле не установлены серверные расширения Microsoft Front Page. ;
  2. Пользователь открывал и изменял в редакторе FrontPage Editor, FrontPage jExpress или FrontPage 2000 содержимое включающих формы web-страниц,уже помещенных на сервер, в результате чего компонентам формы были автоматически присвоены значения по умолчанию. После этой операции форма, как правило, утрачивает работоспособность.
  3. При использовании собственных сценариев CGI, вызываемых в коде формы извне, скорее всего, указаны либо неправильный адрес вызываемогоскрипта, либо неверный метод передачи данных.
  1. После публикации ресурса в Интернете на web-страницах перестают отображаться графические иллюстрации.

Можно назвать две группы наиболее характерных причин этой ошибки:

  1. В вызывающем изображение коде указан неверный путь к графическому элементу, либо при публикации страницы программа «забыла» изменить локальные пути на адрес URL, либо изображение размещено не в той серверной директории, которая указана в вызывающем адресе, либо указан полный (абсолютный) путь вместо короткого (относительного), что также иногда может привести к ошибке. Попробуйте открыть файл на редактирование непосредственно с сервера и интегрировать изображение в страницу заново, указав его расположение в соответствующей серверной директории.
  2. Б. Некоторые графические редакторы при сохранении файла на диске назначают ему расширение, записанное в заглавном символьном регистре, тогда как в коде, вызывающем изображение, оно записано в строчном. В Windows-совместимых платформах это не имеет значения: программы умеют воспринимать оба варианта записи, но в UNIX-совместимых операционных системах, под управлением которых работает большая часть http-серверов,это приводит к ошибкам. Либо исправьте описывающий картинку отрывок html-кода, либо измените запись расширения файла.
  1. При переносе сайта на другой сервер на web-страницах пропадают изображения, фоновые рисунки и нарушается целостность гиперссылок.

Проблема заключается в том, что для некоторых элементов ваших html-доку-ментов, вызываемых непосредственно из кода разметки гипертекста, указаны не относительные пути (../Images/picture.gif), а абсолютные (http://www.server.ru/images/picture.gif). Естественно, что при смене адреса сервера, предоставляющего web-хостинг, эти элементы перестают отображаться в клиентском броузере.

  1. После включения в web-страницу средствами программы Microsoft FrontPage Express заголовка или другого текста, набранного кириллицей, в броузере они отображаются символами «?>, хотя в окне Просмотр или правка HTML все выглядит нормально.

Откройте окно Свойства страницы (Файл > Свойства страницы) и установите в пунктах Для сохранения и Для отображения раздела Кодировка HTML параметр Кириллица.

  1. При наборе текста в редакторе Microsoft FrontPage по нажатии клавиши Enter программа устанавливает слишком большой межстрочный интервал.

Переносите строки нажатием сочетания клавиш Shift+Enter.

  1. При формировании маркированного или нумерованного списка между отдельными пунктами образуется слишком большой межстрочный интервал.

Это происходит в том случае, если вы используете выравнивание списка по левому или правому краю, либо по центру экрана. Отмените выравнивание вводимого списка либо удалите вручную в коде HTML теги <Р ALIGN="значение"> </Р>, размещенные внутри тегов <LI> и </LI>.

  Что нового мы узнали?

В этом уроке мы научились:

Сайт создан в системе uCoz