Практическое занятие. «Microsoft FrontPage: использование фреймов»

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

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

Задание. Создание web-сайта газеты «Школьное время» с применением фреймов.

1. Запустите FrontPage. Выбрав в меню Файл (File) команду Новый (New) > Страница (Page). В появившемся диалоговом окне перейдите на вкладку Страницы фреймов (Frames Pages). Выберете элемент Banner and Contents (шаблон web-сайта из трех фреймов с баннером и панелью навигации). Просмотрите в правой части окна пример структуры страницы и щелкните на кнопке ОК.

В окне редактора FrontPage будет отображена структура из трех фреймов.

В каждой заготовке фрейма в окне редактора отображаются две кнопки: Set Initial Page (Указать страницу для отображения в данном фрейме) и New Page (Новая страница). Если бы у нас имелись заранее подготовленные страницы, то достаточно было бы щелкнуть на кнопке Set Initial Page, а затем в окне Выберите файл (Select File) выбрать нужную папку и файл web-страницы для размещения во фрейме.

2. Так как у нас нет заранее подготовленных страниц, создайте новую страницу в каждом фрейме, щелкнув на кнопке Новая страница (New Page). При этом каждой странице присваивается имя по умолчанию: new_2.htm, new_3.htm, new_4.htm.

Командой Файл (File) > Сохранить (Save) сохраните созданные только что странички в своей папке. Обратите внимание, что операцию сохранения Вам понадобится последовательно выполнить четырежды (три странички, относящиеся к фреймам и главная страница, содержащая все фреймы).

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

Вставьте в этот фрейм таблицу из двух строк и столбцов, выбрав команду Таблица (Table) > Вставить (Insert) > Таблица (Table). В окне Вставка таблицы (Insert Table) задайте следующие параметры: Строк (Rows) – 2, Столбцов (Columns) – 2, Толщина рамки (Border Size) – 0 – и щелкните на кнопке ОК. Введите в правую ячейку в верхней строке таблицы текст Школьное время и выберите на соответствующей панели в списке Стиль (Style) вариант Заголовок 1 (Heading 1).

4. Вставьте в левую верхнюю ячейку таблицы какой-либо рисунок, выбрав Вставка (Insert) > Изображение (Picture) > Из файла (From File). В окне Изображение (Picture) выберите папку и файл изображения и щелкните на кнопке Вставить (Insert). Объедините ячейки в левом столбце, выделив эти ячейки и выбрав команду Таблица (Table) > Объединение ячеек (Merge Cells).

Введите в правую нижнюю клетку информацию о контактах – адрес, телефон, адрес электронной почты.

Задайте тексту заголовка Школьное время динамический эффект, выбрав команду Формат (Format) > Эффекты динамического HTML (Dynamic HTML effects), выберите событие Загрузка (Page Load), эффект Волна (Wave). Закройте панель инструментов Эффекты HTML (DHTML effects).

5. Измените оформление страницы с помощью темы, для чего выберите команду Формат (Format) > Тема (Theme). Чтобы изменение оформления касалось только данной страницы, в диалоговом окне Темы (Themes) установите флажок Выбранная страница (Selected Page), затем в списке тем выберите подходящую тему, например Рисовая бумага (Rice Paper).

6. Выберите для редактирования фрейм в левой части страницы. Введите текст заголовков-ссылок на разделы газеты, например:

Новости

Администрация

Учительская

Переменка

Авторы

Редколлегия

7. Для создания ссылки на web-страницу выделите текст ссылки, например, Новости, и щелкните на кнопке Гиперссылка (Hyperlink). В окне определения параметров гиперссылки щелкните на кнопке Создать новый документ (Create a page and link to the new page) . В появившемся окне Новый (New) выберите шаблон Normal Page и нажмите ОК. результате на экране появилась новая web-страница.

Введите в новую страницу в окне редактора текст, например:

«Новости.

Выпущен первый номер газеты. Приглашаем к сотрудничеству авторов.

Редколлегия»

Сохраните web-страницу, выбрав команду Файл (File) > Сохранить как (Save as). В окне Сохранить как (Save as) введите имя страницы, например, news.htm, и щелкните на кнопке Сохранить (Save).

8. Аналогично создайте ссылки с новыми страницами на остальные заголовки разделов газеты.

9. Для проверки действия созданной web-страницы с фреймами переключите FrontPage в режим Просмотр (Preview).

Обратите внимание, что при начальной загрузке web-страницы правый фрейм остается пустым.

10. Для того чтобы при загрузке web-страницы правый фрейм был заполнен, укажите фрейм и выберите в контекстном меню команду Свойства фрейма (Frame Properties). Щелкнув на кнопке Обзор (Browse) в поле Начальная страница (Initial Page), выберите страницу для отображения в данном фрейме (например, это может быть файл news.htm).

11. Сохраните изменения и, переключив FrontPage в режим Просмотр (Preview), просмотрите изменения в отображении web-страницы.