frontpage2002

казать границы определяет, показывать ли разделительные линии между фреймами.

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

Во фрейм можно добавлять новые фреймы или удалить фреймы, которые больше не нужны.

9.5. Стили

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

Для хранения стилей в программе FrontPage используется таб-

лица стилей Cascading Style Sheets (Каскадная таблица стилей),

сокращенно CSS. В программе FrontPage имеются три вида стилей:

•External Style Sheet — внешняя таблица стилей. Данная таблица стилей хранится в файле с расширением CSS. Она может быть связана со всеми страницами Web-узла

•Embedded Style Sheet — внутренняя таблица стилей. Эта таблица стилей включается в код HTML-страницы и может быть связана с одной страницей

•Inline Style — встроенный стиль. Применяется к отдельным элементам Web-страницы

9.6. Создание внешней таблицы стилей

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

Для создания внешней таблицы стилей Web-узла выполните следующие действия:

101

1.Откройте Web-узел, для которого хотите создать таблицу стилей CSS.

2.На панели Список папок выберите самую верхнюю папку, содержащую название узла.

3.В меню Файл выберите команду Создать, а затем из открывшегося подменю — опцию Страница или веб-узел.

4.На появившейся панели Создание веб-страницы или узла

выберите команду Шаблоны страниц.

5.Открывается диалоговое окно Шаблоны страниц, в котором перейдите на вкладку Таблицы стилей. Она содержит шаблоны стилей, предлагаемые программой FrontPage.

6.Выберите один из предлагаемых шаблонов и нажмите кнопку ОК.

7.Диалоговое окно Шаблоны страниц закрывается, а в Webузел добавляется страница, имеющая расширение CSS (рис. 9.8). Посмотрите ее содержимое. Она содержит описание стилей, которые будут использоваться для форматирования содержимого страниц: сначала идет название элемента Web-страницы, а за ним в скобках — параметр форматирования. На этой странице последовательно описаны все элементы, встречающиеся в Web-узле и подлежащие форматированию — фон страницы, ссылки, заголовки, текст, таблицы, а также используемые в их оформлении цвета, шрифты и т. п.

8.Сохраните страницу в Web-узле, воспользовавшись кнопкой Сохранить на стандартной панели инструментов.

9.В открывшемся диалоговом окне Сохранить как в поле Имя файла введите имя файла (например, styles), и нажмите кноп-

ку Сохранить.

Посмотрите на панель Список папок. Там появился файл styles.ess, представляющий собой таблицу стилей.

9.7. Использование внешней таблицы стилей

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

1. Откройте Web-узел, содержащий созданную нами внешнюю таблицу стилей.

102

2. В меню Формат выберите команду Ссылки таблицы сти-

лей.

3. Открывается диалоговое окно Связать с таблицей стилей (рис. 9.9). В его верхней части расположены две опции:

•все страницы;

•выделенные страницы — связывает таблицу стилей с выбранной страницей.

Рис. 9.8. Страница, содержащая описание стилей

Чтобы связать созданную таблицу стилей со всеми страницами, установите опцию все страницы.

4. Для указания названия таблицы стилей, с которой необходимо связать страницы Web-узла, нажмите кнопку Добавить.

Рис. 9.9. Диалоговое окно Связать с таблицей стилей

103

5.В открывшемся диалоговом окне Выбор таблицы стилей выберите созданную таблицу стилей. В нашем примере это файл styles.css. Имя файла переносится в поле Адрес URL.

6.Нажмите кнопку ОК.

7.Вы возвращаетесь в диалоговое окно Связать с таблицей стилей. Имя таблицы CSS размещено в списке под опциями.

8.Нажмите кнопку ОК для закрытия окна. Посмотрите на страницы Web-узла, с которыми связана таблица CSS. Ко всем элементам Web-страниц применено форматирование в соответствии со значениями таблицы стилей.

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

щего вида: <link rel="stylesheet" type="text/css" href="styles.css">. В

ней указано наименование таблицы CSS, с которой связана данная страница.

9.8. Формы

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

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

Для создания форм FrontPage предлагает шаблоны и мастера, облегчающие их разработку:

•Форма подтверждения;

•Форма обратной связи — шаблон формы для ввода замечаний;

104

•Мастер страницы формы — мастер создания формы для опроса посетителей Web-узла;

•Гостевая книга;

•Страница поиска;

•Регистрационная форма.

Рис. 9.10. Форма, созданная в программе FrontPage

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

После того как форма создана, необходимо предусмотреть средства для обработки данных, вводимых в форму. Управление данными можно осуществлять несколькими способами:

•Сохранить в файле, имеющем формат HTML, обычный текст или текст базы данных

•Переслать по электронной почте

•Передать для обработки в ASPили CGI-сценарий

105

•Поместить в дискуссионную или регистрационную форму Настройка средств обработки данных, полученных с помощью

формы, осуществляется в окне свойств формы Свойства формы, открываемом одноименной командой контекстного меню.

Глава 10. Использование компонентов при создании Webстраниц

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

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

•Страница — вставляет содержимое отдельной страницы с периодически обновляемой информацией в другие страницы Web-узла. Данный объект удобен для размещения в Web-узле периодически обновляемой информации, которая должна присутствовать на нескольких страницах. Изменения, осуществленные на исходной странице, автоматически будут отображены во всех местах, где эта страница используется;

•Страница с расписанием — вставляет содержимое отдельной страницы в другие страницы Web-узла на определенный интервал времени (например, для рекламы какого-либо товара, анонса предстоящей выставки);

•Рисунок с расписанием — вставляет графическое изображение на страницу Web-узла на определенный интервал времени

•Счетчик посещений — размещает на Web-странице компонент, позволяющий получить сведения о том, сколько пользователей открывало Web-узел;

106

•Форма поиска — позволяет посетителям Web-узла проводить поиск необходимой информации;

•Оглавление — размещает на домашней странице иерархическое оглавление со ссылками на все страницы Web-узла.

Впрограмме FrontPage для размещения на Web-страницах компонентов используется диалоговое окно Вставка компонента веб-узла (рис. 10.1) со списком компонентов. Чтобы открыть это окно, выполните одно из следующих действий:

•В меню Вставка выберите команду Веб-компонент;

•Нажмите кнопку Веб-компонент на стандартной панели инструментов.

10.1. Использование подстановок

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

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

1. Откройте редактируемую Web-страницу.

Рис. 10.1. Диалоговое окно Вставка компонента веб-узла

107

2.Установите курсор в место предполагаемого размещения компонента Подстановка.

3.В меню Вставка выберите команду Веб-компонент. От-

крывается диалоговое окно Вставка компонента веб-узла.

4.Из списка Тип компонента выберите значение Включенное содержимое, при этом в правой области окна появляется спи-

сок Выберите тип содержимого.

5.Выберите из этого списка значение Подстановка и нажмите кнопку Готово. На экране открывается диалоговое окно Свой-

ства подстановки.

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

(рис. 10.2).

7.Нажмите кнопку ОК. На Web-странице появляется значение, задаваемое данной переменной.

Рис. 10.2. Диалоговое окно Свойства подстановки

По умолчанию в списке Заменить на расположены перемен-

ные, называемые переменными конфигурации (табл. 10.1).

Таблица 10.1. Переменные конфигурации, формируемые про-

граммой FrontPage

Переменная Назначение

108

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

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

Для добавления в список переменных, которые затем могут использоваться в качестве подстановочных компонентов, предназначена кнопка Добавить. При ее нажатии открывается диалоговое окно Добавить имя и значение (рис. 10.4), содержащее два поля. Поле Имя используется для ввода наименования переменной, а поле Значение — ее значения. Завершив ввод данных нажмите кнопку ОК для его закрытия. Введенная переменная и ее значение появятся в списке диалогового окна Настройка веб-узла.

Рис. 10.3. Диалоговое окно Настройка веб-узла

109

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

Рис. 10.4. Диалоговое окно Добавить имя и значение

1.В меню Сервис выберите команду Настройка веб-узла.

2.В открывшемся диалоговом окне Настройка веб-узла перейдите на вкладку Параметры.

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

4.Нажмите кнопку Изменить.

5.В поле Значение открывшегося диалогового окна Изменение имени и значения введите новое значение телефона предприятия.

6.Нажмите кнопку ОК окна Настройка веб-узла.

Программа FrontPage обновит номер телефона на всех страницах Web-узла.

Заключение

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

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

110