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

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

• Создание пустого Web-узла.

• Создание трех страниц (по числу областей фрейма), отображае-

мых по умолчанию во фрейме при его загрузке.

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

• Размещение в Web-узле фрейма.

• Связывание областей фрейма с загружаемыми в них по умолча-

нию страницами.

Рис. 9.1. Шаблон фрейма Оглавление

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

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

Начнем с создания нового Web-узла.

1. Создайте пустой Web-узел на шаблоне Пустой веб-узел.

2. Откроется пустой Web-узел.

3. Для создания страницы, размещаемой в заголовке фрейма,

добавьте в Web-узел новую страницу шаблона Обычная страница.

4. В режиме редактирования введите в верхней строке страни-

цы заголовок, например Книжный мир. Расположите его в центре

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

По центру на панели форматирования.

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

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

6. Добавьте в Web-узел новую страницу и разместите на ней текст оглавления. Оформите его в виде списка и сохраните на диске в файле content_f.htm.

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

8. Теперь необходимо подготовить страницы, которые будут появляться в правой области фрейма при выборе пунктов оглавле- ния. Создайте необходимые страницы. Их число должно быть рав- но количеству пунктов в области оглавления. Например, первой строкой нашего оглавления является Готовятся к печати. Подго- товим эту страницу и сохраним ее в файле new_books.htm.

9. Создайте и сохраните остальные Web-страницы, необходи-

мые для просмотра информации, представленной в оглавлении.

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

11. В открывшемся диалоговом окне Шаблоны страниц пе- рейдите на вкладку Страницы рамок и дважды щелкните на знач- ке шаблона Объявление и оглавление. Фрейм, созданный с ис-

пользованием этого шаблона, содержит область заголовка, оглавле-

ние и область отображения основной информации (рис. 9.3).

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

13. В поле Адрес открывшегося диалогового окна Добавле- ние гиперссылки (рис. 9.4) укажите название страницы, содержа- щей заголовок, щелкнув на файле banner_f.htm. Затем нажмите кнопку ОК для закрытия окна. Указанная нами в гиперссылке стра- ница разместилась в верхней области фрейма.

Рис. 9.3. Выбранный шаблон фрейма Объявление и оглавление

14. Используя кнопки Задать начальную страницу осталь- ных областей фрейма, поместите в них созданные страницы content_f.htm и main_f.htm.

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

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

Рис. 9.4. Выбор страницы для загрузке во фрейме

15. В области оглавления выделите первый элемент списка и выберите в его контекстном меню команду Гиперссылка.

16. В поле Адрес открывшегося диалогового окна Добавле-

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

формацию по данному вопросу, щелкнув на файле new_books.htm.

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

18. Открывается диалоговое окно Конечная рамка, в области Текущая страница рамок которого отображается структура фрейма. Для указания места загрузки страницы можно использо- вать данную структуру или значения списка Общие объекты. Щелкните мышью в требуемой области структуры. Она окрашива- ется в синий цвет (рис. 9.5).

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

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

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

21. Для сохранения фрейма нажмите кнопку Сохранить на стандартной панели инструментов. В открывшемся диалоговом ок- не Сохранить как задайте наименование файла index.htm и на- жмите кнопку Сохранить.

22. Просмотрите созданный фрейм в обозревателе.

Рис. 9.5. Диалоговое окно Конечная рамка

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

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

1. Открыть диалоговое окно Свойства страницы, щелкнув правой кнопкой мыши в любом месте страницы и выбрав в контек- стном меню команду Свойства страницы.

2. На вкладке Общие нажать кнопку Изменить конечную рамку.

3. В области Текущая страница рамок открывшегося диало-

гового окна Конечная рамка, отображающего структуру фрейма,

выбрать с помощью мыши требуемую область.

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

нечная рамка и Свойства страницы.