Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Laboratornaya_po_freymam / описание лаб.раб.фреймы+++.docx
Скачиваний:
31
Добавлен:
02.04.2015
Размер:
422.57 Кб
Скачать

Лабораторная работа «Оформление веб-сайта с использованием фреймовой структуры»

  1. Понятие и назначение фреймов

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

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

В окно левого фрейма обычно загружается файл с меню web страницы или программы, а в окне правого фрейма выводится соответствующий выбранному пункту меню документ. Примечательно, что структура фреймов позволяет не подгружать в левое окно повторно файл с меню при открытии нового документа в окне правого фрейма. В этом состоит основное преимущество использования фреймов в Html.

  1. Описание фреймовой структуры страницы сайта

Согласно стандарту Html 4.01, для задания фреймовой структуры используются три элемента — Frame, Frameset и Noframes.

Iframe — встроенный фрейм в стандарте Html 5.

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

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

Документ frameset

Документ frameset описывает общую структуру окна, разделенного на фреймы. Это документ HTML, в котором теги <frameset> заменяют теги <body>. Тег <frameset> описывает число, расположение и размеры фреймов компонентов. Также внутри тега frameset находится два или более тегов <frame/>, которые идентифицируют и характеризуют фреймы и определяют исходные документы, заполняющие фреймы.

Тег <frameset>

Контейнерный тег <frameset> делит окно браузера на отдельные фреймы. Общий формат тега <frameset>:

<frameset

cols="n1[%],n2[%]"

rows="n1[%],n2[%]"

frameborder="1|0"

bordercolor="color"

framespacing="n"

> ...

</frameset>

  1. Разбиение окна браузера на фреймы

Атрибуты cols и rows определяют компоновку фреймов в окне браузера. Cols используется для деления окна вертикально на два или более количество фреймов, а rows - для деления окна горизонтально на два или большее количество фреймов. Тег <frameset> может определять cols и rows.

Атрибут cols задает число и ширину фреймов в процентах от ширины окна браузера или как определенное число пикселей в ширину. Rows определяет число и высоту фреймов в процентах от высоты окна браузера или как определенное число пикселей в высоту. Обычно лучше использовать проценты для выражения размеров фреймов, так как они остаются пропорциональными, когда пользователь изменяет размер окна браузера.

Пример 1. Разбиение окна на два фрейма по вертикали:

<html>

<head>

<title>tourism.ru</title>

</head>

 <frameset cols="25%,75%">

 <frame src="menu.html">

<frame src="main.html">

<noframes> Ваш браузер не поддерживает фреймы </noframes>

</frameset>

</html>

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

Третий элемент структуры фреймов — Noframes. Тег Noframes парный и позволяет написать внутри текст, который будет обработан браузером и отображен на web странице только в том случае, если браузер не поддерживает фреймы. Например, в случае использования браузера для мобильных устройств.

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

Элемент Frameset, используемый в структуре с фреймами вместо тега Body, занимает всю область просмотра, и уже внутри неё создаются окна фреймов с помощью элементов Frame.

Разделение всей области просмотра между несколькими окнами фреймов осуществляется с помощью добавления атрибутов к элементу Frameset. У тега Frameset два атрибута — Cols и Rows. Cols задает разделение большого окна на вертикальные фреймы или же колонки, а Rows — на горизонтальные фреймы или строки.

В качестве значений атрибутов Cols и Rows Html тега Frameset выступают числа, проставленные через запятую без пробелов. Эти числа задают пропорции тех фреймов, которые получатся в результате. Сколько будет написано чисел через запятую в атрибуте Cols или в атрибуте Rows, столько фреймов получится.

Пример разбиения окна на три вертикальных фрейма в пропорции 2:5:3.

<frameset cols="20%,50%,30%">

Сколько фреймов формируем, столько элементов Frame вводится между открывающим и закрывающим тегом Frameset три элемента Frame, хотя бы и без указания дополнительных атрибутов:

Пример 2.

<html>

<head>

<title>tourism.ru</title>

</head>

<frameset cols="20%,50%,30%">

<frame>

<frame>

<frame>

</frameset>

</html>

Описанная фреймовая структура будет выглядеть так:

В данном примере размеры окон фреймов заданы в процентном соотношении от ширины области просмотра в случае атрибута Cols, или от ее высоты (Rows). При изменении области просмотра процентное соотношение между размерами фреймов будет сохраняться. Вместо процентов можно использовать числа, означающие ширину или высоту фреймов в пикселах.

Третий вариант пропорционального разделения пространства для фреймов вводится через звездочку «*» или звездочку с цифрой впереди, например, «5*» (для пяти равных фреймов).

Пример 3.

Разделим области просмотра на горизонтальные фреймы с помощью атрибута Rows:

<frameset rows="200,500,*">

Высота первой строки взята в 200 пикселей, второй — 500 пикселей, а третья строка окна фрейма будет занимать все оставшееся пространство по высоте, т.к. в качестве ее размера использовалась «*».

Самостоятельно посмотрите, что получится, если использовать значение «*» с цифрой для деления в пропорции:

<frameset rows="2*,100,4*">

Задание 1. Опишите размерность полученных в результате фреймов.

Можно сочетать способы задания размеров окон фреймов в одном атрибуте:

<frameset cols="10%,100,4*,3*,2*">

В результате мы получим первую колонку фрейма шириной в десять процентов от всей доступной области, вторую — 100 пикселей, а три оставшихся колонки с фреймами будут иметь ширину в пропорциях четыре, три и две девятых от оставшегося пространства по ширине. Вот так вот все просто и наглядно.

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

Пример 4.

<html>

<head>

</head>

<frameset cols="20%,80%">

<frame>

 <frameset rows="10%,*" >

<frame>

<frame>

</frameset>

</frameset>

</html>

Разбиваем с помощью тега «frameset cols=»20%,80%"« все доступное пространство на две колонки по вертикали и задаем тегом „frame“ содержимое правой колонки, а вот вместо того, что добавить элемент „frame“ для левой колонки, мы открываем новый элемент „frameset rows=“10%,*»" и уже с помощью него разбиваем правую колонку на две строки с фреймами, содержимое которых задаем с помощью двух тегов «frame», после чего закрываем оба контейнера «frameset».

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