Фрэймы (кадры)

Разбить на страницы

Показывать лекцию целиком

Фрэймы - Введение

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

Вот простой документ с фрэймами:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/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>

который выводит фрэймы примерно так:

---------------------------------------
|         |                             |
|         |                             |
| Frame 1 |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          Frame 3            |
|         |                             |
|         |                             |
|         |                             |
| Frame 2 |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
 ---------------------------------------

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

Вывод фрэймов

Документ HTML, описывающий вывод фрэймов (называемый документ с фрэймами ), имеет несколько другой состав, нежели документ HTML без фрэймов. Стандартный документ содержит один раздел HEAD и один раздел BODY. Набор фрэймов содержит раздел HEAD, и раздел FRAMESET вместо BODY.

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

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

Элемент FRAMESET

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

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

rows = multi-length-list [CN]

Определяет вывод горизонтальных фрэймов. Это разделённый запятыми список пикселов, процентов и относительных размеров. По умолчанию - 100%, один ряд.

cols = multi-length-list [CN]

Определяет вывод вертикальных фрэймов. Это разделённый запятыми список пикселов, процентов и относительных размеров. По умолчанию - 100%, один столбец.

Атрибуты, определённые в другом месте

id, class (идентификаторы документа )

title (название элемента)

style (инлайн-стиль)

onload, onunload (внутренние события)

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

Ряды и столбцы

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

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

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

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

<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*).

Следовательно, четвёртый фрэйм имеет высоту 200 пикселов, а третий - 100 пикселов.

<FRAMESET rows="30%,400,*,2*">
...остальная часть определения...
</FRAMESET>

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

Вложенные фрэймы

Наборы фрэймов могут вкладываться на любую глубину.

В этом примере внешний FRAMESET делит доступное пространство на три столбца. Внутренний FRAMESET делит второй фрэйм на два ряда неравной высоты.

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//RU"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Это набор фрэймов (frameset) с OBJECT в HEAD</TITLE>
<!-- Этот OBJECT не отображается! -->
<OBJECT id="myobject" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
    <FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>

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

Элемент FRAME

<![ %HTML.Frameset; [
<!-- зарезервированные имена фрэймов начинаются с символа "_" остальные - с буквы -->
<!ELEMENT FRAME - O EMPTY              -- подокно -->
<!ATTLIST FRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #ПРЕДПОЛАГАЕТСЯ  -- ссылка на полное описание (дополняет title) --
  name        CDATA          #ПРЕДПОЛАГАЕТСЯ  -- имя целевого фрэйма --
  src         %URI;          #ПРЕДПОЛАГАЕТСЯ  -- источник содержимого фрэйма --
  frameborder (1|0)          1         -- установка бордюра-рамки фрэйма --
  marginwidth %Pixels;       #ПРЕДПОЛАГАЕТСЯ  -- ширина полей, в пикселах --
  marginheight %Pixels;      #ПРЕДПОЛАГАЕТСЯ  -- высота полей, в пикселах --
  noresize    (noresize)    #ПРЕДПОЛАГАЕТСЯ  -- запрещает/разрешает 
					       пользователю изменение размеров фрэйма --
  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 = pixels [CN]

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

marginheight = pixels [CN]

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

Атрибуты, определяемые в другом месте

id, class (идентификаторы документа )

title (название элемента)

style (инлайн-стиль)

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

Установка начального содержимого фрэйма

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</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>

должен создать фрэйм примерно такого вида:

------------------------------------------
|Frame 1     |Frame 3       |Frame 4       |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
-------------|              |              |
|Frame 2     |              |              |
|            |              |              |
|            |              |              |
 ------------------------------------------

и указать ПА загрузить каждый файл в отдельный фрэйм.

Содержимое фрэйма не должно быть в том же документе, что и определение фрэйма.

НЕВЕРНОЕ ИСПОЛЬЗОВАНИЕ:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//RU"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ - набор фрэймов</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
  <FRAME src="contents_of_frame1.html">
  <FRAME src="#якорь_в_этом_же_документе">
  <NOFRAMES>
  ...текст...
  <H2><A name="якорь_в_этом_же_документе">Важный раздел</A></H2>
  ...текст...
  </NOFRAMES>
</FRAMESET>
</HTML>

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</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>

Установка целевого фрэйма

Примечание. Информацию о текущей практике определения целевого фрэйма см. замечания о фрэймах в приложении.

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

target = frame-target [CI]

Определяет имя фрэйма, в котором будет открыт документ.

Установив атрибут name, авторы могут ссылаться на него как на "target" (целевой) для ссылок, определённых в других элементах. Атрибут target может быть установлен для элементов, создающих ссылки ( A, LINK ), карты изображений ( AREA ) и формы ( FORM ).

См. раздел имя целевого фрэйма о распознавании имён фрэймов.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</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.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>A document with anchors with specific targets</TITLE>
</HEAD>
<BODY>
...начало документа...
<P>Now you may advance to 
    <A href="slide2.html" target="dynamic">slide 2.</A>
...документ...
<P>You're doing great. Now on to
    <A href="slide3.html" target="dynamic">slide 3.</A>
</BODY>
</HTML>

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

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

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

Наборы фрэймов могут сделать навигацию в "истории" ПА более затруднительной для пользователя.

Установка целевого фрэйма по умолчанию

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>A document with BASE with a specific target</TITLE>
<BASE href="http://www.mycom.com/Slides" target="dynamic">
</HEAD>
<BODY>
...начало документа...
<P>Now you may advance to <A href="slide2.html">slide 2.</A>
...документ...
<P>You're doing great. Now on to 
       <A href="slide3.html">slide 3.</A>
</BODY>
</HTML>

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

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

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

Если атрибут target элемента не установлен, но есть элемент BASE, атрибут target элемента BASE определяет целевой фрэйм.

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

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

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

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

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

Элемент NOFRAMES

<![ %HTML.Frameset; [
<!ENTITY % noframes.content "(BODY) -(NOFRAMES)">
]]>

<!ENTITY % noframes.content "(%flow;)*">

<!ELEMENT NOFRAMES - - %noframes.content;
 -- контейнер альтернативного содержимого для просмотра в режиме "без фрэймов" -->
<!ATTLIST NOFRAMES
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Атрибуты, определённые в другом месте

id, class (идентификаторы документа )

lang (язык), dir (направление текста)

title (название элемента)

style (инлайн-стиль)

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

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

Элемент NOFRAMES является частью ОТД transitional/переходное и frameset. В документе, использующем ОТД frameset, NOFRAMES должен использоваться в конце раздела FRAMESET документа.

Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
     "http://www.w3.org/TR/html4/frameset.dtd">
  <HTML>
  <HEAD>
  <TITLE>A frameset document with NOFRAMES</TITLE>
  </HEAD>
  <FRAMESET cols="50%, 50%">
     <FRAME src="main.html">
     <FRAME src="table_of_contents.html">
     <NOFRAMES>
     <P>Here is the <A href="main-noframes.html">
              non-frame based version of the document.</A> 
     </NOFRAMES>
  </FRAMESET>
  </HTML>

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

Полное описание фрэймов

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A poorly-designed frameset document</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.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A well-designed frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_of_contents.html">
   <FRAME src="ostrich-container.html">
</FRAMESET>
</HTML>
<!-- In ostrich-container.html: -->
<HTML>
<HEAD>
<TITLE>The fast and powerful ostrich</TITLE>
</HEAD>
<P>
<OBJECT data="ostrich.gif" type="image/gif">
These ostriches sure taste good!
</OBJECT>
</HTML>

Инлайн-фрэймы: элемент IFRAME

<!ELEMENT IFRAME - - (%flow;)*         -- inline подокно -->
<!ATTLIST IFRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #ПРЕДПОЛАГАЕТСЯ  -- ссылка на полное описание (дополняет title) --
  name        CDATA          #ПРЕДПОЛАГАЕТСЯ  -- имя целевого фрэйма --
  src         %URI;          #ПРЕДПОЛАГАЕТСЯ  -- источник содержимого фрэйма --
  frameborder (1|0)          1                 -- бордюр фрэйма --
  marginwidth %Pixels;       #ПРЕДПОЛАГАЕТСЯ  -- ширина полей, в пикселах --
  marginheight %Pixels;      #ПРЕДПОЛАГАЕТСЯ  -- высота полей, в пикселах --
  scrolling   (yes|no|auto)  auto     	     -- прокручивать или нет --
  align       %IAlign;       #ПРЕДПОЛАГАЕТСЯ  -- вертикальное и горизонтальное выравнивание --
  height      %Length;       #ПРЕДПОЛАГАЕТСЯ  -- высота фрэйма --
  width       %Length;       #ПРЕДПОЛАГАЕТСЯ  -- ширина фрэйма --
  >

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

longdesc = uri [CT]

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

name = cdata [CI]

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

width = length [CN]

Ширина инлайн- фрэйма.

height = length [CN]

Высота инлайн- фрэйма.

Атрибуты, определённые в другом месте

id, class (идентификаторы документа )

title (название элемента)

style (инлайн-стиль)

name, src, frameborder, marginwidth, marginheight, scrolling (элементы управления и оформления фрэйма )

align (выравнивание)

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

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

В ПА, поддерживающих фрэймы, этот пример помещает инлайн- фрэйм, окружённый бордюром, в середину текста.

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

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

Примечание. Документы HTML могут также быть встроены в другие документы HTML с помощью элемента OBJECT. См. раздел встроенные документы.

Страницы:

Фрэймы - Введение

Вот простой документ с фрэймами:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/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>

который выводит фрэймы примерно так:

---------------------------------------
|         |                             |
|         |                             |
| Frame 1 |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          Frame 3            |
|         |                             |
|         |                             |
|         |                             |
| Frame 2 |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
 ---------------------------------------

Вывод фрэймов

Элемент FRAMESET

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

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

rows = multi-length-list [CN]

cols = multi-length-list [CN]

Атрибуты, определённые в другом месте

id, class (идентификаторы документа )

title (название элемента)

style (инлайн-стиль)

onload, onunload (внутренние события)

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

Ряды и столбцы

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

<FRAMESET rows="50%, 50%">
...остальная часть определения...
</FRAMESET>

<FRAMESET cols="1*,250,3*">
...остальная часть определения...
</FRAMESET>

В этом примере создана таблица фрэймов 2x3:

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

Следовательно, четвёртый фрэйм имеет высоту 200 пикселов, а третий - 100 пикселов.

<FRAMESET rows="30%,400,*,2*">
...остальная часть определения...
</FRAMESET>

Вложенные фрэймы

Наборы фрэймов могут вкладываться на любую глубину.

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//RU"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Это набор фрэймов (frameset) с OBJECT в HEAD</TITLE>
<!-- Этот OBJECT не отображается! -->
<OBJECT id="myobject" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
    <FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>

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

Элемент FRAME

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

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

name = cdata [CI]

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

longdesc = uri [CT]

src = uri [CT]

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

noresize [CI]

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

scrolling = auto|yes|no [CI]

Прокрутка окна фрэйма. Возможные значения:

yes: это значение требует от ПА всегда предоставлять возможность прокрутки.

no: это значение требует от ПА не предоставлять возможность прокрутки.

frameborder = 1|0 [CN]

Этот атрибут сообщает ПА информацию об обрамлении фрэйма. Возможные значения:

marginwidth = pixels [CN]

marginheight = pixels [CN]

Атрибуты, определяемые в другом месте

id, class (идентификаторы документа )

title (название элемента)

style (инлайн-стиль)

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

Установка начального содержимого фрэйма

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</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>

должен создать фрэйм примерно такого вида:

------------------------------------------
|Frame 1     |Frame 3       |Frame 4       |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
-------------|              |              |
|Frame 2     |              |              |
|            |              |              |
|            |              |              |
 ------------------------------------------

и указать ПА загрузить каждый файл в отдельный фрэйм.

Содержимое фрэйма не должно быть в том же документе, что и определение фрэйма.

НЕВЕРНОЕ ИСПОЛЬЗОВАНИЕ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//RU"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Документ - набор фрэймов</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
  <FRAME src="contents_of_frame1.html">
  <FRAME src="#якорь_в_этом_же_документе">
  <NOFRAMES>
  ...текст...
  <H2><A name="якорь_в_этом_же_документе">Важный раздел</A></H2>
  ...текст...
  </NOFRAMES>
</FRAMESET>
</HTML>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</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>

Установка целевого фрэйма

Примечание. Информацию о текущей практике определения целевого фрэйма см. замечания о фрэймах в приложении.

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

target = frame-target [CI]

Определяет имя фрэйма, в котором будет открыт документ.

См. раздел имя целевого фрэйма о распознавании имён фрэймов.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A frameset document</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.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>A document with anchors with specific targets</TITLE>
</HEAD>
<BODY>
...начало документа...
<P>Now you may advance to 
    <A href="slide2.html" target="dynamic">slide 2.</A>
...документ...
<P>You're doing great. Now on to
    <A href="slide3.html" target="dynamic">slide 3.</A>
</BODY>
</HTML>

Наборы фрэймов могут сделать навигацию в "истории" ПА более затруднительной для пользователя.

Установка целевого фрэйма по умолчанию

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>A document with BASE with a specific target</TITLE>
<BASE href="http://www.mycom.com/Slides" target="dynamic">
</HEAD>
<BODY>
...начало документа...
<P>Now you may advance to <A href="slide2.html">slide 2.</A>
...документ...
<P>You're doing great. Now on to 
       <A href="slide3.html">slide 3.</A>
</BODY>
</HTML>

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

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

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

Элемент NOFRAMES

<![ %HTML.Frameset; [
<!ENTITY % noframes.content "(BODY) -(NOFRAMES)">
]]>

<!ENTITY % noframes.content "(%flow;)*">

<!ELEMENT NOFRAMES - - %noframes.content;
 -- контейнер альтернативного содержимого для просмотра в режиме "без фрэймов" -->
<!ATTLIST NOFRAMES
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Атрибуты, определённые в другом месте

id, class (идентификаторы документа )

lang (язык), dir (направление текста)

title (название элемента)

style (инлайн-стиль)

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)

Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
     "http://www.w3.org/TR/html4/frameset.dtd">
  <HTML>
  <HEAD>
  <TITLE>A frameset document with NOFRAMES</TITLE>
  </HEAD>
  <FRAMESET cols="50%, 50%">
     <FRAME src="main.html">
     <FRAME src="table_of_contents.html">
     <NOFRAMES>
     <P>Here is the <A href="main-noframes.html">
              non-frame based version of the document.</A> 
     </NOFRAMES>
  </FRAMESET>
  </HTML>

Полное описание фрэймов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A poorly-designed frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_of_contents.html">
   <FRAME src="ostrich.gif" longdesc="ostrich-desc.html">
</FRAMESET>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>A well-designed frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_of_contents.html">
   <FRAME src="ostrich-container.html">
</FRAMESET>
</HTML>
<!-- In ostrich-container.html: -->
<HTML>
<HEAD>
<TITLE>The fast and powerful ostrich</TITLE>
</HEAD>
<P>
<OBJECT data="ostrich.gif" type="image/gif">
These ostriches sure taste good!
</OBJECT>
</HTML>

Инлайн-фрэймы: элемент IFRAME

<!ELEMENT IFRAME - - (%flow;)*         -- inline подокно -->
<!ATTLIST IFRAME
  %coreattrs;                          -- id, class, style, title --
  longdesc    %URI;          #ПРЕДПОЛАГАЕТСЯ  -- ссылка на полное описание (дополняет title) --
  name        CDATA          #ПРЕДПОЛАГАЕТСЯ  -- имя целевого фрэйма --
  src         %URI;          #ПРЕДПОЛАГАЕТСЯ  -- источник содержимого фрэйма --
  frameborder (1|0)          1                 -- бордюр фрэйма --
  marginwidth %Pixels;       #ПРЕДПОЛАГАЕТСЯ  -- ширина полей, в пикселах --
  marginheight %Pixels;      #ПРЕДПОЛАГАЕТСЯ  -- высота полей, в пикселах --
  scrolling   (yes|no|auto)  auto     	     -- прокручивать или нет --
  align       %IAlign;       #ПРЕДПОЛАГАЕТСЯ  -- вертикальное и горизонтальное выравнивание --
  height      %Length;       #ПРЕДПОЛАГАЕТСЯ  -- высота фрэйма --
  width       %Length;       #ПРЕДПОЛАГАЕТСЯ  -- ширина фрэйма --
  >

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

longdesc = uri [CT]

name = cdata [CI]

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

width = length [CN]

Ширина инлайн- фрэйма.

height = length [CN]

Высота инлайн- фрэйма.

Атрибуты, определённые в другом месте

id, class (идентификаторы документа )

title (название элемента)

style (инлайн-стиль)

name, src, frameborder, marginwidth, marginheight, scrolling (элементы управления и оформления фрэйма )

align (выравнивание)

В ПА, поддерживающих фрэймы, этот пример помещает инлайн- фрэйм, окружённый бордюром, в середину текста.

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

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

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану

Фрэймы - Введение

Вывод фрэймов

Элемент FRAMESET

Ряды и столбцы

Вложенные фрэймы

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

Элемент FRAME

Установка начального содержимого фрэйма

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

Установка целевого фрэйма

Установка целевого фрэйма по умолчанию

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

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

Элемент NOFRAMES

Полное описание фрэймов

Инлайн-фрэймы: элемент IFRAME

Фрэймы - Введение

Вывод фрэймов

Элемент FRAMESET

Ряды и столбцы

Вложенные фрэймы

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

Элемент FRAME

Установка начального содержимого фрэйма

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

Установка целевого фрэйма

Установка целевого фрэйма по умолчанию

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

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

Элемент NOFRAMES

Полное описание фрэймов

Инлайн-фрэймы: элемент IFRAME

Купить дополнительную попытку

Вы действительно хотите купить ещё одну попытку для прохождения тестирования?

Успешно!

Напишите нам, если у вас есть вопросы

Уважаемые пользователи ИНТУИТ!

Уважаемые пользователи ИНТУИТ!

Добро пожаловать на обновлённый сайт НОУ «ИНТУИТ»!