Руководство по frame

HTML Frames are used to divide the web browser window into multiple sections where each section can be loaded separately. A frameset tag is the collection of frames in the browser window.

Creating Frames: Instead of using body tag, use frameset tag in HTML to use frames in web browser. But this Tag is deprecated in HTML 5. The frameset tag is used to define how to divide the browser. Each frame is indicated by frame tag and it basically defines which HTML document shall open into the frame. To define the horizontal frames use row attribute of frame tag in HTML document and to define the vertical frames use col attribute of frame tag in HTML document.

Example:

<!DOCTYPE html>

<html>

    <head>

        <title>Example of HTML Frames using row attribute</title>

    </head>

    <frameset rows = "20%, 60%, 20%">

        <frame name = "top" src

        "C:/Users/dharam/Desktop/attr1.png" />

        <frame name = "main" src

        "C:/Users/dharam/Desktop/gradient3.png" />

        <frame name = "bottom" src

        "C:/Users/dharam/Desktop/col_last.png" />

        <noframes>

            <body>The browser you are working does 

                        not support frames.</body>

        </noframes>

    </frameset>

</html>                    

Output: The above example basically used to create three horizontal frames: top, middle and bottom using row attribute of frameset tag and the noframe tag is used for those browser who doesn’t support noframe.
frame tag

Example: This example illustrates the col attribute of frameset tag.

<!DOCTYPE html>

<html>    

    <head>

        <title>Example of HTML Frames Using col Attribute</title>

    </head>

    <frameset cols = "30%, 40%, 30%">

        <frame name = "top" src

        "C:/Users/dharam/Desktop/attr1.png" />

        <frame name = "main" src

        "C:/Users/dharam/Desktop/gradient3.png" />

        <frame name = "bottom" src

        "C:/Users/dharam/Desktop/col_last.png" />        

        <noframes>

            <body>The browser you are working does 

                         not support frames.</body>

        </noframes>

    </frameset>

</html>                    

Output: The above example basically used to create three vertical frames: left, center and right using col attribute of frameset tag.
frame tag

Attributes of Frameset tag:

  • cols: The cols attribute is used to create vertical frames in web browser. This attribute is basically used to define the no of columns and its size inside the frameset tag.
    The size or width of the column is set in the frameset in the following ways:
    • Use absolute value in pixel
      Example:
      <frameset cols = "300, 400, 300">
    • Use percentage value
      Example:
      <frameset cols = "30%, 40%, 30%">
    • Use wild card values:
      Example:
      <frameset cols = "30%, *, 30%">

      In the above example * will take the remaining percentage for creating vertical frame.

  • rows: The rows attribute is used to create horizontal frames in web browser. This attribute is used to define no of rows and its size inside the frameset tag.
    The size of rows or height of each row use the following ways:
    • Use absolute value in pixel
      Example:
      <frameset rows = "300, 400, 300">
    • Use percentage value
      Example:
      <frameset rows = "30%, 40%, 30%">
    • Use wild card values
      Example:
      <frameset rows = "30%, *, 30%">

      In the above example * will take the remaining percentage for creating horizontal frame.

  • border: This attribute of frameset tag defines the width of border of each frames in pixels. Zero value is used for no border.
    Example:
    <frameset border="4" frameset>
  • frameborder: This attribute of frameset tag is used to specify whether the three-dimensional border should be displayed between the frames or not for this use two values 0 and 1, where 0 defines for no border and value 1 signifies for yes there will be border.
  • framespacing: This attribute of frameset tag is used to specify the amount of spacing between the frames in a frameset. This can take any integer value as an parameter which basically denotes the value in pixel.
    Example:
    <framespacing="20">
    It means there will be 20 pixel spacing between the frames
    
    • Attributes of Frame Tag:

      • name: This attribute is used to give names to the frame. It differentiate one frame from another. It is also used to indicate which frame a document should loaded into.
        Example:
         <frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
         <frame name = "main" src = "C:/Users/dharam/Desktop/gradient3.png" />
         <frame name = "bottom" src = "C:/Users/dharam/Desktop/col_last.png" />
        

        Here we use three frames with names as left center and right.

      • src: This attribute in frame tag is basically used to define the source file that should be loaded into the frame.The value of src can be any url.
        Example:
        <frame name = "left" src = "/html/left.htm" />

        In the above example name of frame is left and source file will be loaded from “/html/left.htm” in frame.

      • marginwidth: This attribute in frame tag is used to specify width of the spaces in pixels between the border and contents of left and right frame.
        Example:
        <frame marginwidth="20">
        
      • marginheight: This attribute in frame tag is used to specify height of the spaces in pixels between the border and contents of top and bottom frame.
        Example:
        <frame marginheight="20">
        
      • scrollbar: To control the appearance of scroll bar in frame use scrollbar attribute in frame tag. This is basically used to control the appearance of scrollbar. The value of this attribute can be yes, no, auto. Where the value no denotes there will be no appearance of scroll bar.
        Example:
        <frame scrollbar="no">
        

      Advantages:

      • It allows the user to view multiple documents within a single Web page.
      • It load pages from different servers in a single frameset.
      • The older browsers that do not support frames can be addressed using the tag.

      Disadvantages: Due to some of its disadvantage it is rarely used in web browser.

      • Frames can make the production of website complicated.
      • A user is unable to bookmark any of the Web pages viewed within a frame.
      • The browser’s back button might not work as the user hopes.
      • The use of too many frames can put a high workload on the server.
      • Many old web browser doesn’t support frames.

      Note: This tag is not supported in HTML5.
      Supported Browser: The browser supported by <frame> tag are listed below:

      • Google Chrome
      • Internet Explorer
      • Firefox
      • Opera
      • Safari

      CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

Last Updated :
17 Mar, 2022

Like Article

Save Article

Элемент <frame> (от англ. frame — рамка, каркас) определяет свойства отдельного фрейма, на которые делится окно браузера. Этот элемент должен располагаться в контейнере <frameset>, который к тому же задаёт способ разметки страницы на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью атрибута src. Хотя обязательных атрибутов у <frame> и нет, рекомендуется задавать каждому фрейму его имя через атрибут name. Это особенно важно, если требуется по ссылке из одного фрейма загружать документ в другой.

Данный элемент устарел, не используйте его.

Синтаксис

<frameset>
  <frame>
</frameset>

Атрибуты

bordercolor
Цвет линии границы.
frameborder
Отображать рамку вокруг фрейма или нет.
name
Задаёт уникальное имя фрейма.
noresize
Определяет, можно изменять размер фрейма пользователю или нет.
scrolling
Способ отображения полосы прокрутки во фрейме.
src
Путь к файлу, предназначенному для загрузки во фрейме.

Пример

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»
«http://www.w3.org/TR/html4/frameset.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>FRAME</title>
</head>
<frameset rows=»80,*» cols=»*»>
<frame src=»page/top.html» name=»topFrame» scrolling=»no» noresize>
<frameset cols=»80,*»>
<frame src=»page/left.html» name=»leftFrame» scrolling=»no» noresize>
<frame src=»page/main.html» name=»mainFrame»>
</frameset>
</frameset>
</html>

Спецификация

Спецификация Статус
HTML 4.01 Specification Заменённая рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

3 12 1 4 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

 �����   �����   ����������   ��������   ��������   ���������


16 ������

����������


  1. �������� � ������
  2. ������������ �������
    1. ������� FRAMESET
      • ������ � �������

      • ��������� ������ �������
      • ���������� ������ ����� ��������
    2. ������� FRAME

      • ������� ��������� ����������� ������
      • ���������� ������������� ������
  3. ����������� ���� ������

    1. ��������� ���� �� ��������� ��� ������
    2. ��������� �����

  4. �������������� ����������

    1. ������� NOFRAMES

    2. ������� �������� �������
  5. ���������� ������: ������� IFRAME

16.1
�������� � ������

������ � HTML ��������� ������� ������������ ��������� � ���������� ��������, ������� ����� ���� ������������ ��� ���������� ������. ��� ������������ ���������� ������ ��������� ��������� ���������� �������, � �� ����� ��� ������ ���������� �������������� ��� ����������. ��������, � ����� ���� � ����� ������ ����� ������������ ����������� ������, �� ������ ������������� ����, � � ������� — ��� ��������, ������� ����� ������������ ��� ���������� � ������� � ������� ��������� �� ������ ������.

��� ������� �������� � �������������� �������:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>������� �������� � ��������</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
  <FRAMESET rows="100, 200">
      <FRAME src="contents_of_frame1.html">
      <FRAME src="contents_of_frame2.gif">
  </FRAMESET>
  <FRAME src="contents_of_frame3.html">
  <NOFRAMES>
      <P>� ���� ��������� ����������:
      <UL>
         <LI><A href="contents_of_frame1.html">��������� �������</A>
         <LI><IMG src="contents_of_frame2.gif" alt="����������� ��������">
         <LI><A href="contents_of_frame3.html">��� ������� �������</A>
      </UL>
  </NOFRAMES>
</FRAMESET>
</HTML>

��� ����� �������� �������� � ��������� ��������� ������:

 ---------------------------------------
|         |                             |
|         |                             |
| ����� 1 |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          ����� 3            |
|         |                             |
|         |                             |
|         |                             |
| ����� 2 |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
 ---------------------------------------

���� ����� ������������ �� ����� ������������ ������ ��� ��������������� ���, ����� �� ������ �����, �� ������ ������������ ���������� �������� NOFRAMES.

16.2 ������������ �������

�������� HTML, � ������� ����������� ���������� ������� (���������� ���������� � ��������), �������� �� ���, ��� �������� HTML ��� �������. ���������� �������� ����� ���� ������ HEAD � ���� ������ BODY. �������� � �������� ����� ������ HEAD � ������ FRAMESET, ������� �������� ������ BODY.

� ������� FRAMESET �������� ������������ ������� � �������� ���� ������ ������������. ����� ����, � ������� FRAMESET ����� �������������� ������� NOFRAMES � �������������� ���������� ��� ������� �������������, �� �������������� ������ ��� ������������������ ���, ����� �� �� ����������.

��������, ������ ���������� � ������ BODY, �� ������ �������������� �� ������� �������� FRAMESET, ����� ������� FRAMESET ����� ��������������.

16.2.1 ������� FRAMESET

����������� ���������

rows
= multi-length-list
[CN]

���� ������� ���������� ������������ �������������� �������. ��� ����������� �������� ������ ��������, ��������� � ������������� ����. �� ��������� ������������ 100%, ��� ������� ���� ������.

cols =
= multi-length-list
[CN]

���� ������� ���������� ������������ ������������ �������. ��� ����������� �������� ������ ��������, ��������� � ������������� ����. �� ��������� ������������ 100%, ��� ������� ���� �������.

������� FRAMESET ���������� ����� ��������� ���� ������������ � ���� ������������� �����������.

������ � ������� 

��������� �������� rows ���������� ����� �������������� �������� ������������ � ������ �������. ��������� �������� cols ���������� ����� ������������ ��������. ��� �������� ����� ����� ���������� ��� �������� ������������.

���� ������� rows �� ����������, ������ ������� �������� ��� ����� ��������. ���� ������� cols �� ����������, ������ ������ �������� ��� ������ ��������. ���� �� ���������� �� ���� �� ����� ���������, ����� �������� ��� ��������.

������ ��������� � ����������� ����� ������� ��� �������� � ������ ���� ��� �����. ���� ������� ��� ��������, ������� ���� ��������� ����� ������� � ������� ������, ����� ������� �� ������ ������ � �.�.

� ������ ������� ����� ����������� ������������� �� ��� ����� (�� ���� ��������� ������� � ������ �����).

<FRAMESET rows="50%, 50%">
...����������� �����������...
</FRAMESET>

� ��������� ������� ��������� ��� �������: ������ ����� ������������� ������ 250 �������� (��� �������, ��������, ��� ������������� ����������� ��������� ������). ������ ����� �������� 25% ����������� ������������, � ������ — 75%.

<FRAMESET cols="1*,250,3*">
...����������� �����������...
</FRAMESET>

� ��������� ������� ��������� ����� 2×3.

<FRAMESET rows="30%,70%" cols="33%,34%,33%">
...����������� �����������...
</FRAMESET>

��� ���������� ������� �����������, ��� ���� �������� ����� ������ ������ 1000 ��������. ������ ������ �������� 30% ����� ������ (300 ��������). ������ ����� ������ ����� 400 ��������. �������� 300 �������� �� ��� ������ ������. ��� ���������� ������ ������ ������ «2*», ��� ��� �� ������ ���� ����� ���� ��������, ��� �������� ������ ������ «*» (������������ 1*). ����� ������, ������ ����� ����� ����� ������ 100 ��������, � ��������� — 200.

<FRAMESET rows="30%,400,*,2*">
...����������� �����������...
</FRAMESET>

���������� �����, ���� ��� �� ���� � ����� 100% ������� ���������� ������������, ������ ���������������� ������� ������������. ���� ������� ����� ����� �����������, ���������� ������������ ������ ���������� �������������� ����� ����� ���������. ���� ������� �����, ����������� �����������, ������ ������ ������ ����������� � ����������� �� ����, ����� ����� ������������ �� ��������.


��������� ������ �������
 

����� ������� ����������� ������� �� ����������.

� ��������� ������� ������� ������� FRAMESET ��������� ��������� ������������ �� ��� ������ �������. ���������� ������� FRAMESET ��������� ������ ������� �� ��� ������ �������� ������.

<FRAMESET cols="33%, 33%, 34%">
     ...���������� ������� ������...
     <FRAMESET rows="40%, 50%">
        ...���������� ������� ������, ������ ������...
        ...���������� ������� ������, ������ ������...
     </FRAMESET>
     ...���������� �������� ������...
</FRAMESET>

���������� ������ ����� �������� 

������ ����� ��������� ������ ����� ����������� ��������, ������� ��� ������ � ������� �������� OBJECT. ������� OBJECT ������� �������� � ������� HEAD ��������� � �������� � ������ ��� ��� � ������� �������� id. ����� ��������, ���������� ���������� ������, ����� ��������� �� ���� �������������.

� ��������� ������� �������� ��������� ������� � �������� OBJECT, ������������� ��� ����� ������ �������:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>��� ����� ������� � ��������� OBJECT � ������� HEAD</TITLE>
<!-���� ������� OBJECT �� ��������������! -->
<OBJECT id="myobject" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
    <FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>

<!-- In bianca.html -->
<HTML>
<HEAD>
<TITLE>�������� ������</TITLE>
</HEAD>
<BODY>
...������ ���������...
<P>
<SCRIPT type="text/javascript">
parent.myobject.myproperty
</SCRIPT>
...����������� ���������...
</BODY>
</HTML>

16.2.2 ������� FRAME

����������� ���������

name =
cdata
[CI]

��������� ��� �������� ������. ��� ��� ����� �������������� � �������� ���� � ����������� �������.

longdesc =
uri
[CT]

������ �� ������� �������� ������. ��� ���������� ������ ��������� ������� ��������, ���������� ��������� title, � ����� ���� �������� ������� ��� ������������ ������� �������������.

src =
uri
[CT]

���������� ��������������� ���������� ����������� ������.

noresize
[CI]
���� ���� ������� ������������, �� �������� ������ ������������, ��� ������� ������ �������� ������.

scrolling =
auto|yes|no
[CI]
���� ������� ������ ���������� � ��������� ������. ��������� ��������

  • auto: ��� ������������� ������������� ����������� ���������. ��� �������� ������������ �� ���������.
  • yes: ������ ������������� ����������� ���������.
  • no: �� ������������� ����������� ���������.
frameborder
= 1|0
[CN]

���� �������
������������� ������ ������������ ���������� � ������� ������. ��������� ��������:

  • 1: ����� ������������ ������ ���������� ����������� ����� ���� ������� � ����� ����������� ��������. ��� �������� ������������ �� ���������.
  • 0: ����� ������������ �� ������ ���������� �����������. �������� ��������, ��� ����������� ����� ��� ����� ������������, ���� ��� ������ � ������ �������.
marginwidth = �������
[CN]

���� ������� ������ ������������, ����������� �� ������ � �������� ������ � ������� �����. �������� ������ ��������� ���� ������. �������� �� ��������� ������� �� ������ ������������.

marginheight = �������
[CN]

���� ������� ���������� ������� � ������ ���� � ������. �������� ������ ��������� ���� ������. �������� �� ��������� ������� �� ������ ������������.

������� FRAME ���������� ���������� � ��� ������ ������.


������� ��������� ����������� ������
 

������� src ���������� �������� ��������, ������������ � ������.

� ��������� ������� ��������� HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>�������� � ��������</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contents_of_frame1.html">
      <FRAME src="contents_of_frame2.gif">
  </FRAMESET>
  <FRAME src="contents_of_frame3.html">
  <FRAME src="contents_of_frame4.html">
</FRAMESET>
</HTML>

������ ����������� �������� ��������� ��������:

 ------------------------------------------
|����� 1     |����� 3       |����� 4       |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
|            |              |              |
-------------|              |              |
|����� 2     |              |              |
|            |              |              |
|            |              |              |
 ------------------------------------------

� ����� ������������ ������ ��������� ������ ���� � ��������� ������.

���������� ������ � ��� ����������� �� ������ ���������� � ����� ���������.

������ ������������� �������������:
��������� ����������� ������� �� �������� ���������� � HTML, ��������� ���������� ������� ������ ��������� � ���������, ����������� ����� �������.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>�������� � ��������</TITLE>
</HEAD>
<FRAMESET cols="50%,50%">
  <FRAME src="contents_of_frame1.html">
  <FRAME src="#anchor_in_same_document">
  <NOFRAMES>
  ...��������� �����...
  <H2><A name="anchor_in_same_document">Important section</A></H2>
  ...��������� �����...
  </NOFRAMES>
</FRAMESET>
</HTML>

���������� ������������� ������ 

� ��������� ������� �������� ������������� ������������ ��������� FRAME. ����� 1 �� ������ ��������� ����� ���������. � ������ 2 ������ ����������� (�����������) ��������� ������ ������������, � ������ ������ ������ ����� ��������. ����� �������� 3 � 4 �� ����� �������. ������� (�� ���������) ����� �������������� ����� �������� 1, 2 � 3.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>�������� � ��������</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
  <FRAMESET rows="*,200">
      <FRAME src="contents_of_frame1.html" scrolling="no">
      <FRAME src="contents_of_frame2.gif" 
                marginwidth="10" marginheight="15"
                noresize>
  </FRAMESET>
  <FRAME src="contents_of_frame3.html" frameborder="0">
  <FRAME src="contents_of_frame4.html" frameborder="0">
</FRAMESET>
</HTML>

16.3
����������� ���� ������

����������.
� ���, ��� ������ ������� ���������� ���� ������, �� ������ ������ �
���������� � ������� � ����������.

�������� ������ ��� � ������� �������� name, ������ ����� ��������� �� ���� ��� �� «target» ��� ������, ������������ ������� ����������. ������� target ����� ��������������� ��� ���������, ��������� ������ (A, LINK), ������������� ���� (AREA) � ���� (FORM).

���������� � ������������� ������ ������� �� ������ ����� � ������� � ������ ������� �������.

� ���� ������� ��������, ��� ���� ������������ ������������ ��������� ����������� ������. ������� ��������� ����� ������� � ���������� ����� ��������� frameset.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>�������� � ��������</TITLE>
</HEAD>
<FRAMESET rows="50%,50%">
   <FRAME name="fixed" src="init_fixed.html">
   <FRAME name="dynamic" src="init_dynamic.html">
</FRAMESET>
</HTML>

����� � ����� init_dynamic.html �� ����� ��������� �� ����� � ������ «dynamic».

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>�������� � ������� � ������������� ������</TITLE>
</HEAD>
<BODY>
...������ ���������...
<P>������ ����� ������� � 
    <A href="slide2.html" target="dynamic">������ 2.</A>
...����������� ���������...
<P>��� �������. ��������� � 
    <A href="slide3.html" target="dynamic">������ 3.</A>
</BODY>
</HTML>

����������� ����� �� ������ �������� � �������� ������ ��������� � ������ � ������ «dynamic», � �� ����� ��� � ������ ������, «fixed», ����������� �������� ����������.

16.3.1 ��������� ���� �� ��������� ��� ������

���� �� ������ ������� � ��������� ������������ ���� � �� �� ����, ����� ������� �� ���� ��� � ������������ ����� � ������� �������� target ������� ��������. ��� �������� � ������� ��������� �������� target �������� BASE.

�������� � ����������� ������� � ��������� ���������� � ���� � �������� BASE � ������ �� �� ��������� A.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_/frameset.dtd">
<HTML>
<HEAD>
<TITLE>�������� � ������������ ���� � �������� BASE</TITLE>
<BASE href="http://www.mycom.com/Slides" target="dynamic">
</HEAD>
<BODY>
...������ ���������...
<P>������ �� ������ ������� � <A href="slide2.html">������ 2.</A>
...����������� ���������...
<P>��� �������. ��������� � 
       <A href="slide3.html">������ 3.</A>
</BODY>
</HTML>

16.3.2
��������� �����

������ ������������� ������ ���������� ������� �����, � ������� ������ ����������� ��������� ������ � ������������ �� ���������� ������������ (�� ������� � �������):

  1. ���� � �������� ���������� ������� target � ������������ ��������� �����, ��� ����������� �������� (�� ���� ������ �� ������ ��� ��������� �����) ����������� ��������� ������ ������ ����������� � ��������� ������� ������.
  2. ���� ��� �������� �� ���������� ������� target, � � �������� BASE �� ����������, ����� ������������ ��������� target �������� BASE.
  3. ���� �� � ����� ��������, �� � �������� BASE ���� �� �������, ����������� ��������� ������ ������ ����������� �� �����, � ������� ���������� ��� �������.
  4. ���� � �������� target ������ ����������� ����� F, ����� ������������ ������ ������� ����� ���� � �����, ��������� ������ ��� F � ��������� ����������� ��������� ������ � ����� �����.

������ ������������� ����� ������������ ��� ������������� �������� ��������������� �������� target.

16.4

�������������� ����������

������ ������ ��������� �������������� ���������� ��� ������� �������������, �� �������������� ������ ��� ������������������ ���, ����� �� ���������� ��.

16.4.1 ������� NOFRAMES

������� 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>

16.4.2 ������� �������� �������

������� longdesc ��������� ������� ������� ��������� � �������������� ������� ����� ���������� ��� �����, ������������ ������������ ������. � ���� �������� ����������� ������, ��������������� ������� �������� ������. ������� ������� �������� ��������, ��� ������� ��������, ��������� � ��������, ������������� � ������, � �� � ��� �����������. ��������� ���������� ����� ����������, �������� ������� ��������, ������ �����, ���������� ��������������� ����������� ������. � ���������, �� ������� �������� ����������� ��� ������������ ���������� ������.

� ��������� ��������� � �������� ����������� ��� ������. � ����� ������ ��������� ����������, � � ������ ������� — ����������� �������:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_">
<HTML>
<HEAD>
<TITLE>����� ������������ �������� � ��������</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_of_contents.html">
   <FRAME src="ostrich.gif" longdesc="ostrich-desc.html">
</FRAMESET>
</HTML>

�������� ��������, ��� ����������� �������� � ����� ���������� �� ������ �������� HTML, ��� ��� � ������ ��� ������ ����������� ������� �������������� �����, ����� �������� longdesc. ���� ���������� ������� ������ ��������� (��������, ������������ ������� � ���������� ����), � ������������ �� ����� ���������� ������� � ������ ����������� ������.

����� �������, ������ �� ������ �������� ����������� ��������������� � �����. ������ ����� ����������� ������ ���������� � ��������� �������� HTML � ���������� ��� ��������������� �������������� �������:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
   "_THE_LATEST_VERSION_">
<HTML>
<HEAD>
<TITLE>������ ������������ �������� � ��������</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
   <FRAME src="table_of_contents.html">
   <FRAME src="ostrich-container.html">
</FRAMESET>
</HTML>
<!-���� ostrich-container.html: -->
<HTML>
<HEAD>
<TITLE>������� � ������ �������</TITLE>
</HEAD>
<P>
<OBJECT data="ostrich.gif" type="image/gif">
��� ������� ������� �������!
</OBJECT>
</HTML>

16.5 ���������� ������ : ������� IFRAME

����������� ���������

longdesc =
uri
[CT]

���� ������� ���������� ������ �� ������� �������� ������. ��� �������� ������ ��������� ������� ��������, ���������� ��������� title, � �������� ������� ��� ������������ ������� �������������.

name =
cdata
[CI]

���� ������� ��������� ��� �������� ������. ��� ����� �������������� � �������� ���� � �������.

width =
�����
[CN]

����� ����������� ������.

height
= �����
[CN]

������ ����������� ������.

������� 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. ��������� ��. � ������� � ���������� ����������.


�����   �����   ����������   ��������   ��������   ���������

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

<frame> HTML — элемент определяет конкретную область , в которой может быть отображен другой HTML — документ. Фрейм должен использоваться внутри <frameset> .

Использование элемента <frame> не рекомендуется из-за определенных недостатков, таких как проблемы с производительностью и недоступность для пользователей с программами чтения с экрана. Вместо <frame> элемент, <iframe> может быть предпочтительным.

Как и все другие элементы HTML, этот элемент поддерживает глобальные атрибуты .

src Deprecated

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

name Deprecated

Этот атрибут используется для маркировки кадров. Без маркировки каждая ссылка будет открываться в том фрейме, в котором она находится — ближайшем родительском фрейме. См. target атрибут для получения дополнительной информации.

noresize Deprecated

Данный атрибут предотвращает изменение размеров фреймов пользователями.

scrolling Deprecated

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

marginheight Deprecated

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

marginwidth Deprecated

Данный атрибут определяет ширину поля между кадрами.

frameborder Deprecated

Этот атрибут позволяет указать границу рамки.

Фреймы

  1. Основные понятия
  2. Страница набора фреймов
  3. Атрибуты фрейма
  4. Пример «невидимой» страницы кода HTML
  5. Использование атрибута target для загрузки страницы в определенный фрейм
  6. Почему следует использовать фреймы
  7. Почему не следует использовать фреймы

Основные понятия

Фрейм — это неподвижная часть (неподвижное окно) web-страницы, которая
является элементом окна броузера. В каждом фрейме отображается свой
документ HTML.
Пример использования фреймов — область элементов перемещения, которая
обычно располагается слева или справа, а иногда снизу или вверху.
Создание стандартной страницы с фреймами требует по крайней мере трех
oтдельных страниц HTML.
Во-первых, нужен файл набор фреймов
(frameset)
,
невидимая страница кода HTML, который управляет расположением и работой
фреймов (назовем ее установочной, иногда ее называют страница-контейнер).
Во-вторых, нужны отдельные страницы кода для каждого фрейма.
Итак, если самая простая страница с фреймами содержит две видимые
страницы, то всего получается три страницы HTML; если в странице есть три
фрейма, всего получается четыре страницы и т. д.
В любом случае будет создаваться невидимая страница набора фреймов —
установочная страница.

 
Возврат в начало страницы

Страница набора фреймов

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

  • <frameset>. Этот тег обозначает набор фреймов, и его
    основные аргументы определяют строки и столбцы. Информация о наборе
    закрывается соответствующим тегом </frameset>.
  • <frame>. Этот тег определяет отдельные фреймы внутри
    набора фреймов. Здесь определяется, каким документом HTML будет заполнен
    фрейм. Для этого используется атрибут src=x (где х-
    относительный или абсолютный URL страницы HTML).


Примечание

У тега <frame> нет соответствующего закрывающего тега
</frame>. Вся информация для отдельных фреймов
располагается внутри тега и считается законченной, когда введена правая
угловая скобка (>).


Как и таблицы, фреймы состоят из сетки столбцов и строк. Таблицы могут
быть сложными, с ячейками, занимающими несколько столбцов или строк.
В таблицах выбор горизонтальных и вертикальных точек отсчета лежит на
программисте. Фреймы более просты. Столбец несомненно вертикален, строка
— горизонтальна.
Синтаксис также понятен. Строки (rows) обозначаются атрибутом
rows
, столбцы (columns) — атрибутом cols. Размер столбцов и
строк может быть задан как в пикселях, так и в процентах. Например,
cols=»220, *» создает столбец слева шириной 220 пикселей и
столбец справа (обозначенный звездочкой), занимающий оставшееся
пространство.
Чтобы добавить дополнительные столбцы, просто определите
их по очереди. Например, если надо создать четыре столбца равной ширины,
можно применить такой синтаксис: соls5=»25%,25%,25%,25%».
Если вы хотите создать строки, просто измените синтаксис на
rows=»220, *»
, и в результате получится строка в верхней части
экрана высотой 220 пикселей. Чтобы создать четыре отдельных строки равной
высоты, понадобится код rows= «25%,25%,25%,25%».
Для создания комбинаций столбцов и строк надо просто расставить значения
в соответствующие теги.
Простой файл набора фреймов выглядит следующим образом:

<html>
<frameset cols="220,*">
<frame src="leftmenu.htm">
<frame src=="welcome.htm">
</frameset>
</html>

Конечно, чтобы страницу можно было просмотреть, файлы leftmenu.htm и
welcome.htm должны быть доступны.

Аналогично организована и наша установочная страница. Результат вы
видете в окне своего броузера.

 
Возврат в начало страницы

Атрибуты фрейма

Для тегов <frameset> и <frame> существует несколько мощных
атрибутов:

Атрибуты тега <frameset>

  • cols=x. Создает столбцы. X- переменная, которая
    заменяется на значение либо в пикселях, либо в процентах, либо на
    комбнацию одного из них и звездочки (*). В последнем случае создается
    динамический фрейм или фрейм относительного размера, занимающий остаток
    доступного пространства
  • rows=x. Создает строки так же, как атрибут cols — столбцы.
  • border=x. Используется броузером Netscape Navigator версии
    3.0 и выше для указания ширимы рамки. Значение переменной задается в
    пикселях.
  • frameborder=x. Используется Internet Explorer для задания
    ширины рамки в пикселях. Netscape Navigator 3.0 и выше использует этот
    атрибут со значениям и уеs или no.
  • framespacing=x. Используется Internet Explorer для
    управления шириной рамки.

Для управления отдельными фреймами используются следующие атрибуты
тега <frame>:

  • frameborder=x. Управляет рамками вокруг отдельных фреймов.
    Netscape Navigator требует значения yes или no, a
    Internet Explorer будет искать числовое значение ширины в пикселях.
  • marginheight=x. Контролирует высоту поля фрейма; значение
    указывается в пикселях.
  • marginwidth=x. Контролирует ширину поля фрейма: значение
    указывается в пикселях
  • name==x. Присваивает имя отдельному фрейму. Имена фреймов
    позволяют создавать ссылки па них из других страниц HTML. Имена должны
    начинаться со стандартного символа или цифры.
  • noresize. Поместите этот полезный атрибут в вашу строку,
    если не хотите, чтобы пользователи вручную изменяли высоту или ширину
    фрейма.
  • scrolling=x. Управляет отображением полос прокрутки; этому
    атрибуту присваиваются значения yes, no или
    auto
    . Значение yes автоматически помещает полосу прокрутки во фрейм,
    значение no означает, что полоса прокрутки не появится. Параметр auto
    отдает управление броузеру, который автоматически помещает полосу
    прокрутки во фрейм в случае необходимости.
  • src=x. Надо заменить переменную «x» на относптельный или
    абсолютный URL страницы HTML, которую вы желаете поместить внутрь фрейма.
  • border=x.Определяет ширину разделительной полосы между
    фреймами в пикселях.
  • bordercolor=x.Определяет цвет разделительной полосы. Цвет
    задается либо шестнадцатиричным кодом, либо именем. Указание цвета подробно
    описано на странице
    Форматирование страницы

Совет

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


 
Возврат в начало страницы

Пример «невидимой» страницы кода HTML

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

<html>

<head>


<title>Изучаем HTML!</title>

</head>

<frameset cols="120,*" frameborder="0" framespacing="0">
    <frame src="leftmenu.htm" name="Menu" scrolling="auto">
    <frameset rows="44,*" frameborder="1" framespacing="0">
        <frame src="navbar.htm" name="Navbar"
        scrolling="no" noresize>
        <frame src="welcome.htm" name="RIGHT">
    </frameset>
    <noframes>
    <body>
   Для просмотра необходим броузер, поддерживающий  фреймы.
    </body>
   </noframes>
</frameset>
</html>

Вы заметили незнакомые теги <noframes> и
</noframes>?

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

В нашем примере, как легко видеть в окне вашего броузера, организовано
три фрейма: «Menu»,»Navbar» и «RIGHT». Это имена фреймов.
Фрейм «Menu» — вертикальный — располагается в левой стороне окна
броузера, занимая постоянную ширину в 120 пикселей. Он не очерчен границей и не
имеет пустого пространства вокруг него. Исходным HTML-файлом для этого
фрейма является файл «leftmenu.htm» — меню (карта сайта).
Если этот файл не помещается на одной
странице вашего броузера (это зависит от вида броузера и его настроек),
то разрешена прокрутка информации в окне фрейма (атрибут scrolling=»auto»).

Фрейм «Navbar» — горизонтальный — расположен в верхней части окна
броузера, занимает в высоту 44 пикселя, очерчен границей. Запрещено менять
размеры этого фрейма (noresize),запрещена прокрутка (scrolling=»no»).
Исходным HTML-файлом для этого
фрейма является файл «navbar.htm». В нем описаны 3 навигационные «кнопки»,
которые вы сейчас видете на экране: «Добро пожаловать!», «Содержание»,
«Гостевая кника». Не конструктивно, не правда ли? Увы! Это были мои
первые шаги!
И наконец, самый информационно наполненный фрейм — «RIGHT». В момент
загрузки сайта в нем показывается файл «welcome.htm» (Добро пожаловать),
а потом…
Потом в эту область
окна броузера будет загружаться HTML-файл, который «закажет» пользователь,
щелкнув по пункту меню (ссылке) во фрейме «Menu».
Таким образом реализуется механизм управления навигации по сайту.
Причем при каждом щелчке по пункту меню, содержимое выводится в область
фрейм «RIGHT». В коде HTML файла «leftmenu.htm» это организовано так:

...
<A  href="content.htm#метка_0"  target ="RIGHT" >Основы HTML</A><BR>
<A    href="content.htm#метка_2"  target ="RIGHT">Приемы создания макетов</A><BR>
 <A    href="content.htm#метка_3"  target ="RIGHT">Работа с HTML</A><BR> 
<A    href="content.htm#метка_4"  target ="RIGHT">Каскадные таблицы стилей</A><BR>
<A    href="content.htm#метка_5"  target ="RIGHT">Динамический HTML</A><BR>
<A href="content.htm#метка_6" target ="RIGHT">Дизайн Web-страницы</A><BR>
...

Заметили — добавился ещё один атрибут в теге ссылки target
?

Именно атрибут target= «RIGHT» отвечает за то, в какой фрейме (окно)
будет загружаться файл по ссылке.

 
Возврат в начало страницы

Использование атрибута target для загрузки
страницы в определенный фрейм

Ссылки на фрейм имеют формат:

<a href="адрес_файла" target="имя_фрейма">ссылка</a>

В качестве значения атрибута target указывается то самое имя, которое
мы
присвоили нашему фрейму. Таким образом, мы можем открыть любую ссылку из
любого окна и в любом окне (фрейме). Достаточно лишь знать его имя.

Кроме имён, определяемых непосредственно нами, есть часть уже
определённых, стандартных имен:

  • _blank — открывает ссылку в новом
    окне(загружает содержимое страницы, заданной ссылкой,
    в новом пустом окне)
  • _top — открывает ссылку на всё окно, если она
    находилась во фрейме. Другими словами, она разрушает структуру
    фрейма и загружает файл во всё окно.
  • _parent — открывает ссылку в родительском окне
    (загружает содержимое страницы, заданной ссылкой, в окно, которое
    содержит ссылку).
  • _self — загружает содержимое страницы, заданной
    ссылкой, в окно, игнорируя используемые фреймы.

При создании этого сайта в качестве имени фрейма
было использовано общее имя названия окна на странице
Интернет-страницы
(файл ref_internet.htm), а именно:

...
<a href="http://w3.org/Style/CSS" target="_blank">http://w3.org/Style/CSS
</a>
...

Таким образом обеспечивается загрузка спецификации многоуровневых
таблиц на сайте Консорциума W3C в новое окно.
Убедитесь сами!

 
Возврат в начало страницы

Почему следует использовать фреймы

  1. Используя фрэймы, можно разбить Web-страницы на несколько окон с
    использованием полос прокрутки. Таким образом можно улучшить внешний вид и
    функциональность вашего сайта.
  2. Каждый фрэйм имеет свой URI-адрес, что позволяет загружать его
    независимо от других фрэймов.
  3. Каждый фрэйм имеет собственое имя (атрибут name), позволяющее
    переходить к нему из другого фрэйма.
  4. Размер фрэйма может быть изменен
    пользователем прямо на экране при помощи мыши
    (если это не запрешено
    указанием специального атрибута noresize).
  5. Можно разместить статическую информацию, которую необходимо постоянно
    показывать пользователю (логотип фирмы, набор управляющих кнопок,
    copyright), в одном статическом фрэйме.
  6. Можно поместить в статическом фрэйме оглавление (меню, карту сайта)
    всех WEB-документов, содержащихся сайте, что облегчает
    пользователю поиск интересующей его информации.
  7. Можно создавать
    окна результатов запросов, когда в одном фрэйме находится собственно
    запрос, а в другом результаты запроса.

 
Возврат в начало страницы

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

  1. Страницы сайта не индексируются обычными поисковыми системами,
    исключая первую страницу. Это происходит из-за того, что страница
    описания фреймов не содержит в себе ссылок вида <a href=»»>
    …</a>
    и
    поисковые роботы, естественно, не могут попасть на внутренние страницы.

  2. Совет

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


  3. Если пользователь попадает не на первую страницу сайта, не
    существует «официального» способа перейти на первую страницу сайта —
    приходится вручную редактировать путь в адресной строке броузера.
  4. Невозможно поставить закладку на внутреннюю страницу сайта,
    определить ее адрес — фреймы скрывают истинный адрес страницы.
    Правда, в этом случае существует выход — откройте ссылку в новом окне.
  5. При неточностях в логике взаимодействия фреймов усложняется
    навигация по сайту.
  6. При нажатии пользователям кнопки «обновить» во фрейм загружается
    HTML-файл, указанный в установочном файле источником HTML-кода. А если
    вы уже давно бродите по сайту, и вас совсем не интересует страница
    «Добро пожаловать»?
  7. Существуют проблемы отображения страницы в разных версиях броузеров.

Совет

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


Продолжение следует!

 
Возврат в начало страницы
  
Возврат на главную страницу сайта
 

Valid CSS!

Понравилась статья? Поделить с друзьями:
  • Стульчик для кормления prima pappa diner инструкция на русском
  • Пиро стоп цена инструкция по применению в ветеринарии
  • Руководство для операторов колл центра
  • Инструкция по охране труда для лущильщика
  • Грамицидин спрей для горла детям инструкция по применению