Фреймы в html примеры: html ( frame, frameset, noframe, iframe), .

Содержание

Фреймы в HTML | Vavik96

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

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

ктной информацией. Вот вкратце что такое фреймы.

фреймыфреймы

Теперь рассмотрим, как это все можно осуществить.

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

<html>
<head>…</head>
<frameset>….</frameset>
</html>

В контейнере <frameset>….</frameset> располагаются теги <frame />, которые определяют содержимое фреймов.

У тега <frameset> есть два параметра:

rows = число – количество строк (горизонтальных подокон).

cols = число – количество столбцов (вертикальных подокон).

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

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

frame

frame

Код, который определит нам такую структуру фрейма, будет выглядеть так:

<frameset cols="30%,*,30%">
<frame src="../Урок 13/index.html" />
<frame src="https://www.mail.ru" />
<frame src="../Урок11/index.html" />
</frameset>

В первой строке приведенного кода открывается контейнер frameset, в параметре cols указано, что будет три вложенных фрейма. У первого ширина будет 30% от всей ширины экрана. У третьего ширина будет тоже 30% от всей ширины экрана. А второй фрейм займет все оставшееся место. Да символ “*”(звездочка) означает занять все оставшееся место на экране.

Кстати, рассмотрим, каким образом фреймам можно задавать размеры в параметрах cols и rows:

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

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

Можно задавать размер фрейма символом (звездочка). Это означает, что фрейм должен занять все оставшееся место. Если будет указано, например <frameset cols=”20%,,*”>, то есть две звездочки, то все оставшееся место будет поровну разделено между этими двумя фреймами (в данном случае по 40%).

Можно комбинировать варианты задания размеров фреймов. Например:

<frameset cols="70,*,40%">

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

С первой строкой кода разобрались полностью. Идем дальше.

Далее следуют теги <frame src=”url” />. Поскольку через запятую в параметре cols тега frameset задано три числа (то есть будет три фрейма), то и тегов <frame /> должно быть тоже три. Значением параметра src является адрес web страницы, которая будет загружаться в данный фрейм. Адрес, как видно из примера, может быть абсолютным и относительным.

И в последней строке закрывается контейнер </frameset>.

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

<frameset rows="30%,*,30%">
<frame src="../Урок 13/index.html" />
<frame src="../Урок 12/index.html" />
<frame src="../Урок 11/index.html" />
</frameset>

Параметры rows и cols одновременно использовать нельзя. Это приводит к ошибкам, и неверному отображению содержимого.

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

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

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

frame и frameset.

Параметры тегов frame и frameset:

src =”url” – обязательный параметр. Указывает адрес страницы, которая будет отображена внутри фрейма. Используется только для frame.

noresize – отменяет возможность изменения размеров. Используется только для frame.

scrolling=”yes/no/auto” – определяет наличие полос прокрутки. Значение yes – указывает на присутствие полос прокрутки. Значение no – указывает, что полос прокрутки не будет. При значение auto – браузер сам определяет, будут ли полоски прокрутки. Используется только для frame.

name=”frame-name” – имя фрейма. Данный параметр используется для взаимодействия между фреймами. Подробнее о нем поговорим чуть позже. Используется только для frame.

border=число – толщина границ между фреймами. Если принимает значение 0, то границы между фреймами не отображаются. Используется только для frameset.

framespacing=”число” – расстояние между фреймами. Используется только для frameset.

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

<frameset cols="30%,*,30%" border="0">
<frame src="../Урок 13/index.html" noresize="noresize” />
<frame src="../Урок 12/index.html" noresize="noresize" scrolling="no" />
<frame src="../Урок11/index.html" noresize="noresize" scrolling="no" />
</frameset>

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

Пожалуй, с параметрами все. Рассмотрели на примере как их применять.

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

frameframe

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

Пишем:

<frameset rows="100,*,70" border="0">

То есть, там где логотип и меню сайта высота будет 100 пикселей. Где контактная информация высота будет 70 пикселей. Все остальное место займет строка с навигацией сайта, основным содержимым сайта и рекламными баннерами.

Далее описываем первый фрейм. Это будет меню и логотип сайта.

1.<frame

src="../Урок 13/index.html" noresize="noresize" />

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

Соответственно, вместо тега <frame />, мы должны вставить еще один контейнер <frameset>..</frameset> с тремя столбцами, и в каждый записать свой адрес страницы. Видите, ничего сложного, мы просто вместо тега <frame /> вставляем новый, нужный нам, контейнер <frameset>..</frameset>.

<frameset cols="20%,*,20%">
<frame src="../урок 7/lesson7.html" />
<frame src="../урок3/Untitled-1.html" />
<frame src="../урок1/lesson1.html" />
</frameset>

После этого вставляем наш третий фрейм с контактной информацией и закрываем главный контейнер

</frameset>

<frame src="../Урок11/index.html" noresize="noresize" scrolling="no" />
</frameset>

Полный код данной страницы приведен ниже:

<frameset rows="100,*,70" border="0">
<frame src="../Урок 13/index.html" noresize="noresize" />
<frameset cols="20%,*,20%">
<frame src="../урок 7/lesson7.html" />
<frame src="../урок3/Untitled-1.html" />
<frame src="../урок1/lesson1.html" />
</frameset>
<frame src="../Урок11/index.html" noresize="noresize" scrolling="no" />
</frameset>

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

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

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

Создадим фрейм следующего вида:

frameframe

В левом фрейме, будут располагаться наши ссылки. А в правом – страницы на которые ведут эти ссылки.

Создаем такой фрейм:

<frameset cols="100,*" border="0">
<frame src="ind2.html" noresize="noresize" />
<frame src="ind3.html" name="fram1" />
</frameset>

Здесь, надеюсь все понятно. Единственный момент – это у второго фрейма параметр name=”fram1″. Именно значение параметра name мы и будем использовать в дальнейшем. Запомним его.

Теперь создаем документ ind2.html. в нем будет располагаться наш набор ссылок. В общем — это обычный html документ, только у ссылок, мы укажем параметр target и в качестве значение этому параметру укажем имя нашего фрейма — “fram1”. То есть:

<a href="https://vavik96.com" target="fram1"> on webformyself.com</a> <br />
<a href="http://www.mail.ru" target="fram1"> on mail.ru</a> <br />
<a href="http://www.google.ru" target="fram1"> on google.ru</a>

Создадим документ ind3.html. Можно его оставить пустым, а можно в нем расположить то, что вы хотите видеть на начальной странице.

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

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

Тег <iframe></iframe>. В контейнер <iframe></iframe> обычно пишется информация о том, что браузер фреймы не поддерживает. Если браузер поддерживает фреймы, то данная информация игнорируется. Контейнер <iframe></iframe> ставится внутри html документа, в любое место, куда захочется или это требуется. В параметре src указывается адрес страницы, которая будет загружаться во фрейм. Например, поставим во второй выпуск рассылки сайт webformyself.com. Для этого в любом месте html документа второго выпуска напишем:

<iframe src="https://www.webformyself.com"
width="800" align="left">Вашим браузером фреймы не поддерживаются!</iframe>

У тега <iframe> есть ряд параметров. Некоторые из них вы видите в данном коде. Почти все они такие же, как и у тега <img />.

Итак параметры тега <iframe>:

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

frameborder — устанавливает, отображать границу вокруг фрейма или нет.

height — высота фрейма.

hspace — горизонтальный отступ от фрейма до окружающего контента.

name — имя фрейма.

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

src — путь к файлу, содержимое которого будет загружаться во фрейм.

vspace — вертикальный отступ от фрейма до окружающего контента.

width — ширина фрейма.

На этом я завершаю данный выпуск. До скорых встреч. Пока – пока!

Напоминаю Вам о том, что Вы можете скачать видео версии данного урока себе на компьютер по ссылке:

Видео версия 14 урока

Автор: Андрей Бернацкий.

HTML-фреймы

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

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

  • Некоторые небольшие устройства часто не могут справиться с фреймами, потому что их экран недостаточно большой, чтобы его можно было разделить.
  • Иногда страница будет отображаться по-разному на разных компьютерах из-за различного разрешения экрана.
  • Кнопка «Возврат» браузера может не работать, как надеется пользователь.
  • Есть еще браузеры, которые не поддерживают технологию фреймов.

Создание фреймов
Чтобы использовать фреймы на странице, используется тег вместо тега. Тег определяет, как разделить окно на фреймы. Атрибут row тега определяет горизонтальные рамки, а атрибут cols — вертикальные рамки. Каждый фрейм обозначен тегом , и он определяет, какой документ HTML должен открываться во фрейме.
Примечание. Тег устарел и в HTML5 лучше его не использовать.
Пример —

<!DOCTYPE html> <html> <head> <title>HTML фреймы</title> </head> <frameset cols = «25%,50%,25%»> <frame name = «left» src = «/html/top_frame.html» /> <frame name = «center» src = «/html/main_frame.html» /> <frame name = «right» src = «/html/bottom_frame.html» /> <noframes> <body>Ваш браузер не поддерживает фреймы.</body> </noframes> </frameset> </html>

<!DOCTYPE html>

<html>  

   <head>

      <title>HTML фреймы</title>

   </head>  

   <frameset cols = «25%,50%,25%»>

      <frame name = «left» src = «/html/top_frame.html» />

      <frame name = «center» src = «/html/main_frame.html» />

      <frame name = «right» src = «/html/bottom_frame.html» />      

      <noframes>

         <body>Ваш браузер не поддерживает фреймы.</body>

      </noframes>

   </frameset>  

</html>

В результате будет получено —

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

Описание атрибута
1 cols
Указывает, сколько столбцов содержится в наборе фреймов и размер каждого столбца. Вы можете указать ширину каждого столбца одним из четырех способов −Абсолютные значения в пикселях. Например, чтобы создать три вертикальных фрейма, использовать cols = «100, 500, 100».Процент от окна браузера. Например, чтобы создать три вертикальных фрейма, использовать cols = «10%, 80%, 10%».Использование символа подстановки. Например, чтобы создать три вертикальных фрейма, использовать сcols = «10%, *, 10%». В этом случае подстановочный знак * занимает остаток окна.Как относительная ширина окна браузера. Например, чтобы создать три вертикальных фрейма, использовать cols = «3*, 2*, 1*». Это альтернатива процентам. Можно использовать относительные ширины окна браузера. Здесь окно разделено на шесть частей: первая колонна занимает половину окна, вторая занимает одну треть, а третья занимает одну шестую.
2 rows
Этот атрибут работает так же, как и cols атрибут и принимает те же значения, но он используется для указания строк в наборе фреймов. Например, для создания двух горизонтальных ahtqvjd, использовать rows = «10%, 90%». Можно указать высоту каждой строки так же, как описано выше для столбцов.
3 border
Этот атрибут задает ширину границы каждого фрейма в пикселях. Например, border = «5». Нулевое значение означает отсутствие границы.
4 frameborder
Этот атрибут указывает, должна ли трехмерная граница отображаться между фреймами. Этот атрибут принимает значение 1 (да) или 0 (нет). Например frameborder = » 0 » не указывает границы.
5 framespacing
Этот атрибут задает объем пространства между фреймами в наборе фреймов. Может принимать любое целое значение. Например framespacing = «10»означает, что между фреймами должно быть 10 пикселей.

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

Описание атрибута
1 Src
Этот атрибут используется для указания имени файла, который должен быть загружен во фрейм. Его значением может быть любой URL. Например, src = » / html / frame.html » загрузит HTML-файл, доступный в каталоге html.
2 name
Этот атрибут позволяет дать имя фрейму. Он используется для указания, в какой фрейм должен быть загружен документ. Это особенно важно, когда вы хотите создать ссылки в одном фрейме, который загружает страницы в другой фрейм, и в этом случае второй фрейм нуждается в имени, чтобы определить себя в качестве цели ссылки.
3 frameborder
Этот атрибут определяет, показывать ли границы этого фрейма; он переопределяет значение, указанное в атрибуте frameborder в теге <frameset>, если он задан. Он может принимать значения либо 1 (да), либо 0 (Нет).
4 marginwidth
Этот атрибут позволяет задать ширину пространства между левыми и правыми границами фрейма и содержимым фрейма. Значение задается в пикселях. Например marginwidth = «10».
5 marginheight
Этот атрибут позволяет задать высоту пространства между верхней и нижней границами рамки и ее содержимым. Значение задается в пикселях. Например marginheight = «10».
6 noresize
По умолчанию можно изменить размер любого фрейма, щелкнув и перетащив его границы. Атрибут noresize не позволяет пользователю изменять размер фрейма. Например, noresize = «noresize».
7 scrolling
Этот атрибут управляет внешним видом полос прокрутки, которые отображаются на фрейме. Он принимает значения «да», «нет»или » авто». Например scrolling = » no » означает, что фрейм не должен иметь полосы прокрутки.
8 longdesc
Этот атрибут позволяет предоставить ссылку на другую страницу, содержащую длинное описание содержимого фрейма. Например longdesc = » framedescription.html»

Поддержка фреймов браузерами
Если пользователь использует какой-либо старый браузер или любой другой браузер, который не поддерживает фреймы, то элемент <noframes> должен отображаться для пользователя.
Поэтому надо поместить элемент <body> внутри элемента <noframes>, поскольку предполагается, что элемент <frameset> должен заменить элемент <body>, но если браузер не понимает элемент <frameset>, он должен понимать, что находится внутри элемента <body>, который содержится в элементе <noframes>.
Можно поместить целое сообщение для пользователя, имеющего старые браузеры. Например, «Извините! Ваш браузер не поддерживает фреймы».

Имя и целевые атрибуты фрейма
Одним из наиболее популярных применений фреймов является размещение навигационных панелей в одном фрейме, а затем загрузка основных страниц в отдельный фрейм.
Пример.

<!DOCTYPE html> <html> <head> <title>HTML Фреймы</title> </head> <frameset cols = «200, *»> <frame src = «/html/menu.html» name = «menu_page» /> <frame src = «/html/main.html» name = «main_page» /> <noframes> <body>Ваш браузер не поддерживает фреймы.</body> </noframes> </frameset> </html>

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Фреймы</title>

   </head>

   <frameset cols = «200, *»>

      <frame src = «/html/menu.html» name = «menu_page» />

      <frame src = «/html/main.html» name = «main_page» />      

      <noframes>

         <body>Ваш браузер не поддерживает фреймы.</body>

      </noframes>

   </frameset>

</html>

Здесь мы создали два столбца для заполнения двумя фреймами.Первый кадр имеет ширину 200 пикселей и будет содержать панель меню навигации, реализованную в файле menu.html. Второй столбец заполняет оставшееся пространство и будет содержать основную часть страницы, и это реализуется файлом main.html. Для всех трех ссылок, доступных в строке меню, мы упомянули целевой фрейм как main_page, поэтому всякий раз, когда вы нажимаете на любую из ссылок в строке меню, доступная ссылка будет открываться на главной странице.
Ниже приводится содержание menu.html

<!DOCTYPE html> <html> <body bgcolor = «#e1f4ff»> <br /> <a href = «http://right-bracket.ru» target = «main_page»>Правая скобка</a> <a href = «http://www.google.com» target = «main_page»>Google</a> <br /> <br /> <a href = «http://www.microsoft.com» target = «main_page»>Microsoft</a> <br /> </body> </html>

<!DOCTYPE html>

<html>

   <body bgcolor = «#e1f4ff»>

      <br />    

      <a href = «http://right-bracket.ru» target = «main_page»>Правая скобка</a>

<a href = «http://www.google.com» target = «main_page»>Google</a>

      <br />

      <br />      

      <a href = «http://www.microsoft.com» target = «main_page»>Microsoft</a>

      <br />

    

   </body>

</html>

Ниже приводится содержание файла main.html −

<pre «> <!DOCTYPE html> <html> <body bgcolor = «#b5dcb3»> <h4>Это главная страница и контент любой ссылке будет отображаться здесь.</h4> <p>Итак, теперь нажмите на любую ссылку и увидите результат.</p> </body> </html>

Фреймы: учебник HTML:

Что это такое?

Иногда Web-страницу делят на несколько частей (чаще всего — на две, реже — на три, совсем редко — на большее количество). Одна такая часть называется фреймом (от английского frame — рамка). В каждом фрейме отображается отдельная Web-страница.

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

Разбивка на столбцы

В отличие от обычной Web-страницы, страница, которая описывает структуру фреймов, не содержит тела, то есть блока <BODY>…</BODY>. Вместо этого записывается блок <FRAMESET>…</FRAMESET> (от английского frameset — набор фреймов).

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

<HTML>
<HEAD>
   <TITLE>Фреймы-столбцы</TITLE>
</HEAD>
<FRAMESET COLS=»30%,*» FRAMESPACING=»20″>
   <FRAME SRC=»left.html» NORESIZE SCROLLING=»auto»>
   <FRAME SRC=»right.html» NAME=»qq»>
</FRAMESET>
</HTML>

Браузер отображает эту страницу так:

Описание структуры заключено внутрь блока <FRAMESET>…</FRAMESET>. В параметре COLS тэга <FRAMESET> указывается, сколько фреймов-столбцов будет на странице и какова ширина каждого из них (через запятую). Ширина фреймов может быть задана в процентах от всей ширины окна браузера или в пикселах. Знак * означает «использовать все оставшееся место». В этом примере левая часть занимает 30 процентов ширины окна.

Параметры тэгов

Параметр FRAMESPACING тэга <FRAMESET> задает ширину границы между фреймами в пикселах. Границу можно перетаскивать мышкой, изменяя размеры фреймов, если это разрешено.

<FRAMESET COLS=»30%,*» FRAMESPACING=»0″>

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

<FRAMESET COLS=»30%,*» FRAMEborder=»0″ border=»0″>

Каждый фрейм описывается непарным тэгом <FRAME>, у которого есть один обязательный параметр SRC, указывающий имя файла для или URL документа в Интернете, который будет загружен в этот фрейм.

Параметр NORESIZE тэга <FRAME> говорит о том, что размеры этого фрейма запрещено менять. Параметр SCROLLING задает режим работы вертикальной линейки прокрутки и может принимать три значения:

  • yes — линейка прокрутки видна всегда
  • no — прокрутка запрещена, линейки прокрутки нет
  • auto — линейка прокрутки появляется только тогда, когда информация не помещается в окно

Каждый фрейм может иметь имя, которое указывается в параметре NAME тэга <FRAME>. Оно служит для того, чтобы загружать документы в другой фрейм, обращаясь к нему по имени (см. далее).

Параметры MARGINWIDTH и MARGINHEIGHT тэга <FRAME> задают значения горизонтального и вертикального отступов от края страницы в пикселах. Например, чтобы убрать эти поля, надо написать

<FRAME SRC=»left.html» MARGINWIDTH=»0″
       MARGINHEIGHT=»0″>

Разбивка на строки

Аналогично описывается и деление страницы на фреймы-строки. Для этого используется параметр ROWS тэга <FRAMESET>. Фрейм, описанный в файле

<HTML>
<HEAD>
   <TITLE>Фреймы-строки</TITLE>
</HEAD>
<FRAMESET ROWS=»40,*» FRAMESPACING=»10″>
   <FRAME SRC=»up.html» NORESIZE SCROLLING=»auto»>
   <FRAME SRC=»down.html» NAME=»qq» >
</FRAMESET>
</HTML>

отображается на экране так:

Обратите внимание, что высота первой строки задана в пикселах (без знака процента).

Сложные структуры

Покажем пример структуры, в которой сделана разбивка на строки и столбцы.

Легко заметить, что страница разбита на два столбца, а второй столбец - еще на 2 строки. Таким образом получилась вложенная структура, где вместо второго столбца использован набор фреймов с разбивкой на строки:

<HTML>
<HEAD>
   <TITLE>Фреймы</TITLE>
</HEAD>
<FRAMESET COLS=»30%,*» FRAMESPACING=»20″>
   <FRAME SRC=»left.html» SCROLLING=»no»>
   <FRAMESET ROWS=»40,*» FRAMESPACING=»10″>
     <FRAME SRC=»up.html» NORESIZE SCROLLING=»auto»>
     <FRAME SRC=»down.html» NAME=»qq» >
   </FRAMESET>
</FRAMESET>
</HTML>

Ссылки на другой фрейм

Часто один фрейм используется как оглавление, а другой является рабочей частью. Для того, чтобы после щелчка на пункте оглавления заданный файл открывался не в том же фрейме, а в другом, в параметре TARGET тэга <A> надо указать имя нужного фрейма. Например, если надо открыть документ во фрейме с именем qq, можно записать:

<A HREF=»part1.html» TARGET=»qq»>

Подробнее о ссылках можно прочитать в разделе Ссылки.

В следующем разделе вы узнаете о языке JavaScript.

Фреймы в HTML

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

Замечание 1

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

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

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

Готовые работы на аналогичную тему

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

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

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

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

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

Создание фреймов

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

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

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

Ниже приведен пример кода страницы.

Пример работы с фреймами

Достоинства и недостатки фреймов

К достоинствам фреймов можно отнести то, что:

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

К недостаткам фреймов можно отнести:

  • их главное достоинство (отображение информации в одном окне), поскольку доступная область Web-страницы в связи с этим становится значительно меньше;
  • правильный выбор размера фрейма при его создании часто затруднителен, поскольку пользователю приходится постоянно пролистывать фрейм, используя полосы прокрутки;
  • у мониторов с низким разрешением экрана объем видимой информации значительно меньше;
  • многие поисковые системы и каталоги отказывают в регистрации страницам, использующим фреймы.

Замечание 2

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

Полосы прокрутки фреймов

По умолчанию браузер отобразит полосы прокрутки только, когда информация не будет помещаться в размерах фрейма. Для этого атрибуту SCROLLING присваивается одно из значений yes (no), что позволяет браузеру всегда скрывать полосы прокрутки или же постоянно отображать их. Скрытие полос прокрутки позволяет увеличить размеры видимой области фрейма. В тоже время, если данные не будут помещаться в окне, то они станут недоступными для пользователя.

Изменение границ фреймов

Изменение границ фрейма может быть запрещено, это делается с помощью атрибута NORESIZE. Данный атрибут удобно использовать, когда пользователю нужно запретить изменять исходную компоновку страницы. По умолчанию пользователю предоставляется возможность перемещения границ фрейма по его усмотрению, он может задать новые размеры объекта в целях улучшения просмотра определенного фрагмента данных. В случаях, когда фреймы не имеют видимых границ, это повлечет за собой автоматический запрет на изменение их размеров. С помощью атрибута BORDER тега можно изменить толщину линий обрамления фрейма. По умолчанию фрейм заключается браузером в рамку серого цвета и толщиной 6 пикселей. Атрибут BORDERCOLOR позволяет изменить цвет рамки. Атрибут FRAMEBORDER позволяет скрыть границы фрейма.

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

С помощью атрибута MARGINWIDTH задается ширина левого и правого поля.

А атрибутом MARGINHEIGHT определяется высота верхнего и нижнего поля.

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

Плавающие фреймы

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

Плавающие фреймы в настоящее время поддерживает только Microsoft IE.

Ниже приведен пример кода страницы:

Пример 1

Пример работы с фреймами

width=»350″ align=»left»>

Пример работы с фреймами

..

Пример работы с фреймами

top

Создание фреймов

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

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

       Но самые распространенные браузеры умеют с ними обращаться и обращаются поэтому мы рассмотрим на примерах как они создаются.Перед собой вы видите типичную страницу с двумя вертикальными фреймами.Что бы сделать страницу с горизонтальным расположением фреймов введите вместо атрибута «cols» атрибут «rows»

Запишем код этой страницы

<html>
<head>
<title>Страница с двумя вертикальными фреймами</title>
</head> <frameset cols=20%,80% frameborder=»yes» framespasing=»2″>
<frame name=»MenuFrame»src=»MainMenu.html»>
<frame name=»MainFrame»src=»Text1.html»>
</frameset>

и сохраним ее под именем frame.html Окно браузера разделено на две части.При открытии страницы будет загружаться файл HTML,который вы укажете в теге <frame name src=»?»>

Изменяемые атрибуты тега <frameset>
cols= вертикальное расположение фреймов
rows= горизонтальное расположение фреймов
frameborder= отображение рамки «yes»-да, «no»-нет
border= ширина рамки между фреймами
framespasing= расстояние между фреймами
bordecolor= цвет рамки между фреймами

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

<html> <head>
<base target=MainFrame>
<title></title>
</head>
<body>
<center><h4>Первый Frame</h4></center>
<p> <a href=»Text1.html»>Первая страница второго фрейма</a></p>
<p> <a href=»Text2.html»>Вторая страница второго фрейма</a></p>
</body>
</html>

Сохраняем под именем MainMenu.html
Далее запишем файл text1.html.

<html>
<head>
<title>Второй Frame</title>
</head>
<body>
<center><h4>Второй Frame</h4></center>
<p>Первая страница второго фрейма</p>
</body>
</html>

Теперь напишем файл text2.html.Для наглядности при открытии второго документа сделаем цветную страницу

<html>
<head>
<title>Второй Frame</title>
</head>
<body bgcolor=»#FFFF7D»>
<center><h4>Второй Frame</h4></center>
<p>Вторая страница второго фрейма </p>
</body>
</html>

Теперь посмотрим результаты нашей работы

Так же можно разбить страницу на 3 и на 4 фрейма

Данный пример сделан с помощью тегов HTML.Можно также сделать фреймы с помощью скриптового языка JavaScript. Посмотрите этот пример.

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

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

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега <frame>. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Тег <frameset> заменяет собой элемент <body> на веб-странице. Допустимо использовать вложенную структуру элементов, это позволяет разбить один фрейм на две и более области.

При использовании фреймов примите во внимание их следующие особенности.

  • Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, обычно нет ссылок на другие документы.
  • Фреймы скрывают адрес страницы на которой находится посетитель и устанавливаемый через тег <title>, и всегда показывают только адрес сайта. По этой причине понравившуюся страницу невозможно поместить в раздел «Избранное» браузера.
  • Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.
  • Большое число фреймов требует для браузера выделения больше памяти, чем обычно.

Синтаксис

<frameset>
  <frame>
</frameset>

Атрибуты

border
Толщина границы между фреймами.
bordercolor
Цвет линии границы.
cols
Устанавливает ширину или пропорции фреймов в виде колонок.
frameborder
Определяет, отображать рамку вокруг фрейма или нет.
framespacing
Аналог атрибута border, задает ширину границы.
rows
Задает размер или пропорции фреймов в виде строк.

Закрывающий тег

Обязателен.

Пример

HTML 4.01IECrOpSaFx

<!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>Тег FRAMESET</title>
 </head>

 <frameset rows="80,*" cols="*">
   <frame src="top.html" name="topFrame" scrolling="no" noresize>
   <frameset cols="80,*">
     <frame src="left.html" name="leftFrame" scrolling="no" noresize>
     <frame src="main.html" name="mainFrame">
   </frameset>
 </frameset>

</html>

Некоторые примеры организации фреймов приведены ниже.

Фрейм 1 Фрейм 2
Фрейм 3 Фрейм 4
Фрейм 5 Фрейм 6
Фрейм 1 Фрейм 2
Фрейм 3
<frameset rows="33%,33%,*" cols="50%, 50%">
 <frame src="r1c1.html" name="Фрейм 1">
 <frame src="r1c2.html" name="Фрейм 2">
 <frame src="r2c1.html" name="Фрейм 3">
 <frame src="r2c2.html" name="Фрейм 4">
 <frame src="r3c1.html" name="Фрейм 5">
 <frame src="r3c2.html" name="Фрейм 6">
</frameset>
<frameset rows="*" cols="80,*">
 <frame src="frame1.html" name="Фрейм 1">
 <frameset rows="80,*">
   <frame src="frame2.html" name="Фрейм 2">
   <frame src="frame3.html" name="Фрейм 3">
 </frameset>
</frameset>

Плавающие фреймы | htmlbook.ru

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

Рис. 13.4. Плавающий фрейм на веб-странице

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

Создание плавающего фрейма происходит с помощью тега <iframe>, он имеет обязательный атрибут src, указывающий на загружаемый во фрейм документ (пример 13.10).

Пример 13.10. Использование тега <iframe>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Плавающий фрейм</title>
 </head>
 <body>
  <p><iframe src="hsb.html"></iframe></p>
 </body>
</html>

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

Еще одно удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через атрибут name, а в теге <a> указать это же имя в атрибуте target (пример 13.11).

Пример 13.11. Загрузка документа во фрейм

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Плавающий фрейм</title>
 </head>
 <body>
  <p><a href="rgb.html" target="color">RGB</a> | 
     <a href="cmyk.html" target="color">CMYK</a> | 
     <a href="hsb.html" target="color">HSB</a></p>
  <p><iframe src="model.html" name="color"></iframe></p>
 </body>
</html>

В данном примере добавлено несколько ссылок, они открываются во фрейме с именем color.

Тег <iframe> проходит валидацию только при использовании переходного <!DOCTYPE>.

фреймов: примеры — учебник HTML


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





















topleft
topright

botleft

botright








topleft
topright

botleft
brtl brtr








< / frameset>




topleft
topright

botleft

botright







topleft
topright

botleft

botright










.

фреймов в HTML-документах

Рамки в документах HTML

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

Вот простой рамочный документ:



 Простой документ с фреймами </ 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>
 </pre>

 <p>, который может создать структуру кадра примерно так: </p>

 <pre>
 ---------------------------------------
| | |
| | |
| Кадр 1 | |
| | |
| | |
| --------- | |
| | Рамка 3 |
| | |
| | |
| | |
| Рамка 2 | |
| | |
| | |
| | |
| | |
 ---------------------------------------
 </pre>


 <p> Если пользовательский агент не может отображать кадры или не настроен, он будет
визуализировать содержимое
 <samp> NOFRAMES </samp> элемент.</p>

 <h3><span class="ez-toc-section" id="162"> 16,2 Расположение рам </span></h3>

 <p> HTML-документ, который описывает макет фрейма (называется <dfn>
документ frameset </dfn>) отличается от HTML
документ без рамок. Стандартный документ имеет один <samp>
ГОЛОВА </samp> сечение и один <samp> ТЕЛО </samp>. Документ с фреймами имеет
 <samp>
ГОЛОВА </samp> и <samp> FRAMESET </samp> вместо <samp>
ТЕЛО </samp>. </p>

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

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

 <h4><span class="ez-toc-section" id="1621_FRAMESET"> 16.2.1 Элемент <samp> FRAMESET </samp> </span></h4>




 <p> <em> Определения атрибутов </em> </p>

 <dl>
 <dt> <samp> строк </samp> = <em> список с несколькими длинами </em> [CN] </dt>

 <dd> Этот атрибут определяет расположение горизонтальных рамок.Это
Разделенный запятыми список пикселей, процентов и относительной длины. По умолчанию
значение составляет 100%, что означает одну строку. </dd>

 <dt> <samp> столбцов </samp> = <em> список нескольких длин </em> [CN] </dt>

 <dd> Этот атрибут определяет расположение вертикальных кадров. Это
Разделенный запятыми список пикселей, процентов и относительной длины. По умолчанию
значение составляет 100%, что означает один столбец. </dd>
 </dl>



 <p> <em> Атрибуты, определенные в другом месте </em> </p>




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

 <h5><span class="ez-toc-section" id="i-20"> Ряды и колонны </span></h5>

 <p> Установка <samp> строк Атрибут </samp> определяет количество
горизонтальные подпространства в наборе кадров. Установка <samp>
Атрибут cols </samp> определяет количество вертикальных подпространств. Обе
атрибуты могут быть установлены одновременно для создания сетки. </p>

 <p> Если атрибут <samp> строк </samp> не установлен, каждый столбец расширяет
всю длину страницы. Если атрибут <samp> cols </samp> не
установить, каждая строка расширяет всю ширину страницы. Если ни один из атрибутов не
установить, рамка занимает точно размер страницы.</p>

 <p> Рамки создаются слева направо для столбцов и сверху вниз для строк.
Когда оба атрибута указаны, представления создаются слева направо в верхней части
ряд, слева направо во втором ряду и т. д. </p>


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

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

 <p> Следующий пример создает три столбца: второй имеет фиксированную ширину 250
пикселей (полезно, например, для хранения изображения с известным размером).Первый
получает 25% оставшегося пространства и третьи 75% оставшегося
пространство. </p>

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

 <p> В следующем примере создается сетка подпространств 2×3. </p>

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

 <p> Для следующего примера предположим, что окно браузера в настоящее время 1000 пикселей
высокая. Первому виду отводится 30% от общей высоты (300 пикселей).
второй вид имеет высоту 400 пикселей. Это оставляет 300 пикселей
быть разделенным между двумя другими кадрами. Высота четвертого кадра
указано как «2 *», так что он в два раза выше, чем третий кадр, высота которого
только «*» (эквивалентно 1 *). Поэтому третий кадр будет иметь высоту 100 пикселей.
и четвертый будет 200 пикселей в высоту. </p>

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


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

 <h5><span class="ez-toc-section" id="i-21">
Вложенные наборы кадров </span></h5>

 <p> Наборы кадров могут быть вложены на любой уровень. </p>


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

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


 <h5><span class="ez-toc-section" id="i-22"> Обмен данными между кадрами </span></h5>

 <p> Авторы могут обмениваться данными между несколькими кадрами, включая эти данные через <samp>
ОБЪЕКТ </samp> элемент.Авторы должны включать <samp>
Элемент OBJECT </samp> в элементе <samp> HEAD </samp> каркаса
документ и назовите его с атрибутом <samp> ID </samp>. Любой документ, который является
содержимое кадра в наборе кадров может ссылаться на этот идентификатор. </p>


 <p> Следующий пример иллюстрирует, как скрипт может ссылаться на <samp>
Элемент OBJECT </samp>, определенный для всего набора кадров: </p>

 <pre>
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN"
   «Http://www.w3.org/TR/html4/frameset.ОТД ">
<HTML>
<HEAD>
<TITLE> Это набор фреймов с OBJECT в HEAD </ TITLE>
<! - Этот ОБЪЕКТ не отображается! ->
<OBJECT data = "data.bar"> </ OBJECT>
</ HEAD>
<FRAMESET>
    <FRAME src = "bianca.html" name = "bianca">
</ FRAMESET>
</ HTML>

<! - В bianca.html ->
<HTML>
<HEAD>
<TITLE> Страница Бьянки </ TITLE>
</ HEAD>
<BODY>
 <em> ... начало документа ... </em>
<P>
<SCRIPT type = "text / javascript">
Родитель.myObject.myProperty
</ SCRIPT>
 <em> ... остальная часть документа ... </em>
</ BODY>
</ HTML>
 </pre>


 <h4><span class="ez-toc-section" id="1622"> 16.2.2 <samp>
РАМА </samp> элемент </span></h4>




 <p> <em> Определения атрибутов </em> </p>

 <dl>
 <dt> <samp> имя </samp> = <em> cdata </em> [CI] </dt>

 <dd> Этот атрибут присваивает имя текущему кадру. Это имя может быть использовано
как цель последующих ссылок. </dd>

 <dt> <samp> longdesc </samp> = <em> uri </em> [CT] </dt>

 <dd> Этот атрибут указывает ссылку на длинное описание кадра.это
описание должно дополнять краткое описание, предоставленное с использованием <samp>
атрибут title </samp> и может быть особенно полезен для невизуального пользователя
агенты. </dd>

 <dt> <samp> SRC </samp> = <em> URI </em> [CT] </dt>

 <dd> Этот атрибут указывает местоположение исходного содержимого, которое будет
содержится в кадре. </dd>

 <dt> <samp> noresize </samp> [CI] </dt>

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

 <dt> <samp> прокрутка </samp> = <samp>
авто | да | нет </samp> [CI] </dt>

 <dd> Этот атрибут определяет информацию прокрутки для окна кадра.Возможно
ценности

 <ul>
 <li> <samp> auto: </samp> Это значение указывает агенту пользователя обеспечить прокрутку
устройства для оконного окна при необходимости. Это значение по умолчанию. </li>

 <li> <samp> да: </samp> Это значение указывает агенту пользователя всегда предоставлять
скроллеры для оконной рамы. </li>

 <li> <samp> no: </samp> Это значение указывает агенту пользователя не предоставлять прокрутку
устройства для оконной рамы. </li>
 </ul>
 </dd>

 <dt> <samp> Frameborder </samp> =
 <samp> 1 | 0 </samp> [CN] </dt>

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

 <ul>
 <li> <samp> 1: </samp> Это значение указывает пользовательскому агенту нарисовать разделитель между
этот кадр и каждый соседний кадр. Это значение по умолчанию. </li>

 <li> <samp> 0: </samp> Это значение указывает агенту пользователя не рисовать разделитель
между этим кадром и каждым соседним кадром. Обратите внимание, что разделители могут быть нарисованы
тем не менее, рядом с этим кадром, если он указан другими кадрами. </li>
 </ul>
 </dd>

 <dt> <samp> ширина полосы </samp> = <em> пикселей </em> [CN] </dt>

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

 <dt> <samp> предельная высота </samp> = <em> пикселей </em> [CN] </dt>

 <dd> Этот атрибут определяет количество места, которое остается между кадрами
содержимое в его верхней и нижней части. Значение должно быть больше нуля
(пиксели). Значение по умолчанию зависит от агента пользователя. </dd>
 </dl>



 <p> <em> Атрибуты, определенные в другом месте </em> </p>




 <p> <samp>
FRAME </samp> элемент определяет содержание и внешний вид одного
Рамка.</p>

 <h5><span class="ez-toc-section" id="i-23"> Установка начального содержимого кадра </span></h5>

 <p> Атрибут <samp> src </samp> определяет начальный документ, который будет
содержат. </p>


 <p> Следующий пример HTML-документа: </p>

 <pre>
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN"
   "Http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE> Документ с фреймами </ TITLE>
</ HEAD>
<FRAMESET cols = "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>
 </pre>

 <p> должен создать структуру кадра примерно так: </p>

 <pre>
 ------------------------------------------
| Кадр 1 | Кадр 3 | Кадр 4 |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
------------- | | |
| Рамка 2 | | |
| | | |
| | | |
 ------------------------------------------
 </pre>

 <p> и заставить пользовательский агент загружать каждый файл в отдельном представлении.</p>


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


 <p> НЕЗАКОННЫЙ ПРИМЕР:
 <br/> Следующее определение набора фреймов не является допустимым HTML, так как содержимое
второй кадр находится в том же документе, что и набор фреймов. </p>

 <pre>
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN"
   "Http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE> Документ с фреймами </ TITLE>
</ HEAD>
<FRAMESET cols = "50%, 50%">
  <FRAME src = "contents_of_frame1.HTML ">
  <FRAME src = "# anchor_in_same_document">
  <NOFRAMES>
   <em> ... немного текста ... </em>
  <h3><span class="ez-toc-section" id="_FRAME_1_2_3_4_1_2_3_-_CI_name_A_LINK_AREA_FORM_framesethtml_init_dynamichtml_2_3_1631_BASE_BASE_BASE_2_3_1632_target_BASE_BASE_BASE_-_F_F_1641_NOFRAMES_id_class_lang_onclick_ondblclick_onmousedown_onmouseup_onmouseover_onmousemove_onmouseout_onkeypress_onkeydown_onkeyup_NOFRAMES_NOFRAMES_NOFRAMES_NOFRAMES_DTD_DTD_NOFRAMES_FRAMESET_-_NOFRAMES_NOFRAMES_DTD_1642_Long_longdesc_url_-_URL-_noresize_noresize_-_scrolling_auto_-_frameborder_auto_-_0_1_-_noframes_-_CSS_HTML_HTML-_adsbygoogle_windowadsbygoogle_push_HTML_HTML_-_HTML_-_2_3_-_1_1_HTML-_HTML_HTML5_-_iframe_CSS_HTML5"> <A name="anchor_in_same_document"> Важный раздел </A> </ h3>
   <em> ... немного текста ... </em>
  </ NOFRAMES>
</ FRAMESET>
</ HTML>
 </pre>


 <h5> Визуальный рендеринг кадра </h5>


 <p> Следующий пример иллюстрирует использование декоративной рамки <samp> FRAME </samp>.
атрибутов. Мы указываем, что кадр 1 не будет иметь полос прокрутки. Кадр 2 будет
оставьте пустое пространство вокруг его содержимого (изначально, файла изображения) и рамки
не будет изменяемого размера.Границы между кадрами 3 и 4 не отображаются.
будет отображаться (по умолчанию) между кадрами 1, 2 и 3. </p>

 <pre>
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN"
   "Http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE> Документ с фреймами </ TITLE>
</ HEAD>
<FRAMESET cols = "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>
 </pre>





 <p> <em> <strong> Примечание. </strong> Для получения информации о текущей практике в
Чтобы определить цель кадра, ознакомьтесь с примечаниями к кадрам в
приложение. </em> </p>



 <p> <em> Определения атрибутов </em> </p>

 <dl>
 <dt> <samp> цель </samp> = <em> кадр-цель </em> [CI] </dt>

 <dd> Этот атрибут указывает имя фрейма, в котором должен быть документ
открыт.</dd>
 </dl>


Присвоив имя кадру с помощью атрибута <samp> name </samp>, авторы могут
называть его «целью» ссылок, определяемых другими элементами. <samp> цель </samp>
атрибут может быть установлен для элементов, которые создают ссылки (<samp> A </samp>,
 <samp>
LINK </samp>), карты изображений (<samp> AREA </samp>) и формы (<samp> FORM </samp>).

 <p> Пожалуйста, обратитесь к разделу
целевые имена кадров для получения информации о распознанных именах кадров. </p>


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

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

 <p> Затем в init_dynamic.html мы ссылаемся на фрейм с именем
«Динамический».</p>

 <pre>
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN"
   "Http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> Документ с якорями с конкретными целями </ TITLE>
</ HEAD>
<BODY>
 <em> ... начало документа ... </em>
<P> Теперь вы можете перейти к
    <a href="slide2.html" target="dynamic" rel="noopener noreferrer"> слайд 2. </A>
 <em> ... больше документа ... </em>
<P> У тебя все отлично. Теперь на
    <a href="slide3.html" target="dynamic" rel="noopener noreferrer"> слайд 3.</A>
</ BODY>
</ HTML>
 </pre>

 <p> Активация любой ссылки открывает новый документ во фрейме с именем «динамический»
в то время как другой кадр, «фиксированный», сохраняет свое начальное содержимое. </p>




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

 <p> Когда много ссылок в одном документе обозначают одну цель, это
можно указать цель один раз и обойтись без цели <samp> </samp>
атрибут каждого элемента. Это делается путем установки цели <samp> </samp>
атрибут элемента <samp> BASE </samp></p>


 <p> Мы вернемся к предыдущему примеру, на этот раз с учетом цели
информацию, определив ее в элементе <samp> BASE </samp> и удалив ее из
<samp>
А </samp> элементов. </p>

 <pre>
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN"
   "Http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> Документ с BASE с определенной целью </ TITLE>
<BASE href = "http://www.mycom.com/Slides" target = "dynamic">
</ HEAD>
<BODY>
 <em>.. начало документа ... </em>
<P> Теперь вы можете перейти к <A href="slide2.html"> слайду 2. </A>
 <em> ... больше документа ... </em>
<P> У тебя все отлично. Теперь на
       <A href="slide3.html"> слайд 3. </A>
</ BODY>
</ HTML>
 </pre>


 <h4> 16.3.2 Целевая семантика </h4>

 <p> Пользовательские агенты должны определить целевой кадр, в который нужно загрузить связанный
ресурс в соответствии со следующими приоритетами (самый высокий приоритет
самый низкий): </p>

 <ol>
 <li> Если элемент имеет
 Атрибут <samp> target </samp> устанавливается на известный кадр, когда
элемент активирован (т.е.ссылка идет или форма обрабатывается),
ресурс, обозначенный элементом, должен быть загружен в целевой кадр. </li>

 <li> Если элемент не имеет установленного целевого атрибута </samp> <samp>, но <samp>
Элемент BASE </samp> делает, элемент <samp> BASE </samp> цель </samp>
Атрибут определяет кадр. </li>

 <li> Если ни элемент, ни элемент <samp> BASE </samp> не относятся к цели,
ресурс, обозначенный элементом, должен быть загружен во фрейм
содержащий элемент.</li>

 <li> Если какой-либо целевой атрибут <samp> относится к неизвестному кадру F,
Пользовательский агент должен создать новое окно и фрейм, присвоить имя F
кадр и загрузить ресурс, обозначенный элементом в новом
Рамка. </li>
 </ol>

 <p> Пользовательские агенты могут предоставлять пользователям механизм для переопределения цели <samp> </samp>
атрибут. </p>



 <p> Авторы должны предоставлять альтернативный контент для тех пользовательских агентов, которые не
поддерживают кадры или настроены не отображать кадры. </p>

 <h4> 16.4.1 <samp> NOFRAMES </samp> элемент </h4>




 <p> <em> Атрибуты, определенные в другом месте </em> </p>

 <ul>
 <li> <samp>
id </samp>, <samp> class </samp> (идентификаторы всего документа) </li>

 <li> <samp> lang </samp> (информация о языке), <samp>
реж. </samp> (текст
направление) </li>

 <li> <samp> заголовок </samp> (элемент
название) </li>

 <li> <samp>
стиль </samp> (встроенный стиль
информация) </li>

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


 <p> <samp>
Элемент NOFRAMES </samp> определяет контент, который должен отображаться только
пользовательские агенты, которые не поддерживают фреймы или настроены не отображать фреймы.Пользовательские агенты, поддерживающие фреймы, должны отображать только содержимое <samp>
Объявление NOFRAMES </samp> при настройке не отображать кадры. пользователь
агенты, которые не поддерживают фреймы, должны отображать содержимое <samp>
NOFRAMES </samp> в любом случае. </p>

 <p> <samp>
Элемент NOFRAMES </samp> является частью DTD как с переходным, так и с кадровым набором. В
документ, который использует DTD набора кадров, <samp> NOFRAMES </samp> может быть
используется в конце раздела FRAMESET документа. </p>


 <p> Например: </p>

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


 <p> <samp>
NOFRAMES </samp> можно использовать, например, в документе, являющемся источником
кадра и который использует переходный DTD.Это позволяет авторам объяснить
цель документа в тех случаях, когда он просматривается вне рамок или с
пользовательский агент, который не поддерживает фреймы. </p>

 <h4> 16.4.2 Long
описания кадров </h4>

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


 <p> Следующий документ набора фреймов описывает два фрейма. Левая рамка
содержит оглавление и правый кадр изначально содержит изображение
страус: </p>

 <pre>
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN"
   «Http://www.w3.org/TR/html4/frameset.ОТД ">
<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>
 </pre>

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

 <p> Таким образом, авторам не следует помещать изображение непосредственно в рамку. Вместо этого
изображение должно быть указано в отдельном HTML-документе, и там аннотировано
с соответствующим альтернативным текстом: </p>

 <pre>
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN"
   "Http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE> Хорошо разработанный документ с фреймами </ TITLE>
</ HEAD>
<FRAMESET cols = "20%, 80%">
   <FRAME src = "table_of_contents.HTML ">
   <FRAME src = "ostrich-container.html">
</ FRAMESET>
</ HTML>
 </pre>

 <pre>
<! - В страус-контейнере.html: ->
<HTML>
<HEAD>
<TITLE> Быстрый и мощный страус </ TITLE>
</ HEAD>
<P>
<OBJECT data = "ostrich.gif" type = "image / gif">
Эти страусы, несомненно, имеют приятный вкус!
</ OBJECT>
</ HTML>
 </pre>







 <p> <em> Определения атрибутов </em> </p>

 <dl>
 <dt> <samp> longdesc </samp> = <em> uri </em> [CT] </dt>

 <dd> Этот атрибут указывает ссылку на длинное описание кадра.это
описание должно дополнять краткое описание, предоставленное с использованием <samp>
атрибут title </samp> и особенно полезен для невизуального пользователя
агенты. </dd>

 <dt> <samp> имя </samp> = <em> cdata </em> [CI] </dt>

 <dd> Этот атрибут присваивает имя текущему кадру. Это имя может быть использовано
как цель последующих ссылок. </dd>

 <dt> <samp> ширина </samp> = <em> длина </em> [CN] </dt>

 <dd> Ширина встроенной рамки. </dd>

 <dt> <samp> высота </samp> = <em> длина </em> [CN] </dt>

 <dd> Высота встроенной рамы.</dd>
 </dl>



 <p> <em> Атрибуты, определенные в другом месте </em> </p>




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

 <p> Информация, которая должна быть вставлена ​​в линию, обозначена <samp>
src </samp> атрибут этого элемента.<em> содержание </em> из <samp> IFRAME </samp>
элемент, с другой стороны, должен отображаться только теми пользовательскими агентами, которые не
поддерживают кадры или настроены не отображать кадры. </p>


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

 <pre>
  <IFRAME src = "foo.html"
             scrolling = "auto" frameborder = "1">
  [Ваш пользовательский агент не поддерживает фреймы или в настоящее время настроен
  не отображать кадры.Тем не менее, вы можете посетить
  <A href="foo.html"> соответствующий документ. </A>]
  </ IFRAME>
 </pre>


 <p> Встроенные кадры не могут быть изменены (и, следовательно, они не принимают <samp>
атрибут noresize </samp>). </p>


 <p> <em> <strong> Примечание. </strong> HTML-документы также могут быть встроены в другой HTML
документы с
 <samp> ОБЪЕКТ </samp> элемент. Смотрите раздел по встроенным документам для
подробности. </em> </p>




                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ,<h2> HTML-фреймов — простое руководство по HTML </h2><div class="advv">
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>





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

<p> Наборы фреймов в наши дни используются редко, так как внедрение языков сценариев на стороне сервера, таких как php и asp, позволяет динамически создавать страницы содержимого.Внедрение HTML5 также предоставило новые методы создания макетов страниц без использования фреймов. </p>

 <dl>

<dt> Frame Set — <code> <frameset> ... </ frameset> </code> </dt>
<dd> Используется вместо тега <code> тела </code>, тег </code> набора кадров <code> определяет группу кадров.
Установка атрибута <code> строк </code> и <code> cols </code> позволяет вам создать количество кадров, необходимое для вашего макета. </dd>

<dd> <code> строк = "??, ??" </code> - Чтобы установить несколько кадров в строках, замените вопросительные знаки размером каждой строки в пикселях или в процентах.<code> * </code> может использоваться в качестве подстановочного знака, например: <code> rows = "100, *" </code> даст вам верхний кадр высотой 100 пикселей и нижний кадр с остальной частью экрана. </dd>
<dd> <code> cols = "??, ??" </code> - Как и в строках, в столбцах может быть указано количество кадров. </dd>
<dd> <code> border = "?" </code> - толщина рамки в пикселях. </dd>
<dd> <code> bordercolor = "?" </code> - Цвет границы между кадрами. (*) </dd>

<dt> Frame - <code> <frame> </code> </dt>
<dd> Каждый кадр в наборе будет нуждаться в теге <code> фрейма </code>, чтобы указать, какую веб-страницу следует загрузить в фрейм.Использует атрибут: </dd>
<dd> <code> src = "<i> url </i>" </code> - имя файла или URL-адрес страницы для отображения в кадре </dd>
<dd> <code> noresize = "noresize" </code> - Размер кадра не может быть изменен посетителем </dd>
<dd> <code> scrolling = "auto" </code> - Каждый кадр будет иметь вертикальную и горизонтальную полосы прокрутки, появляющиеся автоматически при необходимости. Вы можете изменить это, установив для <code> прокручиваемый атрибут </code> значение <code> да </code>, <code> нет </code> или <code> авто </code>. </dd>
<dd> <code> frameborder = "auto" </code> - Индивидуальная граница рамки.Установите <code> 0, 1 </code>, чтобы указать, должен ли этот кадр иметь рамку. </dd>

<dt> Содержимое без рамки - <code> <noframes> ... </ noframes> </code> </dt>
<dd> Очень старые браузеры не могут отображать фреймы, и в этом случае нам нужно указать, что эти браузеры должны отображать вместо фреймов.
Несмотря на то, что это больше не является проблемой, все же предлагается указывать контент без рамки при использовании фреймов.
Все, что находится между тегами <code> noframes </code>, не будет отображаться в современных браузерах, которые показывают контент в рамке.</dd>

 </dl>




 <h4> Пример: </h4>
 <p> Пример кадра с одной строкой заголовка, левым и правым столбцом и содержимым в центре. </p>
 <pre> <code> <html>
 <Голова>
  <title> Пример - Рамки </ title>
 </ HEAD>
 <frameset lines = "100, *">
   <frame name = "top" src = "frames_top.html">
   <frameset cols = "50, *, 50">
     <frame name = "left" src = "frames_left.html">
     <frame name = "mid" src = "frames_middle.html">
     <frame name = "right" src = "frames_right.HTML ">
   </ FRAMESET>
   <NOFRAMES>
     <я> ошибка для отображения тем, кто не может видеть кадры </ I>
   </ NOFRAMES>
 </ FRAMESET>
</ html> </code> </pre>
 <p> Посмотрите живую демонстрацию этого примера или откройте в новом окне. <small> (Примечание: закрыть окно или вкладку, чтобы вернуться к руководству) </small> </p>




 <h4> (*) Важное примечание: </h4>
 <p> Теги, помеченные (*), все еще должны работать, но были заменены каскадными таблицами стилей (CSS), которые теперь являются рекомендуемым способом изменения шрифта, цвета, интервала, границы или выравнивания элементов HTML.</p>




                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ,<h2> HTML-фреймов </h2><div class="advv">
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>







 <p> В HTML фреймы позволяют вам представить несколько документов HTML в одном окне. Например, у вас может быть левая рамка для навигации и правая рамка для основного контента. </p>

 <p> Кадры достигаются путем создания страницы </dfn> набора фреймов <dfn> и определения каждого кадра внутри этой страницы. Эта страница набора фреймов фактически не содержит никакого контента - просто ссылка на каждый фрейм. Тег HTML <code> <frame> </code> используется для указания каждого кадра в наборе кадров.Все теги фреймов вложены в тег <code> <frameset> </code>. </p>

 <p> Итак, другими словами, если вы хотите создать веб-страницу с 2 фреймами, вам нужно будет создать 3 файла - 1 файл для каждого фрейма и 1 файл, чтобы указать, как они сочетаются друг с другом. </p>

 <p> HTML-фреймы больше не рекомендуются спецификацией HTML (начиная с HTML5) из-за их низкого удобства использования. Рекомендуется использовать элемент <code> <iframe> </code> для создания <i> элементов iframe </i>.</p>
 <p> Кроме того, вы можете использовать CSS для создания HTML5-совместимых фреймов. </p>

 <h3><span class="ez-toc-section" id="_FRAME_1_2_3_4_1_2_3_-_CI_name_A_LINK_AREA_FORM_framesethtml_init_dynamichtml_2_3_1631_BASE_BASE_BASE_2_3_1632_target_BASE_BASE_BASE_-_F_F_1641_NOFRAMES_id_class_lang_onclick_ondblclick_onmousedown_onmouseup_onmouseover_onmousemove_onmouseout_onkeypress_onkeydown_onkeyup_NOFRAMES_NOFRAMES_NOFRAMES_NOFRAMES_DTD_DTD_NOFRAMES_FRAMESET_-_NOFRAMES_NOFRAMES_DTD_1642_Long_longdesc_url_-_URL-_noresize_noresize_-_scrolling_auto_-_frameborder_auto_-_0_1_-_noframes_-_CSS_HTML_HTML-_adsbygoogle_windowadsbygoogle_push_HTML_HTML_-_HTML_-_2_3_-_1_1_HTML-_HTML_HTML5_-_iframe_CSS_HTML5"> Создание фреймов </span></h3>
 <h4><span class="ez-toc-section" id="Two_Column_Frameset"> Two Column Frameset </span></h4>
 <p> HTML код: </p>

 <p> Набор фреймов (frame_example_frameset_1.html): </p>


      
    

                  

                  
                   
                    
                   
                    
                   
                    
                  
                
                 <p>



                
<HTML>
<Голова>
<title> Страница набора фреймов <title>
</ HEAD>
<frameset cols = "25%, *">
  <frame src = "frame_example_left.html "/>
  <frame src = "frame_example_right.html" />
</ FRAMESET>
</ Html>





                
                
                      
                
                 </p>
                
 
            




 <p> Левый фрейм (frame_example_left.html): </p>


                
                 <p>



                
<HTML>
<Тело>
<p> Это левый фрейм (frame_example_left.HTML). </ р>
</ Body>
</ Html>





                
                
                      
                
                 </p>
                
 
            



 <p> Правая рамка (frame_example_right.html): </p>


                
                 <p>



                
<HTML>
<Тело>
<p> Это правильный кадр (frame_example_right.HTML). </ р>
</ Body>
</ Html>





                
                
                      
                
                 </p>
                
 
            



Посмотреть результат



 <h4><span class="ez-toc-section" id="i-24"> Добавить верхнюю раму </span></h4>
 <p> Это можно сделать, «вложив» кадр в другой кадр. </p>
 <p> HTML код: </p>

 <p> Набор фреймов (frame_example_frameset_2.html): </p>


                
                 <p>



                
<HTML>
<Голова>
<title> Страница набора фреймов </ title>
</ HEAD>
 <b> <frameset columns = "20%, *">
  <frame src = "/ html / tutorial / frame_example_top.html"> </b>
<frameset cols = "25%, *">
  <frame src = "/ html / tutorial / frame_example_left.html" />
  <frame src = "/ html / tutorial / frame_example_right.html "/>
</ FRAMESET>
 <b> </ frameset> </b>
</ Html>





                
                
                      
                
                 </p>
                
 
            



 <p> Верхняя рамка (frame_example_top.html): </p>


                
                 <p>



                
<HTML>
<Тело>
<p> Это верхний фрейм (frame_example_top.HTML). </ р>
</ Body>
</ Html>





                
                
                      
                
                 </p>
                
 
            



 <p> (левый и правый кадры не меняются) </p>

Посмотреть результат


 <h4><span class="ez-toc-section" id="i-25"> Удалить границы </span></h4>
 <p> Вы можете избавиться от границ, если хотите.Официально вы делаете это, используя <code> frameborder = "0" </code>. Я говорю официально, потому что именно это определяет спецификация HTML. При этом разные браузеры поддерживают разные атрибуты, поэтому для максимальной поддержки браузера используйте атрибуты <code> frameborder </code>, <code> border </code> и <code> framepacing </code>. </p>
 <p> HTML код: </p>

 <p> Набор фреймов (frame_example_frameset_3.html): </p>


                
                 <p>



                
<HTML>
<Голова>
<title> Страница набора фреймов </ title>
</ HEAD>
<frameset <b> border = "0" frameborder = "0" framespacing = "0" </b> строк = "20%, *">
  <frame src = "/ html / tutorial / frame_example_top.HTML ">
<frameset cols = "25%, *">
  <frame src = "/ html / tutorial / frame_example_left.html" />
  <frame src = "/ html / tutorial / frame_example_right.html" />
</ FRAMESET>
</ FRAMESET>
</ Html>





                
                
                      
                
                 </p>
                
 
            



 <p> (левая, правая и верхняя рамки не меняются) </p>

Посмотреть результат


 <h4><span class="ez-toc-section" id="i-26"> Загрузить другую раму </span></h4>
 <p> Большинство веб-сайтов, использующих фреймы, настроены таким образом, что при нажатии ссылки в одном фрейме загружается другой фрейм.Типичным примером этого является наличие меню в одном кадре, а основного тела - в другом (как в нашем примере). </p>
 <p> Это достигается с помощью атрибута <code> name </code>. Вы назначаете имя целевому фрейму, а затем в своих ссылках вы указываете имя целевого фрейма с помощью атрибута <code> target </code>. </p>
 Совет <p>: Вы можете использовать <code> base target = "content" </code> в верхней части файла меню (при условии, что все ссылки имеют один и тот же целевой кадр). Это избавило бы от необходимости указывать целевой кадр в каждой отдельной ссылке.</p>

 <p> HTML код: </p>

 <p> Набор фреймов (frame_example_frameset_4.html): </p>


                
                 <p>



                
<HTML>
<Голова>
<title> Страница набора фреймов </ title>
</ HEAD>
<frameset border = "0" frameborder = "0" framespacing = "0" cols = "25%, *">
  <frame src = "/ html / tutorial / frame_example_left_2.html" />
  <frame <b> name = "content" </b> src = "/ html / tutorial / frame_example_yellow.html "/>
</ FRAMESET>
</ Html>





                
                
                      
                
                 </p>
                
 
            




 <p> Левый фрейм (frame_example_left_2.html): </p>


                
                 <p>



                
<HTML>
<Тело>
<p> Это левый фрейм (frame_example_left_2.HTML). </ р>
<Р>
<a <b> target="content" </b> href="frame_example_yellow.html"> Желтый </a> <br />
<a <b> target="content" </b> href="frame_example_lime.html"> Лайм </a>
</ Р>
</ Body>
</ Html>





                
                
                      
                
                 </p>
                
 
            



 <p> Желтая рамка (frame_example_yellow.html): </p>


                
                 <p>



                
<HTML>
<Тело>
<p> Это желтая рамка (frame_example_yellow.html). </ p>
</ Body>
</ Html>





                
                
                      
                
                 </p>
                
 
            



 <p> Рамка извести (frame_example_lime.html): </p>


                
                 <p>



                
<HTML>
<Тело>
<p> Это кадр извести (frame_example_lime.html). </ p>
</ Body>
</ Html>





                
                
                      
                
                 </p>
                
 
            



Посмотреть результат


 <h3><span class="ez-toc-section" id="Tag_Reference"> Tag Reference </span></h3>
 <p> Вот еще немного информации о вышеупомянутых тегах.</p>
 <h4><span class="ez-toc-section" id="_Frameset"> тег Frameset </span></h4>
 <p> В своем теге frameset вы указываете <code> столбцов </code> или <code> строк </code>, в зависимости от того, хотите ли вы, чтобы кадры проходили вертикально или горизонтально. </p>
 <table>
<tr>
<th> Атрибут </th> <th> Описание </th>
</tr>
<tr>
<td> строк </td> <td> Указывает количество строк и их высоту в пикселях, процентах или относительной длине. По умолчанию 100% </td>
</tr>
<tr>
<td> столбцов </td> <td> Указывает количество столбцов и их ширину в пикселях, процентах или относительной длине.По умолчанию 100% </td>
</tr>
 </table>

 <h4><span class="ez-toc-section" id="i-27"> Рамка бирка </span></h4>
 <p> Для каждого кадра, который вы хотите отобразить, вы указываете <code> кадров, тег </code>. Вы вкладываете их в тег frameset. </p>
 <table>
<tr>
<th> Атрибут </th> <th> Описание </th>
</tr>
<tr>
<td> name </td> <td> Назначает имя фрейму. Это полезно для загрузки содержимого в один кадр из другого. </td>
</tr>
<tr>
<td> longdesc </td> <td> Длинное описание - это может привести к более короткому описанию, указанному в атрибуте title.</td>
</tr>
<tr>
<td> SRC </td> <td> Расположение содержимого фрейма (например, HTML-страница, которая будет загружена в фрейм). </td>
</tr>
<tr>
<td> noresize </td> <td> Указывает, изменяется ли размер кадра или нет (т. Е. Может ли пользователь изменить размер кадра или нет). </td>
</tr>
<tr>
<td> прокрутка </td> <td> Должна ли быть прокручиваемая рамка или нет (то есть должны появиться полосы прокрутки). Возможные значения: </td>
</tr>
<tr>
<td> frameborder </td> <td> Должен ли кадр иметь рамку или нет.Возможные значения: </td>
</tr>
<tr>
<td> marginwidth </td> <td> Определяет поле в пикселях между содержимым фрейма и его левым и правым полями. </td>
</tr>
<tr>
<td> marginheight </td> <td> Определяет поле в пикселях между содержимым фрейма и его верхним и нижним полями. </td>
</tr>
 </table>

 <h4><span class="ez-toc-section" id="_noframe"> тег noframe </span></h4>
 <p> Тег <code> noframes </code> используется, если браузер пользователя не поддерживает фреймы.Все, что вы вводите между тегами noframes, отображается в их браузере. </p>

 <p> HTML код: </p>



                
                 <p>



                
<HTML>
<Голова>
<title> Страница набора фреймов <title>
</ HEAD>
<frameset cols = "25%, *">
   <b> <noframes>
  <body> Ваш браузер не поддерживает фреймы.
  Поэтому это noframe версия сайта.</ Body>
  </ noframes> </b>
  <frame src = "frame_example_left.html" />
  <frame src = "frame_example_right.html" />
</ FRAMESET>
</ Html>





                
                
                      
                
                 </p>
                
 
            




 <p> Если вы заинтересованы в создании веб-сайта на основе фреймов, эти шаблоны HTML-фреймов помогут вам начать работу.</p>












          
          

          




 



<p> <i/> Крякит на Facebook </p>
<p> <i/> Главная | О | Контакт | Условия использования | Политика конфиденциальности </p>
<p> © Copyright 2000 - 2020 Quackit.com </p>



        
        

        
        

        
        
,<div class='yarpp-related yarpp-related-none'>
<p>No related posts.</p>
</div>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<span class="cat-links">Категория: <a href="https://forjobathome.ru/category/raznoe" rel="category tag">Разное</a></span>	</footer><!-- .entry-footer -->
	</div>
</article><!-- #post-6259 -->

	<nav class="navigation post-navigation" role="navigation" aria-label="Записи">
		<h2 class="screen-reader-text">Навигация по записям</h2>
		<div class="nav-links"><div class="nav-previous"><a href="https://forjobathome.ru/raznoe/kak-propisat-ankory-dlya-ssylok-chto-takoe-ankor-ssylki-i-kak-pravilno-eyo-sozdat.html" rel="prev">Как прописать анкоры для ссылок – Что такое анкор ссылки и как правильно её создать.</a></div><div class="nav-next"><a href="https://forjobathome.ru/raznoe/plan-i-plan-znacheniya-vikipediya.html" rel="next">План и – План (значения) — Википедия</a></div></div>
	</nav>    <div class="wpdiscuz_top_clearing"></div>
    <div id="comments" class="comments-area"><div id="respond" style="width: 0;height: 0;clear: both;margin: 0;padding: 0;"></div>            <h3 id="wc-comment-header">
                                Отправить ответ            </h3>
                    <div id="wpcomm" class="wpdiscuz_unauth wpd-default">
            <div class="wpdiscuz-form-top-bar">
                <div class="wpdiscuz-ftb-left">
                                                            <div id="wc_show_hide_loggedin_username">
                                            </div>
                </div>
                                <div class="wpd-clear"></div>
            </div>


                        <div class="wc_social_plugin_wrapper">
                            </div>
                    <div class="wc-form-wrapper wc-main-form-wrapper"  id='wc-main-form-wrapper-0_0' >
            <div class="wpdiscuz-comment-message" style="display: block;"></div>
                                        <form class="wc_comm_form wc_main_comm_form" method="post"  enctype="multipart/form-data">
                    <div class="wc-field-comment">
                        <div class="wpdiscuz-item wc-field-textarea" >
                            <div class="wpdiscuz-textarea-wrap ">

                                                                                                        <div class="wc-field-avatararea">
                                        <img alt='avatar' src='https://secure.gravatar.com/avatar/?s=40&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=80&d=mm&r=g 2x' class='avatar avatar-40 photo avatar-default' height='40' width='40' loading='lazy'/>                                    </div>
                                
                                <textarea id="wc-textarea-0_0"   placeholder="Начать обсуждение..." required name="wc_comment" class="wc_comment wpd-field"></textarea>
                                                                                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="wc-form-footer"  style="display: none;"> 
                                <div class="wpd-form-row">
                    <div class="wpd-form-col-left">
                        <div class="wpdiscuz-item wc_name-wrapper wpd-has-icon">
                                <div class="wpd-field-icon"><i class="fas fa-user"></i></div>
                                                <input value="" required="required" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Имя*" maxlength="50" pattern=".{3,50}" title="">
                            </div>
                        <div class="wpdiscuz-item wc_email-wrapper wpd-has-icon">
                                    <div class="wpd-field-icon"><i class="fas fa-at"></i></div>
                                                <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
                            </div>
                            <div class="wpdiscuz-item wc_website-wrapper wpd-has-icon">
                                            <div class="wpd-field-icon"><i class="fas fa-link"></i></div>
                                        <input value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
                                            </div>
                        </div>
                <div class="wpd-form-col-right">
                    <div class="wc-field-captcha wpdiscuz-item wc_captcha-wrapper">
            <div class="wc-captcha-input">
                <input type="text" maxlength="5" value="" autocomplete="off" required="required" name="wc_captcha"  class="wpd-field wc_field_captcha" placeholder="Code" title="Вставьте код CAPTCHA">
            </div>
            <div class="wc-label wc-captcha-label">
                                <a class="wpdiscuz-nofollow" href="#" rel="nofollow"><img alt="wpdiscuz_captcha" class="wc_captcha_img" src="https://forjobathome.ru/wp-content/plugins/wpdiscuz/utils/captcha/captcha.php?key=c5f825ba679ab0"  width="80" height="26"/></a><a class="wpdiscuz-nofollow wc_captcha_refresh_img" href="#" rel="nofollow"><img  alt="refresh" class="" src="https://forjobathome.ru/wp-content/plugins/wpdiscuz/assets/img/captcha-loading.png" width="16" height="16"/></a>
                <input type="hidden" id="c5f825ba679ab0" class="wpdiscuz-cnonce" name="cnonce" value="c5f825ba679ab0" />
            </div>
            <div class="clearfix"></div>
        </div>
                <div class="wc-field-submit">
                                            
                                            <label class="wpd_label" title="Сообщать о всех новых ответах на мои комментарии">
                            <input id="wc_notification_new_comment-0_0" class="wc_notification_new_comment-0_0 wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type" />
                            <span class="wpd_label__text">
                                <span class="wpd_label__check">
                                    <i class="fas fa-bell wpdicon wpdicon-on"></i>
                                    <i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
                                </span>
                            </span>
                        </label>
                                                                <input class="wc_comm_submit wc_not_clicked button alt" type="submit" name="submit" value="Оставить комментарий">
        </div>
                </div>
                    <div class="clearfix"></div>
        </div>
                            </div>
                    <div class="clearfix"></div>
                    <input type="hidden" class="wpdiscuz_unique_id" value="0_0" name="wpdiscuz_unique_id">
                </form>
                        </div>
                <div id = "wpdiscuz_hidden_secondary_form" style = "display: none;">
                    <div class="wc-form-wrapper wc-secondary-form-wrapper"  id='wc-secondary-form-wrapper-wpdiscuzuniqueid'  style='display: none;' >
            <div class="wpdiscuz-comment-message" style="display: block;"></div>
                            <div class="wc-secondary-forms-social-content"></div><div class="clearfix"></div>
                                        <form class="wc_comm_form wc-secondary-form-wrapper" method="post"  enctype="multipart/form-data">
                    <div class="wc-field-comment">
                        <div class="wpdiscuz-item wc-field-textarea" >
                            <div class="wpdiscuz-textarea-wrap ">

                                                                                                        <div class="wc-field-avatararea">
                                        <img alt='avatar' src='https://secure.gravatar.com/avatar/?s=48&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=96&d=mm&r=g 2x' class='avatar avatar-48 photo avatar-default' height='48' width='48' loading='lazy'/>                                    </div>
                                
                                <textarea id="wc-textarea-wpdiscuzuniqueid"   placeholder="Присоединиться к обсуждению..." required name="wc_comment" class="wc_comment wpd-field"></textarea>
                                                                                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="wc-form-footer"  style="display: none;"> 
                                <div class="wpd-form-row">
                    <div class="wpd-form-col-left">
                        <div class="wpdiscuz-item wc_name-wrapper wpd-has-icon">
                                <div class="wpd-field-icon"><i class="fas fa-user"></i></div>
                                                <input value="" required="required" class="wc_name wpd-field" type="text" name="wc_name" placeholder="Имя*" maxlength="50" pattern=".{3,50}" title="">
                            </div>
                        <div class="wpdiscuz-item wc_email-wrapper wpd-has-icon">
                                    <div class="wpd-field-icon"><i class="fas fa-at"></i></div>
                                                <input value="" required="required" class="wc_email wpd-field" type="email" name="wc_email" placeholder="Email*">
                            </div>
                            <div class="wpdiscuz-item wc_website-wrapper wpd-has-icon">
                                            <div class="wpd-field-icon"><i class="fas fa-link"></i></div>
                                        <input value="" class="wc_website wpd-field" type="text" name="wc_website" placeholder="Website">
                                            </div>
                        </div>
                <div class="wpd-form-col-right">
                    <div class="wc-field-captcha wpdiscuz-item wc_captcha-wrapper">
            <div class="wc-captcha-input">
                <input type="text" maxlength="5" value="" autocomplete="off" required="required" name="wc_captcha"  class="wpd-field wc_field_captcha" placeholder="Code" title="Вставьте код CAPTCHA">
            </div>
            <div class="wc-label wc-captcha-label">
                                <a class="wpdiscuz-nofollow" href="#" rel="nofollow"><img alt="wpdiscuz_captcha" class="wc_captcha_img" src="https://forjobathome.ru/wp-content/plugins/wpdiscuz/utils/captcha/captcha.php?key=c5f825ba679ddd"  width="80" height="26"/></a><a class="wpdiscuz-nofollow wc_captcha_refresh_img" href="#" rel="nofollow"><img  alt="refresh" class="" src="https://forjobathome.ru/wp-content/plugins/wpdiscuz/assets/img/captcha-loading.png" width="16" height="16"/></a>
                <input type="hidden" id="c5f825ba679ddd" class="wpdiscuz-cnonce" name="cnonce" value="c5f825ba679ddd" />
            </div>
            <div class="clearfix"></div>
        </div>
                <div class="wc-field-submit">
                                            
                                            <label class="wpd_label" title="Сообщать о всех новых ответах на мои комментарии">
                            <input id="wc_notification_new_comment-wpdiscuzuniqueid" class="wc_notification_new_comment-wpdiscuzuniqueid wpd_label__checkbox" value="comment" type="checkbox" name="wpdiscuz_notification_type" />
                            <span class="wpd_label__text">
                                <span class="wpd_label__check">
                                    <i class="fas fa-bell wpdicon wpdicon-on"></i>
                                    <i class="fas fa-bell-slash wpdicon wpdicon-off"></i>
                                </span>
                            </span>
                        </label>
                                                                <input class="wc_comm_submit wc_not_clicked button alt" type="submit" name="submit" value="Оставить комментарий">
        </div>
                </div>
                    <div class="clearfix"></div>
        </div>
                            </div>
                    <div class="clearfix"></div>
                    <input type="hidden" class="wpdiscuz_unique_id" value="wpdiscuzuniqueid" name="wpdiscuz_unique_id">
                </form>
                        </div>
                </div>
                                           

                                    <div class="wpdiscuz-front-actions">
                                                    <div class="wpdiscuz-sbs-wrap">
                                <span><i class="far fa-envelope" aria-hidden="true"></i>  Подписаться  <i class="fas fa-caret-down" aria-hidden="true"></i></span>
                            </div>
                                                                        <div class="clearfix"></div>
                    </div>
                                                    <div class="wpdiscuz-subscribe-bar wpdiscuz-hidden">
                                                    <form action="https://forjobathome.ru/wp-admin/admin-ajax.php?action=addSubscription" method="post" id="wpdiscuz-subscribe-form">
                                <div class="wpdiscuz-subscribe-form-intro">Уведомление о </div>
                                <div class="wpdiscuz-subscribe-form-option" style="width:40%;">
                                    <select class="wpdiscuz_select" name="wpdiscuzSubscriptionType" >
                                                                                    <option value="post">новые последующие комментарии</option>
                                                                                                                            <option value="all_comment" >новые ответы на мои комментарии</option>
                                                                            </select>
                                </div>
                                                                    <div class="wpdiscuz-item wpdiscuz-subscribe-form-email">
                                        <input  class="email" type="email" name="wpdiscuzSubscriptionEmail" required="required" value="" placeholder="Email"/>
                                    </div>
                                                                <div class="wpdiscuz-subscribe-form-button">
                                    <input id="wpdiscuz_subscription_button" type="submit" value="›" name="wpdiscuz_subscription_button" />
                                </div> 
                                                                <input type="hidden" id="wpdiscuz_subscribe_form_nonce" name="wpdiscuz_subscribe_form_nonce" value="bcb7147b91" /><input type="hidden" name="_wp_http_referer" value="/raznoe/frejmy-v-html-primery-html-frame-frameset-noframe-iframe.html" />                                                                <input type="hidden" value="6259" name="wpdiscuzSubscriptionPostId" />
                            </form>
                                                <div class="wpdiscuz_clear"></div>
                                            </div>
                    
                                <div id="wcThreadWrapper" class="wc-thread-wrapper">
                                    
                    <div class="wpdiscuz-comment-pagination">
                                            </div>
                </div>
                <div class="wpdiscuz_clear"></div>
                                            </div>
        </div>
        <div id="wpdiscuz-loading-bar" class="wpdiscuz-loading-bar wpdiscuz-loading-bar-unauth"></div>
        
		</main><!-- #main -->
	</div><!-- #primary -->

        </div>
    </section>
   <footer class="wrapper wrap-footer">
 
         <section class="wrapper footer-widget">
            <div class="container">
                <div class="row">                    
                                        
                </div>
            </div>
        </section>
   
    <!-- footer site info -->
<section id="colophon" class="wrapper site-footer" >
    <div class="container">
        <div class="row">
            <div class="xs-12 col-sm-6 col-md-6">
                <div class="site-info">
                <p class="endtext"><strong>© 2007-2019 forjobathome.ru<br></strong>
         Использование материалов сайта разрешено и
         <br>всячески приветствуется при одном условии:<br>
         <a href="./copyright.htm" title="" class="stext7">наличие гиперссылки</a> на данный ресурс!
         </p>
                  </div><!-- .site-info -->
                </div>
                <div class="xs-12 col-sm-6 col-md-6">
                    <div class="footer-menu">
                        <nav id="footer-site-navigation" class="footer-main-navigation" role="navigation" aria-label="footer-menu">
                            <div class="menu-footer-menu-container"> 
                                                            
                            </div> 
                        </nav><!-- #site-navigation --> 
                        </div>
                    </div>
                </div>
            </div>
        </section><!-- #colophon -->    
   
   </footer><!-- #colophon -->
<!-- *****************************************
Footer section ends
****************************************** -->
<a id="gotop" class="greenturtle-back-to-top" href="#page"><i class="fa fa-angle-up"></i></a>
</div><!-- #page -->
<div style="display:none">
</div>
		<style type="text/css">
							.pgntn-page-pagination {
					text-align: left !important;
				}
				.pgntn-page-pagination-block {
					width: 60% !important;
					padding: 0 0 0 0;
									}
				.pgntn-page-pagination a {
					color: #1e14ca !important;
					background-color: #ffffff !important;
					text-decoration: none !important;
					border: 1px solid #cccccc !important;
									}
				.pgntn-page-pagination a:hover {
					color: #000 !important;
				}
				.pgntn-page-pagination-intro,
				.pgntn-page-pagination .current {
					background-color: #efefef !important;
					color: #000 !important;
					border: 1px solid #cccccc !important;
									}
			.archive #nav-above,
					.archive #nav-below,
					.search #nav-above,
					.search #nav-below,
					.blog #nav-below,
					.blog #nav-above,
					.navigation.paging-navigation,
					.navigation.pagination,
					.pagination.paging-pagination,
					.pagination.pagination,
					.pagination.loop-pagination,
					.bicubic-nav-link,
					#page-nav,
					.camp-paging,
					#reposter_nav-pages,
					.unity-post-pagination,
					.wordpost_content .nav_post_link,.page-link,
					.page-links,#comments .navigation,
					#comment-nav-above,
					#comment-nav-below,
					#nav-single,
					.navigation.comment-navigation,
					comment-pagination {
						display: none !important;
					}
					.single-gallery .pagination.gllrpr_pagination {
						display: block !important;
					}		</style>
	<a id='wpdUserContentInfoAnchor' style='display:none;' rel='#wpdUserContentInfo' data-wpd-lity>wpDiscuz</a><div id='wpdUserContentInfo' style='overflow:auto;background:#FDFDF6;padding:20px;width:600px;max-width:100%;border-radius:6px;' class='lity-hide'></div><link rel='stylesheet' id='yarppRelatedCss-css'  href='https://forjobathome.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='pgntn_stylesheet-css'  href='https://forjobathome.ru/wp-content/plugins/pagination/css/nav-style.css?ver=5.5.1' type='text/css' media='all' />
<script type='text/javascript' src='https://forjobathome.ru/wp-includes/js/jquery/jquery.form.min.js?ver=4.2.1' id='jquery-form-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/modernizr.js?ver=2.8.3' id='greenturtle-mag-jquery-modernizr-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.easing.js?ver=0.3.6' id='greenturtle-mag-jquery-easing-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.waypoints.js?ver=4.0.0' id='greenturtle-mag-jquery-waypoints-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.cycle.js?ver=2.1.6' id='greenturtle-mag-jquery-cycle-script-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/greenturtle-mag-custom.js?ver=5.5.1' id='greenturtle-mag-custom-js-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/navigation.js?ver=20151215' id='greenturtle-mag-navigation-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/skip-link-focus-fix.js?ver=20151215' id='greenturtle-mag-skip-link-focus-fix-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-includes/js/comment-reply.min.js?ver=5.5.1' id='comment-reply-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-includes/js/wp-embed.min.js?ver=5.5.1' id='wp-embed-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script>
<script type='text/javascript' id='ez-toc-js-js-extra'>
/* <![CDATA[ */
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"};
/* ]]> */
</script>
<script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script>
</body>
</html>