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

      Комментарии к записи Создание страниц с фреймами отключены

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

Чтобы создать страницу с фреймами, нужно создать новую страницу, выбрать в области задач Другие шаблоны страниц и в открывшемся окне перейти на вкладку Страница рамок, а затем выбрать нужный шаблон. Появится новая страница, разбитая на фреймы в соответствии с выбранным шаблоном. В каждом фрейме будет две кнопки: Задать начальную страницу и Создать страницу. Кнопка Задать начальную страницу позволяет сделать ссылку на уже существующую web-страницу. Кнопка Создать страницу позволяет заполнить фрейм, как новую страницу.

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

Вставка кнопок. Навигация

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

Гиперссылка для кнопки настраивается так же, как и обычная. На вкладке Шрифт можно отформатировать надпись на кнопке и выбрать цвет надписи при наведении курсора и при нажатии на кнопку (текст кнопки меняет цвет при наведении и нажатии; поэтому она и названа «меняющаяся»). На вкладке Рисунок можно настроить параметры рисунка кнопки. Обычно кнопки вставляют в начале или (и) в конце страницы для перехода к предыдущей/следующей странице, для перехода к началу документа, возврата на главную страницу и т.д. В страницы с фреймами кнопки вставляют в раздел с оглавлением, нижний или верхний колонтитулы.

Лабораторная работа № 12 FrontPage. Создание основных элементов WEB-страницы

Цель работы:

— научиться делать разметку страницы с помощью таблиц;

— научиться создавать web-страницы с фреймами;

— научиться вставлять текст и форматировать его;

— научиться вставлять списки и изображения.

Задание

1 Создайте в своем рабочем каталоге папку Мой web-узел.

2 Запустите программу FrontPage. Отобразившуюся новую страницу сохраните в папку Мой web-узел под именем titul.htm. Это будет «титульная» страница вашего сайта.

3 Чтобы разбить страницу на разделы, вставьте в нее таблицу: Таблица-Вставить таблицу. Таблица должна содержать 1 столбец и 2 строки. Размеру границы задайте значение 0. В верхнюю строку таблицы впишите название вашей страницы. Границу второй строки растяните вниз так, чтобы она занимала оставшуюся часть страницы. В нижнюю строку вставьте рисунок: Вставка-Рисунок-Из файла или Вставка-Рисунок-Картинки. Скорректируйте размер рисунка так, чтобы он занимал всю ячейку.

4 Все рисунки, относящиеся к вашей странице, лучше хранить в отдельной папке с названием image. Создайте в папке Мой web-узел соответствующую вложенную папку.

5 Сохраните вашу страницу, выполнив команду Файл-Сохранить все. FrontPage может предложить вам сохранить вставленный рисунок. В этом случае нажмите на кнопку Сменить папку в открывшемся диалоговом окне, и выберите папку image. Если рисунок имеет формат, отличный от GIF, JPEG или PNG, нажмите на кнопку Тип графических файлов и вберите один из предложенных форматов. Сохраните рисунок.

6 Для того чтобы создать новую страницу, размеченную при помощи фреймов, выполните команду Файл-Создать и в области задач выберите Другие шаблоны страниц. В открывшемся диалоговом окне перейдите на вкладку Страница рамок и выберите вариант Колонтитулы и оглавление. Сохраните страницу в свою папку под именем index.htm. Это будет домашняя страница вашего сайта, содержащая заголовок, раздел оглавления и окно для отображения страниц.

7 Щелкните по кнопке Создать страницу в верхнем колонтитуле (верхний фрейм) и впишите туда название вашего сайта. Отформатируйте название по своему усмотрению.

8 Щелкните по кнопке Создать страницу в левом фрейме (оглавление).

9 Щелкните по кнопке Создать страницу в нижнем колонтитуле. Щелкните правой кнопкой мыши, выберите в меню пункт Свойства рамки и в открывшемся окне задайте свойству Высота рамки значение 1. Этот фрейм не понадобится.

10 Щелкните по кнопке Задать начальную страницу в центральном фрейме. В открывшемся окне выберите в разделе Папка каталог с вашим сайтом, а в нем — страницу titul.htm.

11 В левом фрейме напишите слово Содержание, а под ним — три строки: MS FrontPage, Web-узел, HTML; оформите их в виде маркированного списка. Для этого выделите нужные строки и либо выполните команду Формат-Список, либо нажмите соответствующую кнопку на панели Форматирование.

12 Сохраните страницу. FrontPage предложит вам сохранить каждый фрейм как отдельную страницу. Сохраните фреймы в свою папку под именами, например, kolontitul.htm (для верхнего колонтитула), soderzhanie.htm (для содержания), main.htm (для центрального фрейма) и blank.htm (для нижнего колонтитула).

13 Каждому фрейму на странице задайте свой фоновый рисунок. Для этого щелкните на странице правой кнопкой мыши, выберите в меню пункт Свойства страницы, перейдите на вкладку Форматирование, поставьте флажок в разделе Фоновый рисунок и выберите нужный рисунок, нажав кнопку Обзор. Можно также воспользоваться стандартными темами MS Office. Для этого нужно выделить фрейм, выполнить команду Формат-Тема и в области задач выбрать понравившуюся тему. Еще раз сохраните все изменения.

Статьи к прочтению:

HTML для начинающих — #5 — Фрэймы


Похожие статьи: