Краткая теория

Фрейм (frame) — рамка, область страницы — позволяет разделять экран на несколько областей, в каждой из которых отображается содержимое отдельной страницы или Web-узла.

Для задания фреймов используется парный тег < Frameset> … < /Frameset>, а для их описания — тэг < Frame>.

Для задания расположения и размеров фреймов в тэге < Frameset> используются атрибуты cols (столбцы) и rows (строки).

Дляописания содержания каждой области в тэге < Frame> используется атрибут src=имя_страниц.html

Примеры:

a) < Frameset Cols=«30%, 30%, *» >

< Frame src= “s1.html” >

< Frame src= “s2.html”>

< Frame src= “s3.html” >

< /Frameset>

делит страницу на 3 вертикальные области, отводя на 1 и 2 по 30%, а на 3 – оставшуюся часть. И размещает в каждой части соответственно s1.html, s2.html и s3.html страницы.

b) Если в примере а) заменить Cols на Rows=«30%, 30%, *», то страница будет разделена на 3 горизонтальные области, 1 и 2 по 30%, а на 3 – оставшаяся часть. В каждой части соответственно будут размещены s1.html, s2.html и s3.html страницы.

c) < Frameset Cols= «30%, *» >

< Frame src= “s1.html” >

< Frameset Rows= «50%, 50%» >

< Frame src= “s2.html” >

< Frame src= “s3.html”>

< /Frameset>

< /Frameset>

Страница будет разделена на 2 вертикальные области, отводя на 1 – 30%, и оставшуюся часть на вторую. Вторая область в свою очередь разделена на 2 горизонтальные области, по 50% на каждую часть. В каждой части соответственно будут размещены s1.html, s2.html и s3.html страницы.

Замечание. Разбиение страницы на части можно выполнить так же с помощью тэга < Table> и парного тэга < Iframe> < /Iframe> (организовывает “плавающий” фрейм), внутри которого можно отобразить какой-либо документ или объект.

Другие атрибуты тэга < Frameset>:

• border=n – ширина границы фрейма;
• bordercolor=цвет – цвет границы фрейма.

Другие атрибуты тэга < Frame>:

• noresize – запрет изменения размера фрейма;
• frameborder=yes|no – соответственно оставить границу| убрать границу;
• scrolling=yes|no|auto – соответственно полосы прокрутки всегда присутствуют| полос прокрутки нет| полосы прокрутки присутствуют при необходимости;
• marginwidth=n и marginheight=n – управляют отступом изображения внутри фрейма (n – целое число)
• name=имя_фрейма – позволяет задать фрейму имя, которое затем может использоваться, например при создании гиперссылок.

Связь между фреймами.

Для того чтобы страница, вызванная по гиперссылке, открылась в нужном фрейме, необходимо в тэге < A> в атрибуте target указать имя этого фрейма.

Например, если фрейму, отображающему страницу 2 задать имя «nomber2»:

< Frameset cols= «30%, *» >

< Frame src=s1.html >

< Frame src=s2.html name=nomber2>

< /Frameset>

a в документе s1.html поместить ссылку:

< A href=s3.html target=nomber2> стр3 < /A>

то страница 3 откроется не в первом, а во втором фрейме.

ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

1 задание. Выполните подготовительную работу: создав 3 страницы, для каждой из которых задайте свой цвет фона, заголовок 1 уровня «Страница №…» и произвольный рисунок, сохраните страницы под именами str1.html, str2.html, str3.html.

2 задание. Создайте страницу, состоящую из 3 равных вертикальных областей. В каждой из которых отобразите соответственно содержимое 1, 2 и 3 страниц. Задайте ширину и цвет границ фреймов по желанию. Сохраните ее под именем vert.html.

3 задание. Измените страницу, заменив вертикальное деление нагоризонтальное. Уберите ширину и цвет границ фреймов. В первом фрейме установите запрет на изменение его размера. Сохраните HTML-документ под именем gor.html.

4 задание. Создайте HTML-документ под именем glav.html, состоящий из 2 вертикальных областей (размеры которых относятся, как 1: 3).

В левой области должен отображаться HTML-документc заголовком Оглавление и гиперссылки на 1, 2 и 3 страницы (str1.html, str2.html, str3.html). Гиперссылки, организуйте, таким образом, чтобы страницы 1, 2 и 3 отображались в правой области.

5 задание. Создайте HTML-документ под именем str4.html: задайте заголовок 1 уровня «Страница №…» и определение «Фрейм (frame) — рамка, область страницы — позволяет разделять экран на несколько областей, в каждой из которых отображается содержимое отдельной страницы или Web-узла.».

6 задание. Создайте HTML-документ под именем plav.html: задайте свой цвет фона, отцентрированныйзаголовок 1 уровня «Пример плавающего фрейма» и отцентрированный “плавающий” фрейм (шириной – 30%, высотой – 200 пиксель), отображающий содержимое страницы 4 (str4.html).

7 задание. Создайте HTML-документ под именем ram.html, состоящий из 3 равных вертикальных областей, третью область разделите на две равные горизонтальные области. В каждой из которых отобразите соответственно содержимое 1, 2, 3 и 4 страниц.

8 задание. Продемонстрируйте преподавателю результаты работы: vert.html, gor.html, oglav.html, glav.html, plav.html, ram.html.

КОНТРОЛЬНЫЕ ВОПРОСЫ:

1. Что такоеHTML-документ?
2. Что такое фрейм?
3. Чем отличается структура HTML-кода фрейма от структуры HTML-документа?
4. Какое расширение имеет HTML-документ?
5. Что такое тэг? Каких видов бывают тэги? Назначение атрибутов? Формат записи тэгов?
6. Как посмотреть HTML-документ? Как просмотреть HTML-код документа, фрейма в окне обозревателя?
7. Знать назначение тэгов и их атрибутов, которые были использованы в данной лабораторной работе.