Плавающие фреймы

Фреймы, которые размещаются в обычном HTML-документе в пределах тега < BODY > < /BODY > с использованием тега < IFRAME > < /IFRAME >, называются плавающими, его также называют строчным от сокращения английского термина «inline frame». Задание плавающего фрейма аналогично описанию тега < IMG >. Кратко перечислим только допустимые атрибуты тега:

SRC – задает URL-адрес загружаемого файла;

WIDTH, HEIGHT – определяют ширину и высоту плавающего фрейма;

ALIGN – устанавливает выравнивание фрейма относительно окна браузера;

MARGINWIDTH, MARGINHEIGHT, FRAMEBORDER SCROLLING – назначают размеры свободных полей, вывод рамки фрейма и полос прокрутки;

NAME – задает имя фрейма, используемого при определении целевого фрейма.

В отличие от обычных фреймов, размеры плавающего фрейма не могут быть изменены посетителем страницы, поэтому атрибут NORESIZE не входит в число допустимых атрибутов тега < IFRAME >

Пример схемы HTML-документа, содержащего плавающий фрейм, приведен ниже, а его отображение в браузере представлено на рис. 4.9.

Рис. 4.9. HTML-документ с плавающим фреймом

< HTML> < HEAD>

< TITLE> плавающий фрейм

< /TITLE> < /HEAD>

< BODY>

< P> Содержимое основной части документа< /P>

< IFRAME NAME=" plav" SRC=" page2fl4.htm" MARGINWIDTH=" 30"

FRAMEBORDER=" 1" WIDTH=" 200" HEIGHT=" 200" ALIGN=" center" >

< /IFRAME>

< P> Содержимое основной части документа< /P>

< P> Содержимое основной части документа< /P>

< P> Содержимое основной части документа< /P>

< /BODY>

< /HTML>

* * *

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

Работать с фреймами несложно. Для этого вместо < BODY> используется тег < FRAMESET >, внутри которого определяются строки и столбцы фреймов. Каждый из них задается с помощью тега < FRAME >. Кроме того, вы рассмотрели простую и сложную организацию фреймов, познакомились с плавающим фреймом и с его назначением.

Практическое задание

РАЗМЕТКА WEB-СТРАНИЦЫ С ПОМОЩЬЮ ФРЕЙМОВ

1. Разметка web-страницы с использованием фреймов простой организации. Наберите в простом редакторе «Блокнот» структуру гипертекстовой программы.

< HEAD>

< TITLE>

Фреймы простой структуры

< /TITLE>

< /HEAD>

< /HTML>

После закрытия заголовка < /HEAD > вставьте тег < FRAMESET > для создания шести фреймов на странице (две строки и три столбца) – значения атрибутов ROWS и COLSзадайте в процентах. В этом же теге используйте атрибуты задания ширины рамок BORDER и цвет рамок BORDERCOLOR. Сохраните изменения в файле и просмотрите исходный файл в браузере. Есть ли разделительные границы между фреймами? И если нет, то почему?

Затем внутрь тега < FRAMESET> вставьте 6 тегов < FRAME> < /FRAME>, соответственно количеству фреймов. Сохраните файл и просмотрите в браузере. Отметьте, что изменилось сейчас. Задайте значения для атрибута SRС (для каждого фрейма задайте название файла, содержащего страницы page1.htm, page2.htm и т. д., созданные в предыдущих практических заданиях). Сохраните изменения и просмотрите в браузере.

Величину фреймов задайте сначала в относительных единицах, затем задайте в пикселах. Просмотрите разницу при задании этих значений в браузере.

Поэкспериментируйте: задайте различные цвета рамок для каждого фрейма.

2. Разметка web-страницы с использованием фреймов сложной организации. Используйте предыдущую страницу в качестве исходного текста программы. Для этого сначала сохраните его в другом файле, а затем внесите изменения согласно рис. 4.10.

Рис. 4.10. Структура фреймов для второго задания

3. Создание навигации по сайту. Создайте самостоятельно web-страницу, оформленную с использованием фреймов (рис. 4.11).

Рис. 4.11. Фреймовая структура для навигации по сайту

Содержание файла с гиперссылками выводится во фрейме «Гиперссылки». При активизации гиперссылки содержимое вызываемого файла должно открываться во фрейме «Содержание». Для привязки файлов к гиперссылкам используйте готовые страницы из предыдущих практических заданий.

Контрольные вопросы и задания

1. Что такое фрейм?

2. Для чего предназначен фрейм?

3. Какие этапы используются при создании простой организации фреймов?

4. В чем отличие простого HTML-документа от документа с фреймовой организацией?

5. Какие теги используют для оформления фреймов?

6. Какие атрибуты тега < FRAMESET > определяют количество вертикальных и горизонтальных отрезков во фреймовом наборе?

7. Какие атрибуты предназначены для изменения параметров рамок фреймов?

8. Какая существует последовательность для задания параметров фреймов на странице?

9. Какие единицы используются для задания размеров фрейма?

10. Для чего предназначен тег < FRAME>?

11. Для чего используется атрибут NORESIZE тега < FRAME>?

12. Перечислите остальные атрибуты тега < FRAME> и их назначения.

13. Как происходит оформление web-страницы фреймами простой организации?

14. Как происходит оформление web-страницы с использованием сложной организации фреймов?

15. Для чего используются атрибуты NAME и TARGET тега < FRAME>?

16. Перечислите зарезервированные имена фреймов.

17. Что такое целевой и базовый фрейм?

18. Назовите способ задания базового фрейма.

19. Какой фрейм является плавающим?

20. Как и где создается плавающий фрейм?