Фреймы в 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.
Документ HTML, в котором описывается компоновка фреймов (называемый документом с фреймами), выглядит не так, как документ HTML без фреймов. Атндартный документ имеет один раздел HEAD и один раздел BODY. Документ с фреймами имеет раздел HEAD и раздел FRAMESET, который заменяет раздел BODY.
В разделе FRAMESET задается расположение фреймов в основном окне агента пользователя. Кроме того, в разделе FRAMESET может присутствовать элемент NOFRAMES с альтернативным содержимым для агентов пользователей, не поддерживающих фреймы или сконфигурированных так, чтобы их не показывать.
Элементы, обычно помещаемые в раздел BODY, не должны присутствовать до первого элемента FRAMESET, иначе элемент 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 -- все фреймы удалены -- > ]]>
Определения атрибутов
Атрибуты, определяемые в другом месте
Элемент 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>
<![ %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 -- наличией полосы прокрутки -- > ]]>
Определения атрибутов
Атрибуты, определяемые в другом месте
Элемент 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>
Примечание. О том, как сейчас принято определять цель фрейма, Вы можете узнать в замечаниях о фреймах в приложении.
Определения атрибутов
Информацию о рспознаваемых именах фреймов Вы можете найти в разделе о именах целевых фреймов.
В этом примере показано, как цели обеспечивают динамическое изменение содержимого фрейма. Сначала определим набор фреймов в показанном здесь документе 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", сохраняется исходное содержимое.
В настоящий момент невозможно кодировать полностью состояние набора фреймов в URI. Таким образом, многие агенты пользователей не позволяют пользователям вносить наборы фреймов в закладки.
Если во многих ссылках в документе используется одна и та же цель, можно указать ее один раз и использовать везде с помощью атрибута 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>
Агенты пользователей должны определять целевой фрейм, в который должен загружаться связанный ресурс в соответствии со следующими приоритетами (от высшего к низшему):
Агенты пользователей могут обеспечивать для пользователей механизм переопределения атрибута target.
Авторы должны указывать альтернативное содержимое для агентов пользователей, не поддерживающих фреймы или сконфигурированных так, чтобы не отображать их.
<![ %HTML.Frameset; [ <!ENTITY % noframes.content "(BODY) -(NOFRAMES)"> ]]> <!ENTITY % noframes.content "(%flow;)*"> <!ELEMENT NOFRAMES - - %noframes.content; -- контейнер альтернативного содержимого для представления без фреймов --> <!ATTLIST NOFRAMES %attrs; -- %coreattrs, %i18n, %events -- >
Элемент NOFRAMES задает содержимое, которое должно отображаться, только если не отображаются фреймы. Агенты пользователей, поддерживающие фреймы, должны отображать содержимое объявления NOFRAMES, только если они сконфигурированы так, чтобы не отображать фреймы. Агенты пользователей, не поддерживающие фреймы, должны отображать содержимое элемента NOFRAMES в любом случае.
Элемент NOFRAMES можно использовать в разделе FRAMESET документа с фреймами.
Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"_THE_LATEST_VERSION_">
<HTML>
<HEAD>
<TITLE>Документс фреймами и NOFRAMES</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="main.html">
<FRAME src="table_of_contents.html">
<NOFRAMES>
<P>Это <A href="main-noframes.html">
версия документа без фреймов.</A>
</NOFRAMES>
</FRAMESET>
</HTML>
Атрибут 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>
<!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 -- ширина фрейма -- >
Определения атрибутов
Атрибуты, определяемые в другом месте
Встраиваемая инфомрация назначается атрибутом src этого элемента. Содержимое элемента IFRAME, с другой стороны, должно отображаться только агентами пользователей, не поддерживающими фреймы или сконфигурированными так, чтобы не поддерживать их.
Для поддерживающих фреймы агентов пользователей в следующем примере в текст будет помещен отделенный границей встроенный фрейм.
<IFRAME src="foo.html" width="400" height="500"
scrolling="auto" frameborder="1">
[Ваш агент не поддерживает фреймы или сконфигурирован так, чтобы
не отображать их. Однако Вы можете просмотреть
<A href="foo.html">этот документ.</A>]
</IFRAME>
Изменять размер встроенных фреймов нельзя (и поэтому у них нет атрибута noresize).
Примечание. Документы HTML могут также внедряться в другие документы HTML с помощью элемента OBJECT. Подробнее см. в разделе о внедренных документах.