ЭУМК "Компьютерные сети" - Лабораторная работа №4

Лабораторная работа №4

Тема: Работа с фреймами

ЦЕЛИ:

Приобретение навыков создания фреймов.

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

ТРЕБОВАНИЯ:

прочитать лабораторную работу;

выполнить все упражнения и задания лабораторной работы;

найти и выучить ответы на контрольные вопросы;

для получения зачета по лабораторной работе необходимо:

давать четкие ответы на все контрольные вопросы;

уметь выполнить любое задание из лабораторной работы по просьбе преподавателя.

КРАТКАЯ ТЕОРИЯ

Фрейм (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 страницы.

Стр 1

Стр2

Стр3

Пример а)

Стр 1

Стр2

Стр 3

Пример b)

Стр1

Стр2

Стр3

Пример c)

Замечание. Разбиение страницы на части можно выполнить так же с помощью тэга <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.

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

Что такое HTML-документ?

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

Чем отличается структура HTML-кода фрейма от структуры HTML-документа?

Какое расширение имеет HTML-документ?

Что такое тэг? Каких видов бывают тэги? Назначение атрибутов? Формат записи тэгов?

Как посмотреть HTML-документ? Как просмотреть HTML-код документа, фрейма в окне обозревателя?

Знать назначение тэгов и их атрибутов, которые были использованы в данной лабораторной работе.

Назад                                              Вперёд