FrontPage
Программа создания сайтов

Создание фрейма

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

Процесс создания сайта будет состоять из следующих этапов:

1. Создание пустого сайта.
2. Создание трех страниц (по числу областей фрейма), отображаемых по умолчанию во фрейме при его загрузке.
3. Создание страниц, которые будут размещаться в основной области фрейма при выборе значений списка, размещенного в области оглавления. Их количество определяется оглавлением.
4. Размещение в сайте фрейма.

Рис. 20.23. Фрейм в режиме просмотра

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

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

1. Создайте пустой сайт. Для этого на панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны веб-узлов (Web Sites Templates).
2. В поле Укажите расположение нового веб-узла (Specify the location of the new web) открывшегося диалогового окна Шаблоны веб-узлов (Web Sites Templates) введите наименование и расположение создаваемого узла, а затем дважды щелкните мышью на шаблоне Пустой веб-узел (Empty Web). Откроется пустой сайт.
3. Для создания страницы, размещаемой в заголовке фрейма, добавьте в сайт новую страницу шаблона Обычная страница (Normal Page).
4. В режиме редактирования введите в верхней строке страницы заголовок Книжный мир. Расположите его в центре строки. Для этого установите курсор в заголовок и нажмите кнопку По центру (Center) на панели форматирования.
5. Для сохранения страницы нажмите кнопку Сохранить (Save) на стандартной панели инструментов. В открывшемся диалоговом окне Сохранить как (Save As) задайте наименование файла и нажмите кнопку Сохранить.

Замечание

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

6. Добавьте в сайт новую страницу и разместите на ней текст оглавления. Оформите его в виде списка и сохраните на диске в файле content_f.htm.
7. На третью новую страницу поместите текст, который по умолчанию будет загружаться в основную область фрейма, и сохраните ее в файле main_f.htm.
8. На этом формирование страниц, отображаемых во фрейме при его загрузке, завершено. Теперь необходимо подготовить страницы, которые будут появляться в правой области фрейма при выборе пунктов оглавления. Создайте необходимые страницы. Их число должно быть равно количеству пунктов в области оглавления. Первой строкой нашего оглавления является Готовятся к печати. Web-страница, появляющаяся при выборе этого пункта, должна содержать книги, которые готовятся к печати и в ближайшее время должны появиться на книжном рынке. Подготовим эту страницу и сохраним ее в файле new_books.htm.
9. Создайте и сохраните остальные Web-страницы, необходимые для просмотра информации, представленной в оглавлении.
10. Все страницы подготовлены. Теперь их необходимо разместить во фрейме. Добавим в сайт новый фрейм. Для этого на панели Создание веб-страницы или узла (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) , расположенную справа от поля Конечная рамка по умолчанию (Default target frame).
3. В области Текущая страница рамок (Current frames page) открывшегося диалогового окна Конечная рамка (Target Frame), отображающего структуру фрейма, выбрать с помощью мыши требуемую область.
4. Нажать кнопку ОК для закрытия диалогового окна Конечная рамка.
5. Закрыть диалоговое окно Свойства страницы, нажав кнопку ОК.


Рейтинг@Mail.ru