Создание web-узла с фреймовой структурой

Цель: формирование умений работы в визуальном редакторе Front Page, создание Web-  узла, имеющего фреймовую структуру.

Время работы: один академический час

Форма занятия: практическая работа

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

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

1. Скопировать в свою папку папку с файлами под названием «Благовещенск».

2. Загрузить FrontPage (дальше FP).

3.Создать одностраничный веб-узел «Благовещенск», указав путь в свою папку:

п.м. Файл - Создать - Одностраничный веб-узел

На вкладке Общие окна Шаблоны веб-узлов нажать кнопку Обзор и задать путь к папке Благовещенск.

4. Переместить картинки в узле «Благовещенск» из папки PIC в папку Image, а текстовые файлы – в папку Privat, пустую папку PIC удалить.

Создадим веб-страницу index.htm, имеющую фреймовую структуру.

Для этого:

5. Удалим страницу index.htm и создадим новую, через шаблоны страниц:

Для организации фреймовой структуры необходимо

Выполнить команду Файл→Создать и выбрать команду Другие шаблоны страниц… (1) из области задач Создание.

В открывшемся диалоговом окне Шаблоны страниц, выбрать вкладку Страница рамок (2), на которой показаны шаблоны (3) web-страниц c фреймовой структурой, входящие в состав FrontPage 2003.

Выделить наиболее подходящий шаблон (например, Объявление и Оглавление) и нажать кнопку OK.

Окно новой web-страницы фреймов (рис.2) будет разбито на части в соответствии с выбранной структурой.

6. Эту страницу необходимо сохранить (Файл→Сохранить) в папку web-узла «Благовещенск»  с именем index.htm.

Полученные 3 фрейма (области) в дальнейшем будем называть верхним, левым и правым.

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

1) Кнопка Задать начальную страницу… (2) позволяет выбрать уже готовую web-страницу сайта в окне Добавление гиперссылки.

2) Кнопка Создать страницу (3) загружает во фрейм новую пустую web-страницу, редактирование которой может быть выполнено обычным образом. Если часть фреймов заполняется с помощью этой кнопки, то при сохранении страницы фреймов (Файл→Сохранить) отдельно сохраняется каждая новая web-страница (имена задаются обязательно латинскими буквами, цифрами и разрешенными символами).

При работе со страницей фреймов на панели кнопок представления появляется еще одна кнопка Без рамок (4). В этом режиме редактируется содержимое, которое будет отображаться в браузере, если он не поддерживает показ фреймов.

7. Нажать кнопку (3) «Создать страницу» (см. рис.2) в верхнем фрейме.

Создаем на ней таблицу 1×2. В первую ячейку вставляем картинку-логотип, во второй ячейке пишем название сайта «Благовещенск старый и новый». Оформляем заголовок с помощью WordArt.  Делаем невидимыми границы таблицы.

Сохраняем веб-страницу в папке Privat под именем zagolovok.htm. Все внедренные объекты (картинки) сохранять в папке Image.

8. Открыть файл Содержание.doc из папки Privat. Выполнить форматирование текста, удалить маркеры списка, выровнять текст по левому краю. Скопировать полученный текст в буфер обмена.

9. В папке Privat создать новую веб-страницу  (активизировать папку  Privat →вызвать контекстное меню →Создать →пустая страница) под именем menu.htm,  вставить в нее текст из буфера обмена. Сохранить страницу.

10. Нажимаем кнопку Задать начальную страницу в левом фрейме и задаем имя файла menu.htm из папки Privat.

11. Нажать кнопку «Создать страницу»  в правом фрейме. Вставляем приветственный текст на страницу и картинку title.htm. Сохраняем веб-страницу в папке Privat под именем content.htm. Все внедренные объекты (картинки) сохранять в папке Image.

12. Сохраняем весь файл index.htm. Готовая web-страница index.htm представлена на Рис.3

13. Создать в папке Privat веб-страницы amur.htm, shop.htm….. Текст на страницы брать из документов Word.

14. Вставить на веб-страницы

картинки подходящие по содержанию (Вставка →Рисунок → Из файла);

задать фон (Формат → Фон; в окне Свойства страницы на вкладке Форматирование выбрать Фоновый рисунок и задать его имя).

15. Из Содержания создать гиперссылки на соответствующие страницы (Вставка →Гиперссылка). Проверить работоспособность гиперссылок.

16. Пункты меню можно оформить в виде кнопок (Вставка →Меняющаяся кнопка).  

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

Результат представлен на следующем рисунке:

17. Оформить страницы: выполнить форматирование, задать фон. Удалить из папки Privat все текстовые страницы.

18. Сохранить все веб-страницы.

19.  Протестировать узел в браузере.