Главная страница » Что такое фреймы в html

Что такое фреймы в html

  • автор:

16 Frames

HTML frames allow authors to present documents in multiple views, which may be independent windows or subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced. For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled through or replaced by navigating in the second frame.

Here is a simple frame document:

that might create a frame layout something like this:

If the user agent can’t display frames or is configured not to, it will render the contents of the NOFRAMES element.

16.2 Layout of frames

An HTML document that describes frame layout (called a ) has a different makeup than an HTML document without frames. A standard document has one HEAD section and one BODY . A frameset document has a HEAD , and a FRAMESET in place of the BODY .

The FRAMESET section of a document specifies the layout of views in the main user agent window. In addition, the FRAMESET section can contain a NOFRAMES element to provide alternate content for user agents that do not support frames or are configured not to display frames.

Elements that might normally be placed in the BODY element must not appear before the first FRAMESET element or the FRAMESET will be ignored.

16.2.1 The FRAMESET element

rows = multi-length-list [CN] This attribute specifies the layout of horizontal frames. It is a comma-separated list of pixels, percentages, and relative lengths. The default value is 100%, meaning one row. cols = multi-length-list [CN] This attribute specifies the layout of vertical frames. It is a comma-separated list of pixels, percentages, and relative lengths. The default value is 100%, meaning one column.

Attributes defined elsewhere

  • id , class (document-wide identifiers)
  • title (element title)
  • style (inline style information)
  • onload , onunload (intrinsic events)

The FRAMESET element specifies the layout of the main user window in terms of rectangular subspaces.

Rows and columns

Setting the rows attribute defines the number of horizontal subspaces in a frameset. Setting the cols attribute defines the number of vertical subspaces. Both attributes may be set simultaneously to create a grid.

If the rows attribute is not set, each column extends the entire length of the page. If the cols attribute is not set, each row extends the entire width of the page. If neither attribute is set, the frame takes up exactly the size of the page.

Frames are created left-to-right for columns and top-to-bottom for rows. When both attributes are specified, views are created left-to-right in the top row, left-to-right in the second row, etc.

The first example divides the screen vertically in two (i.e., creates a top half and a bottom half).

The next example creates three columns: the second has a fixed width of 250 pixels (useful, for example, to hold an image with a known size). The first receives 25% of the remaining space and the third 75% of the remaining space.

The next example creates a 2×3 grid of subspaces.

For the next example, suppose the browser window is currently 1000 pixels high. The first view is allotted 30% of the total height (300 pixels). The second view is specified to be exactly 400 pixels high. This leaves 300 pixels to be divided between the other two frames. The fourth frame’s height is specified as «2*», so it is twice as high as the third frame, whose height is only «*» (equivalent to 1*). Therefore the third frame will be 100 pixels high and the fourth will be 200 pixels high.

Absolute lengths that do not sum to 100% of the real available space should be adjusted by the user agent. When underspecified, remaining space should be allotted proportionally to each view. When overspecified, each view should be reduced according to its specified proportion of the total space.

Nested frame sets

Framesets may be nested to any level.

In the following example, the outer FRAMESET divides the available space into three equal columns. The inner FRAMESET then divides the second area into two rows of unequal height.

Sharing data among frames

Authors may share data among several frames by including this data via an OBJECT element. Authors should include the OBJECT element in the HEAD element of a frameset document and name it with the id attribute. Any document that is the contents of a frame in the frameset may refer to this identifier.

The following example illustrates how a script might refer to an OBJECT element defined for an entire frameset:

16.2.2 The FRAME element

  • auto: This value tells the user agent to provide scrolling devices for the frame window when necessary. This is the default value.
  • yes: This value tells the user agent to always provide scrolling devices for the frame window.
  • no: This value tells the user agent not to provide scrolling devices for the frame window.
  • 1: This value tells the user agent to draw a separator between this frame and every adjoining frame. This is the default value.
  • 0: This value tells the user agent not to draw a separator between this frame and every adjoining frame. Note that separators may be drawn next to this frame nonetheless if specified by other frames.

Attributes defined elsewhere

  • id , class (document-wide identifiers)
  • title (element title)
  • style (inline style information)

The FRAME element defines the contents and appearance of a single frame.

Setting the initial contents of a frame

The src attribute specifies the initial document the frame will contain.

The following example HTML document:

should create a frame layout something like this:

and cause the user agent to load each file into a separate view.

The contents of a frame must not be in the same document as the frame’s definition.

The following frameset definition is not legal HTML since the contents of the second frame are in the same document as the frameset.

Visual rendering of a frame

The following example illustrates the usage of the decorative FRAME attributes. We specify that frame 1 will allow no scroll bars. Frame 2 will leave white space around its contents (initially, an image file) and the frame will not be resizeable. No border will be drawn between frames 3 and 4. Borders will be drawn (by default) between frames 1, 2, and 3.

16.3 Specifying target frame information

Note. For information about current practice in determining the target of a frame, please consult the notes on frames in the appendix.

target = frame-target [CI] This attribute specifies the name of a frame where a document is to be opened.

Please consult the section on target frame names for information about recognized frame names.

This example illustrates how targets allow the dynamic modification of a frame’s contents. First we define a frameset in the document frameset.html, shown here:

Then, in init_dynamic.html, we link to the frame named «dynamic».

Activating either link opens a new document in the frame named «dynamic» while the other frame, «fixed», maintains its initial contents.

There is currently no way to encode the entire state of a frameset in a URI. Therefore, many user agents do not allow users to assign a bookmark to a frameset.

16.3.1 Setting the default target for links

When many links in the same document designate the same target, it is possible to specify the target once and dispense with the target attribute of each element. This is done by setting the target attribute of the BASE element.

We return to the previous example, this time factoring the target information by defining it in the BASE element and removing it from the A elements.

16.3.2 Target semantics

User agents should determine the target frame in which to load a linked resource according to the following precedences (highest priority to lowest):

  1. If an element has its target attribute set to a known frame, when the element is activated (i.e., a link is followed or a form is processed), the resource designated by the element should be loaded into the target frame.
  2. If an element does not have the target attribute set but the BASE element does, the BASE element’s target attribute determines the frame.
  3. If neither the element nor the BASE element refers to a target, the resource designated by the element should be loaded into the frame containing the element.
  4. If any target attribute refers to an unknown frame F, the user agent should create a new window and frame, assign the name F to the frame, and load the resource designated by the element in the new frame.

User agents may provide users with a mechanism to override the target attribute.

16.4 Alternate content

Authors should supply alternate content for those user agents that do not support frames or are configured not to display frames.

16.4.1 The NOFRAMES element

Attributes defined elsewhere

  • id , class (document-wide identifiers)
  • lang (language information), dir (text direction)
  • title (element title)
  • style (inline style information)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (intrinsic events)

The NOFRAMES element specifies content that should be displayed only by user agents that do not support frames or are configured not to display frames. User agents that support frames must only display the contents of a NOFRAMES declaration when configured not to display frames. User agents that do not support frames must display the contents of NOFRAMES in any case.

The NOFRAMES element is part of both the transitional and frameset DTDs. In a document that uses the frameset DTD, NOFRAMES may be used at the end of the FRAMESET section of the document.

NOFRAMES may be used, for example, in a document that is the source of a frame and that uses the transitional DTD. This allows authors to explain the document’s purpose in cases when it is viewed out of the frameset or with a user agent that doesn’t support frames.

16.4.2 Long descriptions of frames

The longdesc attribute allows authors to make frame documents more accessible to people using non-visual user agents. This attribute designates a resource that provides a long description of the frame. Authors should note that long descriptions associated with frames are attached to the frame, not the frame’s contents. Since the contents may vary over time, the initial long description is likely to become inappropriate for the frame’s later contents. In particular, authors should not include an image as the sole content of a frame.

The following frameset document describes two frames. The left frame contains a table of contents and the right frame initially contains an image of an ostrich:

Note that the image has been included in the frame independently of any HTML element, so the author has no means of specifying alternate text other than via the longdesc attribute. If the contents of the right frame change (e.g., the user selects a rattlesnake from the table of contents), users will have no textual access to the frame’s new content.

Thus, authors should not put an image directly in a frame. Instead, the image should be specified in a separate HTML document, and therein annotated with the appropriate alternate text:

16.5 Inline frames: the IFRAME element

longdesc = uri [CT] This attribute specifies a link to a long description of the frame. This description should supplement the short description provided using the title attribute, and is particularly useful for non-visual user agents. name = cdata [CI] This attribute assigns a name to the current frame. This name may be used as the target of subsequent links. width = length [CN] The width of the inline frame. height = length [CN] The height of the inline frame.

Attributes defined elsewhere

  • id , class (document-wide identifiers)
  • title (element title)
  • style (inline style information)
  • name , src , frameborder , marginwidth , marginheight , scrolling (frame controls and decoration)
  • align (alignment)

The information to be inserted inline is designated by the src attribute of this element. The contents of the IFRAME element, on the other hand, should only be displayed by user agents that do not support frames or are configured not to display frames.

For user agents that support frames, the following example will place an inline frame surrounded by a border in the middle of the text.

Inline frames may not be resized (and thus, they do not take the noresize attribute).

Note. HTML documents may also be embedded in other HTML documents with the OBJECT element. See the section on embedded documents for details.

Фреймы (теги frame, frameset, noframe, iframe)

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

Что такое Фреймы в html

Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.

Отройте помощь (help) в любой программе (это может быть блокнот, какая-то программа, браузер и т.п.). Практически всегда Вы увидите хелп состоящий из двух частей (слева навигация, справа содержимое). Левая и правая части как раз и являются отдельными фреймами. Ниже представлен скриншот сделанный из хелпа самого обыкновенного блокнота Windows:

Использование фрейма на примере хелпа блокнота

Рис 1. Использования фреймы на примере хелпа блокнота

То что Вы видите, является веб-страничкой состоящий из двух отдельных независимых фреймов. Приведем примерный html код такого фрейма из хелпа.

Пример с фреймами №1 (делаем помощь)

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

Каркас использования фреймов для примера №1
Рис 2. Каркас использования фреймов для примера №1

Разбиение страницы на области с помощью фреймов очень напоминает табличную верстку html (см. HTML тег table). Примерный код такой страницы может выглядеть следующим образом:

Пояснение к примеру №1

Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел <head> , заголовок <title> , но есть одно большое различие. Наверное, Вы обратили внимание, что тег body, который отвечает за тело страницы — отсутствует. Вместо него вставлен тег <frameset> , который отвечает за тело страницы. У этого тега есть два атрибут cols=»25%,75%» , что означает разбить все тело страницы на две области по вертикали в пропорции 1:3. Первая область займет 25% от ширины всего экрана (в ней будет первый фрейм menu.html ), вторая область займет 75% от ширины всего экрана (в ней будет второй фрейм content.html ).

Последний совсем необязательный тег это <noframes> . Он нужен для браузеров, которые не поддерживают фреймы. Если браузер не поддерживает фреймы, то рекомендуется вежливо сообщить об этом пользователю через этот тег.

Кстати, обратите внимание, что для тега <frame> не нужен закрывающий тег.

Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать простую html-страницу состоящую из 4 фреймов. Это будет пример №2.

Пример с 4 фреймами №2

Каркас для примера 2:

Каркас использования фреймов для примера №2
Рис 3. Каркас использования фреймов для примера №2

Код исходной html-страницы с фреймом будет следующий:

Код файла top.html

Код файла menu.html

Код файла content.html

Код файла about-site.html

Код файла about-autor.html

Код файла footer.html

Пояснение к примеру №2

Первоначально вся страница разбивается на три области по горизонтали в пропорции 3:14:3. За это отвечает атрибут rows=»15%,70%,15%» . Первый фрейм в нашем примере — шапка (мы её обозвали top.html ), на нее отводится 15% места по высоте. Далее идет большой фрейм занимающий 70% по высоте. Мы его разбиваем на две части с помощью cols=»25%,75%» в пропорции 1:3. Слева будет фрейм menu.html , справа content.html . Мы специально дали имя второму фрейму name=»main» с целью возможности переключения страниц. Обратите внимание, что в файле menu.html к каждой ссылки приписан атрибут target=»main» , что позволяет при нажатии на эту ссылку загружать элементы в область с именем main. Внизу сайта расположился последний фрейм footer.html .

Если вы реализуете пример №2, то должны получить такую html-страницу в исходном состоянии:

Пример №2 - исходное состояние

Рис 4. Пример №2 — исходное состояние

При переходе на страницу о сайте страница будет выглядеть следующим образом:

Пример №2 - второе состояние

Рис 5. Пример №2 — второе состояние

При переходе на страницу об авторе вы увидите следующие:

Пример №2 - третье состояние

Рис 6. Пример №2 — третье состояние

Тег <iframe>

Тег <iframe> нужен для вставки внешнего фрейма на страницу. Типичным примером может являться код видео из youtube. Формат этого тега выглядит очень просто:

Необязательные атрибуты этого тега являются width=»ширина» и height=»высота» , а обязательный атрибут src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B0″ .

Атрибуты и свойства тега <frameset>

1. Атрибут COLS=»Параметры»
Задает количество разбиений страницы по вертикали.

2. Атрибут ROWS=»Параметры»
Задает количество разбиений страницы по горизонтали.

Теперь рассмотрим каким образом можно задать параметры разбиение.

а) С помощью числа , которому будет соответствовать количество пикселей. Например, cols = «100,100,300» задает разбиение страницы на три области, каждая из которых будет по ширине: 100 пикселей, 100 пикселей и 300 пикселей соответственно.

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

в) С помощью * (звездочки). Например, cols = «2*,3*,100» задает первые две области в соотношение 2:3, а третья область будет шириной в 100 пикселей.

Все три способа можно совмещать. Например, cols=»2*,100,15%,4*» .

3. Атрибут frameborder=»»
Определяет наличие рамки у фрейма. Если ответ yes, то следующий четвертый атрибут border имеет силу.

4. Атрибут border=»параметр»
В пикселях border задает толщину обводки области фрейма. Например, frameborder = «2» задает область с выделенным контуром в 2 пикселя.

5. Атрибут bordercolor=»цвет»
Определяет цвет рамки, если она есть. Цвет можно задать как словами, так и кодом (см. цветовая палитра html).

Примечание: обратите внимание, что тегу <frameset> нужен закрывающий тег </frameset> .

Атрибуты и свойства тега <frame>

1. Атрибут src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0″
В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.

2. Атрибут marginwidth=»число»
Задает отступ внутри фрейма от границ в пикселях по ширине. Например, marginwidth=»10″ задаст отступ содержимого слева и справа от границы фрейма.

3. Атрибут marginhight=»число»
Аналогичен второму с той лишь разницей, что задает отступ по высоте.

4. Атрибут scrolling=»»
Задает возможность прокрутки фрейма, в случае если он не смог уместиться в рамки отведенной ему области. По умолчанию стоит значение auto (означает, что при необходимости создавать скролл).

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

5. Атрибут name=»название»
С помощью этого атрибута можно давать фрейму имя. Это нужно для того, чтобы к этому фрейму могли обращаться другие фреймы. В примере №2 как раз рассматривается такой случай.

Имя не должно начинаться с нижнего подчеркивания «_».

6. Атрибуты frameborder, border и bordercolor
Эти три атрибута такие же как и у frameset (см. атрибуты frameset выше).

Преимущества и недостатки фреймов

Плюсы фреймов

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

Минусы фреймов

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

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

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

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

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

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

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

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

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

Создавать формы типа «мастер-деталь» для WEB-приложений, обслуживающих базы данных.

Синтаксис фрэймов

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

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

+Представим общий синтаксис фрэймов:

Общий контэйнер FRAMESET описывает все фрэймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или несколько горизонтальных фрэймов. Тэг FRAME пописывает каждый фрэйм в отдельности. Рассмотрим более детально каждый компонент.


<FRAMESET [COLS=»value» | ROWS=»value»]>

Тэг <FRAMESET> имеет завершающий тэг </FRAMESET>. Все, что может находиться между этими двумя тэгами, это тэг <FRAME>, вложенные тэги <FRAMESET> и </FRAMESET>, а также контейнер из тэгов <NOFRAME&g tкоторый позволяет строить двойные документы для броузеров, поддерживающих фрэймы и не поддерживающих фрэймы.

Данный тэг имеет два взаимоисключающих параметра: ROWS и COLS. ROWS=»список-определений-горизонтальных-подокон» Данный тэг содержит описания некоторого количества подокон, разделенные запятыми. Каждое описание представляет собой числовое значение размера подокна в пикселах, процентах от всего размера окна или связанное масштабное значение. Количество подокон определяется количеством значений в списке. Общая сумма высот подокон должна составлять высоту всего окна (в любых измеряемых величинах). Отсутствие атрибута ROWS определяет один фрэйм, величиной во все окно броузера.

Синтаксис используемых видов описания величин подокон:


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


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


Вообще говоря, значение value в данном описании является необязательным. Символ «*» указывает на то, что все оставшееся место будет принадлежать данному фрэйму. Если указывается два или более фрэйма с описанием «*» (например «*,*»), то оставшееся пространство делится поровну между этими фрэймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрэйма (во сколько раз од будет больше аналогично описанного чистой звездочкой). Например, описание «3*,*,*», говорит, что будет создано три фрэйма с размерами 3/5 свободного пространства для первого фрэйма и по 1/5 для двух других.

COLS=»список-определений-горизонтальных-подокон» То же самое, что и ROWS, но делит окно по вертикали, а не по горизонтали.

Внимание! Совместное использование данных параметров может привести к непредствазуемым результатам. Например, строка: <FRAMESET ROWS=»50%,50%» COLS «50%,50%»> может привести к ошибочной ситуации.


<FRAMESET COLS=»50,*,50″> — описывает три фрэйма, два по 50 точек справа и слева, и один внутри этих полосок.

<FRAMESET ROWS=»20%,3*,*»> — описывает три фрэйма, первый из которых занимает 20% площади сверху экрана, второй 3/4 оставшегося от первого фрэйма места (т.е. 60% всей площади окна), а последний 1/4 (т.е. 20% всей площади окна.

<FRAMESET ROWS=»*,60%,*»> — аналогично предыдущему примеру.

Тэги <FRAMESET> могут быть вложенными, т.е. например:

Результат данного примера мы рассмотрим позже.


<FRAME SRC=»url» [NAME=»frame_name»] [MARGINWIDTH=»nw»] [MARGINHEIGHT=»nh»] [SCROLLING=yes|no|auto] [NORESIZE]>

Данный тэг определяет фрэйм внутри контейнера FRAMESET.


Описывает URL документа, который будет отображен внутри ланного фрэйма. Если он отсутствует, то будет отображен пустой фрэйм.


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


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


То же самое, что и MARGINWIDTH, но для верхних и нижних величин разделительных полос.

SCROLLING=»yes | no | auto»


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


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


Рассмотрим реализацию фрэймов для подобного разбиения окна:

<H1>Ваша версия WEB-броузера не поддерживает фрэймы!</H1>
<FRAMESET COLS=»65%,35%»>
<FRAME SRC=»link1.html»>
<FRAME SRC=»link2.html»>
<FRAMESET COLS=»*,40%,*»>
<FRAME SRC=»link3.html»>
<FRAME SRC=»link4.html»>
<FRAME SRC=»link5.html»>

Планирование фрэймов и взаимодействия между фрэймами

С появлением фрэймов сразу возникает вопрос: «А как сделать так, чтобы нажимая на ссылку в одном фрэйме инициировать появление информации в другом?»

Ответом на данный вопрос является планирование взаимодействия фрэймов (далее — планирование). Каждый фрэйм может иметь собственное имя, определяемое параметром NAME при описании данного фрэйма. Существует, также, специальный атрибут — TARGET, позволяющий определять, к какому фрэйму относится та или иная операция. Формат данного атрибута следующий:


Данный атрибут может встречаться внутри различных тэгов:

TARGET в тэге A

Это самое прямое использование TARGET. Обычно, при активизации пользователем ссылки соответствующий документ появляется в том же окне (или фрэйме), что и исходный, в котором была ссылка. Добавление атрибута TARGET позволяет произвести вывод документа в другой фрэйм. Например:

<A href=»mydoc.html» TARGET=»Frame1″> Переход в фрэйм п 1 </A>


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

<FRAME SRC=»doc2.htm» NAME=»Frame1″>
<FRAME SRC=»doc3.htm» NAME=»Frame2″>

Документ п 2 (doc2.htm).


Таже можно включать тэг TARGET в описание ссылки при создании карты изображения. Например:

<AREA SHAPE=»circle» COORDS=»100,100,50″ href=»http://www.softexpress.com» TARGET=»Frame1″>


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

<FORM ACTION=»url» TARGET=»window_name»>

Внимание! Имя окна (фрэйма) в параметре TARGET должно начинаться с латинской буквы или цифры. Также необходимо помнить, что существуют зарезервированные имена для разрешения специальных ситуаций.

Зарезервированные имена фрэймов

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


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


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


Данное значение определяет, что документ, полученный по ссылке будет отображаться в родительском окне, вне зависимости от параметров FRAMESET. Если родительского окна нет, то данное имя аналогично «_self».


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


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

Возможность работы с фреймами впервые была реализована в браузере Netscape 2.O. Следующая версия браузера Netscape 3.0 обогатила возможности фреймов, добавив несколько дополнительных параметров к основным тэгам описания структуры фреймов. Браузер Microsoft Internet Explorer поддерживает фреймы, начиная с версии 3.0, а также предоставляет уникальную возможность создания плавающих фреймов.

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

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

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

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

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

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

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

На рис. 5.1 показана одна из HTML-страниц агентства "Финмаркет", специализирующегося на предоставлении информации с финансовых и фондовых рынков России.

Рис. 5.1. Типичный Web-документ с фреймовой структурой

На этой странице окно браузера разбивается на три фрейма. Нижняя часть окна занимает 20% высоты всего окна и содержит постоянную информацию, которая в данном случае представляет собой графическое меню, позволяющее в любой момент обратиться к наиболее важным разделам. Этот фрейм не может изменять своих размеров по командам пользователя и не имеет полос прокрутки. Верхняя часть окна (составляющая 80% высоты) разделена по горизонтали на два фрейма. Левый фрейм содержит оглавление документов, которые могут быть просмотрены пользователем. Правый фрейм, занимающий большую часть окна просмотра, предназначен для отображения самих документов. При первоначальной загрузке эти два фрейма делят окно браузера по горизонтали в соотношении 15% на 85%. Это соотношение может изменяться пользователем при просмотре, что позволяет выбрать оптимальные размеры фреймов с учетом содержимого загруженных документов. Каждый из этих фреймов имеет свою полосу прокрутки, обеспечивающую возможность просмотра всего содержимого фрейма вне зависимости от размера самого фрейма, всего окна браузера и используемых шрифтов. При выборе любой ссылки в левом фрейме соответствующий документ будет загружен в правый фрейм. Такая структура позволяет одновременно видеть на экране и оглавление документов, и содержимое выбранного документа.

Приведем без пояснений фрагмент HTML-кода, по которому построен документ с данной структурой:

<FRAME SRC = "toolbar.html" scrolling=noresize>

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

В интернете можно найти сайт электронного издания популярного в Санкт-Петербурге адресно-телефонного справочника "Весь Петербург".

Электронная версия справочника доступна по адресу http://www.allpetersburg.ru и позволяет находить нужные сведения по запросам пользователя. Данная страница документа также имеет фреймовую структуру и состоит из двух фреймов, причем первый из них имеет ширину 100 пикселов, а второй занимает всю оставшуюся ширину окна просмотра. Фрейм, расположенный с левой стороны, используется для графического меню, постоянно присутствующего на экране, а также содержит логотип компании "Nevalink". Второй фрейм содержит документ, который в данном случае представляет собой форму для запроса пользователя. Структура этой страницы определена следующим HTML-кодом:

<FRAME NAME="Menu window" SRC="menu.htm" noresize>

<FRAME NAME=content SRC="sql.idc" noresize>

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


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

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

Существуют также страницы, которые с виду построена аналогично предыдущим. Для примера можно взять страниц у очень популярного во всем мире сборника программных продуктов, предназначенных в основном для работы с Интернетом. Адрес сервера http://www.tucows.com. Заметим, что имя сервера определила аббревиатура, полученная от сокращения полного названия сборника — The Ultimate Collection of Winsock Software. Поскольку сокращение tucows оказалось созвучным словосочетанию two cows (две коровы), то на страницах сервера сплошь и рядом встречается изображение коров, а рейтинг программных продуктов оценивается в количестве мычаний ("Моо") и графически изображается в виде ряда из соответствующего числа коров. Большинство страниц сервера построено однотипно — в левой части окна приводится список доступных разделов, а в правой части — перечень программных продуктов выбранного раздела. На первый взгляд структура документа должна иметь примерно такой же вид, как и в предыдущих примерах. Однако в этом документе фреймы не используются! Данная страница построена при помощи таблицы, которая состоит всего лишь из одной строки с двумя ячейками. Таблица не имеет обрамления и лишь преследует цель форматирования страницы. Впечатление разделения экрана на две части по вертикали создано путем использования фонового графического изображения, содержащего вертикальную линию, а вовсе не сеткой таблицы. В этом можно убедиться, если выполнять просмотр страницы без загрузки изображений. Использование таблицы здесь, видимо, обусловлено соображениями большей доступности документов, поскольку фреймы позволяют отображать не все браузеры.

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

Сравнение приведенных примеров показывает, что использование таблиц и фреймов может иногда быть взаимозаменяемым и определяется пожеланиями разработчиков. Заметим, что часто при взгляде на страницу с отображенным на ней документом невозможно определить, как она построена. Конечному пользователю знание внутренней структуры документа не требуется, однако при разработке собственных Web-страниц ознакомление с исходным кодом существующих документов было бы крайне полезно. В первом примере (см. рис. 5.1) фреймовая структура документа сразу же видна — наличие двух вертикальных полос прокрутки уже определяет присутствие отдельных фреймов. Последующие два примера внешне очень схожи, причем невозможно определить, что первый из них построен с помощью фреймов, а второй — с помощью таблиц. Отличия будут проявляться только при работе с ними. В примере адресно-телефонного справочника при прокрутке документа левая часть окна будет оставаться на месте, что возможно только при наличии фреймовой структуры. В следующем примере ( сборника программных продуктов ) при прокрутке будет смещаться все содержимое окна.

Посмотреть структуру документа при работе с браузером Netscape можно воспользовавшись пунктом Page Info (в версиях 3.x браузера Netscape этот пункт меню назывался Document Info) меню View (рис. 5. 2 ).

Рис. 5. 2 . Меню View браузера Netscape

Кроме того, всегда можно ознакомиться с исходным HTML-кодом всего документа, воспользовавшись пунктом Page Source меню View (или пунктом View Frame Source контекстного меню, вызываемого правой кнопкой мыши, для просмотра HTML-кода документа, загруженного в выбранный фрейм).


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

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

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

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

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

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

Давайте для начала рассмотрим полный HTML-код, создающий документ с фреймами средней сложности:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *