Настольные издательские системы. Программа FrontPage для электронных публикаций.

FrontPage 2002.
Самоучитель

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

Программа FrontPage
Элементы оформления Web-страниц
Создание Web-узла с помощью мастеров и шаблонов
Размещение на Web-странице текста и заголовков
Использование таблиц в оформлении Web-страницы
Продолжаем создание одностраничного Web-узла
Использование мультимедиа в составе Web-страницы
Создание текстовых и графических гиперссылок
Формирование задач и отчетов
Использование документов MS Office
Публикация Web-узла
Использование сложных элементов при оформлении
Использование компонентов при создании Web-страниц
Создание форм

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

Б.Новокрещин
(3843)74-88-06


Настольные издательские системы. Программа FrontPage для электронных публикаций.

Содержательная постановка
комплекса задач исследования

Постановка задачи курса

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

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

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


Hoвaя cmpaнuцa 1

Элементы оформления Web-страниц

Планирование разработки, Разработка структуры страниц
Схема навигации
Макетирование Web-страницы
Элементы оформления Web-страниц
Общие области, Графические изображения, Темы оформления Web-страниц
Гиперссылки, Эффекты динамического HTML, Фреймы
FrontPage-компоненты, Формы


Hoвaя cmpaнuцa 1

Планирование разработки

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

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

Планируя свою разработку, тщательно продумайте следующие вопросы:

  • Информацию какого типа вы хотите разместить в создаваемом Web-узле. Это может быть информация о вашей компании и выпускаемой ею продукции и предлагаемых услугах, реклама того или иного вида товара или просто личная страница, из которой вы хотите переходить на ваши любимые страницы в Интернете.
  • На кого рассчитан ваш Web-узел. Например, если Web-узел создается с рекламной целью определенного вида товара или услуги, то вы должны четко определить, для какой аудитории и возрастной группы этот товар предназначен. От этого будет зависеть и внешнее оформление, и форма подачи материала, и даже панели навигации, и глубина ссылок.

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

  • Внешнее оформление Web-узла имеет немаловажное значение для его посещаемости. Если у вас прекрасный вкус и это не вызывает сомнения у окружающих, то вы вполне можете ему довериться и оформлять страницу самостоятельно. В том случае, если вы считаете, что дизайнер из вас не получится, то в оформлении Web-узла положитесь на программу FrontPage, предлагающую такое средство, как Темы, и на профессиональных дизайнеров фирмы Microsoft, их разработавших.
  • Не размещайте на одной странице слишком большой объем информации, так как это мешает ее восприятию. Создайте несколько связанных страниц, разместив на них информацию, сгруппированную по тематике. Для облегчения чтения информации используйте разнообразные списки, таблицы. Оставьте достаточно свободного пространства между различными смысловыми группами.
  • Наиболее важная информация, которую вы хотите донести до посетителя и ради которой Web-узел фактически создается, должна быть наиболее доступна и находиться на верхних уровнях вложенности Web-узла. Глубоко должна быть размещена информация, необходимость в которой может и не возникнуть.
  • Не перегружайте Web-узел большим количеством графической информации, замедляющей его загрузку. Вы, вероятно, сами не раз отказывались от посещения таких Web-узлов, нажимая на панели инструментов кнопку, останавливающую загрузку информации.
  • Используйте в своих разработках панели ссылок, компактно располагающиеся на страницах и позволяющие пользователям легко перемещаться по различным разделам Web-узла. Не забудьте предусмотреть ссылку, с помощью которой посетитель Web-узла сможет легко вернуться на вашу исходную (домашнюю) страницу.

Замечание

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

Разработка структуры страниц

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

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

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

На страницах третьего уровня размещается уточняющая информация к основным разделам Web-узла

Замечание

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


Hoвaя cmpaнuцa 1

Схема навигации

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

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

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

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

Панели ссылок

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

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

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

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


Hoвaя cmpaнuцa 1

Макетирование Web-страницы

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

HTML

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

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

Рис. 10.1. Просмотр Web-страницы в HTML-кодах

Браузеры

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

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

Замечание

Во избежание недоразумений обязательно протестируйте созданный Web-узел с помощью наиболее часто применяемых пользователями браузеров Netscape Navigator и Internet Explorer.

Ограничения, связанные с аппаратными средствами

Внешний вид просматриваемой в обозревателе Web-страницы зависит не только от типа браузера, но и от монитора, видеокарты, применяемой пользователем операционной системы и установленного на мониторе разрешения. Поэтому, разрабатывая собственный Web-узел, вы должны просмотреть, как будет выглядеть ваша страница в браузере при разрешении экрана 640x480, 800x600 и 1024x768, так как это наиболее часто используемые на компьютере разрешения. На рис. 10.2 и 10.3 показано, как выглядит одна и та же страница на мониторе с разрешением экрана 800x600 и 1024x768, соответственно.

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

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

Рис. 10.2. Web-страница при разрешении экрана 800x600

Рис. 10.3. Web-страница при разрешении экрана 1024x768


Hoвaя cmpaнuцa 1

Элементы оформления Web-страниц

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

Текстовая информация

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

Программа FrontPage, как и все программные продукты Microsoft Office, содержит средства, призванные облегчить работу по размещению текста. Это команды проверки орфографии, поиска и замены, тезаурус.

Фон страницы

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

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

Горизонтальные линии

Для выделения заголовков, разделов текста, для разделения разной по тематике информации и просто для оформления Web-страниц используют горизонтальные линии. Размещение горизонтальной линии на Web-странице осуществляется командой Горизонтальная линия (Horizontal Line) ( ) из меню Вставка (Insert). Кроме того, страницы можно украсить графическими линиями. Образцы графических линий можете поискать в библиотеке графических изображений Clip Art.

Таблицы

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

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

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

Рис. 10.4. Использование для форматирования вложенных таблиц

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

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

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


Hoвaя cmpaнuцa 1

Общие области

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

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

Предупреждение

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

Графические изображения

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

При создании Web-узлов чаще всего применяют графические форматы JPEG (Joint Photographic Experts Group) и GIF (Graphics Interchange Format), являющиеся форматами со сжатием. Выбор формата определяется стоящими при разработке задачами. Так, например, GIF формат применяется для изображений, содержащих меньше 256 цветов, и используется, как правило, для создания анимационных эффектов. Если изображение содержит более 256 цветов, то применяется формат JPEG. Кроме того, программа FrontPage позволяет импортировать файлы, имеющие другие форматы, преобразовывая их в форматы JPEG и GIF.

После того как графическое изображение размещено на странице, с помощью кнопок панели инструментов Рисунки (Pictures)
(рис. 10.5) можно изменить его яркость и контрастность, повернуть по горизонтали или по вертикали, преобразовать цветное изображение в полутоновое и т. д. Эта панель автоматически появляется в окне программы FrontPage при щелчке на изображении.

Рис. 10.5. Графическое изображение, размещенное на Web-странице

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

Совет

FrontPage позволяет узнать предполагаемое время загрузки Web-страницы на компьютер пользователя в зависимости от скорости соединения с Web-сервером. Оно отображается в строке состояния в режиме редактирования страницы справа от значка с изображением песочных часов. На рис. 10.5 показана страница, время зафузки которой составляет 94 секунды при скорости соединения 28,8 Кбит/с. Чтобы узнать время загрузки при другой скорости соединения, щелкните мышью в правой области строки состояния и выберите из появившегося меню значение предполагаемой скорости соединения с Web-сервером.

Темы оформления Web-страниц

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

  • Текст (цвет, размер и тип шрифта, стили абзацев)
  • Маркеры списков
  • Заголовки
  • Панели ссылок

Рис. 10.6. Web-страница, оформленная с помощью темы

  • Горизонтальные линии
  • Фоновое изображение
  • Цвет гиперссылок

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

На рис. 10.6 показана страница, в оформлении которой использована тема Кубики (Blocks). Для задания темы оформления Web-узла служит диалоговое окно Темы, открываемое командой Темы (Themes) меню Формат (Format).


Hoвaя cmpaнuцa 1

Гиперссылки

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

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

Эффекты динамического HTML

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

Для размещения на Web-странице динамических HTML-объектов служит диалоговое окно Вставка компонента веб-узла (Insert Web Component), предлагающее три компонента данного типа. Это Быстрая строка (Marquee), Меняющаяся кнопка (Hover Button) и Диспетчер объявлений (Banner Ad Manager).

Кроме того, FrontPage позволяет при оформлении Web-страниц использовать различные анимационные эффекты, заимствованные из программы PowerPoint. При создании эффектов анимации используется панель инструментов Эффекты DHTML (DHTML Effects). Комбинируя значения всех трех списков данной панели инструментов, можно формировать самые разнообразные эффекты. Например, при загрузке Web-страницы текст будет влетать по спирали или волнообразно, въезжать сверху, снизу, справа, слева или по диагонали из разных углов страницы. Размер размещаемого текста можно увеличивать или уменьшать. Отдельные слова текста могут падать в формируемую фразу сверху или вплывать, двигаясь волнообразно.

Замечание

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

Фреймы

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

Рис. 10.7. Использование на Web-странице фреймов

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


Hoвaя cmpaнuцa 1

FrontPage-компоненты

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

  • Подстановка (Substitution) — размещает на Web-странице информацию, задаваемую с помощью переменной. При изменении значения переменной происходит автоматическое обновление данных во всех местах, где эта переменная используется
  • Страница (include Page) — вставляет содержимое отдельной страницы с периодически обновляемой информацией в другие страницы Web-узла
  • Страница с расписанием (Scheduled Include Page) — вставляет СОДСр-жимое отдельной страницы в другие страницы Web-узла на определенный интервал времени
  • Рисунок с расписанием (Scheduled Picture) — вставляет графическое изображение на страницу Web-узла на определенный интервал времени
  • Счетчик посещений (Hit Counte r) — размещает на Web-странице компонент, позволяющий получить сведения о том, сколько пользователей открывало Web-узел
  • Форма поиска (Search Form) — позволяет посетителям Web-узла проводить поиск необходимой информации
  • Оглавление (Table of Contents) — размещает на домашней странице оглавление со ссылками на все страницы Web-узла
  • Электронная таблица Office (Office Spreadsheet) — добавляет на страницу электронную таблицу, являющуюся объектом Microsoft Office
  • Диаграмма Office (Office Chart) — добавляет на страницу диаграмму, являющуюся объектом Microsoft Office
  • Сводндя таблица Office (Office PilotTable) — Добавляет на страницу объект Microsoft Office, позволяющий подключиться к базе данных с помощью OLE DB, просмотреть заданный объект и изменить его содержимое

Для размещения на Web-странице компонентов используется диалоговое окно Вставка компонента веб-узла (Insert Web Component) (рис. 10.8), открываемое командой Веб-компонент (Web Component) из меню Вставка (Insert), а также кнопкой
Веб-компонент на стандартной панели инструментов.

Рис. 10.8. Диалоговое окно, используемое для размещения на странице Web-компонентов

Формы

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

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

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

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

  • Форма подтверждения (Confirmation Form) — шаблон формы подтверждения о получении информации
  • Форма обратной связи (Feedback Form) — шаблон формы для ввода замечаний
  • Мастер страницы формы (Form Page Wizard) — мастер создания формы для опроса посетителей Web-узла
  • Гостевая книга (Guest Book) — шаблон гостевой страницы
  • Страница поиска (Search Page) — шаблон страницы в виде формы, используемой для поиска слов
  • Регистрационная форма (User Registration) — шаблон формы регистрации пользователей

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

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

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

Настройка средств обработки данных, полученных с помощью формы, осуществляется в окне свойств формы Свойства формы (Form Properties), открываемом одноименной командой контекстного меню.


Глава 11

Создание Web-узла с помощью мастеров и шаблонов

Шаблоны и мастера
Мастера создания Web-узлов
Мастер создания Web-узла для представления компании
Web-узел для проведения дискуссий
Мастер импорта Web-узлов
Мастер интерфейса базы данных
Шаблоны для создания Web-узлов
Модификация персонального Web-узла
Шаблон создания Web-узла поддержки покупателей, Шаблон создания Web-узла проекта
Шаблоны и мастера для создания Web-страниц
Шаблон Коллекция фотографий


Глава 11

Шаблоны и мастера

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

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

Что такое шаблоны и мастера и чем они отличаются друг от друга? С шаблонами вы, вероятно, сталкивались при работе с другими офисными продуктами, например, при работе с Microsoft Word.

Шаблон — это совокупность параметров документа для его многократного использования, иными словами, каркас вашего документа. Выбрав тот или иной шаблон, вы в дальнейшем используете те средства, которые в нем уже заложены. Например, выбрав шаблон Текст одним столбцом (One-column Body), вы получаете страницу, на которой информацию необходимо размещать в одну колонку по центру. В других шаблонах заранее выделены области для размещения текста и графической информации и т. д.

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


Глава 11

Мастера создания Web-узлов

Для запуска мастера по созданию Web-узла выполните следующие действия:

1. В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел (Page or Web). В результате в главном окне программы FrontPage появляется панель Создание веб-страницы или узла (New Page or Web) (рис. 11.1).

Рис. 11.1. Панель Создание веб-страницы или узла для работы с новыми страницами и Web-узлами

2. Выберите на панели значение Шаблоны веб-узлов (Web Site Templates). Открывается диалоговое окно Шаблоны веб-узлов, в котором можно выбрать шаблон или мастер для создания Web-узла (рис. 11.2).

Рис. 11.2. Диалоговое окно Шаблоны веб-узлов

Диалоговое окно содержит одну вкладку Веб-узлы (Web Sites), на которой расположены значки предлагаемых системой шаблонов и мастеров для создания Web-узлов. В табл. 11.1описано назначение мастеров, предлагаемых программой FrontPage.

Таблица 11.1. Мастера, используемые для создания Web-узлов

Мастер | Назначение
Мастер корпоративного веб-узла (Corporate Presence Wizard) | Создает Web-узел по представлению предприятия в World Wide Web
Мастер интерфейса базы данных (Database Interface Wizard) | Создает Web-узел, использующий для хранения информации базу данных, в которой можно просматривать записи, добавлять новые, удалять имеющиеся
Мастер веб-обсуждения (Discussion Web Wizard) | Создает Web-узел по проведению дискуссий
Мастер веб-импорта (Import Web Wizard) | Импортирует данные с Web-узлов, созданных с использованием других программ, в создаваемый в программе FrontPage Web-узел

Замечание

В диалоговом окне Шаблоны веб-узлов программа FrontPage предлагает четыре мастера для создания Web-узла. Они перечислены в табл. 11.1. Остальными в списке являются шаблоны.

3. Выделите значок мастера, услугами которого хотите воспользоваться. При этом в области Описание (Description) появляется краткое описание выбранного мастера.

4. В поле Укажите расположение нового веб-узла (Specify the location of the new web) задайте URL-адрес Web-узла, то есть имя Web-сервера, на котором хотите разместить Web-узел, и имя Web-узла. Имена должны быть разделены символом "/". Например, http://localhost/Corporate. При этом возможны следующие варианты:

  • Web-сервер установлен на вашем компьютере. В этом случае имя сервера автоматически подставляется в URL-адрес. Серверу также можно присвоить сетевое имя вашего компьютера по умолчанию localhost.
  • Вы используете Web-сервер своего провайдера, доступный в Интернете. В этом случае в качестве имени сервера вводится его реальный URL-адрес.
  • Сохраняете Web-узел на своем компьютере. В этом случае в качестве адреса указывается физический путь к нему.
  • Чтобы установить с Web-сервером безопасное соединение по протоколу SSL, установите в окне Шаблоны веб-узлов флажок Требуется подключение SSL (Secure connection required (SSL)).

5. Нажмите кнопку ОК. Запускается мастер.

Совет

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

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

Кнопка | Назначение
Отмена (Cancel) | Прекращает работу мастера
Назад (Back) | Позволяет вернуться к предыдущим шагам в работе мастера для изменения введенной ранее информации
Далее (Next) | Позволяет перейти к следующему шагу работы мастера
Готово (Finish) | Позволяет перейти к завершающему этапу в создании Web-узла на основе введенной информации

Ответив на все вопросы мастера, вы нажимаете кнопку Готово. Мастер создает Web-узел и выводит его в главном окне программы для просмотра и редактирования.

Замечание

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

Рассмотрим кратко возможности мастеров по созданию Web-узла:

  • Мастер корпоративного веб-узла (Corporate Presence Wizard). Создает Web-узел, представляющий компанию в Интернете. В состав созданного Web-узла могут входить:
  • Страницы, используемые посетителями Web-узла для просмотра новостей о компании, а также информации о товарах и предоставляемых услугах
  • Таблица с оглавлением, облегчающая посетителям перемещение по Web-узлу
  • Форма отзывов клиентов по тому или иному вопросу
  • Поисковая форма, позволяющая посетителям сайта находить на Web-узле интересующую их информацию
  • Мастер интерфейса базы данных (Database Interface Wizard). Web-узел, созданный с помощью этого мастера, может содержать следующие страницы:
  • Страница просмотра информации из базы данных
  • Страница, предназначенная для ввода информации
  • Страница, позволяющая редактировать базу данных Web-узла из обозревателя
  • Мастер веб-обсуждения (Discussion Web Wizard). Создает Web-узел, на страницах которого пользователь высказывает свое мнение по поводу . проводимой дискуссии. В состав созданного Web-узла могут входить:
  • Страницы для проведения дискуссии и страница, с помощью которой посетитель определяет, дошло ли его сообщение до Web-узла
  • Оглавление Web-узла
  • Форма потоковых ответов
  • Поисковая форма, позволяющая посетителям сайта находить на Web-узле интересующую их информацию
  • Мастер веб-импорта (Import Web Wizard). Импортирует на создаваемый во FrontPage Web-узел данные с других Web-узлов. Импортировать можно весь Web-узел или его отдельные страницы. Импорт можно осуществлять с вашего компьютера, с компьютера, находящегося в вашей локальной сети или из Интернета, указав его URL-адрес


Глава 11

Мастер создания Web-узла для представления компании

Рассмотрим работу мастера Мастер корпоративного веб-узла (Corporate Presence Wizard), создающего Web-узел для представления предприятия в Интернете. Для создания Web-узла с помощью этого мастера выполните следующие действия:

1. В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел (Page or Web).

2. На появившейся в окне программы FrontPage панели Создание веб-страницы или узла выберите команду Шаблоны веб-узлов (Шаблоны Web-узлов).

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

4. Дважды щелкните на значке Мастер корпоративного веб-узла.

5. Мастер начинает свою работу. На экране появляется его первое окно, в котором содержится краткое описание мастера
(рис. 11.3). Ознакомьтесь с предложенной информацией и нажмите кнопку Далее.

Рис. 11.3. Первое информационное окно мастера Мастер корпоративного веб-узла

6. На следующем шаге работы мастера вам предлагается определиться со страницами, которые будут включены в Web-узел
(рис. 11.4). В диалоговом окне размещены следующие флажки:

• домашняя (Ноте) — домашняя страница Web-узла
• что нового (What's New) — страница новостей Web-узла
• продукты и услуги (Products/Services) — страница, представляющая продукцию или услуги, предлагаемые компанией

Рис. 11.4. Диалоговое окно для выбора страниц Web-узла

• оглавление (Table of Contents) — страница, содержащая оглавление создаваемого Web-узла. С данной страницы возможен переход на все страницы узла
• обратная связь (Feedback Form) — страница в виде формы, на которой посетители Web-узла смогут разместить свое мнение о предлагаемых товарах и услугах
• форма поиска (Search Form) — страница в виде формы для поиска слов на Web-узле. Данная форма позволит посетителю быстрее найти нужную информацию

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

7. Следующее диалоговое окно мастера позволяет определить формат домашней страницы создаваемого Web-узла (рис. 11.5). В нем расположены флажки, установка которых приводит к резервированию на странице места для следующей информации:

• вступление (Introduction) — для вступительной информации
• предназначение (Mission Statement) — о целях и задачах фирмы
• профиль организации (Company Profile) — о профиле компании
• контактные сведения (Contact Information) — для контактной информации

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

Далее. Рис. 11.5. Диалоговое окно для определения формата домашней страницы

Замечание

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

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

Флажок | Назначение раздела
изменения на веб-узле (Web Changes) | Новости о Web-узле
информационные сообщения (Press Release) | Размещение информационных сообщений
статьи и обзоры (Articles and Reviews) | Размещение статей и обозрений

Рис. 11.6. Диалоговое окно для задания параметров страницы новостей

9. На следующем шаге работы мастера в полях продукты (Products) и услуги (Services) (рис. 11.7) можно задать параметры страницы, содержащей информацию о товарах и услугах, предоставляемых фирмой. В соответствии с введенными числами будет создаваться по одной странице на каждый рекламируемый товар или услугу. Введите в эти поля необходимые числа и нажмите кнопку Далее.

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

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

• изображение продукта (Product image) — резервирует на странице место для размещения изображения товара
• сведения о цене (Pricing information) — резервирует на странице место для размещения цен на указанный товар
• форма запроса данных (Information request form) — приводит к созданию формы запроса информации

Вторая группа флажков определяет параметры страницы, рекламирующей услуги:

• список возможностей (Capabilities list) — резервирует на странице место для более подробного описания услуги
• ссылочные счета (Reference accounts) — резервирует на странице место для размещения учетных записей
• форма запроса данных (Information request form) — указывает на необходимость формирования формы запроса к посетителям Web-узла на услуги

Установите необходимые флажки и нажмите кнопку Далее для перехода к следующему шагу.

Рис. 11.8. Диалоговое окно для задания параметров страниц, содержащих информацию о товарах и услугах

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

Рис. 11.9. Диалоговое окно позволяет задать поля формы-анкеты обратной связи с посетителями Web-узла

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

• Да — формат с разделителями табуляцией (Yes, use tab-delimited format) — данные сохраняются в виде таблицы. Эта опция используется в том случае, если результаты опроса будут обрабатываться с помощью базы данных или электронной таблицы Microsoft Excel
• Нет — формат веб-страниц (No, use web-page format) — данные сохраняются в формате Web-страницы

Установив необходимую опцию, нажмите кнопку Далее для перехода к следующему шагу мастера.

Рис. 11.10. Диалоговое окно позволяет задать формат данных, поступающих из формы-анкеты

13. На очередном шаге мастер предлагает задать параметры страницы оглавления Web-узла (рис. 11.11). Диалоговое окно содержит три флажка:

• автоматически обновлять список страниц (Keep page list up-to-date automatically) — установка флажка позволяет автоматически обновлять информацию в оглавлении при изменении входящих в Web-узел страниц
• показывать страницы, не входящие в веб-узел (Show pages not linked into web) — флажок определяет, необходимо ли в оглавлении показывать страницы, не имеющие прямых ссылок с других страниц
• маркеры для страниц верхнего уровня (Use bullets for top-level pages) — при установке флажка список страниц верхнего уровня отображается в виде маркированного списка

Установите необходимые флажки и нажмите кнопку Далее .

Рис. 11.11. Диалоговое окно позволяет задать параметры страницы, содержащей оглавление Web-узла

Предупреждение

Установка флажка автоматически обновлять список страниц (Keep page list up-to-date automatically) при большом количестве страниц в
Web-узле и частом обновлении может увеличить загрузку страницы оглавления.

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

Рис. 11.12. Диалоговое окно для размещения информации в верхней и нижней частях страниц Web-узла

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

Замечание

Установка флажков в этом окне мастера используется только для резервирования места на Web-страницах. После завершения работы мастера в редакторе FrontPage вы можете в этих местах разместить необходимую информацию.

Установите необходимые флажки и нажмите кнопку Далее.

15. Далее в работе мастера предлагается разместить на страницах значок В стадии разработки (Under Construction), указывающий, что создание данной страницы еще не завершено (рис. 11.13). Установите одну из двух предлагаемых опций и нажмите кнопку Далее для перехода к следующему диалоговому окну.

Рис. 11.13. Вам предлагается разместить на страницах значок В стадии разработки

16. В следующих двух диалоговых окнах необходимо задать информацию о компании, для которой Web-узел создается. В диалоговом окне, представленном на рис. 11.14, необходимо ввести полное и сокращенное название компании, а также ее адрес. Остальную информацию о компании — номер телефона, номер факса, адрес электронной почты Web-мастера и адрес электронной почты компании, введите в окне, показанном на рис. 11.15.

Рис. 11.14. Диалоговое окно для ввода полного и сокращенного названия компании, а также адреса

Рис. 11.15. Диалоговое окно для ввода номера телефона, факса и адреса электронной почты

17. На следующем шаге мастер предлагает выбрать стиль оформления вашего Web-узла (рис. 11.16). Вы можете согласиться с оформлением, которое будет принято по умолчанию, и нажать кнопку Далее. Позднее вы сможете изменить оформление как всего Web-узла, так и любых его страниц, воспользовавшись командой Тема (Theme) меню Формат (Format). Если же вы хотите заняться оформлением создаваемого Web-узла в данный момент, то нажмите кнопку Выбрать веб-тему (Choose Web Theme), расположенную в центре диалогового окна. На экране откроется окно Выбор темы (Choose Theme) (рис. 11.17).

Рис. 11.16. Диалоговое окно для задания стиля оформления Web-узла

Рис. 11.17. Диалоговое окно для выбора темы оформления страниц Web-узла

В верхней части диалогового окна Выбор темы по умолчанию установлена опция ко всем страницам (All pages), указывающая, что выбранная вами тема оформления Web-узла будет распространяться на все страницы. Ниже этой опции расположен список тем оформления, предоставляемый в ваше распоряжение программой FrontPage. При выборе значения из этого списка, в области Образец темы (Sample of Theme) вы можете просмотреть предлагаемое оформление текста, заголовков, списков, панелей навигации, гиперссылок. Если установить флажки, расположенные под списком тем, то:

• Яркие цвета (Vivid colors) — цвета, используемые в оформлении, будут более насыщенными
• Активные рисунки (Active graphics) — можно добавить в оформление активную графику
• Фоновый рисунок (Background picture) — можно добавить в оформление страниц фоновое изображение
• Применить с помощью CSS (Apply using CSS) — в оформление страниц добавляется внешняя таблица стилей

Выбрав по своему вкусу тему оформления и установив необходимые флажки, нажмите кнопку ОК для закрытия диалогового окна Выбор темы. При этом вы возвращаетесь в окно мастера. Нажмите кнопку Далее.

18. В следующем диалоговом окне (рис. 11.18) мастер сообщает, что он закончил сбор необходимых ему сведений, и готов перейти к построению Web-узла. По умолчанию в диалоговом окне мастера установлен флажок Показывать "Задачи" после загрузки веб-узла (Show Tasks View after web is uploaded), указывающий, что после завершения работы мастера и загрузки созданного Web-узла на экране будет отображаться перечень сформированных задач по доработке узла. Оставьте данный флажок установленным, так как сразу после завершения работы мастера сможете просмотреть список работ, которые вам предстоит выполнить, и убедиться, что мастер всю основную работу за вас выполнил.

Рис. 11.18. Завершающее информационное окно мастера

Замечание

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

Нажмите кнопку Готово для завершения создания Web-узла.

Мастер приступает к созданию Web-узла. Если в последнем диалоговом окне был установлен флажок Показывать "Задачи" после загрузки веб-узла

(Show Tasks View after web is uploaded), то после завершения работы мастера на экране откроется в табличном виде список задач по доработке Web-узла (рис. 11.19). Задания отсортированы по приоритету их выполнения. В столбце Сопоставлено с (Associated With) указано название страницы, требующей доработки, а в столбце Описание (Description) — описание работы, которую вам предстоит выполнить.

Рис. 11.19. Перечень заданий для завершения создания Web-узла

Установите курсор на задачу, к выполнению которой хотите приступить, нажмите 'правую кнопку мыши и в появившемся контекстном меню выберите команду Запустить задачу (Start Task). Откроется выбранная вами страница в режиме редактирования. Курсор установлен в том месте, где требуется доработка. Можете приступать к редактированию созданного мастером Web-узла.

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

  • Заголовок страницы (домашняя страница имеет заголовок Домой). Является графическим объектом
  • Фон Web-страницы. Как и заголовок, является графическим объектом

Рис. 11.20. Домашняя страница Web-узла

  • Горизонтальная и вертикальная панели ссылок, располагаемые в верхней части страницы над заголовком и в левой общей области, соответственно. Горизонтальная панель навигации содержит ссылки Ноте (Домашняя страница), Обратная связь, Оглавление и Форма поиска. Вертикальная панель домашней страницы содержит ссылки Новости, Продукты, Услуги , предназначенные для перехода на страницы с новостями компании, а также на страницы, рекламирующие товары и услуги
  • Горизонтальные разделительные линии
  • Номера контактных телефонов, почтовый адрес, адрес электронной почты, название компании. Данная информация располагается в нижней части страницы

Замечание

Графические изображения, размещаемые на Web-страницах, можно создавать с помощью таких программных продуктов, как Microsoft Photo Draw, Microsoft Image Composer, CorelDraw, Adobe Photoshop и т. д.

Располагаемые на странице элементы, а также сама страница характеризуются свойствами, которые можно просмотреть и изменить с помощью диалогового окна свойств элемента. Чтобы открыть данное окно, необходимо выделить элемент, нажать правую кнопку мыши и выбрать из появившегося контекстного меню команду Свойства (Properties) с названием модифицируемого элемента. Например, для открытия окна свойств заголовка страницы необходимо использовать команду Свойства объявления на странице (Page Banner Properties), панели ссылок — Свойства панели ссылок (Link Bar Properties), горизонтальной линии — Свойства горизонтальной линии (Horizontal Line Properties) и т. д.

Рассмотрим структуру навигации Web-узла для представления компании в Интернете (рис. 11.21), а также как связаны входящие в его состав страницы. Для этого перейдите в режим Переходы, нажав на панели Представления (Views) одноименную кнопку.

Рис. 11.21. Структура навигации Web-узла Мастер корпоративного веб-узла

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


Глава 11

Web-узел для проведения дискуссий

Чтобы создать Web-узел дискуссионной группы:

1. В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел
(Page or Web).

2. На появившейся в окне программы FrontPage панели Создание вебстраницы или узла выберите команду Шаблоны веб-узлов (Web Site Templates).

3. В поле Укажите расположение нового веб-узла (Specify the location of the new web) диалогового окна Шаблоны веб-узлов задайте местоположение и имя создаваемого Web-узла, после чего дважды щелкните на значке Мастер веб-обсуждения (Discussion Web Wizard).

4. Мастер начинает свою работу. На экране появляется его первое окно, в котором содержится краткое описание мастера. Ознакомьтесь с предложенной информацией и нажмите кнопку Далее.

5. Во втором диалоговом окне (рис. 11.22) расположены флажки. Они позволяют указать создаваемые на Web-узле страницы и реализуемые функции:

• форма нового раздела (Submission Form) — форма для ввода замечаний в ходе дискуссии
• оглавление (Table of Contents) — оглавление, используемое для организации и просмотра ранее представленных замечаний по определенной теме. Оглавление включают в Web-узел, если требуется, чтобы посетители знакомились с вопросами других участников и делали по ним замечания
• форма поиска (Search Form) — форма для поиска информации по заданному критерию
• цепочки оглавлений (Threaded Replies) — при установке данного флажка замечания по общей тематике объединяются, обеспечивая тем самым посетителю их последовательный просмотр
• страница подтверждения (Confirmation Page) — страница подтверждения, позволяющая посетителю узнать, дошло ли его сообщение до Web-узла

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

Рис. 11.22. Окно, позволяющее задать страницы создаваемого Web-узла

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

Рис. 11.23. Диалоговое окно для ввода заголовка

Замечание

Обратите внимание, что название папки должно начинаться с символа подчеркивания "_".

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

Рис. 11.24. Диалоговое окно для задания полей формы

8. В следующем окне мастера (рис. 11.25) необходимо указать, требуется ли ограничить число участников дискуссионной группы. По умолчанию установлена опция Нет, всеми желающими (No, anyone can post article), указывающая, что любой может участвовать в дискуссии. Оставьте данное значение и нажмите кнопку Далее.

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

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

Рис. 11.26. Просмотр посланного сообщения

10. Web-узел в браузере. Выберите на домашней странице ссылку Поместить новую статью (Post a new article). Открывается форма для ввода сообщения. Введите в поля формы тему, свое имя и сообщение, после чего нажмите кнопку Поместить (Post Article). В зависимости от установленного в браузере режима безопасности, на экране может появиться предупреждение системы безопасности. Нажмите в этом окне кнопку Да (Yes). В нижнем фрейме страницы появляется подтверждение о получении
Web-узлом сообщения. На рис. 11.26 показана страница оглавления с посланным сообщением.


Глава 11

Мастер импорта Web-узлов

Рассмотрим работу мастера импорта Web-узла (Import Web Wizard). Данным мастером вы можете воспользоваться, если захотите переписать к себе на компьютер понравившийся в Интернете Web-узел или доработать Web-узел. созданный без использования программы FrontPage.

Для импорта Web-узла с помощью мастера выполните следующие действия:

1. В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел (Новая страница или Web-узел).

2. На появившейся панели Создание веб-страницы или узла выберите команду Шаблоны веб-узлов (Web Site Templates).

3. В поле Укажите расположение нового веб-узла (Specify the location of the new web) диалогового окна Шаблоны веб-узлов задайте местоположение и имя создаваемого Web-узла, после чего дважды щелкните мышью на значке Мастер веб-импорта (Import Web Wizard).

Совет

Для запуска мастера Мастер веб-импорта (Import Web Wizard) вы также можете воспользоваться командой Импорт (Import) из меню Файл (File). На экране откроется диалоговое окно Шаблоны веб-узлов и по умолчанию будет выбран значок Мастер веб-импорта.

4. Запускается мастер и на экране появляется его первое диалоговое окно Choose Source (Выбрать источник) (рис. 11.27), в котором необходимо указать, откуда импортируется Web-узел. В окне расположены две опции:

  • Каталог на локальном компьютере или в локальной сети (From a source directory of files on a local computer or network) — при выборе этой опции файл будет импортироваться из каталога локального диска или из сети. Установите флажок Включить вложенные папки (Include subfolders), если копируемый каталог содержит подкаталоги. Для указания полного пути к Web-узлу можно воспользоваться кнопкой Обзор (Browse)

  • веб-узел в Интернете (From a World Wide Web site) — эта опция позволяет импортировать Web-узел с WWW-сервера. Вам необходимо только в поле Расположение (Location) указать URL-адрес

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

Рис. 11.27. Первое диалоговое окно мастера импорта Web-узла

5. Вид следующего диалогового окна зависит от установленной на первом шаге опции. Если вы импортируете Web-узел из каталога, будет открыто окно Изменение списка файлов (Edit File List) (рис. 11.28), содержащее список всех файлов, включая указанные вами подкаталоги. При импортировании всех файлов нажмите кнопку (Next). В том случае, если вы хотите исключить из импорта отдельные файлы, выделите их и удалите из списка, воспользовавшись для этого кнопкой Исключить (Exclude). Для восстановления в списке ошибочно удаленного файла нажмите кнопку Обновить (Refresh). Завершив формирование списка, нажмите кнопку.

Рис. 11.28. Диалоговое окно мастера при импортировании Web-узла из каталога

6. При импорте файла из Интернета открывается диалоговое окно Выбор ограничений на загрузку (Choose Download Amount) (рис. 11.29), в котором вам предлагается сформировать ряд условий по количеству копируемых уровней в иерархии страниц и максимальному объему информации в килобайтах. Если установлен флажок Только текстовые и графические файлы (Limit to text and image files), то будут импортироваться только текстовые и графические файлы. Задав необходимые параметры, нажмите кнопку для перехода к следующему шагу в работе мастера.

Рис. 11.29. Диалоговое окно мастера при импортировании Web-узла из Интернета

7. Следующее диалоговое окно является информационным. Нажмите кнопку Готово (Finish). Начнется процесс импорта, при котором сохраняется структура импортируемого Web-узла.

Замечание

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

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


Глава 11

Мастер интерфейса базы данных

Мастер интерфейса базы данных (Database Interface Wizard) (Database Interface Wizard) — это новый мастер, появившийся во FrontPage XP. Он создает Web-узел, позволяющий работать с информацией, содержащейся в базе данных Access, Oracle или SQL Server. Чтобы воспользоваться данным мастером:

1. На панели Создание веб-страницы или узла выберите команду Шаблоны веб-узлов (Web Site Templates).

2. В поле Укажите расположение нового веб-узла (Specify the location of the new web) открывшегося диалогового окна Шаблоны веб-узлов задайте местоположение и имя создаваемого Web-узла, после чего дважды щелкните на значке Мастер интерфейса базы данных (Database Interface Wizard).

3. Мастер начинает свою работу. На экране появляется его первое окно (рис. 11.30), в котором необходимо указать базу данных, с которой будет осуществляться соединение Web-узла. В окне расположены опции:

• новое подключение к БД Access на веб-узле (Create a new Access database within your web) — данная опция указывает, что соединение будет осуществляться с новой базой данных Access
• существующее подключение к базе данных (Use an existing database connection) — при выборе этой опции становится возможным выбор существующей базы данных из расположенного под опцией списка
• подключение к образцу базы данных (Борей) (Use a sample database connection (Northwind)) — соединение с тестовой базой данных Борей

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

Рис. 11.30. Окно мастера, предназначенное для выбора базы данных

4. Следующее окно мастера содержит одно поле, предназначенное для ввода названия базы данных. Введите имя и нажмите кнопку Далее.

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

Рис. 11.31. Окно для формирования списка полей базы данных

Кнопки, содержащиеся в окне мастера, имеют следующее назначение:

• Добавить (Add) — открывает диалоговое окно (рис. 32), с помощью которого в базу данных вводится новое поле
• Изменить (Modify) — открывает диалоговое окно, с помощью которого редактируется информация о выбранном в таблице поле создаваемой базы данных
• Удалить (Delete) — удаляет выделенное в таблице поле из базы данных Используя данные кнопки, сформируйте поля таблицы.

При вводе нового или редактировании существующего поля открывается окно, аналогичное показанному на рис. 11.32. Оно содержит следующие объекты интерфейса:

• Имя столбца (Column name) — наименование поля
• Тип столбца (Column type) — тип поля. Определяет тип хранящейся в поле информации. Может быть текстовым (Text), текстовым полем большой длины (Memo), целым числом (Integer), целым числом большой длины (Long), вещественным числом (Float), вещественным числом с двойной точностью (Double), датой (Date), логическим (Boolean)
• Тип входных данных поля формы (Form field input type) — указывает объект интерфейса, с помощью которого информация поля будет представлена в форме. Список содержит следующие значения: Над- пись (Text Box), Текстовая область (Text Area), Переключатель (Option Button), Раскрывающийся список (Drop-Down Box)
Число вариантов (Number of options) — количество опций в переключателе или значений в списке. Данный счетчик доступен, когда из списка Тип входных данных поля формы выбраны значения Переключатель (Option Button), Раскрывающийся список (Drop-Down Box)

Рис. 11.32. Окно мастера для ввода и редактирования информации о поле базы данных

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

7. Устанавливая флажки на следующем шаге работы мастера (рис. 11.33), вы указываете страницы, входящие в Web-узел. Мастер предлагает три страницы:

• Страница результатов (Result Page) — страница просмотра информации, содержащейся в базе данных
• Форма отправки (Submission Form) — страница, предназначенная для ввода информации в базу данных
• Редактор базы данных (Database Editor) — страница, позволяющая редактировать базу данных Web-узла из обозревателя

Рис. 11.33. Формирование списка страниц Web-узла

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

8. Если в Web-узел включена страница Редактор базы данных (Database Editor), появляется диалоговое окно, позволяющее задать имя пользователя и пароль для доступа к этой странице. Для того чтобы доступ к странице был ограничен, в поле Пользователь (Username) введите имя пользователя, который будет осуществлять редактирование структуры базы данных, в поле Пароль (Password) — пароль и в поле Подтверждение (Confirm) — подтверждение пароля. В том случае, если хотите, чтобы доступ к данной странице осуществлялся без ввода пароля, установите флажок Не защищать мой редактор базы данных именем пользователя и паролем (Don't project Database Editor with a username and password). Завершив установку параметров, перейдите к следующему шагу, нажав кнопку Далее .

9. Появляется информационное окно, указывающее список страниц, включаемых мастером в Web-узел. Нажмите в этом окне кнопку Готово. Мастер завершает создание Web-узла и открывает его в окне программы FrontPage для просмотра и редактирования (рис. 11.35).

Рис. 11.35. Одна из страниц созданного мастером Web-узла в режиме редактирования


Глава 11

Шаблоны для создания Web-узлов

Помимо мастеров, при разработке Web-узлов можно и нужно использовать шаблоны. Они помогают создавать типовую структуру Web-узла.

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

1. В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел (Новая страница или Web-узел).

2. На появившейся панели Создание веб-страницы или узла выберите команду Шаблоны веб-узлов (Web Site Templates).

3. Открывшееся диалоговое окно Шаблоны веб-узлов содержит шаблоны для создания Web-узлов (табл. 11.2).

Таблица 11.2. Шаблоны, используемые для создания Web-узлов

Шаблон | Назначение
Одностраничный веб-узел (One Page Web) | Создает Web-узел, содержащий одну страницу
Веб-узел поддержки заказчиков (Customer Support Web) | Создает Web-узел поддержки покупателей вашей продукции, на котором они смогут разместить свои замечания и предложения относительно качества товаров и услуг
Пустой веб-узел (Empty Web) | Создает пустой Web-узел
Личный веб-узел (Personal Web) | Создает многостраничный персональный Web-узел
Веб-узел проекта (Project Web) | Web-узел проекта. Данный шаблон можно использовать как координационный и дискуссионный центр для ведения крупного проекта. На страницах Web-узла можно размещать информацию об участниках проекта, состоянии дел, обсуждать важнейшие вопросы и т.д.
Веб-узел рабочей группы на основе SharePoint (SharePoint-based Team Web Site) | Web-узел по сотрудничеству. Содержит календарь событий, библиотеку совместно используемых документов, список контактов, задач и т.п.

Выделите курсором значок шаблона, услугами которого хотите воспользоваться. При этом в области Описание (Description) появляется краткое назначение выбранного мастера.

4. В поле Укажите расположение нового веб-узла (Specify the location of the new web) введите местоположение и имя создаваемого Web-узла.

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

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

Шаблон создания одностраничного Web-узла

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

Чтобы просмотреть структуру созданного с помощью шаблона Web-узла, отобразите в окне программы панель Список папок (Folder List), выбрав в меню Вид (View) одноименную команду. Страница, входящая в созданную структуру Web-узла, сохранена в файле с именем index.htm. По умолчанию подразумевается, что эта страница будет использоваться в качестве домашней. Откройте эту страницу, дважды щелкнув на имени файла index.htm. Страница будет открыта в режиме редактирования в рабочей области программы FrontPage (рис. 11.36).

Рис. 11.36. Web-узел, созданный с использованием шаблона Одностраничный веб-узел

Замечание

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

Шаблон создания пустого Web-узла

Для создания пустого Web-узла используется шаблон Пустой веб-узел (Empty Web). При использовании этого шаблона программа FrontPage формирует структуру Web-узла, состоящую из папок _private и images.

После завершения формирования шаблона созданный Web-узел открывается в режиме редактирования. На панели папок вы можете просмотреть структуру Web-узла. Она не содержит ни одной страницы.

Замечание

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

Шаблон создания многостраничного персонального Web-узла

Используя шаблон Личный веб-узел (Personal Web), вы сможете достаточно быстро создать персональный Web-узел. В нем вы можете разместить информацию личного характера, фотографии друзей, справочные сведения, а также, используя ссылки, просматривать наиболее часто посещаемые страницы в Интернете. К тому же этот Web-узел — прекрасная стартовая площадка для тех, кто приступает к изучению возможностей, предоставляемых программой FrontPage.

Чтобы создать персональный Web-узел с помощью шаблона, выполните следующие действия:

1. В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел (Новая страница или Web -узел).

2. На появившейся панели Создание веб-страницы или узла выберите команду Шаблоны веб-узлов (Web Site Templates).

3. В поле Укажите расположение нового веб-узла (Specify the location of the new web) открывшегося диалогового окна Шаблоны веб-узлов введите местоположение и имя создаваемого Web-узла. Назовем Web-узел, например, My Pers_ Web.

4. Дважды щелкните на значке Личный веб-узел (Personal Web). Начинается процесс создания шаблона. Через некоторое время в главном окне программы FrontPage откроется полученный Web-узел для просмотра и редактирования (рис. 11.37).

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

Рис. 11.37. Персональный Web-узел, созданный с использованием шаблона


Глава 11

Модификация персонального Web-узла

На рис. 11.37 показана домашняя страница персонального Web-узла, созданного с помощью шаблона. Она содержит набор элементов, которые вы можете использовать в том виде, в котором они предлагаются мастером, или их изменить.

В верхней части домашней страницы расположен заголовок Добро пожаловать!, представляющий собой объект, называемый объявление на странице (Page Banner). Этот объект используется для отображения в графическом виде заголовков на Web-страницах. Вид заголовка определяется в диалоговом окне Свойства объявления на странице (Page Banner Properties), открываемом двойным щелчком на заголовке или одноименной командой контекстного меню.

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

При нахождении курсора над заголовком страницы, над расположенной под заголовком датой, курсор принимает вид руки, держащей страницу.

Установите курсор на текст в центре страницы. Курсор не меняет своего внешнего вида. Текст вы можете смело удалить и на его месте разместить необходимую информацию.

Для изменения свойств объектов, над которыми курсор принимает вид руки, держащей страницу, используются соответствующие диалоговые окна. Например, для изменения формата отображаемой на странице даты вам необходимо установить курсор на дату и дважды щелкнуть мышью. Откроется диалоговое окно Дата и время (Date and Time) (рис. 11.38), используя которое вы сможете установить иной формат отображения даты.

Рис. 11.38. Диалоговое окно Дата и время

Слева на странице размещена панель ссылок, называемая также панелью навигации. Для настройки свойств панели ссылок используется диалоговое окно Свойства панели ссылок (Link Bar Properties), открываемое при двойном щелчке на этой панели.

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

1. Установите курсор на название одной из страниц на панели навигации.

2. Когда курсор примет вид руки, держащей страницу, нажмите клавишу <Ctrl> и, удерживая ее нажатой, щелкните левой кнопкой мыши. Осуществится переход на выбранную вами страницу.

Вы не можете выделить надпись на панели навигации и изменить размещенный на ней текст. Чтобы поменять названия кнопок на панели ссылок, вы должны присвоить другие названия страницам, на которые перемещаетесь с помощью этих кнопок. Например, для изменения названия Увлечения на Хобби вам необходимо выполнить следующие действия:

1. Откройте в режиме редактирования страницу с названием Увлечения. Для этого выполните одно из следующих действий:

• Дважды щелкните мышью значок файла interes.htm на панели Список папок (Folder List)
• Для перехода с домашней страницы на страницу Увлечения воспользуйтесь панелью ссылок: удерживая нажатой клавишу <Ctrl>, щелкните на надписи Увлечения

2. Установите курсор на заголовок страницы и дважды щелкните мышью.

3. В поле Текст объявления (Page banner) открывшегося диалогового окна Свойства объявления на странице (Page Banner Properties) (рис. 11.39) введите вместо Увлечения новое название заголовка, например, Хобби.

Рис. 11.39. Диалоговое окно Свойства объявления на странице

4. Нажмите кнопку ОК. Диалоговое окно Свойства объявления на странице закроется. Страница будет иметь вид, представленный на рис. 11.40.

Совет

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

Помимо приведенного выше способа изменения названия страниц, а соответственно, и названий кнопок панелей ссылок, существует еще один:

1. Перейдите в режим работы Переходы (Navigation), нажав одноименную кнопку на панели режимов Представления (Views). В рабочей области программы FrontPage отображается структура навигации персонального Web-узла, в которой страницы представлены в виде прямоугольников.

2. Установите курсор на страницу, название которой хотите изменить, нажмите правую кнопку мыши и выберите в появившемся контекстном меню команду Rename (Переименовать). Название страницы становится доступным для редактирования (рис. 11.41).

3. Введите новое название страницы и нажмите клавишу <Enter>.

Рис. 11.40. Вид Web-страницы после изменения ее названия

Рис. 11.41. Изменение названий страниц в режиме Переходы

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

Чтобы изменить на панели ссылок название кнопки перехода на домашнюю страницу, вы должны воспользоваться вкладкой Переходы (Navigation) диалогового окна Настройка веб-узла (Web Settings) (рис. 11.42).

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

Для открытия этого окна воспользуйтесь командой Настройка веб-узла (Web Settings) из меню Сервис (Tools). Затем в текстовое поле Домашняя страница (Home page) вместо Домой введите новое название ссылки и нажмите кнопку ОК. Просмотрите, как теперь выгладят панели ссылок. Походите по страницам Web-узла.

Совет

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

Шрифты, цвет текста и гиперссылок, фоновое изображение персонального Web-узла определены темой, заданной мастером по умолчанию. Для изменения темы оформления Web-узла воспользуйтесь диалоговым окном Темы (Themes), открываемым командой Тема (Theme) из меню Формат (Format). Более подробно о темах оформления Web-узлов рассказано в главе 15.


Глава 11

Шаблон создания Web-узла поддержки покупателей

Шаблон Веб-узел поддержки заказчиков (Customer Support Web) позволяет создать Web-узел поддержки покупателей вашей продукции. На страницах узла посетители смогут ознакомиться с предлагаемыми товарами и услугами, задать интересующие их вопросы, разместить свои замечания и предложения относительно качества товара. На рис. 11.43 показана структура Web-узла, созданного с использованием данного шаблона.

Рис. 11.43. Структура Web-узла, созданного с помощью шаблона Веб-узел поддержки заказчиков

Web-узел содержит большое количество страниц, имеющих следующее назначение:

  • Что нового (What's New) — информация о том новом, что предлагается посетителю
  • Продукты (Products) — страница с информацией о предлагаемых товарах и услугах
  • Типичные вопросы (F.A.Q.) — страница с ответами на часто задаваемые вопросы
  • Запрос на обслуживание (Service Request) — страница поддержки покупателей продукции. Содержит форму, в которой пользователь может описать проблему, с которой он столкнулся, и задать соответствующие вопросы
  • Предложения (Suggestions) — страница, на которой посетители с помощью формы могут ввести свои предложения
  • Каталоги и справочники (Catalogs/Manuals) — страница, используя которую пользователи смогут загрузить на свои компьютеры программное обеспечение или документы с вашего Web-узла, используя протокол FTP (File Transfer Protocol)
  • Форум поддержки (Support Forum) — страница для участия в форуме
  • Обратитесь к нам (Contact Us) — страница с контактной информацией
  • Поиск (Search) — страница, содержащая форму для поиска нужной информации на Web-узле

Шаблон создания Web-узла проекта

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

Рис. 11.44. Структура Web-узла, созданного с помощью шаблона Веб-узел проекта

Web-узел содержит большое количество страниц, имеющих следующее назначение:

  • Участники (Members) — страница с информацией об участниках проекта
  • Расписание (Schedule) — страница, содержащая план проекта
  • Архив (Archive) — страница доступа к совместно используемым документам и файлам
  • Поиск (Search) — форма для поиска информации, содержащейся в документах Web-узла
  • Обсуждения (Discussions) — страница, содержащая ссылки на дискуссионные группы Обсуждения технических условий (Requirements) и Информационная база данных (Knowledge Base), предназначенные для проведения диалоговых форумов
  • Контактные сведения (Contact Inf) — страница с контактной информацией


Глава 11

Шаблоны и мастера для создания Web-страниц

Чтобы просмотреть шаблоны и мастера, предлагаемые программой FrontPage для создания Web-страниц, в меню Файл (File) выберите команду Создать (New), затем в открывшемся подменю — опцию Страница или веб-узел (Page or Web). В окне программы появляется панель Создание веб-страницы или узла (New Page or Web), на которой выберите команду Шаблоны страниц (Page Templates). Появится диалоговое окно Шаблоны страниц, представленное на рис. 11.45.

Рис. 11.45. Диалоговое окно Шаблоны страниц позволяет выбрать шаблоны и мастера для создания Web-страницы

Диалоговое окно Шаблоны страниц содержит три вкладки. На вкладке Общие (General) указаны имена основных шаблонов страниц. Вкладка Страница рамок (Frames Pages) содержит названия шаблонов страниц, использующих фреймы. В этой главе мы ограничимся рассмотрением шаблонов вкладки Общие. Описание шаблонов вкладки Страница рамок будет дано в главе 20.

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

Первым в списке шаблонов идет Обычная страница (Normal Page), представляющий собой шаблон пустой страницы. Для создания страницы с использованием данного шаблона нет необходимости открывать диалоговое окно Шаблоны страниц (Page Templates). Достаточно щелкнуть мышью на кнопке Создать (New) стандартной панели инструментов. По умолчанию всегда предполагается использование шаблона Обычная страница.

В табл. 11.3 приведен список шаблонов и мастеров создания страниц, предоставляемых программой FrontPage.

Замечание

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

Таблица 11.3. Шаблоны и мастера создания Web-страниц

Шаблон или мастер | Назначение
Обычная страница (Normal Page) | Пустая страница
Библиография (Bibliography) | Страница, содержащая ссылки на другие страницы
Форма подтверждения (Confirmation Form) | Форма подтверждения о получении информации
Форма обратной связи (Feedback Form) | Форма, предназначенная для ввода замечаний
Мастер страницы формы (Form Page Wizard) | Мастер создания формы для опроса клиентов. С помощью этого мастера вы можете сформировать список вопросов, на которые хотите получить ответы от клиентов
Типичные вопросы (Frequently Asked Questions) | Страница, содержащая вопросы и ответы
Гостевая книга (Guest Book) | Гостевая страница, на которой посетители Web-узла могут высказать свое мнение
Узкий выровненный по левому краю текст (Narrow, Left-aligned Body) |  | Информация на этой странице размещается в одну колонку вдоль ее левого края; справа можно поместить графическое изображение
Узкий выровненный по правому краю текст (Narrow, Right-aligned Body) |  | Страница, информация на которой размещается в одну колонку справа; слева можно вставить графическое изображение
Текст одним столбцом (One-column Body) |  | Информация размещается в одну колонку по центру этой страницы
Текст одним столбцом с оглавлением и врезкой (One-column Body with Contents and Sidebar) |  | Информация размещается в одну колонку по центру; слева на странице — оглавление, а справа — область эффектов, которая может содержать текст и графику
Текст одним столбцом с оглавлением слева (One-column Body with Contents on Left) |  | Страница, на которой слева будет показано оглавление, а справа — вся остальная информация
Текст одним столбцом с оглавлением справа (One-column Body with Contents on Right) |  | Страница, на которой справа будет показано оглавление, а слева — вся остальная информация
Текст одним столбцом с зигзагообразной врезкой (One-column Body with Staggered Sidebar) |  | Страница, на которой с левой стороны размещаются две колонки с эффектами оформления в шахматном порядке, а с правой — колонка основного текста
Текст одним столбцом с двумя врезками (One-column Body with Two Sidebar) |  | В центре страницы будет размещен основной текст, слева от текста — две колонки с эффектами оформления в шахматном порядке, а справа — еще одна колонка с эффектами оформления
Текст одним столбцом с врезкой двумя столбцами (One-column Body with Two-column Sidebar) |  | Страница, на которой с левой стороны размещается колонка основного текста, а с правой — две колонки с эффектами оформления
Коллекция фотографий (Photo Gallery) |  | Страница, предназначенная для размещения графических изображений
Страница поиска (Search Page) |  | Страница в виде формы, используемая для поиска слов
Оглавление (Table of Contents) |  | Страница, содержащая маркированный список ссылок на другие страницы Web-узла
Текст тремя столбцами (Three-column Body) |  | Страница, содержащая заголовок и текст, размещенный в три колонки
Текст двумя столбцами (Two-column Body) |  | Страница, содержащая заголовок и текст, размещенный в две колонки
Текст двумя столбцами с оглавлением и врезкой (Two-column Body with Contents and Sidebar) | Страница, содержащая в центре текст в виде двух колонок. Слева от текста расположено оглавление, справа — колонка с эффектами оформления
Текст двумя столбцами с оглавлением слева (Two-column Body with Contents on Left) | Страница, содержащая в центре текст в виде двух колонок. Слева от текста расположено оглавление
Зигзагообразный текст двумя столбцами (Two-column Staggered Body) | Страница, содержащая текст в двух колонках. Абзацы текста чередуются в шахматном порядке
Зигзагообразный текст двумя столбцами с оглавлением и врезкой (Two-column Staggered Body with Contents and Sidebar) | Страница, содержащая текст в двух колонках. Абзацы текста чередуются в шахматном порядке. Слева от текста расположено оглавление, справа — область с эффектами оформления
Регистрационная форма (User Registration) | Форма регистрации пользователей
Широкий текст с заголовками (Wide Body with Headings) | Страница, оформленная в виде нескольких абзацев с подзаголовками


Глава 11

Шаблон Коллекция фотографий

Шаблон Коллекция фотографий (Photo Gallery) создает страницу, предназначенную для размещения графических изображений (рис. П.46). Этот шаблон отсутствовал в предыдущих версиях программы FrontPage. Удобство шаблона Коллекция фотографий заключается в том, что на страницу, созданную с помощью данного шаблона, легко добавлять новые графические изображения, удалять имеющиеся.

Для настройки графических изображений, размещенных на странице, созданной с использованием шаблона Коллекция фотографий, предназначено диалоговое окно Свойства коллекции фотографий (Photo Gallery Properties) (рис. 11.47). Чтобы открыть это окно, установите курсор в область расположения графических изображений и выполните одно из следующих действий:

  • Дважды щелкните мышью
  • Нажмите правую кнопку мыши и выберите из контекстного меню команду Свойства фотоколлекции (Photo Gallery Properties)

Рис. 11.46. Страница, созданная с помощью шаблона Коллекция фотографий

Рис. 11.47. Диалоговое окно Свойства коллекции фотографий

Диалоговое окно Свойства коллекции фотографий (Photo Gallery Properties) содержит две вкладки. Вкладка Рисунки (Pictures) предназначена для формирования списка размещаемых на странице изображений, указания порядка их следования. Вкладка Макет (Layout) позволяет задать способ расположения графических изображений на Web-странице.

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

  • Добавить (Add) — добавляет в список и, соответственно, в Web-страницу новое графическое изображение. При нажатии на эту кнопку появляется меню из двух команд. Команда Рисунки из файлов (Pictures from Files) открывает диалоговое окно Открытие файла (File Open), позволяющее добавить изображение, находящееся в файле. Команда Рисунки из сканера и камеры (Pictures from Scanner or Cameras) добавляет на Web-страницу графическое изображение со сканера или цифровой камеры
  • Изменить (Edit) — открывает диалоговое окно Изменение рисунка (Edit Picture) (рис. 11.48), позволяющее отредактировать графическое изображение
  • Удалить (Remove) — удаляет графическое изображение из списка

Расположенные под списком кнопки Вверх (Move Up) и Вниз (Move Down) изменяют порядок следования изображений в списке и, соответственно, на Web-странице.

На Web-странице, созданной с помощью шаблона Коллекция фотографий, графические изображения отображаются в виде миниатюр, размер которых задается с помощью полей Ширина (Width) и Высота (Height) области Размер эскиза (Thumbnail).

Вкладка Рисунки содержит два флажка, установка которых:

  • Сохранить пропорции (Maintain aspect ratio) — указывает на необходимость сохранять пропорции в миниатюре
  • Размер по умолчанию (Set as Default Size) — указывает, что установленный размер необходимо использовать как значение по умолчанию

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

Кнопка Изменить (Edit) вкладки Рисунки (Pictures) открывает диалоговое окно Изменение рисунка (Edit Picture) (рис. 11.48), позволяющее отредактировать размещаемые на Web-странице графические изображения.

Рис. 11.48. Диалоговое окно Изменение рисунка

Счетчики Ширина (Width) и Высота (Height) области Размер рисунка

(Picture Size) позволяют задать размер графического изображения в пикселах. Ниже расположены флажки следующего назначения:

  • Сохранить пропорции (Maintain aspect ratio) — при установке флажка сохраняются пропорции в изображении
  • Размер по умолчанию (Set as Default Size) — установленный флажок указывает, что заданный размер будет использован как значение по умолчанию

Кнопки области Повернуть рисунок (Rotate Picture) имеют следующее назначение:

Кнопка | Назначение
 | Поворачивает изображение против часовой стрелки на 90 градусов
 | Поворачивает изображение по часовой стрелки на 90 градусов
 | Отображает изображение относительно горизонтальной оси (создает вертикальное зеркальное отражение)
 | Отображает изображение относительно вертикальной оси (создает горизонтальное зеркальное отражение)

Расположенная в диалоговом окне Изменение рисунка кнопка Обрезать (Crop) позволяет разместить на Web-странице не все изображение, а его часть. При нажатии этой кнопки на графическом изображении появляется рамка с маркерами выделения. Устанавливая курсор поочередно на маркеры, перемещайте контуры рамки, изменяя размер ограничиваемой рамкой области таким образом, чтобы она выделила на изображении нужную об ласть. Затем повторно нажмите кнопку Обрезать. Вырезанное изображение заменит собой первоначальное.

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

  • Назад (Previous) — отображает в окне изображение, находящееся в списке вкладки Рисунки перед текущим
  • Далее (Next) — отображает в окне изображение, находящееся в списке вкладки Рисунки после текущего
  • Сброс (Reset) — восстанавливает первоначальное изображение

Вкладка Макет (Layout) диалогового окна Свойства коллекции фотографий

(Photo Gallery Properties) (рис. 11.49) позволяет задать способ расположения графических изображений. Список Выберите формат (Choose a layout) содержит варианты расположения изображений и надписей к ним на Web-странице. Область Образец (Preview) позволяет просмотреть, как будет выглядеть страница при выбранном варианте расположения. Список Число рисунков в строке (Number of pictures per row) указывает количество изображений в одном ряду.

Рис. 11.49. Вкладка Макет диалогового окна Свойства коллекции фотографий


Глава 12 Размещение на Web

Размещение на Web-странице текста и заголовков

Создание нового Web-узла, Размещение текста на странице
Шрифты
Использование для форматирования символов панели инструментов
Отмена элементов форматирования символов, Использование таблицы символов, Копирование форматов символов
Форматирование абзацев
Размещение заголовков на Web-страницах
Использование списков для оформления текста
Специальные средства редактирования текста


Глава 12 Размещение на Web

Создание нового Web-узла

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

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

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

Для создания одностраничного Web-узла выполните следующие действия:

1. В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел (Page or Web). В результате в главном окне программы FrontPage появляется панель Создание веб-страницы или узла (New Page or Web).

2. Выберите на панели значение Шаблоны веб-узлов (Web Site Templates). Открывается диалоговое окно Шаблоны веб-узлов.

3. В поле Укажите расположение нового веб-узла (Specify the location of the new web) диалогового окна Шаблоны веб-узлов введите местоположение и имя создаваемого Web-узла. Например, присвоим ему имя My Test_Web.

4. Дважды щелкните на значке Одностраничный веб-узел (One Page Web). Начинается процесс создания шаблона. Через некоторое время в главном окне программы FrontPage открывается созданный Web-узел (рис. 12.1), который вы можете модифицировать. Панель Список папок (Folder List) отображает его структуру, состоящую из двух папок _private и images и страницы index.htm.

Рис. 12.1. Панель Список папок отображает структуру Web-узла, созданного с использованием шаблона Одностраничный веб-узел

Замечание

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

Дважды щелкните мышью на панели Список папок (Folder List) на имени файла index.htm. Данная пустая Web-страница откроется в рабочей области программы FrontPage. Можно приступать к размещению в ней объектов.

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

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

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

Совет

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


Глава 12 Размещение на Web

Шрифты

Когда говорят о шрифте, используемом в оформлении Web-страницы, то подразумевают следующее:

  • Тип шрифта
  • Размер
  • Начертание
  • Цвет
  • Специальные эффекты

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

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

Основные параметры шрифта (тип, размер и начертание) можно задать с помощью диалогового окна Шрифт (Font) и кнопок на панели инструментов Форматирование (Formatting).

Использование диалогового окна Шрифт

Наиболее полный набор инструментов для работы со шрифтами предоставляет диалоговое окно Шрифт (Font). В этом окне можно выбрать требуемый тип шрифта и установить все его параметры, доступные в программе FrontPage. Для открытия диалогового окна Шрифт (рис. 12.2) выполните одно из следующих действий:

  • Выберите в меню Формат (Format) команду Шрифт (Font)
  • Щелкните правой кнопкой мыши на рабочей области страницы и в появившемся на экране контекстном меню выберите команду Шрифт (Font)
  • Нажмите комбинацию клавиш <Alt>+<Enter>

Рис. 12.2. Вкладка Шрифт одноименного диалогового окна

Диалоговое окно содержит вкладки Шрифт (Font) и Межзнаковый интервал (Character Spacing). Назначение списков вкладки Шрифт приведено в табл. 12.1.

Таблица 12.1. Назначение списков вкладки Шрифт

Список | Назначение
Шрифт (Font) | Шрифты, установленные на компьютере
Начертание
(Font Style) 		Начертание шрифтов. Список содержит следующие значения:
  • Обычный (Regular) — используется для основного текста
  • Курсив (Italic) — предназначен для выделения слов, заголовков
  • Полужирный (Bold) — используется для выделения слов, заголовков
  • Полужирный курсив (Bold Italic) — комбинированный стиль, сочетающий оба предыдущих
Размер (Size) Размер шрифта (от 8 до 36 пт)
Цвет (Color) Цвета для оформления текста

Область Видоизменение (Effects) вкладки Шрифт содержит флажки, управляющие различными эффектами отображения шрифтов. Назначение данных флажков представлено в табл. 12.2.

Таблица 12.2. Назначение флажков вкладки Шрифт

Флажок | Назначение
подчеркнутый (Underline) | Текст подчеркнут сплошной линией
зачеркнутый (Strikethrough) | Текст перечеркнут сплошной линией
надчеркнутый (Overline) | Над текстом расположена линия
мерцание (Blink) | Мерцающий текст
надстрочный (Superscript) | Текст располагается по верхнему индексу
подстрочный (Subscript) | Текст располагается по нижнему индексу
малые прописные (Small Caps) | Текст отображается прописными буквами, имеющими размер строчных
все прописные (All caps) | Текст отображается только прописными буквами
первые прописные (Capitalize) | Все слова текста начинаются с прописной буквы
скрытый (Hidden) | Текст не появляется при печати
жирный (Strong) | Текст имеет полужирное начертание
курсив (Emphasis) | Текст отображается с эффектом выразительности (обычно шрифтом, имеющим начертание курсив)
пример (Sample) | Текст отображается шрифтом, напоминающим шрифт пишущей машинки (обычно моноширинный шрифт)
определение (Definition) | Текст отображается курсивом, используемым для выделения терминов
ссылка (Citation) | Текст отображается курсивом, используемым для выделения цитат
переменная (Variable) | Текст отображается курсивом, используемым для выделения переменных
клавиатура (Keyboard) | Отображает текст, вводимый пользователем
код (Code) | Текст отображается моноширинным шрифтом, используемым для написания кодов программ

Установленные вами параметры шрифта отображаются в разделе Образец (Preview) диалогового окна Шрифт. Таким образом, вы можете подбирать параметры и просматривать результат, не покидая диалогового окна.

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

Чтобы отформатировать символы с использованием диалогового окна Шрифт:

1. Выделите на Web-странице фрагмент текста, в котором хотите изменить форматирование символов.

2. Выберите в меню Формат (Format) команду Шрифт.

3. Из списка Шрифт выберите требуемый шрифт.

4. Используя список Начертание (Font Style), укажите начертание символов шрифта.

5. Выберите из предложенных вариантов списка Размер (Size) устраивающий вас размер шрифта.

6. Для применения к тексту эффекта установите соответствующий флажок в области Видоизменение (Effects).

7. Нажмите кнопку ОК. Диалоговое окно закроется.

Совет

Для применения форматирования сразу ко всему тексту Web-страницы выделите текст с помощью команды Выделить все (Select All) из меню
Правка (Edit).

Установка интервалов и смещения

Вторая вкладка диалогового окна Шрифт (Font) называется Межзнаковый интервал (Character Spacing) (рис. 12.3). С помощью параметров, расположенных на этой вкладке, можно установить межсимвольные интервалы и размер смещения символов относительно базовой линии вверх или вниз.

Назначение параметров вкладки Межзнаковый интервал описано в табл. 12.3.

Таблица 12.3. Параметры вкладки Межзнаковый интервал Опция Назначение

Опция Назначение
Раскрывающийся список Интервал (Spacing)

Устанавливает расстояние между символами и содержит значения:
  • обычный
  • разреженный
  • уплотненный
Раскрывающийся список
Смещение 		Задает смещение символов и содержит следующие значения
  • по линии шрифта
  • по линии надстрочных знаков
  • по линии подстрочных знаков
  • по верхнему краю
  • по верхнему краю шрифта
  • по середине
  • по нижнему краю
  • по нижнему краю шрифта

Рис. 12.3. Вкладка Межзнаковый интервал диалогового окна Шрифт

Пример использования некоторых параметров вкладки Межзнаковый интервал представлен на рис. 12.4.

Рис. 12.4. Использование параметров вкладки Межзнаковый интервал

Список Интервал (Spacing) задает интервал между симво лами. Если вы хотите использовать интервал, установленный по умолчанию, выберите обычный. С помощью опций разреженный (Expanded) и уплотненный (Condensed) можно увеличить или уменьшить интервал между всеми символами на величину, устанавливаемую счетчиком на (By). При выборе любой из этих опций FrontPage по умолчанию устанавливает стандартное значение
в 1 пт.

Использование верхнего и нижнего индексов

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

Для установки индекса используется диалоговое окно Шрифт (Font). В разделе Видоизменение (Effects) установите флажок надстрочный (Superscript), чтобы поднять символы, или подстрочный (Subscript) — чтобы их опустить.

Установка малых прописных и всех прописных букв

В разделе Видоизменение вкладки Шрифт одноименного диалогового окна содержатся флажки малые прописные (Small Caps) и все прописные (All caps). Эти эффекты целесообразно использовать в заголовках.


Глава 12 Размещение на Web

Использование для форматирования символов панели инструментов

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

Рис. 12.5. Панель инструментов Форматирование

Три первые элемента на панели инструментов — раскрывающиеся списки Стиль (Style), Шрифт (Font) и Размер шрифта (Font Size), с помощью которых вы можете выбрать стиль, тип и размер шрифта. Кнопки Полужирный (Bold), Курсив (Italic) и Подчеркнутый (Underline) позволяют установить наиболее часто используемые начертания. Последние два элемента на панели, относящиеся к форматированию символов, — Выделить (Highlight) и Цвет текста (Font Color). С помощью этих раскрывающихся списков вы можете установить цвет фона для выделенного фрагмента и цвет шрифта.

Совет

Если панель инструментов форматирования отсутствует на экране, для ее отображения в меню Вид (View) главного окна программы FrontPage выберите команду Панели инструментов (Toolbars). Далее в открывшемся списке панелей инструментов выберите Форматирование.

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

Изменение цвета отображения текста и фона

При оформлении текста вы можете изменять цвет символов как с помощью диалогового окна Шрифт (Font), так и кнопки Цвет текста (Font Color) на панели форматирования. Для установки цвета с помощью диалогового окна Шрифт выполните следующие действия:

1. Выделите фрагмент текста, для которого вы предполагаете изменить цвет.

2. Откройте диалоговое окно Шрифт.

3. Из списка Цвет (Color) выберите требуемый цвет.

4. Нажмите кнопку ОК для закрытия окна.

Выделение цветом с помощью панели инструментов

С помощью панели инструментов форматирования вы можете не только поменять цвет шрифта, но и выделить текст, изменив его фон. Для этого используются кнопки Цвет текста (Font Color) [image] и Выделить (Highlight) [image] . Обе эти кнопки открывают палитры, позволяющие выбрать нужный цвет из имеющихся.

Для изменения цвета шрифта с помощью панели инструментов выполните следующие действия:

1. Выделите фрагмент текста, цвет шрифта которого вы хотите изменить.

2. Нажмите стрелку на кнопке Цвет текста (Font Color) и в открывшейся палитре выберите нужный цвет.

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

Для изменения цвета фона шрифта выполните следующие действия:

1. Выделите фрагмент текста, фон которого собираетесь окрасить.

2. Нажмите стрелку на кнопке Выделить (Highlight) и в открывшейся палитре выберите нужный цвет.


Глава 12 Размещение на Web

Отмена элементов форматирования символов

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

  • В меню Формат (Format) выбрать команду Удалить оформление (Remove Formatting)
  • Нажать комбинацию клавиш <Ctrl>+<Spacebar>
  • Нажать комбинацию клавиш <Ctrl>+<Shift>+<Z>

Использование таблицы символов

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

1. Установите курсор в то место страницы, где нужно вставить символ.

2. Выберите команду Символ (Symbol) из меню Вставка (Insert). Откроется диалоговое окно Символ, представленное на рис. 12.6. Оно содержит списки, позволяющие выбрать шрифт и набор символов.

3. Просмотрите список символов, используя для перемещения клавиши со стрелками или мышь.

Рис. 12.6. Диалоговое окно Символ

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

5. Завершив выбор всех символов, нажмите кнопку Закрыть (Close) для закрытия диалогового окна.

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

Копирование форматов символов

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

Чтобы скопировать формат, выполните следующие действия:

1. Выделите символы или фрагмент текста, имеющие формат, который вы хотите скопировать.

2. Нажмите кнопку Формат по образцу (Format Painter) [image] на стандартной панели инструментов. Курсор примет вид кисти.

3. Выделите фрагмент текста, для которого вы хотите применить скопированный формат. Он тотчас же примет необходимый вид.

Копируемые параметры определяются выделенными символами:

  • Если выделение включает символ абзаца ( ¶ ), то копируется стиль абзаца и все параметры формата абзаца, а также стиль и параметры формата символов
  • Если выделение не включает символ абзаца, то копируется стиль символов и параметры формата символов
  • Если выделение включает только маркер абзаца, то копируется стиль абзаца и параметры формата данного абзаца


Глава 12 Размещение на Web

Форматирование абзацев

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

При форматировании абзаца оперируют следующими понятиями:

  • Отступ — устанавливает расстояние текста абзаца от поля страницы. Для абзаца в программе FrontPage можно задать левый и правый отступы
  • Выравнивание текста — используется в зависимости от цели:
  • По левому краю
  • По правому краю
  • По центру
  • По ширине
  • Межстрочный интервал (Интерлиньяж) - определяет расстояние между строками абзаца
  • Рамки и заливка — предназначены для дизайна абзаца

Средства форматирования абзаца

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

Замечание

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

FrontPage предоставляет в распоряжение разработчика следующие средства форматирования абзаца:

  • Команда Абзац (Paragraph) из меню Формат (Format) — открывает диалоговое окно Абзац, в котором можно задать выравнивание информации в абзаце, установить отступы абзаца от края страницы, межстрочный интервал
  • Команда Абзац из контекстного меню — дублирует действие одноименной команды из меню Формат (Format)
  • Команда Границы и заливка (Borders and Shading) из меню Формат (Format) — открывает диалоговое окно Границы и заливка, с помощью которого можно выделить абзац рамкой
  • Панель инструментов Форматирование — выбор каждого инструмента панели осуществляется нажатием соответствующей кнопки. В отличие от диалоговых окон, используя которые можно установить сразу несколько параметров форматирования, нажатие кнопки на панели форматирования приводит к изменению только одного параметра. Однако, если требуется изменить один элемент форматирования, данное средство позволяет сделать это быстрее, чем с помощью аналогичной команды меню

Команда Абзац

Для установки нескольких параметров форматирования абзаца наиболее удобно использовать диалоговое окно Абзац (рис. 12.7). Для открытия этого окна выберите команду Абзац (Paragraph) из меню Формат (Format) или из контекстного меню, открываемого с помощью правой кнопки мыши.

С помощью диалогового окна Абзац вы можете установить доступные в FrontPage элементы форматирования абзаца, описанные
в табл. 12.4.

Таблица 12.4. Параметры, используемые для форматирования абзаца с помощью диалогового окна Абзац

Опция |  | Назначение
Выравнивание (Alignment) |  | Выравнивает абзац по левому, правому краям, по центру, по ширине Отступ (Indentation)
слева (Before text) |  | Отступ слева от абзаца
справа (After text) |  | Отступ справа от абзаца
первая строка (Indent first line) |  | Отступ для первой строки абзаца
Интервал (Spacing) |
перед (Before) | Интервал перед абзацем
после (After) | Интервал после абзаца
между слов (Word) | Интервал между словами. При использовании этого параметра вы не можете просмотреть результат примененного форматирования в редакторе программы FrontPage. Действие этого параметра поддерживается не всеми обозревателями
между строк (Line spacing) | Показывает величину междустрочного интервала

Рис. 12.7. Диалоговое окно Абзац

Раздел Образец (Preview) диалогового окна Абзац позволяет просмотреть, как будет выглядеть ваш текст в результате примененного форматирования.

Форматирование с помощью диалогового окна Абзац осуществляется следующим образом:

1. Поместите курсор в любое место форматируемого абзаца.

2. Откройте диалоговое окно Абзац.

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

4. Нажмите кнопку ОК для закрытия диалогового окна.

Форматирование абзацев с использованием панели инструментов

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

  • Изменить стиль абзаца, используя значения раскрывающегося списка Style (предлагаемые программой FrontPage стили удобно использовать, например, для создания заголовков)
  • Установить выравнивание с помощью кнопок По левому краю (Align Left), По центру (Center), По правому краю (Align Right), По ширине (Justify)
  • Создать фиксированные отступы, используя кнопки Увеличить отступ (Increase Indent) и Уменьшить отступ (Decrease Indent)

Выравнивание

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

Чтобы установить способ выравнивания с помощью команды меню, выполните следующие действия:

1. Выделите один или несколько абзацев, которые вы предполагаете выровнять. Если требуется выровнять один абзац, установите курсор в пределах этого абзаца.

2. Откройте диалоговое окно Абзац, выбрав команду Абзац из меню Формат или из контекстного меню.

3. Откройте список видов выравнивания Выравнивание (Alignment).

4. Выберите устраивающий вас вид выравнивания и нажмите кнопку ОК.

Для выравнивания абзаца с помощью кнопок панели инструментов Форматирование достаточно его выделить и нажать кнопку на панели инструментов, соответствующую выбранному типу выравнивания: По левому краю (Align Left) [image] , По правому краю (Align Right) [image] , По центру (Center) [image] , По ширине (Justify) [image] . На рис. 12.8 представлены четыре вида выравнивания текста.

Рис. 12.8. Использование различных типов выравнивания: по левому краю, по правому краю, по центру и по ширине

Установка расстояния перед абзацем и после него

Для установки интервала перед абзацем и после него достаточно вставить дополнительную строку, нажав клавишу <Enter> или комбинацию клавиш <Shift>+<Enter>. При использовании комбинации клавиш получается интервал меньшего размера, чем при нажатии клавиши <Enter>. В некоторых случаях (например, при подготовке места для вставки фафических объектов, формул и т.д.) это удобнее, но не во всех (например, при оформлении заголовков). Тогда можно воспользоваться диалоговым окном Абзац, выполнив следующие действия:

1. Выделить форматируемый абзац.

2. Выбрать в меню Формат (Format) команду Абзац (Paragraph).

3. В появившемся диалоговом окне Абзац установить требуемые значения интервалов в полях перед (Before) и после (After) области Интервал (Spacing). Для этого ввести необходимые значения в поля или воспользоваться кнопками, расположенными в правой части полей. Нажатие кнопок приводит к изменению значений на 1 пт.

4. Завершив установку параметров, нажать кнопку ОК.

Установка межстрочного интервала

Межстрочный интервал определяет расстояние между строками текста. В редакторе FrontPage межстрочный интервал выражен в строках. Для его изменения предназначен раскрывающийся список между строк (Line spacing) диалогового окна Абзац. В табл. 12.5 описано назначение опций данного списка.

Таблица 12.5. Опции, используемые для изменения межстрочного интервала

Опция | Назначение
одинарный (Single) | Устанавливает межстрочный интервал для каждой строки в соответствии с наибольшим символом в этой строке
полуторный (1.5 lines) ( ) | Устанавливает для каждой строки межстрочный интервал в полтора раза больший, чем при одиночном междустрочном интервале
двойной (Double) | Устанавливает для каждой строки межстрочный интервал в два раза больший, чем при одиночном межстрочном интервале

Обрамление и заливка

С помощью диалогового окна Границы и заливка (рис. 12.9) можно поместить фрагмент текста в рамку, оформленную с помощью различных стилей, или выделить с помощью заливки. Для открытия этого окна используется команда Границы и заливка (Borders and Shading) из меню Формат (Format) и аналогичная команда из контекстного меню абзаца.

Диалоговое окно Границы и заливка содержит две вкладки: Граница (Borders) и Заливка (Shading). На рис. 12.9 показана вкладка Граница, а в табл. 12.6 приведено назначение ее опций.

Таблица 12.6. Опции вкладки Граница

Опция | Назначение
по умолчанию (None) | Удаляет элементы обрамления
рамка (Box) | Создает обрамление в виде однородной рамки
другая (Custom) | Создает произвольное обрамление, т.е. стороны рамки могут иметь различное оформление
Стиль (Style) | Содержит восемь типов линий обрамления
Цвет (Color) | Задает цвет линии
Ширина (Width) | Задает толщину линии обрамления
Образец (Preview) | Позволяет подбирать различные варианты рамок и тени, показывая результаты выбора параметров
Поля (Padding) | Устанавливает расстояние от текста до рамки с помощью четырех полей Верхнее (Тор), Нижнее (Bottom), Левое (Left), Правое (Right)

Рис. 12.9. Диалоговое окно Границы и заливка

С помощью вкладки Заливка (Shading) диалогового окна Границы и заливка (рис. 12.10) можно получить достаточно интересные эффекты при оформлении абзацев страницы. Используя раскрывающиеся списки Цвет фона (Background color) и Цвет текста (Foreground color), можно задать цвет заливки абзаца и цвет размещенного в нем текста. Параметры области Узор (Patterns) позволяют задать в качестве заливки графическое изображение.

Рис. 12.10. Вкладка Заливка

Для помещения абзаца в рамку выполните следующие действия:

1. Установите курсор внутри форматируемого абзаца.

2. Выберите в меню Формат (Format) команду Границы и заливка (Borders and Shading). Откроется одноименное диалоговое окно.

3. Выберите из предложенных типов обрамления абзаца опцию Рамка (Box).

4. Из списка Стиль (Style) подберите стиль рамки. В области Образец (Preview) для рамки будет использована линия указанного типа.

5. Подберите в раскрывающемся списке Цвет (Color) цвет рамки.

6. Используя параметры области Поля (Padding), установите расстояние от текста до рамки, введя желаемые величины в поля Верхнее (Тор), Нижнее (Bottom), Левое (Left), Правое (Right). В качестве альтернативного средства вы можете несколько раз нажать кнопку со стрелкой, расположенную в правой части каждого из полей, до тех пор, пока в поле не появится требуемое расстояние в пунктах.

7. Чтобы выбрать заливку, перейдите на вкладку Заливка.

8. Используя раскрывающиеся списки Цвет фона (Background color) и Цвет текста (Foreground color), определите цвет заливки и текста.

9. Завершив установку параметров, нажмите кнопку ОК для закрытия диалогового окна.


Глава 12 Размещение на Web

Размещение заголовков на Web-страницах

Мы рассмотрели средства форматирования текста, предлагаемые разработчику программой FrontPage. Однако первое, с чего, вероятно, начинается создание Web-страницы. — это размещение заголовка.

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

Программа FrontPage позволяет для форматирования заголовков использовать список Стиль (Style) на панели форматирования, а также рассмотренные выше элементы форматирования символов. Список Стиль содержит значения Заголовок 1 (Heading 1), Заголовок 2 (Heading 2), ... Заголовок 6 (Heading 6), позволяющие создавать заголовки шести уровней, оформляемые в виде абзаца. Заголовки различных размеров показаны на рис. 12.11.

Рис. 12.11. Программа FrontPage позволяет создавать заголовки шести уровней

Разместим заголовок на домашней странице одностраничного Web-узла, созданного нами в начале главы:

1. Откройте тестовый Web-узел. Для этого в меню Файл (File) выберите команду Последние веб-узлы (Recent Webs), а затем в раскрывающемся списке — значение My Test_Web.

2. Откройте домашнюю страницу, дважды щелкнув мышью в области Список папок на имени файла index.htm.

3. Курсор по умолчанию установлен в верхней части пустой страницы. Введите текст заголовка.

4. Чтобы разместить заголовок в центре строки, установите на него курсор и нажмите на панели форматирования кнопку По центру (Center).

5. Выделите заголовок. Воспользовавшись списком Стиль (Style) на панели форматирования, установите значение Заголовок 1 (Heading 1).

6. Если вы хотите изменить используемый шрифт или размер заголовка, воспользуйтесь соответственно списками Шрифт (Font) и Размер (Font Size) на панели форматирования.

7 . Заголовок создан (рис. 12.12). Сохраните страницу с помощью кнопки Сохранить (Save) на стандартной панели инструментов.

Рис. 12.12. Заголовок на домашней странице Web-узла


Глава 12 Размещение на Web

Использование списков для оформления текста

При оформлении Web-страниц можно использовать списки. Принято выделять два типа списков:

  • Маркированные списки . Используются при перечислении или выделении отдельных фрагментов текста. Слева от элемента маркированного списка имеется специальный символ маркера
  • Нумерованные списки . Полезны в тех случаях, когда вам нужно определить порядок изложения материала. У элемента нумерованного списка слева расположен номер последовательной нумерации

FrontPage предоставляет простые и удобные в использовании средства для создания маркированных или нумерованных списков, а также большой набор стандартных форматов списков.

Формат маркированного или нумерованного списка можно определить как до, так и после ввода текста списка. В любом случае, после выбора формата списка FrontPage по умолчанию устанавливает выступ и ставит номер (или символ маркера) в начале каждой строки выделенного текста.

Формат маркированного или нумерованного списка применяется последовательно к каждому абзацу. Всякий раз при нажатии <Enter> в начале нового абзаца добавляется очередной номер или символ маркера.

Создание списков

Для создания списков можно использовать диалоговое окно Список (Bullets and Numbering) (рис. 12.13), а также список Стиль (Style) и кнопки Нумерация (Numbering) и Маркеры (Bullets) на панели форматирования. Как обычно, диалоговое окно предоставляет разработчику более широкие возможности. Оно содержит три вкладки следующего назначения:

  • Графические маркеры (Picture Bullets) — позволяет задать вид маркера в виде изображения
  • Обычные маркеры (Plain Bullets) — позволяет задать вид маркированного списка из предложенных вариантов
  • Нумерация (Numbers) — позволяет задать вид нумерованного списка из предложенных вариантов

Для создания маркированных или нумерованных списков с использованием диалогового окна Список (Bullets and Numbering) выполните следующие действия:

1. Выделите несколько абзацев текста, предназначенных для создания списка.

2. Выберите команду Список (Bullets and Numbering) из меню Формат (Format). Открывается диалоговое окно Список.

Рис. 12.13. Диалоговое окно для создания списка

3. Перейдите на вкладку Обычные маркеры (Plain Bullets) или Нумерация

(Numbers), в зависимости от того, какой список вы создаете, маркированный или нумерованный.

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

5. Нажмите ОК.

Для продолжения списка поместите курсор на последний маркер абзаца и нажмите клавишу <Enter>. FrontPage автоматически форматирует новый абзац.

Замечание

Для создания маркированных списков, у которых в качестве маркера применяется изображение, предназначена вкладка Графические маркеры (Picture Bullets). При использовании тем в оформлении страницы программа FrontPage по умолчанию предложит вам вариант изображения. Для этого достаточно установить на этой вкладке опцию использовать из текущей темы (Use pictures from current theme). Если вы хотите использовать какое-либо иное изображение, то установите опцию задать рисунок (Specify picture) и для его поиска нажмите кнопку Обзор (Browse).

Совет

При создании нумерованных списков, нумерация которых начинается не с единицы, воспользуйтесь на вкладке Нумерация (Numbers) полем Начать с (Start At), где введите число, с которого должна начаться нумерация (рис. 12.14).

Рис. 12.14. Вкладка Нумерация диалогового окна Список

Создание списков с использованием панели инструментов

По умолчанию при создании маркированного списка с помощью панели инструментов Форматирование в качестве символа маркера применяется маленький черный кружок. Если вы хотите использовать другой символ маркера из стандартного набора, предварительно выберите его на вкладке Обычные маркеры (Plain Bullets) диалогового окна Список (рис. 12.15), открыв его командой Список (Bullets and Numbering) из меню Формат (Format). В результате в текущем сеансе будет устанавливаться выбранный вами символ маркера.

Рис. 12.15. Вкладка Обычные маркеры диалогового окна Список

Для создания списков на панели инструментов форматирования предназначены две кнопки:

Кнопка | Название | Назначение
 | Маркеры (Bullets) | Создает маркированный список
 | Нумерация (Numbering) | Создает нумерованный список

Замечание

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

Для создания списков с помощью панели форматирования можно также использовать раскрывающийся список Стиль, содержащий следующие стили списков:

Стиль | Назначение
Маркированный список (Bulleted List) | Маркированный список
Нумерованный список (Numbered List) | Нумерованный список
Список каталогов (Directory List) | Список в виде небольших коротких абзацев
Список меню (Menu List) | Список, элементы которого представлены одной строкой
Список определений (Definition) | Список в виде коротких определений

Изменение свойств списка

Диалоговое окно Список (Bullets and Numbering) позволяет создавать списки с требуемыми параметрами. Для изменении свойств списка используется диалоговое окно Свойства списка (List Properties) которое открывается при выделении изменяемого списка и выполнении одною из следующих действий:

  • Выбора в меню Формат (Format) команды Список (Bullets and Numbering)
  • Выбора команды контекстного меню Свойства списка (List Properties)

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


Глава 12 Размещение на Web

Специальные средства редактирования текста

Программа FrontPage входит в Microsoft Office XP, поэтому, как и все программные продукты, входящие в его состав, содержит средства проверки орфографии, тезаурус. Рассмотрим их использование при редактировании текста.

Проверка орфографии

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

  • Выбрать в меню Сервис (Tools) команду Орфография (Spelling)
  • Нажать кнопку Орфография (Spelling) [image] на стандартной панели инструментов
  • Нажать на клавиатуре клавишу <F7>

Проверка орфографии сводится к сравнению слов, присутствующих в документе, со словами из словаря. Программа FrontPage использует словарь, доступный программам, входящим в Microsoft Office. Встречая слово, которое отсутствует в словаре, FrontPage автоматически открывает диалоговое окно Орфография (Spelling) (рис. 12.17).

Рис. 12.17. Диалоговое окно Орфография

В диалоговом окне Орфография (Spelling) находятся поля, представленные в табл. 12.7.

Таблица 12.7. Назначение полей диалогового окна Орфография

Поле | Назначение
Нет в словаре (Not in Dictionary) | Соответствует орфографической ошибке. Отображает слово, не найденное в словаре
Заменить на (Change To) | Содержит слово, на которое предлагается заменить ошибочное
Варианты (Suggestions) | Предлагает список слов для замены из основного словаря и открытых вспомогательных словарей при орфографической ошибке и объясняет причину выделения сочетания слов при грамматической ошибке

Диалоговое окно Орфография (Spelling) содержит кнопки, назначение которых описано в табл. 12.8.

Таблица 12.8. Назначение кнопок диалогового окна Орфография

Кнопка | Назначение
Пропустить (Ignore) | Пропускает без изменения слово, присутствующее в поле Нет в словаре (Not in Dictionary), и продолжает проверку орфографии
Пропустить все (Ignore All) | Пропускает без изменения все вхождения слова, присутствующее в поле Нет в словаре, и продолжает проверку орфографии, оставляя без внимания все последующие вхождения этого слова
Заменить (Change) | Заменяет слово, присутствующее в поле Нет в словаре, словом, содержащимся в поле Заменить на (Change To)
Заменить все (Change All) | Заменяет в Web-странице все вхождения слова, присутствующего в поле Нет в словаре, словом, содержащимся в поле Заменить на
Добавить (Add) | Добавляет слово, содержащееся в поле Нет в словаре, в словарь
Варианты (Suggest) | При нажатии на кнопку в поле Варианты (Suggestions) размещается список вариантов замены
Отмена (Cancel) | Прекращает проверку орфографии и закрывает диалоговое окно Орфография

Для проверки орфографии на открытой Web-странице выполните следующие действия:

1. Чтобы проверить фрагмент текста, выделите его. В том случае, если проверяется вся страница, данный пункт опускается.

2. В меню Сервис (Tools) выберите команду Орфография (Spelling) или нажмите одноименную кнопку стандартной панели инструментов.

3 . Если ошибок не найдено, появляется сообщение, представленное на рис. 12.18. Нажмите кнопку ОК.

Рис. 12.18. Сообщение, появляющееся при отсутствии в тексте ошибок

4. После нахождения первого ошибочного с точки зрения FrontPage слова открывается окно Орфография (Spelling). Поле Варианты (Suggestions) будет содержать слова для замены ошибочного слова.

• Если слово, появившееся в поле Заменить на (Change To), на ваш взгляд является подходящим, нажмите кнопку Заменить (Change).
В результате выбранное слово будет вставлено в текст
• Если слово, появившееся в поле Нет в словаре (Not in Dictionary) написано с вашей точки зрения правильно, нажмите кнопку Игнорировать (Ignore). Если это слово встречается в документе многократно, целесообразно нажать кнопку Пропустить все
(Ignore All). В этом случае FrontPage не будет останавливаться на последующих вхождениях этого слова
• Не исключено, что нераспознанное слово написано правильно, но его нет в словаре Microsoft Office. В таком случае, если слово используется часто, его следует ввести в существующий словарь с помощью кнопки Добавить (Add)

5. После достижения конца фрагмента или документа появляется сообщение, уведомляющее вас о завершении проверки
(см. рис. 12.18).

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

  • Выберите в меню Правка (Edit) команду Отменить (Undo)
  • Нажмите кнопку Отменить (Undo) на стандартной панели инструментов

Тезаурус

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

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

  • Выбрав в меню Сервис (Tools) команду Тезаурус (Thesaurus)
  • Нажав комбинацию клавиш <Shift> + <F7>

На экране откроется диалоговое окно Тезаурус (рис. 12.19). Назначение полей этого диалогового окна описано в табл. 12.9.

Рис. 12.19. Диалоговое окно Тезаурус

Таблица 12.9. Поля диалогового окна Тезаурус

Поле | Назначение
Синонимы для (Looked Up) | Слово, для которого ищется синоним
Значения (Meanings) | Список значений слова, для которого ищется синоним
Замена синонимом (Replace with Synonym) | Список синонимов слова

Подобрав в диалоговом окне Тезаурус необходимый синоним, установите на него курсор и нажмите кнопку Заменить (Replace). В том случае, если ни одно из предлагаемых значений вас не устраивает, нажмите кнопку Отмена (Cancel). Кнопка Вернуть (Previous) позволяет восстановить предыдущее значение слова.

Поиск и замена

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

  • Командами Найти (Find) или Заменить (Replace) из меню Правка (Edit)
  • Комбинацией клавиш <Ctrl>+<F> или <Ctrl>+<H>

Диалоговое окно Найти и заменить содержит две вкладки. В зависимости от используемой команды или комбинации клавиш, в окне по умолчанию открывается вкладка Найти (Find) или Заменить (Replace). В табл. 12.10 приведены опции вкладки Найти.

Рис. 12.20. Диалоговое окно Найти и заменить

Таблица 12.10. Назначение параметров вкладки Найти

Параметр | Назначение
Найти (Find what) | В это поле вводится объект поиска
Найти далее (Find Next) | Осуществляет поиск следующего вхождения критерия, указанного в поле Найти
Искать на страницах (Find where) | Переключатель содержит три опции. При выборе на всех (All pages) поиск осуществляется на всех страницах Web-узла. Установка опции на текущей (Current page) указывает на необходимость проведения поиска только на текущей странице. При выборе опции на выбранных (Selected page) поиск проводится на указанных пользователем страницах. Для выбора страниц, на которых следует проводить поиск, удобно использовать панель Список папок (Folder List)
Направление (Direction) | Определяет направление поиска. При выборе опции Вниз (Down) осуществляет поиск от текущего положения курсора (или начала выделенного блока) до конца документа (или выделенного блока), Вверх (Up) — от текущего положения курсора (или конца выделенного блока) до начала документа (или выделенного блока). Опция Все (АИ) указывает, что поиск должен проводиться во всех направлениях
Учитывать регистр (Match case) | Выполняет поиск с учетом прописных и строчных букв в критерии, заданном в поле Найти далее (Find Next)
Только слово целиком (Match whole word only) | Выполняет поиск вхождений, являющихся самостоятельными словами
Поиск в HTML (Find in HTML) | Выполняет поиск в HTML файле

Флажок Только слово целиком (Match whole word only) позволяет существенно сузить поле поиска. Например, вы ищете слово формат. Если вы не установите этот флажок, FrontPage найдет для вас все вхождения заданного критерия, независимо от того, является ли каждое из них частью другого слова или представляет собой отдельное слово. Таким образом, будут найдены слова форматирование , формат , отформатируйте и т.д. В результате вам придется затратить больше времени на просмотр всех найденных вариантов. Установив флажок, вы исключите все слова, в которые указанный критерий входит как часть слова.

Флажок Учитывать регистр (Match case) также позволяет сузить поиск. Установка этого флажка делает поиск чувствительным к регистру, используемому при написании слов.

Для того чтобы уяснить действия опций вкладки Найти диалогового окна Найти и заменить (Find and Replace), давайте обратимся к практическому примеру. Для осуществления поиска определенного текста выполните следующие действия:

1. Откройте Web-страницу, на которой хотите найти необходимый текст.

2. В меню Правка (Edit) выберите команду Найти (Find) или нажмите комбинацию клавиш <Ctr l >+<F>.

3. В поле Найти (Find what) введите текст, который требуется найти.

4. Для осуществления поиска на текущей Web-странице установите опцию на текущей (Current page).

5. Задайте направление поиска, установив одно из двух значений переключателя Направление (Direction).

6. Для проведения поиска с учетом регистра установите флажок Учитывать регистр (Match case).

7. В том случае, если вы осуществляете поиск слова целиком, а не его вхождения в другие слова, установите флажок Только слово целиком (Match whole word only).

8. Для того чтобы приступить к поиску, нажмите кнопку Найти далее (Find Next).

Если указанный вами в качестве критерия фрагмент текста присутствует в документе, после его нахождения FrontPage выделяет его инверсным цветом. Вы можете, не закрывая диалогового окна Найти и заменить (Find and Replace), перейти в Web-страницу и внести в нее необходимые изменения.

9. Возможно, что Web-страница содержит несколько вхождений указанного текста, при этом найденное значение вас не устраивает. В этом случае продолжите поиск, нажав кнопку Найти далее.

10. После завершения поиска нажмите кнопку Отмена. Диалоговое окно Найти и заменить будет закрыто.

Замечание

Если вы решили прервать поиск в процессе его выполнения, нажмите клавишу <Esc>.

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

Рис. 12.21. Диалоговое окно Найти и заменить при проведении поиска на всех или нескольких страницах Web-узла

Поиск может оказаться неудачным по нескольким причинам:

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

В этом случае на экран будет выведено сообщение, представленное на рис. 12.22. Нажмите кнопку ОК, измените критерий и осуществите повторный поиск.

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

В том случае, если вы хотите не просто найти определенный текст, а заменить его другим текстом, то вам необходимо в диалоговом окне Найти и заменить воспользоваться вкладкой Заменить (Replace) (рис. 12.23).

Рис. 12.23. Вкладка Заменить диалогового окна Найти и заменить

Вкладка Заменить аналогична вкладке Найти, но содержит дополнительное поле Заменить на (Replace with), где можно ввести текст, которым необходимо заменить найденный. Чтобы заменить найденное вхождение текстом, введенным в поле Заменить на, нажмите кнопку Заменить. Чтобы заменить все вхождения текста, нажмите кнопку Заменить все (Replace All).


Глава 13 Использование таблиц в оформлении Web

Использование таблиц в оформлении Web-страницы

Создание таблиц
Свойства таблицы, ячейки
Настройка таблицы, Панель инструментов Таблицы
Форматирование таблицы
Преобразование таблицы в текст, Преобразование текста в таблицу
Использование таблицы при оформлении Web-страницы


Глава 13 Использование таблиц в оформлении Web

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

Функции таблиц при создании Web-страниц разнообразны. Приведем некоторые из них:

  • Выравнивание информации за счет расположения ее в ячейках таблицы. С помощью таблиц текст можно представлять в виде колонок
  • Выравнивание названий и полей формы
  • Расположение на Web-странице текста и графических изображений по разным колонкам
  • Использование вложенных таблиц
  • Задание различного фона для отдельных частей страницы

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

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

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

  • Команду Вставить (Insert) меню Таблица (Table)
  • Кнопку Добавить таблицу (Insert Table) стандартной панели инструментов

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

Если информация, которую требуется поместить в таблицу, уже присутствует в вашем документе в виде текста, вы можете преобразовать текст в таблицу. Но об этом чуть позже.

Прежде чем приступить непосредственно к созданию таблицы, вы должны иметь хотя бы приблизительное представление о том, сколько столбцов и строк должна иметь таблица. На этом этапе вам не обязательно точно указывать параметры таблицы. После создания вы сможете добавить и/или удалить столбцы и строки по своему усмотрению.

Создание таблицы с использованием кнопки Добавить таблицу

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

1. Установите курсор в то место Web-страницы, где хотите расположить таблицу.

2. Нажмите кнопку Добавить таблицу (Insert Table) [image] На экране появится миниатюрное изображение таблицы.

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

4. В заключение отпустите кнопку мыши. В указанном месте страницы появится таблица требуемого размера.

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

Создание таблицы с помощью команды меню Вставить

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

1. Установите курсор в то место Web-страницы, где будет располагаться начало таблицы.

2. В меню Таблица (Table) выберите команду Вставить (Insert), а затем в открывшемся меню — опцию Таблица. В результате выполнения этой команды откроется диалоговое окно Вставка таблицы, представленное на рис. 13.1, в котором вы можете задать требуемые параметры таблицы.

Рис. 13.1. Диалоговое окно Вставка таблицы

Это диалоговое окно содержит параметры, назначение которых описано в табл. 13.1.

Таблица 13.1. Назначение параметров диалогового окна Вставка таблицы

Параметр | Назначение
Число строк (Rows) | Количество строк в таблице
Число столбцов (Columns) | Количество столбцов в таблице
Выравнивание (Alignment) | Задает тип выравнивания информации в таблице
Толщина границы (Border size) | Толщина разделительных линий таблицы в пикселах
Поля ячеек (Cell padding) | Интервал между краями ячеек и располагаемой в них информацией
Интервал ячеек (Cell spacing) | Интервал между смежными ячейками
Задать ширину (Specify width) | Ширина таблицы. Рядом с данным параметром расположены две опции, указывающие, в каких единицах задается ширина: в пикселах или в процентах от ширины окна обозревателя

3. Используя поля Число строк (Rows) и Число столбцов (Columns), задайте количество строк и столбцов в создаваемой таблице.

4. В раскрывающемся списке Выравнивание (Alignment) выберите тип выравнивания информации в таблице.

5. В поле Толщина границы (Border size) введите толщину разделительных линий таблицы в пикселах.

Замечание

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

6. Используя поля Поля ячеек (Cell padding) и Интервал ячеек (Cell spacing), задайте расстояние между границей ячеек и располагаемыми в них данными, а также интервал между смежными ячейками. Оба эти параметра задаются в пикселах.

7. FrontPage по умолчанию предполагает, что ширина таблицы будет задаваться в процентах от ширины окна обозревателя, что более наглядно. Введите необходимое число в поле, расположенное под установленным флажком Задать ширину (Specify width). Если хотите задать ширину в пикселах, установите опцию в точках (In pixels), а затем введите ширину таблицы.

Замечание

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

8. Завершив установку всех параметров, нажмите кнопку ОК для закрытия диалогового окна. Таблица с заданными параметрами будет помещена на Web-страницу.

Создание таблицы с помощью команды Нарисовать таблицу

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

1. Подготовьте место для создания таблицы.

2. В меню Таблица выберите команду Нарисовать таблицу или нажмите кнопку Нарисовать таблицу [image] на панели инструментов Таблицы.

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

4. Действуя аналогичным образом, проведите линии границ столбцов и строк.

Совет

Если в процессе работы над таблицей вам понадобится удалить линию (строки или столбца), выберите на панели Таблица инструмент Ластик (Erase). Затем установите указатель мыши в начало линии, нажмите кнопку мыши и проведите указателем до конца линии, после чего отпустите кнопку мыши.


Глава 13 Использование таблиц в оформлении Web

Свойства таблицы

Свойства таблицы определяют ее внешний вид. Для изменения свойств существующей таблицы используется диалоговое окно Свойства таблицы (Table Properties) (рис. 13.2), которое открывается после выбора в меню Таблица (Table) команды Свойства таблицы (Table Properties), а затем — опции Таблица. Альтернативный способ его открытия — выбор команды Свойства таблицы контекстного меню.

Рис. 13.2. Диалоговое окно Свойства таблицы

Кроме параметров, предоставляемых разработчику при создании таблицы в окне Вставка таблицы, диалоговое окно Свойства таблицы (Table Properties) содержит параметры, позволяющие задать цвет разделительных линий таблицы, цвет фона или вместо фона разрешить использовать изображение. Раскрывающийся список Обтекание (Float) содержит опции, позволяющие сместить таблицу влево или вправо.

Замечание

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

Область Границы (Borders) содержит следующие параметры:

  • Размер (Size) — толщина разделительных линий таблицы
  • Цвет (Color) — цвет однородной рамки таблицы
  • Светлая (Light border) — цвет освещенных сторон рамки
  • Темная (Dark border) — цвет теневых сторон рамки

Замечание

Список Цвет (Color) используется в том случае, если вы хотите, чтобы вся рамка была одинакового цвета. Придать рамке объемность можно с помощью списков Светлая (Light border) и Темная (Dark border).

Список Цвет (Color) области Фон (Background) позволяет задать цвет фона таблицы. Если вы хотите в качестве фона использовать графическое изображение, то установите флажок Использовать фоновый рисунок (Use b ackgroi un d picture) и после нажатия кнопки Обзор (Browse) укажите название и расположение графического файла.

Свойства ячейки

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

1 В меню Таблица (Table) выберите команду Свойства таблицы (Table Properties), а затем — опцию Ячейка (Cell)

Выберите команду Свойства ячейки (Cell Properties) контекстного меню I Нажмите комбинацию клавиш <Alt> + <Enter>
При выполнении любого из этих действий открывается диалоговое окно Свойства ячейки (Cell Properties) (рис. 13.3), содержащее параметры, назначение которых описано в табл. 13.2.

Рис. 13.3. Диалоговое окно Свойства ячейки

Таблица 13.2. Назначение параметров диалогового окна Свойства ячейки

Параметр |  | Назначение
Выровнять по горизонтали (Horizontal alignment) |  | Выравнивает содержимое ячейки по горизонтали
Выровнять по вертикали (Vertical alignment) |  | Выравнивает содержимое ячейки по вертикали
Объединение строк (Rows spanned) |  | Изменяет высоту ячейки в соответствии с введенным коэффициентом
Объединение столбцов (Columns spanned) |  | Изменяет ширину столбца в соответствии с введенным коэффициентом
Ячейка заголовка (Header cell) |  | Форматирует содержимое ячейки полужирным начертанием
Не переносить слова (No wrap) |  | Запрещает перенос слов в пределах ячейки в обозревателе
Задать ширину (Specify width) |  | Задает ширину ячейки в пикселах или в процентах от ширины таблицы
Задать высоту (Specify height) |  | Задает высоту ячейки в пикселах или в процентах от высоты таблицы. По умолчанию высота меняется таким образом, чтобы поместился весь введенный текст
Границы (Borders) | Задает цвет рамки ячейки. Рамка может быть одноцветной или двуцветной, создавая эффект объемности. В первом случае для задания цвета используется раскрывающийся список Цвет (Color), во втором — списки Светлая (Light border) и Темная (Dark border)
Фон (Background) | Определяет цвет фона ячейки. При установке флажка Использовать фоновый рисунок (Use background picture) можно в качестве фона задать изображение

Замечание

Параметры Объединение строк (Rows spanned) и Объединение столбцов (Columns spanned) позволяют указать количество строк или столбцов, которые выделенная ячейка должна занять, увеличивая тем самым свой размер. При этом расположенные справа и ниже от нее ячейки сдвинутся, освобождая место.


Глава 13 Использование таблиц в оформлении Web

Настройка таблицы

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

Панель инструментов Таблицы

Для редактирования таблиц помимо команд меню Таблица и контекстного меню можно использовать панель инструментов
Таблицы (рис. 13.4).

Рис. 13.4. Панель инструментов Таблицы

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

Таблица 13.3. Назначение кнопок панели инструментов Таблицы

Кнопка | Название | Назначение
 | Добавить таблицу (Draw Table) | Рисует таблицу
 | Ластик (Erase) | Удаляет линию, разделяющую ячейки, и тем самым объединяет ячейки
 | Цвет заливки (Fill Color) | Устанавливает цвет заливки для ячеек
 | Объединить ячейки (Merge Cells) | Объединяет ячейки
 | Разбить ячейки (Split Cells) | Выполняет разбиение ячеек
 | Выровнять по верхнему краю (Align Top) | Выравнивает содержимое ячеек по верхнему краю
 | Выровнять по нижнему краю (Align Bottom) | Выравнивает содержимое ячеек по нижнему краю
 | Центрировать по вертикали (Center Vertically) | Выравнивает содержимое ячеек по центру
 | Выровнять высоту строк (Distribute Rows Evenly) | Выравнивает высоту строк
 | Выровнять ширину столбцов (Distribute Columns Evenly) | Выравнивает ширину столбцов
 | Автоподбор по содержимому (AutoFit) | Выравнивает ширину столбцов в соответствии с их содержимым
 | Добавить строки (Insert Rows) | Добавляет строки в таблицу
 | Добавить столбцы (Insert Columns) | Добавляет столбцы в таблицу
 | Удалить ячейки (Delete Cells) | Удаляет выделенные элементы таблицы
 | Автоформат (Table AutoFormat) | Открывает диалоговое окно, предназначенное для задания параметров автоматического форматирования таблицы
 | Автоформат таблицы (Table AutoFormat Combo) | Устанавливает выбранный из списка вариант автоматического форматирования таблицы
 | Заполнить вниз (Fill Domn) | Заполняет ячейки таблицы выделенной области значениями верхней ячейки данного столбца из числа выделенных
 | Заполнить вправо (Fill Right) | Заполняет ячейки таблицы выделенной области значениями левой ячейки данной строки из числа выделенных


Глава 13 Использование таблиц в оформлении Web

Форматирование таблицы

Перемещение и копирование строк и столбцов

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

Чтобы переместить или скопировать одну или несколько строк пли столбцов вместе с их содержимым, выполните следующие действия:

1. Выберите строки или столбцы, которые вы предполагаете переместить или скопировать.

2. Выберите в меню Правка (Edit) команду Вырезать (Cut) или Копировать (Сору) в зависимости от того, перемещаете или копируете данные.

3. Переместите курсор в строку или столбец, соответственно, левее или выше того места, в котором должны появиться перемешенные или скопированные данные.

4. Выберите в меню Правка (Edit) команду Вставить (Paste).

Вставка и удаление строк, столбцов и ячеек

После создания таблицы вы можете изменить ее структуру путем добавления или удаления строк и столбцов с помощью кнопок Добавить строки (Insert Rows) и Добавить столбцы (Insert Columns) панели инструментов Таблицы. Чтобы вставить в таблицу строку или столбец, можно также использовать диалоговое окно Вставка строк или столбцов (Insert Rows or Columns), открываемое из меню Таблица (Table) при выборе команды Вставить (Insert), а затем в появившемся подменю — опции Строки или столбцы
(Rows or Columns).

В верхней части диалогового окна Вставка строк или столбцов (рис. 13.5) расположены две опции, указывающие, строки или столбцы будут вставляться в таблицу. Поле Число столбцов (Number) позволяет указать количество, а опции области Размещение (Location) — расположение вставляемых объектов.

Для вставки в таблицу ячейки выберите в меню Таблица (Table) команду Вставить (Insert), а затем в появившемся подменю — опцию Ячейка (Cell).

Рис. 13.5. Диалоговое окно Вставка строк или столбцов

Совет

Если вам нужно добавить строку в конец таблицы, перейдите в последнюю ячейку таблицы и нажмите клавишу <Та b >.

Для удаления строк, столбцов или ячеек таблицы используются следующие действия:

1. Выделите одну пли несколько строк (столбцов или ячеек), которые вы предполагаете удалить.

2. Выберите команду Удалить ячейки (Delete Cells) меню Таблица или контекстного меню.

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

Замечание

Если вам требуется очистить ячейки (то есть удалить их содержимое, не удаляя самих ячеек), выделите ячейки, предназначенные для удаления содержимого, и нажмите клавишу <Delete> или <Backspace>.

Создание заголовков таблиц

Для размещения заголовка перед таблицей в меню Таблица выберите команду Вставить (Insert), а затем из появившегося подменю — опцию Подпись (Caption). При выполнении этой команды курсор размещается по центру над таблицей, и вы можете вводить необходимый текст (рис. 13.6).

Рис. 13.6. Выбор ячеек для объединения

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

Объединение и разбиение ячеек

FrontPage позволяет объединить несколько расположенных рядом горизонтальных ячеек в одну. При этом содержимое ячеек также объединяется.

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

1. Выберите ячейки, которые вы хотите объединить (см. рис. 13.6).

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

Рис. 13.7. Результат объединения ячеек

Совет

Наиболее просто объединить ячейки — это воспользоваться кнопкой Ластик (Erase), расположенной на панели инструментов Таблицы . Выбрав этот инструмент, вы просто проводите им по линии, разделяющей ячейки, которые предполагается объединить.

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

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

Для разбиения ячеек выполните следующие действия:

1. Выберите одну или несколько ячеек, которые вы предполагаете разбить.

2. Выберите команду Разбить ячейки (Split Sells) меню Таблица (Table) или контекстного меню, в результате чего на экране появляется диалоговое окно Разбиение ячеек (Split Sells) (рис. 13.8).

Рис. 13.8. Диалоговое окно Разбиение ячеек

Замечание

В качестве альтернативного средства для разбиения ячеек вы можете воспользоваться кнопкой Разбить ячейки (Split Sells) на панели инструментов Таблицы.

3. По умолчанию в диалоговом окне установлена опция Разбить на столбцы (Split into columns). В поле ввода Число столбцов (Number of columns) отображается количество столбцов, на которые FrontPage предлагает разбить каждую из ячеек. В случае необходимости измените указанное значение и нажмите ОК.

На рис. 13.9 представлена таблица, в которой верхняя строка, содержащая одну ячейку, разбита на четыре ячейки.

Рис. 13.9. Верхняя ячейка разбита на четыре ячейки


Глава 13 Использование таблиц в оформлении Web

Преобразование таблицы в текст

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

1. Выделите строки, которые вы предполагаете преобразовать в текст, или всю таблицу.

2. Выберите в меню Таблица (Table) команду Преобразовать (Convert), a затем в появившемся подменю — опцию Таблицу в текст (Table To Text).

На рис. 13.10 показан результат преобразования таблицы в текст.

Рис. 13.10. Результат преобразования таблицы в текст

Преобразование текста в таблицу

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

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

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

1. Если в исходном тексте отсутствуют символы-разделители, добавьте их.

2. Выделите текст, который вы предполагаете преобразовать в таблицу.

3. В меню Таблица (Table) выберите команду Преобразовать (Convert), a затем в появившемся подменю — опцию Текст в таблицу (Text to Table). В результате на экране появится диалоговое окно Текст в таблицу (Convert Text To Table) (рис. 13.11).

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

4. Если вы хотите изменить символ-разделитель, предложенный FrontPage, выберите требуемую опцию в разделе Разделитель (Separate text at).

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


Глава 13 Использование таблиц в оформлении Web

Использование таблицы при оформлении Web-страницы

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

1. Откройте созданный нами тестовый одностраничный Web-узел.

2. Добавьте в него новую страницу. Для этого в меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю — опцию Страница или веб-узел (Page or Web). В результате в главном окне программы FrontPage появляется панель Создание
веб-страницы или узла (New Page or Web). Выберите на этой панели команду Пустая страница (Blank Page).

3. Расположите в верхней части новой страницы заголовок.

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

5. Поместите на страницу графическое изображение. Для этого установите курсор под таблицу, выберите из меню Вставка (Insert) команду Рисунок (Picture), а затем — опцию Из файла (From File). Открывается диалоговое окно Рисунок (Picture), используя которое найдите требуемый файл на диске и нажмите кнопку Вставить (Insert). Графическое изображение будет вставлено на Web-страницу.

6. С помощью мыши перетащите изображение в первую строку таблицы.

7. Во вторую строку таблицы введите надпись к рисунку.

8. С помощью курсора уменьшите ширину таблицы, чтобы справа можно было расположить текст.

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

10. Теперь нам надо настроить свойства таблицы. Для этого откройте окно ее свойств, выбрав в контекстном меню команду Свойства таблицы (Table Properties).

11. Чтобы линии таблицы не были видны в обозревателе, задайте толщину линии 0 пиксел. Для этого в счетчике Размер (Size) области Границы (Borders) установите значение 0.

12. Необходимо, чтобы размещенный на Web-странице текст расположился справа и под рисунком, т. е. обтекал таблицу. Для этого из списка Обтекание (Float) области Положение (Layout) выберите значение но левому краю (Left).

13. Закройте окно свойств таблицы, нажав кнопку ОК. Web-страница будет иметь вид, аналогичный показанному на рис. 13.12.

Рис. 13.12. Размещение информации с использованием таблицы

Сохраните созданную Web-страницу. Для этого нажмите на панели инструментов кнопку Сохранить и в открывшемся диалоговом окне Сохранить как (Save As) введите название страницы. Откроется окно Сохранение внедренных файлов (Save Embedded Files), позволяющее указать имя, с которым графическое изображение будет сохранено в структуре Web-узда. Нажмите кнопку ОК.

Замечание

Более подробную информацию о диалоговом окне Сохранение внедренных файлов (Save Embedded Files) вы получите в главе 15.

Просмотрите созданную страницу в обозревателе (рис. 13.13). Для этого в меню Файл (File) выберите команду Просмотр в обозревателе (Preview in Browser). Открывается окно со списком установленных на компьютере браузеров. Установите курсор на браузер, в котором хотите просмотреть страницу, и нажмите кнопку Просмотр (Preview).

Рис. 13.13. Созданная Web-страница в обозревателе Internet Explorer


Глава 13 Использование таблиц в оформлении Web

Продолжаем создание одностраничного Web-узла


Глава 13 Использование таблиц в оформлении Web

Размещение горизонтальных линий

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

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

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

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

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

2. В меню Вставка (Insert) выберите команду Горизонтальная линия(Horizontal Line ).

3. Для настройки свойств размешенной на странице линии выделите ее и выполните одно из следующих действий:

  • Нажмите комбинацию клавиш <Alt>+<Enter>
  • Нажмите правую кнопку мыши и выберите из контекстного мепк. команду Свойства горизонтальной линии (Horizontal Line Properties

4. На экране открывается диалоговое окно Свойства горизонтальной линии (рис. 14.1), в котором можно настроить следующие параметры линии:

  • Ширина (Width) — длина линии в пикселах или в процентах от ширины окна обозревателя. Единицы измерения задаются с помощью опций Проценты от ширины окна (Percent of windows) и Точки (Pixels), расположенных рядом с полем
  • Высота (Height) — толщина линии в пикселах
  • Выравнивание (Alignment) — выравнивание линии по левому краю страницы, по центру или по правому краю с помощью опций Слева (Left), По центру (Center) или Справа (Right), соответственно.
    •
  • Цвет (Color) — цвет линии
  • Сплошная линия (без заливки) (Solid line (no shading)) — установка данного флажка при выборе из списка Цвет (Color) значения Авто (Automatic) позволяет придать линии эффект объемности за счет ее оттенения цветом фона страницы

Рис. 14.1. Диалоговое окно Свойства горизонтальной линии

Замечание

Линия, размещенная на Web-странице, имеет по умолчанию параметры, которые были заданы при создании предыдущей линии.

Совет

Для удаления линии, размещенной на Web-странице, можно использовать команду Удалить (Delete) меню Правка (Edit) или клавиши <Delete> и <Spacebar>.

Для размещения линий на Web-странице можно использовать не только команду Горизонтальная линия (Horizontal Line) меню Вставка (Insert). Вы можете украсить создаваемые страницы графическими линиями, являющимися графическими объектами и входящими в библиотеку Clip Art. Чтобы это сделать:

1. Установите курсор в то место страницы, где хотите расположить графическую горизонтальную линию.
2. В меню Вставка (Insert) выберите команду Рисунок (Picture), затем из появившегося подменю — опцию Картинки (Clip Art). На экране появляется панель Вставка картинки (Insert Clip Art).

Рис. 14.2. Панель Вставка картинки в окне программы FrontPage

3. Выберите на панели ссылку Коллекция картинок (Media Gallery). Откроется диалоговое окно Коллекция картинок (Microsoft). Панель Список коллекций (Collection List) этого окна содержит два больших раздела: Мои коллекции и Веб-коллекции. В первом разделе содержатся все папки вашего компьютера, содержащие медиафайлы, во втором — коллекция картинок библиотеки ClipArt.

4. Используя панель Список коллекций (Collection List) этого диалогового окна, найдите изображения графических линий. При установлении курсора на рисунок появляется всплывающая подсказка, указывающая размер графического объекта, объем файла в килобайтах и его тип (рис. 14.3).

Рис. 14.3. Диалоговое окно Коллекция картинок

5. Щелкните мышью на кнопке со стрелкой понравившейся вам линии. Появляется меню.

6. Выберите в меню команду Копировать (Сору). Графическая линия помещается в буфер обмена Windows.

Замечание

Кнопка Просмотр и свойства (Preview/Properties) меню открывает окно просмотра, в котором можно просмотреть выбранную линию в увеличенном масштабе. Для закрытия окна просмотра нажмите кнопку Закрыть (Close).

7. Перейдите в окно программы FrontPage и вставьте линию из буфера обмена на Web-страницу, воспользовавшись любым удобным для вас способом. Например, нажмите комбинацию клавиш <Shift>+<Ins>.

8. При сохранении Web-страницы с размещенной в ней графической линией на экране появляется диалоговое окно Сохранение внедренных файлов (Save Embedded Files) (рис. 14.4), предлагающее сохранить используемое графическое изображение линии в одной из папок Web-узла.

В нижней части окна под списком графических файлов расположены три кнопки, имеющие следующее назначение:

• Переименовать (Rename) — выделяет имя файла, на котором установлен курсор, для его переименования.

Рис. 14.4. Диалоговое окно Сохранение внедренных файлов

Рис. 14.5. Web-страница с размещенными горизонтальными линиями
  • Сменить папку (Change Folder) — открывает диалоговое окно Смена папки (Change Folder), содержащее папки открытого Web-узла. Выберите в этом окне папку, в которой хотите сохранить графический файл, и нажмите кнопку ОК. Имя этой папки будет размещено в столбце Папка (Folder) диалогового окна Сохранение внедренных файлов.
  • Действие (Set Action) — открывает диалоговое окно Задание действия (Set Action), в котором вы можете отказаться от сохранения графического файла, выбрав вторую из двух расположенных в окне опции. При этом в столбце Действие диалогового окна Сохранение внедренных файлов устанавливается значение Не сохранять (Don't Save).

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

На рис. 14.5 представлена Web-страница, на которой находятся разделительные линии обоих типов. Линия, расположенная под заголовком страницы, размещена с помощью команды Горизонтальная линия меню Вставка. Линия, размещенная в нижней части страницы, является графическим объектом.


Глава 13 Использование таблиц в оформлении Web

Размещение даты

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

1. Установите курсор в то место страницы, где хотите разместить дату или время. Обычно дату обновления Web-узла размещают в нижней части страницы.

2. В меню Вставка (Insert) выберите команду Дата и время (Date and Time). На экране открывается диалоговое окно Дата и время (рис. 14.6).

Рис. 14.6. Диалоговое окно Дата и время

3. В диалоговом окне расположен переключатель Отображать (Display), содержащий две опции. По умолчанию установлена опция дату последнего изменения страницы (Date this page was last edited), указывающая, что размещаемый объект будет показывать дату последнего редактирования и сохранения страницы.

4. Используя раскрывающийся список Формат даты (Date format), выберите формат отображения даты.

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

6. Завершив установку параметров, нажмите кнопку ОК для закрытия диалогового окна.

Совет

Для изменения свойств уже размещенного объекта, отображающего дату или время, установите курсор ,ia объект. Он примет вид руки, держащей страницу. Нажмите правую кнопку мыши и выберите из контекстного меню команду Свойства даты и времени (Date and Time Properties) или нажмите комбинацию клавиш <Alt>+<Enter>. Откроется диалоговое окно Дата и время, в котором можно сделать необходимые изменения.


Глава 13 Использование таблиц в оформлении Web

Создание общих областей

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

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

Предупреждение

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

Для создания на Web-странице общих областей используется команда Общие границы (Shared Borders) меню Формат (Format). При выполнении этой команды открывается диалоговое окно Общие границы (рис. 14.7), в верхней части которого расположен переключатель Применить (Apply to), содержащий две опции, предназначенные для указания того, где будут размещены общие области:

  • ко всем страницам (All pages) — на всех страницах Web-узла
  • к текущей странице (Current page) — на текущей странице Web-узла

Флажки Сверху (Тор), Слева (Left), Справа (Right) и Снизу (Bottom) позволяют выделить, соответственно, верхнюю, левую, правую и нижнюю области для размещения информации на Web-странице.

Рис. 14.7. Диалоговое окно Общие границы

Флажки включить кнопки переходов (Include navigation buttons), расположенные под флажками Сверху и Слева, позволяют разместить в верхней и левой общих областях, соответственно, панели ссылок. Эти флажки доступны только при установленной опции ко всем страницам (All pages), когда общие поля создаются сразу на всех страницах Web-узла.

Диалоговое окно Общие границы содержит кнопку Свойства границы (Border Properties), открывающую одноименное окно (рис. 14.8), позволяющее настроить параметры общей области. В верхней части окна расположен список Граница (Border). Он содержит названия имеющихся на странице общих областей. Флажок Цвет (Color) и расположенный справа от него список позволяют задать цвет общей области, выбранной из списка Граница.

Рис. 14.8. Диалоговое окно Свойства границы

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

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

2. Откройте диалоговое окно Общие границы, выбрав в меню Формат (Format) команду Общие границы (Shared Borders).

3. Нажмите кнопку Свойства границы (Border Properties).

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

5. Установите флажок Рисунок (Picture).

6. Нажмите расположенную справа от флажка кнопку Обзор (Browse).

7. В открывшемся диалоговом окне Текущий Web-узел (Current Web) откройте папку images, выберите из нее графический файл и нажмите кнопку ОК. Окно закрывается, а наименование и местоположение файла переносятся в поле, расположенное слева от кнопки Обзор.

8. Закройте последовательно диалоговые окна Свойства границы и Общие границы, нажав расположенные в них кнопки ОК.

Использование общих областей для размещения нижнего колонтитула

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

1. Откройте создаваемый нами Web-узел, воспользовавшись командой Открыть веб-узел (Open Web) меню Файл (File).

2. Откройте домашнюю страницу, дважды щелкнув мышью на панели Список папок (Folder List) на значке файла index.htm.

3. Выберите из меню Формат (Format) команду Общие границы (Shared Borders).

4. В открывшемся диалоговом окне Общие границы установите опцию ко всем страницам (All pages), указывая тем самым, что колонтитул будет размещен на всех имеющихся страницах Web-узла, а также на всех Web-страницах, добавляемых впоследствии в узел.

5. Установите опцию Снизу (Bottom). В нижней части страницы, отображаемой в области просмотра, появится пунктирная линия.

6. Нажмите кнопку ОК для закрытия диалогового окна.

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

8. Введите в колонтитуле информацию, например Copyright © 2001 Book_Rus. Для вставки в текст символа охраны авторского права © используйте диалоговое окно Символ, открываемое командой Символ (Symbol) меню Вставка (Insert).

9. Для перехода на следующую строку колонтитула нажмите комбинацию клавиш <Shift>+<Enter>.

10. Разместим теперь в колонтитуле дату обновления Web-узла. Для этого в меню Вставка (Insert) выберите команду Дата и время (Date and Time). На экране открывается диалоговое окно Дата и время.

11. Используя раскрывающийся список Формат даты (Date format), выберите устраивающий вас формат отображения даты.

12. Нажмите кнопку ОК для закрытия диалогового окна. Дата в выбранном формате размещена в колонтитуле.

13. Щелкните за пределами области редактирования колонтитула.

Рис. 14.9. Web-страница, содержащая нижний колонтитул

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

Замечание

Линия, размещенная над колонтитулом, при просмотре в обозревателе не будет видна.


Глава 13 Использование таблиц в оформлении Web

Примечания

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

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

1. Откройте редактируемую Web-страницу.
2. Установите курсор в место предполагаемого размещения примечания.
3. Выберите в меню Вставка (Insert) команду Примечание (Comment).
4. В открывшемся диалоговом окне Примечание (рис. 14.10) введите текст примечания в произвольной форме, но, тем не менее, понятный разработчику, для которого он создается.
5. Нажмите кнопку ОК.

Рис. 14.10. Диалоговое окно для ввода примечания

Введенный в диалоговом окне Примечание (Comment) текст размещается на Web-странице после слова примечание (рис. 14.11). При просмотре страницы в браузере он не виден.

После того как необходимость в примечании отпала, его можно удалить. Для этого выделите примечание, щелкнув на нем мышью, а затем в меню Правка (Edit) выберите команду Удалить (Delete) или нажмите клавишу <Delete> или <Backspace>.

Рис. 14.11. Web-страница с размещенным комментарием


Глава 13 Использование таблиц в оформлении Web

Просмотр результатов работы в обозревателе

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

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

Как правило, вы хотите, чтобы ваш Web-узел посещало как можно больше пользователей Интернета. Поэтому желательно проверить, как будет выглядеть проектируемый вами Web-узел при просмотре его наиболее популярными обозревателями Web-страниц, например, Internet Explorer и Netscape Navigator.

Рис. 14.12. Режим предварительного просмотра Web-страницы

Для просмотра результатов работы в обозревателе предназначена команда Просмотр в обозревателе (Preview in Browser) меню Файл (File) и одноименная кнопка на стандартной панели инструментов. При выполнении команды Просмотр в обозревателе на экране открывается диалоговое окно Просмотр в обозревателе, в котором расположен список обозревателей, доступных для просмотра (рис. 14.13). Область Размер окна (Window size) содержит опции, позволяющие указать размер окна обозревателя. Очень важно проверить, как будет выглядеть ваша страница при различных разрешениях монитора.

Рис. 14.13. Диалоговое окно Просмотр в обозревателе

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

Замечание

Кнопки Изменить (Edit) и Удалить (Delete) диалогового окна Просмотр в обозревателе недоступны для обозревателей, внесенных в список программой FrontPage. С их помощью можно редактировать и удалять только значения, добавленные с помощью кнопки Добавить (Add).

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

Рис. 14.14. Просмотр Web-страницы в Internet Explorer

Совет

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


От автора

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

Фон страницы
Размещение графических изображений
Вкладка General, Видеозапись, Вид
Редактирование изображений
Автоэскизы
Задание фонового звука страницы, Размещение видеозаписи и настройка ее свойств
Использование тем в оформлении страницы


От автора

Фон страницы

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

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

При создании Web-узлов чаще всего применяют графические форматы JPEG (Joint Photographic Experts Group) и GIF (Graphics Interchange Format). При записи файлов в этих форматах происходит сжатие данных. Выбор того или иного формата определяется поставленными задачами. Формат GIF применяется для изображений, содержащих меньше 256 цветов, и используется, в основном, для создания анимационных эффектов. Если изображение содержит более 256 цветов, то используется формат JPEG. Все вышесказанное не означает, что не подойдут для использования в программе FrontPage графические файлы, имеющие другие форматы. FrontPage позволяет импортировать файлы следующих форматов:
  • GIF
    •
  • JPEG (JPG)
    •
  • PNG
    •
  • BMP (Windows или OS/2)
  • TIFF(TIF)
  • WMF (Метафайлы Windows)
  • SUN Raster (RAS)
  • EPS (Инкапсулированный Postscript)
  • PCX (Paintbrush)
  • TGA(Targa)
  • PCD (Kodak PhotoCD)

По умолчанию импортируемые форматы, за исключением форматов GIF и JPEG, преобразовываются FrontPage в формат GIF.

При создании Web-страниц вы можете использовать графические изображения из библиотеки Clip Art, входящей в состав Microsoft Office, файлы, разработанные с использованием графических редакторов (например, CorelDraw, Adobe Photoshop), а также применять изображения, полученные со сканера.

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

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

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

1. Откройте созданный нами Web-узел. Для этого в меню Файл (File) выберите команду Последние веб-узлы (Recent Webs) и в появившемся списке выберите My Test_Web.

 2. Откройте домашнюю страницу, дважды щелкнув на панели Список папок (Folder List) имя файла index.htm.

3. В меню Формат (Format) выберите команду Фон (Background). На экране открывается диалоговое окно Свойства страницы (Page Properties), содержащее шесть вкладок. По умолчанию открыта вкладка Фон (рис. 15.1).

Рис. 15.1. Диалоговое окно Свойства страницы

Замечание

Для открытия диалогового окна Свойства страницы вы можете также воспользоваться командой Свойства (Properties) меню Файп (File) или командой контекстного меню страницы Свойства страницы.

Область Цвета (Colors) содержит 5 раскрывающихся списков, позволяющих задать цвета следующих элементов Web-страницы:

  • Фон (Background) — фона Web-страницы
  • Текст (Text) — текста
  • Гиперссылка (Hyperlink) — гиперссылок
  • Просмотренная ссылка (Visited hyperlink) — гиперссылок, по которым уже осуществлялся переход
  • Активная ссылка (Active hyperlink) — активных гиперссылок

4. Для задания цвета фона нажмите кнопку со стрелкой, предназначенную для раскрытия списка Фон (Background). Откроется палитра, содержащая 16 стандартных цветов (рис. 15.2). Для замены текущего фона достаточно выбрать на палитре понравившийся цвет.

5. В том случае, если ни один из цветов вам не подходит, и вы хотите использовать дополнительные цвета, щелкните в области Другие цвета (More Colors). Откроется диалоговое окно Другие цвета (рис. 15.3).

6. Для подбора цвета фона удобно использовать кнопку Выбрать (Select), которая переводит курсор в активное состояние. При перемещении кур сора по цветовой палитре, цвет, на который указывает курсор, отобража ется в области Новый (New), что позволяет лучше рассмотреть цвет. Об- ласть Текущий (Current) диалогового окна отображает текущий цвет фона. Выбрав из предложенных цветов понравившийся, нажмите еще раз кнопку Выбрать, а затем кнопку ОК. Диалоговое окно закроется, а выбранный цвет отобразится в списке Фон (Background).

Рис. 15.2. Палитра для задания цвета

Рис. 15.3. Диалоговое окно Другие цвета

7. Если вам не удалось подобрать цвет фона в диалоговом окне Другие цвета — еще не все потеряно. Нажмите кнопку Другой (Custom). Откроется диалоговое окно Цвет (рис. 15.4), содержащее в области Основная палитра 48 готовых цветов и позволяющее дополнительно создать 16 пользовательских. Для создания пользовательского цвета выберите на палитре необходимый оттенок цвета с помощью курсора. С правой стороны окна находится движок, который имеет форму треугольника. Используя этот движок, задайте яркость. Есть еще способ формирования цвета: можно вводить числовые данные в поля ввода, задающие оттенок, контраст, яркость и значения красного, зеленого и синего цветов. Получив необходимый цвет, нажмите кнопку ОК для закрытия диалогового окна.

8. Вернувшись в диалоговое окно Свойства страницы, нажмите кнопку ОК Для его закрытия.

Рис. 15.4. Диалоговое окно для создания пользовательского цвета

Использование изображения в качестве фона

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

1. Откройте созданный Web-узел.
2. Откройте домашнюю страницу, дважды щелкнув мышью на панели Список папок (Folder List) на файле index.htm.
3. В меню Файл (File) выберите команду Свойства (Properties) или выберите команду контекстного меню страницы Свойства страницы.
 4. В открывшемся диалоговом окне Свойства страницы (Page Properties) перейдите на вкладку Фон (Background).
5. Установите расположенный в верхней части диалогового окна флажок Фоновый рисунок (Background picture).
6. Установите также флажок Подложка (Watermark). Если он установлен, то при перемещении по Web-странице с помощью полосы прокрутки не происходит смещения рисунка фона относительно объектов, расположенных на странице.
7. Для указания имени и расположения графического файла, содержимое которого будет использовано в качестве фона, нажмите кнопку Обзор (Browse). На экране открывается диалоговое окно Выбрать фоновый рисунок (Select Background Picture) (рис. 15.5), в списке Папка (Look in) которого указано имя открытого Web-узла.

Рис. 15.5. Диалоговое окно для выбора графического изображения фона страницы •

8. Если вы поместили графический файл в папку images, откройте ее, выберите подготовленный для фона страницы файл и нажмите кнопку ОК.
9. В случае если вы заранее не позаботились о размещении файла в папках Web-узла, для его поиска воспользуйтесь кнопками, расположенными слева в диалоговом окне Выбрать фоновый рисунок. Кнопки Журнал (History), Мои документы (My Document), Рабочий стол (Desktop), Избранное (Favorites), Мое сетевое окружение (My Network Places) позволяют искать файл в папках Recent, Мои документы, Рабочий стол, Избранное и Мое сетевое окружение, соответственно. Кнопка [image] Найти в Интернете (Search the Web) запускает обозреватель для поиска в Интернете файла, который может быть использован в качестве фона Web-страницы.

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

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

На рис. 15.6 показана Web-страница, для которой в качестве фонового изображения использован файл из библиотеки Windows.

Рис. 15.6. В качестве фона использовано графическое изображение

Вы можете использовать единое графическое изображение на нескольких страницах Web-узла в качестве фона, устанавливая в диалоговом окне Свойства страницы флажок Получить сведения о фоне с другой страницы (Get background information from another page). В этом случае, если вы решите изменить фон, нет необходимости менять его на всех страницах, использующих одинаковое изображение, — достаточно сделать это на одной единственной странице. Рассмотрим последовательность действий при использовании этого флажка:

1. Откройте Web-узел.
2. Откройте домашнюю страницу, дважды щелкнув на панели Список папок (Folder List) на имени файла index.htm.
3. В меню Формат (Format) выберите команду Фон (Background).
4. В открывшемся диалоговом окне Свойства страницы на вкладке Фон (Background) установите флажки Фоновый рисунок (Background picture) и Подложка (Watermark).
5. Нажмите кнопку Обзор, расположенную рядом с полем, в котором будет размещено имя графического файла. 6. В открывшемся диалоговом окне Выбрать фоновый рисунок (Select Background Picture) выберите графический файл, который хотите использовать в качестве фона страницы, и нажмите кнопку ОК.
 7. Нажмите кнопку ОК для закрытия диалогового окна Свойства страницы.
 8. Сохраните Web-страницу с размещенным фоновым изображением и исходный графический файл в папке images.
 9. Откройте в режиме редактирования вторую страницу Web-узла.
10. Откройте для этой страницы диалоговое окно Свойства страницы.
 11. На вкладке Фон (Background) установите флажок Получить сведения о фоне с другой страницы (Get background information from another page).
12. Нажмите расположенную рядом с флажком кнопку Обзор.
 13. В открывшемся диалоговом окне Текущий веб-узел (Current Web) (рис. 15.7) выберите из папки images сохраненную Web-страницу с фоновым графическим изображением и нажмите кнопку ОК.
14. Нажмите кнопку ОК для закрытия диалогового окна Свойства страницы.

Рис. 15.7. Диалоговое окно Текущий веб-узел

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

1. Поместите новое графическое изображение в папку images Web-узла.
2. Откройте окно свойств страницы, размещенной в папке images, для которой вы установили графическое фоновое изображение.
3. Измените фоновое изображение, используя размещенный в данной папке новый графический файл.
4. Закройте окно свойств страницы.


От автора

Размещение графических изображений

Графические изображения, размещенные на Web-странице, не только способствуют лучшему восприятию информации, но и позволяют сделать страницы более яркими и запоминающимися. Графические изображения вы можете подготовить сами или воспользоваться услугами дизайнеров. Можно также использовать библиотеки графических файлов программных продуктов, таких как Microsoft Office, CorelDraw и т.д.

Разместим на домашней странице создаваемого нами Web-узла графическое изображение из библиотеки Clip Art, входящей в состав Microsoft Office. Для этого выполните следующие действия:

1. Откройте созданный Web-узел.
2. Откройте домашнюю страницу, дважды щелкнув мышью на имени файла index.htm в панели Список папок (Folder List).
3. В меню Вставка (Insert) выберите команду Рисунок (Picture), а затем в открывшемся подменю — опцию Картинки (Clip Art). В окне программы FrontPage появляется панель Вставка картинки (Insert Clip Art).
4. Выберите на этой панели команду Коллекция картинок (Media Gallery). Открывается диалоговое окно, позволяющее выбрать графическое изображение (рис. 15.8).

Рис. 15.8. Диалоговое окно Коллекция картинок (Microsoft)

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

Кнопка | Назначение
Поиск | Отображает в окне панель Поиск, предназначенную для поиска мультимедийных файлов
Список коллекций | Отображает в окне панель Список коллекций со списком категорий и разделов библиотеки
Коллекция картинок в Интернете | Запускает обозреватель для поиска изображения в Интернете

5. Панель Список коллекций содержит папки вашего компьютера с мультимедийными файлами, а также файлы картинок библиотеки Clip Art. Откройте папку интересующей вас категории картинок. В рабочей области окна появятся изображения данной категории. При установке курсора на изображение видна подсказка с указанием имени, размера изображения и файла, в котором он содержится, а также формата графического изображения (рис. 15.9).

Рис. 15.9. Подсказка с указанием размера файла при установке курсора на изображение

6. Нажмите кнопку со стрелкой с правой стороны выбранного изображения. Появляется контекстное меню.
7. Выберите в контекстном меню команду Копировать (Сору).
8. Перейдите на Web-страницу и вставьте на нее из буфера обмена изображение, используя для этого любое удобное средство. Например, нажмите комбинацию клавиш <Shift>+<Ins>.
9. Сохраните Web-страницу с размещенным в ней графическим изображением, нажав кнопку Сохранить (Save) на стандартной панели инструментов. Появляется диалоговое окно Сохранение внедренных файлов (Save Embedded Files) (рис. 15.10), предлагающее сохранить размещенное на странице изображение в папке images Web-узла под именем, с которым файл находился в библиотеке. Это окно содержит кнопки следующего назначения:

  • Переименовать (Rename) — позволяет переименовать файл.
  • Сменить папку (Change Folder) — открывает диалоговое окно Смена папки (Change Folder), содержащего папки текущего Web-узла, позволяя выбрать иную папку для сохранения файла.
  • Действие (Set Action) открывает диалоговое окно Задание действия, позволяющее изменить значение Сохранить (Save) столбца Действие (Action) на Не сохранять (Don't Save). При выборе значения Сохранить рисунок сохраняется в указанной вами папке Web-узла, в противном случае на Web-странице останется ссылка на изображение, находящееся в библиотеке Clip Art.

Область Рисунок (Picture preview) показывает размещаемое изображение. Установив в диалоговом окне Сохранение внедренных файлов нужные параметры, нажмите кнопку ОК. Графический файл будет сохранен в указанной вами папке Web-узла.

Рис. 15.10. Диалоговое окно Сохранение внедренных файлов

Размещение графического изображения из файла

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

  • В меню Вставка (Insert) выберите команду Рисунок (Picture), а затем в открывшемся подменю — опцию Из файла (From File)
  • Нажмите кнопку Добавить рисунок из файла (Insert Picture From File) на стандартной панели инструментов
  • Нажмите кнопку Добавить рисунок из файла (Insert Picture From File) на панели инструментов Рисунки (Pictures)

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

Рис. 15.11. Диалоговое окно Рисунок

Настройка свойств изображения

После размещения изображения на Web-странице необходимо настроить его свойства, используя диалоговое окно Свойства рисунка (Picture Properties) (рис. 15.12). Для его открытия щелкните мышью на изображении, а затем выполните одно из следующих действий:

  • В меню Формат (Format) выберите команду Свойства (Properties)
  • Выберите команду контекстного меню Свойства рисунка (Picture Properties)
  • Нажмите комбинацию клавиш <Alt>+<Enter>

Диалоговое окно Свойства рисунка содержит три вкладки: Общие (General), Видеозапись (Video), Вид (Appearance). Рассмотрим более подробно возможности настройки с помощью данного диштогового окна.

Рис. 15.12. Вкладка Общие диалогового окна Свойства рисунка


От автора

Вкладка General

В верхней части вкладки Общие (General) находится поле Источник рисунка (Picture source), в котором указано местоположение графического файла. Это может быть папка открытого Web-узла или адрес в Интернете. Рядом с полем расположены две кнопки:

  • Обзор (Browse) — открывает диалоговое окно Рисунок, позволяющее выбрать изображение для размещения на Web-странице
  • Изменить (Edit) — запускает графический редактор для изменения текущего файла

Область Тип (Туре) указывает один из двух форматов графического изображения (GIF и JPEG). Если на Web-странице размещается изображение иного формата, FrontPage преобразовывает этот формат в один из форматов, используемый программой FrontPage. Так, если импортируемый файл содержит менее 256 цветов, он преобразовывается в формат GIF, если более 256 цветов — в формат JPEG. Область Альтернативные представления (Alternative representations) вкладки Общие (General) содержит поля, позволяющие задать параметры, которые будут использованы при просмотре Web-страницы, содержащей данное графическое изображение, в обозревателе, не поддерживающем графику или имеющем низкое разрешение:

  • Низкое разрешение (Low-Res) — указывает имя и расположение файла, содержащего графическое изображение, имеющее низкое разрешение, который будет загружаться вместо исходного графического файла. Для задания файла используется диалоговое окно Выбрать другой рисунок (Select Alternate Picture), открываемое при нажатии кнопки Обзор, расположенной рядом с полем.
    •
  • Текст (Текст) — позволяет задать текст, который будет появляться вместо изображения при отсутствии или отключении в обозревателе режима отображения графики.

Поля области Гиперссылка по умолчанию (Default hyperlink) позволяют использовать текущее графическое изображение в качестве гиперссылки:

Расположение (Location) — при нажатии кнопки Обзор (Browse), расположенной рядом с этим полем, открывается диалоговое окно Изменение гиперссылки (Edit Hyperlink), позволяющее задать или изменить установленную ссылку на страницу текущего Web-узла, страницу в Интернете или установить ссылку на новую страницу.

Замечание

Подробнее это диалоговое окно будет описано в главе 16 при рассмотрении текстовых и графических ссылок.
  • Конечная рамка (Target Frame) — в данном поле указывается ссылка на конечный фрейм.

Замечание

Вопросы использования фреймов при создании страниц будут рассмотрены в главе 20.

Вкладка Видеозапись

Вкладка Видеозапись (Video) диалогового окна Свойства рисунка позволяет поместить в Web-страницу аудио- или видеозапись, при этом графическое изображение будет использовано в качестве заставки при загрузке файла.

Вкладка Вид

Вкладка Вид (Appearance) диалогового окна Свойства рисунка (рис. 15.13) содержит параметры, позволяющие задать расположение графического изображения на Web-странице.

Рис. 15.13. Вкладка Вид диалогового окна Свойства рисунка

Раскрывающийся список Выравнивание (Alignment) области Положение (Layout) содержит значения, устанавливающие расположение изображения по отношению к окружающему его тексту. Тип выравнивания в зависимости от значения списка указан в табл. 15.1. На рис. 15.14 показан пример взаимного расположения текста и изображения при использовании опций слева (Left) и справа (Right).

Таблица 15.1. Зависимость типа выравнивания от выбора значения из списка Выравнивание

Значение списка |  | Тип выравнивания
По левому краю (Left) |  | Изображение располагается по левому краю абзаца, а текст — справа от него
По правому краю (Right) |  | Изображение располагается по правому краю абзаца, а текст — слева от него
По верхнему краю (Тор) |  | Текст выравнивается по верхней границе изображения
По верхнему краю щрифта (Texttop) |  | Изображение выравнивается по верхней границе текста
По середине (Middle) |  | Текст выравнивается по середине изображения
По середине шрифта (Absmiddle) |  | Изображение выравнивается по середине текущей строки текста
По линии шрифта (Baseline) |  | Изображение выравнивается по базовой линии текущей строки текста
По нижнему краю (Bottom) | Текст выравнивается по нижней линии изображения
По нижнему краю шрифта (Absbottom) | Изображение выравнивается по нижней линии текущей строки текста
По центру (Center) | Текст выравнивается по средней линии изображения

Замечание

Для выравнивания изображения можно также использовать опции области Обтекание (Wrapping style) и кнопки По левому краю (Align Left) и По правому краю (Align Right) на панели форматирования.

Рис. 15.14. Выравнивание с помощью опций слева и справа

Остальные поля области Положение (Layout) имеют следующее назначение:

  • Толщина границы (Border thickness) — задает толщину рамки (в пикселах) вокруг графического изображения
  • Интервал по горизонтали (Horizontal spacing) — задает расстояние по горизонтали (в пикселах) от изображения до окружающего его текста
  • Интервал по вертикали (Vertical spacing) — задает расстояние по вертикали от изображения до окружающего его текста в пикселах Параметры области Размер (Size) предназначены для указания размера изображения в пикселах или процентах от размера окна обозревателя. При этом чтобы изображение сохранило свои пропорции, необходимо установить флажок Сохранять пропорции (Keep aspect ratio). Область содержит два поля, имеющих следующее назначение:
  • Ширина (Width) — ширина изображения
  • Высота (Height) — высота изображения

Замечание

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

Совет

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


От автора

Редактирование изображений

При размещении на Web-странице графического изображения на экране появляется панель инструментов Рисунки (Pictures), предоставляющая средства по его обработке (рис. 15.15).

Рис. 15.15. Панель инструментов Рисунки

Совет

Если панель инструментов Рисунки не появилась на экране, то в меню Вид (View) выберите команду Панели инструментов (Toolbars), а затем — опцию Рисунки.

На панели инструментов Рисунки имеется множество кнопок, которые удобно использовать для корректировки изображения. Их назначение описано в табл. 15.2.

Таблица 15.2. Кнопки панели инструментов Рисунки

Кнопка | Название |  | Назначение
 | Добавить рисунок из файла (Insert Picture From File) |  | Открывает диалоговое окно Рисунок, позволяющее выбрать графическое изображение, содержащееся в файле, и разместить его на Web-странице
 | Текст (Text) |  | Размещает на графическом изображении форматированный текст, который можно связывать с активной областью
 | Автоэскизы (Auto Thumbnail) |  | Представляет графическое изображение в виде автоэскиза
 | Position Absolutely (Абсолютное положение) |  | Позволяет позиционировать изображение
 | Переместить вперед (Bring Forward) |  | Перемещает изображение на верхний слой
 | Переместить назад (Send Backward) |  | Перемещает изображение на нижний слой
 | Повернуть влево (Rotate Left) . |  | Поворачивает изображение против часовой стрелки на 90 градусов
 | Повернуть вправо (Rotate Right) |  | Поворачивает изображение по часовой стрелке на 90 градусов
 | Отразить слева направо (Flip Horizontal) |  | Отражает изображение относительно вертикальной оси (создает горизонтальное зеркальное отражение)
 | Отразить сверху вниз (Flip Vertical) |  | Отражает изображение относительно горизонтальной оси (создает вертикальное зеркальное отражение)
 | Увеличить контрастность (More Contrast) |  | Увеличивает контрастность изображения
 | Уменьшить контрастность (Less Contrast) |  | Уменьшает контрастность изображения
 | Увеличить яркость (More Brightness) |  | Увеличивает яркость изображения
 | Уменьшить яркость (Less Brightness) |  | Уменьшает яркость изображения
 | Тип линии (Line Style) |  | Задает стиль линии
 |  | Обрезка (Crop) |  | Обрезает изображение, находящееся вне выделенного контура
 |  | Установить прозрачный цвет (Set Transparent Color) |  | Делает прозрачным один из цветов изображения, представленного в формате GIF
 |  | Цвет (Color) |  | Открывает меню, содержащее команды, управляющие цветом изображения. Так, например, команда Оттенки серого (GrayScale) преобразовывает цветное изображение в полутоновое, а Черно-белое (Black & White) — в черно-белое. Команда Размытие (Wash Out) делает изображение более блеклым
 |  | Багетная рамка (Bevel) |  | Придает изображению эффект выпуклости
 |  | Сокращение цветов (Resample) |  | Устраняет небольшие дефекты изображения, возникающие при изменении его размеров
 |  | Выбрать (Select) |  | Выбирает объект
 |  | Гиперпрямоугольник (Rectangular Hotspot) |  | Размещает на изображении активную область в виде прямоугольника, используемую для создания гиперссылки
 |  | Гиперкруг (Circular Hotspot) |  | Размещает на изображении активную область в виде круга, используемую для создания гиперссылки
 |  | Гипермногоугольник (Polygonal Hotspot) |  | Размещает на изображении активную область в виде многоугольника, используемую для создания гиперссылки
 |  | Выделить гиперобъекты (Highlight Hotspots) |  | Показывает все размещенные на изображении активные области
 |  | Восстановить (Restore) |  | Отменяет все последние изменения в графическом изображении с момента последнего сохранения файла

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

  • Перед использованием средств редактирования изображения создайте резервную копию изображения
  • Получив приемлемый промежуточный результат, сохраните его
  • В том случае, если ваши действия ухудшили изображение, воспользуйтесь кнопкой Восстановить (Restore) на панели инструментов Рисунки. Она отменит все выполненные вами действия с момента последнего сохранения результатов работы.

Рассмотрим несколько примеров использования кнопок панели инструментов Рисунки.

Вращение изображения

На панели инструментов размещены 4 кнопки, позволяющие в режиме редактирования графического изображения развернуть рисунок: Повернуть влево (Rotate Left), Повернуть вправо (Rotate Right), Отразить слева направо (Flip Horizontal) и Отразить сверху вниз (Flip Vertical).

При нажатии кнопки Повернуть влево изображение поворачивается против часовой стрелки, а кнопки Повернуть вправо — по часовой стрелке на 90°.

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

Рис. 15.16. Примеры применения к изображению поворота, зеркального отражения и переворачивания

На рис. 15.16 представлен пример обработки изображения с использованием этих кнопок. Первое изображение является исходным, четыре остальных — результат применения поворота по часовой стрелке, против часовой стрелки, а также эффекта зеркального отражения и эффекта переворачивания.

Изменение яркости и контраста

В том случае, если необходимо немного подкорректировать контрастность изображения, вы можете воспользоваться кнопками Увеличить контрастность (More Contrast) и Уменьшить контрастность (Less Contrast) на панели инструментов Рисунки, увеличивающей и уменьшающей, соответственно, значение данного параметра. Для изменения яркости предназначены кнопки Увеличить яркость (More Brightness) и Уменьшить яркость (Less Brightness).

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

Вырезание части изображения

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

1. Выделите изображение.
2. Нажмите на панели инструментов Рисунки кнопку Обрезка (Crop).
3. Вокруг всего изображения появляется рамка с маркерами выделения. Устанавливая курсор поочередно на маркеры, перемещайте контуры рамки, изменяя размер ограничиваемой рамкой области таким образом, чтобы она выделила на изображении нужную область. Для перемещения рамки по изображению используйте клавиши со стрелками на клавиатуре.

Совет

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

4. После того как необходимая часть изображения выделена рамкой, нажмите еще раз кнопку Обрезка или клавишу <Enter>.

На рис. 15.17 показано исходное изображение и изображение, полученное в результате обрезки.

Рис. 15.17. Изображение и вырезанная его часть

Применение опции прозрачности

Кнопка Установить прозрачный цвет (Set Transparent Color) на панели инструментов Рисунки позволяет сделать прозрачным один из цветов, используемых в изображении. Данная операция может быть применена только к графическим файлам в формате GIF.

Для преобразования одного из цветов изображения в прозрачный выполните следующие действия:

1. Выделите изображение, к которому хотите применить данный эффект.
2. Нажмите на панели инструментов Рисунки кнопку Установить прозрачный цвет.
 3. Если ваше изображение имеет формат, отличный от GIF, на экране появляется запрос на изменение формата файла (рис. 15.18). Если вы хотите продолжить выполнение операции, нажмите кнопку ОК.

Рис. 15.18. Запрос на преобразование файла в формат GIF

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

На рис. 15.19 представлены два изображения. Первое является исходным, второе — результат применения эффекта преобразования цвета в прозрачный.

,

Рис. 15.19. Результат применения к изображению эффекта преобразования цвета в прозрачный

Замечание

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

Преобразование в полутоновое изображение

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

При сохранении файла, к которому применен эффект преобразования в полутоновое изображение, информация о цвете теряется.

Эффект объемности

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

Эффект размытия

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

Чтобы применить к графическому изображению эффект размытия, нажмите на панели инструментов Рисунки кнопку Цвет (Color) и выберите из появившегося меню команду Размытие (Wash Out).

Рис. 15.20. Результат применения к изображению эффекта размытия


От автора

Автоэскизы

Кнопка Автоэскизы (Auto Thumbnail) на панели инструментов Рисунки позволяет представить графическое изображение в уменьшенном виде, оформленном как автоэскиз.

Совет

Для преобразования изображения в автоэскиз можно также использовать комбинацию клавиш <С1г1>+<Т>.

Прежде чем автоэскиз создавать, необходимо настроить его параметры. Для настройки параметров автоэскиза используется вкладка Автоэскизы (Auto Thumbnail) диалогового окна Параметры страницы (Page Options) (рис. 15.21), открываемого при выборе из меню Сервис (Tools) команды Параметры страницы (Page Options).

Рис. 15.21. Диалоговое окно для настройки параметров автоэскизов

Используя раскрывающийся список Задать (Set) вкладки Auto Thumbnail, вы можете задать один из следующих параметров автоэскиза (в пикселах):

  • по ширине (Width) — высота миниатюры
  • по высоте (Height) — ширина миниатюры
  • по меньшей стороне (Shortest side) — наименьший размер
  • по большей стороне (Longest side) — наибольший размер

Замечание

С помощью списка Задать (Set) вы устанавливаете один из размеров автоэскиза. Второй размер устанавливается программой FrontPage автоматически исходя из размеров исходного изображения с учетом сохранения его пропорций.

Чтобы миниатюра, создаваемая с помощью кнопки Автоэскизы (Auto Thumbnail), была помещена в рамку, необходимо на вкладке Автоэскизы диалогового окна Параметры страницы установить флажок Толщина границы (Border thickness). Для задания толщины рамки используется поле Точек (Pixels), расположенное рядом с этим флажком.

Для придания миниатюре эффекта объемности установите флажок Рельефная граница (Beveled edge). При этом создаваемая миниатюра будет иметь вид кнопки.

Замечание

Результаты, полученные при установке флажка Рельефная граница, аналогичны результатам после нажатия кнопки Багетная рамка (Bevel) на панели инструментов Рисунки.


От автора

Задание фонового звука страницы

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

  • RealMedia (RAM, RA)
  • Wave sound (WAV)
  • MIDI sequencer (MID)
  • AIFF sound (AIF)
  • AU sound (AU)

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

1. В меню Файл (File) выберите команду Свойства (Properties) или в контекстном меню страницы выберите команду Свойства страницы (Page Properties). Появляется одноименное диалоговое окно (рис. 15.22) с открытой по умолчанию вкладкой Общие (General).
2. В поле Расположение (Location) области Фоновый звук (Background sound) введите расположение и имя звукового файла. Для поиска файла вы можете использовать диалоговое окно Фоновый звук (рис. 15.23), открываемое после нажатия кнопки Обзор (Browse) и предлагающее выбрать файл из папок текущего Web-узла, с диска или из Интернета. Завершив выбор файла, нажмите кнопку ОК.
 3. В поле Повтор (Loop) введите количество повторений звучания файла.

Рис. 15.22. Диалоговое окно Свойства страницы

Рис. 15.23. Диалоговое окно Фоновый звук

Замечание

Если хотите, чтобы звук воспроизводился непрерывно, установите флажок Непрерывно (Forever). Но не злоупотребляйте звуковыми эффектами. Звучащая непрерывно мелодия может многих раздражать.

4. Нажмите кнопку ОК для закрытия диалогового окна Свойства страницы.
 5. Сохраните страницу. В открывшемся диалоговом окне Сохранение внедренных файлов (Save Embedded Files) в случае необходимости измените имя звукового файла, укажите его расположение в папках Web-узла и нажмите кнопку ОК.

Размещение видеозаписи и настройка ее свойств

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

Для размещения видеозаписи выполните следующие действия:

1. Установите курсор в место предполагаемого размещения видеофайла.
2. В меню Вставка (Insert) выберите команду Рисунок (Picture), а затем в открывшемся меню — опцию Видеозапись (Video).
3. На экране открывается диалоговое окно Видео (Video), предлагающее выбрать файл из папок текущего Web-узла, с диска, из Интернета. Выбрав необходимый файл, нажмите кнопку ОК. Диалоговое окно закроется, а видеозапись будет размещена на странице.
4. После того как видеозапись размещена, необходимо настроить ее свойства. Для этого выделите созданный объект и откройте окно его свойств, выполнив одно из следующих действий:

  • Выберите в меню Формат (Format) команду Свойства (Properties)
  • Выберите в контекстном меню команду Свойства рисунка (Picture Properties)
  • Нажмите комбинацию клавиш <Alt>+<Enter>

В открывшемся диалоговом окне Свойства рисунка (Picture Properties) (рис. 15.24) по умолчанию будет открыта вкладка Видеозапись (Video). Поле Источник видеозаписи (Video source) указывает расположение и наименование размещенной на Web-странице видеозаписи.

5. В поле Повтор (Loop) области Повторять (Repeat) укажите число повторений видеозаписи, а в поле Задержка повтора (Loop delay) — интервал (в миллисекундах) между повторениями.

Рис. 15.24. Вкладка Видеозапись диалогового окна Свойства рисунка

Рис. 15.25. Видеозапись, размещенная на Web-странице

Замечание

Если вы хотите, чтобы видеозапись воспроизводилась в течение всего просмотра Web-страницы, установите флажок Forever (Непрерывно).

6. Параметры области Начать (Start) позволяют задать момент начала воспроизведения видеозаписи. Чтобы видеозапись запускалась при загрузке Web-страницы в обозреватель, установите флажок при открытии файла (On file open). Для запуска файла на воспроизведение при указании на него курсора установите флажок при наведении указателя мыши (On mouse over).
7. Завершив установку параметров, нажмите кнопку ОК для закрытия диалогового окна.

На рис. 15.25 представлена Web-страница с размещенной в ней видеозаписью.


От автора

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

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

Для просмотра тем, предлагаемых программой FrontPage, выполните одно из следующих действий:

  • Выберите в меню Формат (Format) команду Тема (Theme)
  • Отобразите контекстное меню страницы и выберите из него команду Тема

В результате на экране откроется диалоговое окно Темы (Themes) (рис. 15.26).

Рис. 15.26. Диалоговое окно Темы

В левой части этого диалогового окна расположен переключатель Применить тему (Apply Theme to), содержащий две опции, которые позволяют указать, на какие страницы Web-узла будут распространяться выбранные установки:

  • ко всем страницам (All pages) — выбранная тема оформления будет применена ко всем страницам Web-узла
  • к выбранным страницам (Selected page(s)) — выбранная тема будет применена только к указанным вами страницам

Ниже находится список тем оформления, предлагаемых программой FrontPage. Просмотрите этот список. При выборе того или иного образца в области Образец темы (Sample of Theme) вы можете увидеть, как будут выглядеть заголовки, маркеры оформления списков, кнопки навигации, гиперссылки при использовании данной темы в оформлении страницы.

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

Флажок | Назначение
Яркие цвета (Vivid colors) | Используемые в оформлении цвета становятся более насыщенными
Активные рисунки (Active graphics) | Добавляется активная графика
Фоновый рисунок (Background picture) | Добавляется фоновое изображение
Применить с помощью CSS (Apply using CSS) | Добавляется внешняя таблица стилей CSS

Рис. 15.27. Вид диалогового окна Темы после нажатия кнопки Изменить

При нажатии кнопки Изменить (Modify), расположенной в нижней части диалогового окна Темы (Themes), появляются кнопки Цвета (Colors), Графика (Graphics), Текст (Text), Сохранить как (Save As), позволяющие на основе предложенных тем создать собственную, модифицировав используемую цветовую гамму, оформление графических элементов и шрифты (рис. 15.27). Созданную пользовательскую тему затем можно применять при оформлении разрабатываемых Web-страниц.

Изменение цветовой схемы темы

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

1. В диалоговом окне Темы выберите тему, которую хотите взять за основу при создании собственной темы, и нажмите кнопку Изменить.
 2. Нажмите кнопку Цвета (Colors). Откроется диалоговое окно Изменение темы (Modify Theme).
3. На вкладке Цветовые схемы (Color Schemes), выбирая из списка цветовые схемы, предложенные программой FrontPage, и просматривая их в области Пример темы (Sample of Theme), подберите подходящую (рис. 15.28).

Рис. 15.28. Вид диалогового окна Изменение темы при изменении цветовой схемы

4. Перейдите на вкладку Цветовой круг (Color Wheel). Используя движок Яркость (Brightness), установите необходимую яркость подобранной цветовой схемы.
5. На вкладке Другой (Custom), используя списки Элемент (Item) и Цвет (Color), вы можете по своему усмотрению изменить цвета любого элемента оформления Web-страницы: гиперссылок, активных гиперссылок, заголовков любого уровня, панелей управления и т. д. Список Элемент содержит следующие настраиваемые элементы:

  • Гиперссылки
  • Гиперссылка (активная)
  • Гиперссылка (использованная)
  • Граница таблицы
  • Заголовок 1 — Заголовок 6
  • Основной текст
  • Текст объявления
  • Текст панели переходов
  • Фон

Выбирая из списка Элемент объекты, цветовое оформление которых хотите изменить, и, используя цветовую палитру списка Цвет, осуществите настройку их цветов.

6. Завершив установку всех необходимых параметров, нажмите кнопку ОК для закрытия диалогового окна Изменение темы.
 7. Чтобы сохранить созданную тему, нажмите кнопку Сохранить как (Save As). На экране появляется диалоговое окно Сохранение темы (Save Theme) (рис. 15.29), в котором введите наименование темы и нажмите кнопку ОК.

Предупреждение

В диалоговом окне Темы для сохранения результатов модификации можно использовать кнопку Сохранить (Save). Но в этом случае, если вы решите отказаться от введенных изменений, восстановление исходной темы потребует значительных усилий. Лучше модифицированную схему сохранить под новым именем.

Рис. 15.29. Диалоговое окно Сохранение темы

Посмотрите на список тем в диалоговом окне Темы. В нем появилось наименование созданной вами темы. При установке курсора мыши на созданную тему становится доступной кнопка Удалить (Delete), с помощью которой можно удалить из списка пользовательские темы, если они больше не нужны. Данная кнопка не позволяет удалять темы, входящие в состав программы FrontPage.

Изменение оформления графических элементов

Программа FrontPage предоставляет возможность изменять оформление графических элементов в теме. Для этого используется диалоговое окно Изменение темы (Modify Theme), открываемое при нажатии кнопки Графика (Graphics). Чтобы изменить оформление графических элементов, выполните следующие действия:

1. В диалоговом окне Темы (Themes) выберите созданную вами тему.
2. Нажмите кнопку Графика (Graphics). На экране открывается диалоговое окно Изменение темы (рис. 15.30), содержащее две вкладки Рисунок (Picture) и Шрифт (Font).

Рис. 15.30. Вид диалогового окна Изменение темы, используемого для изменения оформления графических элементов

3. В верхней части диалогового окна расположен список Элемент (Item) настраиваемых графических объектов:

  • Горизонтальная линейка (Horizontal Rule)
    •
  • Кнопка "Вверх" (Quick Up Button)
    •
  • Кнопка "Вперед" (Quick Next Button)
    •
  • Кнопка "Назад" (Quick Back Button)
    •
  • Кнопка "Домой" (Quick Home Button)
    •
  • Кнопки глобальных переходов (Global Navigation Buttons)
    •
  • Маркированный список (Bullet List)
    •
  • Объявления (Banner)
    •
  • Переходы по вертикали (Vertical Navigation)
    •
  • Переходы по горизонтали (Horizontal Navigation)
    •
  • Фоновый рисунок (Background Picture)

Выберите из этого списка настраиваемый графический объект и откройте вкладку Рисунок (Picture).

4. На вкладке Рисунок вы можете указать графический файл, который будет использоваться при оформлении выбранного элемента. Для этого введите в поле ввода расположение и наименование файла или для выбора файла воспользуйтесь кнопкой Обзор (Browse). После нажатия этой кнопки открывается диалоговое окно Открытие файла (Select Picture), позволяющее выбрать графический файл из папок открытого Web-узла, в Интернете или на диске.
5. Перейдите на вкладку Шрифт. Она содержит списки Шрифт (Font), Размер (Size), Начертание (Style), Выровнять по оси X (Horizontal Alignment) и Выровнять по оси Y (Vertical Alignment), позволяющие в оформлении выбранного элемента изменить шрифт, его размер, стиль и задать выравнивание текстовой информации, размещенной на этом графическом элементе.
6. Настроив необходимые графические элементы, нажмите кнопку ОК для закрытия диалогового окна Изменение темы.
 7. Сохраните введенные изменения, нажав кнопку Сохранить (Save) диалогового окна Темы (Themes).

Изменение оформления текстовых элементов

Если необходимо изменить в теме, предложенной программой FrontPage, оформление только текстовых элементов, воспользуйтесь диалоговым окном Изменение темы (рис. 15.31), открываемым при нажатии кнопки Текст (Text) в диалоговом окне Темы (Themes). верхней части открывшегося диалогового окна расположен список Элемент (Item) настраиваемых объектов. Среди них находятся заголовки всех уровней и текстовая информация Web-страницы. Список Шрифт (Font) coдержит все шрифты, доступные на вашем компьютере.

Используя данные списки, измените необходимые параметры и нажмите кнопку ОК для закрытия диалогового окна.

Рис. 15.31. Вид диалогового окна Изменение темы при изменении оформления текста


Глава 2 Подключение к Интернету

Создание текстовых и графических гиперссылок

Добавление в Web-узел новой страницы
Гиперссылки
Закладки
Редактирование ссылки
Редактирование активных областей
Режим просмотра гиперссылок Web-узла
Режим переходов Web-узла
Панель ссылок
Редактирование панели ссылок
Использование общих областей при создании панелей ссылок


Глава 2 Подключение к Интернету

Добавление в Web-узел новой страницы

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

Для перемещения по Web-странице, как и в любом текстовом редакторе, можно использовать полосы прокрутки, клавиши со стрелками на клавиатуре и комбинации клавиш. Так, например, для перехода в начало страницы используется комбинация клавиш <Ctrl>+<Home>, в конец страницы — <Ctrl>+<End>. Клавиши <PageUp> и <PageDown> позволяют переместиться на один экран вверх или вниз, соответственно.

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

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

Замечание

Вопросы импортирования файлов в данной главе затронуты не будут, так как этому будет посвящена глава 18.

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

  • Кнопку Создать (New) на стандартной панели инструментов
  • Команду Создать (New) меню Файл (File), размещающую в окне программы FrontPage панель Создание веб-страницы или узла (New Page or Web)
  • Комбинацию клавиш <Ctii>+<N>

При использовании комбинации клавиш или нажатии кнопки Создать (New) на стандартной панели инструментов в Web-узел по умолчанию добавляется пустая страница, созданная с использованием шаблона Обычная страница (Normal Page).

В том случае, если при создании новой страницы вы хотите использовать какой-либо иной шаблон, вам необходимо открыть диалоговое окно Шаблоны страниц (Page Templates) (рис. 16.1), содержащее список шаблонов страниц, предлагаемых программой FrontPage. Для открытия этого окна выполните одно из следующих действий:

  • В меню кнопки Создать (New) стандартной панели инструментов выберите команду Страница (Page)
  • В меню Файл (File) выберите команду Создать (New), а затем из открывшегося подменю — опцию Страница или веб-узел (Page or Web). В окне программы FrontPage появляется панель Создание веб-страницы или узла (New Page or Web), на которой выберите команду Шаблоны страниц (Page Templates)

Рис. 16.1. Диалоговое окно для выбора шаблона создаваемой страницы

Диалоговое окно Шаблоны страниц (Page Templates) содержит список шаблонов. Выберите в нем шаблон, который хотите использовать при создании новой страницы. Используя область Образец (Preview) диалогового окна, просмотрите, какой вид она будет иметь. Нажмите кнопку ОК для закрытия окна и размещения шаблона страницы в Web-узле.

В результате добавления новой страницы в Web-узел в рабочей области программы FrontPage появится пустая страница с названием newjage_l.htm (рис. 16.2). Это название указывает на то, что данная страница является первой, создаваемой вами с момента запуска программы. При создании последующих страниц FrontPage присваивает им имена с возрастающими номерами: new_page_2.htm, newjage_3.htm и т. д.

Рис. 16.2. В Web-узел добавлена новая страницы, созданная с использованием шаблона Обычная страница

Сохранение страницы

Добавленной в наш Web-узел странице программа FrontPage присвоила название new_page_l.htm. Можно сразу приступить к размещению информации на ней. Но посмотрите на панель Список папок (Folder List). Структура Web-узла не изменилась. В ней отсутствует новая страница.

Совет

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

Для того чтобы добавленная в Web-узел страница появилась в списке файлов Web-узла, отображаемом на панели Список папок (Folder List), и с ней было удобно работать, Web-страницу необходимо сохранить на диске. Кроме того, пока страница не сохранена, она находится в оперативной памяти, что не гарантирует от случайностей, одна из которых (например, бросок питания в электрической сети) может в одно мгновение уничтожить труд нескольких часов.

Для сохранения новой Web-страницы на диске выполните любое из перечисленных ниже действий:

  • В меню Файл (File) выберите команду Сохранить как (Save As)
  • В меню Файл (File) выберите команду Сохранить (Save)
  • Нажмите кнопку Сохранить на стандартной панели инструментов
  • Нажмите комбинацию клавиш <Ctrl>+<S>

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

Для сохранения новой страницы выполните следующие действия:

1. В меню Файл выберите команду Сохранить как. Открывается диалоговое окно Сохранить как (рис. 16.3).
2. По умолчанию в раскрывающемся списке Папка (Save in), расположенном в верхней части диалогового окна, указано имя открытого Web-узла, а в рабочей области находится список его папок. Если вы хотите сохранить страницу в какой-либо из папок этого Web-узла, то откройте необходимую папку, щелкнув на ней мышью.
3. Вы можете поместить новую страницу в какой-либо другой Web-узел. В этом случае, используя раскрывающийся список Папка, найдите на диске необходимый Web-узел и затем откройте нужную папку. Для поиска нужного Web-узла можно использовать графические кнопки, расположенные с левой стороны диалогового окна и открывающие соответствующие системные папки компьютера.

Рис. 16.3. Окно для сохранения страницы

4. В поле Имя файла (File name) введите имя файла.
5. Нажмите кнопку Сохранить. Новая страница сохранится с расширением htm.

Замечание

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


Глава 2 Подключение к Интернету

Гиперссылки

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

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

Гиперссылки можно представить в виде линий со стрелками, по которым вы перемещаетесь в поисках необходимой информации. Они могут указывать на текст, графические изображения, страницы других Web-узлов в сети Интернет, документы Microsoft Office, закладки, размещенные на этой же странице, на других страницах Web-узла или внутри документов, локальные файлы вашего компьютера, адреса электронной почты для доставки корреспонденции и т. д.

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

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

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

Если бы не существовало гиперссылок, World Wide Web состоял из отдельных изолированных Web-страниц, перемещаться по которым было бы достаточно сложно. Далеко за примерами ходить не надо. Рассмотрим созданный нами тестовый Web-узел. Помимо домашней страницы, мы можем добавить в него любое необходимое нам количество страниц. Но как осуществлять переход между ними? Конечно, разработчик может перемещаться по страницам с помощью панели Список папок (Folder List), выбирая на ней нужную страницу. А как быть пользователю, просматривающему страницу в обозревателе, где эта панель отсутствует?

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

1. Откройте созданный нами тестовый Web-узел.
2. Разместите на домашней странице текстовый список, элементы которого будут использоваться для перехода на остальные страницы.
3. Выделите первый элемент списка, а затем выполните одно из следующих действий:

  • В меню Вставка (Insert) выберите команду Гиперссылка (Hyperlink)
  • Нажмите правую кнопку мыши и выберите команду контекстного меню Гиперссылка
  • Нажмите кнопку Добавление гиперссылки (Insert Hyperlink) [image] на стандартной панели инструментов
  • Нажмите комбинацию клавиш <Ctrl>+<K>

При выполнении любого из этих действий на экране открывается диалоговое окно Добавление гиперссылки (Insert Hyperlink) (рис. 16.4).

1. Список Папка (Look in) диалогового окна содержит наименование открытого Web-узла, а расположенная ниже область — список всех его папок и страниц. Выберите из этого списка Web-страницу, на которую вы создаете ссылку. Ее название будет перенесено в поле Адрес (Address).

Рис. 16.4. Диалоговое окно Добавление гиперссылки

5. Нажмите кнопку ОК.
 6. Сохраните домашнюю страницу.

Посмотрите, как теперь выглядит первый элемент списка, для которого создана гиперссылка (рис. 16.5). Он изменил цвет и выделен подчеркиванием. Именно так на Web-страницах выглядят гиперссылки, чтобы пользователь их легко находил.

Рис. 16.5. Для первого элемента списка создана гиперссылка

Совет

Для проверки действия ссылки не обязательно переходить в режим просмотра страницы. Можно в режиме редактирования страницы щелкнуть на ссылке, удерживая при этом нажатой клавишу <Ctrl>.

Диалоговое окно Добавление гиперссылки (Insert Hyperlink) позволяет создавать гиперссылки не только на страницы открытого Web-узла, а также на Web-страницы в Интернете, локальные файлы компьютера, на адрес электронной почты, а также на новую, еще не созданную страницу. Чтобы понять, как это можно осуществить, рассмотрим кнопки, размещенные в диалоговом окне Добавление гиперссылки. Назначение кнопок панели Связать с (Link to) описано в табл. 16.1.

Таблица 16.1. Кнопки панели Связать с

Кнопка | Назначение
 | Создает ссылку на существующие файлы и Web-страницы (см. рис. 16.4). Для поиска Web-страницы, на которую устанавливается ссылка, в Интернете предназначена расположенная в области Папка (Look in) кнопка [image] Интернет, запускающая установленный на компьютере обозреватель. Адрес найденной страницы переносится в поле Адрес диалогового окна Добавление гиперссылки (Insert Hyperlink)
 | Создает гиперссылку на закладку, находящуюся в текущем документе
 | Размещает в рабочей области окна Добавление гиперссылки (Insert Hyperlink) поля (рис. 16.6), позволяющие создать ссылку для отправки письма по электронной почте. Поле Адрес эл.почты (Е-mail address) предназначено для ввода адреса получателя, а поле Тема (Subject) — темы сообщения
 | Размещает в рабочей области окна Добавление гиперссылки (Insert Hyperlink) объекты интерфейса, с помощью которых можно задать имя новой страницы, на которую создается ссылка, и указать, создавать страницу сейчас или позднее

Рис. 16.6. Диалоговое окно Добавление гиперссылки при создании ссылки для отправки письма

Возможности диалогового окна Добавление гиперссылки не ограничиваются кнопками, перечисленными в табл. 16.1. Поле Текст (Text to display) позволяет задать текст гиперссылки. Кнопка Закладка (Bookmark) предназначена для создания ссылки на закладку, находящуюся в другом документе или на другой Web-странице. Кнопка Выбор рамки (Target Frame) позволяет указать имя целевого фрейма, в который должна загружаться указанная в ссылке страница.

Создание гиперссылки с использованием механизма "перенести-и-оставить"

Мы рассмотрели создание гиперссылок с помощью диалогового окна Добавление гиперссылки (Insert Hyperlink). Но этим не ограничиваются возможности программы FrontPage. Для создания гиперссылок она предоставляет в распоряжение разработчика механизм "перенести-и-оставить".

Чтобы создать гиперссылку с использованием этого механизма, выполните следующие действия:

1. Откройте Web-узел.
2. Отобразите на экране панель просмотра структуры папок. Для этого в меню Вид (View) выберите команду Список папок (Folder List).
3. Откройте в рабочей области программы FrontPage Web-страницу, на которой хотите создать гиперссылку.
4. В области структуры папок установите курсор на значок файла или страницы, для перехода к которой создается ссылка.
5. Нажмите левую кнопку мыши и, удерживая ее нажатой, перенесите в то место Web-страницы, в котором хотите расположить ссылку.
6. Отпустите кнопку мыши.
7. В месте, указанном вами, появляется текст и создается ссылка. Текст соответствует наименованию страницы, на которую создана ссылка. Скорректируйте текст гиперссылки, следя, чтобы он оставался выделенным и подчеркнутым. Если вы его просто удалите и введете нужный вам текст, будет удалена и ссылка.


Глава 2 Подключение к Интернету

Закладки

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

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

Создание закладки

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

1. Установите курсор в то место текста, где хотите расположить закладку.
2. В меню Вставка (Insert) выберите команду Закладка (Bookmark) или нажмите комбинацию клавиш <Ctrl>+<G>. На экране открывается диалоговое окно Закладка (рис. 16.7), содержащее список закладок, созданных на текущей странице.

Рис. 16.7. Диалоговое окно Закладка

3. Введите в поле Имя закладки (Bookmark name) наименование создаваемой закладки.
4. Нажмите кнопку ОК.

Посмотрите теперь на текст Web-страницы (рис. 16.8). В месте установки курсора появился значок закладки

Рис. 16.8. Закладки, размещенные в тексте, выделяются значками

Замечание

Для создания закладки можно использовать не только текст, но и графическое изображение. По внешнему виду графического объекта не видно, что он является закладкой, как в случае текстового объекта. Но в его контекстном меню появляется команда Свойства закладки (Bookmark Properties), открывающая диалоговое окно Закладка.

Поиск закладки и ее удаление

С правой стороны диалогового окна Закладка расположены две кнопки:

  • Очистить (Clear) — удаляет выделенную закладку, оставляя текст в неприкосновенности
  • Перейти (Goto) — осуществляет переход к выделенной в диалоговом окне закладке

В том случае, если необходимость в закладке отпала, для ее удаления выполните следующие действия:

1. Установите курсор слева или справа от значка закладки.
2. Откройте диалоговое окно Закладка, воспользовавшись любым из следующих способов:

  • В меню Вставка (Insert) выберите команду Закладка
  • Выберите команду контекстного меню Свойства закладки (Bookmark Properties)
  • Нажмите комбинацию клавиш <Alt>+<Enter>

3. Выберите из списка удаляемую закладку, щелкнув на ней мышью.
4. Нажмите кнопку Очистить (Clear).
5. Нажмите кнопку ОК для закрытия диалогового окна Закладка.

Посмотрите на текст. Он сохранился на Web-странице, но значок закладки отсутствует. Закладка удалена.

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

1. Установите курсор слева или справа от значка любой закладки на Web-странице.
2. Откройте диалоговое окно Закладка.
 3. Из списка закладок выберите наименование закладки, которую хотите найти на Web-странице.
4. Нажмите кнопку Перейти (Goto). На странице будет выделен значок требуемой вам закладки.

Создание ссылки на закладку текущей страницы

При создании гиперссылок на закладки необходимо различать два случая:

  • Закладки расположены на той же странице, что и ссылки на них
  • Закладка и ссылка на нее находятся на разных страницах Web-узла

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

1. Добавьте в созданный нами тестовый Web-узел новую страницу и сохраните ее.
2. Разместите на странице большой фрагмент текста в виде трех абзацев.
3. Расположите перед текстом маркированный список из двух пунктов для перехода на второй и третий абзац текста.
4. В начале второго абзаца создайте закладку. Для этого установите курсор в первую позицию абзаца и в меню Вставка выберите команду Закладка. Затем в открывшемся диалоговом окне Закладка введите наименование закладки и нажмите кнопку ОК.
 5. Аналогичным образом создайте в третьем абзаце вторую закладку. Диалоговое окно Закладка будет содержать список из двух закладок. Закройте это окно.
6. Перейдите в начало Web-страницы.
7. Выделите первый элемент списка и откройте диалоговое окно Добавление гиперссылки (Insert Hyperlink), нажав кнопку Добавление гиперссылки на панели инструментов.
8. На панели Связать с (Link to) диалогового окна Добавление гиперссылки (Insert Hyperlink) нажмите кнопку, содержащую текст местом в документе (Place in This Document). Диалоговое окно принимает вид, показанный на рис. 16.9. В области Выберите место в документе (Select a place in this document) отображается список созданных закладок.

Рис. 16.9. Использование в качестве ссылки закладки

9. Выделите в списке название первой закладки, на которую создаете ссылку, и нажмите кнопку ОК для закрытия диалогового окна.
10. Для создания следующей ссылки выделите второй элемент списка и откройте для него диалоговое окно Добавление гиперссылки (Insert Hyperlink). В нем по умолчанию установлен режим работы с закладками текущего документа. Выберите в списке наименование второй закладки.
11. Нажмите кнопку ОК для закрытия диалогового окна.
12. Ссылки на закладки созданы. Проверьте их действие. Для этого, удерживая в нажатом состоянии клавишу <Ctrl>, щелкните на элементе списка кнопкой мыши.

Создание ссылки на закладку другой страницы Web-узла

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

1. Откройте одну из страниц Web-узла.
2. Перейдите в конец страницы и расположите фрагмент текста, к которому будем осуществлять переход с домашней страницы.
3. В начале этого текста создайте закладку. Для этого установите курсор перед абзацем и в меню Вставка выберите команду Закладка (Bookmark). В открывшемся диалоговом окне Закладка введите наименование закладки и нажмите кнопку ОК.
 4. Откройте домашнюю страницу Web-узла.
5. Установите курсор в то место, где будет располагаться ссылка на закладку, расположенную на другой странице.
6. Откройте диалоговое окно Добавление гиперссылки (Insert Hyperlink), нажав кнопку Гиперссылка на панели инструментов.
7. Перейдите в режим работы с существующими файлами и Web-страницами, нажав на панели Связать с (Link to) кнопку с текстом файлом, веб-страницей (Existing Files or Web Page).
8. В списке страниц Web-узла щелкните мышью страницу, на которой расположена созданная нами закладка. Имя этой страницы будет перенесено в поле Адрес (Address).
9. Нажмите кнопку Закладка (Bookmark), расположенную справа от рабочей области окна. Открывается диалоговое окно Выбор места в документе (Select Place in Document) (рис. 16.10). Оно содержит список закладок, расположенных на странице, указанной в поле Адрес.

Рис. 16.10. Диалоговое окно Выбор места в документе, используемое для выбора закладки другой страницы

10. Выберите наименование закладки и нажмите кнопку ОК. Вы возвращаетесь в диалоговое окно Добавление гиперссылки (Insert Hyperlink). Обратите внимание на поле Адрес. После имени страницы, на которой размещена закладка, расположился символ #, а затем — наименование самой закладки (рис. 16.11).
11. Нажмите кнопку ОК для закрытия диалогового окна.

Ссылка на закладку, расположенную на другой странице Web-узла, создана. Проверьте ее действие. Для этого откройте домашнюю страницу. Удерживая в нажатом состоянии клавишу <Ctrl>, щелкните мышью на ссылке.

Рис. 16.11. Создание ссылки на закладку, расположенную на другой странице Web-узла

Создание ссылки на другой Web-узел в Интернете

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

1. Поместите на Web-страницу текст Газета "Аргументы и факты".
 2. Выделите введенный текст и откройте диалоговое окно Добавление гиперссылки (Insert Hyperlink), нажав кнопку Гиперссылка на панели инструментов.
3. Перейдите в режим работы с существующими файлами и Web-страницами, нажав на панели Связать с (Link to) кнопку с текстом файлом, веб-страницей (Existing Files or Web Page).
4. Нажмите кнопку [image] Интернет. Запускается установленный на компьютере обозреватель для поиска в Интернете страницы, на которую устанавливается ссылка.
5. Найдите Web-узел газеты "Аргументы и факты", введя в поле адреса www.aif.ru.
 6. Загрузите необходимую Web-страницу (рис. 16.12).

Рис. 16.12. Выбор в Интернете Web-страницы для установления ссылки на нее

7. Вернитесь в диалоговое окно Добавление гиперссылки (Insert Hyperlink).
8. В поле Адрес (Address) оказывается установленным адрес страницы, на которой вы находились (рис. 16.13).
9. Нажмите кнопку ОК для закрытия диалогового окна Добавление гиперссылки (Insert Hyperlink).

Совет

В том случае, если вы знаете адрес Web-страницы в Интернете, введите его в поле Адрес без запуска обозревателя.

Рис. 16.13. Использование в качестве ссылки адреса Web-страницы в Интернете


Глава 2 Подключение к Интернету

Редактирование ссылки

Созданную ссылку можно изменить. Прежде чем приступить к ее редактированию, выделите ее. После этого выполните одно из следующих действий:

В меню Вставка (Insert) выберите команду Гиперссылка (Hyperlink)

  • Нажмите правую кнопку мыши и выберите команду контекстного меню Свойства гиперссылки (Hyperlink Properties)
  • Нажмите кнопку Добавление гиперссылки на стандартной панели инструментов
  • Нажмите комбинацию клавиш <Ctrl>+<K>
  • Нажмите комбинацию клавиш <Alt>+<Enter>

В результате на экране откроется диалоговое окно Изменение гиперссылки (Edit Hyperlink), которое аналогично окну Добавление гиперссылки (Insert '.,, Hyperlink). Измените в нем необходимые параметры и нажмите кнопку ОК.

Удаление ссылки

Для удаления созданной ссылки выделите ее и нажмите клавишу <Delete> или <Backspace> на клавиатуре. При этом удаляется не только ссылка, но и исходный текст, использовавшийся для ее создания. В том случае, если вы хотите сохранить текст гиперссылки, вы должны поступить иначе:

1. Откройте окно редактирования ссылки Изменение гиперссылки (Edit Hyperlink) любым удобным для вас способом.
2. Нажмите кнопку Удалить ссылку (Remove Link).
3. Нажмите кнопку ОК для закрытия диалогового окна.

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

Создание графических ссылок

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

1. Откройте созданный нами тестовый Web-узел.
2. Добавьте в него новую страницу, выбрав на панели Создание страницы или веб-узла (New Page or Web) команду Пустая страница (Blank Page).
3. Расположите на странице текстовую информацию, а также графическое изображение, которое будем использовать в качестве гиперссылки.
4. Сохраните Web-страницу с графическим изображением, нажав кнопку Сохранить (Save) на стандартной панели инструментов.
5. Для настройки свойств графического изображения установите на него курсор, нажмите правую кнопку мыши и выберите из контекстного меню команду Свойства рисунка (Picture Properties). На экране открывается диалоговое окно Свойства рисунка.
 6. На вкладке Общие (General) нажмите кнопку Обзор (Browse), расположенную с правой стороны поля Расположение (Location). Открывается диалоговое окно Изменение гиперссылки (Edit Hyperlink).
7. Выберите из списка страниц Web-узла домашнюю страницу index.htm, на которую создаем ссылку. Ее имя будет перенесено в поле Адрес (Address).
8. Нажмите кнопку ОК для закрытия диалогового окна Изменение гиперссылки. Наименование домашней страницы переносится в поле Расположение (рис. 16.14).

Рис. 16.14. Диалоговое окно Свойства рисунка

9. Перейдите на вкладку Вид (Appearance).
10. Используя раскрывающийся список Выравнивание (Alignment) области Положение (Layout), задайте выравнивание изображения по левому краю страницы, выбрав опцию по левому краю (Left). При этом введенный текст располагается с правой стороны от рисунка.
11. Установите флажок Сохранять пропорции (Keep aspect ratio). Используя одно из полей Ширина (Width) и/или Высота (Height) области Размер (Size), уменьшите размер изображения.
12. Нажмите кнопку ОК для закрытия диалогового окна Свойства рисунка.

Посмотрите на изображение, используемое нами в качестве гиперссылки (рис. 16.15). По внешнему виду оно никак не отличается от изображения без гиперссылки, размещенного нами ранее на Web-странице. Перейдите в режим просмотра страницы, выбрав вкладку Просмотр (Preview) в нижней части рабочей области. Установите курсор на изображение. Он примет вид руки с вытянутым указательным пальцем. Нажмите кнопку мыши. На экране откроется домашняя страница Web-узла, на которую была создана гиперссылка.

Рис. 16.15. Использование графического изображения в качестве гиперссылки

Создание активных областей на изображении

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

Для создания на изображении активных областей, используемых в качестве гиперссылок, предназначены кнопки на панели инструментов Рисунки (Pictures), назначение которых описано в табл. 16.2.

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

Кнопка | Наименование | Назначение
 | Гиперпрямоугольник (Rectangular Hotspot) | Размещает на изображении активную область прямоугольной формы
 | Гиперкруг (Circular Hotspot) | Размещает на изображении активную область в виде круга
 | Гипермногоугольник (Polygonal Hotspot) | Размещает на изображении активную область в виде многоугольника
 | Выделить гиперобъекты (Highlight Hotspots) | Показывает все размещенные на изображении активные области

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

Рассмотрим создание активной области на графическом изображении:

1. Выделите на Web-странице графическое изображение. При этом на панели инструментов Рисунки (Pictures) активизируются кнопки, предназначенные для создания активных областей.
2. Нажмите на панели инструментов одну из трех кнопок Гиперирямоуголь-ник (Rectangular Hotspot), Гиперкруг (Circular Hotspot) или Гипермногоугольник (Polygonal Hotspot) в зависимости от того, какой формы область вы хотите создать: прямоугольную, круглую или многоугольную. Курсор принимает вид карандаша.
3. Установите курсор на изображение, нажмите левую кнопку мыши и, удерживая ее в нажатом состоянии, нарисуйте контур вокруг того места, которое хотите сделать активной областью.
4. Сформировав нужный контур, отпустите кнопку мыши.

Замечание

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

5. После создания контура на экране открывается диалоговое окно Добавление гиперссылки (Insert Hyperlink), используя которое создайте необходимую ссылку.

На рис. 16.16 показано несколько размещенных на изображении активных областей.

Рис. 16.16. Размещенные на изображении активные области


Глава 2 Подключение к Интернету

Редактирование активных областей

Создавая с помощью кнопок Гиперпрямоугольник (Rectangular Hotspot), Гиперкруг (Circular Hotspot) или Гипермногоугольник (Polygonal Hotspot) активные области, вы можете не расстраиваться по поводу того, что область получилась не того размера, который вам был нужен, или расположилась не там, где вам того хотелось. После создания активных областей их можно редактировать, изменяя местоположение, размер и связанные с ними гиперссылки.

Изменение местоположения активной области

Чтобы изменить местоположение активной области, выделите ее и выполните любое из следующих действий:

  • Установите курсор на контур, нажмите кнопку мыши и, удерживая в нажатом состоянии, перенесите контур в нужное место
  • В том случае, если требуется более точная настройка местоположения, задайте местоположение контура, используя клавиши со стрелками

Изменение размера активной области

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

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

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

Редактирование гиперссылки активной области

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

  • Дважды щелкните мышью на редактируемой области
  • Выделите область и выберите команду контекстного меню Гиперссылка (Hyperlink)
  • Выделите область и нажмите кнопку Добавление гиперссылки на стандартной панели инструментов
  • Нажмите комбинацию клавиш <Ctrl>+<K>

При выполнении любого из этих действий открывается диалоговое окно Изменение гиперссылки (Edit Hyperlink), которое аналогично окну Добавление гиперссылки (Insert Hyperlink), использовавшемуся при создании гиперссылки. Измените ссылку и закройте окно, нажав кнопку ОК.

Просмотр активных областей

После того как вы разместили на изображении несколько активных областей, для их одновременного просмотра вы можете нажать кнопку Выделить гиперобъекты (Highlight Hotspots) на панели инструментов Рисунки (Pictures). При этом само изображение становится невидимым, а на Web-странице отображаются только контуры активных областей. Выделенная активная область закрашивается черным цветом (рис. 16.17). Для восстановления нормального вида изображения необходимо щелкнуть мышью за его пределами или еще раз нажать кнопку Выделить гиперобъекты.

Рис. 16.17. Просмотр карты активных областей

Размещение текста на графическом изображении

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

1. Отобразите в окне программы FrontPage панель инструментов Рисунки (Pictures).
2. Откройте Web-страницу с размещенным в ней графическим изображением стрелки.
3. Удалите созданную для графического изображения ссылку. Для этого установите курсор на изображение и нажмите кнопку Добавление гиперссылки на стандартной панели инструментов. В открывшемся диалоговом окне Изменение гиперссылки (Edit Hyperlink) нажмите кнопку Удалить ссылку (Remove Link). Связь будет удалена, а диалоговое окно закроется.
4. Осветлите изображение, чтобы на нем хорошо была видна размещенная надпись. Для этого выделите графическое изображение, нажмите на панели инструментов Рисунки кнопку Цвет (Color) [image] и выберите в появившемся меню команду Размытие (Wash Out).
5. Нажмите на панели инструментов Рисунки (Pictures) кнопку Текст (Text) [image]. В центре изображения появляется текстовая область, в которой установлен мигающий курсор.
6. Введите текст Домой.
7. Используя списки на панели инструментов форматирования, задайте необходимый шрифт и размер для введенного текста.
8. Для того чтобы сделать текст активной областью, выберите в его контекстном меню команду Свойства гиперрисунка (Picture Hotspot Properties) или нажмите комбинацию клавиш <Alt>+<Enter>. Откроется диалоговое окно Добавление гиперссылки (Insert Hyperlink).
9. Выберите из списка страниц Web-узла домашнюю страницу index.htm. Ее имя будет перенесено в поле Адрес (Address).
10. Нажмите кнопку ОК для закрытия диалогового окна Добавление гиперссылки. Ссылка для текстовой надписи на графическом изображении создана.
11. Сохраните Web-страницу, нажав на стандартной панели инструментов кнопку Save.

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

Рис. 16.18. На графическое изображение помещен текст


Глава 2 Подключение к Интернету

Режим просмотра гиперссылок Web-узла

Программа FrontPage содержит средства управления ссылками, благодаря которым вы можете:

  • В режиме работы Гиперссылки (Hyperlinks) визуально просмотреть и оценить созданные ссылки
  • Обновить отображаемые гиперссылки, воспользовавшись командой Пересчитать гиперссылки (Recalculate Hyperlinks) меню Сервис (Tools)
  • В режиме просмотра отчетов Отчеты (Reports) получить статистические сведения о количестве ссылок по разным категориям:
  • Гиперссылки (Hyperlinks) — все гиперссылки Web-узла
  • Непроверенные гиперссылки (Unverified hyperlinks) — непроверенные гиперссылки
  • Неработающие гиперссылки (Broken hyperlinks) — разорванные гиперссылки
  • Внешние гиперссылки (External hyperlinks) — ссылки со страниц текущего узла на другие Web-узлы
  • Внутренние гиперссылки (Internal hyperlinks) — ссылки между страницами текущего Web-узла

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

  • Нажмите кнопку Гиперссылки на панели режимов Представления (Views)
  • В меню Вид (View) выберите команду Гиперссылки (Hyperlinks)

В режиме просмотра гиперссылок в главном окне программы FrontPage отображается панель структуры папок Список папок (Folder List) (если она не была размещена там ранее), а в рабочей области — схема ссылок открытого Web-узла (рис. 16.19).

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

Рис. 16.19. Режим просмотра гиперссылок Web-узла

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

Замечание

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

Необходимо отметить важное свойство. Программа FrontPage автоматически переопределяет ссылки на переименованные и перемещенные Web-страницы.

Пересчет гиперссылок

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

Для пересчета гиперссылок в меню Сервис (Tools) предназначена команда Пересчитать гиперссылки (Recalculate Hyperlinks). При ее выполнении появляется информационное окно Обновление гиперссылок (Recalculate Hyperlinks) (рис. 16.20) с перечислением проводимых мероприятий при проведении данной операции и с запросом на продолжение действий. Для запуска процедуры пересчета ссылок нажмите кнопку Да.

Рис. 16.20. Информационное окно Обновление гиперссылок


Глава 2 Подключение к Интернету

Режим переходов Web-узла

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

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

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

"Для перехода в режим просмотра и редактирования структуры Web-узла используется кнопка Переходы (Navigation) на панели режимов Представления (Views) и команда Способ перехода (Navigation) меню View (Вид). При выполнении этих действий в главном окне программы появляется панель Список папок (Folder List), содержащая иерархическую структуру папок открытого Web-узла. В рабочей области программы размещается структура переходов Web-узла (рис. 16.21), где каждая отдельная страница представлена в виде прямоугольника, в центр которого помещено название страницы. Верхний прямоугольник в структуре содержит значок домика. Так в структуре Web-узла помечается домашняя страница, располагаемая всегда на самом верхнем уровне иерархии.

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

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

Рис. 16.21. Режим просмотра структуры Web-узла

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

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

Совет

Если кнопку мыши вы отпустили раньше, и страница в структуре переходов разместилась не там, где вам хотелось бы, — не волнуйтесь. Установите на нее курсор, нажмите левую кнопку мыши и переместите страницу в требуемое место.

Режимы просмотра переходов Web-узла

Обратите внимание, что на рис. 16.21 в нижней части домашней страницы имеется маленький квадрат со знаком "минус". При нажатии на него располагаемые ниже страницы сворачиваются и исчезают из структуры переходов, а знак "минус" заменяется "плюсом". Если затем нажать на значок "плюс", структура раскроется, отображая страницы следующего уровня. Данное свойство удобно использовать при просмотре разветвленной структуры, позволяя свернуть отдельные ветви, чтобы вся структура целиком поместилась на экране. Если вы захотите просмотреть всю структуру Web-узла с учетом всех свернутых страниц, то раскрыть их все сразу вы сможете с помощью команды Развернуть все (Expand All) контекстного меню.

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

По умолчанию структура Web-узла размещается сверху вниз, иными словами, вверху располагается домашняя страница, а ниже — страницы следующих уровней. Схему на экране можно развернуть таким образом, что уровни иерархии будут идти слева направо. Для изменения расположения используется кнопка Книжная/альбомная (Portrait/Landscape) на панели инструментов Переход и одноименная команда контекстного меню.

Переименование страницы

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

  • Нажмите правую кнопку мыши и в появившемся контекстном меню выберите команду Переименовать (Rename)
  • После фиксации курсора на прямоугольнике выдержите небольшую паузу и нажмите кнопку мыши
  • Нажмите клавишу <F2>

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

Удаление страницы

Для удаления страницы из структуры в режиме Переходы установите на нее курсор, а затем в меню Правка (Edit) выберите команду Удалить (Delete) или воспользуйтесь командой контекстного меню Удалить. При этом возможны два случая. Если ссылка на удаляемую страницу не размещена на панели ссылок, Web-страница удаляется из структуры без запроса со стороны программы FrontPage, но остается в Web-узле. Для удаления страницы из узла необходимо воспользоваться теми же командами удаления, но выделить файл не в структуре, а на панели папок Список папок (Folder List).

В том случае, если ссылка на удаляемую страницу размещена на панели ссылок, на экране появляется запрос на удаление страницы с панели ссылок или из Web-узла (рис. 16.22). При удалении страницы только из структуры переходов Web-узла, а соответственно, и с панелей ссылок, оставьте установленной опцию Удалить страницу и все страницы под ней из структуры переходов (Remove page from the navigation structure) и нажмите кнопку ОК. Для удаления страницы из Web-узла установите опцию Удалить страницу и все страницы .под ней с веб-узла (Delete this page from the Web) и нажмите кнопку ОК.

Рис. 16.22. Запрос на удаление страницы

Сохранение структуры

Для сохранения созданной структуры или внесенных изменений используется команда контекстного меню Применить изменения (Apply Changes). При выполнении этой команды все изменения в структуре входят в силу и в соответствии с ними корректируются изменения панелей ссылок Web-узла.


Глава 2 Подключение к Интернету

Панель ссылок

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

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

Предупреждение

Панели ссылок можно располагать в общей области и с правой стороны страницы. Но этого не стоит делать, так как при просмотре Web-страницы в обозревателе на мониторе с небольшим разрешением экрана эта область может быть не видна пользователю.

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

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

Создание панели ссылок

Для создания на Web-странице панели ссылок предназначена команда Панель ссылок (Navigation) меню Вставка (Insert). При выборе этой команды на экране открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component) (рис. 16.23), используемое для создания Web-компонентов. Окно содержит два списка. В списке Тип компонента (Component type) no умолчанию выделено значение Панели ссылок (Link Bars), указывающее, что будет создаваться панель ссылок. В списке Выберите тип панели приведен список типов возможных вариантов построения панели ссылок:

  • Панель с пользовательскими ссылками (Bar with custom links) — панель, содержащая ссылки на страницы, список которых формируется пользователем в процессе работы мастера.
    •
  • Панель со ссылками назад и вперед (Bar with back and next links) — панель, содержащая ссылки на предыдущую и следующую страницы.
  • Панель, основанная на структуре переходов (Bar based on navigation structure structure) — панель ссылок, создаваемая с использованием структуры переходов Web-узла, разработанной пользователем программы FrontPage.

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

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

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

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

1. Откройте создаваемый нами тестовый Web-узел.
2. Перейдите в режим работы Переходы, нажав одноименную кнопку на панели Представления (Views).
3. В центре рабочей области программы FrontPage расположен прямоугольник, обозначающий домашнюю страницу Web-узла. Используя мышь, поочередно перенесите из области структуры папок в рабочую область программы страницы, размещая их под домашней страницей таким образом, чтобы они все соединялись с ней линиями. 4. Измените наименования страниц, учитывая, что именно эти имена дадут названия кнопкам на панелях ссылок. Для переименования в контекстном меню каждого прямоугольника, обозначающего страницу, выберите команду Переименовать (Rename). В ставшее активным поле имени введите необходимое название и нажмите клавишу <Enter>. На рис. 16.24 представлена созданная карта переходов.

Рис. 16.24. Карта переходов тестового Web-узла

5. Перейдите в режим редактирования домашней страницы. Для этого на карте переходов дважды щелкните мышью на прямоугольнике этой страницы.
6. На домашней странице установите курсор в строку, в которой хотите расположить панель ссылок.
7. В меню Вставка (Insert) выберите команду Панель ссылок (Navigation).
8. На экране открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component) (см. рис. 16.23). В списке Тип компонента (Component type) по умолчанию выделено значение Панели ссылок (Link Bars), указывающее, что будет создаваться панель ссылок. В правом списке курсор установлен на значении Панель с пользовательскими ссылками (Bar with custom links). Нажмите кнопку Далее (Next).
9. Диалоговое окно Вставка компонента веб-узла (Insert Web Component) изменяется, принимая вид, показанный на рис. 16.25. В нем необходимо задать стиль оформления панели ссылок, используя содержащиеся в списке варианты тем. Первое в списке значение предполагает панель ссылок на основе темы, используемой в оформлении страницы. Оставьте это значение и нажмите кнопку Далее.

Рис. 16.25. Выбор стиля оформления панели ссылок

10. На следующем шаге необходимо указать ориентацию панели навигации из двух предлагаемых значений: горизонтальная или вертикальная (рис. 16.26). Область Выберите ориентация (Choose an orientation) содержит две опции:

  • По горизонтали (Horizontal) — кнопки на панели ссылок размещены по горизонтали в один ряд. В том случае, если они не все помещаются на одной строке, остальные размещаются на следующих строках
  • По вертикали (Vertical) — кнопки на панели ссылок размещены друг под другом в один столбец

Рис. 16.26. Выбор ориентации панели навигации

Совет

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

Оставьте установленное по умолчанию значение По горизонтали и нажмите кнопку Готово.

11. Открывается диалоговое окно Создание панели ссылок (Create New Link Bar) (рис. 16.27). В поле Имя (Name) введите наименование создаваемой панели навигации и нажмите кнопку ОК.

Рис. 16.27. Диалоговое окно Создание панели ссылок

12. На следующем шаге открывается диалоговое окно Свойства панели ссылок (Link Bar Properties) (рис. 16.28), содержащее две вкладки. Вкладка Общие (General) предназначена для формирования списка ссылок, размещаемых на панели. Вкладка Стиль (Style) позволяет изменить тему, используемую в оформлении панели, и ее ориентацию.

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

В верхней части вкладки Общие расположен список Существующие (Choose existing) созданных в Web-узле панелей ссылок. В нем содержится название панели, введенное нами в диалоговом окне Создание панели ссылок. Справа от списка расположена кнопка Добавить ссылку (Create new), открывающая окно для ввода названия новой панели ссылок. При выборе из списка Существующие названия существующей панели, в списке Ссылки (Links) отображается список ссылок, содержащихся на этой панели справа. Справа от списка Ссылки находятся кнопки, имеющие следующее назначение:

  • Добавить ссылку (Add link) — открывает диалоговое окно Добавить на панель ссылок (Add to Link Bar) (рис. 16.29), позволяющее указать страницу, на которую создается ссылка.
    •
  • Удалить ссылку (Remove link) — удаляет ссылку, выделенную в списке, с панели навигации.
    •
  • Изменить ссылку (Modify link) — открывает диатоговое окно Изменить ссылку, аналогичное используемому при добавлении ссылки (см. рис. 16.29). Оно позволяет изменить страницу, на которую осуществляется ссылка.
    •
  • Вверх (Move up) — изменяет порядок расположения ссылок в списке, перемещая текущую ссылку на одну позицию вверх.
    •
  • Вниз (Move down) — изменяет порядок расположения ссылок в списке, перемещая текущую ссылку на одну позицию вниз.

Замечание

Порядок следования ссылок на панели определяется порядком расположения ссылок в списке Ссылки (Links) диалогового окна Свойства панели ссылок (Link Bar Properties).

Рис. 16.29. Диалоговое окно Добавить на панель ссылок

Диалоговое окно Свойства панели ссылок содержит также два флажка:

  • Домашняя страница (Home page) — добавляет на панель ссылку на домашнюю страницу
  • Родительская страница (Parent page) — указывает, добавлять ли на панель ссылку на родительскую страницу

13. Сформируем список ссылок панели навигации домашней страницы нашего тестового Web-узла. Чтобы добавить в список Ссылки (Links) ссылку, нажмите кнопку Добавить ссылку (Add link).
14. Открывается диалоговое окно Добавить на панель ссылок (Add to Link Ваг). Оно позволяет создать ссылку на страницу текущего Web-узла, Web-страницу в Интернете, на локальные файлы компьютера, адрес электронной почты или на закладку. В поле Текст (Text to display) введите текст, который будет отображаться на панели ссылок. Из списка страниц выберите страницу, щелкнув на ее названии. Название страницы будет перенесено в поле Адрес (Address) (см. рис. 16.29). Завершив установку параметров, нажмите кнопку ОК.
 15. Диалоговое окно Добавить на панель ссылок закрывается, а текст, введенный в поле Текст, помещается в список Ссылки. Повторяя действия, описанные в пп. 13-14, сформируйте список всех ссылок панели навигации.
16. Закройте диалоговое окно Свойства панели ссылок, нажав кнопку ОК. На домашней странице появляется созданная панель ссылок (рис. 16.30). Она содержит ссылки на все страницы Web-узла, кроме домашней. Кроме того, в режиме редактирования на панели виден текст добавление ссылки (add link), открывающий диалоговое окно, позволяющее добавить новую ссылку.

Рис. 16.30. Домашняя страница с размещенной панелью ссылок

17. Откройте в режиме редактирования любую страницу второго уровня иерархии. Для этого на панели Список папок дважды щелкните мышью на ее значке.
18. Установите курсор на строку, в которой хотите расположить панель ссылок.
19. В меню Вставка (Insert) выберите команду Панель ссылок (Navigation). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component) (см. рис. 16.23).
20. В списке Выберите тип панели (Choose a bar type) выберите значение Панель, основанная на структуре переходов (Bar based on navigation structure structure), указывающее, что панель ссылок будет создаваться на основе созданной нами структуры переходов Web-узла, и нажмите кнопку Далее.
 21. Открывается окно мастера (см. рис. 16.25), в котором задайте стиль оформления панели навигации, используя содержащиеся в списке варианты тем. Затем нажмите кнопку Далее.
22. На следующем шаге (см. рис. 16.26) укажите ориентацию панели навигации из двух предлагаемых значений (вертикальная или горизонтальная), после чего нажмите кнопку Готово (Finish).
23. Открывается диалоговое окно Свойства панели ссылок (Link Bar Properties) (рис. 16.31), содержащее две вкладки. Вкладка Общие (General) служит для указания типа формируемой панели навигации. Вкладка Стиль (Style) позволяет изменить тему, используемую в оформлении панели, и ее ориентацию.

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

Область Добавляемые ссылки (Hyperlinks to add to page) вкладки Общие содержит опции, позволяющие указать, ссылки на какие страницы необходимо включить в панель ссылок. При выборе той или иной опции внесенные изменения отображаются на схеме, расположенной слева:

  • Родительский уровень (Parent level) — размещает на панели ссылки на страницы родительского уровня
  • Тот же уровень (Same level) — размещает на панели навигации ссылки на страницы текущего уровня иерархии
  • Назад и далее (Back and next) — размещает на панели навигации ссылки на предыдущую и следующую страницы текущего уровня
  • Дочерний уровень (Child level) — размещает на панели навигации ссылки на страницы дочернего уровня
  • Глобальный уровень (Global level) — размещает на панели навигации ссылки на страницы верхнего уровня
  • Дочерние страницы домашней (Child pages under Home) — размещает на панели навигации ссылки на страницы, дочерние по отношению к домашней странице

Установите для панели ссылок, размещаемой на странице второго уровня иерархии, опцию Тот же уровень (Same level). В этом случае с помощью созданной панели ссылок можно будет переходить на все страницы ' текущего уровня иерархии.

24. Область Дополнительно (Additional pages) вкладки Общие содержит два флажка. При установке флажка домашняя страница (Home page) на панель ссылок добавляется ссылка на домашнюю страницу. Флажок родительская страница (Parent page) указывает, создавать ли ссылку на родительскую страницу. Чтобы добавить на панель ссылок ссылку на домашнюю страницу, установите флажок домашняя страница.
 25. Если хотите изменить стиль оформления панели навигации или ее ориентацию на странице, перейдите на вкладку Стиль и выполните требуемые изменения.
26. Нажмите кнопку ОК для закрытия диалогового окна Свойства панели ссылок. На странице появляется созданная панель ссылок (рис. 16.32). Она содержит ссылки на все страницы Web-узла, включая и домашнюю.
27. Аналогичным образом расположите панели навигации на других страницах Web-узла. Для ускорения создания панелей навигации вы можете скопировать созданную панель, воспользовавшись командой Копировать (Сору) контекстного меню, затем вставить ее из буфера обмена на другие Web-страницы командой Вставить (Paste), так как все они имеют тот же уровень иерархии. Кроме того, при создании панели, аналогичной той, что имеется на других страницах Web-узла, можно использовать список Существующие (Choose existing) с названиями всех созданных панелей диалогового окна Свойства панели ссылок (Link Bar Properties) (см. рис. 16.28).

Рис. 16.32. Web-страница второго уровня иерархии с размещенной панелью навигации

Рис. 16.33. Вид панели ссылок при использовании темы Движение

Создание панелей ссылок завершено. Загрузите Web-узел в обозреватель и проверьте действие ссылок.

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


Глава 2 Подключение к Интернету

Редактирование панели ссылок

Размещенные на Web-странице панели ссылок можно редактировать, используя диалоговое окно Свойства панели ссылок (Link Bar Properties), с помощью которого она и создавалась. Для его открытия выделите панель ссылок и выполните одно из следующих действий:

  • Выберите в контекстном меню команду Свойства панели ссылок
  • Дважды щелкните мышью на панели ссылок
  • Нажмите комбинацию клавиш <Alt>+<Enter>

Используя параметры диалогового окна Свойства панели ссылок (Link Bar Properties), вы можете изменить гиперссылки, включенные в панель ссылок, ее ориентацию и вид.

Замечание

Диалоговое окно Свойства панели ссылок может иметь два разных вида. Если при создании панели навигации использовалась опция Панель с пользовательскими ссылками (Bar with custom links) или Панель со ссылками назад и вперед (Bar with back and next links), диалоговое окно имеет вид, показанный на рис. 16.28. В случае использования опции Панель, основанная на структуре переходов (Bar based on navigation structure structure) диалоговое окно Свойства панели ссылок аналогично приведенному на рис. 16.31.

Редактирование надписей на панели ссылок

При создании панели ссылок с помощью опции Панель с пользовательскими ссылками (Bar with custom links) надписи на кнопках задаются в поле Текст (Text to display) диалогового окна Добавить на панель ссылок (Add to Link Bar) (см. рис. 16.29). В случае, когда при создании панели ссылок используется опция Панель, основанная на структуре переходов (Bar based on navigation structure), надписи на кнопках совпадают с названием страниц, на которые создаются ссылки. Если название слишком длинное или вам не нравится, вы можете его изменить. Для этого выполните следующие действия:

1. Перейдите в режим создания структуры Переходы, нажав одноименную кнопку на панели режимов Представления.
2. Установите курсор на прямоугольник, соответствующий переименовываемой странице, нажмите правую кнопку мыши и выберите из контекстного меню команду Переименовать (Rename).
3. В ставшее активным поле имени введите новое название страницы.
4. Нажмите клавишу <Enter>.

Описанным способом можно изменить названия всех размещаемых на панелях ссылок, кроме ссылки на домашнюю страницу, а также системных ссылок Вверх (Up), Назад (Back) и Далее (Next). Для изменения названия системных кнопок используются параметры вкладки Переходы диалогового окна Настройка веб-узла (рис. 16.34), открываемого командой Настройка веб-узла (Web Settings) меню Сервис (Tools).

Рис. 16.34. Вкладка Переходы диалогового окна Настройка веб-узла

Используя находящиеся на вкладке поля ввода, можно изменить названия следующих системных кнопок, размещаемых программой FrontPage на панелях ссылок:

  • Домашняя страница (Home page) — кнопка перехода на домашнюю страницу Web-узла
  • Родительская страница (Parent page) — кнопка перехода на родительскую страницу по отношению к текущей
  • Предыдущая страница (Previous page) — кнопка перехода на предыдущую страницу текущего уровня иерархии
  • Следующая страница (Next page) — кнопка перехода на следующую страницу текущего уровня иерархии

Удаление панели навигации

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

  • В меню Правка (Edit) выберите команду Удалить (Delete)
  • Нажмите клавишу <Delete> или <Backspace>
  • Выберите команду контекстного меню Вырезать (Cut)


Глава 2 Подключение к Интернету

Использование общих областей при создании панелей ссылок

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

1. Откройте тестовый Web-узел.
2. Удалите с его страниц созданные ранее панели ссылок, а также заголовки. При создании панелей ссылок в верхней части страницы с использованием общих областей FrontPage помещает в них по умолчанию заголовки, размещенные на страницы в режиме Переходы.
 3. Откройте в режиме редактирования любую страницу Web-узла.
4. Для создания общих областей страниц в меню Формат (Format) выберите команду Общие границы (Shared Borders).
5. На экране открывается диалоговое окно Общие границы (рис. 16.35), в верхней части которого расположен переключатель Применить (Apply to). Он содержит две опции, указывающие, где будут создаваться общие области. Так как мы хотим разместить общие области на всех страницах, а не только на текущей, установим опцию ко всем страницам (All pages).
6. В центре диалогового окна расположены флажки Сверху (Тор), Слева (Left), Справа (Right) и Снизу (Bottom), позволяющие создать общие области в верхней, левой, правой и нижней частях страниц, соответственно. При установке опции ко всем страницам (All pages) становятся доступными флажки включить кнопки переходов (Include navigation buttons), расположенные под флажками Сверху и Слева, которые позволяют автоматически разместить панели ссылок в верхней и/или левой общих областях Web-страниц.

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

Замечание

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

Установите флажки Сверху и Слева, а также расположенные под ними флажки включить кнопки переходов.

7. Нажмите кнопку ОК для закрытия диалогового окна.

На этом размещение панелей ссылок завершено. Исходя из созданной вами структуры Web-узла и установленных в диалоговом окне Общие границы (Shared Borders) параметров, программа FrontPage сама завершает размещение панелей и осуществляет их оптимальную настройку. Вам только остается удостовериться, что вас устраивает расположение панелей ссылок и набор кнопок на них.

Посмотрим, что же в результате получилось. Откройте домашнюю страницу. В ее верхней части появился заголовок, размешенный нами на странице в режиме Переходы в прямоугольнике, условно обозначающем эту страницу. Под заголовком страницы расположена надпись Измените свойства этой панели для отображения на ней гиперссылок (Edit the properties for this link bar to display hyperlinks here). Слева находится панель ссылок. Щелкните на заголовке или панели ссылок. Заголовок, надпись под ним и панель ссылок выделяются прямоугольными рамками, указывающими расположение общих областей страницы (рис. 16.36).

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

Установите курсор на заголовок страницы и нажмите правую кнопку мыши. В контекстном меню имеется команда Свойства объявления на странице (Page Banner Properties), указывающая, что при создании заголовка программой FrontPage использован объект объявление. Если вы хотите изменить заголовок страницы, выберите эту команду и в поле Текст объявления (Page banner) открывшегося диалогового окна Свойства объявления на странице введите новый заголовок. При редактировании заголовка, размещенного в объявлении, автоматически изменяется и кнопка на панели ссылок, при нажатии которой осуществляется переход на эту страницу. Это верно для" всех страниц, кроме домашней. Чтобы изменить название кнопки со ссылкой на домашнюю страницу, используйте диалоговое окно Настройка веб-узла (Web Settings), описанное выше.

Для перехода с домашней страницы Web-узла на другие страницы используется панель ссылок, расположенная в левой общей области. Надпись Измените свойства этой панели для отображения на ней гиперссылок при просмотре в обозревателе не видна. Она лишь указывает на возможное расположение панелей навигации в этом месте.

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

Рис. 16.37. Панель ссылок, размещенная на Web-странице второго уровня иерархии

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

1. Добавьте в Web-узел новую страницу, нажав кнопку Создать (New) на стандартной панели инструментов.
2. Сохраните ее, нажав кнопку Сохранить (Save).
3. Перейдите в режим создания структуры переходов Переходы, нажав одноименную кнопку на панели режимов Представления.
 4. Используя мышь, перенесите новую страницу из области структуры папок в рабочую область программы, связывая ее с любой страницей второго уровня иерархии.
5. Измените наименование страницы. На рис. 16.38 представлена новая карта навигации тестового Web-узла.

Рис. 16.38. Карта навигации тестового Web-узла

6. Откройте в области редактирования страницу, являющуюся родительской по отношению к новой странице (рис. 16.39). Верхняя панель ссылок не изменилась. В левой общей области вместо надписи Измените свойства этой панели для отображения на ней гиперссылок появилась панель ссылок, содержащая ссылку на дочернюю Web-страницу.
7. Откройте новую страницу Web-узла. Программа FrontPage разместила на ней заголовок, введенный нами в режиме создания структуры, а под ним — панель ссылок, содержащую ссылки для перехода на домашнюю и родительскую страницы. Разработчику остается только разместить на Web-странице необходимую информацию.

Рис. 16.39. Web-страница, содержащая две панели ссылок


Глава 2 Подключение к Интернету

Формирование задач и отчетов

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


Глава 2 Подключение к Интернету

Режим формирования и просмотра задач

Программа FrontPage предоставляет в распоряжение разработчика Web-узла 6 режимов работы, для перехода в которые предназначена панель режимов работы Представления (Views), располагаемая с левой стороны главного окна FrontPage, а также одноименные команды меню Вид (View).

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

Режим просмотра гиперссылок Гиперссылки (Hyperlinks) позволяет наглядно просмотреть все ссылки, созданные в Web-узле. Для формирования иерархической структуры переходов Web-узла, используемой при создании панелей ссылок, предназначен режим Переходы (Navigation).

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

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

Для перехода в режим формирования и просмотра задач предназначена кнопка Задачи (Tasks) [image] на панели режимов работы Представления (Views) и команда Задачи (Tasks) меню Вид (View). При переходе в режим Задачи в рабочей области программы располагается в табличном виде список сформированных задач (рис. 17.1). Таблица содержит столбцы следующего назначения:

Наименование столбца | Назначение
Состояние (Status) | Состояние задачи
Задача (Task) | Наименование задачи
Назначено (Assigned To) | Исполнитель
Важность (Priority) | Приоритет выполнения
Сопоставлено с (Associated With) | Наименование страницы или файла, редактирование которых необходимо для завершения задачи
Изменен (Modified Date) | Дата последней модификации
Описание (Description) | Примечание к задаче, введенное в произвольной форме

Рис. 17.1. Главное окно программы FrontPage в режиме просмотра задач

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

1. Установите курсор на разделительную полосу в заголовке таблицы справа от столбца, ширину которого хотите изменить.
2. Когда курсор примет вид двунаправленной стрелки, нажмите кнопку мыши и, удерживая ее нажатой, перемещайте курсор вправо для увеличения ширины столбца или влево — для ее уменьшения.
3. Задав требуемую ширину столбца, отпустите кнопку мыши.

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


Глава 2 Подключение к Интернету

Создание новой задачи

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

Для создания новой задачи выполните следующие действия:

1. Перейдите в режим редактирования Web-страниц или в режим просмотра структуры папок, нажав соответственно кнопку Страница (Page) или Папки (Folders) на панели режимов Представления (Views) или выбрав одноименную команду меню Вид (View).
2. Откройте страницу, редактирование которой хотите включить в задачу.
3. В меню Правка (Edit) выберите команду Задачи (Tasks), а затем из появившегося подменю — опцию Добавить задачу (Add Task). Открывается диалоговое окно Создание задачи (New Task), не редактируемое поле Связано с (Associated with) которого содержит наименование страницы, для которой создается задача (рис. 17.2).

Совет

Для создания нового задания вы можете также нажать кнопку Создать (New) на панели инструментов и из открывшегося меню выбрать команду Задача (Task).

4. Введите в поле Имя задачи (Task name) имя формируемой задачи.
5. В поле Назначена (Assigned to) укажите фамилию или имя исполнителя.

Рис. 17.2. Диалоговое окно Создание задачи для ввода информации о задаче

6. Используя опции переключателя Приоритет (Priority), задайте приоритет задачи, выбрав одно из трех предложенных программой FrontPage значений:

  • Высокий (High)
  • Средний (Medium)
  • Низкий (Low)

7. В поле Описание (Description) введите информацию о работе, которую предстоит выполнить по данной задаче.
8. Завершив ввод информации, нажмите кнопку ОК для закрытия диалогового окна.
9. Перейдите в режим просмотра задач и убедитесь, что введенная вами задача добавлена в список.

Предупреждение

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

Редактирование параметров задач

FrontPage позволяет редактировать параметры сформированной задачи. Для редактирования параметров задачи используется диалоговое окно Сведения о задаче (Task Details) (рис. 17.3). Чтобы его открыть, перейдите в режим работы Задачи (Tasks), установите курсор на задачу, параметры которой требуется изменить, и дважды щелкните мышью. Для открытия диалогового окна Сведения о задаче можно также воспользоваться командой контекстного меню Изменить задачу (Edit Task).

Рис. 17.3. Диалоговое окно Сведения о задаче для редактирования информации о задании

Выполнение задачи

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

Для запуска задачи установите на нее курсор и выполните одно из следующих действий:

  • Выберите в меню Правка (Edit) команду Задачи (Tasks), а затем в появившемся подменю — опцию Запустить задачу (Start Task)
  • Нажмите правую кнопку мыши и выберите из контекстного меню команду Запустить задачу (Start Task))

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

Замечание

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

После завершения редактирования при сохранении страницы на экране появляется диалоговое окно с напоминанием о том, что данная страница была открыта из режима задач, и вам необходимо указать, окончательно ли завершено ее редактирование и можно ли перевести эту задачу в статус завершенных. Если вы уверены в полном выполнении задачи, то нажмите кнопку Да. После этого перейдите в режим задач и посмотрите, как выглядит выполненная задача. Изменения произошли не только в столбце Изменен (Modified Date), так как задача модифицировалась, но и в столбце Состояние (Status). Здесь появилось значение Завершена (Completed), а значок, располагающийся с левой стороны столбца, указывающего на состояние задачи, окрасился в зеленый цвет. Это говорит о том, что задача выполнена.

Если вы хотите в режиме Задачи изменить статус завершенной задачи на значение Завершена, установите курсор на строку с задачей и выполните одно из следующих действий:

  • Выберите в меню Правка (Edit) команду Задачи (Tasks), а затем в появившемся подменю — опцию Пометить как завершенную (Mark Complete)
  • Нажмите правую кнопку мыши и выберите из контекстного меню команду Пометить как завершенную (Mark Complete)

Просмотр истории задач

В режиме просмотра задач в таблице отображаются только не выполненные на данный момент задачи. Если у вас возникла необходимость восстановить и просмотреть список задач Web-узла с учетом ранее выполненных, программа FrontPage вам в этом поможет. Для просмотра всего списка задач в меню Правка (Edit) выберите команду Задачи (Tasks), а затем в появившемся подменю — опцию Отобразить журнал (Show History). В столбце Изменен (Modified Date) для задач, имеющих статус Завершена (Completed), указана дата завершения задачи.


Глава 2 Подключение к Интернету

Использование отчетов для анализа Web-узла

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

Для перехода в режим просмотра отчетов используется кнопка Отчеты на панели режимов Представления (Views) и опции команды Отчеты (Reports) меню Вид (View). При выполнении этих действий в рабочей области программы FrontPage отображается таблица (рис. 17.4), наименования столбцов которой, а также их количество зависят от типа выбранного отчета.

Рис. 17.4. Режим просмотра отчетов

В режиме просмотра отчетов в главном окне программы FrontPage появляется панель инструментов Отчеты (Reporting) (рис. 17.5), содержащая два раскрывающихся списка: Отчеты (Report) и Параметр отчета (Report Setting). Список Отчеты позволяет задать тип формируемого отчета, список Параметр отчета — указать дополнительный параметр, используемый при создании отчета. Это может быть выраженный в днях интервал времени, за который формируется отчет, или время в секундах, указывающее загрузку Web-страницы, или наименование категории при формировании отчета типа Категории (Categories).

Рис. 17.5. Панель инструментов Отчеты

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

Таблица 17.1. Типы формируемых отчетов

Тип отчета |  | Назначение
Сводка веб-узла (Site Summary) |  | Количественная информация о Web-узле (общее количество файлов, количество графических изображений, внешних и внутренних ссылок и т. д.)
Все файлы (All Files) |  | Полный список файлов, входящих в Web-узел
Недавно добавленные файлы (Recently Added Files) |  | Список файлов, добавленных в Web-узел в течение времени, указанного с помощью второго раскрывающегося списка на панели инструментов Отчеты
Недавно измененные файлы (Recently Changed Files) |  | Список файлов Web-узла, измененных в течение времени, указанного с помощью второго раскрывающегося списка на панели инструментов Отчеты
Старые файлы (Older Files) |  | Список файлов Web-узла, созданных ранее указанной даты
Потерянные файлы (Unlinked Files) |  | Список несвязанных файлов
Медленные страницы (Slow Pages) |  | Список медленно загружаемых страниц
Неработающие гиперссылки (Broken Hyperlinks) |  | Список разорванных ссылок
Ошибки компонентов (Components Error) |  | Список компонентов, содержащих ошибки
Состояние проверки (Review Status) | Список файлов с указанием вида просмотра файла
Назначено (Assigned To) | Список файлов с указанием разработчиков
Категории (Categories) | Список файлов с указанием их типа
Состояние публикации (Publish Status) | Отображение признака размещения файлов на сервере

Замечание

Кроме отчетов, перечисленных в табл. 17.1, FrontPage позволяет формировать отчеты о посещениях вашего Web-узла, об используемых посетителями браузерах, о наиболее посещаемых страницах, а также отчеты с итоговой информацией по дням, неделям, месяцам и т. п. Наименования формируемых отчетов данного типа позволяет просмотреть команда Использование (Usage).


Глава 2 Подключение к Интернету

Просмотр общего отчета

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

1. Откройте созданный Web-узел.
2. Для перехода в режим просмотра отчетов нажмите кнопку Отчеты (Reports) на панели режимов Представления (Views).
3. Из списка Отчеты на панели инструментов Отчеты выберите значение Сводка веб-узла (Site Summary) или выберите в меню Вид (View) команду Отчеты (Reports), а затем — опцию Сводка веб-узла (Site Summary). Отчет готов.

Просмотрите общий отчет (рис. 17.6). Он представлен в табличном виде и содержит количественную информацию о входящих в состав Web-узла файлах. Таблица состоит из четырех столбцов:

  • Имя (Name) — наименование параметра отчета
  • Число (Count) — количество файлов данного типа
  • Размер (Size) — общий размер файлов данного типа
  • Описание (Description) — краткое пояснение

Рис. 17.6. Общий отчет о файлах, входящих в Web-узел

Из этого отчета вы можете получить общую информацию о Web-узле, представленную в табл. 17.2.

Таблица 17.2. Параметры общего отчета

Наименование параметра |  | Назначение
Все файлы (All files) |  | Все файлы, входящие в Web-узел
Рисунки (Pictures) |  | Графические изображения, используемые при оформлении Web-узла
Несвязанные файлы (Unlinked files) |  | Несвязанные файлы
Связанные файлы (Linked files) |  | Связанные файлы
Медленные страницы (Slow pages) |  | Страницы Web-узла, имеющие время загрузки в секундах больше величины, указанной в поле загрузка "медленных" страниц занимает не менее ("Slow pages" take at least) вкладки Отчеты (Reports View) диалогового окна Параметры (Options)
Старые файлы (Older files) |  | Файлы, не изменявшиеся в течение количества дней, указанного в поле срок "устаревших" файлов должен быть больше ("Older" files are more than) вкладки Отчеты диалогового окна Параметры
Последние добавленные файлы (Recently added files) | Файлы, созданные в течение последних дней, число которых указано в поле срок "последних" файлов должен быть меньше ("Recent" files are less than) вкладки Отчеты диалогового окна Параметры
Гиперссылки (Hyperlinks) | Все гиперссылки текущего Web-узла
Непроверенные гиперссылки (Unverified hyperlinks) | Непроверенные гиперссылки
Неработающие гиперссылки (Broken hyperlinks) | Разорванные гиперссылки
Внешние гиперссылки (External hyperlinks) | Внешние гиперссылки, т.е. ссылки со страниц текущего узла на другие Web-узлы
Внутренние гиперссылки (Internal hyperlinks) | Внутренние гиперссылки, т.е. ссылки между страницами текущего Web-узла
Ошибки компонентов (Component errors) | Файлы, содержащие компоненты, имеющие ошибки
Незавершенные задачи (Uncompleted tasks) | Невыполненные задачи по текущему Web-узлу
Неиспользуемые темы (Unused themes) | Не используемые в оформлении темы


Глава 2 Подключение к Интернету

Просмотр списка всех файлов Web-узла

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

1. Откройте Web-узел.
2. Перейдите в режим просмотра отчетов, нажав кнопку Отчеты (Reports) на панели Представления (Views).
3. Из списка типов отчетов на панели инструментов Отчеты (Reporting) выберите значение Файлы (Files), а затем опцию — Все файлы (All Files).
На экране появляется табличный отчет со списком всех файлов Web-узла (рис. 17.7), содержащий следующие столбцы:

  • Имя (Name) — наименование файла
  • Заголовок (Title) — заголовок страницы
  • Папка (In Folder) — наименование папки, в которой файл расположен
  • Размер (Size) — размер файла в килобайтах
  • Тип (Туре) — тип файла
  • Изменен (Modified Data) — дата последней модификации
  • Кем изменен (Modified By) — имя разработчика, который редактировал данный файл

Рис. 17.7. Отчет, содержащий список файлов Web-узла

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

При выборе команды Приложение (Open With) контекстного меню открывается диалоговое окно Открыть в редакторе (Open With Editor) (рис. 17.8), с помощью которого можно выбрать требуемый для модификации редактор из списка доступных. Команда Просмотр в обозревателе (Preview in Browser) позволяет загрузить текущий файл в обозреватель для просмотра. Для изменения наименования файла можно использовать команду Переименовать (Rename). Команда Опубликовать выбранные файлы (Publish Selected Files) предназначена для публикации на сервере файлов, выбранных в списке. Команда Свойства (Properties) открывает диалоговое окно Свойства с параметрами файла.

Рис. 17.8. Диалоговое окно Открыть в редакторе, предназначенное для выбора редактора

Просмотр отчетов с указанием интервала времени

В том случае, если вас интересует информация о файлах, созданных или модифицированных в последнее время, выполните следующие действия:

1. Откройте Web-узел, информацию о котором хотите просмотреть.
2. Перейдите в режим просмотра отчетов, нажав кнопку Отчеты (Reports) на панели режимов Представления (Views).

Рис. 17.9. Используя список панели инструментов Отчеты, можно указать период времени, за который формируется отчет

3. Из списка типов отчетов на панели инструментов Отчеты выберите значение Файлы (Files), а затем — опцию Недавно добавленные файлы (Recently Added Files) или Недавно измененные файлы (Recently Changed Files) в зависимости от того, список созданных или модифицированных файлов хотите просмотреть. Если вас интересуют файлы, созданные ранее определенного дня, воспользуйтесь опцией Старые файлы (Older Files).
4. Используя список Параметр отчета (Report Setting) панели инструментов Отчеты (рис. 17.9), выберите количество дней, за которое хотите сформировать отчет.


Глава 2 Подключение к Интернету

Просмотр времени загрузки страниц

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

1. Для настройки параметров отчета откройте диалоговое окно Параметры (Options). Для этого в меню Сервис (Tools) выберите команду Параметры (Options).
2. Перейдите на вкладку Отчеты (Reports View).
3. Используя раскрывающийся список предполагаемая скорость соединения (Assume connection speed o0, выберите значение скорости вашего модема.
4. Введите в поле загрузка "медленных" страниц занимает не менее ("Slow pages" take at least) число, определяющее наименьшее время загрузки страницы для того, чтобы она была включена в формируемый отчет.
5. Нажмите кнопку ОК для закрытия диалогового окна.
6. Перейдите в режим формирования отчетов, нажав кнопку Отчеты (Reports) на панели режимов Представления (Views).
7. Из списка типов отчетов на панели инструментов Отчеты выберите команду Ошибки (Problems), а затем — опцию Медленные страницы (Slow Pages).

Замечание

Используя список Параметр отчета (Report Setting) панели инструментов Отчеты (Reporting), можно изменить наименьшее время загрузки страницы, необходимое для включения ее в формируемый отчет, установленное в диалоговом окне Параметры (Options). Для этого нажмите кнопку раскрытия списка и выберите новое значение. Данные в отчете обновятся.

Проверка гиперссылок

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

  • Гиперссылки (Hyperlinks) — все гиперссылки Web-узла
  • Непроверенные гиперссылки (Unverified hyperlinks) — непроверенные гиперссылки
  • Неработающие гиперссылки (Broken hyperlinks) — разорванные гиперссылки
  • Внешние гиперссылки (External hyperlinks) — внешние гиперссылки, т. е. ссылки со страниц текущего узла на другие Web-узлы
  • Внутренние гиперссылки (Internal hyperlinks) — внутренние гиперссылки, т. е. ссылки между страницами текущего Web-узла

Кроме того, используя ссылки, располагаемые в столбце Имя (Name) общего отчета, можно получить список гиперссылок определенного типа. На рис. 17.10 приведен список гиперссылок Web-узла, полученный из общего отчета с помощью ссылки Гиперссылки (Hyperlinks).

При просмотре в режиме Отчеты отчетов с гиперссылками становится активной кнопка Изменить гиперссылку (Edit Hyperlink) [image] на панели инструментов Отчеты (Reporting). Она открывает диалоговое окно Изменение гиперссылки (Edit Hyperlink) (рис. 17.11), позволяющее изменить гиперссылку на всех указанных страницах или на некоторых из них. Расположенная в этом окне кнопка Изменить (Edit Page) открывает в режиме редактирования страницу, на которой находится ссылка.

Рис. 17.10. Отчет со списком всех гиперссьшок Web-узла

Рис. 17.11. Диалоговое окно Изменение гиперссылки

Для проверки всех разорванных или неопределенных ссылок открытого Web-узла предназначено диалоговое окно Проверка гиперссылок (Verify Hyperlinks) (рис. 17.14), для открытия которого используется кнопка Проверка гиперссылок текущего веб-узла (Verify Hyperlinks) на панели инструментов Отчеты (Reporting). В нем по умолчанию установлена опция Проверить все гиперссылки (Verify all hyperlinks). Для запуска проверки гиперссылок нажмите кнопку Запустить (Start).

Рис. 17.12. Диалоговое окно Проверка гиперссылок


Глава 2 Подключение к Интернету

Настройка параметров отчета

Параметры отчетов, формируемых программой FrontPage, можно настраивать на вкладке Отчеты (Reports View) диалогового окна Параметры (Options) (рис. 17.13). Для открытия этого окна выберите в меню Сервис (Tools) команду Параметры (Options).

Рис. 17.13. Вкладка Отчеты диалогового окна Параметры

В области Общие (General) вкладки Отчеты (Reports View) расположены три счетчика, позволяющие настроить следующие параметры:

  • срок "последних" файлов должен быть меньше ("Recent" files are less than) — указывает количество дней, используемое программой FrontPage по умолчанию при формировании отчетов типа Последние добавленные файлы (Recently added files) и Недавно измененные файлы (Recently Changed Files)
  • срок "устаревших" файлов должен быть больше ("Older" files are more than) — указывает количество дней, используемое программой FrontPage по умолчанию при формировании отчета типа Старые файлы (Older Files)
  • загрузка "медленных" страниц занимает не менее ("Slow pages" take at least) — указывает наименьшее время загрузки Web-страницы в секундах для выбранной из списка предполагаемая скорость соединения (Assume connection speed of) скорости модема, начиная с которого страницы считаются медленно загружаемыми

Раскрывающийся список предполагаемая скорость соединения (Assume connection speed of) позволяет указать скорость модема, исходя из которой будет рассчитываться время загрузки Web-страниц.

Расположенный в нижней части области флажок отображать сетку при просмотре отчетов (Display gridlines when viewing reports) указывает, отображать ли в отчете линии сетки, улучшающие просмотр табличной информации.

На вкладке Отчеты (Reports View) в области Использование (Usage) задаются параметры отчетов, формируемых о посещениях Web-узла. Счетчик Число показываемых месяцев (Number of months show)n позволяет указать максимальное количество месяцев, за которые данные будут включаться в отчеты. Флажок включить диаграмму при сохранении отчета об использовании (Include chart when usage report is saved) указывает, что в отчет будет включаться отображение в виде диаграммы.


Глава 2 Подключение к Интернету

Использование документов Microsoft Office при создании Web-страниц

Использование буфера обмена Windows
Добавление фрагмента текста Microsoft Word
Добавление данных Microsoft Excel
Вставка информации из базы данных Microsoft Access
Использование команды Файл меню Вставка
Сохранение документов Microsoft Office в HTML-формате
Использование анимации PowerPoint
Сохранение объектов Microsoft Access в HTML-формате
Использование механизма "перенести-и-оставить"


Глава 2 Подключение к Интернету

Использование буфера обмена Windows

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

В данной главе рассмотрим разные способы использования данных из программ Word, Excel, PowerPoint и Access при подготовке Web-страниц.

Наиболее простой способ переноса данных из документов Microsoft Office — использование буфера обмена Windows, который представляет собой общую область хранения данных для всех программ, работающих в операционной системе. Процесс переноса данных состоит из двух этапов:

  • Копирование выделенного фрагмента документа в буфер обмена
  • Вставка содержимого буфера обмена в требуемое место Web-страницы

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

  • В меню Правка выберите команду Копировать
  • Нажмите кнопку Копировать на стандартной панели инструментов
  • Нажмите комбинацию клавиш <Ctrl>+<Ins> или <Ctrl>+<C>
  • Выполните команду Копировать контекстного меню, появляющегося при нажатии правой кнопки мыши на выделенном фрагменте

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

  • Выполнить команду Вставить (Paste) меню Правка (Edit)
  • Нажать кнопку Вставить (Paste) на стандартной панели инструментов
  • Нажать комбинацию клавиш <Shift>+<Ins> или <Ctrl>+<V>
  • Выполнить команду Вставить (Paste) контекстного меню, появляющегося при нажатии правой кнопки мыши
  • На панели Буфер обмена (Clipboard) щелкнуть мышью на интересующем вас фрагменте

Замечание

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

Для объектов, сохраненных в буфере обмена Windows, вы можете выбрать способ вставки данных с помощью команды Специальная вставка (Paste Special) меню Правка (Edit). При выборе данной команды открывается диалоговое окно Преобразовать текст (Convert Text) (рис. 18.1).

Рис. 18.1. Выбор режима вставки фрагмента данных

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

Таблица 18.1. Опции диалогового окна Преобразовать текст

Опция | Описание
Один отформатированный абзац (One formatted paragraphs) | Информация отображается в виде одного форматированного абзаца с использованием символов перехода на новую строку
Отформатированные абзацы (Formatted paragraphs) |  | Каждый абзац фрагмента представляется в виде форматированного абзаца
Обычные абзацы (Normal paragraphs) |  | Каждый абзац фрагмента представляется в виде обычного текста
Обычные абзацы с концами строк (Normal paragraphs with line breaks) |  | Каждый абзац фрагмента представляется в виде обычного текста с использованием символов перехода на новую строку
Обрабатывать как HTML (Treat as HTML) |  | Каждая строка текста преобразовывается в HTML-формат


Глава 2 Подключение к Интернету

Добавление фрагмента текста Microsoft Word

При копировании фрагмента текста Microsoft Word сохраняются многие из установленных вами элементов форматирования документа. Для копирования фрагмента документа Microsoft Word в Microsoft FrontPage выполните следующие действия:

1. В документе Microsoft Word выделите требуемый для копирования фрагмент информации (рис. 18.2) и поместите его в буфер обмена Windows.

Рис. 18.2. Выделение фрагмента документа

2. Перейдите в Microsoft FrontPage.
3. Установите курсор в требуемом месте Web-страницы и разместите содержимое буфера обмена с помощью любого из способов, описанных выше (рис. 18.3).

Рис. 18.3. Копирование фрагмента документа Microsoft Word

Замечание

При размещении на Web-странице информации из Microsoft Word 97, 2000 и ХР сохраняются элементы форматирования заголовков, нумерованных и маркированных списков. При использовании документов Word предыдущих версий номера списков и маркеры будут отсутствовать.


Глава 2 Подключение к Интернету

Добавление данных Microsoft Excel

Добавление данных электронной таблицы Microsoft Excel

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

1. Запустите программу Microsoft Excel.
2. Откройте таблицу, информацию из которой хотите разместить на Web-странице.
3. Выделите фрагмент или всю таблицу (рис. 18.4) и скопируйте ее в буфер обмена Windows любым удобным для вас способом.

Рис. 18.4. Выделение фрагмента электронной таблицы

4. Перейдите в программу Microsoft FrontPage.
5. Установите курсор в требуемую позицию Web-страницы и вставьте содержимое буфера обмена (рис. 18.5).

Рис. 18.5. Результат копирования фрагмента электронной таблицы на Web-страницу

Размещение на Web-странице диаграммы Microsoft Excel

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

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

1. Выделите на Web-странице таблицу, для которой хотите построить диаграмму.
2. Скопируйте ее в буфер обмена любым из перечисленных выше способов. Например, нажмите комбинацию клавиш <Ctrl>+<Ins>.
3. Запустите программу Microsoft Excel.
4. Вставьте информацию из буфера обмена в лист Excel, нажав комбинацию клавиш <Shift>+<Ins>.
5. Используя средства программы Microsoft Excel, постройте диаграмму (рис. 18.6).

Рис. 18.6. Диаграмма, созданная в Excel

6. Выделите созданную диаграмму.
7. Скопируйте ее в буфер обмена любым удобным для вас способом.
8. Перейдите в программу FrontPage.
9. Установите курсор в то место Web-страницы, где хотите расположить диаграмму, и нажмите, например, комбинацию клавиш <Shift>+<Ins> или воспользуйтесь для вставки информации из буфера обмена любым удобным для вас способом. Диаграмма размещается на Web-странице (рис. 18.7) в виде графического изображения. Для настройки ее свойств используется диалоговое окно Свойства рисунка, открываемое командой Свойства рисунка (Picture Properties) контекстного меню или комбинацией клавиш <Alt>+<Enter>.

Рис. 18.7. Размещение на Web-странице диаграммы, созданной в Excel


Глава 2 Подключение к Интернету

Вставка информации из базы данных Microsoft Access

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

1. Запустите программу Microsoft Access.
2. Откройте таблицу, информацию из которой хотите разместить на Web-странице.
3. Выделите фрагмент или всю таблицу (рис. 18.8).
4. Скопируйте ее в буфер обмена Windows любым удобным для вас способом.
5. Перейдите в программу Microsoft FrontPage.
6. Установите курсор в требуемую позицию Web-страницы и вставьте содержимое буфера обмена (рис. 18.9).

Рис. 18.8. Выделение фрагмента таблицы базы данных Access

Рис. 18.9. Результат копирования фрагмента таблицы из базы данных Microsoft Access на Web-страницу


Глава 2 Подключение к Интернету

Использование команды Файл меню Вставка

Для размещения на Web-странице данных других форматов можно использовать команду Файл (File) меню Вставка (Insert). При выполнении этой команды открывается диалоговое окно Выбор файла (Select File) (рис. 18.10). Список Тип файлов данного окна содержит форматы, которые можно импортировать в программу FrontPage. Перечень этих форматов представлен в табл. 18.2.

Таблица 18.2. Форматы, поддерживаемые программой FrontPage

Формат | Расширение имени файла
Файлы HTML | HTM, HTML
Гипертекстовые шаблоны | HTT
Lotus 1-2-3 | WK1.WK3, WK4
Лист Microsoft Excel | XLS, XLW
Microsoft Word 2.x для Windows | DOC
Microsoft Word 6.0/95 для Windows и Macintosh | DOC
Microsoft Word 97-2002 | DOC
Microsoft Word 4.0-5.1 для Macintosh | MCW
Подготовленный HTML-код | HTX, ASP
Формат RTF | RTF
Текстовые файлы | TXT
Windows Write | WRI
WordPerfect 5.x | DOC
WordPerfect 6.x | DOC, WPD
Works 4.0 для Windows | WPS
Works 2000 | WPS, WPT

Выберите необходимый тип файла и нажмите кнопку Открыть.

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

Рис. 18.10. Диалоговое окно Выбор файла

Рис. 18.11. Диалоговое окно Открыть файл как позволяет указать, с использованием какого формата открыть файл

Добавление файла без преобразования формата

Программа FrontPage позволяет с помощью команды Импорт (Import) меню Файл (File) добавлять в Web-узел файлы без преобразования их исходного формата. Список форматов, для которых применима данная команда, ограничен. С помощью этой команды можно импортировать в Web-узел файлы в HTML формате, графические файлы форматов GIF и JPEG, а также документы Microsoft Office: Word, Excel, PowerPoint.

Для импорта файла с сохранением его собственного формата выполните следующие действия:

1. В меню Файл (File) выберите команду Импорт (Import).
2. В открывшемся диалоговом окне Import (рис. 18.12) нажмите кнопку Добавить файл (Add File).
3. Открывается диалоговое окно Добавление файла в список для импорта (Add File to Import List) (рис. 18.13). Используя список Тип файлов, укажите тип импортируемого файла.
4. Найдите необходимый файл и нажмите кнопку Открыть.
5. В диалоговом окне Импорт появляется наименование выбранного файла. Если вы хотите импортировать несколько файлов, опять воспользуйтесь кнопкой Добавить файл (Add File) и сформируйте в окне весь необходимый список. Завершив выбор файлов, нажмите кнопку ОК.

Рис. 18.12. Диалоговое окно Импорт позволяет импортировать файлы в их собственном формате

Рис. 18.13. Диалоговое окно Добавление файла в список для импорта

Импортированные файлы добавляются в Web-узел с исходными именами и форматами. Они имеют те же значки, что и в Проводнике Windows. Для просмотра файла дважды щелкните на нем мышью. Запустится приложение, в котором данный файл был создан.

Замечание

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


Глава 2 Подключение к Интернету

С охранение документов Microsoft Office в HTML-формате

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

Для сохранения документа в формате Web-страницы в меню Файл (File) их программ размещена команда Сохранить как веб-страницу (Save as Web ge). При выборе этой команды открывается диалоговое окно Сохранение кумента (Save As), представленное на рис. 18.14. В списке Тип файла (Save type) по умолчанию установлено значение Веб-страница (Web Page), при котором сохраненный документ получает расширение НТМ и может открыться в обозревателе.

Рис. 18.14. Диалоговое окно Сохранение документа

Для того чтобы просмотреть подготовленную Web-страницу в обозревателе, т необходимости выходить из программы, достаточно воспользоваться командой Web Предварительный просмотр веб-страницы (Page Preview) меню Файл. Запустится обозреватель Microsoft Internet Explorer с загруженным в го документом.

В документах, созданных в программах Word, Excel и PowerPoint, можно разместить гиперссылки. Во всех перечисленных выше программах для создания гиперссылки используется диалоговое окно Добавление гиперссылки (Insert Hyperlink) (рис. 18.15), которое можно открыть, воспользовавшись ним из следующих способов:

  • В меню Вставка (Insert) выбрать команду Гиперссылка (Hyperlink)
  • В контекстном меню выбрать команду Гиперссылка (Hyperlink)
  • Нажать комбинацию клавиш <Ctrl>+<K>

Рис. 18.15. Диалоговое окно Добавление гиперссылки позволяет создать гиперссылку

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

Замечание

Работа с диалоговым окном Добавление гиперссылки приведена в главе 16.

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

Сохранение документа Word в HTML-формате

Документ, подготовленный в Microsoft Word 2000, можно сохранить в HTML-формате. Для этого предназначена команда Сохранить как Web-страницу меню Файл. Кроме этого, создавая новый документ, вы можете сразу использовать шаблон Web-страницы, выполнив следующие действия:

1. Запустите программу Microsoft Word 2000.
2. Для создания нового документа в меню Файл выберите команду Создать.
3. На вкладке Общие открывшегося диалогового окна Создание документа дважды щелкните на значке Web-страница (рис. 18.16). Создается пустой документ, имеющий по умолчанию расширение HТМ. Вы можете приступать к вводу информации.

Рис. 18.16. Диалоговое окно Создание документа позволяет выбрать шаблон Web-страницы для создания нового пустого документа

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

Рис. 18.17. Вкладка Web-страницы диалогового окна Создание документа

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

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

Сохранение документа Excel в HTML-формате

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

1. Запустите программу Microsoft Excel.
2. Используя средства программы Excel, создайте таблицу, которую хотите разместить на Web-странице.
3. Постройте диаграмму для табличных данных.
4. Разместите заголовок и создайте гиперссылки, используя которые можно будет переходить на другие страницы Web-узла.
5. Для сохранения данных в формате HTML в меню Файл выберите команду Сохранить как Web-страницу.
 6. В открывшемся диалоговом окне Сохранение документа откройте Web-узел, в который хотите включить созданную страницу.
7. В поле Имя файла введите имя созданного файла,
8. Нажмите кнопку Сохранить.
 9. Просмотрите созданную страницу в обозревателе (рис. 18.18). Для этого в меню Файл профаммы Excel выберите команду Предварительный просмотр Web-страницы.

Рис. 18.18. Просмотр в обозревателе Web-страницы, созданной в программе Excel

10. Запустите программу FrontPage.
11. Откройте Web-узел, в котором вы сохранили созданную страницу.
12. На панели Список папок (Folder List) найдите созданный файл. Он имеет расширение htm и содержит на значке логотип программы Excel.


Глава 2 Подключение к Интернету

Использование анимации PowerPoint

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

1. Запустите программу PowerPoint.
2. Создайте слайд, разместив в нем необходимый текст и графическое изображение.
3. Создайте на слайде надпись, которую будете использовать в виде гиперссылки для перехода на другую страницу Web-узла.
4. Для создания гиперссылки выделите надпись и в меню Вставка (Insert) программы PowerPoint выберите команду Гиперссылка (Hyperlink).

Замечание

В программе PowerPoint, как и программе FrontPage, для создания гиперссылок можно использовать команду Гиперссылка (Hyperlink) меню Вставка (Insert), команду Гиперссылка контекстного меню, а также комбинацию клавиш <Ctrt>+<K>.

5. В открывшемся диалоговом окне Добавление гиперссылки (Insert Hyperlink) выберите Web-узел, а затем и страницу, с которой хотите связать слайд, после чего нажмите кнопку ОК. Гиперссылка создана.
6. Сохраните слайд в формате HTML. Для этого в меню Файл (File) выберите команду Сохранить как веб-страницу (Save as Web Page).
7. Используя раскрывающийся список Папка (Save in) открывшегося диалогового окна Сохранение документа (Save As), найдите на диске и откройте Web-узел, в который хотите добавить страницу со слайдом.
8. В поле Имя файла (File name) введите имя Web-страницы.
9. Нажмите кнопку Сохранить (Save).
10. Просмотрите созданную Web-страницу в обозревателе (рис. 18.19). Для этого в меню Файл (File) программы PowerPoint выберите команду Предварительный просмотр веб-страницы (Web Page Preview). Проверьте действие размещенной на странице ссылки.
11. Запустите программу FrontPage.
12. Откройте Web-узел, в который вы добавили созданную в программе PowerPoint страницу.
13. На панели Список папок (Folder List) найдите созданную в программе PowerPoint Web-страницу. Она имеет расширение htm и содержит на значке логотип программы PowerPoint. Для редактирования файла дважды щелкните на нем мышью. Запускается PowerPoint, и вы можете приступать к модификации информации, размещенной в файле.

Рис. 18.19. Просмотр созданного слайда в обозревателе


Глава 2 Подключение к Интернету

Сохранение объектов Microsoft Access в HTML-формате

Программа Microsoft Access позволяет экспортировать в HTML формат таблицы, запросы, формы и отчеты. Для этого предназначена команда Экспорт (Export) меню Файл (File). При ее выполнении на экране открывается диалоговое окно Экспорт (Export) с указанием названия экспортируемого объекта (рис. 18.20).

Из списка Тип файла (Save as type) выберите значение Документы HTML. Используя список Папка (Save in), выберите Web-узел, в котором собираетесь сохранить документ. В поле Имя файла (File name) введите наименование файла и нажмите кнопку Сохранить (Export All). Документ сохраняется в файле с расширением HTML.

Откройте в программе FrontPage Web-узел, в котором сохранили документ Access, и в области Список папок (Folder List) дважды щелкните на документе мышью. В рабочей области программы откроется созданный документ. Вы его можете редактировать средствами программы FrontPage. На рис. 18.21 показан отчет, экспортированный в Web-узел из программы Access в HTML-формате.

Рис. 18.20. Диалоговое окно Экспорт

Рис. 18.21. Просмотр в программе FrontPage отчета, созданного в Access


Глава 2 Подключение к Интернету

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

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

1. Откройте в программе FrontPage Web-страницу, в которую хотите добавить данные, используя метод "перенести-и-оставить".
2. Расположите окна программ так, чтобы исходный и конечный документы были открыты и видимы (рис. 18.22).
3. Выделите перемещаемые или копируемые данные.

Рис. 18.22. Размещение окон для перетаскивания данных между приложениями

4. Для перемещения данных установите указатель на выбранные данные, нажмите и удерживайте кнопку мыши. После появления указателя переместите его на новое место в другой программе, а затем отпустите кнопку мыши (рис. 18.23).

Рис. 18.23. Результат перетаскивания диаграммы Microsoft Excel в Microsoft FrontPage


Глава 2 Подключение к Интернету

Публикация Web-узла


Глава 2 Подключение к Интернету

Подготовка Web-узла к публикации

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

Серверные расширения — это инструментальные средства создания и управления Web-узлами с помощью Microsoft FrontPage. Они обеспечивают следующие возможности:

  • Использование FrontPage для разработки узла непосредственно на Web-сервере
  • Сохранение документов, созданных в приложениях Microsoft Office XP, на Web-сервере
  • Использование на Web-узле компонентов FrontPage, таких как компонент обработки форм, компонент организации конференций, компонент полно-текстового поиска, компонент подсчета обращений к Web-узлу и т. д.

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

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

Прежде чем публиковать Web-узел, тщательно проверьте его. В этом вам помогут отчеты, которые мы рассмотрели в главе 17.

Обратите особое внимание на разорванные ссылки. Web-узел постоянно модифицируется, и на сервере публикуется его текущая версия. При этом часть файлов у вас готова к публикации, другие еще только разрабатываются. По умолчанию всем файлам присваивается статус Публиковать (Publish). Для файлов, которые еще рано публиковать, а также опубликованных ранее, вы можете установить в таблице отчета Состояние публикации (Publish Status) (рис. 19.1) статус Не публиковать (Don't Publish). Для открытия данного отчета перейдите в режим Отчеты и выберите на панели инструментов Отчеты из первого списка значение Делопроизводство (Workflow), а затем тип отчета — Состояние публикации (Publish Status). Изменение состояния публикации осуществляется с помощью списка, находящегося в столбце Опубликован.

Рис. 19.1. Установка признаков публикации файлов Web-узла

Предупреждение

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


Глава 2 Подключение к Интернету

Копирование файлов Web-узла на сервер

После подготовки Web-узла к публикации выполните одно из следующих действий:

  • Выберите команду Издать в сети (Publish Web) меню Файл (File)
  • Нажмите кнопку Издать в сети (Publish Web) [image] на стандартной панели инструментов
  • Нажмите комбинацию клавиш <Alt>+<P>

При первой публикации web-узла открывается диалоговое окно Адрес издания (Publish Destination), представленное на рис. 19.2.

Рис. 19.2. Диалоговое окно для ввода адреса публикации

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

1. В поле Введите место публикации (Enter publish destination) введите адрес Web-узла. Для определения адреса вы можете использовать диалоговое окно Новое место публикации (Publish location), которое открывается после нажатия кнопки Обзор (Browse).
2. Нажмите кнопку ОК. Открывается диалоговое окно Публикация веб-узла (Publish Web), предназначенное для задания параметров публикации Web-узла.
3. Если созданный вами Web-узел содержит вложенные узлы, установите в окне Публикация веб-узла (Publish Web) флажок Включить дочерние веб-узлы (Include subwebs).
4. Чтобы настроить параметры публикации, нажмите расположенную в левом нижнем углу окна кнопку Параметры (Options). Откроется диалоговое окно Параметры (рис. 19.3) с выбранной по умолчанию вкладкой Публикация (Publish).

Рис. 19.3. Вкладка Публикация диалогового окна Параметры

5. Используя переключатель Публиковать (Publish), выберите режим копирования файлов. При установке опции только измененные страницы (Changed pages only) на сервер будут копироваться только те выбранные Для публикации файлы, которые были изменены с момента прошлой публикации. Для копирования на сервер всех выбранных файлов установите опцию все страницы с перезаписью существующих страниц (АИ pages, overwriting pages already on destination).

6. Переключатель Определять изменения (Changes) указывает, каким образом FrontPage будет определять, отличаются ли публикуемые и размещенные на Web-сервере файлы. При установке опции сравнивая исходный веб-узел и веб-узел в месте публикации (Determine changes bycomparing source and destination webs) осуществляется сравнение содержимого файлов. Опция используя штампы времени (Use source file timestamps to determine changes since last publish) указывает на необходимость при публикации файлов сравнивать время создания публикуемых и размешенных на Web-сервере файлов.

7. Диалоговое окно Параметры (Options) содержит флажок Записывать изменения во время публикации (Log changes during publish). При установке флажка в log-файле фиксируются изменения, осуществленные при публикации Web-узла на сервере. Кнопка Просмотреть журнал (View log file) I позволяет просмотреть содержимое log-файла.

8. Задав параметры публикации, закройте диалоговое окно Параметры, нажав кнопку ОК. Вы возвращаетесь в окно Публикация веб-узла (Publish Web).

9. Для запуска процесса публикации нажмите кнопку Опубликовать (Publish).

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

11. Чтобы проверить результат публикации, выберите ссылку Просмотр опубликованного веб-узла (Click here to view your published web site). Откроется основная страница созданного вами Web-узла, размещенная на сервере (рис. 19.4). Для просмотра сформированного log файла воспользуйтесь ссылкой Просмотр журнала публикации (Click here to view your publish log file).

Если на сервере не установлены серверные расширения FrontPage, для публикации файлов Web-узла используется протокол FTP. В этом случае введите адрес домена FTP сервера и корневой каталог, в котором будет храниться Web-узел, например, ftp://ftp.glasnet.ru/books. Остальные действия аналогичны публикации с использованием протокола HTTP.

Рис. 19.4. Просмотр размещенной на сервере Web-страницы


Глава 2 Подключение к Интернету

Управление файлами Web-узла на сервере

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

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

Если на сервере установлены серверные расширения FrontPage, возможности управления файлами значительно расширяются. В этом случае вы можете открыть размещенный на сервере Web-узел и редактировать его с помощью Microsoft FrontPage. Для открытия Web-узла в этом случае выполните команду Открыть веб-узел (Open Web) меню Файл (File), а затем в открывшемся диалоговом окне Открытие веб-узла в поле ввода Имя веб-узла (Web name) задайте адрес сервера и место расположения на нем созданного вами Web-узла. После нажатия кнопки Открыть (Open) содержимое выбранного узла будет открыто в окне программы FrontPage. Вы можете открыть любую из Web-страниц (рис. 19.5) и редактировать ее.

Рис. 19.5. Редактирование Web-узла, размещенного на сервере

Замечание

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


Глава 2 Подключение к Интернету

Использование сложных элементов при оформлении Web-страниц

Использование эффектов динамического HTML
Меняющиеся кнопки
Анимация на Web-страницах
Использование анимации при смене страниц, Сворачивающиеся списки
Объявление на странице, Диспетчер объявлений
Использование фреймов при создании Web-страниц
Стили
Создание внутренних стилей страницы, Встроенные стили


Глава 2 Подключение к Интернету

Использование эффектов динамического HTML

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

В этой главе будут рассмотрены вопросы, связанные с размещением на Web-страницах объектов, позволяющих сделать страницы более живыми и привлекательными для пользователей. С ПОМОЩЬЮ объекта Объявление на странице (Page Banner) вы сможете разместить на странице слайды, которые используются для рекламы товаров, а также просто для украшения страницы.

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

Помимо этого, в главе будет рассмотрено создание и использование стилей для форматирования текста Web-страниц.

Вся размещаемая на Web-страницах информация, о которой шла речь в предыдущих главах (кроме видео), была статичной. Разработчику Web-узла, работающему с программой FrontPage, предоставляются разнообразные средства, позволяющие сделать Web-страницы интересными. К таким средствам, прежде всего, относятся динамические эффекты (DHTML). Для создания динамических эффектов совсем не обязательно знать язык Java, JavaScript или VBScript, и можно вообще обойтись без программирования. Для создания на Web-странице динамических HTML-объектов в программе FrontPage имеются команды встроенного меню, поэтому, чтобы разместить данные объекты и настроить их свойства, вам потребуется совсем немного времени. Но есть одно существенное ограничение, препятствующее широкому применению DHTML при создании Web-узлов — не все обозреватели, с помощью которых пользователи просматривают Web-страницы, поддерживают данные эффекты. Не все эффекты, созданные в Internet Explorer, смогут наблюдать пользователи Netscape Navigator, и наоборот. Может случиться так, что вы потратите время, добиваясь нужных эффектов, а многие посетители их не увидят.

Бегущая строка

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

Разместим на одной из страниц нашего тестового Web-узла бегущую строку и посмотрим, как настраиваются ее свойства. Чтобы разместить на Web-странице бегущую строку, выполните следующие действия:

1. Откройте страницу Web-узла, оформление которой хотите оживить, разместив в ней активный компонент.
2. Установите курсор в место предполагаемого расположения бегущей строки.
3. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component) (рис. 20.1).

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

4. Окно содержит два списка. Из списка компонентов выбрано находящееся в нем значение Динамические эффекты (Dynamic Effects). В правом списке окна отображаются динамические объекты программы FrontPage. Выберите из этого списка значение Быстрая строка (Marquee) и нажмите кнопку Готово (Finish). Открывается диалоговое окно Свойства бегущей строки (Marquee Properties) (рис. 20.2), в котором можно определить параметры объекта, размещаемого на Web-странице.

Рис. 20.2. Диалоговое окно Свойства бегущей строки

5. В верхней части диалогового окна расположено поле Текст (Text), предназначенное для размещения текста, который будет представлен на экране в виде бегущей строки. Введите в это поле, например, фразу Мы рады приветствовать Вас!
 6. Используя опции переключателя Направление (Direction), задайте направление движения бегущей строки:
  • налево (Left)
  • направо (Right)

7. Область Скорость (Speed) содержит два счетчика, управляющих скоростью перемещения строки и имеющих следующее назначение:
  • Задержка (Delay) — задает период времени (в миллисекундах) между двумя последовательными перемещениями строки
  • Величина (Amount) — используется для указания расстояния (в пикселах) между двумя последовательными строками

Варьируя значения этих двух параметров, можно изменять скорость движения текста. Оставьте установленные по умолчанию параметры.

8. Опции группы Поведение (Behavior) позволяют задать поведение бегущей строки:
  • прокрутка (Scroll) — бегущая строка появляется из-за границы прямоугольной области, в которой размещена, и скрывается за противоположной границей. Направление ее перемещения задается опциями переключателя Направление (Direction)
  • сдвиг (Slide) — строка появляется из-за границы прямоугольной области, в которой размещена, и останавливается перед противоположной границей. Направление ее перемещения задается опциями переключателя Направление (Direction)
  • попеременно (Alternate) — бегущая строка движется от одной границы прямоугольной области до другой, меняя попеременно направление

Выберите один из трех предложенных вариантов.

9. Используя параметры области Размер (Size), задайте размеры прямоугольной области, в которой будет перемещаться строка. Эта область содержит флажки:
  • Ширина (Width) — ширина области
  • Высота (Height) — высота области

Для задания ширины области установите флажок Ширина. Становится доступным поле, позволяющее указать ширину области в пикселах или в процентах от размера экрана, расположенное справа от флажка. Единицы измерения задаются с помощью опций в точках (In pixels) и в процентах (In percent). Введите необходимое значение. Аналогичным образом определите высоту области, в которой будет отображаться бегущая строка.

10. Область Повторы (Repeat) позволяет указать количество перемещений бегущей строки по экрану. При установке флажка Постоянно (Continuously) строка будет перемещаться по Web-странице непрерывно.

Замечание

Не злоупотребляйте применением данного флажка. Все хорошо в меру. Постоянно бегающая строка может раздражать и отпугнуть посетителей Web-узла.

11. Для задания цвета фона прямоугольной области, в которой перемещается строка, нажмите кнопку раскрывающегося списка Цвет фона (Background color) и выберите из открывшейся палитры нужный цвет.

12. Программа FrontPage позволяет изменить шрифт, используемый в оформлении бегущей строки. Нажмите кнопку Стиль (Style). На экране открывается диалоговое окно Изменение стиля (Modify Style), в котором нажмите кнопку Формат (Format). При этом появляется меню кнопки, содержащее несколько команд, предназначенных для оформления текста. Выберите значение Шрифт (Font). Открывается диалоговое окно Шрифт (рис. 20.3), в котором можно указать шрифт, его размер, цвет, начертание, а также применить к тексту различные эффекты оформления. Завершив установку параметров, нажмите кнопку ОК для закрытия окна.

Рис. 20.3. Диалоговое окно Шрифт; в нем можно выбрать оформление текста бегущей строки

13. Используя команду Граница (Border) меню кнопки Формат диалогового окна Изменение стиля (Modify Style), можно определить стиль оформления области, где будет размещаться бегущая строка. Выберите эту команду и, используя параметры открывшегося диалогового окна Границы и заливка (Borders and Shading) (рис. 20.4), задайте стиль рамки, ее цвет. Завершив настройку параметров, закройте окно, нажав кнопку ОК.

Замечание

Для изменения фона прямоугольной области мы использовали список Цвет фона (Background color) окна Свойства бегущей строки (Marquee Properties). Изменить фон можно также с помощью аналогичного списка, расположенного на вкладке Заливка (Shading) диалогового окна Границы и заливка (Borders and Shading).

14. Завершив установку всех параметров бегущей строки, закройте диалоговое окно Свойства бегущей строки (Marquee Properties).
15. Просмотрите результаты своей работы. Для этого в нижней части области редактирования выберите вкладку Просмотр (Preview) (рис. 20.5).

Замечание

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

Рис. 20.4. Диалоговое окно Границы и заливка

Рис. 20.5. Просмотр бегущей, строки в режиме Просмотр


Глава 2 Подключение к Интернету

Меняющиеся кнопки

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

1. Откройте в режиме редактирования Web-страницу, на которой хотите разместить кнопки.
2. Установите курсор в место предполагаемого расположения первой кнопки.
3. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component) (см. рис. 20.1).
4. Из списка компонентов выберите значение Динамические эффекты (Dynamic Effects). При этом в правом списке окна отображаются динамические объекты программы FrontPage.
5. Из правого списка выберите значение Меняющаяся кнопка (Hover Button) и нажмите кнопку Готово. Откроется диалоговое окно Свойства меняющейся кнопки (Hover Button Properties) (рис. 20.6), позволяющее определить параметры кнопки, размещаемой на Web-странице.

Рис. 20.6. Диалоговое окно Свойства меняющейся кнопки

6. Введите в поле Текст кнопки (Button text) текст, помещаемый на кнопку (например, название страницы, на которую осуществляется переход при нажатии на данную кнопку).
7. Чтобы установить гиперссылку, в поле Ссылка на (Link to) введите адрес URL или нажмите кнопку Обзор (Browse) и в открывшемся диалоговом окне Выбор гиперссылки для меняющейся кнопки (Select Hover Button Hyperlink) (рис. 20.7) выберите объект (Web-страницу, закладку, файл и т. д.), на который создается ссылка. Затем нажмите кнопку ОК.
8. Используя раскрывающийся список Цвет кнопки (Button color), задайте первоначальный цвет кнопки.

Рис. 20.7. Диалоговое окно Выбор гиперссылки для меняющейся кнопки

9. Список Эффект (Effect) содержит 7 значений, определяющих эффекты цветового оформления, предоставляемых программой FrontPage. Выберите из списка первое значение Заливка (Color fill).

10. Используя поля Ширина (Width) и Высота (Height), введите размер кнопки (в пикселах).

Совет

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

11. Из списка Цвет эффекта (Effect color) выберите цвет, который будет использоваться в создании эффекта.

Замечание

В оформлении изменяющейся кнопки можно применять графическое изображение и звук. Для использования этих возможностей в диалоговом окне Свойства меняющейся кнопки нажмите кнопку Другие (Custom). Откроется диалоговое окно Другие эффекты (рис. 20.8), содержащее две области. Верхняя , область Воспроизведение звука (Play sound) содержит два поля Щелчок (On click) и Наведение (On lover), в которых можно указать звуковые файлы, воспроизводимые, соответственно, при нажатии кнопки и при установке на нее курсора. Область Произвольный рисунок (Custom) позволяет задать графические изображения, используемые для оформления кнопки. Поле Кнопка (Button) содержит наименование графического файла, размещенного на кнопке. Чтобы указать изображение, которое будет появляться на кнопке при установке на нее курсора, используется поле Наведение (On lover).

12. Завершив настройку параметров кнопки, нажмите кнопку ОК для закрытия диалогового окна.

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

13. Аналогичным образом разместите на Web-странице остальные 6 кнопок. При оформлении кнопок можете использовать не только различные эффекты из списка Эффект (Effect), но и разное цветовое оформление, комбинируя цвета из списков Цвет кнопки (Button color) и Цвет эффекта (Effect color).
14. Загрузите в обозреватель страницу с размещенными на ней кнопками или перейдите в режим просмотра страницы, выбрав вкладку Просмотр (Preview), находящуюся в нижней части рабочей области.
15. Поочередно устанавливая курсор на разные кнопки, посмотрите, как они выглядят в зависимости от примененного к ним эффекта. Например, при установке курсора на кнопку, к которой применен эффект Заливка (Color fill), кнопка окрашивается в цвет, заданный с помощью списка Цвет эффекта (Effect color). Посмотрите, как выглядит кнопка с эффектом Свечение в центре (Glow). В центре кнопки располагаются концентрические окружности разной насыщенности, заданные с помощью списка Цвет эффекта.


Глава 2 Подключение к Интернету

Анимация на Web-страницах

Программа FrontPage позволяет при оформлении Web-страниц использовать различные анимационные эффекты, заимствованные из программы PowerPoint, входящей в программный пакет Microsoft Office, предназначенной для подготовки презентаций.

Используя объект Бегущая строка (Marquee), можно заставить перемещаться строку текста в отведенной для него области. А с помощью анимации можно "оживлять" целые абзацы и задавать им различные направления для их перемещения.

При создании эффектов анимации используется панель инструментов DHTML Effects (рис. 20.9). Для ее размещения в главном окне программы выполните одно из следующих действий:

  • В меню Формат (Format) выберите команду Эффекты DHTML (Dynamic HTML Effects)
  • В меню Вид (View) выберите команду Панели инструментов (Toolbars) и в открывшемся меню — опцию Эффекты DHTML (DHTML Effects)

Рис. 20.9. Панель инструментов Эффекты DHTML

На панели инструментов расположены три списка. Список Вкл (Оn) содержит события, при наступлении которых выполняется динамический HTML-эффект. В табл. 20.1 перечислены возможные события, входящие в этот список.

Таблица 20.1. События, при наступлении которых применяется DHTML-эффект

Событие | Описание
Щелчок (Click) | Щелчок кнопки мыши
Двойной щелчок (Double click) | Двойной щелчок мыши
Наведение мыши (Mouse over) | Установка курсора мыши
Загрузка страницы (Page load) | Загрузка Web-страницы

Список Применить (Apply) панели инструментов Эффекты DHTML содержит перечень анимационных действий (табл. 20.2), выполняемых объектами. Термин "объект" подразумевает не только фрагмент текста. Эффекты анимации могут быть применены, например, к графическим изображениям.

Таблица 20.2. Анимационные действия, применяемые к объектам

Действие | Описание
Падение слов (Drop in by word) | Текст падает сверху по одному слову
Пружина (Elastic) | Объект перемещается с небольшими колебаниями
Влет (Fly in) | Объект влетает
Вылет (Fly out) | Объект вылетает
Скачок (Hop) | Объект перемещается прыжками
Виток (Spiral) | Объект движется по спирали
Волна (Wave) | Объект движется колебательными движениями
Масштаб (Zoom) | Объект изменяет размеры

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

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

Комбинируя значения всех трех списков панели инструментов Эффекты DHTML, вы сможете сформировать самые разнообразные эффекты. При загрузке Web-страницы текст будет влетать по спирачи или волнообразно, въезжать сверху, снизу, справа, слева или по диагонали из разных углов страницы. Размер размещаемого текста можно увеличивать или уменьшать. Отдельные слова текста могут падать в формируемую фразу сверху или вплывать, двигаясь волнообразно. Попробуйте различные варианты и подберите то, что вам понравится и не будет раздражать посетителя вашей Web-страницы.

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

1. Откройте в режиме редактирования Web-страницу, для которой создаете анимацию.
2. Разместите в ней заголовок.
3. Для того чтобы панель инструментов Эффекты DHTML появилась на экране, выберите в меню Формат (Format) команду Эффекты DHTML (Dynamic HTML Effects).
4. Установите курсор мыши на заголовок, для которого задаете эффект анимации.
5. Из списка Вкл (On) панели инструментов выберите значение Загрузка страницы (Page load), указывающее, что анимационное действие будет выполняться при загрузке страницы.
6. Из списка Применить (Apply) выберите значение Падение слов (Drop in by word), указывающее, что заголовок будет формироваться из слов, падающих последовательно сверху.
7. Перейдите в режим просмотра Web-страницы, выбрав вкладку Просмотр (Preview), расположенную в нижней части рабочей области программы FrontPage, и посмотрите, как формируется заголовок страницы (рис. 20.10).

Рис. 20.10. Формирование заголовка с использованием эффекта падающих сверху слов

Ранее мы разместили на Web-странице бегущую строку. Теперь рассмотрим пример удаления ее с экрана в режиме просмотра, используя для этого эффект анимации.

1. Откройте в режиме редактирования страницу, содержащую бегущую строку.
2. Разместите на экране панель инструментов Эффекты DHTML, выбрав в меню Формат команду Эффекты DHTML (Dynamic HTML Effects).
3. Установите курсор мыши на текст бегущей строки.
4. Из списка Вкл (On) панели инструментов выберите значение Click (Щелчок мыши), указывающее, что анимационное действие будет выполняться при щелчке кнопкой мыши.
5. Из списка Применить (Apply) выберите значение Вылет (Fly out), указывающее, что объект покинет Web-страницу.
6. Используя список Эффект (Effect), можно указать направление, в котором объект покинет страницу. Выберите, например, Наверх (То top).

Замечание

При установке курсора на объект, к которому применен динамический HTML, под курсором появляется подсказка с указанием наименования эффекта. На рис. 20.11 представлена бегущая строка, к которой применен эффект Динамический эффект: Вылет Наверх.

Рис. 20.11. Бегущая строка с примененным к ней эффектом анимации Динамический эффект: Вылет Наверх

7. Перейдите в режим просмотра Web-страницы, выбрав вкладку Просмотр (Preview), расположенную в нижней части рабочей области программы FrontPage или загрузите страницу в обозреватель, выбрав в меню Файл (File) команду Просмотр в обозревателе (Preview in Browser).
8. При загрузке страницы начинает формироваться текст заголовка Адреса магазинов фирмы "Книжный мир", для которого мы задали динамический эффект в предыдущем примере. Слова по одному падают сверху в строку, пока не образуют весь текст. Одновременно с этим по странице движется бегущая строка с текстом Мы рады приветствовать Вас!. Щелкните в любом месте бегущей строки. Она начинает медленно двигаться вверх и исчезает с экрана.

Совет

Для удаления DHTML-эффекта установите курсор на объект и нажмите кнопку Удалить эффект (Remove Effect) на панели инструментов Эффекты DHTML.


Глава 2 Подключение к Интернету

Использование анимации при смене страниц, Сворачивающиеся списки

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

Рис. 20.12. Диалоговое окно Смена страниц

Список Событие (Event) данного диалогового окна содержит перечень событий (табл. 20.3), при наступлении которых применяются анимационные эффекты.

Таблица 20.3. События, при наступлении которых выполняются анимационные эффекты перехода между страницами

Событие | Описание
Вход на страницу (Page Enter) | При открытии страницы
Выход со страницы (Page Exit) | При выходе со страницы
Вход на узел (Site Enter) | При входе на Web-узел
Выход с узла (Site Exit) | При переходе со страницы одного Web-узла на страницу другого узла

В поле Длительность (Duration) можно задать продолжительность создаваемого эффекта (в секундах).

Предупреждение

Мы уже не раз говорили о том, что одна из главных задач, стоящих перед разработчиком Web-узла, — добиться того, чтобы Web-страницы загружались быстро. Так что не увеличивайте время загрузки, вводя большие значения в поле Длительность.

Для выбора эффекта перехода используется список Эффект (Transitions Effect), содержащий множество элементов.

Для страницы, к которой применен эффект перехода, на вкладке Другие (Custom) диалогового окна Свойства страницы (Page Properties) появляется соответствующая запись с указанием наименования события и его параметрами. На рис. 20.13 показано диалоговое окно свойств страницы, при выходе с которой будет использоваться эффект Растворение продолжительностью 5 секунд. Используя кнопки Добавить (Add), Изменить (Modify) и Удалить (Remove), можно добавлять в этот список новые эффекты, модифицировать установленные или удалять эффекты, от которых решили отказаться.

Рис. 20.13. Вкладка Другие диалогового окна Свойства страницы содержит параметры эффекта перехода

Сворачивающиеся списки

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

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

Чтобы сделать список сворачивающимся, выполните следующие действия:

1. Создайте на Web-странице многоуровневый список.
2. Выделите его, нажмите правую кнопку мыши и выберите команду контекстного меню Свойства списка (List Properties). Открывается одноименное диалоговое окно (рис. 20.14).
3. В нижней части диалогового окна расположены флажки Включить свертываемые структуры (Enable Collapsible Outlines) и Изначально свернуть (Initially Collapsed). Установите их.
4. Нажмите кнопку ОК для закрытия диштогового окна Свойства списка.
 5. Перейдите в режим предварительного просмотра страницы, выбрав вкладку Просмотр (Preview) в нижней части рабочей области. На экране отображаются только элементы верхнего уровня многоуровнего списка. Щелкните мышью на первом элементе списка. Список раскрывается, показывая элементы второго уровня выбранного элемента (рис. 20.15). При повторном щелчке мыши список сворачивается.

Рис. 20.14. Диалоговое окно Свойства списка позволяет сделагь список сворачивающимся

Рис. 20.15. Просмотр сворачивающегося списка


Глава 2 Подключение к Интернету

Объявление на странице, Диспетчер объявлений

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

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

1. Создайте новый одностраничный тестовый Web-узел. Для этого на панели Создание страницы или веб-узла (New Page or Web) выберите команду Шаблоны веб-узлов (Web Site Templates), а затем в открывшемся диалоговом окне Шаблоны веб-узлов дважды щелкните мышью на значке Одностраничный веб-узел (One Page Web).
2. Для перехода в режим просмотра структуры нового узла нажмите кнопку Переходы (Navigation) на панели режимов Представления (Views).
3. В центре структурной схемы расположен прямоугольник, условно обозначающий домашнюю страницу нашего одностраничного Web-узла. Установите на него курсор, щелкните на нем правой кнопкой мыши и выберите в контекстном меню команду Переименовать (Rename).
4. Введите новое название страницы (например, Заголовок страницы), и нажмите клавишу <Enter> (рис. 20.16).
5. Перейдите в режим редактирования страницы. Для этого дважды щелкните на наименовании страницы в области Список папок (Folder List) или на прямоугольнике, обозначающем страницу.

Рис. 20.16. Изменение названия страницы в режиме Переходы

6. Чтобы разместить баннер на странице, выберите в меню Вставка (Insert) команду Объявление на странице (Page Banner). Открывается диалоговое окно Свойства объявления на странице (Page Banner Properties) (рис. 20.17), в поле Текст объявления (Page banner) которого уже содержится текст Заголовок страницы, введенный нами в режиме Переходы (Navigation).

Рис. 20.17. Диалоговое окно Свойства объявления на странице

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

Замечание

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

Если позднее вы захотите изменить текст баннера:

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

  • Дважды щелкните мышью
  • Щелкните правой кнопкой мыши и выберите в контекстном меню команду Свойства объявления на странице
  • Нажмите комбинацию клавиш <Alt>+<Enter>

2. Введите в поле Текст объявления (Page banner) новый заголовок и нажмите кнопку ОК. Если вы теперь перейдете в режим переходов, то увидите, что изменилось наименование страницы. Применяя темы для оформления Web-страницы, можно сделать вашу страницу более привлекательной, разместив в баннерах графические изображения. На рис. 20.18 представлена наша тестовая страница, оформленная с I применением одной из тем, предлагаемых программой FrontPage.

Рис. 20.18. Использование темы в оформлении баннера

Диспетчер объявлений

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

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

1. Подготовьте изображения, которые хотите использовать в качестве слайдов, и разместите их в папке images Web-узла.
2. Откройте в режиме редактирования Web-страницу, на которой хотите разместить чередующиеся рекламные объявления.
3. Установите курсор в место их предполагаемого размещения.
4. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component) (см. рис. 20.1).
5. Из списка компонентов выберите значение Динамические эффекты (Dynamic Effect). При этом в правом списке окна отображаются динамические объекты программы FrontPage.
6. Выберите из этого списка значение Диспетчер объявлений (Banner Ad Manager) и нажмите кнопку Готово (Finish). Откроется диалоговое окно Свойства диспетчера объявлений (Banner Ad Manager Properties) (рис. 20.19), позволяющее определить параметры рекламных объявлений, размещаемых на Web-странице.

Рис. 20.19. Диалоговое окно Свойства диспетчера объявлений

7. В полях Ширина (Width) и Высота (Height) задайте размеры слайдов (в пикселах). Если слайды имеют разные размеры, установите размер самого большого из них. В этом случае слайды меньшего размера будут размещаться в центре выделенной для них области на нейтральном фоне.
8. Используя раскрывающийся список Эффект (Transition effect), задайте, каким образом один слайд будет сменять другой. Список содержит следующие значения:

  • None — слайды выводятся без применения эффектов перехода
  • Жалюзи вертикальные (Blinds Vertical) — слайды выводятся через вертикальные жалюзи
  • Жалюзи горизонтальные (Blinds Horizontal) — слайды выводятся через горизонтальные жалюзи
  • Растворение (Dissolve) — текущий слайд растворяется, заменяясь проявляющимся следующим слайдом
  • Прямоугольник внутрь (Box In) — текущий слайд уменьшается в размерах, заменяясь следующим слайдом
  • Прямоугольник наружу (Box Out) — новый слайд увеличивается в размере, заменяя текущий

Выберите любой из понравившихся эффектов. Глава 20. Использование сложных элементов при оформлении

9. В поле Показывать каждый рисунок (Show each picture for) введите время демонстрации слайда в секундах или оставьте значение, установленное по умолчанию программой FrontPage.
10. Используя кнопку Обзор (Browse) и открывающееся при нажатии на нее диалоговое окно Выберите гиперссылку объявления (Select Banner Ad Hyperlink), вы можете ввести информацию в поле Ссылка на (Link to), связав тем самым слайд с гиперссылкой. Эту возможность удобно использовать для открытия страниц рекламы при щелчке.
11. Область Показывать рисунки (Pictures to display) служит для формирования списка изображений, размещаемых в рекламном баннере, в порядке их показа. Для формирования списка изображений предназначены кнопки, расположенные справа:

  • Добавить (Add) — открывает диалоговое окно Добавление рисунка для объявления (Add Picture for Banner Ad), используя которое можно добавить в список изображения из папок текущего Web-узла, с диска, из Интернета
  • Удалить (Remove) — удаляет из списка выделенный файл изображения
  • Вверх (Move Up) — перемещает выделенный файл изображения на одну позицию списка вверх
  • Вниз (Move Down) — перемещает выделенный файл изображения на одну позицию списка вниз

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

12. Завершив ввод всех параметров, нажмите кнопку ОК для закрытия диалогового окна Свойства диспетчера объявлений.

Замечание

Если вы решите изменить какие-либо из параметров, щелкните на слайде правой кнопкой мыши и выберите в появившемся контекстном меню команду Свойства диспетчера объявлений (Banner Ad Manager Properties) (рис. 20.20) или нажмите комбинацию клавиш <Alt>+<Enter>.

Загрузите страницу в обозреватель, выбрав в меню Файл (File) команду Просмотр в обозревателе (Preview in Browser), и посмотрите, как выглядит ваше рекламное объявление. Одно изображение сменяет другое. После того как список пройден до конца, начинается показ первого слайда. И так до тех пор, пока вы не перейдете на другую страницу.

Рис. 20.20. Размещенное на Web-странице рекламное объявление с контекстным меню


Глава 2 Подключение к Интернету

Использование фреймов при создании Web-страниц

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

Замечание

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

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

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

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

Шаблоны фреймов

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

1. В меню Файл (File) выберите команду Создать (New), а затем в появившемся подменю — опцию Страница или веб-узел (Page or Web).
2. На появившейся панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны страниц (Page Templates).
3. В открывшемся диалоговом окне Шаблоны страниц (рис. 20.21) перейдите на вкладку Страница рамок (Frames Pages).

Рис. 20.21. Диалоговое окно Шаблоны страниц, содержащее шаблоны фреймов

4. В окне вкладки находятся 10 значков шаблонов. Назначение шаблонов фреймов описано в табл. 20.4.

Таблица 20.4. Шаблоны фреймов

Имя шаблона | Содержание фрейма
Объявление и оглавление (Banner and Contents) | Область заголовка, оглавление и область отображения основной информации
Оглавление (Contents) | Область оглавления и область отображения основной информации
Нижний колонтитул (Footer) | Область отображения основной информации и нижний колонтитул
Сноски (Footnotes) | Область отображения основной информации и нижняя область с примечаниями
Верхний колонтитул (Header) | Область отображения основной информации и верхний колонтитул
Колонтитулы и оглавление (Header, Footer and Contents) | Область оглавления, область отображения основной информации, верхний и нижний колонтитулы
Горизонтальная граница (Horizontal Split) | Две области, разделенные горизонтальной линией
Вложенная иерархия (Nested Hierarchy) | Область оглавления, область отображения основной информации и верхний колонтитул
Нисходящая иерархия (Top-Down Hierarchy) | Три области, разделенные горизонтальными линиями
Вертикальная граница (Vertical Split) | Две области, разделенные вертикальной линией

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

5. Открывается страница, имеющая вид, аналогичный представленному на рис. 20.22.

В соответствии с типом выбранного шаблона, страница разбита на облас-• ти, каждая из которых содержит по две кнопки:

  • Задать начальную страницу (Set Initial Page) — при нажатии на данную кнопку открывается диалоговое окно Добавление гиперссылки (Insert Hyperlink), позволяющее указать страницу, которая будет размещаться в этой области фрейма при его открытии
  • Создать страницу (New Page) — загружает во фрейм новую страницу шаблона Обычная страница (Normal Page)

Рис. 20.22. Шаблон фрейма Оглавление

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

Создание фрейма

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

Процесс создания Web-узла будет состоять из следующих этапов:

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

Рис. 20.23. Фрейм в режиме просмотра

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

Мы рассмотрели основные этапы работы, которую нам предстоит выполнить. Приступим к созданию Web-узла:

1. Создайте пустой Web-узел. Для этого на панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны веб-узлов (Web Sites Templates).
2. В поле Укажите расположение нового веб-узла (Specify the location of the new web) открывшегося диалогового окна Шаблоны веб-узлов (Web Sites Templates) введите наименование и расположение создаваемого узла, а затем дважды щелкните мышью на шаблоне Пустой веб-узел (Empty Web). Откроется пустой Web-узел.
3. Для создания страницы, размещаемой в заголовке фрейма, добавьте в Web-узел новую страницу шаблона Обычная страница (Normal Page).
4. В режиме редактирования введите в верхней строке страницы заголовок Книжный мир. Расположите его в центре строки. Для этого установите курсор в заголовок и нажмите кнопку По центру (Center) на панели форматирования.
5. Для сохранения страницы нажмите кнопку Сохранить (Save) на стандартной панели инструментов. В открывшемся диалоговом окне Сохранить как (Save As) задайте наименование файла и нажмите кнопку Сохранить.

Замечание

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

6. Добавьте в Web-узел новую страницу и разместите на ней текст оглавления. Оформите его в виде списка и сохраните на диске в файле content_f.htm.
7. На третью новую страницу поместите текст, который по умолчанию будет загружаться в основную область фрейма, и сохраните ее в файле main_f.htm.
8. На этом формирование страниц, отображаемых во фрейме при его загрузке, завершено. Теперь необходимо подготовить страницы, которые будут появляться в правой области фрейма при выборе пунктов оглавления. Создайте необходимые страницы. Их число должно быть равно количеству пунктов в области оглавления. Первой строкой нашего оглавления является Готовятся к печати. Web-страница, появляющаяся при выборе этого пункта, должна содержать книги, которые готовятся к печати и в ближайшее время должны появиться на книжном рынке. Подготовим эту страницу и сохраним ее в файле new_books.htm.
9. Создайте и сохраните остальные Web-страницы, необходимые для просмотра информации, представленной в оглавлении.
10. Все страницы подготовлены. Теперь их необходимо разместить во фрейме. Добавим в Web-узел новый фрейм. Для этого на панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны страниц (Page Templates).
11. В открывшемся диалоговом окне Шаблоны страниц перейдите на вкладку Страницы рамок (Frames Pages) (см. рис. 20.21) и дважды щелкните на значке шаблона Объявление и оглавление (Banner and Contents). Фрейм, созданный с использованием этого шаблона, содержит область заголовка, оглавление и область отображения основной информации (рис. 20.24).
12. Для указания страницы, которая должна размешаться в верхней области фрейма при его загрузке, нажмите кнопку Задать начальную страницу (Set Initial Page), расположенную в этой области.
13. В поле Адрес (Address) открывшегося диалогового окна Добавление гиперссылки (Insert Hyperlink) (рис. 20.25) укажите название страницы, содержащей заголовок, щелкнув на файле banner_f.htm. Затем нажмите кнопку ОК для закрытия окна. Указанная нами в гиперссылке страница разместилась в верхней области фрейма.

Рис. 20.24. Выбранный шаблон фрейма Объявление и оглавление

Рис. 20.25. Диалоговое окно Добавление гиперссылки позволяет указать страницу, которая будет размещаться во фрейме при его загрузке

14. Используя кнопки Задать начальную страницу (Set Initial Page) остальных областей фрейма, поместите в них созданные страницы content_f.htm и main_f.htm.

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

15. В области оглавления выделите первый элемент списка и выберите в его контекстном меню команду Гиперссылка (Hyperlink).
16. В поле Адрес (Address) открывшегося диалогового окна Добавление гиперссылки (Insert Hyperlink) укажите название страницы, содержащей информацию по данному вопросу, щелкнув на файле new_books.htm.
17. Для указания области фрейма, в которую указанная страница должна загружаться, нажмите в окне Добавление гиперссылки кнопку Выбор рамки (Target Frame).
18. Открывается диалоговое окно Конечная рамка (Target Frame), в области Текущая страница рамок (Current frames page) которого отображается структура фрейма (рис. 20.26). Для указания места загрузки страницы можно использовать данную структуру или значения списка Общие объекты (Common targets). Щелкните мышью в требуемой области структуры. Она окрашивается в синий цвет (рис. 20.27).

Рис. 20.26. Диалоговое окно Конечная рамка

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

19. Нажмите кнопку ОК для закрытия диалогового окна Конечная рамка (Target Frame).
20. Вы возвращаетесь в диалоговое окно Добавление гиперссылки (Insert Hyperlink), в котором также нажмите кнопку ОК.
21. Аналогичным образом для всех элементов списка оглавления укажите наименования загружаемых страниц и область фрейма, в которой эти страницы будут отображаться.
22. Для сохранения фрейма нажмите кнопку Сохранить (Save) на стандартной панели инструментов. В открывшемся диалоговом окне Сохранить как (Save As) задайте наименование файла index.htm и нажмите кнопку Сохранить.
23. Просмотрите, как будет выглядеть созданный фрейм в обозревателе. Для этого выберите вкладку Просмотр (Preview) в нижней части рабочей области.

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

Рис. 20.28. Отображение страницы раздела в правой области фрейма при его выборе из оглавления

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

1. Открыть диалоговое окно Свойства страницы (Page Properties), щелкнув правой кнопкой мыши в любом месте страницы и выбрав в контекстном меню команду Свойства страницы (Page Properties).
2. На вкладке Общие (General) нажать кнопку Изменить конечную рамку (Change target frame) [image] , расположенную справа от поля Конечная рамка по умолчанию (Default target frame).
3. В области Текущая страница рамок (Current frames page) открывшегося диалогового окна Конечная рамка (Target Frame), отображающего структуру фрейма, выбрать с помощью мыши требуемую область.
4. Нажать кнопку ОК для закрытия диалогового окна Конечная рамка.
 5. Закрыть диалоговое окно Свойства страницы, нажав кнопку ОК.

Режимы просмотра фрейма

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

Таблица 20.5. Режимы просмотра фрейма

Наименование вкладки | Описание
Обычный (Normal) | Обычный режим работы, при котором осуществляется создание фрейма с помощью визуальных средств
Без рамок (No Frames) | Предварительный просмотр фрейма в виде, в котором он будет представлен на сервере Интернета при просмотре его в обозревателе, не поддерживающем фреймы
HTML-код (HTML) | Режим просмотра и создания всех фреймов текущего фреймсета в HTML-кодах
HTML-код страницы рамок (Frames Page HTML) | Режим просмотра и создания страницы фреймов в HTML-кодах
Просмотр (Preview) | Предварительный просмотр страницы в виде, в котором она будет представлена на сервере Интернета в обозревателе, поддерживающем фреймы

Свойства фреймов

Для настройки свойств фрейма используется дишюговое окно Свойства рамки (рис. 20.29). Чтобы его открыть, выделите фрейм и выполните одно из следующих действий:

  • В меню Рамки (Frame) выберите команду Свойства рамки (Frame Properties)
  • Щелкните правой кнопкой мыши и выберите команду контекстного меню Свойства рамки (Frame Properties)

Рис. 20.29. Диалоговое окно Свойства рамки

В верхней части диалогового окна расположены два поля. Поле Имя (Name) содержит название редактируемого фрейма, а поле Начальная страница (Initial page) — название страницы, отображаемой в данном фрейме при его начальной загрузке. Для изменения начальной страницы необходимо нажать кнопку Обзор (Browse), расположенную справа от поля. При этом открывается диалоговое окно Изменение гиперссылки (Edit Hyperlink), позволяющее указать для загрузки другую страницу.

Область Размер рамки (Frame size) содержит поля Ширина столбца (Column Width) и Высота (Height), указывающие размеры фрейма. Обратите внимание, что поле, задающее ширину фрейма, для которого открыто окно свойств, не доступно для модификации. Это связано с тем, что рассматриваемый нами фрейм занимает всю ширину фреймсета, которая и определяет его размер. При изменении размера фрейма изменяются также размеры всех граничащих с ним фреймов. Для указания единиц, в которых задаются размеры, используются расположенные справа от полей раскрывающиеся списки, содержащие следующие значения:

  • точки (Pixels)
  • относительная (Relative)
  • проценты (Percent)

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

С помощью полей Ширина (Width) и Высота (Height) области Поля (Margins) можно задать размеры полей страницы, т. е. интервалы между содержимым страницы и границами фрейма. Объекты интерфейса, расположенные в области Параметры (Options), позволяют управлять фреймом при просмотре его в обозревателе. Например, при установленном флажке Изменять размер в обозревателе (Resizable in browser) можно с помощью мыши изменить размеры фреймов по своему усмотрению, а, используя значения раскрывающегося списка Полосы прокрутки — указать, отображать ли во фреймах полосы прокрутки. Список содержит следующие значения:

  • при необходимости (If Needed)
  • никогда (Never)
  • всегда (Always)

Для фрейма, содержащего заголовок, конечно, нет смысла использовать значения при необходимости (If Needed) или всегда (Always) — подойдет значение никогда (Never). В том случае, если содержимое фрейма меняется в зависимости от загруженной в него страницы, разумно использовать значение при необходимости (If Needed), т. к. если вся информация в нем помещается, то полоса прокрутки будет отсутствовать. Если информации будет много, полоса прокрутки появится.

Кнопка Стиль (Style), расположенная в нижнем левом углу диалогового окна Свойства рамки, позволяет изменить связанную с фреймом таблицу стилей.

При нажатии кнопки Страница рамок (Frame Page) области Параметры открывается диалоговое окно Свойства страницы (Page Properties) (рис. 20.30), в котором по умолчанию выбрана вкладка Рамки (Frames). Она содержит параметры, относящиеся к фреймсету.

Рис. 20.30. Вкладка Рамки диалогового окна Свойства страницы

Поле Интервал между рамками (Frame Spacing) позволяет указать толщину разделительных линий между фреймами на странице. Флажок Показать границы (Show Borders) определяет, показывать ли разделительные линии между фреймами.

Управление фреймами

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

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

1. Нажмите и удерживайте клавишу<Ctrl>.
2. Установите курсор на рамку, перед или выше которой хотите добавить новый фрейм. Под курсором появляется подсказка Для разделения рамки перетаскивайте ее при нажатой клавише Ctrl (Ctrl+Drag to split frame).
3. Нажмите кнопку мыши и, удерживая, перемещайте курсор в нужную сторону до образования области требуемого размера.
4. Отпустите клавишу<Ctrl> и кнопку мыши.

Рис. 20.31. Добавление во фреймсет нового фрейма

Образовавшийся новый фрейм (рис. 20.31) содержит кнопки Задать начальную страницу (Set Initial Page) и Создать страницу (New Page), позволяющие определить загружаемые в него страницы.

Для добавления во фреймсет нового фрейма можно также использовать команду меню:

1. Выделите фрейм, область которого хотите разбить на две части, шелкнув на нем мышью.
2. В меню Рамки (Frame) выберите команду Разделить рамку (Split Frame).
3. В открывшемся диалоговом окне Разделить рамку (Split Frame) (рис. 20.32), содержащем опции Разбить на столбцы (Split into columns) n Разбить на строки (Split into rows), установите требуемую опцию.
4. Нажмите кнопку ОК.

Рис. 20.32. Диалоговое окно Разделить рамку

Чтобы удалить фрейм из фреймсета, установите на него курсор и в меню Рамки (Frame) выберите команду Удалить рамку (Delete Frame). Освободившееся после удаления фрейма место будет занято оставшимися фреймами.


Глава 2 Подключение к Интернету

Стили

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

Для хранения стилей в программе FrontPage используется таблица стилем! Cascading Style Sheets (Каскадная таблица стилен), сокращенно CSS. В программе FrontPage имеются три вида стилей:

  • External Style Sheet — внешняя таблица стилей. Данная таблица стилен хранится в файле с расширением CSS. Она может быть связана со всеми страницами Web-узла
  • Embedded Style Sheet — внутренняя таблица стилей. Эта таблица стилей включается в код HTML-страницы и может быть связана с одной страницей
  • Inline Style — встроенный стиль. Применяется к отдельным элементам Web-страницы

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

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

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

1. Откройте Web-узел, для которого хотите создать таблицу стилей CSS.
2. На панели Список папок (Folder List) выберите самую верхнюю папку, содержащую название узла.
3. В меню Файл (File) выберите команду Создать (New), а затем из открывшегося подменю — опцию Страница или веб-узел (Page or Web).
4. На появившейся панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны страниц (Page Templates).
5. Открывается диалоговое окно Шаблоны страниц, в котором перейдите на вкладку Таблицы стилей (Style Sheets) (рис. 20.33). Она содержит шаблоны стилей, предлагаемые программой FrontPage.

Рис. 20.33. Вкладка Таблицы стилей диалогового окна Шаблоны страниц

6. Выберите один из предлагаемых шаблонов и нажмите кнопку ОК.
 7. Диалоговое окно Шаблоны страниц закрывается, а в Web-узел добавляется страница, имеющая расширение CSS (рис. 20.34). Посмотрите ее содержимое. Она содержит описание стилей, которые будут использоваться для форматирования содержимого страниц: сначала идет название элемента Web-страницы, а за ним в скобках — параметр форматирования. На этой странице последовательно описаны все элементы, встречающиеся в Web-узле и подлежащие форматированию — фон страницы, ссылки, заголовки, текст, таблицы, а также используемые в их оформлении цвета, шрифты и т. п.
8. Сохраните страницу в Web-узле, воспользовавшись кнопкой Сохранить (Save) на стандартной панели инструментов.
9. В открывшемся диалоговом окне Сохранить как (Save As) в поле Имя файла (File name) введите имя файла (например, styles), и нажмите кнопку Сохранить.

Замечание

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

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

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

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

1. Откройте Web-узел, содержащий созданную нами внешнюю таблицу стилей.
2. В меню Формат (Format) выберите команду Ссылки таблицы стилей (Style Sheet Links).
3. Открывается диалоговое окно Связать с таблицей стилей (Link Style Sheet) (рис. 20.35). В его верхней части расположены две опции:

  • все страницы (All pages) — связывает таблицу стилей со всеми страницами Web-узла
  • выделенные страницы (Selected page(s)) — связывает таблицу стилей с выбранной страницей

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

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

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

5. В открывшемся диалоговом окне Выбор таблицы стилей (Select Style Sheet) выберите созданную таблицу стилей. В нашем примере это файл styles.css. Имя файла переносится в поле Адрес URL (URL).
6. Нажмите кнопку ОК.
 7. Вы возвращаетесь в диалоговое окно Связать с таблицей стилей. Имя таблицы CSS размещено в списке под опциями.
8. Нажмите кнопку ОК для закрытия окна. Посмотрите на страницы Web-узла, с которыми связана таблица CSS. Ко всем элементам Web-страниц применено форматирование в соответствии со значениями таблицы стилей.

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

<link rel="stylesheet" type="text/css" href="styles.css">

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


Глава 2 Подключение к Интернету

Создание внутренних стилей страницы

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

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

Рассмотрим создание стилей для оформления заголовка первого уровня и маркированного списка. Выполните следующие действия:

1. Откройте страницу Web-узла, для которой хотите создать внутренние стили.
2. В меню Формат (Format) выберите команду Стиль (Style). Открывается диалоговое окно Стиль (рис. 20.36), содержащее список стилей.
3. Для создания нового стиля нажмите кнопку Создать (New). Открывается диалоговое окно Создание стиля (New Style) (рис. 20.37).
4. В поле Имя (Name) введите имя создаваемого стиля. Сначала создадим стиль для форматирования заголовка первого уровня, который будет иметь оранжевый цвет. Введите в поле Имя имя hl.orange.

Замечание

Символы hi в имени указывают, что стиль предназначен для форматирования заголовка первого уровня. Правая часть в имени является наименованием класса создаваемого стиля. Например, для оформления Web-страницы вы можете создать несколько стилей, которые имеют одинаковые параметры, но задают разные цвета. В этом случае вы создаете несколько классов для форматирования одного и того же элемента.

Рис. 20.36. Диалоговое окно Стиль

5. Нажмите кнопку Формат (Format), расположенную в нижней части окна. Открывается меню кнопки, содержащее 5 команд. При выборе этих команд открываются диалоговые окна Шрифт (Font), Абзац (Paragraph), Границы и заливка (Border and Shading), Список (Bullets and Numbering) и Положение (Position), соответственно, позволяющие настроить параметры форматирования.
6. Выберите в меню кнопки Формат команду Шрифт (Шрифт).
7. В открывшемся диалоговом окне Шрифт выполните следующие действия:

  • Из списка Шрифт выберите шрифт, который хотите использовать в оформлении заголовка
  • Используя список Начертание (Font style), задайте полужирное начертание, выбрав значение Полужирный (Bold)
  • Установите размер шрифта, выбрав, например, значение 18pt
  • Воспользовавшись списком Цвет (Color), выберите из палитры оранжевый цвет для отображения заголовка
  • Установив требуемые параметры, нажмите кнопку ОК.

8. Вы возвращаетесь в диалоговое окно Создание стиля (New Style), в области Описание (Description) которого появилось описание параметров созданного стиля (см. рис. 20.37). Нажмите кнопку ОК.

В списке Стили (Styles) диалогового окна Стиль (Style) появилось наименование стиля hi.orange, созданного нами для оформления заголовка. Создадим теперь стиль для оформления маркированного списка.

9. В диалоговом окне Стиль нажмите кнопку Создать (New).

Рис. 20.37. Диалоговое окно Создание стиля; в нем отображены параметры созданного стиля

10. В поле Имя (Name) диалогового окна Создание стиля (New Style) введите имя создаваемого стиля ul.blue. Левая часть имени указывает, что создается стиль для оформления маркированного списка, правая часть — наименование класса стиля.
11. В меню кнопки Формат (Format) выберите команду Шрифт (Font). В открывшемся диалоговом окне Шрифт задайте шрифт, его размер и цвет. Установив параметры, закройте окно, нажав кнопку ОК.
 12. Для задания типа маркера в меню кнопки Формат (Format) выберите команду Нумерация (Numbering) и в открывшемся диалоговом окне Список (Bullets and Numbering) подберите подходящий тип. Затем закройте окно.
13. Параметры маркированного списка заданы. Закройте диалоговое окно Создание стиля (New Style), нажав кнопку ОК.
 14. В диалоговом окне Стиль содержатся наименования обоих созданных нами стилей (рис. 20.38). Закройте окно.

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

Замечание

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

Рис. 20.38. Диалоговое окно Стиль содержит наименования созданных стилей

Теги стилей абзацев

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

Замечание

Рассмотрение тегов выходит за рамки данной книги. Мы приведем только символы, которые вы должны использовать в наименовании создаваемого стиля:
  • H1-H6 — заголовки от первого до шестого уровня
  • OL — нумерованный список
  • UL — маркированный список
  • DL — список определений
  • ADDRESS — текст, выделяемый курсивом

Встроенные стили

Работая с программой FrontPage, вы, наверное, обращали внимание, что в диалоговых окнах свойств некоторых объектов Web-страницы присутствует кнопка Стиль (Style), позволяющая переопределить стиль. При нажатии на эту кнопку открывается диалоговое окно Изменение стиля (Modify Style) (рис. 20.39), создающее встроенный стиль. Для задания стиля в окне Стиль можно использовать классы внутренних таблиц стилей, созданные для этой Web-страницы, а также соответствующие диалоговые окна, открываемые при выборе команд кнопки Формат (Format).

Рис. 20.39. Диалоговое окно Изменение стиля

Рассмотрим последовательность действий для применения встроенного стиля при форматировании маркированного списка:

1. Выделите на Web-странице маркированный список.
2. Нажмите правую кнопку мыши и выберите в контекстном меню команду Свойства списка (List Properties).
3. В открывшемся одноименном диалоговом окне нажмите кнопку Стиль (Style).
4. Для задания стиля вы можете использовать классы внутренней таблицы стилей. В этом случае из списка Класс (Class) выберите наименование класса для оформления маркированного списка.
5. Используя меню кнопки Формат (Format), определите свойства выделенного элемента.
6. Нажмите кнопку ОК.


Глава 2 Подключение к Интернету

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

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


Глава 2 Подключение к Интернету

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

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

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

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

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

Размещение на домашней странице компонента Счетчик посещений (Hit Counter) позволит получить сведения о том, как популярен у пользователей ваш Web-узел, а компонент Форма поиска (Search Form) облегчит посетителям поиск необходимой информации.

Для размещения на домашней странице ссылок на все страницы Web-узла можно использовать компонент Оглавление (Table of Contents), создающий иерархическое оглавление узла со ссылками. В программе FrontPage для размещения на Web-страницах компонентов используется диалоговое окно Вставка компонента веб-узла (Insert Web Component) (рис. 21.1) со списком компонентов. Чтобы открыть это окно, выполните одно из следующих действий:

  • В меню Вставка (Insert) выберите команду Веб-компонент (Web Component)
  • Нажмите кнопку Веб-компонент (Web Component) на стандартной панели инструментов

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

С помощью компонента подстановка (Substitution) на страницах Web-узла размещают информацию, изменение которой автоматически приведет к модификации данных на всех Web-страницах узла.

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

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

1. Откройте редактируемую Web-страницу.
2. Установите курсор в место предполагаемого размещения компонента Подстановка.
3. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component) (см. рис. 21.1).
4. Из списка Тип компонента (Component type) выберите значение Включенное содержимое (Included Content), при этом в правой области окна появляется список Выберите тип содержимого (Choose a type of content).
5. Выберите из этого списка значение Подстановка (Substitution) и нажмите кнопку Готово (Finish). На экране открывается диалоговое окно Свойства подстановки (Substitution Properties).
6. Нажмите кнопку раскрытия списка Заменить на (Substitude with) и выберите значение переменной, определяющей размещаемый параметр (рис. 21.2).
7. Нажмите кнопку ОК. На Web-странице появляется значение, задаваемое данной переменной.

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

По умолчанию в списке Заменить на расположены переменные, называемые переменными конфигурации (табл. 21.1).

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

Переменная | Назначение
Автор (Author) | Разработчик Web-страницы. Информация для переменной берется из поля Кем создан (Created by) вкладки Сводка (Summary) диалогового окна свойств страницы (рис. 21.3)
Кем изменен (Modified By) | Разработчик, осуществлявший последнюю модификацию Web-страницы. Информация для переменной берется из поля Кем изменен (Modified By) вкладки Сводка (Summary) диалогового окна свойств страницы (см. рис. 21 .3)
Описание (Description) | Описание страницы в произвольной форме. Информация для переменной берется из поля Заметки (Comments) вкладки Сводка (Summary) диалогового окна свойств страницы (см. рис. 21 .3)
URL-адрес страницы (Page URL) | URL-адрес страницы. Информация для переменной берется из поля Размещение (Location) вкладки Общие (General) диалогового окна свойств страницы

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

Рис. 21.3. Вкладка Сводка диалогового окна свойств страницы

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

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

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

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

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

1. В меню Сервис (Tools) выберите команду Настройка веб-узла (Web Settings).
2. В открывшемся диалоговом окне Настройка веб-узла перейдите на вкладку Параметры (Parameters).
3. В списке переменных конфигурации выберите переменную, задающую изменившийся номер телефона предприятия.
4. Нажмите кнопку Изменить (Modify).
5. В поле Значение (Value) открывшегося диалогового окна Изменение имени и значения (Modify Name and Value) введите новое значение телефона предприятия.
6. Нажмите кнопку ОК.
7. Закройте диалоговое окно Настройка веб-узла.

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


Глава 2 Подключение к Интернету

Счетчик посещений

Компонент Счетчик посещений (Hit counter; предназначен для подсчета количества клиентов, посетивших Web-страницу, на которой он расположен. Как правило, счетчик посещений размешают в нижней части домашней страницы, т. к. именно с нее начинается путешествие по Web-узлу, и эта страница является наиболее посещаемой.

Замечание

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

Для размещения на Web-странице счетчика посещений выполните следующие действия:

1. Откройте Web-страницу, на которой хотите разместить данный компонент.
2. Установите курсор в место предполагаемого размещения объекта Счетчик посещений.
3. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component) (см. рис. 21.1).
4. Из списка Тип компонента (Component type) выберите значение Счетчик посещений, при этом в правой области окна появляется список Выберите стиль счетчика (Choose a counter style) (рис. 21.6).

Рис. 21.6. Выбор компонента Счетчик посещений

5. Выберите из этого списка стиль оформления счетчика посещений и нажмите кнопку Готово (Finish). На экране открывается диалоговое окно Свойства счетчиков посещений (Hit Counter Properties) (рис. 21.7).

Рис. 21.7. Диалоговое окно Свойства счетчиков посещений

6. Используя опции области Стиль счетчика (Counter Style), можно изменить стиль оформления счетчика, установленный в окне Вставка компонента веб-узла (Insert Web Component). Выбранная опция Другой рисунок (Custom Picture) позволяет использовать стиль, разработанный пользователем.
7. Установите флажок Сбросить счетчик до (Reset counter to), если хотите задать иной отсчет числа посетителей. Затем в поле, расположенное справа от флажка, введите значение, с которого необходимо начать отсчет.
8. Для изменения разрядности счетчика, заданной по умолчанию программой FrontPage, установите флажок Число разрядов (Fixed number of digits) и введите в расположенное справа поле необходимое значение.
9. Нажмите кнопку ОК для закрытия диалогового окна Свойства счетчиков посещений.

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


Глава 2 Подключение к Интернету

Включаемая страница

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

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

1. Откройте Web-узел.
2. Добавьте в него новую страницу.
3. Разместите в ней информацию, которую хотите использовать на других страницах Web-узла.
4. Сохраните страницу, нажав кнопку Сохранить (Save) на стандартной панели инструментов. В открывшемся диалоговом окне Сохранить как (Save As) введите имя, например, Incl_page.
5. Откройте в режиме редактирования Web-страницу, в которую хотите включить Компонент Страница (Include Page).
6. Установите курсор в место предполагаемого размещения информации.
7. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component).
8. Из списка Тип компонента (Component type) выберите значение Включенное содержимое (Included Content), при этом в правой области окна появляется список Выберите тип содержимого (Choose a type of content).
9.. Выберите из этого списка значение Страница (Page) и нажмите кнопку Готово (Finish). На экране открывается диалоговое окно Свойства включенной страницы (Include Page Properties).
10. В поле Страница для включения (Page to include) введите URL адрес включаемой страницы (рис. 21.8). Для этого можете воспользоваться диалоговым окном Текущий веб-узел (Current Web), открываемым при нажатии кнопки Обзор (Browse), и выбрать необходимую страницу из списка страниц текущего Web-узла.
11. Нажмите кнопку ОК для закрытия диалогового окна Свойства включенной страницы. Информация, размещенная на странице Incl_page.htm, отобразится в месте размещения компонента страница (include Page).

Рис. 21.8. Диалоговое окно Свойства включенной страницы позволяет указать включаемую страницу

Совет

Для обновления информации в местах, содержащих включаемую страницу, откройте страницу lncl_page.htm, введите новую информацию и сохраните изменения.

Страница, включаемая по расписанию

Компонент Страница с расписанием (Scheduled Include Page) названием напоминает рассмотренный нами ранее компонент страница (include Page). Отличие между двумя этими компонентами состоит в том, что страница с расписанием включается в другую страницу в указанное время и в определенное время исключается из нее.

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

Для использования страницы, включаемой по расписанию, выполните следующие действия:

1. Откройте Web-узел.
2. Добавьте в него две новые страницы.
3. На одной странице разместите информацию о скидках, которые будут действовать во время распродажи товара. Эту информацию необходимо будет отображать в Web-узле в течение времени, заданного с помощью расписания.
4. На вторую страницу поместите информацию, которая будет отображаться в Web-узле вне действия расписания.
5. Откройте в режиме редактирования Web-страницу, в которую хотите включить компонент Страница с расписанием.
6. Установите курсор в место предполагаемого размещения информации.
 7. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component).
 8. Из списка Тин компонента (Component type) этого окна выберите значение Включенное содержимое (Included Content), а из правого списка — Страница с расписанием (Page Based On Schedule), после чего нажмите кнопку Готово. На экране открывается диатоговое окно Свойства включенной страницы с расписанием (Scheduled Include Page Properties) (рис. 21.9).

Рис. 21.9. Диалоговое окно Свойства включенной страницы с расписанием

9. В поле в течение времени по расписанию (During the scheduled time) введите URL адрес страницы, содержащей информацию о скидках. Для этого можете воспользоваться диалоговым окном Текущий веб-узел (Current Web), открываемым при нажатии кнопки Обзор (Browse), и выбрать необходимую страницу.
10. В поле до и после времени по расписанию (Before and after the scheduled time) введите URL адрес страницы, информация из которой будет отображаться на странице вне времени, заданного расписанием. Для ввода адреса можете также воспользоваться диалоговым окном Текущий веб-узел, открываемым при нажатии кнопки Обзор.
 11. По умолчанию в полях области Начало (Starting) заданы текущая дата и время, а в области Окончание (Ending) — дата и время, большие текущей на месяц. Скорректируйте информацию в этих полях, указав временной период действия расписания.
12. Нажмите кнопку ОК для закрытия диалогового окна Свойства включенной страницы с расписанием.


Глава 2 Подключение к Интернету

Изображение, включаемое по расписанию

В программе FrontPage существует компонент р-лсунок с расписанием (Scheduled Picture), который аналогичен компоненту Страница с расписанием (Scheduled include Page). Отличие между этими компонентами состоит в том, что в определенное время в другую страницу включается и в заданное разработчиком время исключается из нее не страница, а графическое изображение. Например, данный компонент удобно использовать для рекламы нового товара, поступившего в магазин. По истечении определенного времени на Web-странице реклама одного товар заменяется рекламой другого товара.

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

1. Откройте Web-узел.
2. Добавьте в папку images два графических изображения. Одно из них будет отображаться на Web-странице в течение времени, заданного с помощью расписания, а второе — вне действия расписания.
3. Откройте в режиме редактирования Web-страницу, в которую хотите включить компонент Рисунок с расписанием.
4. Установите курсор в место предполагаемого размещения графического изображения.
5. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component).
6. Из списка Тип компонента (Component type) этого окна выберите значение Включенное содержимое (Included Content), а из правого списка — Рисунок с расписанием (Picture Based On Schedule), после чего нажмите кнопку Готово. На экране открывается диалоговое окно Свойства рисунка с расписанием (Scheduled Picture Properties) (рис. 21.10).
7. Нажмите кнопку Обзор (Browse), расположенную рядом с полем в течение времени по расписанию (During the scheduled time), и в открывшемся диалоговом окне Рисунок (Picture) из папки images текущего Web-узла выберите графическое изображение, которое будет отображаться на странице в интервале времени, заданном расписанием. Нажмите кнопку ОК для закрытия диалогового окна Рисунок.
 8. Чтобы указать графическое изображение, которое будет отображаться на Web-странице в остальное время, нажмите кнопку Обзор, расположенную рядом с полем до и после времени по расписанию (Before and after the scheduled time). Выберите в открывшемся диалоговом окне Рисунок необходимое изображение.

Рис. 21.10. Диалоговое окно Свойства рисунка с расписанием с введенными параметрами

9. Используя поля области Начало (Starting), задайте дату и время включения изображения в Web-страницу.
10. Используя поля области Окончание (Ending), задайте дату и время исключения изображения из Web-страницы и включения в нее исходного изображения.
11. Нажмите кнопку ОК для закрытия диалогового окна Свойства рисунка с расписанием.

Совет

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


Глава 2 Подключение к Интернету

Компонент поиска

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

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

1. Откройте Web-узел.
2. Откройте в режиме редактирования Web-страницу, на которой хотите разместить компонент поиска.
3. Установите курсор в место предполагаемого размещения объектов создаваемой формы.
4. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component).
5. Из списка Тип компонента (Component type) этого окна выберите значение Поиск в Интернете (Web Search), а из правого списка — Текущий веб-узел (Current Web), после чего нажмите кнопку Готово. Открывается диалоговое окно Свойства формы поиска (Search Form Properties), содержащее две вкладки. По умолчанию открыта вкладка, позволяющая задать параметры создаваемой формы.
6. В поле надпись для ввода (Label for input) введите наименование поля, предназначенного для ввода информации, поиск которой будет осуществляться, или оставьте установленное по умолчанию значение.
7. Поле ширина в знаках (Width in characters) позволяет указать в символах ширину поля, предназначенного для ввода информации. По умолчанию используется значение в 20 символов. В случае необходимости, скорректируйте данное значение.
8. В поле надпись для кнопки начала поиска (Label for "Start Search" button) введите наименование кнопки, начинающей поиск информации в Web-узле, или оставьте установленное по умолчанию значение.
9. В поле надпись для кнопки сброса условий (Label for "Reset" button) введите наименование кнопки, сбрасывающей информацию в поле формы, или оставьте установленное по умолчанию значение (рис. 21.11).

Рис. 21.11. Вкладка Свойства формы поиска позволяет задать параметры создаваемой формы

10. Перейдите на вкладку Результаты поиска (Search Results), позволяющую настроить отображение результатов поиска (рис. 21.12).

Рис. 21.12. Вкладка Результаты поиска, предназначенная для настройки результатов поиска

11. В поле область поиска (Word list to search) no умолчанию установлено значение все страницы (Аll), указывающее, что поиск информации будет осуществляться на всех страницах Web-узла. Оставьте данное значение без изменения.

Совет

Web-страницы, которые вы хотите исключить из поиска, поместите в системную папку _private, так как поиск в этой папке не проводится.

12. В области Параметры отображения (Display options) расположены три флажка, имеющие следующее назначение:

  • отображать степень совпадения (Display score (closeness of match)) — при установке флажка найденными считаются значения, полностью совпадающие с текстом, заданным для поиска
  • отображать дату создания файла (Display file date) — указывает на необходимость включения в результат поиска даты и времени последней модификации страницы, содержащей найденный текст
  • отображать размер файла (в Кбайт) (Display file size (in K bytes)) — при установке флажка выводится информация о размере найденного документа или страницы

Установите требуемые флажки.

13. Нажмите кнопку ОК для закрытия диалогового окна Свойства формы поиска и размещения компонента в форме. На рис. 21.13 показана Web-страница с размещенным на ней компонентом поиска.

Рис. 21.13. Web-страница с размещенным на ней компонентом поиска

Замечание

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


Глава 2 Подключение к Интернету

Компонент создания оглавления

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

Замечание

Оглавление Web-узла создается исходя из ссылок, размещенных на страницах.

Для размещения оглавления в Web-узле выполните следующие действия:

1. Откройте Web-узел, для которого хотите создать оглавление.
2. Откройте в режиме редактирования Web-страницу, на которую хотите поместить компонент оглавления, и установите курсор в место предполагаемого расположения данного объекта.
3. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component).
4. Из списка Тип компонента (Component type) этого окна выберите значение Оглавление (Table of Contents), а из правого списка — Для данного веб-узла (For This Web Site), после чего нажмите кнопку Готово (Finish). Открывается диалоговое окно Свойства оглавления (Table of Contents Properties) (рис. 21.14).

Рис. 21.14. Диалоговое окно Свойства оглавления

5. В поле URL-адрес начала таблицы (Page URL for starting point of table) необходимо указать URL-адрес начальной страницы оглавления. В созданном оглавлении будут перечислены те Web-страницы, на которые установлены ссылки на исходной странице. По умолчанию в этом поле указана домашняя страница. Оставьте это значение без изменения, если создаете оглавление для всего Web-узла. Для изменения начальной страницы оглавления нажмите кнопку Обзор (Browse) и в открывшемся диалоговом окне Текущий веб-узел (Current Web) выберите требуемую страницу.
6. Используя раскрывающийся список Размер шрифта заголовка (Heading font size), содержащий значения от 1 до 6, где 1 обозначает самый большой размер, а 6, соответственно, самый маленький, укажите размер первого пункта создаваемого оглавления. При выборе значения нет (попе) для заголовка будет использоваться размер, установленный по умолчанию в обозревателе.
7. В области Параметры (Options) диалогового окна Свойства оглавления размещены флажки, управляющие компонентом и имеющие следующее назначение:

  • Показывать каждую страницу только один раз (Show each page only once) — при установке флажка Web-страница включается в оглавление только один раз независимо от количества установленных на нее ссылок
  • Показывать страницы без поступающих ссылок (Show pages with no incoming hyperlinks) — установка флажка указывает на необходимость включения в оглавление страниц, на которые нет ссылок
  • Перестроить оглавление при изменении любой страницы (Recompute table of contents when any other page is edited) — при установке флажка любое редактирование страницы, включенной в оглавление, приводит к изменению оглавления

Замечание

Если Web-узел содержит большое количество страниц, то обновление оглавления может занять много времени.

Установите необходимые флажки.

8. Нажмите кнопку ОК для закрытия диалогового окна Свойства оглавления.
 9. Для просмотра созданного оглавления перейдите в обозреватель, выбрав в меню Файл (File) команду Просмотр в обозревателе (Preview in Browser).

Рис. 21.15. Просмотр в обозревателе созданного оглавления

На рис. 21.15 представлено созданное оглавление для Web-узла, содержащего домашнюю страницу, четыре страницы второго уровня иерархии и две — третьего. Используя ссылки в оглавлении, можно переходить на соответствующие страницы.


Глава 2 Подключение к Интернету

Подтверждение введенной информации

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

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

Рассмотрим процедуру размещения компонента Поле подтверждения:

1. Откройте Web-узел, содержащий форму опроса.
2. Расположите в рабочей области программы FrontPage страницу, на которой хотите расположить поля подтверждения введенной в форме информации.
3. Установите курсор в место расположения первого компонента.
4. В меню Вставка (Insert) выберите команду Веб-компонент (Web Component). Открывается диалоговое окно Вставка компонента веб-узла (Insert Web Component).
5. Из списка Тип компонента (Component type) этого окна выберите значение Дополнительные элементы (Advanced Controls), а из правого списка — Поле подтверждения (Confirmation Field), после чего нажмите кнопку Готово (Finish). Открывается диалоговое окно Свойства поля подтверждения (Confirmation Field Properties) (рис. 21.16).

Рис. 21.16. Диалоговое окно Свойства поля подтверждения

6. В поле Имя поля формы для подтверждения (Name of form field to confirm) введите имя поля формы, содержимое которого будет отображаться.
7. Нажмите кнопку ОК.
8. Разместите рядом с созданным объектом поясняющую надпись, чтобы посетители поняли, что за информация в этом поле выводится.
9. Аналогичным образом разместите компоненты подтверждения для остальных полей формы.


Глава 2 Подключение к Интернету

Создание форм


Глава 2 Подключение к Интернету

Шаблоны и мастера для создания форм

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

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

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

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

Чтобы просмотреть список шаблонов и мастеров форм, предлагаемых программой FrontPage, в меню File (Файл) выберите команду Создать (New), а затем значение Страница или веб-узел (Page or Web). На появившейся панели Создание веб-страницы (Page or Web) выберите команду Шаблоны страниц (Page Templates). В результате на экране открывается аналоговое окно Шаблоны страниц, представленное на рис. 22.1. Оно содержит три вкладки. Шаблоны и мастера Web-страниц и форм расположены на вкладке Общие (General).

Рис. 22.1. Диалоговое окно Шаблоны страниц, содержащее шаблоны и мастера для создания формы

В табл. 22.1 представлен список шаблонов и мастеров форм, предоставляемых программой FrontPage.

Таблица 22.1. Шаблоны и мастера для создания форм

Шаблон или мастер | Назначение
Форма подтверждения (Confirmation Form) | Шаблон формы подтверждения о получении информации
Форма обратной связи (Feedback Form) | Шаблон формы для ввода замечаний
Мастер страницы формы (Form Page Wizard) |  | Мастер создания формы для опроса посетителей Web-узла. Позволяет сформировать список вопросов, на которые хотите получить ответы от клиентов
Гостевая книга (Guest Book) |  | Шаблон гостевой страницы. Эта страница позволит посетителям вашего Web-узла оставить информацию о своих впечатлениях
Страница поиска (Search Page) |  | Шаблон страницы в виде формы, используемой для поиска текста по документам Web-узла
Регистрационная форма (User Registration) |  | Шаблон формы регистрации пользователей

Создание формы с помощью мастера

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

1. Откройте Web-узел, в котором хотите разместить форму.
2. В меню Файл (File) выберите команду Создать (New), а затем — опцию Страница или веб-узел (Page or Web).
3. На появившейся панели Создание веб-страницы выберите команду Шаблоны страниц (Page Templates). В результате на экране открывается диалоговое окно Шаблоны страниц.
 4. На вкладке Общие (General) дважды щелкните на значке Мастер страницы формы (Form Page Wizard).
5. Запускается мастер по созданию формы и появляется его первое окно. Ознакомьтесь с предложенной вашему вниманию информацией о назначении создаваемой с его помощью формы и нажмите кнопку Далее (Next).
6. Открывается диалоговое окно мастера (рис. 22.2), которое содержит область для размещения списка формируемых вопросов.

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

  • Добавить (Add) — открывает диалоговое окно для выбора темы, по которой будет формироваться вопрос
  • Изменить (Modify) — открывает диалоговое окно мастера, позволяющее изменить сформированный вопрос
  • Удалить (Remove) — удаляет из списка выделенный вопрос
  • Вверх (Move Up) — перемещает выделенный в списке вопрос на один уровень вверх • Вниз (Move Down) — перемещает выделенный в списке вопрос на один уровень вниз
  • Очистить (Clear List) — очищает список, удаляя из него все вопросы Для формирования вопроса нажмите кнопку Добавить.

Рис. 22.2. Диалоговое окно для формирования списка вопросов

7. В верхней части открывшегося диалогового окна содержится список тем, по которым можно формировать вопросы. Щелкните мышью на требуемом значении из этого списка. В области Описание (Description) появляется краткое описание полей, помещаемых в форму по выбранной теме. В поле Измените приглашение для этого вопроса (Edit the prompt for this question) предлагается вариант формируемого вопроса. Скорректируйте вопрос (рис. 22.3) и нажмите кнопку Далее.

Рис. 22.3. Диалоговое окно для выбора темы, по которой будет формироваться вопрос

8. Следующее диалоговое окно (рис. 22.4) предназначено для выбора полей, размещаемых в форме по сформированному вопросу. При установленном флажке ФИО (Name) становятся активными расположенные под ним опции, позволяющие указать, сколько полей будет создаваться для ввода имени посетителя. По умолчанию установлена опция полное имя (full), при которой для ввода имени предлагается одно поле. Установка второй и третьей опций приводит к тому, что для ввода имени выделяется два и три поля, соответственно. Например, если вы хотите, чтобы посетители вводили фамилию, имя и отчество в отдельных полях, установите опцию имя, фамилия, отчество (first, last, middle).

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

В поле Введите базовое имя для этой группы переменных (Enter the base name for this group of variables) указано наименование для группы переменных Contact. Оставьте его без изменения. Завершив установку параметров, нажмите кнопку Далее.

Рис. 22.4. Диалоговое окно для формирования списка полей

9. На следующем шаге мастера открывается диалоговое окно, показанное ранее на рис. 22.2. Только теперь оно в списке вопросов содержит первый сформированный вопрос. Для добавления в список нового вопроса нажмите кнопку Добавить (Add), сформируйте в следующих двух диалоговых окнах вопрос и выберите поля для ввода данных. 10. Повторяя шаги с 6 по 9, сформируйте список всех вопросов. Для модификации введенного ранее вопроса установите на него курсор и нажмите кнопку Изменить (Modify), а затем в открывшихся диалоговых окнах измените вопрос или формируемые по нему поля формы.
11. Сформировав список вопросов и полей формы, нажмите кнопку Далее.
12. Открывается диалоговое окно, позволяющее задать оформление формы (рис. 22.5). Оно содержит две группы опций и флажок.

Рис. 22.5. Диалоговое окно, содержащее параметры для оформления формы

Переключатель Выберите способ представления списка вопросов (How should the list of questions be presented) содержит опции, позволяющие задать вид оформления вопросов, содержащихся в форме:

  • обычные абзацы (as normal paragraphs)
  • нумерованный список (as a numbering list)
  • маркированный список (as a bulleted list)
  • список определений (as a definition list)

Переключатель Создать оглавление для этой страницы? (Would you like a Table of Contents for this page?) содержит два значения. По умолчанию оглавление для страницы не создается. Если хотите создать оглавление, выберите значение Да.

При установленном флажке Использовать таблицы для полей формы (use tables to align form fields) выравнивание полей в форме осуществляется с помощью таблиц. Это более удобный способ выравнивания объектов формы, чем с использованием элементов форматирования, которые могут поддерживаться не всеми обозревателями.

Замечание

Если для выравнивания объектов используются таблицы, то в оформлении формы можно применять любые удобные шрифты.

Завершив установку необходимых параметров, перейдите к следующему шагу в работе мастера, нажав кнопку Далее.

13. Следующее диалоговое окно (рис. 22.6) позволяет указать, где сохранять вводимые в форму данные.

Рис. 22.6. Диалоговое окно для указания того, где сохранять вводимые данные

Установите одну из следующих опций:

  • сохранить результаты в виде веб-страницы (save results to a web page)
  • сохранить результаты в текстовый файл (save results to a text file)
  • использовать специальный сценарий CGI (use custom CGI script)

При выборе первой или второй опции введите имя Web-страницы или текстового файла, соответственно, в поле Введите базовое имя для файла результатов (Enter the base name of the results file).

14. Ввод параметров завершен. Нажмите кнопку Готово (Finish). На экране появляется созданная с помощью мастера форма. Ее можно модифицировать, а затем использовать по назначению.
15. Сохраните созданную страницу формы. Для этого нажмите кнопку Сохранить (Save) на стандартной панели инструментов и в открывшемся диаюго-вом окне Сохранить как (Save As) введите наименование страницы.

На рис. 22.7 показана форма, созданная с помощью рассмотренного нами мастера.

Рис. 22.7. Форма, созданная с помощью мастера


Глава 2 Подключение к Интернету

Редактирование объектов формы и определение их свойств

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

Текстовые объекты

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

Для облегчения выравнивания объектов, размешенных в форме, можно использовать таблицы. При изменении надписей к полям происходит изменение их ширины. Если надпись находится в ячейке таблицы, то при этом автоматически изменяется размер ячейки. Для изменения размера ячейки можно также использовать мышь. Установите курсор на границу ячейки и, когда он примет вид двунаправленной стрелки, перемещайте в требуемую сторону до получения нужного размера. При размещении полей в столбец друг под другом, изменение размера одной из ячеек влечет за собой изменение всех расположенных под ней ячеек. Для выравнивания размещенных в таблице полей и текста можно использовать кнопки По левому краю (Align Left), По правому краю (Align Right), По ширине (Justify) и По центру (Center) на панели форматирования.

Настройка объектов, размещенных в форме

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

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

  • Дважды щелкните на объекте
  • Нажмите на настраиваемом объекте правую кнопку мыши и выберите команду Свойства поля формы (Form Field Properties) контекстного меню
  • Выделите объект и нажмите комбинацию клавиш <Alt>+<Enter> Рассмотрим более подробно размещенные в форме объекты и их свойства.

Поле ввода

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

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

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

Дважды щелкните на поле мышью. Открывается диалоговое окно Свойства текстового поля (Text Box Properties), представленное на рис. 22.8.

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

Диалоговое окно содержит следующие поля:

  • Имя (Name) — наименование поля, используемое при обработке данных, введенных в форму
  • Начальное значение (Initial value) — начальное значение поля, отображаемое в нем по умолчанию
  • Ширина в знаках (Width in characters) — ширина поля, задаваемая в символах
  • Последовательность перехода (Tab order) — порядковый номер поля при перемещении по полям формы с помощью клавиши <Таb>

Замечание

Поле Ширина в знаках (Width in characters) не задает максимальное количество символов, вводимое в поле ввода, а определяет ширину поля в форме. Для определения максимального количества символов, вводимых в поле данных, используется поле Макс, длина (Max Length) диалогового окна Проверка текстового поля (Text Box Validation). Если количество символов, введенное в поле, превышает ширину поля, информация прокручивается.

Переключатель Поле пароля (Password field) позволяет указать, будет ли данное поле использоваться для ввода пароля. Большинство обозревателей в этом поле отображают только символы *, скрывая хранимый в поле текст.

В нижней части диалогового окна находится кнопка Проверить (Validate), при нажатии на которую открывается диалоговое окно Проверка текстового поля (Text Box Validation) (рис. 22.9), позволяющее ввести ограничения на вводимые в это поле данные, чтобы не возникало ошибок при их обработке.

Рис. 22.9. Диалоговое окно Проверка текстового поля

Поле Выводимое имя (Display name) содержит название поля формы, которое будет выводиться на экране для сообщения об ошибке ввода в данное поле. Раскрывающийся список Тип данных (Data type) позволяет указать тип данных, вводимых в поле:

Значение списка | Тип вводимых данных
Без ограничений (No Constraints) | Позволяет вводить данные любого типа
Текст (Text) | Используется для ввода текстовой информации. Вводимые цифры будут рассматриваться как символы
Целое (Integer) | Предназначено для ввода целых чисел. Помимо целых чисел, допустимыми являются запятая и тире. Например: 35, 56 или 35-56
Число (Number) | Используется для ввода десятичных чисел

При выборе из раскрывающегося списка Тип данных значения Текст (Text) становятся доступными флажки области Формат текста (Text format), определяющие допустимые для ввода символы:

  • буквы (Letters)
  • цифры (Digits)
  • пробелы (Whitespace)
  • другой (Other) — позволяет использовать символы, введенные в поле, расположенное справа от флажка

При выборе из раскрывающегося списка Тип данных значения Число (Number) становятся доступными две группы переключателей. Первый из них, Группировка (Grouping), позволяет задать символы для разделения разрядов числа, а второй — Разделитель (Decimal), — символы для разделения целой и дробной части числа. Установленная опция нет (None) переключателя Группировка указывает на отсутствие разделителей.

Предупреждение

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

Поля Мин. длина (Min length) и Макс, длина (Max Length) области Размер данных (Data length) позволяют указать минимальное и максимальное количество символов, отводимых для ввода данных. Чтобы ввести эти параметры, необходимо предварительно установить флажок Требуется (Required).

Замечание

Если для поля в диалоговом окне Проверка текстового поля установлен флажок Требуется, то вводить в него данные обязательно. Если при вводе информации в форму это поле будет пропущено, то появится сообщение об ошибке с указанием наименования поля.

Параметры области Значение данных (Data value) позволяют указать критерии проверки данных, вводимых в поле . Значение, введенное в поле Значение (Value), используется для сравнения с вводимыми в поле данными, а раскрывающиеся списки содержат значения критерия проверки.

Совет

Если в диалоговом окне Проверка текстового поля вы задали для поля правила проверки допустимости вводимых данных, то расположите в форме рядом с этим полем подсказку, которая поможет пользователю правильно ввести в него информацию.

Поле ввода большой длины

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

Откройте окно свойств данного объекта формы, дважды щелкнув на нем мышью. На экране откроется диалоговое окно Свойства текстового поля (TextArea Box Properties), представленное на рис. 22.11. Оно аналогично диалоговому окну свойств поля для ввода данных, рассмотренного ранее, но содержит дополнительное поле Число строк (Number of lines), позволяющее указать высоту поля (в строках). Поле Ширина в знаках (Width in characters) указывает ширину поля в символах.

Рис. 22.10. Форма, содержащая поле для ввода большого объема текстовой информации

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

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

Использование флажков в форме

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

Флажок сброшен

Флажок установлен

Откройте окно свойств флажка Свойства флажка (Check Box Properties) (рис. 22.12). Оно содержит переключатель Начальное состояние (Initial state), указывающий, в каком состоянии будет находиться флажок при загрузке формы (установленном или сброшенном). По умолчанию установлена опция Снят (Not checked), т. е. в начальном состоянии флажок будет сброшен.

Рис. 22.12. Диалоговое окно Свойства флажка

Переключатель

При проведении опроса среди посетителей Web-узла не стоит заставлять их вводить информацию во множество полей. В этом случае, скорее всего, они опрос просто проигнорируют. Чтобы узнать мнение посетителя по тому или иному вопросу, не заставляя вводить информацию, удобно в форме использовать переключатели, содержащие опции с вариантами предполагаемых ответов. В этом случае требуется минимальное время на ввод информации. Посетитель просматривает предложенные вами варианты ответов и выбирает нужный, установив соответствующую опцию. Переключатель является составным объектом, так как в него входит несколько опции. Для настройки свойств переключателя используются диалоговые окна Свойства переключателя (Option Button Properties) каждой опции, из входящих в его состав. Вил этого диалогового окна показан на рис. 22.13.

Рис. 22.13. Диалоговое окно Свойства переключателя

Поле Имя группы (Group name) содержит групповое имя опций переключателя. Оно должно быть одинаковым для всех опций, входящих в состав данного переключателя.

Поле Значение (Value) содержит значение, которое будет использоваться при установке данной опции.

Переключатель Начальное состояние (Initial stale) диалогового окна Свойства переключателя указывает, будет ли установлена данная опция по умолчанию при загрузке формы.

Замечание

В переключателе, размещенном в форме, одна из опций (наиболее вероятный вариант ответа) должна иметь в диалоговом окне Свойства переключателя установленное значение Выбран (Selected), а остальные— Не выбран (Not selected).

Списки

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

Для настройки свойств списка используется диалоговое окно Свойства раскрывающегося списка, показанное на рис. 22.14.

В поле Имя (Name) отображается имя списка. В расположенной под этим полем области содержатся элементы списка.

Рис. 22.14. Диалоговое окно Свойства раскрывающегося списка

Кнопки, находящиеся справа в диалоговом окне, позволяют добавлять в список новые элементы, модифицировать существующие, изменять порядок следования элементов списка:

Кнопка | Назначение
Добавить (Add) | Открывает диалоговое окно Добавление варианта (Add Choice) для добавления в список нового элемента
Изменить (Modify) | Открывает диалоговое окно Изменение выбора (Modify Choice) для изменения выбранного элемента списка
Удалить (Remove) | Удаляет из списка выделенный элемент
Вверх (Move Up) | Перемещает выделенный элемент списка на один уровень вверх
Вниз (Move Down) | Перемещает выделенный элемент списка на один уровень вниз

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

Ширина списка устанавливается автоматически и определяется длиной самого длинного элемента списка. Переключатель Разрешен выбор нескольких элементов (Allow multiple selections) определяет, разрешить ли выбор из списка нескольких значений. По умолчанию установлена опция Нет. Значение Да удобно использовать, например, в том случае, если вы предлагаете для продажи список товаров, и покупатель может выбрать более одного вида товара.

Для ввода в список нового элемента нажмите кнопку Добавить (Add). Открывается диалоговое окно Добавление варианта (Add Choice), показанное на рис. 22.15. Введите в поле Вариант (Choice) наименование элемента. Для ввода значения, присваиваемого элементу списка (по умолчанию оно совпадает с наименованием элемента), установите флажок Значение (Specify Value) и введите в расположенное под ним поле требуемое значение.

Рис. 22.15. Диалоговое окно Добавление варианта, предназначенное для добавления нового элемента в список

По умолчанию при просмотре списка в обозревателе курсор установлен на его первом элементе. Если вы хотите, чтобы сразу выбирался добавляемый вами элемент, установите для него в диалоговом окне Добавление варианта опцию выбрано (Selected). При этом будет автоматически снята данная опция для остальных элементов списка.

В нижней части диалогового окна Свойства раскрывающегося списка размещена кнопка Проверить (Validate), при нажатии которой открывается диалоговое окно Проверка раскрывающегося списка (Drop-Down Box Validation) (рис. 22.16).

Рис. 22.16. Диалоговое окно Проверка раскрывающегося списка

Если вы хотите, чтобы пользователь обязательно выбирал из списка какой-либо элемент, установите флажок Данные обязательны (Data Required).

Флажок Запретить выбор первого элемента (Disallow Hist choice) не разрешает выбирать пользователю первым пункт списка. Данный флажок устанавливают в том случае, кона первый пункт списка — это рекомендация или замечание.

Кнопки управления

Кнопки, размещаемые в форме, позволяют выполнять заданное действие. Посмотрите на форму, созданную мастером. В ее нижнем части расположены две кнопки: Отправить (Submit Form) и Сброс (Reset Form). Кнопка Отправить предназначена для пересылки введенных в форму данных обработчику на Web-сервер. Кнопка Сброс возвращает форму в исходное состояние. при котором можно приступить к вводу данных. Дважды щелкните мышью на кнопке Отправить. Открывается диалоговое окно Свойства кнопки (Push Button Properties), показанное на рис. 22.17.

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

Поле Имя (Name) предназначено для ввода имени объекта. Расположенное под ним поле Значение или подпись (Value/label) используется для ввода текста, который будет отображаться на кнопке. Иными словами, это наименование кнопки.

Переключатель Тип кнопки (Button type) позволяет задать действие, выполняемое при нажатии кнопки, и содержит следующие опции:

  • Обычная (Normal) — используется в том случае, если при нажатии кнопки выполняется скрипт (сценарий), созданный разработчиком
  • Отправить (Submit) — введенные в форму данные передаются обработчику на Web-сервер
  • Сброс (Reset) — поля формы сбрасываются в исходное состояние


Глава 2 Подключение к Интернету

Свойства формы

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

Для открытия диалогового окна Свойства формы (Form Properties) выполните одно из следующих действий:

  • Установите курсор в свободное от объектов место формы, нажмите правую кнопку мыши и выберите команду Свойства формы контекстного меню
  • В меню Вставка (Insert) выберите команду Форма (Form), а затем — опцию Свойства формы (Form Properties)

Рис. 22.18. Диалоговое окно Свойства формы

Диалоговое окно Свойства формы разделено на две области. Верхняя область Сохранение результатов (Where to store results) позволяет указать, где будут храниться данные, введенные в форму. В ней находятся следующие три опции:

  • Отправка (Send to) — при использовании этой опции данные можно сохранять в Web-странице или в текстовом файле, расположение и наименование которых вводятся в поле Имя файла (File name), а также направлять их электронной почтой по адресу, указанному в поле Адрес почты (E-mail address)
  • В базе данных (Send to database) — данные из формы сохраняются в повой или существующей базе данных Microsoft Access

Замечание

Для использования этой опции вы предварительно должны установить на Web-сервере FrontPage Server Extensions.
  • В другом месте (Send to other) — данные из формы направляются одному из трех обработчиков, задаваемых в расположенном рядом списке. Список содержит следующие элементы: Настраиваемый сценарий ISAPI, NSAPI, CGI или ASP (Custom ISAPI, NSAPI, CGI or ASP script ), Обработчик формы регистрации (Registration Form Handler), Обработчик формы обсуждения (Discussion Form Handler)

Замечание

Скрипты ISAPI, NSAPI, CGI и ASP являются программными компонентами, размещенными на Web-сервере и предназначенными для обработки данных, получаемых из формы.

Одноименная область диалогового окна Свойства формы (Form Properties) содержит два поля. Поле Имя формы (Form name) содержит имя формы, которое может быть использовано обработчиком. Поле Конечная рамка (Target frame) позволяет указать конечный фрейм, в котором будут отображаться данные из формы.

В нижней части диалогового окна Свойства формы расположена кнопка Параметры (Options), открывающая диалоговое окно Сохранение результатов (Saving Results), показанное на рис. 22.19. Оно содержит 4 вкладки. Рассмотрим параметры, настраиваемые с помощью этого окна.

Рис. 22.19. Диалоговое окно Сохранение результатов

Вкладка Результаты в файле

Вкладка Результаты в файле (File Results) диалогового окна Сохранение результатов (Saving Results), представленная на рис. 22.19, позволяет задать параметры файла, в который записываются данные, введенные в форму.

В верхней части вкладки размешено поле Имя файла (File name), позволяющее указать наименование Web-страницы или текстового файла, в которых данные сохраняются, и их расположение. Чтобы легче было вводить информацию в это поле, можно использовать кнопку Обзор (Browse) и открываемое ею диалоговое окно Текущий веб-узел (Current Web).

Замечание

Если указанный в этом поле файл не существует, при сохранении данных он будет создан программой FrontPage.

Раскрывающийся список Формат файла (File format) и расположенные под ним флажки Включить имена полей (Include field names) и Последние результаты в конце (Latest results at end) определяют формат файла и вид отображения размещенных в нем данных.

Используя список Формат файла, можно задать форматы файла, представленные в табл. 22.2.

Таблица 22.2. Доступные форматы для файла, содержащего данные, введенные в форму

Формат файла | Описание
HTML (HTML) | Файл в формате HTML, представленный в виде обычного текста
Список определений HTML (HTML definition list) | Файл в формате HTML, в котором данные из формы оформляются в виде списка определений
Маркированный список HTML (HTML bulleted list) | Файл в формате HTML, в котором данные из формы оформляются в виде маркированного списка
Форматированный текст в HTML (Formatted text within HTML) | Файл в формате HTML, в котором данные из формы оформляются в виде форматированного текста
Форматированный текст (Formatted text ) | Форматированный текстовый файл
Текстовый (разделитель запятая) (Text database using comma as a separator) | Данные оформляются в виде одной или двух строк текста, в которой элементы списка взяты в кавычки и разделены запятой. Количество строк зависит от того, установлен ли флажок Включить имена полей (Include field names). При установленном флажке в первой строке размещены названия полей формы, а во второй — их значения. Если флажок не установлен, то формируется одна строка, содержащая значения, вводимые в поля формы
Текстовый (разделитель знак табуляции) (Text database using tab as a separator) |  | Формат аналогичен формату, заданному значением Текстовый (разделитель запятая), но в качестве разделителей элементов списка используется табуляция
Текстовый (разделитель пробел) (Text database using space as a separator) |  | Данный формат аналогичен формату, заданному значением Текстовый (разделитель запятая), только в качестве разделителей элементов списка используется пробел

Установленный флажок Включить имена полей (Include field names) указывает на необходимость включения в файл не только данных, вводимых в форму, но и названия полей.

При установке флажка Последние результаты в конце (Latest results at end) добавляемая информация размещается в конце файла.

Замечание

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

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

Вкладка Отправка результатов по почте

Вкладка Отправка результатов по почте (E-mail Results) диалогового окна Сохранение результатов (Saving Results), представленная на рис. 22.20, позволяет задать параметры, используемые для передачи по электронной почте данных, которые были введены в форму.

В верхней части вкладки размещено поле Адрес для получения результатов (E-mail address to receive results), позволяющее указать электронный адрес, по которому будут отправляться введенные в форму данные.

Раскрывающийся список Формат электронной почты (E-mail format) содержит форматы, аналогичные содержащимся в табл. 22.2. По умолчанию установлено значение Форматированный текст (Formatted text), так как этот формат распознается большинством распространенных почтовых программ.

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

Рис. 22.20. Вкладка Отправка результатов по почте диалогового окна Сохранение результатов

Область Заголовок сообщения (E-mail message header) содержит два поля следующего назначения:

  • Строка темы (Subject line) — предназначено для ввода темы почтового сообщения. При установке флажка Имя поля формы (Form field name), расположенного над этим полем, темой сообщения будет служить знамение поля формы, введенного в Строка темы
  • Строка отправителя (Reply-to line) — обратный адрес почтового сообщения. При установке флажка Имя поля формы (Form field name), расположенного над этим полем, обратным адресом будет служить значение поля формы, введенного в Строка отправителя

Совет

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

Вкладка Страница подтверждения

Вкладка Страница подтверждения (Confirmation Page) диалогового окна Сохранение результатов (Saving Results), представленная на рис. 22.21, позволяет задать параметры, используемые для настройки формы подтверждения. Вкладка содержит для поля:

  • URL-адрес страницы подтверждения (URL of confirmation page) — используется для указания адреса страницы подтверждения, в которой будут отображаться данные, введенные в форму, чтобы пользователь мог их проверить.

Рис. 22.21. Вкладка Страница подтверждения
  • URL-адрес страницы сбоя проверки (URL of validation failure page) — предназначена для указания адреса страницы, в которую будет записываться информация при возникновении ошибок ввода данных в форму

Замечание

Поле URL-адрес страницы сбоя проверки доступно только в том случае, если для какого-либо из полей формы заданы условия проверки вводимых данных.

Вкладка Сохраняемые поля

Вкладка Сохраняемые поля (Saved Fields) диалогового окна Сохранение результатов (Saving Results), представленная на рис. 22.22, содержит список всех полей формы, предлагая сохранить порядок их расположения. Вы можете задать иной порядок.

Раскрывающиеся списки области Дата и время (Date and time) позволяют включить в формируемый файл дату и время заполнения формы в любом из предложенных форматов. Область Дополнительные сохраняемые сведения (Additional information to save) содержит три флажка, перечисленных ниже, при установке которых в файл будет включена следующая информация:

  • имя удаленного компьютера (Remote computer name) — имя удаленного компьютера, с которого заполнялась форма
  • имя пользователя (Username) — имя пользователя, заполнявшего форму
  • тип обозревателя (Browser type) — тип обозревателя, в котором форма просматривалась и заполнялась

Рис. 22.22. Вкладка Сохраняемые поля диалогового окна Сохранение результатов

Настройка пользовательских обработчиков

При использовании в Web-узле обработчиков ISAPI, NSAP1, CG1 или ASP для настройки их свойств используется диалоговое окно Параметры обработчика форм (Options for Custom Form Handler), представленное на рис. 22.23.

Рис. 22.23. Диалоговое окно Параметры обработчика форм

Для открытия диалогового окна Параметры обработчика форм выполните следующие действия:

1. Откройте диалоговое окно свойств формы Свойства форм (Form Properties), выбрав в контекстном меню одноименную команду.
2. В области Сохранение результатов (Where to store results) установите опцию В другом месте (Send to other). В расположенном справа списке по умолчанию установлено значение Настраиваемый сценарий ISAPI, NSAPI, CGI или ASP (Custom ISAPI, NSAPI, CGI or ASP script ). Оставьте это значение.
3. Нажмите кнопку Параметры (Options), расположенную в нижней части окна.

Поле Действие (Action) диалогового окна предназначено для ввода URL адреса обработчика формы.

Раскрывающийся список Метод (Method) позволяет указать метод передачи данных обработчику и содержит два значения:

  • POST — при использовании этого метода данные из формы парами, состоящими из наименовании поля и его значения, поступают непосредственно на вход обработчика
  • GET — данные из формы парами, состоящими из наименования поля и его значения, кодируются, а затем присваиваются переменной query_string

По умолчанию предполагается, что при кодировании данных формы, передаваемых обработчику, используется метод appiication/x-www-form-urlencoded. Если вы хотите использовать иной метод кодирования, введите его название в поле Тип кодировки (Encoding type).

Завершив в диалоговом окне Параметры обработчика форм (Options for Custom Form Handler) ввод всех параметров, нажмите кнопку ОК.


Глава 2 Подключение к Интернету

Самостоятельная разработка формы

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

Инструменты, используемые для размещения в форме объектов

Для размещения в форме объектов используются команды (рис. 22.24), появляющиеся при выборе из меню Вставка (Insert) команды Форма (Form). Назначение этих команд описано в табл. 22.3.

Рис. 22.24. Команды, используемые для создания формы

Таблица 22.3. Команды меню Форма

Команда |  | Назначение
Поле (Textbox) |  | Создает в форме поле для ввода данных разных типов, содержащее одну строку
Текстовое поле (Text Area) |  | Создает поле большого размера, занимающее несколько строк и содержащее полосу прокрутки для просмотра информации, не поместившейся в поле
Поле отправки файла (File Upload) |  | Создает в форме поле для ввода названия и расположения файла. Расположенная справа кнопка Обзор (Browse) открывает диалоговое окно Выбор файла, используемое для выбора файла с диска
Флажок (Checkbox) |  | Создает флажок
Переключатель (Option Button) |  | Используется для размещения в форме опции
Группа (Group Box) |  | Создает в форме рамку, предназначенную для объединения объектов в группу
Раскрывающийся список (Drop-Down Box) | Создает в форме список
Кнопка (Push Button) | Создает кнопку управления, предназначенную для выполнения заданных действий
Расширенная кнопка (Advanced Button) | Создает кнопку управления, предназначенную для выполнения заданных действий и имеющую расширенный набор свойств
Рисунок (Picture) | Размещает в форме графическое изображение
Надпись (Label) | Создает метку к полю в виде надписи. После щелчка на ней происходит то же самое, что и при установке объекта, для которого она создана. Например, если вы создали метку для флажка, то для установки флажка можно щелкать как на самом флажке, так и на метке
Свойства формы (Form Properties) | Открывает диалоговое окно Свойства формы для настройки свойств формы

Разработка формы

Рассмотрим создание формы, в которой разместим по возможности большинство предлагаемых программой FrontPage объектов. После создания форма будет иметь вид, показанный на рис. 22.25.

1. Откройте Web-узел, в который хотите вставить страницу формы.
2. Добавьте в него страницу, имеющую шаблон Обычная страница (Normal Page).
3. Введите в верхней части новой Web-страницы заголовок Форма опроса посетителей Web-узла.
 4. Чтобы разместить в форме поле для ввода фамилии посетителя, установите курсор на следующую после заголовка строку и в меню Вставка (Insert) выберите команду Форма (Form), а затем — опцию Поле (Textbox). На странице появляется пунктирный контур, определяющий область формы. Внутри контура расположено поле ввода и две кнопки Отправить (Submit) и Сброс (Reset) (рис. 22.26). Кнопка Отправить позволяет отправить обработчику введенные в форме данные, а кнопка Сброс переводит форму в исходное состояние.
5. Увеличьте область формы, чтобы в ней можно было разместить все необходимые объекты. Для этого установите курсор между полем и кнопками и несколько раз нажмите клавишу <Enter>.

Рис. 22.25. Созданная форма

Рис. 22.26. Область для создания формы после размещения на Web-странице первого поля

6. Введите в верхней части формы текст Введите, пожалуйста, о себе следующую информацию:.
 7. Для выравнивания объектов формы удобно использовать таблицу. Создайте в верхней части формы таблицу, состоящую из двух строк и двух столбцов.
8. Перенесите поле ввода, размещенное в форме, во вторую ячейку первой строки таблицы. Для этого установите на поле курсор, нажмите кнопку мыши и, удерживая ее нажатой, перенесите поле в требуемое место. Затем отпустите кнопку мыши.
9. Для открытия окна свойств поля дважды щелкните на нем мышью.
10. В поле Имя (Name) открывшегося диалогового окна Свойства текстового поля (Text Box Properties) введите наименование поля Lastname. Задайте также ширину поля, предназначенного для ввода фамилии, введя 25 в поле Ширина в знаках (Width in characters). Нажмте кнопку OK для закрытия диалогового окна.
11. В первой ячейке первой строки таблицы введите начнись к полю Фамилия.
 12. В первом ячейке второй строки введите надпись ко второму полю Возраст.
 13. Для создания поля, позволяющего вводить возраст посетителя, установите курсор во вторую ячейку второй строки таблицы и выберите в меню Вставка (Insert) команду Форма (Form), а затем — опцию Поле (Textbox).
14. Чтобы настроить свойства созданного поля, дважды щелкните на нем мышью.
15. В поле Имя (Name) открывшегося диалогового окна Свойства текстового поля (Text Box Properties) введите наименование поля Age, а в поле Ширина в знаках (Width in characters) цифру 3, определяющую ширину ноля в символах.
16. Для настройки параметров, вводимых в поле данных, в диалоговом окне Свойства текстового поля нажмите кнопку Проверить (Validate). Так как в поле будут вводиться только целые числа, в списке Тип данных (Data type) открывшегося диалогового окна Проверка текстового поля (Text Box Validation) (см. рис. 22.9) выберите значение Целое (Integer). Установите флажок Требуется (Required) и в поля Мин. длина (Min length) и Макс, длина (Max length) введите цифры 1 и 3, определяющие минимальное и максимальное количество символов, отводимых для ввода возраста посетителя. Завершив настройку параметров поля, нажмите кнопку ОК.
 17. Теперь разместим в форме переключатель, содержащий две опции, с помощью которых посетитель сможет указать свой пол. Для этого установите курсор в строку, находящуюся ниже таблицы, и выберите в меню Вставка (Insert) команду Форма (Form), а затем — опцию Переключатель (Option Button).
18. Откройте окно свойств опции Свойства переключателя (Option Button Properties).
19. В поле Имя группы (Group name) введите наименование группы опций M_W, а в поле Значение (Value) — значение опции Мужской. Нажмите кнопку ОК для закрытия диалогового окна.
20. Введите с правой стороны созданной опции надпись к полю: Мужской.
 21. Сделайте несколько пробелов и разместите рядом с первой опцией вторую.
22. В окне свойств опции введите наименование группы M_W, а в поле Значение (Value) — значение опции Женский.
23. С правой стороны опции введите надпись к полю Женский.
 24. Установите курсор в следующую строку и введите текст Что Вам понравилось в нашем Web-узле?
 25. Разместим теперь под текстом список, с помощью которого попытаемся узнать у посетителя, что ему понравилось в нашем Web-узле. Установите курсор в место предполагаемого размещения списка и выберите в меню Вставка (Insert) команду Форма (Form), а затем — опцию Раскрывающийся список (Drop-Down Box).
26. Дважды щелкните на созданном объекте. Откроется диалоговое окно Свойства раскрывающегося списка (Drop-Down Box Properties). В поле Имя (Name) введите наименование списка. Используя кнопку Добавить (Add) и открываемое ее диалоговое окно, сформируйте список возможных вариантов ответа. Установите опцию Да переключателя Разрешен выбор нескольких элементов (Allow multiple selections), чтобы разрешить пользователю выбрать из списка несколько значений. Чтобы все элементы списка были видны, введите в поле Высота (Height) число 4. Диалоговое окно Свойства раскрывающегося списка с установленными параметрами показано на рис. 22.27. Закройте диалоговое окно, нажав кнопку ОК.

Рис. 22.27. Диалоговое окно Свойства раскрывающегося списка, в котором установлены необходимые параметры

Совет

Для настройки шрифта, используемого в оформлении списка, можно воспользоваться диалоговым окном, открываемым при нажатии кнопки Стиль (Style).

27. Разместим рядом со списком поле ввода большой длины. Вдруг пользователь захочет свои впечатления о Web-узле или пожелания ввести в произвольной форме. Для размещения поля данного типа в форме выберите в меню Вставка (Insert) команду Форма (Form), а затем — огшию Текстовое поле (Text Area).
28. Откройте окно свойств Свойства текстового поля (TextArea Box Properties) созданного объекта.
29. В поле Имя (Name) введите наименование поля Comment. В поле Ширина в знаках (Width in characters) укажите ширину поля в символах, введя число 20, а в поле Число строк (Number of lines), позволяющее указать высоту поля в строках, — число 4. Закройте диалоговое окно, нажав кнопку ОК.
 30. Все объекты размешены в форме. Откройте диалоговое окно свойств формы. Для этого в меню Вставка (Insert) выберите команду Форма (Form), а затем значение Свойства формы (Form Properties).
31. По умолчанию в диалоговом окне Свойства формы установлена опция Отправка (Send to), а в поле Имя файла (File name) указан текстовый файл, сохраняемый в папке private Web-узла. Посмотрите имя файла, чтобы знать, где искать введенные в форму данные.
32. Нажмите кнопку Параметры (Options). Открывается диалоговое окно Сохранение результатов. На вкладке Результаты в файле (File Results) в списке Формат файла (File format) выбрано значение Текстовый (разделитель — запятая) (Text database using comma as a separator). Если требуется, измените формат данных, записываемых в текстовый файл.
33. Для размещения в файле даты заполнения формы откройте вкладку Сохраняемые поля (Saved Fields) диалогового окна Сохранение результатов (Saving Results) и, используя список Формат даты (Date Format), выберите устраивающий вас формат даты.
34. Нажмите кнопку ОК для закрытия диалогового окна свойств формы.
35. Сохраните Web-страницу, содержащую форму. Создание формы завершено.


Hoвaя cmpaнuцa 1

Программа FrontPage

Почему FrontPage?
Установка программы FrontPage
Стандартная панель инструментов FrontPage
Контекстное меню
Открытие файлов
Панели Список папок и Область переходов
Режимы работы
Создание новых папок
Режим Переходы, Режим работы Гиперссылки
Режим формирования и просмотра отчетов, просмотра задач
Выход из программы FrontPage


Hoвaя cmpaнuцa 1

Почему FrontPage?

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

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

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

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

Преимущества FrontPage перед другими редакторами очевидны:

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

Замечание

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

Отличие FrontPage 2002 от FrontPage 2000

Программа FrontPage достаточно молода. Информация о первой версии визуального редактора FrontPage 1.0 появилась на Web-узле небольшой фирмы Vermeer в Интернете в конце 1995 года. В продукте было много передовых на то время решений. Через полгода фирма была куплена корпорацией Microsoft. Уже в первые три месяца под торговой маркой Microsoft было продано порядка 150 000 копий пакета. Весной 1996 года выходит следующая версия пакета — FrontPage 1.1, и уже к лету 1996 года она поднялась в США на третье место по продажам, опередив даже сам Microsoft Office. Далee одна за другой появляются следующие версии FrontPage, и он уверенно занимает позицию мирового лидера среди визуальных средств разработки для Интернета. В 2000 году выходит программа FrontPage 2000, имеющая существенные отличия от предыдущих версий. И вот новая версия продукта — FrontPage 2002.

  • В программе FrontPage появились новые панели:
  • Панель Буфер обмена (Clipboard), позволяющая хранить в буфере обмена одновременно до 24 фрагментов данных с сохранением использованных элементов форматирования.
  • Панель Создание веб-страницы или узла (New Page or Web), предназначенная для создания новых страниц и Web-узлов, а также содержащая ссылки на последние открывавшиеся страницы, шаблоны и мастера.
  • Панель Вставка картинки (Insert Clip Art), предназначенная для работы с объектами галереи Clip Art.

FrontPage содержит новые мастера и шаблоны для создания страниц и Web-узлов. С помощью мастера Мастер интерфейса базы данных (Database Interface Wizard) создается Web-узел, связанный с базой данных, в которой можно просматривать записи, добавлять новые, удалять имеющиеся. Шаблон страницы Коллекция фотографий (Photo Gallery) позволяет легко создавать фотогалерею, а также с помощью окна свойств осуществлять редактирование расположенных на странице графических элементов.

  • Появились средства, позволяющие создавать панель ссылок без использования структуры Web-узла на основе списка ссылок, включаемых в панель.
  • Расширен список отчетов по Web-узлу. Теперь формировать отчет можно как с помощью панели инструментов Отчеты (Reporting), так и команд меню. FrontPage позволяет формировать отчеты о посещениях вашего Web-узла, используемых посетителями браузерах, наиболее посещаемых страницах, а также отчеты с итоговой информацией по дням, неделям, месяцам и т. п.
  • Добавлены расширенные средства оформления текста с использованием WordArt.
  • Появилась возможность публикации отдельной Web-страницы. Для этого достаточно на панели Список папок выбрать файл и выполнить команду контекстного меню Опубликовать выделенные файлы (Publish Selected Files).
  • Появились новые средства форматирования таблиц:

• Копирование содержащейся в ячейке информации в выделенные ниже или справа ячейки таблицы с помощью кнопок Заполнить вниз (Fill Down) и Заполнить вправо (Fill Right) панели инструментов Таблицы (Tables).

• Автоматическое форматирование таблицы в соответствии с предопределенными форматами.

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

Запуск FrontPage

Вы приступаете к работе с программой FrontPage. Многое из того, с чем вам придется работать (меню, панели инструментов, окна диалога), покажется знакомым, если вы работали в среде Windows.

Для запуска программы FrontPage выполните следующие действия:

1. Нажмите кнопку Пуск.

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

3. Выполните команду Microsoft FrontPage (рис. 9.1). Запустится программа FrontPage, и на экране откроется ее главное окно
(рис. 9.2).

Рис. 9.1. Запуск Microsoft FrontPage

Замечание

Для удобства запуска программы FrontPage вы можете создать ярлык на Рабочем столе Windows. Вы даже можете установить режим загрузки FrontPage при запуске системы Windows. Для этого необходимо создать ярлык программы и поместить его в папку Автозагрузка.

Главное окно

На рис. 9.2 показано главное окно Microsoft FrontPage, каким вы его увидите после запуска программы. Оно содержит заголовок, меню, панели инструментов, панель режимов работы и рабочую область программы. Рассмотрим назначение элементов главного окна.

Рис. 9.2. Главное окно программы FrontPage

Заголовок

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

Таблица 9.1. Команды меню управления

Команда | Назначение
Восстановить | Восстанавливает окно после его минимизации или максимизации
Переместить | Позволяет перемещать главное окно FrontPage с помощью клавиш со стрелками
Размер | Позволяет изменять размеры главного окна программы FrontPage с помощью клавиш со стрелками
Свернуть | Уменьшает окно программы FrontPage до размеров значка
Развернуть | Развертывает главное окно FrontPage; это окно не имеет рамки
Закрыть | Закрывает FrontPage

В правой стороне заголовка расположены кнопки управления главным окном программы:

Кнопка | Назначение
 | Минимизирует главное окно FrontPage и помещает его значок на панель задач Windows
 | Переводит главное окно FrontPage в режим изменения его размеров
 | Максимизирует главное окно FrontPage
 | Закрывает главное окно программы FrontPage


Hoвaя cmpaнuцa 1

Стандартная панель инструментов FrontPage

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

Если вы переходите в какой-либо режим работы, в главном окне программы появляется необходимая панель инструментов. Например, при переходе в режим просмотра и создания отчетов о Web-узле загружается панель Отчеты (Reporting), а при работе с графическими изображениями — Рисунки (Pictures). В том случае, если панель инструментов отсутствует на экране, для ее отображения используется команда Панели инструментов (Toolbars) из меню Вид (View), при выборе которой появляется меню, содержащее список всех панелей программы FrontPage, представленный в табл. 9.2.

Таблица 9,2. Панели инструментов программы FrontPage

Панель инструментов | Назначение
Стандартная (Standard) | Стандартная панель инструментов; располагается по умчанию в главном окне FrontPage
Форматирование (Formatting) | Панель форматирования; содержит кнопки, позволяющие форматировать данные
Эффекты DHTML (DHTML Effects) | Создает на Web-странице динамические HTML-эффекты (о них речь пойдет в главе 20)
Рисование (Drawing) | Панель инструментов, предназначенная для рисования
Переход (Navigation) | Панель, предназначенная для работы в режиме Переходы
Рисунки (Pictures) | Панель инструментов, предназначенная для работы с изображениями
Размещение (Positioning) | Содержит кнопки, позволяющие позиционировать объекты
Отчеты (Reporting) | Панель инструментов, позволяющая задавать типы формируемых отчетов по Web-узлу
Стиль (Style) | Панель инструментов, предназначенная для задания стиля оформления
Таблицы (Tables) | Содержит кнопки, позволяющие создавать и модифицировать таблицы
Область задач (Task Pane) | Отображает в окне программы FrontPage панель Создание веб-страницы или узла (New Page or Web), содержащую список команд, используемых для открытия существующих страниц и Web-узлов и создания новых
WordArt | Панель инструментов для работы с коллекцией WordArt

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

Совет

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

Познакомимся со стандартной панелью инструментов программы FrontPage, которая используется во всех режимах (рис. 9.3).

Рис. 9.3. Стандартная панель инструментов программы FrontPage

Назначение кнопок данной панели инструментов описано в табл. 9.3.

Таблица 9.3. Назначение кнопок стандартной панели инструментов

Кнопка | Название | Назначение
 | Создать (New) | По умолчанию создает новую страницу шаблона Обычная страница (Normal Page). При нажатии стрелки, расположенной на кнопке открывается меню, содержащее команды, предназначенные для создания страницы, Web-узла, папки или задания
 | Открыть (Open) | Открывает существующий файл или Web-узел
 | Сохранить (Save) | Сохраняет открытый файл
 | Найти (Search) | Управляет отображением в главном окне панели Обычный поиск (Search)
 | Опубликовать веб-узел (Publish Web) | Размещает Web-узел на сервере
 | Переключить панель (Toggle Pane) | Управляет отображением в главном окне программы панелей Список папок (Folder List) и Область переходов (Navigation Pane)
 | Печать (Print) | Печатает Web-страницу
 | Просмотр в обозревателе (Preview in Browser) | Загружает страницу в обозреватель для просмотра
 | Орфография (Spelling) | Проверяет орфографию
 | Вырезать (Cut) | Удаляет выделенный текст или объекты и помещает их в буфер обмена
 | Копировать (Copy) | Копирует в буфер обмена выделенный текст или объекты, не удаляя их
 | Вставить (Paste) | Вставляет содержимое буфера обмена в текущее место Web-страницы
 | Формат по образцу (Format Painter) | Копирует формат, который можно применять для дальнейшего форматирования
 | Отменить (Undo) | Отменяет последнее действие
 | Вернуть (Redo) | Восстанавливает действия, отмененные командой Отменить (Undo)
Веб-компонент (Web Component) | Открывает диалоговое окно Вставка компонента веб-узла (Insert Web Component), предназначенное для размещения на Web-странице компонента из предлагаемого списка
Добавить таблицу (Insert Table) | Вставляет в Web-страницу таблицу
Добавить рисунок из файла (Insert Picture From File) | Вставляет в Web-страницу графическое изображение
Рисование (Drawing) | Управляет отображением в главном окне программы панели инструментов Рисование (Drawing)
Добавление гиперссылки (Insert Hyperlink) | Открывает диалоговое окно Добавление гиперссылки (Insert Hyperlink) для создания ссылки
Обновить (Refresh) | Обновляет информацию в окне программы в соответствии с осуществленными изменениями
Завершить (Stop) | Останавливает загрузку информации в окно программы
Справка по Microsoft FrontPage (Microsoft FrontPage Help) | Вызывает справочную систему программы - F rontPage
Параметры панелей инструментов (More Buttons) | Открывает список всех кнопок панели инструментов, используя который можно изменить их состав

Совет

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

Последняя кнопка на стандартной панели инструментов — Параметры панелей инструментов (More Buttons). Она содержит контекстное меню. При выборе из него команды Добавить или удалить кнопки, а затем опции Стандартная, на экране монитора появится список всех кнопок стандартной панели. Выбирая в этом списке ту или иную кнопку, можно удалить с панели инструментов кнопки, которые не нужны. Для восстановления отсутствующей кнопки на панели инструментов достаточно выбрать из этого списка ее наименование еще раз.

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

Меню

Взаимодействие с FrontPage осуществляется с помощью команд меню. Большинство команд являются иерархическими. В результате выбора одной из таких команд на экране появляется ее подменю.

Для выбора команды меню можно воспользоваться любым из следующих способов:

  • Наиболее простой — использование мыши (поместите курсор на требуемую команду и щелкните левой кнопкой мыши).
  • Если вы предпочитаете применять клавиатуру, сначала переместите курсор в строку меню. Для этого нажмите либо клавишу <F10>, либо <Alt>. Выделяется первая команда в меню. Поместите выделение на требуемую команду, используя для этого клавиши <←>, <→>, <↑>, <↓>, затем нажмите клавишу <Enter>.
  • Можно нажать <Аlt>+<подчеркнутый символ имени команды> (команда будет выполняться без нажатия клавиши <Enter>).

Замечание

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

Рассмотрим команды Файл (File), Правка (Edit) и Вид (View). Назначение остальных команд будет описано далее в книге по мере рассмотрения режимов, в которых они используются.

Файл

Меню Файл (File) содержит команды создания, открытия, закрытия, сохранения и печати файлов (табл. 9.4). Последняя команда этого меню — Выход (Exit). Она предназначена для выхода из FrontPage.

Таблица 9.4. Команды меню Файл

Команда | Описание
Создать (New) | Используется для создания новой страницы, Web-узла, папки или задания
Открыть (Open) | Открывает диалоговое окно Открытие файла (Open File) для выбора файлов разных типов
Закрыть (Close) | Закрывает открытый файл или Web-страницу
Открыть веб-узел (Open Web) | Открывает диалоговое окно Открытие веб-узла (Open Web), позволяющее выбрать Web-узел
Закрыть веб-узел (Close Web) |  | Закрывает активный Web-узел. Данная команда важна, т. к. открытие нового узла без закрытия активного открывает новое окно программы FrontPage
Сохранить (Save) |  | Сохраняет файл, находящийся в активном окне. Для файла, который не имеет имени, открывается диалоговое окно Сохранить как (Save As), позволяющее задать его имя и папку, где файл будет расположен
Сохранить как (Save As) |  | Открывает диалоговое окно Сохранить как для сохранения файла с новым именем
Найти (Search) |  | Управляет отображением в главном окне панели Обычный поиск (Search)
Опубликовать веб-узел (Publish Web) |  | Размещает созданный Web-узел на сервере
Импорт (Import) |  | Импортирует в Web-узел файлы, созданные с помощью FrontPage предыдущих версий или другими программными продуктами
Экспорт (Export) |  | Экспортирует открытую в окне программы FrontPage Web-страницу в файл указанного типа
Параметры страницы (Page Setup) |  | Позволяет задать параметры выводимой на печать страницы
Просмотр в обозревателе (Preview in Browse) |  | Открывает диалоговое окно, позволяющее указать обозреватель, в котором будет просматриваться Web-страница
Print Preview |  | Открывает окно предварительного просмотра печатаемой информации
Печать (Print) |  | Печатает содержимое текущего окна или файла
Отправить (Send) |  | Позволяет сформировать и отправить по электронной почте сообщение, в которое будет вложен файл, открытый в окне программы FrontPage
Свойства (Properties) |  | Открывает диалоговое окно Свойства страницы (Page Properties), предназначенное для просмотра и редактирования свойств открытого файла
Последние файлы (Recent Files) |  | Содержит имена восьми последних открываемых файлов, позволяя их открыть
Последние веб-узлы (Recent Webs) |  | Содержит имена четырех последних открываемых Web-узлов, позволяя их открыть
Выход (Exit) |  | Выход из программы FrontPage

Правка

Большинство команд меню Правка (Edit) вам знакомы, если вы работали с другими приложения Windows. Они используются при редактировании Web-страниц (табл. 9.5).

Таблица 9.5. Команды меню Правка

Команда | Описание
Отменить (Undo) | Отменяет изменения, сделанные в текущем сеансе редактирования
Повторить (Redo) | Восстанавливает действия, отмененные командой Отменить
Вырезать (Cut) | Удаляет выделенный текст или объект, помещая его в буфер обмена
Копировать (Сору) | Копирует выделенный текст или объект в буфер обмена
Буфер обмена Office (Office Clipboard) | Отображает в окне программы FrontPage панель Буфер обмена (Clipboard), позволяющую работать с буфером обмена данных
Вставить (Paste) | Вставляет содержимое буфера обмена
Специальная вставка (Paste Special) | Открывает диалоговое окно Преобразовать текст (Convert Text), позволяющее вставить содержимое буфера обмена с конвертированием данных
Удалить (Delete) | Удаляет выделенные объекты
Выделить все (Select All) | Выбирает все объекты в текущем файле
Найти (Find) | Открывает диалоговое окно Найти и заменить (Find and Replace) для поиска текстовых строк в файле
Заменить (Replace) | Открывает диалоговое окно Найти и заменить для поиска и замены текстовых строк в файле
Извлечь (Check Out) | Устанавливает режим монопольного редактирования файла, при котором запрещается его редактирование другим разработчикам
Вернуть (Check In) | Устанавливает режим совместного редактирования файла
Отменить извлечение (Undo Check Out) | Отменяет режим монопольного редактирования файла
Задачи (Tasks) | Содержит команды, управляющие задачами

Команда Задачи (Tasks) открывает меню следующего уровня, содержащее опции, управляющие задачами:

  • Добавить задачу (Add Task) — добавляет новую задачу
  • Изменить задачу (Edit Task) — редактирует текущую задачу
  • Запустить задачу (Start Task) — запускает текущую задачу на выполнение
  • Пометить как завершенную (Mark Complete) — изменяет статус задачи
  • Отобразить журнал (Show History) — позволяет просмотреть весь списо к задач, включая выполненные ранее

Вид

В меню Вид (View) содержит команды (табл. 9.6), управляющие режимами работы программы FrontPage, а также отображением в главном окне пане л ей Представления (Views), Область переходов (Navigation Pane), Список па п ок (Folder List) и панелей инструментов.

Таблица 9.6. Команды меню Вид

Команда | Описание
Страница (Раде) | Переводит программу FrontPage в режим просмотра и редактирования страниц
Папки (Folders) | Переводит программу в режим работы с папками Web-узла
Отчеты (Reports) | Переводит программу FrontPage в режим просмотра отчетов по Web-узлу
Способ перехода (Navigation) | Переводит программу в режим работы со структурой Web-узла
Гиперссылки (Hyperlinks) | Переводит программу в режим, при котором в рабочей области программы FrontPage можно просмотреть все ссылки Web-узла
Задачи (Tasks) | Переводит программу FrontPage в режим просмотра задач
Панель представлений (Views Bar) | Управляет отображением панели Представления (Views) в главном окне FrontPage
Список папок (Folder List) | Управляет отображением панели Список папок (Folder List) в главном окне FrontPage
Область переходов (Navigation Pane) | Управляет отображением панели Область переходов в главном окне FrontPage
Область задач (Task Pane) | Управляет отображением панели Создание веб-страницы или узла (New Page or Web), содержащей список команд, используемых для открытия существующих страниц и Web-узлов и создания новых
Показать теги (Reveal Tags) | Управляет отображением HTML-тегов на вкладке Обычный (Normal) для элементов Web-страницы
Панели инструментов (Toolbars) | Открывает список всех панелей инструментов FrontPage, позволяя разместить или удалить панель инструментов в главном окне программы
Обновить (Refresh) | Загружает последнюю сохраненную версию текущей Web-страницы


Hoвaя cmpaнuцa 1

Контекстное меню

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

Панель режимов работы

FrontPage предлагает 6 режимов просмотра и создания Web-узла. Для перехода в тот или иной режим предназначена располагаемая с левой стороны главного окна FrontPage панель Представления (Views), содержащая 6 кнопок. Назначение кнопок данной панели описано в табл. 9.7.

Отображением на экране этой панели управляет команда Панель представлений (Views Bar) меню Вид (View). Если вы не хотите, чтобы панель режимов присутствовала в главном окне, занимая рабочую область, удалите ее с экрана, выбрав команду Панель представлений еще раз.

Таблица 9.7. Кнопки панели режимов работы

Кнопка | Название | Назначение
 | Страница (Page) | Просмотр и редактирование страниц; в данном режиме в рабочей области программы FrontPage можно создавать новые и редактировать существующие Web-страницы
 | Папки (Folders) | Просмотр структуры папок создаваемого Web-узла
 | Отчеты (Reports) | Просмотр отчетов; этот режим предназначен для формирования и просмотра отчетов о Web-узле
 | Переходы (Navigation) | Проектирование структуры Web-узла; эта структура в дальнейшем используется при создании панелей ссылок
 | Гиперссылки (Hyperlinks) | Просмотр гиперссылок Web-узла
 | Задачи (Tasks) | Режим формирования и просмотра задач, которые можно использовать при создании Web-узла

Замечание

Для перехода в один из режимов работы помимо кнопок на панели Представления (Views) можно использовать одноименные команды меню
Вид (View).


Hoвaя cmpaнuцa 1

Открытие файлов

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

Открытие Web-узла

Д ля открытия Web-узла в программе FrontPage выполните следующие дей ст вия:

  1. В меню Файл (File) выберите команду Открыть веб-узел (Open Web) или на стандартной панели инструментов нажмите стрелку справа от кнопки Открыть (Open) и в открывшемся меню выберите команду Открыть веб-узел (Open Web).
  2. Используя раскрывающийся список Папка (Look in) открывшегося диалогового окна Открытие веб-узла (Open Web) (рис. 9.4), выберите папку, в которой располагается открываемый вами Web-узел.
  3. Выберите необходимый Web-узел и нажмите кнопку Открыть (Open).

Рис. 9.4. Диалоговое окно Открытие веб-узла

Замечание

Значки, которыми обозначаются Web-узлы (рис. 9.4), похожи на значки папок, на которых размещено изображение глобуса.

В диалоговом окне Открытие веб-узла находятся кнопки, предназначенные для облегчения поиска Web-узла на диске, если он расположен в одной из системных папок:

Кнопка | Назначение
Журнал (History) | Открывает папку Recent , содержащую Web-узлы, ранее открывавшиеся в программе FrontPage
Мои документы (My Documents) | Открывает папку Мои документы
Рабочий стол (Desktop) | Открывает папку Windows Рабочий стол
Избранное (Favorites) | Открывает папку Избранное
Мое сетевое окружение (My Network Places) | Открывает папку Мое сетевое окружение

Совет

Для открытия после запуска программы Web-узла, с которым вы работали при предыдущем запуске FrontPage, необходимо в меню Сервис (Tools) выбрать команду Параметры (Options) и на вкладке Общие (General) появившегося диалогового окна установить флажок Открывать последний веб-узел при запуске FrontPage (Open last web automatically when FrontPage starts).

Совет

Чтобы открыть Web-узел, можно воспользоваться командой Последние веб-узлы (Recent Webs) из меню Файл (File), содержащей имена четырех последних открывавшихся Web-узлов.

Каждый открываемый Web-узел располагается в новом окне программы FrontPage. Чтобы этого не возникало, перед загрузкой нового Web-узла закрывайте открытый узел с помощью команды Закрыть веб-узел (Close Web) из меню Файл (File).

Открытие Web-страницы

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

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

  • В меню Файл (File) выберите команду Открыть (Open).
  • На стандартной панели инструментов нажмите стрелку с правой стороны кнопки Открыть (Open) и в появившемся меню выберите команду Открыть.
  • Нажмите комбинацию клавиш <Ctrl>+<O>.

При выполнении любого из этих действий открывается диалоговое окно Открытие файла (Open File) (рис. 9.5). Используя раскрывающийся список (Look in), выберите папку, в которой располагается открываемая вами Web-страница. Затем установите на выбранную страницу курсор и нажмите кнопку Открыть (Open).

Замечание

Обратите внимание на значок Web-страницы [image] . Он действительно напоминает страницу с направленной наружу стрелкой.

Рис. 9.5. Диалоговое окно Открытие файла

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


Hoвaя cmpaнuцa 1

Панели Список папок и Область переходов

В главном окне программы в режимах Страница (Page), Переходы (Navigation) и Гиперссылки (Hyperlinks) можно отобразить панель Список папок (Folder List), показывающую структуру папок открытого Web-узла (рис. 9.6). Для этого необходимо в меню Вид (View) выбрать команду Список папок (Folder List). При переходе в режим работы Папки (Folders) эта панель располагается в главном окне программы FrontPage по умолчанию.

Рис. 9.6. Панель Список папок

Замечание

Используя панель Список папок (Folder List), посмотрите на расширения имен файлов Web-узла. Web-страница имеет расширение имени файла НТМ. Помимо Web-страниц, Web-узел может содержать файлы типа GIF и JPG (графические файлы), а также файлы других типов, если при создании страниц вы используете программы, входящие в Microsoft Office.

В режимах работы Страница (Page), Переходы (Navigation) и Гиперссылки (Hyperlinks) справа от панели Список папок (Folder List) размещается рабочая область для просмотра и редактирования Web-узла или Web-страницы (в зависимости от режима, в котором вы находитесь). На рис. 9.7 в рабочей области располагается открытая Web-страница.

Обратите внимание на нижнюю часть панели Список папок в режиме работы Страница (Page). Там располагаются вкладки Список папок (Folder List) и Переходы (Navigation), позволяющие без использования меню и кнопок основной панели инструментов отображать панель папок или панель навигации, соответственно.

Рис. 9.7. Отображение структуры папок Web-узла в режиме работы Страница

Работа с панелью Список папок (Folder List) аналогична работе в окне Проводника системы Windows. Открывая папки, определяющие структуру открытого в программе FrontPage Web-узла, вы легко можете отыскать необходимую страницу и открыть ее для просмотра и редактирования. Чтобы открыть страницу, дважды щелкните на ее имени или значке. При этом в рабочей области программы FrontPage появится выбранная страница, которую можно просмотреть или отредактировать. Если открыто несколько страниц, в верхней части этой области располагаются вкладки с их названиями, служащие для перехода между страницами
(см. рис. 9.7).

Замечание

Если вы находитесь в режиме Переходы (Navigation) и Гиперссылки (Hyperlinks), то после двойного щелчка на имени выбранной Web-страницы вы автоматически переходите в режим ее редактирования.

В режиме работы Страница в окне программы FrontPage можно разместить панель Область переходов (Navigation Pane), предназначенную для просмотра навигационной структуры открытого Web-узла. На данной панели показываются страницы узла и их иерархическая связь друг с другом. Для отображения панели Область переходов можно использовать одноименную команду из меню Вид (View), кнопку Переключить панель (Toggle Pane) на стандартной панели инструментов или вкладку в нижней части панели Список папок (Folder List).

Ширину панели режимов работы Представления (Views), панели структуры папок Список папок (Folder List) и панели Область переходов (Navigation Pane) можно регулировать с помощью мыши. Для этого выполните следующие действия:

  1. Установите курсор на правую вертикальную границу панели или области, ширину которой хотите изменить.
  2. Когда курсор примет вид двунаправленной стрелки, нажмите кнопку мыши и, удерживая ее нажатой, перемещайте курсор вправо для увеличения ширины панели или области папок, или влево — для уменьшения.
  3. Установив требуемую ширину панели или области, отпустите кнопку мыши.


Hoвaя cmpaнuцa 1

Режимы работы

Сак уже было сказано выше, в программе FrontPage существует 6 режимов работы, для перехода в которые предназначены кнопки на панели Представления (Views), а также первые шесть команд меню Вид (View). Рассмотрим кратко основные режимы работы.

Режимы просмотра и редактирования Veb-страницы

1ри открытии в программе FrontPage новой или ранее созданной Web-границы вы оказываетесь в режиме просмотра и редактирования страницы траница (Page). Для перехода в режим редактирования из других режимов используется кнопка Страница (Page) панели Представления (Views) или команда Страница меню Вид (View).

На рис. 9.8 показано главное окно программы в режиме Страница. Как вы видите, в окне расположена панель режимов работы Представления, панель Список папок (Folder List), а справа — рабочая область, предназначенная для просмотра и редактирования Web-страницы. В верхней части рабочей области находятся вкладки с названиями открытых вами страниц, используемые перемещения между ними.

Рис. 9.8. Режим работы Страница

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

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

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

Таблица 9.8. Режимы просмотра Web-страницы

Вкладка | Назначение
Обычный (Normal) | Обычный режим работы, при котором осуществляется создание страницы с помощью визуальных средств. Страница создается путем размещения в ней текста, линий, кнопок, ссылок и других объектов с использованием меню и панелей инструментов, при этом вам не требуется знать HTML-коды
HTML-код (HTML) | Режим просмотра и создания страницы в HTML-кодах (рис. 9.9). Его можно использовать как для просмотра HTML-кодов страницы, созданной в обычном режиме работы, так и для создания страницы с помощью кодов. При этом часть страницы может создаваться в обычном режиме, а отдельные места дописываться в кодах
Просмотр (Preview) | Предварительный просмотр страницы в том виде, в котором она будет представлена на сервере Интернета

Рис. 9.9. Просмотр страницы в HTML-кодах

Совет

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

Режим просмотра структуры папок

Для перехода в режим просмотра структуры папок Web-узла используется лопка Папки (Folders) на панели Представления (Views) или команда Пап-Я (Folders) из меню Вид (View). В этом режиме работы в главном окне по молчанию размещается панель Список папок (Folder List) с именами папок пгкрытого Web-узла, расположенных по иерархии, а в рабочей области программы — содержимое папки, выделенной на панели (рис. 9.10).

Рис. 9.10. Главное окно программы FrontPage в режиме работы Папки

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

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

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

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

  • Дважды щелкните кнопкой мыши
  • Нажмите клавишу <Enter>

При выполнении любого из этих действий в рабочей области главного окна программы вместо списка файлов в табличном виде откроется выбранная страница в режиме редактирования. Для выхода из этого режима и возвращения в режим просмотра структуры папок нажмите на панели Представления (Views) кнопку Папки (Folders).


Hoвaя cmpaнuцa 1

Создание новых папок

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

1. Перейдите в режим просмотра структуры папок Папки (Folders).

2. На панели Список папок (Folder List), отображающей иерархическую структуру папок, установите курсор на папку, в которой хотите разместить создаваемую папку.

3. В меню Файл (File) выберите команду Создать (New), а затем из появившегося подменю команду Папка (Folder) или нажмите правую кнопку мыши и выберите последовательно команды Создать и Папка контекстного меню. В иерархической структуре папок левой рабочей области появится новая папка с именем Новая папка (New_Folder). Эта же папка отобразится в правой области, и ее имя активно для переименования (рис. 9.11).

4. Введите имя папки и нажмите клавишу <Enter>.

Замечание

Если вы сразу не ввели имя для созданной папки, то папка будет иметь имя Новая_папка (New_Folder), присвоенное ей по умолчанию программой FrontPage. Позднее вы можете папку переименовать, воспользовавшись командой контекстного меню Переименовать (Rename). Кроме того, для переименования можно также выделить имя папки и, выдержав небольшую паузу, нажать кнопку мыши. Имя папки станет доступным для редактирования, и вы сможете ввести новое имя.

Рис. 9.11. Создание новой папки в режиме работы Папки

Перемещение файлов

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

1. Перейдите в режим просмотра структуры папок Папки (Folders).

2. Используя рабочую область программы FrontPage, содержащую в этом режиме работы список файлов и папок Web-узла, выберите перемещаемый файл или группу файлов (рис. 9.12). Для выделения подряд расположенных файлов используйте нажатую клавишу <Shift>, а для файлов, которые располагаются не подряд, — клавишу <Ctrl>.

Рис. 9.12. Выделение файлов для дальнейшего перемещения

3. Нажмите левую кнопку мыши и, удерживая ее нажатой, переместите курсор на панель Список папок (Folder List), отображающую иерархическую структуру Web-узла, на папку, в которой хотите разместить выбранные файлы.

4. Отпустите кнопку мыши. Начнется процедура перемещения файлов, в процессе которой на экране монитора появляется окно, в котором указываются выполненные операции. После завершения перемещения это окно удаляется с экрана, указывая, что операция успешно проведена.

Замечание

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


Hoвaя cmpaнuцa 1

Режим Переходы

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

В режиме работы Переходы в главном окне программы появляется панель Список папок (Folder List), а в рабочей области программы размещается иерархическая структура Web-узла (рис. 9.13), на которой в виде прямоугольников представлены страницы. Название прямоугольника соответствует названию отображаемой им страницы. Прямоугольник со значком домика указывает домашнюю страницу. Эта страница всегда располагается в структуре на самом верхнем уровне иерархии.

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

Рис. 9.13. Web-узел в режиме работы Переходы

Режим работы Гиперссылки

Режим работы Гиперссылки позволяет разработчику просмотреть в графическом виде все ссылки, установленные на страницах Web-узла. Для перехода в режим просмотра гиперссылок предназначена кнопка Гиперссылки на панели режимов Представления (Views) и команда Гиперссылки (Hyperlinks) из меню Вид (View).

В режиме просмотра гиперссылок в главном окне программы FrontPage отображается панель Список папок (Folder List), а в рабочей области — схема ссылок открытого Web-узла (рис. 9.14).

Рис. 9.14. Режим просмотра гиперссылок Web-узла

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

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


Hoвaя cmpaнuцa 1

Режим формирования и просмотра отчетов

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

Для перехода в режим работы Отчеты используется кнопка Отчеты на панели режимов Представления (Views) и команда Отчеты (Reports) из меню Вид (View). При выполнении этих действий в рабочей области программы FrontPage отображается таблица (рис. 9.15), наименования столбцов которой, а также их количество зависят от типа отчета, задаваемого с помощью -панели инструментов Отчеты (Reporting) и опций меню Отчеты (Reports).

Рис. 9.15. Режим просмотра отчетов

Режим формирования и просмотра задач

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

Идя перехода в режим формирования и просмотра задач предназначена кнопка Задачи (Tasks) на панели режимов работы Представления (Views) и команда Задачи (Tasks) из меню Вид (View). При переходе в режим Задачи в правой рабочей области программы располагается в табличном виде список сформированных задач (рис. 9.16). Работа в данном режиме осуществляется с помощью команды Задачи (Tasks) из меню Правка (Edit) и контекстного меню.

Рис. 9.16. Режим формирования и просмотра задач


Hoвaя cmpaнuцa 1

Выход из программы FrontPage

После завершения текущего сеанса работы необходимо закрыть программу F rontPage. Для этого вы можете воспользоваться одним из следующих способов:

  • Выберите в меню Файл (File) команду Выход (Exit)
  • Выберите команду Закрыть в системном меню главного окна FrontPage
  • Дважды щелкните на значке программы FrontPage в заголовке главного окна

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

Рис. 9.17. Диалоговое окно, появляющееся при попытке выхода из программы FrontPage без сохранения информации

Для продолжения операции нажмите одну из кнопок:

Кнопка | Назначение
Да | Сохраняет введенные изменения и выходит из программы FrontPage
Нет | Осуществляет выход из FrontPage без сохранения информации
Отмена | Закрывает диалоговое окно и возвращается в программу FrontPage

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


Приложение

Запуск процесса установки

Установка программы FrontPage XP не требует каких-либо специальных знаний и может быть успешно проведена практически любым пользователем компьютера. Для установки и корректной работы программы аппаратное и программное обеспечение компьютера должно соответствовать следующим требованиям:
  • Процессор Pentium 133 или выше
  • Минимальный объем оперативной памяти — 32 Мбайт, рекомендуемый — не менее 64 Мбайт. Больший объем увеличивает производительность
  • Жесткий диск с объемом свободного пространства не менее 90 Мбайт О Монитор — VGA или Super VGA
  • Видеокарта, поддерживающая 256-цветовую палитру или разрешение экрана True Color и имеющая 2 Мбайт видеопамяти
  • Устройство для чтения компакт-дисков
  • TCP/IP — набор стандартных сетевых протоколов, определяющих способ обмена данными между компьютерами в сети

Замечание

Если на компьютере установлена более ранняя версия FrontPage, то в процессе установки FrontPage XP старая версия будет заменена.

Установка программы FrontPage XP как компонента Microsoft Office XP возможна в следующих вариантах:

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

1. Вставьте компакт-диск с установочным компонентом Microsoft Office XP в устройство CD-ROM.
2. Если устройство CD-ROM вашего компьютера является загрузочным, автоматически запустится находящаяся на нем программа Setup. Если устройство CD-ROM не является загрузочным, то запустите программу Setup, расположенную в корневом каталоге компакт-диска. Откроется окно мастера в котором укажите имя пользователя, название организации и введите 25-значный код продукта. После ввода всей необходимой информации нажмите кнопку Далее.
3. На следующем шаге необходимо указать тип проводимой установки. Окно содержит опции следующего назначения:

  • Обновить (Upgrade Now). Эта опция используется в случае, если на компьютере установлена предыдущая версия Microsoft Office, которая будет удалена, после чего осуществится установка текущей версии программ
  • Обычная (Typical). Если была установлена предыдущая версия Microsoft Office, ее текущая конфигурация игнорируется и устанавливается типовая конфигурация, содержащая наиболее часто используемые файлы • Полная (Complete). При выборе этой опции осуществляется стандартная установка всех программных продуктов, входящих в Microsoft Office
  • Выборочная (Custom). Выборочная установка программных продуктов, входящих в Microsoft Office

В нижней части окна в поле Установить в (Install to) указана папка, в которую будут копироваться файлы Microsoft Office. Укажите в этом окне тип установки, папку, в которую необходимо разместить файлы, и нажмите кнопку Далее.

4. При использовании варианта выборочной установки (опция Выборочная) на следующем шаге появляется окно мастера, в котором в виде флажков приведен список программ, входящих в Microsoft Office. Оставьте флажки рядом с теми программными продуктами, которые хотите установить помимо FrontPage. Кроме того, если вы хотите указать, какие составляющие FrontPage необходимо установить на компьютер, выберите опцию Выбрать подробные параметры установки для каждого приложения (Choose detailed installation options for each application). В противном случае оставьте опцию Установить приложения с обычным набором компонентов (Install applications with the typical options), установленную по умолчанию, и нажмите кнопку Далее.

Рис. 1 Выбор устанавливаемых программных продуктов из пакета Microsoft Office XP

5. Если в предыдущем диалоговом окне была установлена опция Выбрать подробные параметры установки для каждого приложения (Choose detailed installation options for each application), на текущем шаге мастера необходимо осуществить выбор компонентов программы FrontPage, которые вы хотите установить на свой компьютер. Чтобы просмотреть список компонентов приложения, щелкните на значке "плюс" напротив названия приложения. По умолчанию устанавливается типовой набор компонентов. Для исключения компонента программы из установки нажмите кнопку раскрытия списка на его значке и выберите из появившегося меню команду Не доступен (Not Available). Для включения компонента, не входящего в типовую установку, используйте команду меню Запускать с моего компьютера (Run from My Computer). Завершив установку параметров в этом окне, нажмите кнопку Далее.

6. Программа установки проверяет наличие на компьютере предыдущих версий приложений, входящих в состав Microsoft Office. В случае их обнаружения открывается диалоговое окно , содержащее три опции с вариантами предполагаемых действий: удалить все предыдущие версии, сохранить все предыдущие версии, удалить только выбранные приложения. Установите требуемую опцию и нажмите кнопку Далее.
7. Следующее окно мастера является информационным и содержит список выбранных для установки приложений. Нажмите в нем кнопку Установить (Install).

Рис. 4. Выбор варианта предполагаемых действий при обнаружении на компьютере предыдущих версий приложений

8. Начинается процесс установки. После его завершения в главном меню системы Windows появляется команда для запуска программы FrontPage. 9. Для активизации программы откройте окно FrontPage и выберите в меню Справка (Help) команду Активизировать продукт (Activate Product).
10. Открывается окно мастера активизации. к котором необходимо указать способ активизации программных продуктов: через Интернет или по телефону. Установите одну из предлагаемых опций и нажмите кнопку Далее.

11. При активизации через Интернет появляется окно, содержащее поля для ввода информации о пользователе. Введите в поля формы информацию о себе. Первое поле Страна/Регион (Country/Region) является обязательным для заполнения. Для завершения активизации далее следуйте указаниям мастера.