Разбить окно просмотра браузера на несколько прямоугольных подобластей

Обновлено: 07.07.2024

Фреймы позволяют разбивать окно просмотра браузера на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фрэймами пи необходимости можно организовать взаимодействие заключающиеся в том, что выбор ссылки в одном из фреймов может привести к загрузке документа в другой фрейм. При создании страниц с фреймами разрабатываются несколько HTML-файлов. Документы разкладки (layout), используются для создания структуры Web-страниц, то есть разделения их на несколько областей. Документы содержания (content) предназначены для заполнения информацией каждой из областей.

Сфера применения фреймов.

Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:

при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;

для расположения в определённом месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания подобластей экрана.

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

Приведённый список не исчерпывает все возможные случаи, где можно применить фреймы, а носит рекомендательный характер.

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

Итак, как же создать Web-страницу с фреймами? Сначала необходимо продумать разбиение экрана на области. Вторым этапом является подготовка HTML-файлов для каждой области. Они создаются по тем же правилам, что и другие гипертекстовые документы. Нужно только учитывать размер области, в которой будет демонстрироваться каждый из них.

Тэг <FRAMESET> .

Фреймы определяются в структуре <FRAMESET> , которая используется для страниц, содержащих фреймы, вместо раздела <BODY> обычного документа. Web-страницы составленные из фреймов, не могут содержать раздел <BODY> в своём HTML-коде. В свою очередь, страницы с разделом <BODY> не могут использовать фреймы.

Контейнер из тэгов <FRAMESET> и </FRAMESET> обрамляет каждый блок определений фрэйма. Внутри контейнера <FRAMESET> могут содержаться только тэги <FRAME> и вложенные тэги <FRAMESET> .

Тэг <FRAMESET> имеет два параметра: rows и cols . Горизонтальное деление экрана задаётся при помощи атрибута rows , а вертикальное - при помощи атрибута cols . Значение атрибута могут быть выражены в пикселах или процентах. Кроме того используется симвод * , для обозначения оставшейся части экрана.
Приведём несколько примеров:

Тэг <FRAME> .

Тэг <FRAME> определяет одиночный фрейм. Он должен располагаться внутри пары тэгов <FRAMESET> и </FRAMESET> . Этот тэг не является контейнером и в отличии от <FRAMESET> не имеет завершающего тэга. Всё определение одиночного фрейма выполняется одной строчкой HTML-кода.

Тэг <FRAME> имеет шесть параметров: src , name , marginwidth , marginheight , scrolling и noresize .

На практике в тэге <FRAME> редко используются одновременно все параметры. Наиболее важный праметр - scr (сокращение от слова source). Довольно часто задается единственный параметр src . Например:

Значение параметра src определяет URL-адрес документа, который будет загружён изначально в данный фрейм. Обычно в качестве такого адреса записывается имя HTML-файла, расположенного в том же самом каталоге, что и основной документ. Тогда строка определения фрейма будет выглядеть, например, так:

Конечно, в качестве значения scr может быть задан любой допустимый URL-адрес.

Параметр name определяет имя фрейма, которое может использоваться для ссылки к данному фрейму. Обычно ссылка задаётся из другого фрейма, располагающегося на той же самой странице. Например:

<FRAME src="http://webhtm.narod.ru/sample.htm" name="frame_1"">

Такая запись создаёт фрейм с именем "frame_1" , на который может быть выполнена ссылка. Например:

<A href="other.htm" target="frame_1"> Кликните здесь для загрузки документа other.htm во фрейм с именем frame_1 </a>

Обратите внимание на параметр target , который ссылается на имя фрейма. Если для фрейма не задано имя, то будет создан фрейм без имени, и не будет возможности использовать ссылки на него из другого фрейма. Имена фреймов должны начинаться с алфавитно-цифрового символа.

Параметры marginwidth и marginheight дают возможность устанавливать ширину полей фрейма. Например:

<FRAME src="http://webhtm.narod.ru/sample.htm" marginwidth="5" marginheight="7">

Данный фрейм имеет поля сверху и снизу по 5 пикселов, а слева и справа по 7 пикселов. Не забудьте, что здесь идёт речь о полях, а не о рамках. Параметры marginwidth и marginheight определяют пространство внутри фрейма, в пределах которого не будет располагаться никакая информация. Минимально допустимое значение этих параметров равно единице.

Для фреймов будут автоматически создаваться и отображаться полосы прокрутки, если содержимое фрейма не помещается полностью в отведённом пространстве. Иногда это нарушает дизайн страницы, поэтому было бы удобно иметь возможность управлять отображением полос прокрутки. Для этих целей используется параметр scrolling . Форма записи:

<FRAME src="http://webhtm.narod.ru/sample.htm" scrolling="yes|no|auto">

Параметр scrolling может принимать три значения: yes , no или auto . Значение auto действует также, как и в случае отсутствия параметра scrolling . Значение yes вызывает появление полос прокрутки вне зависимости от необходимости этого, а no - запрещает их появление.

Обычно пользователь может изменять размер фреймов при просмотре страницы. Если установить курсор мыши на рамки фрейма, то курсор примет форму, указывающую на возможность изменения размеров, и позволит выполнить перемещение рамки в нужное место. Это иногда нарушает структуру красиво спроектированных фреймов. Для предотвращения возможности изменения пользователем размера фреймов следует воспользоваться параметром noresize . Этот параметр не требует никаких значений. Естественно, когда задан параметр noresize для одного из фреймов, то размер любого из смежных фреймов также не сможет быть изменён.

Тэг <NOFRAMES> .

<NOFRAMES>
<P> Для просмотра этой страницы необходим, браузер
поддерживающий фреймы </p>
Вы можете просмотреть
<A href="без_фреймов.htm"> упрощенную версию </a> страницы
</NOFRAMES>

Разумеется, браузеры поддерживающие фреймы не станут воспроизводить этот код.

Пример страницы с фрэймами.

Создадим станицу разбитую на две области по горизонтали. Верхняя часть будет занимать 15% экрана, нижняя чать все остальное пространство. В верхнюю область загрузим эту страницу , а внижнюю фрагмент моего сайта CattynPlus - всё про кошек.

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб сайтов под "ключ".

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

Веб-инструмент

Веб-инструмент

Веб-мастерская

Веб-мастерская

Разработка сайтов под ключ

Веб-услуги

Веб-графика

Веб-графика

Обучающие программы для веб-разработчиков

Веб-ресурсы

Google

Посмотрите в Google

Подписаться на сайт

Подпишитесь на получение самых последних новостей и статей, с уведомлением по E-mail.

Опрос

Опрос

Фреймы. Разделение окна веб-браузера на несколько областей

Фреймы. Разделение окна веб-браузера на несколько областей

Фреймы позволяют разбить окно веб-браузера на несколько прямоугольных областей, в каждую из которых можно загрузить отдельный HTML-документ.

Разделение окна веб-браузера на несколько областей

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

Создадим веб-страницу с такой структурой. Для этого создадим 5 файлов:

  • 93.html — заголовок веб-страницы;
  • 94.html — панель навигации;
  • 95.html — содержание 1 главы;
  • 96.html — содержание 2 главы;
  • 97.html — HTML-документ описывающий фреймовую структуру.
HTML-документ, содержащий заголовок (93.html)

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Заголовок</title>
</head>

HTML-документ, содержащий панель навигации (94.html)

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Панель навигации</title>
</head>

HTML-документ содержащий основное содержание главы1 (95.html)

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Глава1</title>
</head>

HTML-документ содержащий основное содержание главы2 (96.html)

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Глава2</title>
</head>

HTML-документ , описывающий фреймовую структуру (97.html)

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Пример использования фреймов</title>
</head>

<frameset rows= "100 , *" >
<frame src= "93.html" scrolling= "no" >
<frameset cols= "20% , 80%" >
<frame src= "94.html" >
<frame src= "95.html" name= "charter" >
</frameset>
</frameset>
<noframes>
Ваш веб - браузер не отражает фреймы
</noframes>
</html>

Все созданные файлы сохраним в одной папке. Откроем файл 97.html .

В окне веб-браузера это будет выглядеть ТАК.

Окно разделено на три прямоугольные области. В верхней части окна находится заголовок. В нижней — расположена панель навигации (слева) и основная часть документа (справа). При переходе по ссылкам содержимое основной части меняется, а остальные остаются неизменными. Если теперь посмотреть HTML-код документа ( Вид > Просмотр HTML-кода ), то мы увидим только код структуры веб-страницы, не исходный код каждого из HTML-документов. Иными словами, будет отображен исходный код файла 97.html . Чтобы увидеть исходный код заголовка ( файл 93.html ), необходимо правой кнопкой мыши щелкнуть внутри области, содержащей заголовок. В появившемся контекстном меню нужно выбрать пункт Просмотр HTML-кода. Чтобы посмотреть исходный код файла 94.html , необходимо правой кнопкой мыши щелкнуть по области, содержащей оглавление и т.д.

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

Структура HTML-документа, содержащего фреймы

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

Структура HTML-документа с фреймами

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Заголовок страницы</title>
</head>

<frameset rows= "100 , *" >
<frame>
<frameset cols= "20% , 80%" >
<frame>
<frame>
</frameset>
</frameset>
<noframes>
Ваш веб - браузер не отражает фреймы
</noframes>
</html>

Как и в обычном HTML-документе, весь код расположен между тегами <html> и </html> , а в разделе <head> и </he ad> располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами отсутствует раздел <body> , отсутствует содержимое страницы, а присутствуют только теги, служащие для определения фреймовой структуры. Иными словами, документ с фреймами не может содержать раздела <body> и наоборот, обычный HTML-документ не может содержать фреймовую структуру.

Вместо тега <body> применяется парный тег <frameset> , описывающий фреймовую структуру. Каждое отдельное окно описывается тегом <frame> . Если веб-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes> . Рассмотрим эти теги подробно.

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

Парный тег <frameset> описывает фреймовую структуру. Внутри тегов <frameset> и </frameset> могут содержаться только теги <frame> или другой набор фреймов, описанный тегами <frameset> и </frameset> . Тег <frameset> имеет следующие параметры:

    rows — описывает разбиение на строки;

В качестве значений параметров rows и cols указываются размеры фреймов. Должно быть указано как минимум два значения. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или процентах:

Кроме того, в качестве ширины или высоты может быть указана звездочка (*) , которая означает, что под фрейм нужно отвести все оставшееся пространство:

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

<frameset rows="100, *" bordercolor = "red">

    yes — граница отображается (значение по умолчанию);

<frameset rows="100, *" frameborder = "yes">

<frameset rows="100, *" frameborder = "no">

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

Описание отдельных областей

Тег <frame> описывает одиночный фрейм и не имеет закрывающего тега. Он располагается между тегами <frameset> и </frameset> и имеет следующие параметры:

    src — определяет URL-адрес документа, который должен быть загружен во фрейм. Может быть указан абсолютный или относительный URL-адрес;

<frame src="http://sevidi.ru/html/95.html" name="charter">

    auto — полосы отображаются, только если содержимое не помещается во фрейме (значение по умолчанию);

<frame src="http://sevidi.ru/html/95.html" name="charter" scrolling ="auto">

<frame src="http://sevidi.ru/html/95.html" name="charter" scrolling ="yes">

<frame src="http://sevidi.ru/html/95.html" name="charter" scrolling ="no" >

<frame src="http://sevidi.ru/html/95.html" name="charter" marginwidth = "5">

<frame src="http://sevidi.ru/html/95.html" name="charter" marginwidth = "5" marginheight ="5">

<frame src="http://sevidi.ru/html/95.html" name="charter" bordercolor = "red">

    yes — граница отображается (по умолчанию);

<frame src="http://sevidi.ru/html/95.html" name="charter" frameborder = "yes">

<frame src="http://sevidi.ru/html/95.html" name="charter" frameborder = "no">

<frame src="http://sevidi.ru/html/95.html" name="charter" scrolling ="no" noresize>

Тег noframes

Если веб-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes> . В противном случае содержимое этих тегов будет проигнорировано.

Ваш веб-браузер не отражает фреймы

Загрузка документа в определенный фрейм

    _blank — документ будет загружен в новом окне веб-браузера;

<a href = "filel.html" target = "_blank">Текст ссылки</a>

<a href = "filel.html" target = "_self">Текст ссылки</a>

<a href = "filel.html" target = "_top">Текст ссылки</a>

<a href = "filel.html" target = "_parent">Текст ссылки</a>

Если нужно загрузить документ во фрейм с именем charter , то ссылка будет такой:

<a href = "filel.html" target = "charter">Текст ссылки</a>

Тег iframe. Добавление фрейма в обычный документ

С помощью парного тега <iframe> можно вставлять фреймы в обычный HTML-документ. Если тег <iframe> не поддерживается, то будет выведен текст между тегами <iframe> и </iframe> . Иногда такие фреймы называют плавающими. Тег <iframe> имеет следующие параметры:

    src —определяет URL-адрес документа, который должен быть загружен во фрейм. Может быть указан абсолютный или относительный URL-адрес;

<iframe srs = "http//sevidi.ru/html/htmtest/90.html">

<iframe src = "html11.php">

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Пример применения плавающих фреймов</title>
</head>

В окне веб-браузера это будет выглядеть ТАК.

<iframe src = "htmpage10.php " name="charter">

    auto — полосы отображаются, только если содержимое не помещается во фрейме (значение по умолчанию);

<iframe src = "htmpage10.php " name="charter" scrolling >

<iframe src = "htmpage10.php " name="charter" scrolling = "yes">

<iframe src = "htmpage10.php " name="charter" scrolling = "no ">

<iframe src = "htmpage10.php " name="charter" marginwidth = "5" marginheight = "5">

    yes (или 1) — граница отображается;

<iframe src = "htmpage10.php " name="charter" frameborder = "yes">

<iframe src = "htmpage10.php " name="charter" frameborder = "no">

<iframe src = "htmpage10.php " name="charter" frameborder = "yes" border= "2">

<iframe src = "htmpage10.php " name="charter" width ="200" height ="200">

<iframe src = "htmpage10.php " name="charter" vspace = "5" hspace = "10">

    left — фрейм выравнивается по левому краю, текст обтекает фрейм справа;

<iframe src = "htmpage10.php " name="charter" align ="left">

<iframe src = "htmpage10.php " name="charter" align ="right">

<iframe src = "htmpage10.php " name="charter" align ="center">

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Пример применения плавающих фреймов</title>
</head>

<body>
<h1 align= "center" >Название документа</h1>
<br>
< if rame src= "../html11.php" name= "chapter" width= "900" height= "300" align= "right" scrolling= "auto" >
Ваш браузер не отображает фреймы
</ if rame>
<h2>Оглавление</h2>
<ul>
<li><a href= "../html10.php" target= "chapter" >Таблицы</a></li>
<li><a href= "../html11.php" target= "chapter" >Разметка страницы</a></li>
</ul>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

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

Очень часто тег <iframe> используется в ходе сетей обмена баннерами и коде рекламных сетей. В других целях использование тега очень ограниченно из-за отсутствия поддержки большинством веб-браузеров.

Форум Приднестровской поддержки CMS XOOPS.

По ссылке вы можете скачать последнюю версию CMS XOOPS. А так же прочитать инструкции по установке XOOPS и модулей

По данным ссылкам можно скачать модули нашей разработки.

Модуль инструкций. Ознакомьтесь с установкой XOOPS. C начальными познаниями по HTML,CSS, JS, PHP и др.

Приднестровская поддержка XOOPS

10.1. Разделение окна Web-браузера на несколько областей 10.1. Разделение окна Web-браузера на несколько областей

Обычно заголовок и панель навигации для всех страниц сайта содержат одну и ту же информацию, а изменяется только основное содержание страниц. С помощью фреймовой структуры можно заголовок поместить в одно окно, панель навигации — во второе, а основное содержание страницы — в третье. Это позволит, оставляя в неизменном состоянии два первых окна, изменять содержание третьего.
Попробуем создать Web-страницу с такой структурой. Для этого создадим 5 файлов:
- doc1.html (листинг 11) — заголовок Web-страницы;
- doc2.html (листинг 12) — панель навигации;
- chapter1 .html (листинг 13) — содержание главы 1;

- chapter2.html (листинг 14) — содержание главы 2;
- test.html (листинг 15) — HTML-документ, описывающий фреймовую структуру.

Листинг 11. HTML-документ, содержащий заголовок (doc1.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict,dtd">
<html>
<head>
<title> Заголовок </title>
<meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251" >
</head>
<body>
<h1> Заголовок </h1>
</body>
</html>

Листинг 12. HTML-документ, содержащий панель навигации (doc2.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Панель навигации </title>
<meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251" >
</head>
<body>
<h3> Оглавление </h3>
<ul>
<li><a href = "chapterl.html" target = "chapter" > Глава l </a></li>
<li><a href = "chapter2.html" target = "chapter" >Глава 2 </a></li>
</ul>
</body>
</html>

Листинг 13. HTML-документ, в котором находится основное содержание главы 1 (chapter1.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict,dtd">
<html>
<head>
<title> Глава l </title>
<meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251" >
</head>
<body>
<h1> Глава l </h1>
<p> Содержание главы 1 </p>
</body>
</html>

Листинг 14. HTML-документ, в котором находится основное содержание главы 2 (chapter2.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict,dtd">
<html>
<head>
<title> Глава 2 </title>
<meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251" >
</head>
<body>
<h1> Глава 2 </h1>
<p> Содержание главы 2 </p>
</body>
</html>

Листинг 15. HTML-документ, описывающий фреймовую структуру (test.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict,dtd">
<html>
<head>
<title> Пример использования фpeймoв </title>
<meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251" >
</head>
<frameset rows = "100, *" >
<frame src = "doc1.html" scrolling = "no" >
<frameset cols = "20%, 80%">
<frame src = "doc2.html" >
<frame src = "chapter1.html" name = "chapter" >
</frameset>
<noframes>
<p> Ваш Web-браузер не отображает фреймы </p>
</noframes>
</frameset>
</html>

Все созданные файлы сохраним в одной папке. Затем в Web-браузере откроем файл test.html . Итак, окно разделено на три прямоугольные области. В верхней части окна находится заголовок. В нижней части окна расположены панель навигации (слева) и основная часть документа (справа). При переходе по ссылкам содержимое основной части меняется, а остальные остаются неизменными.
Теперь попробуем изменить цвет фона заголовка. Для этого необходимо отобразить исходный код Web-страницы.
Как нам уже известно, отобразить исходный код обычной Web-страницы можно тремя способами:
- в меню Вид выбираем пункт Просмотр HTML-кода;
- правой кнопкой мыши щелкаем в любом месте окна Web-браузера. В появившемся контекстном меню выбираем пункт Просмотр HTML-кода;
- открываем файл, содержащий исходный код, с помощью Блокнота или другого текстового редактора.

Если документ содержит фреймы, результаты первых двух действий будут разными. Первый способ отобразит только код структуры Web-страницы, а не исходный код каждого из HTML-документов. Иными словами, будет отображен исходный код файла test.html . Второй способ позволяет отобразить код лишь одного HTML-документа, а от места щелчка зависит, код какого HTML-документа будет отображен. В нашем случае для отображения исходного кода файла заголовка ( doc1.html ) необходимо правой кнопкой мыши щелкнуть внутри области, содержащей заголовок. В появившемся контекстном меню нужно выбрать пункт Просмотр HTML-кода.

Заменяем строчку
<body>
на

Слово «frame» обозначает рамку, кадр. С помощью фреймов пространство окна браузера делится на независимые разделы, в которых можно отобразить различную информацию. Удобно использовать фреймы при необходимости отображения на экране данных из различных источников.

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

Сферы применения фреймов

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

Выбор фреймовой структуры представления информации на WWW оправдывается:

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

Ниже на рисунке представлена фреймовая структура окна браузера HTML-страницы.

Готовые работы на аналогичную тему

Получить выполненную работу или консультацию специалиста по вашему учебному проекту Узнать стоимость

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

Фреймы по своей сути схожи с таблицами, так как с помощью обоих осуществляется разбиение окна просмотра браузера на прямоугольные области с расположенной в них информацией. Однако фреймы позволяют не только форматировать страницы документа, но и организовывать взаимодействие между ними. Принципиально фреймы и таблицы различаются тем, что каждому фрейму соответствует отдельный HTML-документ, а содержимое всех ячеек таблицы является частью одного документа. Помимо этого, отображаемая во фрейме страница может прокручиваться при просмотре независимо от других. Каждый фрейм представляет собой своеобразный отдельный мини-браузер. Таблицы же в отличии от фреймов, которые всегда полностью представлены на экране, зачастую не могут полностью помещаться в окне и просматриваются только по частям. Поэтому можно отметить, что в HTML-таблицах общее число ячеек не ограничено и иногда достигает нескольких сотен, то число фреймов в документе составляет обычно нескольких единиц.

Создание фреймов

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

Дескриптором формируются наборы фреймов, разбивающие пространства окон на строки и столбцы. Затем задаются значения высоты и ширины всех строк и столбцов в процентном отношении к текущим габаритам окна браузера, пикселях или в виде звездочки. Символ звездочки указывает на то, что размеры фреймов зависят от габаритов других фреймов страницы.

Дескриптором определяется структура и содержимое конкретного фрейма.

Ниже приведен пример кода страницы.

Пример работы с фреймами

Достоинства и недостатки фреймов

К достоинствам фреймов можно отнести то, что:

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

К недостаткам фреймов можно отнести:

  • их главное достоинство (отображение информации в одном окне), поскольку доступная область Web-страницы в связи с этим становится значительно меньше;
  • правильный выбор размера фрейма при его создании часто затруднителен, поскольку пользователю приходится постоянно пролистывать фрейм, используя полосы прокрутки;
  • у мониторов с низким разрешением экрана объем видимой информации значительно меньше;
  • многие поисковые системы и каталоги отказывают в регистрации страницам, использующим фреймы.

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

Полосы прокрутки фреймов

По умолчанию браузер отобразит полосы прокрутки только, когда информация не будет помещаться в размерах фрейма. Для этого атрибуту SCROLLING присваивается одно из значений yes (no), что позволяет браузеру всегда скрывать полосы прокрутки или же постоянно отображать их. Скрытие полос прокрутки позволяет увеличить размеры видимой области фрейма. В тоже время, если данные не будут помещаться в окне, то они станут недоступными для пользователя.

Изменение границ фреймов

Изменение границ фрейма может быть запрещено, это делается с помощью атрибута NORESIZE. Данный атрибут удобно использовать, когда пользователю нужно запретить изменять исходную компоновку страницы. По умолчанию пользователю предоставляется возможность перемещения границ фрейма по его усмотрению, он может задать новые размеры объекта в целях улучшения просмотра определенного фрагмента данных. В случаях, когда фреймы не имеют видимых границ, это повлечет за собой автоматический запрет на изменение их размеров. С помощью атрибута BORDER тега можно изменить толщину линий обрамления фрейма. По умолчанию фрейм заключается браузером в рамку серого цвета и толщиной 6 пикселей. Атрибут BORDERCOLOR позволяет изменить цвет рамки. Атрибут FRAMEBORDER позволяет скрыть границы фрейма.

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

С помощью атрибута MARGINWIDTH задается ширина левого и правого поля.

А атрибутом MARGINHEIGHT определяется высота верхнего и нижнего поля.

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

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

Плавающие фреймы представляют собой часть Web-страницы и не требуют построения отдельной страницы с их описанием. Для создания таких фреймов используется тег . Атрибутом NAME данного тега задается имя плавающего фрейма, которое в дальнейшем можно использовать в определении гиперссылки, открывающую в этом фрейме соответствующую страницу. Атрибуты WIDTH и HEIGHT задают размеры плавающего фрейма, поскольку у пользователя нет возможности изменить их самостоятельно.

Читайте также: