Фреймы в документах HTML

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

Вот простой документ с использованием фреймов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Простой документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
  <FRAMESET rows="100, 200">
      <FRAME src="contents_of_frame1.html">
      <FRAME src="contents_of_frame2.gif">
  </FRAMESET>
  <FRAME src="contents_of_frame3.html">
  <NOFRAMES>
      <P>В этом документе содержится:
      <UL>
         <LI><A href="contents_of_frame1.html">Миленький текстик</A>
         <LI><IMG src="contents_of_frame2.gif" alt="Симпатичная картинка">
         <LI><A href="contents_of_frame3.html">Еще славный текстик</A>
      </UL>
  </NOFRAMES>
</FRAMESET>
</HTML>

это может привести примерно к следующей структуре экрана:

 ---------------------------------------
|         |                             |
|         |                             |
| Фрейм 1 |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          Фрейм 3            |
|         |                             |
|         |                             |
|         |                             |
| Фрейм 2 |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
 ---------------------------------------

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

16.2 Расположение фреймов

Документ HTML, в котором описывается компоновка фреймов (называемый документом с фреймами), выглядит не так, как документ HTML без фреймов. Атндартный документ имеет один раздел HEAD и один раздел BODY. Документ с фреймами имеет раздел HEAD и раздел FRAMESET, который заменяет раздел BODY.

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

Элементы, обычно помещаемые в раздел BODY, не должны присутствовать до первого элемента FRAMESET, иначе элемент FRAMESET будет игнорироваться.

16.2.1 Элемент FRAMESET

<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) - подразделение окон-->
<!ATTLIST FRAMESET
  %coreattrs;                          -- id, class, style, title --
  rows        %MultiLengths; #IMPLIED  -- список длин,
                                          по умолчанию: 100% (1 строка) --
  cols        %MultiLengths; #IMPLIED  -- список длин,
                                          по умолчанию: 100% (1 столбец) --
  onload      %Script;       #IMPLIED  -- все фреймы загружены  -- 
  onunload    %Script;       #IMPLIED  -- все фреймы удалены -- 
  >
]]>

Определения атрибутов

rows = multi-length-list [CN]: Этот атрибут определяет расположение горизонтальных фреймов. Это разделенный запятыми список пикселов, процентов и относительных длин. По умолчанию используется 100%, что означат одну строку.
cols = = multi-length-list [CN]: Этот атрибут определяет расположение вертикальных фреймов. Это разделенный запятыми список пикселов, процентов и относительных длин. По умолчанию используется 100%, что означат один столбец.

Элемент FRAMESET определяет макет основного окна пользователя в виде прямоугольных пространств.

Строки и столбцы

Установка атрибута rows определяет число горизонтальных отрезков пространства в наборе фреймов. Устанвока атрибута cols определяет число вертикальных отрезков. Для создания сетки можно установить оба атрибута одновременно.

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

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

В первом примере экран разделяется горизонтально на две части (то есть создаются верхняя и нижняя части).

<FRAMESET rows="50%, 50%">
...продолжение определения...
</FRAMESET>

В следующем примере создается три столбца: второй имеет фиксированную ширину 250 пикселов (это полезно, например, для представления изображения известной ширины). Первый фрейм получает 25% оставшегося пространства, а третий - 75%.

<FRAMESET cols="1*,250,3*">
...продолжение определения...
</FRAMESET>

В следующем примере создается сетка 2x3.

<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...продолжение определения...
</FRAMESET>

Для следующего примера предположим, что окно браузера имеет высоту строго 1000 пикселов. Первый раздел получает 30% общей высоты (300 пикселов). Второй имеет высоту ровно 400 пикселов. Остается 300 пикселов на два другие фрейма. Для четвертого фрейма задана высота "2*", так что он должен быть вдвое выше третьего, для которого заданы высота "*" (эквивалентно 1*). Таким оразом, третий фрейм будет иметь высоту 100 пикселов, а четвертый - 200.

<FRAMESET rows="30%,400,*,2*">
...продолжение определения...
</FRAMESET>

Абсолютные длины, если они не дают в сумме 100% реально доступного пространства, должны корректироваться агентом пользователя. Если указана длина менее фактической, оставшееся пространство должно равномерно распределяться между всеми разделами. Если указана длина, превышающая фактическую, каждый раздел должен уменьшаться в зависимости от того, какую часть пространства он занимает.

Вложенные наборы фреймов

Число уровней вложенности фреймов не ограничено.

В следующем примере внешний элемент FRAMESET разделяет доступное пространство на три равных столбца. Внутренний элемент FRAMESET разделяет вторую область на две строки неравной высоты.

<FRAMESET cols="33%, 33%, 34%">
     ...содержимое первого фрейма...
     <FRAMESET rows="40%, 50%">
        ...содержимое второго фрейма, первая строка...
        ...содержимое второго фрейма, вторая строка...
     </FRAMESET>
     ...содержимое третьего фрейма...
</FRAMESET>

Разделение данных между фреймами

Авторы могут разделять данные между несколькими фреймами, включая эти данные с помощью элемента OBJECT. Элемент OBJECT следует включать в элемент HEAD документа с фреймами и давать ему имя с помощью атрибута id. Любой документ, являющийся содержимым фрейма, может ссылаться на этот идентификатор.

В следующем примере показано обращение скрипта к элементу OBJECT, определенному для всего набора фреймов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Это набор фреймов с элементом OBJECT в разделе HEAD</TITLE>
<!-Этот элемент OBJECT не представляется! -->
<OBJECT id="myobject" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
    <FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>

<!-- In bianca.html -->
<HTML>
<HEAD>
<TITLE>Страница Бьянки</TITLE>
</HEAD>
<BODY>
...начало документа...
<P>
<SCRIPT type="text/javascript">
parent.myobject.myproperty
</SCRIPT>
...продолжение документа...
</BODY>
</HTML>

16.2.2 Элемент FRAME

<![ %HTML.Frameset; [
<!-- зарезервированные имена фреймов начинаются с символа "_", остальные - с буквы -->
<!ELEMENT FRAME - O EMPTY              -- вложенное окно -->
<!ATTLIST FRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #IMPLIED  -- ссылка на длинное описание
                                          (дополняет заголовок) --
  name        CDATA          #IMPLIED  -- имя целевого фрейма --
  src         %URI;          #IMPLIED  -- исходный документ для фрейма --
  frameborder (1|0)          1         -- нужны границы фрейма? --
  marginwidth %Pixels;       #IMPLIED  -- ширина полей в пикселах --
  marginheight %Pixels;      #IMPLIED  -- высота полей в пикселах --
  noresize    (noresize)     #IMPLIED  -- разрешить пользователям изменять размер фреймов? --
  scrolling   (yes|no|auto)  auto      -- наличией полосы прокрутки --
  >
]]>

Определения атрибутов

name = cdata [CI]

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

longdesc = uri [CT]

Ссылка на длинное описание фрейма. Это объявление должно дополнять краткое описание, задаваемое атрибутом title, и может быть особенно полезно для невизуальных агентов пользователей.

src = uri [CT]

Определяет местонахождение начального содержимого фрейма.

noresize [CI]

Если этот атрибут присутствует, он сообщает агенту пользователя, что размеры фрейма изменять нельзя.

scrolling = auto|yes|no [CI]

Этот атрибут задает информацию о прокрутке фрейма. Возможные значения

auto: При необходимости предоставлять возможности прокрутки. Это значение используется по умолчанию.
yes: Всегда предоставлять возможности прокрутки.
no: Не предоставлять возможности прокрутки.

frameborder = 1|0 [CN]

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

1: Агент пользователя должен изобразить разделитель между этим фреймам и всеми прилежащими фреймами. Это значение используется по умолчанию.
0: Агент пользователя не должен отображать разделитель. Обратите внимание, что разделители могут все равно отображаться, если они заданы в других фреймах.

marginwidth = пикселы [CN]

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

marginheight = пикселы [CN]

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

Элемент FRAME определяет содержимое и вид одного фрейма.

Задание исходного содержимого фрейма

Атрибут src определяет исходный документ, содержащийся в фрейме.

В следующем примере документа HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contents_of_frame1.html">
      <FRAME src="contents_of_frame2.gif">
  </FRAMESET>
  <FRAME src="contents_of_frame3.html">
  <FRAME src="contents_of_frame4.html">
</FRAMESET>
</HTML>

должна создаваться примерно следующая страница:

 ------------------------------------------
|Фрейм 1     |Фрейм 3       |Фрейм 4       |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
-------------|              |              |
|Фрейм 2     |              |              |
|            |              |              |
|            |              |              |
 ------------------------------------------

а агент пользователя должен загружать каждый файл в отдельный раздел.

Содержимое фрейма и его определение не должны находиться в одном документе.

ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ:
Следующее определение фреймов не является допустимым в HTML, поскольку содержимое второго фрейма находится в документе, описывающем набор фреймов.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
  <FRAME src="contents_of_frame1.html">
  <FRAME src="#anchor_in_same_document">
  <NOFRAMES>
  ...некоторый текст...
  <H2><A name="anchor_in_same_document">Important section</A></H2>
  ...некоторый текст...
  </NOFRAMES>
</FRAMESET>
</HTML>

Визуальное представление фрейма

В следующем примере показано использование декоративных атрибутов FRAME. Фрейм 1 не должен содержать полос прокрутки. В фрейме 2 вокруг содержимого (изображения) останется пустое пространство, и размер фрейма нельзя будет изменять. Между фреймами 3 и 4 не будет границы. Границы (по умолчанию) будут присутствовать между фреймами 1, 2 и 3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contents_of_frame1.html" scrolling="no">
      <FRAME src="contents_of_frame2.gif" 
                marginwidth="10" marginheight="15"
                noresize>
  </FRAMESET>
  <FRAME src="contents_of_frame3.html" frameborder="0">
  <FRAME src="contents_of_frame4.html" frameborder="0">
</FRAMESET>
</HTML>

16.3 Определение цели фрейма

Определения атрибутов

target = frame-target [CI]: Задает имя фрейма, в котором должен открываться документ.

Информацию о рспознаваемых именах фреймов Вы можете найти в разделе о именах целевых фреймов.

В этом примере показано, как цели обеспечивают динамическое изменение содержимого фрейма. Сначала определим набор фреймов в показанном здесь документе frameset.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ с фреймами</TITLE>
</HEAD>
<FRAMESET rows="50%,50%">
   <FRAME name="fixed" src="init_fixed.html">
   <FRAME name="dynamic" src="init_dynamic.html">
</FRAMESET>
</HTML>

Затем в файле init_dynamic.html мы будем ссылаться на фрейм с именем "dynamic".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ с якорями с определенными целями</TITLE>
</HEAD>
<BODY>
...начало документа...
<P>Теперь можно перейти к 
    <A href="slide2.html" target="dynamic">слайду 2.</A>
...продолжение документа...
<P>Все отлично. Переходим к 
    <A href="slide3.html" target="dynamic">слайду 3.</A>
</BODY>
</HTML>

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

16.3.1 Установка цели по умолчанию для ссылок

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

Вернемся к предыдущему примеру и определим информацию о цели в элементе BASE и удалим ее из элементов A.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ с определением цели в элементе BASE</TITLE>
<BASE href="http://www.mycom.com/Slides" target="dynamic">
</HEAD>
<BODY>
...начало документа...
<P>Теперь Вы можете перейти к <A href="slide2.html">слайду 2.</A>
...продолжение документа...
<P>Все отлично. Переходим к 
       <A href="slide3.html">слайду 3.</A>
</BODY>
</HTML>

16.3.2 Семантика целей

Агенты пользователей должны определять целевой фрейм, в который должен загружаться связанный ресурс в соответствии со следующими приоритетами (от высшего к низшему):

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

16.4 Альтернативное содержимое

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

16.4.1 Элемент NOFRAMES

Элемент NOFRAMES задает содержимое, которое должно отображаться, только если не отображаются фреймы. Агенты пользователей, поддерживающие фреймы, должны отображать содержимое объявления NOFRAMES, только если они сконфигурированы так, чтобы не отображать фреймы. Агенты пользователей, не поддерживающие фреймы, должны отображать содержимое элемента NOFRAMES в любом случае.

Элемент NOFRAMES можно использовать в разделе FRAMESET документа с фреймами.

16.4.2 Длинные описания фреймов

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_">
<HTML>
<HEAD>
<TITLE>Плохо составленный документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_of_contents.html">
   <FRAME src="ostrich.gif" longdesc="ostrich-desc.html">
</FRAMESET>
</HTML>

Обратите внимание, что изображение включено в фрейм независимо от любого элемента HTML, так что у автора нет другой возможности указать альтернативный текст, кроме атрибута longdesc. Если содержимое правого фрейма изменится (например, пользователь выберет в содержании змею), у пользователя не будет текстового доступа к новому содержимому фрейма.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_">
<HTML>
<HEAD>
<TITLE>Хорошо составленный документ с фреймами</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_of_contents.html">
   <FRAME src="ostrich-container.html">
</FRAMESET>
</HTML>

<!-Файл ostrich-container.html: -->
<HTML>
<HEAD>
<TITLE>Быстрая и мощная устрица</TITLE>
</HEAD>
<P>
<OBJECT data="ostrich.gif" type="image/gif">
Эти устрицы здорово вкусные!
</OBJECT>
</HTML>

16.5 Встроенные фреймы : элемент IFRAME

<!ELEMENT IFRAME - - (%flow;)*         -- встроенное окно второго уровня -->
<!ATTLIST IFRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #IMPLIED  -- ссылка на длинное описание
                                          (дополняет заголовок) --
  name        CDATA          #IMPLIED  -- имя целевого фрейма --
  src         %URI;          #IMPLIED  -- исходный документ для фрейма --
  frameborder (1|0)          1         -- запросить границы фрейма? --
  marginwidth %Pixels;       #IMPLIED  -- ширина полей в пикселах --
  marginheight %Pixels;      #IMPLIED  -- высота полей в пикселах --
  scrolling   (yes|no|auto)  auto      -- наличие полосы прокрутки --
  align       %IAlign;       #IMPLIED  -- вертикальное или горизонтальное выравнивание --
  height      %Length;       #IMPLIED  -- высота фрейма --
  width       %Length;       #IMPLIED  -- ширина фрейма --
  >

Определения атрибутов

longdesc = uri [CT]: Этот атрибут определяет ссылку на длинное описание фрейма. Это описание должно дополнять краткое описание, задаваемое атрибутом title, и особенно полезно для невизуальных агентов пользователей.
name = cdata [CI]: Этот атрибут назначает имя текущего фрейма. Имя может использоваться в качестве цели в ссылках.
width = длина [CN]: Длина встроенного фрейма.
height = длина [CN]: Высота встроенного фрейма.

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

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

  <IFRAME src="foo.html" width="400" height="500"
             scrolling="auto" frameborder="1">
  [Ваш агент не поддерживает фреймы или сконфигурирован так, чтобы
  не отображать их. Однако Вы можете просмотреть
  <A href="foo.html">этот документ.</A>]
  </IFRAME>

Изменять размер встроенных фреймов нельзя (и поэтому у них нет атрибута noresize).

16 Фреймы

16.1 Введение в фреймы

16.2 Расположение фреймов

16.2.1 Элемент `FRAMESET`

Строки и столбцы

Вложенные наборы фреймов

Разделение данных между фреймами

16.2.2 Элемент `FRAME`

Задание исходного содержимого фрейма

Визуальное представление фрейма

16.3 Определение цели фрейма

16.3.1 Установка цели по умолчанию для ссылок

16.3.2 Семантика целей

16.4 Альтернативное содержимое

16.4.1 Элемент `NOFRAMES`

16.4.2 Длинные описания фреймов

16.5 Встроенные фреймы : элемент `IFRAME`

16 Фреймы

16.2 Расположение фреймов

16.2.1 Элемент FRAMESET

Строки и столбцы

16.2.2 Элемент FRAME

Визуальное представление фрейма

16.4.1 Элемент NOFRAMES

16.5 Встроенные фреймы : элемент IFRAME

16.2.1 Элемент `FRAMESET`

16.2.2 Элемент `FRAME`

16.4.1 Элемент `NOFRAMES`

16.5 Встроенные фреймы : элемент `IFRAME`