Школа Майкрософт

В предыдущих главах мы рассмотрели создание 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)
Комбинацию клавиш <Ctrl>+<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-узел страницы. Теперь для открытия страницы достаточно дважды щелкнуть мышью на значке файла на панели Список папок.

Гиперссылки

После добавления в 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) на стандартной панели инструментов
Нажмите комбинацию клавиш <Ctrl>+<K>

При выполнении любого из этих действий на экране открывается диалоговое окно Добавление гиперссылки (Insert Hyperlink) (рис. 16.4).

Список Папка (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) кнопка Интернет, запускающая установленный на компьютере обозреватель. Адрес найденной страницы переносится в поле Адрес диалогового окна Добавление гиперссылки (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. В месте, указанном вами, появляется текст и создается ссылка. Текст соответствует наименованию страницы, на которую создана ссылка. Скорректируйте текст гиперссылки, следя, чтобы он оставался выделенным и подчеркнутым. Если вы его просто удалите и введете нужный вам текст, будет удалена и ссылка.

Закладки

Переход по гиперссылке осуществляется в начало страницы 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. Нажмите кнопку Интернет. Запускается установленный на компьютере обозреватель для поиска в Интернете страницы, на которую устанавливается ссылка.
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-страницы в Интернете

Редактирование ссылки

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

В меню Вставка (Insert) выберите команду Гиперссылка (Hyperlink)

Нажмите правую кнопку мыши и выберите команду контекстного меню Свойства гиперссылки (Hyperlink Properties)
Нажмите кнопку Добавление гиперссылки на стандартной панели инструментов
Нажмите комбинацию клавиш <Ctrl>+<K>
Нажмите комбинацию клавиш <Alt>+<Enter>

В результате на экране откроется диалоговое окно Изменение гиперссылки (Edit Hyperlink), которое аналогично окну Добавление гиперссылки (Insert '.,, Hyperlink). Измените в нем необходимые параметры и нажмите кнопку ОК.

Удаление ссылки

Для удаления созданной ссылки выделите ее и нажмите клавишу <Delete> или <Backspace> на клавиатуре. При этом удаляется не только ссылка, но и исходный текст, использовавшийся для ее создания. В том случае, если вы хотите сохранить текст гиперссылки, вы должны поступить иначе:

1. Откройте окно редактирования ссылки Изменение гиперссылки (Edit Hyperlink) любым удобным для вас способом.
2. Нажмите кнопку Удалить ссылку (Remove Link).
3. Нажмите кнопку ОК для закрытия диалогового окна.

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

>h2>Создание графических ссылок

В качестве гиперссылки можно использовать не только текстовую информацию, но и графическое изображение или отдельные его части. Разместим на одной из страниц изображение, которое будет использоваться для перехода на домашнюю страницу нашего 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. Размещенные на изображении активные области

Редактирование активных областей

Создавая с помощью кнопок Гиперпрямоугольник (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) и выберите в появившемся меню команду Размытие (Wash Out).
5. Нажмите на панели инструментов Рисунки (Pictures) кнопку Текст (Text) . В центре изображения появляется текстовая область, в которой установлен мигающий курсор.
6. Введите текст Домой.
7. Используя списки на панели инструментов форматирования, задайте необходимый шрифт и размер для введенного текста.
8. Для того чтобы сделать текст активной областью, выберите в его контекстном меню команду Свойства гиперрисунка (Picture Hotspot Properties) или нажмите комбинацию клавиш <Alt>+<Enter>. Откроется диалоговое окно Добавление гиперссылки (Insert Hyperlink).
9. Выберите из списка страниц Web-узла домашнюю страницу index.htm. Ее имя будет перенесено в поле Адрес (Address).
10. Нажмите кнопку ОК для закрытия диалогового окна Добавление гиперссылки. Ссылка для текстовой надписи на графическом изображении создана.
11. Сохраните Web-страницу, нажав на стандартной панели инструментов кнопку Save.

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

Рис. 16.18. На графическое изображение помещен текст

Режим просмотра гиперссылок 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. Информационное окно Обновление гиперссылок

Режим переходов 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-узла.

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

Для перемещения между страницами 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-узла, оформленная с применением темы Лимонад.

Редактирование панели ссылок

Размещенные на 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)

Использование общих областей при создании панелей ссылок

При размещении панелей ссылок в нашем тестовом 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. В верхней и левой частях домашней страницы расположены общие области, выделяемые линиями при установке на них курсора

Установите курсор на заголовок страницы и нажмите правую кнопку мыши. В контекстном меню имеется команда Свойства объявления на странице (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-страница, содержащая две панели ссылок

Добавить в избранное || Использование изображений, звука и видео || Введение || Формирование задач и отчетов

top

графика, хтмл, для, начинающий, начинающих, чайников, новичков, просто, основа, основы, графика, страница, домашний, домашняя, сайт, новый, новичок, html, обучение, учеба, пример, веб, мастер, веб-мастер, дизайн, веб-дизайн, вебдизайн, дезайн, веб-дезайн, вебдезайн, дезайнер, дизайнер, ступени, тэги, тэг, теги, тег, аттрибут, атрибуты, парамет, design, web, help, помощь, icq, e-mail, guest, book, guestbook, гостевая, книга, форум, аська, контакт, ссылка, link, links, banner, обмен, баннер, баннерами, банер, baner, друзья, friends, почитать, написать, вопросы, вопрос, ответ, проект, ступени, словарь, excel, exel, excell, exsel, эксель, ексель, для, начала, сначала, таблицы, форматирование, ряды, строки, ячейка, начинающий, начинающих, чайников, новичков, просто, основа, основы

Хостинг от uCoz