Плавающие фреймы. Пример использования концепции плавающих фреймов. Пример: Убираем границу между фреймами
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами
и
, а в контейнере
располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега
применяется парный тег
(от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:
Пример: Структура HTML-документа с фреймами
| frame_top |
| frame_left |
frame_right |
Документ с фреймами
В приведенном примере страница содержит три области, в каждую из которых первоначально загружаются HTML-документы frame_top.html, frame_left.html и frame_right.html. Помимо HTML-документов, фрейм может содержать и графику. Для этого необходимо указать адрес соответствующего изображения в атрибуте src
, например src="image.gif"
. Обратите внимание, что элемент
используется без закрывающего тега.
Внутри контейнера
могут содержаться только теги
или другой набор фреймов, охваченный тегами
и
.
Тег
имеет следующие атрибуты:
- rows
— описывает разбиение страницы на строки:
- cols
— описывает разбиение страницы на столбцы:
Области, полученные в результате такого разбиения страницы, и будут являться фреймами. Отсутствие этих атрибутов определяет один фрейм, который займет все окно браузера.
В значении атрибутов rows
и cols
необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
- cols="20%, 80%"
— окно браузера разбивается на две колонки с помощью атрибута cols
, левая колонка занимает 20%, а правая 80% окна браузера.
- rows="100, *"
окно браузера разбивается на два горизонтальных окна с помощью атрибута rows
, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.
Как видно из данного примера, контейнер
с атрибутом rows
вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один
, который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols
, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <![CDATA[
</b>
и <b>]]>
. Все, что находится между тегами <![CDATA[
</b>
и <b>]]>
, игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер <![CDATA[
</b>
, тогда все пользователи смогут увидеть его веб-страницу.<br>
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег <b><frame>
</b>
. Атрибут <b>src
</b> задает документ, который должен отображаться внутри данного фрейма, например: <frame src="frame_top.html">. Если атрибут <b>src
</b> отсутствует, отображается пустой фрейм.</p>
<h2>Границы или пространство между фреймами</h2>
<p>По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.<br>
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента <b><frameset>
</b>
, позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом <b>border
</b>. По умолчанию значение толщины границы равно пяти.<br>
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы <a href="/java-peremennaya-ravna-nulyu-posle-deleniya-izuchaem-java.html">равным нулю</a>, либо присвоить значение «no» или «0» атрибуту <b>frameborder
</b>. Атрибут <b>frameborder
</b> может принимать только два противоположных значения. Если значение атрибута <b>frameborder
</b> равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута <b>frameborder
</b> различаются для <a href="/kak-postavit-parol-na-raznye-brauzery-skryvaem-sekrety-brauzera-ot.html">разных браузеров</a>. Чтобы решить эту проблему используйте дважды атрибут <b>frameborder
</b>, а для некоторых браузеров требуется еще добавить атрибут <b>framespacing
</b> со значением «0»:</p><p>
<frameset frameborder="0" framespacing="0" frameborder="no" border="0">
</p><p>В следующем примере убираем границу между фреймами:</p>
<h3>Пример: Убираем границу между фреймами</h3>
<ul><li>Попробуй сам »</li>
</ul><table><tr><td style="width: 10px;background-color:green;color: white;"> frame_left </td>
<td style="width: 90%;background-color:lime;color: white;"> frame_right </td>
</tr></table><p> <!DOCTYPE html>
<html><br><head><br><meta charset="UTF-8">
<title>Фреймы без границ</title>
</head>
<frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0">
<frame src="frame_left.html" name=" frame_left" >
<frame src="frame_right.html" name="frame_right" >
</frameset>
</html></p>
<p>Если вы удалите границу между фреймами, посетители не смогут изменять размер фрейма в браузере. Вы можете также не допустить изменения размера фрейма, сохранив границы, используя атрибут <b>noresize
</b>:</p><p>
<frame src="frame_left.html" noresize>
</p><p>С помощью атрибута <b>bordercolor
</b> можно изменить цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.<br>
Ниже приведен пример html-страницы, которая содержит описанные выше атрибуты управления границей фрейма: цвет границы — красный, изменять размер верхнего фрейма нельзя:</p>
<h3>Пример: Управление границей фреймов</h3>
<ul><li>Попробуй сам »</li>
</ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td>
</tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">frame_left</td>
<td style="width: 80%;background-color:lime;color: white;">frame_right</td>
</tr></table><p> <!DOCTYPE html>
<html><br><head><br><meta charset="UTF-8">
<title>Управление границей фреймов</title>
</head>
<frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes">
<frame src="frame_top.html" noresize>
<frameset cols="20%, 80%">
<frame src="frame_left.html">
<frame src="frame_right.html">
</frameset>
</frameset>
</html></p>
<p>Если вы хотите расположить страницу, отображаемую внутри фрейма, ближе к его границам, или, наоборот, отодвинуть дальше, измените атрибуты <b>marginheight
</b> и <b>marginwidth
</b> тэга <b><frame>
</b>
. Атрибут <b>marginheight
</b> определяет отступ между содержимым фрейма и его верхней и нижней границами. Синтаксис:</p><p>
<frame marginheight="число">
</p><p>Атрибут <b>marginwidth
</b> определяет отступ между содержимым фрейма и его правой и левой границами. Синтаксис:</p><p>
<frame marginwidth="число">
</p><p>Данная <a href="/kak-sdelat-elementy-html-v-stroku-delaem-adaptivnyi-html-dobavlyaya-odnu-stroku-v.html">строка html</a>, например, располагает отображаемую страницу вплотную к границе фрейма:</p>
<p>Если страница отображает нежелательную для вас полосу прокрутки, вы можете решить эту проблему, указав атрибут <b>scrolling
</b>="no" в тэге <b><frame>
</b>
. Но учтите, что если фрейм будет недостаточно большим, чтобы отобразить все содержимое страницы, то у посетителя не будет никакой возможности прокрутить отображаемую страницу.</p>
<h2>Ссылки внутри фреймов</h2>
<p>Переход по ссылке в обычном HTML-документе осуществляется следующим образом: нажимаете ссылку и текущий документ заменяется новым в текущем либо в новом окне браузера. При использовании фреймов схема загрузки html-документов отличается от обычной и главное отличие — это возможность загружать html-документ в один фрейм из другого фрейма.<br>
Для загрузки документа в определенный фрейм используется атрибут <b>target
</b> тега <b><a>
</b>
. В качестве значения атрибута <b>target
</b> используется имя фрейма, в который будет загружаться документ, указанный атрибутом <b>name
</b> тега <b><frame>
</b>
. Стоит также отметить, что имя фрейма должно начинаться либо с цифры либо с латинской буквы. Следующие имена используются в качестве зарезервированных:</p>
<p>Для внешних ссылок следует задавать в качестве значения для атрибута target либо _top , либо _blank , для того, чтобы сторонние проекты отображались не в ваших фреймах, а занимали полное окно браузера.</p>
<p>В следующем примере изображен HTML-документ, в правый фрейм которого загружается страница по ссылке, помещенной в верхний фрейм. Ссылка на документ, который откроется в правом фрейме:</p><p>
<a href="http://www.google.com" target="frame_right">Google</a>
</p><p>Правому фрейму присваивается имя <i>frame_right
</i>:</p><p>
<frame src="frame_right.html" name="frame_right">
</p><p>Чтобы документ загружался в указанный фрейм, используется конструкция <i>target="frame_right"
</i>, как показано в примере:</p>
<h3>Пример: Ссылка на другой фрейм</h3>
<ul><li>Попробуй сам »</li>
</ul><p> <!DOCTYPE html>
<html><br><head><br><meta charset="UTF-8">
<title>Ссылка на другой фрейм</title>
</head>
<frameset rows="100, *">
<frame src="frame_topic.html">
<frameset cols="20%, 80%">
<frame src="frame_left.html">
<frame src="frame_right.html" name="frame_right">
</frameset>
<noframes>
<p>Ваш браузер не отображает фреймы</p>
]]>
Плавающие фреймы
Элемент
Навигатор Microsoft
Internet
Explorer
позволяет создавать еще одну
разновидность фреймов - так называемые
плавающие фреймы.
Вы можете использовать плавающий фрейм
не только для размещения текста в тексте,
но и для организации ссылок на другие
документы.
Вокруг плавающего фрейма может
располагаться текст или другие графические
изображения. Вы можете указывать для
фрейма такие же атрибуты выравнивания,
как и для графических изображений.
Плавающий фрейм вставляется в документ
HTML
при помощи оператора . Для этого оператора
можно задавать параметрALIGN,
который задает выравнивание текста,
расположенного около плавающего фрейма,
параметры WIDTH и HEIGHT, задающие размеры
фрейма, а также параметры HSPACE и VSPACE.
Еще один параметр, который допустим при
описании плавающего фрейма - FRAMEBORDER. Он
может принимать значения 1 или 0. Если
значение этого параметра равно 1,
плавающий фрейм заключается в трехмерную
рамку (используется по умолчанию), а
если 0 - рамка не отображается.
Параметр SCROLLING может принимать значения
“yes”,“no”или“auto”.
Если указано значение“yes”,
окно плавающего фрейма будет иметь
полосы просмотра. Если“no”
- полос просмотра не будет. В том
случае, когда для параметра SCROLLING указано
значение“auto”,
полосы просмотра будут создаваться
только при необходимости, когда содержимое
документа не помещается в окне фрейма.
Пример
Плавающие
фреймы в документах HTMLРазмещение
плавающих фреймов в документах HTML
Вы
можете включить внутрь документа HTML
плавающий фрейм:
Если
указано выравнивание по левой границе,
текст,
расположенный рядом с плавающим фреймом,
будет
расположен
справа от фрейма
В
этом документе определен плавающий
фрейм, в который загружается документ
HTML,
расположенный в файлеinclude.html
Include.Html
Документ
для плавающего фреймаСодержимое
этого документа отображается внутри
плавающего
фрейма.
Оно
отображается в окне, которое имеет
вертикальную
полосу просмотра.
Если
содержимое документа,
загруженного
в плавающий фрейм, не помещается в окне
фрейма,
пользователь
может пролистать его при помощи этой
полосы
просмотра.
Лабораторное задание №5
1) Создать документ с фреймами следующего
вида:
2) Создать документ с фреймами следующего
вида:
3) Создать документ с фреймами следующего
вида:
|
 Первоначально
здесь должна быть расположена информация
об авторе
|
|
Видеофрагмент 1
|
н  а
заранее созданныеhtmlдокументы, при нажатии на ссылки их
содержание должно отображаться в окне
фрейма №1.
|
|
|
В окне фрейма2 должна располагаться
страница с видеофрагментом1, при нажатии
на видеофрагмент1 в окно фрейма3 должна
загрузиться информация, содержащая:
описание видеофрагмента1 и ссылку на
видеофрагмент 2, при нажатии на эту
ссылку в окне фрейма 2 должен загрузиться
видеофрагмент 2, при нажатии на
видеофрагмент2 в окне фрейма 3 должна
загрузиться информация, содержащая:
описание видеофрагмента2 и ссылку на
видеофрагмент 1…
4) Самостоятельно придумать 4 примера
документов с фреймами для демонстрации
работы параметра TARGET
с предопределенными именами (_top,
_parent, _self,
_blank).
5) Самостоятельно придумать примеры
документов с фреймами, чтобы
продемонстрировать умение:
задавать размер фреймов
задавать рамки для фреймов
задавать расстояние между фреймами
задавать отступ
знать, как сделать невозможным изменение
окна фрейма
сделать появление полосы прокрутки,
только при необходимости
6)Создать документ с плавающим фреймом,
без рамки, полоса прокрутки должна
появляться при необходимости, текст,
расположенный рядом с фреймом должен
быть расположен слева от фрейма.
Большинство документов HTML не помещается на одной странице, поэтому для их просмотра пользователю приходится сдвигать документ в окне навигатора. Кроме того, для навигации необходимо искать ссылки на другие документы, которые могут быть расположены в любом, самом неожиданном месте страницы.
Вы сможете сделать свой сервер намного удобнее для просмотра, если предоставите пользователю многооконный интерфейс, реализованный при помощи фреймов. В этом случае окно навигатора разделяется на несколько окон (фреймов), в каждом из которых отображается содержимое различных документов HTML (рис. 6.1). Таким образом, можно работать одновременно с несколькими документами.
Рис. 6.1. Страница нашего сервера WWW, реализованная с использованием фреймов
Наша страница состоит из трех фреймов. Первый фрейм расположен в верхней части окна и служит для отображение логотипа. Второй фрейм предназначен для отображения ссылок на различные разделы сервера, представляющие собой ни что иное, как обычные документы HTML. И, наконец, третий фрейм имеет самые большие размеры и предназначен для просмотра документов.
Мы настроили параметры фрейма оглавления и фрейма просмотра таким образом, что пользователь может менять их горизонтальный размер, передвигая мышью вертикальную разделительную линию, расположенную между фреймами. Если содержимое документа не помещается внутри фрейма, в правой части соответствующего окна появляется полоса просмотра.
Пользуясь ссылками в окне фрейма оглавления, вы можете загружать в фрейм просмотра различные документы, которые, в свою очередь, также могут иметь ссылки. Разумеется, мы не претендуем на то, что расположение и назначение фреймов выбраны на нашем сервере оптимальным образом, однако вы можете создать для своего сервера любое количество фреймов и расположить их как угодно.
Заметим, что далеко не все навигаторы способны работать с фреймами. Поэтому несмотря на то что фреймы придают страницам сервера более привлекательный вид и облегчают работу пользователя, их можно встретить далеко не на всех серверах WWW. В качестве альтернативы фреймам обычно применяют таблицы.
Структура документа с фреймами
Прежде всего необходимо подготовить документ HTML, в котором содержится описание размеров, расположения и других параметров фреймов. Этот документ должен иметь следующий вид:
Заголовок документа
В начале документа HTML, который предназначен для описания фреймов, нет привычного оператора
. Вместо этого там расположен оператор определения набора фреймов
. Параметры оператора
