Что такое фреймы в html: Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16 — Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Содержание

Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16

Всем привет!
Продолжаем усердное изучение основ HTML. Я рад, что вы не бросаете уроки основ HTML.

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

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

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

[пример]

Ну, как вам? Хотите научиться такое создавать? Сейчас мы научимся вставлять фреймы в html-документ.

Создание фрейма на веб странице осуществляется по такому макету:


<frameset>
<frame>
<frame>
</frameset>

Внимание: макет фрейм-кода вставляется в html-документ вместо тега <bode></body>:

<html>
<head>
 <title>Фреймы</title>
</head>
<frameset>
<frame>
<frame>
</frameset>
</html>

○ тег frameset

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

<frameset></frameset>

*Атрибуты тега frameset:

Cols — вертикальные
Rows — горизонтальные

rows — горизонтально

cols — вертикально

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

<frameset cols="30%,*">

Левая часть экрана будет размером 30%, а правая – 70%.

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

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

В итоге первая вертикальная колонка будет шириной 30%, вторая — 20%, третья — 10%, четвертая — 40%.

Разобрались?

Так же и с горизонтальной разбивкой:

<frameset rows="30%,20%,10%,40%">

Первая горизонтальная колонка будет шириной 30%, вторая — 20%, третья — 10%, четвертая — 40%.

○ тег frame

Тег frame указывает, какой html-документ должен быть загружен в окно браузера.
Вот, например, нам нужно загрузить в одном окне браузера три разных страницы «1.html», «2.html», «3.html». Тег frame будет выглядеть вот так:


<frame src="1.html">
<frame src="2.html">
<frame src="3.html">

Подытожим знания по фреймам. Итак, задача: нужно разделить окно браузера на две части и загрузить в эти части две веб страницы – «1.html» на 30%, «2.html» на 70%.

Вот готовый код:


<frameset cols="30%,*">
<frame src="1.html">
<frame src="2.html">
</frameset>

Результат будет таким:

* Атрибуты тега frame

src – адрес веб страницы. src=»1.html»;
marginwidth – отступ внутри фрейма по ширине. Пример: marginwidth=»10″;
marginhight – отступ внутри фрейма по высоте. Пример: marginhight =»10″;
scrolling – прокрутка фрейма через скролл.
— yes – скролл будет присутствовать во фрейме. Пример: scrolling =»yes»;
— no – скролл не будет присутствовать во фрейме. Пример: scrolling =»no»;
— auto – скролл будет присутствовать во фрейме при необходимости. Пример: scrolling =»auto»;
noresize – запрещает двигать границы фрейма.
name – имя фрейма. Указывает, в каком окне нужно открывать другие фреймы. Пример: name =»stepkinblog-ru»;

○ Ссылки во фреймах или учимся пользоваться атрибутом «name»

Если фрейму не прописать имя в атрибуте «name», то при нажатии по ссылке откроется новый фрейм в том окне, где была ссылка:

[яркий пример, где нет атрибута «name»]

А вот пример, если прописать атрибут «name»:

[яркий пример с атрибутом «name»]

Правда, так лучше?
Для любого фрейма пропишите атрибут «name» там, где вы хотите, чтобы открывались в нем другие html-документы

<frame src="2.html "name ="stepkinblog-ru">

Имя в атрибуте «name» может быть любое. Но в дальнейшем, если вы будете давать имена и остальным тегам «frame», то помните, что каждое должно быть уникальным:


<frame src="2.html "name ="stepkinblog-ru">
<frame src="1.html "name ="bloggood-ru">
<frame src="3.html "name ="nocrisise-ru">

Теперь нужно к ссылке прописать «цель», то есть, в каком окне фрейма должен осуществиться переход. Для этого в теге «a» пропишите атрибут «target»:


<a href="1text.html" target="stepkinblog-ru">страница 1</a>
<a href="2text.html" target="stepkinblog-ru">страница 2</a>
<a href="3text.html" target="bloggood-ru">страница 3</a>

«Страница 1», «Страница 2» будут открываться в одном окне там, где вы указали имя фрейму «name =»stepkinblog-ru»» и «Страница 3» откроется в другом фрейме, где было название «name =»bloggood-ru»»

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

ПРАКТИКА

Задание: Нужно создать фреймы вот по такому макету:

Вначале создадим три горизонтальных фрейма:


<frameset rows="15%,*,15%">
</frameset>

Теперь добавим «top.html» и «footer.html»


<frameset rows="15%,*,15%">
<frame src="top.html">

<frame src="footer.html">
</frameset>

Результат пока что будет вот таким:

Теперь между «top.html» и «footer.html» добавим «menu.html» и «content.html»:


<frameset rows="15%,*,15%">
<frame src="top.html">
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html" name="main">
</frameset>
<frame src="footer.html">
</frameset>

Готовый код:


<html>
<head>
<title>Фреймы</title>
</head>
<frameset rows="15%,*,15%">
<frame src="top.html">
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html" name="main">
</frameset>
<frame src="footer.html">
</frameset>
</html>

Сохраните файл, как «index.html»

Создайте странички «top.html », «footer.html», «menu.html» и «content.html»:

Код файла «top.html»


<html>
<head>
<title>шапка сайта</title>
</head>
<body bgcolor="#b2f2ff" text="#0000FF">
<h2>StepkinBLOG.ru</h2>
</body>
</html>

Код файла «footer.html»


<html>
<head>
<title>Файл footer.html </title>
</head>
<body bgcolor="#b2f2ff" text="#000000">
StepkinBlog.com © 2015
</body>
</html>

Код файла «menu.html»


<html>
<head>
<title>Файл menu.html – меню сайта</title>
</head>
<body bgcolor="#b2bbff" text="#112cf5">
<ul>
<li><a target="main" href="content.html">Главная страница</a></li>
<li><a target="main" href=" autor.html">Об авторе</a></li>
</ul>
</body>
</html>

Код файла «content.html»:


<html>
<head>
<title>Главная страница</title>
</head>
<body bgcolor="#e3e5f8" text="#FF0055">
<h2>Главная страница</h2>
Содержимое сайта - "Главная страница (content.html)"
</body>
</html>

Код файла «autor.html»:


<html>
<head>
<title> Об авторе</title>
</head>
<body bgcolor="#e3e5f8" text="#FF0055">
<h2> Об авторе</h2>
Содержимое сайта - " Об авторе (autor.html)"
</body>
</html>

Вот такой результат у меня вышел:

[посмотреть пример]

Воспользуемся атрибутами «frame» и запретим вручную растягивание фреймов и уберем скролл в файле «index.html».


<frameset rows="15%,*,15%">
<frame src="top.html" scrolling ="no" noresize>
<frameset cols="25%,75%">
<frame src="menu.html"scrolling ="no" noresize>
<frame src="content.html" name="main"scrolling ="no" noresize>
</frameset>
<frame src="footer.html" noresize>
</frameset>

[посмотреть пример]

○ что делать если фреймы не поддерживаются браузером?

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


<frameset rows="15%,*,15%">
<noframes>УПС! Ваш браузер не поддерживает фреймы.</noframes>
<frame src="top.html" scrolling ="no" noresize>
<frameset cols="25%,75%">
<frame src="menu.html"scrolling ="no" noresize>
<frame src="content.html" name="main"scrolling ="no" noresize>
</frameset>
<frame src="footer.html" noresize>
</frameset>

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

Если вам нужно вставить фреймовое окно прямо в страницу, в которой нет фреймовой структуры, для этого существует тег «iframe»

<iframe src="http://stepkinblog.ru/"></iframe>

* атрибуты тега «iframe»

src — путь к открываемой странице
width — ширина плавающего фрейма
height — высота плавающего фрейма
scrolling — полоса прокрутки
— no — никогда не показывать полосу прокрутки
— yes — всегда показывать
— auto — показывать при необходимости
align — выравнивание плавающего фрейма
— left – слева
— right – справа
— top – выше
— bottom – ниже
frameborder — рамка вокруг плавающего фрейма
— 1 — включить рамку
— 0- выключить рамку

Вот так будет выглядеть тег «iframe» с атрибутами:

<iframe src=" http://stepkinblog.ru/" align ="left" scrolling="no" frameborder="1"></iframe>

Если браузер не поддерживает фреймы, можно вставить текст «УПС! Ваш браузер не поддерживает фреймы.» между тегами <iframe></iframe>.
Это будет выглядеть вот так:

<iframe src=" http://stepkinblog.ru/" align ="left" scrolling="no" frameborder="1">УПС! Ваш браузер не поддерживает фреймы.</iframe>

Для примера давайте добавим к файлу «content.html» плавающий фрейм:


<html>
<head>
<title>Главная страница</title>
</head>
<body bgcolor="#e3e5f8" text="#FF0055">
<h2>Главная страница</h2>
Содержимое сайта - "Главная страница (content.html)"
<iframe src=" http://stepkinblog.ru/" align ="left" scrolling="auto" frameborder="1">УПС! Ваш браузер не поддерживает фреймы.</iframe>
</body>
</html>

[посмотреть пример]

Предыдущая запись
Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15 Следующая запись
Тег div в HTML. Основы HTML для начинающих. Урок №17

Что такое фрейм? Как создать фрейм в HTML?

Как запустить видеоурок:

Разархивировать скачанный файл.
Открыть папку index.
Запустить файл index.html в браузере.

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

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

Я не буду давать про них много информации, так как тема сама по себе и так объемная, но недостатки фреймов я вам сейчас приведу:

При использовании фреймов, в контенте обычно нет ссылок, а это плохо сказывается на индексировании сайта поисковиками.
Второй минус для пользователей. Заключается он в том, что фреймы показывают лишь title (название) одной страницы. Из-за этого пользователь не сможет поместить понравившуюся ему страницу в избранное.
Поисковики индексируют только те страницы, которые заложены в страничку «Главная» — в страничку фреймов. Поэтому пользователь, переходящий через поисковик на какую-нибудь страничку вашего сайта, откроет ее, и у него не будет показана ни навигация, ни логотип, то есть будет показан не только контент.
Последний минус появляется при большом количестве страниц во фрейме. То есть если у нас в фрейм страницы заложены и логотип, и меню, и контент, и второе меню, и футер, и еще какие-нибудь фреймы, то это дает очень большую нагрузку на браузер пользователя и требует больше информации. В итоге расходуется больше памяти — это тоже доставляет неудобство.

Что такое фрейм?

Фрейм, говоря простым языком, — это страница, в которой находится несколько страниц. Сейчас объясню. У нас есть страница. В ней есть еще две страницы. Одна страница — наш логотип, вторая — меню, третья — контент. Такую страницу мы и будем сейчас создавать. Прежде, чем приступим к созданию такого фрейма, хочу предупредить, что в версии HTML5.0 фреймы не поддерживаются. Но так как мы изучаем HTML 4.01, то мы их разберем.

Как создать фрейм в HTML?

Перейдем на наш рабочий стол. Создадим еще папку. Назовем ее Frames. Откроем ее и свернем. Зайдем в папку site2. Скопируем из нее индексный файл и вставим его в папку Frames. Откроем файл через notepad и удалим все ненужное, в том числе и тег <body>.

 <!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Главная страница</title>
 <meta http-equiv="Content-Language" content="ru">
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <meta name="keywords" content="Мой, личная, страница, info, line, net, рассказ, сайт">
 <meta name="description" content="Моя личная страница! Сказ о том, зачем я создал сайт info-line.net">
 </head>
</html>

— Эй, Олег, где мое тело?
— Мы тебя трансформируем.

Прописываем <frameset></frameset>. Про тег <body> мы забываем.

 <!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Главная страница</title>
 <meta http-equiv="Content-Language" content="ru">
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <meta name="keywords" content="Мой, личная, страница, info, line, net, рассказ, сайт">
 <meta name="description" content="Моя личная страница! Сказ о том, зачем я создал сайт info-line.net">
 </head>
 <frameset>
 </frameset>
 </html>

Сохраним наш документ и создадим еще один. Копируем в него какой-нибудь индексный файл. Удаляем здесь все, что находится в теге <body>. Тег <body> не трогаем. И пишем сюда изображение.

 <!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Главная страница</title>
 <meta http-equiv="Content-Language" content="ru">
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <meta name="keywords" content="Мой, личная, страница, info, line, net, рассказ, сайт">
 <meta name="description" content="Моя личная страница! Сказ о том, зачем я создал сайт info-line.net">
 </head>
 <body>
 <img src="logo.png" >
 </body>
 </html>

Давайте сохраним нашу страничку в папку Frames. Назовем ее header.html.

Перейдем на рабочий стол, зайдем в папку site2, скопируем изображение info- line из папки img, переименуем в logo и закроем папку site2.

Теперь создаем еще один документ. Это будет меню. Копируем все, что находится в документе header.html и «img src» меняем на меню, которое мы прописывали в таблице в 12 уроке.

 <!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Главная страница</title>
 <meta http-equiv="Content-Language" content="ru">
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <meta name="keywords" content="Мой, личная, страница, info, line, net, рассказ, сайт">
 <meta name="description" content="Моя личная страница! Сказ о том, зачем я создал сайт info-line.net">
 </head>
 <body>
 <div>Меню:</div>
 <p><a href="index.html">Главная</a><p>
 <p><a href="form.html">Обратная связь</a><p>
 <p><a href="#">Ссылка №3</a><p>
 <p><a href="#">Ссылка №4</a><p>
 </body>
 </html>

Сохраняем как menu.html. Создадим третью страничку — контент. Копируем из того же файла наш контент. Сохраним как content.html.

Мы все сделали. Теперь перейдем в файл index.html. Тег <frameset> имеет атрибут rows, означающий высоту. Высота указывается по порядку тех фреймов, которые будут прописаны ниже. Прописываются они с помощью тега <frame> и атрибуда src. Тег <frame> закрывающего тега не имеет. В кавычках указывается путь к документу. Первым пусть идет логотип, потом меню и третьим — контент.

 <frameset rows="">
 <frame src="header.html">
 <frame src="menu.html">
 <frame src="content.html">
 </frameset>

Давайте теперь укажем высоту. Поясню. Страница будет выглядеть так: сначала идет логотип, потом меню, остальное занимает контент. Пропишем это. Например, под логотип выделим 150 пикселей. Ставим запятую. На меню выделяем 200 пикселей. Снова ставим запятую. И на контент мы не можем выделить конкретное число пикселей, потому что не знаем точно, сколько он займет, поэтому поставим звездочку. Она означает «все остальное пространство».

 <frameset rows="150, 200, *">

Сохраним. Проверим в браузере. Смотрим, что у нас получилось. Идет логотип (можно было фрейм для логотипа сделать больше либо уменьшить сам логотип). Потом — меню (с ним все нормально). Далее — контент с полосой прокрутки. Кстати, мы можем двигать наши фреймы: некоторые делать шире, некоторые — уже.

Давайте теперь сделаем нашу страничку следующего вида: слева — логотип, потом меню, оставшееся место — контент. Грубо говоря, мы повернем страницу на 90 градусов.

Перейдем в код и заменим атрибут rows на cols. Значения оставим те же.

 <frameset cols="150, 200, *">

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

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

Давайте перейдем в наш код и разберемся, как это делать. Подводный камень тега <frameset> заключается в том, что мы не можем использовать вместе атрибут cols и rows. Как же нам поступить в этом случае? Мы добавим еще один фрейм в наш настоящий фрейм. Но сначала перейдем в хедер и уменьшим логотип. Мы уже знаем, как это делать.

 <img src="logo.png">

Сохраняем. Перейдем снова в index.html. Прописываем еще один тег <frameset> . В ширине указываем ширину наших полей: хедера и меню. Она у нас будет равна 150, допустим. Потом идет ширина контента — это оставшаяся часть. Она равна звездочке. В следующем теге <frameset> мы указываем высоту логотипа — 150 пикселей, потом идет запятая и звездочка. То есть menu.html будет занимать оставшееся место на странице.

 <frameset cols="150,*">
 <frameset rows="150,*">
 <frame src="header.html">
 <frame src="menu.html">
 </frameset>
 <frame src="content.html">
 </frameset>

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

 <frameset cols="200,*">
 <frameset rows="200,*">
 <frame src="header.html">
 <frame src="menu.html">
 </frameset>
 <frame src="content.html">
 </frameset>

Сохраним и посмотрим. Именно такой макет был у учебника, по которому я учил HTML. Прокручивая контент, меню остается на месте. При нажатии по ссылке «Обратная связь», если мы добавим страничку «Обратная связь» в папку с фреймом, то она должна отобразиться на месте контента.

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

Что такое frame в HTML?

Что такое фрейм в HTML? Frameset — это легкий способ создавать несколько отдельных областей прокрутки в окне браузера, а также удобный механизм для изменения содержимого фрейма.

Но у фреймов есть и существенные недостатки. Именно поэтому использовать их не рекомендуется. Хотя фреймы поддерживаются в HTML 4.01, их нет в HTML 5. На смену им пришли многофункциональные методы форматирования CSS. Главные недостатки фреймов:

Поисковым системам тяжело работать с фреймами;
Плохая совместимость с URL;
Фреймы недоступны для всех клиентских приложений;
Страницы, отображаемые во фреймах, трудно добавлять в закладки;
Частые проблемы при распечатке веб-страниц.

Обычно фреймы используют для создания отдельных областей с прокруткой в одном окне. Такой подход применяется в приложениях для мобильных и десктопных платформ. Примером такого приложения является проводник Windows. Окно проводника состоит из двух частей. В левой части окна отображаются папки и «Избранное», в правой — содержимое папки, выбранной в левой части окна.

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

Ниже приводится пример создания frameset HTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
<html>
  <head>
    …
  </head>
  <frameset attributes>
    <frame attributes></frame>
    <frame attributes></frame>
    …
  </frameset>
</html>

Особенности кода:

Отсутствует элемент «body». Его роль выполняет тег <frameset>;
Теги <frame>, расположенные внутри <frameset>, определяют содержимое фреймов и их свойства;
Кроме <frameset> и <head> в документе больше нет никакого содержимого.

Тег <frameset> отвечает за расположение фрейма в документе. Указанные в нем значения определяют количество frameset rows и строк, а также ширину фреймов. Формат тега <frameset> выглядит следующим образом:

<frameset cols|rows = “размер(ы)_столбцов_или_строк”>

Размеры столбцов или строк могут быть заданы в пикселях, процентах или как «*». В последнем случае браузер разделит оставшуюся часть окна на столбцы, где значение “*” указывает их ширину.

Значения атрибута cols или rows также определяют количество отображаемых на странице фреймов. Для каждой записи (значения) требуется наличие тега <frame> внутри тега <frameset>.

Рассмотрим следующие примеры создания тега <frameset>:

<!– Два столбца, 25% окна, остальные 75% окна –>
<frameset cols = “25%, 75%”>
<!– Два столбца, 25% окна, остальные 75% окна –>
<frameset cols = “25%, *”>
<!– Три строки, первая 50% окна, две остальные по 25% окна –
>
<frameset rows = “50%, *, *”>
<!– Две строки, первая высотой 100 пикселей, вторая занимает оставшееся 
пространство окна –>
<frameset rows = “100px, 200px”>

Тег <frame> отвечает за свойства каждого фрейма в наборе фреймов, заключенного в тег frameset. Он имеет следующий синтаксис:

<frame name=”название_фрейма” src=”url_содержимого”></frame>

Атрибут name присваивает фрейму уникальное имя, на которое могут ссылаться URL-адреса, скрипты и т. д. Это необходимо для управления содержимым фрейма. Атрибут src используется для указания URL-адреса содержимого, которое должно отображаться во фрейме.

Тег <frame> поддерживает еще один атрибут — noresize. По умолчанию размер фрейма является изменяемым. Чтобы запретить изменение размера, необходимо задать атрибуту noresize значение noresize.

Например:

<frameset cols=“50%,50%”>
   <frame src=“frame_a.htm” noresize=“noresize”>
   <frame src=“frame_b.htm”>
</frameset>

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

Изменить содержимое фрейма во frameset можно с помощью атрибута target тега ссылки. Для атрибута target допустимы следующие значения:

Например:

<a href=”news.html” target=”content”>Последние новости</a>

В отличие от frameset HTML тег iframe используется для отображения содержимого фрейма рядом с остальным содержимым веб-страницы. Встроенные фреймы не полностью поддерживаются браузерами. Их можно размещать на веб-странице, используя тег <iframe>. Синтаксис тега <iframe> выглядит следующим образом:

<iframe src=”url_содержимого”></iframe>

Тег <iframe> поддерживает такие атрибуты:

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

Данная публикация является переводом статьи «What are frames in HTML?» , подготовленная редакцией проекта.

Фреймы в HTML — шпаргалка для начинающих

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

При использовании frameset вы разделяете видимую часть окна браузера на несколько фреймов. Каждый фрейм имеет собственное содержимое, которое не затрагивает содержимое следующего. Frames и Iframes выполняют аналогичную функцию — встраивают ресурс в веб-страницу, но они принципиально отличаются друг от друга:

Frames — это элементы, определяющие макет;
Iframes — элементы, добавляющие контент.

W3C признала фреймы устаревшими в HTML5. Данное решение было аргументировано тем, что фреймы HTML отрицательно сказываются на юзабилити и доступности. Давайте разберемся, обоснованы ли эти претензии.

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

В данный момент в веб-разработке прослеживается глобальная тенденция разделения содержимого веб-страницы от ее представления:

Содержимое должно добавляться и определяться разметкой, например, через HTML;
Представление определяется языками, такими как CSS и JavaScript.

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

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

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

Основная концепция фреймов довольно проста:

Используйте элемент frameset в определенном месте элемента body в HTML-документе;
Используйте элемент frame, чтобы создать фреймы для содержимого веб-страницы;
Используйте атрибут src для идентификации ресурса, который должен загружаться внутри фрейма;
Создайте для каждого фрейма HTML отдельный файл с содержимым.

Рассмотрим несколько примеров того, как это работает. Сначала нужно создать несколько HTML-документов, с которыми мы будем работать. Давайте создадим четыре различных HTML-документа. Вот, что будет содержать первый из них:

<!DOCTYPE html> <html> <body> <h2>Frame 1</h2> <p>Contents of Frame 1</p> </body> </html>

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

Чтобы создать набор из четырех вертикальных столбцов, нужно использовать элемент frameset с атрибутом cols. Атрибут cols используется для определения количества и размера столбцов, которые будет содержать frameset. В нашем случае у нас есть четыре файла для отображения. Следовательно, нам нужно четыре фрейма.

Чтобы их создать, нам нужно задать в атрибуте cols четыре значения, разделенные запятой. Для простоты мы присвоим каждому из фреймов значение *, это задаст для них размер, при котором они автоматически будут заполнять все свободное пространство. Вот, как будет выглядеть наша HTML-разметка:

<!DOCTYPE html> <html> <frameset cols="*,*,*,*"> <frame src="../file_path/frame_1.html"> <frame src="frame_2.html"> <frame src="frame_3.html"> <frame src="frame_4.html"> </frameset> </html>

А вот как эта разметка будет отображаться:

Строки фреймов HTML можно создать с помощью атрибута rows, а не атрибута cols, как в предыдущем примере:

<!DOCTYPE html> <html> <frameset rows="*,*,*,*"> <frame src="frame_1.html"> <frame src="frame_2.html"> <frame src="frame_3.html"> <frame src="frame_4.html"> </frameset> </html>

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

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

frameset cols="*,*,*"> <frameset rows="*,*"> <frame src="frame_1.html"> <frame src="frame_2.html"> </frameset> <frame src="frame_3.html"> <frame src="frame_4.html"> </frameset>

Фрейм в HTML пример:

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

<frameset cols="*,*,*"> <frame src="frame_1.html"> <frameset rows="*,*"> <frame src="frame_2.html"> <frame src="frame_3.html"> </frameset> <frame src="frame_4.html"> </frameset>

Вот, как теперь будут отображаться фреймы:

Можно создать другие вложенные фреймы:

<frameset cols="*,*"> <frame src="frame_1.html"> <frameset rows="*,*"> <frame src="frame_2.html"> <frameset cols="*,*"> <frame src="frame_3.html"> <frame src="frame_4.html"> </frameset> </frameset> </frameset>

Этот код создает набор из двух одинаковых по размеру столбцов. Затем мы разделили второй столбец на две строки. И, наконец, мы разделили вторую строку на две колонки. Вот, как это будет выглядеть:

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

<frameset rows="*,*" cols="*,*"> <frame src="frame_1.html"> <frame src="frame_2.html"> <frame src="frame_3.html"> <frame src="frame_4.html"> </frameset>

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

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

Определение стилей внутри каждого frame;
Определение стилей для frameset.

Представление каждого frame должно определяться внутри исходного документа. Представление frameset должно определяться внутри родительского документа, содержащего frameset. Другими словами, стили для frame_1.html должны задаваться правилами CSS, содержащимися в файле frame_1.html, или в таблице стилей, связанной с файлом frame_1.html.

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

Применив стили CSS к веб-странице, которая содержит frameset, мы не сможем применить стили к каждому фрейму отдельно. Если мы хотим задать стили для frame_1.html, нам нужно добавить эти стили непосредственно в сам документ. Вот пример того, как это можно сделать:

<!DOCTYPE html> <html> <head> <style> body {background: gray;} h2 {color: blue;} p {margin: 20px;} </style> </head> <body> <h2>Frame 1</h2> <p>Contents of Frame 1</p> </body> </html>

Если мы вернемся к нашему предыдущему примеру создания фреймов в HTML с четырьмя столбцами одинакового размера и загрузим frameset после внесения этих изменений в файл frame_1.html, мы получим следующее:

Как повлиять на представление frameset помимо определения стилей самих документов:

Может быть определен или зафиксирован размер каждого фрейма;
Может быть изменен отступ между фреймами;
Может быть задан формат рамки вокруг каждого фрейма.

Эти изменения вносятся не через CSS. Они осуществляются путем добавления атрибутов и их значений для элемента frame.

Размеры фреймов могут задаваться в пикселях, процентах, либо фреймы могут автоматически занимать все свободное пространство. Чтобы указать размер фрейма, вставьте нужное значение в атрибут cols или rows. По умолчанию, если для фрейма не указан атрибут noresize, посетители сайта могут с помощью мыши перетащить границу между двумя фреймами, изменяя их размер. Если это нежелательно, то к элементу фрейма может быть применен атрибут noresize, и изменение его размеров будет невозможно. Объединим обе эти концепции на практике.

Мы создадим следующий макет:

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

Мы можем создать фрейм HTML с помощью следующего кода:

<frameset rows="150px,*"> <frame noresize src="frame_1.html"> <frameset cols="20%,*,20%"> <frame src="frame_2.html"> <frame src="frame_3.html"> <frame src="frame_4.html"> </frameset> </frameset>

Этот код создает frameset из двух рядов:

Первый ряд высотой 150 пикселей. Атрибут noresize, указанный для первого frame означает, что его размеры не могут быть изменены;
Стили, которые мы применяли ранее к frame_1.html сохраняются, но они влияют только на содержимое этого фрейма;
Второй ряд расширяется, чтобы заполнить оставшееся пространство;
Второй frameset вложен во второй ряд и содержит три столбца;
Первый и третий столбцы заполняют по 20% доступного пространства окна браузера;
Второй столбец расширяется таким образом, чтобы заполнить пространство, остающееся между первым и третьим столбцом;
Так как мы не указали для столбцов атрибут noresize, изначально они будут отображаться, исходя из размеров, заданных в коде.

Но посетитель сайта сможет вручную изменить их размеры.

Этот код создает веб-страницу, отображаемую следующим образом:

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

<frameset rows="150px,*"> <frame noresize src="frame_1.html" marginheight="15"> <frameset cols="20%,*,20%"> <frame src="frame_2.html" frameborder="0"> <frame src="frame_3.html" frameborder="0"> <frame src="frame_4.html" frameborder="0"> </frameset> </frameset>

Атрибут marginheight, примененный к первому фрейму, добавляет отступ в 15 пикселей выше и ниже содержимого, загружаемого в первом фрейме. Значение frameborder, равное 0, удаляет рамки для всех трех нижних фреймов. Вот как это будет выглядеть:

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

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

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

<frameset rows="150px,*"> <frame noresize src="frame_1.html" marginheight="15"> <frameset cols="20%,*,20%"> <frame src="frame_2.html" frameborder="0"> <frame src="frame_3.html" name="mid_col" frameborder="0"> <frame src="frame_4.html" frameborder="0"> </frameset> </frameset>

Теперь, когда мы задали для центрального столбца name=»mid_col», можно создать в исходном документе нашего левого столбца frame_2.html несколько ссылок:

<!DOCTYPE html> <html> <body> <h2>Frame 2</h2> <p>Contents of Frame 2</p> <ul> <li><a href="frame_1.html" target="mid_col">Load frame_1.html</a></li> <li><a href="frame_2.html" target="mid_col">Load frame_2.html</a></li> <li><a href="frame_3.html" target="mid_col">Load frame_3.html</a></li> <li><a href="frame_4.html" target="mid_col">Load frame_4.html</a></li> </ul> </body> </html>

Теперь, когда мы загрузим веб-страницу, в левой боковой панели будут размещаться четыре ссылки навигации. При нажатии на ссылку содержимое файла загружается во фрейме среднего столбца с атрибутом name=»mid_col». Вот, что мы увидим при загрузке страницы:

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

Если нажмем ссылку Load frame_2.html, то увидим, что и в левой боковой панели, и в центральном столбце будут отображаться ссылки навигации:

При нажатии ссылок Load frame_3.html и Load frame_4.html в центральном столбце будет загружаться содержимое этих файлов. Если бы мы забыли добавить для одной из ссылок атрибут target=»mid_col», то при клике по ней файл будет загружаться в том фрейме, который содержит ссылку. Если мы хотим перезагрузить всю страницу, например, при переходе по ссылке на внешний сайт, нам нужно добавить атрибут target=»_blank» или target=»_top».

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

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

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

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

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

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

Были ли фреймы использованы для создания конкретного макета? Если это так, для создания подобного макета может быть использован CSS;
Были ли фреймы использованы для создания контейнера с рекламой определенных размеров? Есть много способов воссоздать данный эффект с помощью CSS или виджетов, предназначенных для работы с CMS;
Были ли фреймы использованы для создания «прилипающих» меню навигации? Опять же, с помощью CSS может быть воссоздан тот же эффект;
Были ли фреймы использованы для загрузки контента с внешнего сайта? Если да, то элемент iframe, который является частью HTML5, может быть использован для встраивания контента с внешнего сайта.

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

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

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

WordPress;
Joomla!;
Drupal.

Если вы хотите узнать о фреймах HTML больше, лучшим источником для получения дополнительной информации является World Wide Web Consortium (W3C). Вот некоторые из страниц с информацией о фреймах:

Документация HTML4 о фреймах;
Устаревшие функции HTML5

Название элемента	Атрибуты	Описание
noframes		Элемент <noframes> использовался внутри родительского <frameset>, чтобы предоставить резервный вариант контента для пользователей, чьи браузеры, не поддерживали <frame>. На данный момент фреймы являются устаревшей технологией, поэтому элемент <noframes> не должен использоваться.
iframe	sandbox scrolling name align frameborder longdesc marginwidth src vspace width	<iframe> создает встроенный фрейм, который выводит в текущий документ независимый HTML-документ.
frameset	frameborder cols bordercolor	Элемент <frameset> использовался, чтобы создать группу фреймов, которые могут управляться и стилизоваться, как одно целое. На данный момент фреймы в HTML устарели и не должны использоваться.
frame	Src name marginwidth scrolling noresize frameborder bordercolor	Элемент <frame> использовался, чтобы разбить окно браузера на несколько независимых частей. На данный момент фреймы устарели и не должны использоваться.

Пожалуйста, опубликуйте ваши отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, подписки, дизлайки, отклики!

Данная публикация является переводом статьи «Frames» , подготовленная редакцией проекта.

Учебник HTML 5. Статья «Фреймы»

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

Не так давно фреймы использовались в качестве навигации по сайту, когда навигационная страница располагалась в одном окне, а страницы с контентом, располагались в других документах. В настоящее время использование фреймов на страницах сайтов можно встретить все реже, это как правило, какие-то примеры кода с «песочниц» (выделенная среда для исполнения компьютерного кода), участки Google Maps (необходимо задавать адрес в такой форме: https://maps.google.com?output=embed), либо видео, размещенное с видео хостинга YouTube.

Тег <iframe> (HTML Inline Frame Element) определяет встроенную в веб-страницу область, которая может отображать содержимое отдельно взятого документа (например, *.pdf), медиа-контента или другого веб-сайта в заданном пространстве. Содержимое внутри области существует независимо от окружающей страницы.

Синтаксис для добавления фрейма:

<iframe src = "URL"> </iframe>, где src атрибут, который определяет местоположение документа или веб-сайта.

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

В следующем примере мы возьмем в качестве загрузки во фрейм отличный сайт — TinyPng.com, который предоставляет возможность сжимать изображения, предназначенные к загрузке на Ваш сайт. Как правило, удаётся уменьшить размер изображений на 50%, а то и больше, что значительно уменьшает их объем, экономит дисковое пространство и увеличивает скорость загрузки страниц.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <iframe></title>
	</head>
	<body>
		<iframe name = "myframe" width = "665px" height = "265px" src = "https://tinypng.com"></iframe><br> <!-- в атрибуте src указываем абсолютный адрес сайта, который хотим открыть во фрейме -->
		<a href = "https://tinypng.com" target = "myframe">TinyPng</a> <!-- указываем, что ссылка откроется во фрейме -->
		<a href = "moscow.jpg" target = "myframe">Moscow</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "paris.jpg" target = "myframe">Paris</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
		<a href = "london.jpg" target = "myframe">London</a> <!-- задаем относительный путь к изображению и имя фрейма, где оно откроется -->
	</body>
</html>

В этом примере мы:

Элементом <iframe> создали фрейм, которому атрибутом name задали имя — «myframe», атрибутом width установили ширину фрейма «665px», а атрибутом height высоту фрейма «265px» . В обязательном атрибуте src указали абсолютный адрес сайта, который хотим открыть во фрейме «https://tinypng.com».
Разместили четыре ссылки, при клике на которые ссылка открывается непосредственно во фрейме (в значении атрибута target указано имя нашего фрейма — «myframe»). Первая ссылка открывает сайт, загруженный изначально, а остальные три загружают различные изображения, находящиеся в той же папке, что и файл с примером.

Результат нашего примера:

Рис. 27 Пример использования фреймов в HTML.

HTML аббревиатура и контактная информация

HTML тег <abbr> (HTML Abbreviation Element) определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковых машин, для пользователя применение этого элемента не видимо.

Как правило, тег <abbr> применяется совместно с глобальным атрибутом title, для отображения полного описания аббревиатуры пользователю при наведении.

HTML тег <address> определяет контактную информацию (автор / владелец) документа или статьи. Если элемент <address> находится внутри тега <body>, то представляет контактную информацию для документа, а если находится внутри элемента <article> (статья), то он представляет контактную информацию для этой статьи.

Текст внутри элемента <address>, как правило, отображается курсивом. Элемент не должен использоваться просто для описания почтового адреса, если он не является частью контактной информации. Элемент, чаще всего, используют с другой информацией в элементе <footer> (нижний колонтитул или «подвал» сайта).

Об элементах, добавленных в HTML 5 — <footer> и <article> мы поговорим в статье «Теги разметки страницы в HTML».

Пример использования:

<html>
	<head>
		<title>Аббревиатура и контактная информация</title>
	</head>
	<body>
		<p><abbr title = "ВСЕРОССИЙСКИЙ НАУЧНО-ИССЛЕДОВАТЕЛЬСКИЙ <!-- добавляем аббревиатуру с глобальным атрибутом title -->
		ГЕОЛОГИЧЕСКИЙ ИНСТИТУТ им. А.П. КАРПИНСКОГО">ВСЕГЕИ</abbr> является преемником и продолжателем традиций первого государственного геологического учреждения России –
		Геологического комитета, созданного в Санкт-Петербурге...
		<iframe src = "http://vsegei.ru"></iframe> <!-- добавляем фрейм с сайтом института -->
		<address style = "background-color: khaki"> 199106, Санкт-Петербург, Средний пр., 74</br> <!-- добавляем контактную информацию института -->
		E-mail: [email protected]</br>
		Сайт: http://vsegei.ru/ru/  </address>
	</body>
</html>

В данном примере мы:

Поместили аббревиатуру института в тег <abbr> и применили глобальный атрибут title, для того, чтобы при наведении на нее мышкой было понятно, что это высшее учебное заведение, а не то, что вы подумали.
Кроме того загрузили во фрейм сайт данного учебного заведения (в обязательном атрибуте src указали абсолютный адрес сайта).
Внизу страницы (внутри тега <address>) добавили адрес и контактные данные института, указанные на официальном сайте. Текст, помещенный внутрь этого тега, по умолчанию отображается курсивом. Кроме того для элемента <address> добавили глобальный атрибут style, которым задали встроенный CSS стиль (цвет заднего фона).

Рис 28 Аббревиатура и контактная информация в HTML.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:

Используя полученные знания составьте HTML страницу (practice_19.html в архиве), которая содержит фрейм и четыре ссылки:

Первая ссылка загружает сайт «Википедии», или любой другой.
Вторая ссылка загружает во фрейм изображение из папки (practice_19_1.jpg).
Третяя ссылка загружает во фрейм изображение из папки (practice_19_2.jpg).
Четвертая ссылка загружает во фрейм изображение из папки (practice_19_3.jpg).

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

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

Фреймы в html | html создание фреймов

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали, как установить favicon на сайт. В данной статье я бы хотел рассказать, что такое фреймы в html. В переводе с англ. фрейм означает «рамка». С точки зрения html, фрейм — это некая выделенная область на странице, которая ссылается на другую страницу и выводит её содержимое (той самой другой страницы или сайта). Стоит сразу отметить, что фреймы не получили большого развития и сейчас почти не используются, разве что в каких-то специализированных проектах.Всё то же самое можно сделать с помощью CSS и Javascript.
С помощью фрейма страницу можно разбить на несколько блоков, каждый из которых будет независим от других. Давайте создадим основной документ index.html и два вспомогательных (внутренних), содержимое которых как раз и будет отображаться на основной странице: menu.html (будет содержать разметку навигации по сайту) и content.html (контент сайта). Разметка index.html будет иметь следующий вид:


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Фрэймы в HTML</title>
</head>
<frameset cols="40%, *">
	
</frameset>
</html>

Обращаю ваше внимание, что здесь отсутствует тег <body>, вместо него появился тег <frameset>. У данного тега есть несколько атрибутов:

cols — данный атрибут указывает, что фреймы будут помещены в столбцы. В значении данного атрибута через запятую указываются размеры фреймов. В нашем случае у нас будет 2 фрейма. Ширина первого будет 40% от ширины страницы, * означает всё остальное пространство страницы (в данном случае можно было написать и 60%). Также размер можно задавать и в пикселях.
rows — данный атрибут указывает, что фреймы будут помещены в строки.

Содержимое файла menu.html имеет вид:


<ul>
	<li>1 пункт меню</li>
	<li>2 пункт меню</li>
	<li>3 пункт меню</li>
</ul>

Содержимое файла content.html имеет вид:


<div>
	<h2>Тестируем фреймы</h2>
	<p>Абзац текста</p>
</div>

Чтобы вывести содержимое другого документа нужно использовать тег <frame> с атрибутом src, в значении которого указывается путь до файла. Также можно указывать url сайта, который мы хотим вывести в этом блоке. Для начала давайте выведем наши страницы menu.html и content.html:


<frameset rows="50%, *">
   <frame src="menu.html"/>
   <frame src="content.html"/>
</frameset>

Обязательно наберите данный код, чтобы посмотреть как это всё работает.

У тега frame существуют следующие атрибуты:

src — путь до страницы или же url-адрес сайта (страницы сайта). Стоит отметить, что у некоторых сайтов существует защита от встраивания,
name — присваивает фрейму имя, с помощью которого данным фреймом можно управлять,
noresize — запрещает изменять размер фрейма,
scrolling — возможность прокручивать содержимое.

В качестве домашнего задания создайте 2 фрейма и разместите их в строку. В качестве значения атрибута src укажите путь до сайтов.

Весь код можно посмотреть под хайдом.

Подсмотреть код реализации


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Фрэймы в HTML</title>
</head>
<frameset rows="50%, *">
   <frame src="https://alekseygulynin.ru/"/>
   <frame src="https://alekseygulynin.ru/"/>
</frameset>
</html>

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

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Фреймовая структура html, атрибуты фреймов

Цель урока: изучение возможностей создания фреймов в html

Фреймовая структура в HTML

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

Элемент frameset

Синтаксис деления по вертикали (на колонки):
<FRAMESET cols="n%,n%"> … </FRAMESET>
<FRAMESET cols=»n%,n%»> … </FRAMESET>
где n — ширина фреймов в процентах слева направо
Синтаксис деления по горизонтали:
<FRAMESET rows="n%,n%"> … </FRAMESET>
<FRAMESET rows=»n%,n%»> … </FRAMESET>
где n — высота фреймов в процентах сверху вниз
Фреймов в структуре может быть не два, а более.

Файл с фреймовой структурой называется файлом-раскладкой и обычно называется index.html

Как происходит загрузка файлов во фрейм рассмотрим на примере.

Синтаксис:
<FRAME  src="Имя файла.html"  name="имя фрейма">
<FRAME src=»Имя файла.html» name=»имя фрейма»>

Пример: Создать файл с фреймовой структурой с двумя колонками: в левую (ширина 25%) загружать файл menu.html, в правую (ширина 70%) загружать файл content.html

Выполнение:

<html>
<head>
	<title>Пример</title>
</head>
<frameset cols="25%, 75%">
	<frame src="menu.html">
	<frame src="content.html">
</frameset>
</html>

<html> <head> <title>Пример</title> </head> <frameset cols=»25%, 75%»> <frame src=»menu.html»> <frame src=»content.html»> </frameset> </html>

Задание 1:
Создать файл с фреймовой структурой (имя файла index.html) с тремя колонками (ширина: 25%, 50%, *). Создать три файла для загрузки в фреймы, расположить их в той же папке, в которой находится index.html: 1. menu.html (в нем расположить заголовок h2 «Меню»), 2. content.html (в нем расположить заголовок h2 «Контент»), 3. news.html (в нем расположить заголовок h2 «Новости»).
Поменяйте расположение с колонок на ряды (горизонтальное деление), посмотрите на результат.

Атрибуты тега frameset:
frameborder — значение 1 или 0 (есть или нету)
border — значение размера границы
bordercolor — цвет границы
framespacing — ширина граней фреймов в пикселях (только в IE)

<frameset cols="25%, 75%" frameborder="1" bordercolor="red" border="1">

Атрибуты элемента frame:
name — имя фрейма
noresize — запрещает изменение размеров для определенного фрейма.
scrolling — управляет прокруткой внутри одной области (yes, no, auto).
marginheight — задает величину отступа фрейма от верхнего и нижнего краев страницы.
marginwidth — создает поля слева и справа
frameborder — указывает, нужна или нет рамка вокруг фрейма (0 и 1)
bordercolor – цвет рамки

Правила создания ссылки во фреймах в html

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

Важно: для загрузки пункта меню в определенный фрейм необходимо:
добавить название необходимого фрейма при помощи атрибута name (в файле-раскладке)
Пример:
<frame src="content.html" name="mainFrame">
<frame src=»content.html» name=»mainFrame»>
в файле с меню в гиперссылке добавить атрибут target
Пример:
<a href="glava1.html" target="mainFrame" rel="noopener noreferrer">
<a href=»glava1.html» target=»mainFrame» rel=»noopener noreferrer»>

Посмотрим полный код обоих файлов:
Файл index.html

<html>
...
<frameset cols="25%, 75%">
	<frame src="menu.html">
	<frame src="content.html" name="mainFrame">
</frameset>
</html>

Файл menu.html:

<html>
...
<body>
	<h3>Меню:</h3>
<ul>
<li><a href="glava1.html" target="mainFrame" rel="noopener noreferrer">Глава 1</a></li>
<li><a href="glava2.html" target="mainFrame" rel="noopener noreferrer">Глава 2</a></li>
</ul>
</html>

<html> … <body> <h3>Меню:</h3> <ul> <li><a href=»glava1.html» target=»mainFrame» rel=»noopener noreferrer»>Глава 1</a></li> <li><a href=»glava2.html» target=»mainFrame» rel=»noopener noreferrer»>Глава 2</a></li> </ul> </html>

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

Работа с фреймами в html подразумевает и более сложную структуру.
Рассмотрим на примере:

Каким будет результат?

Лабораторная работа: создать фреймовую структуру и загружаемые в нее файлы согласно изображению:

Встроенные (плавающие) фреймы

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

<html>
...
<body>
...
<iframe src="main.html"></iframe>
...
</body>
</html>

Фрейм будет вставлен в виде окна указанных размеров (атрибуты width и height).

Дополнительные атрибуты:

name — имя фрейма
frameborder — граница фрейма
scrolling — полоса прокрутки
hspace — отступы по горизонтали
vspace — отступы по вертикали
marginwidth — отступ внутренней страницы от границы фрейма по горизонтали
marginheight — отступ внутренней страницы от границы фрейма по вертикали

Лабораторная работа 2: Создать фреймовую структуру и загружаемые в нее файлы согласно изображению и списку файлов. В файле с меню необходимо организовать две гиперссылки: по щелчку на первую из них — файл glava1.html загружается в левый фрейм (там, где Главная домашняя страница), по щелчку на вторую из них — файл glava2.html загружается тоже в левый фрейм. В качестве внутреннего фрейма использовать плавающий фрейм (iframe).

Список файлов:


index.html - Главная раскладка с фреймовой структурой
shapka.html - Название сайта
menu.html - Меню
home.html - Главная домашняя страница
podval.html - Нижняя часть
inner.html - Встроенный фрейм
glava1.html - Глава 1
glava2.html - Глава 2

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

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

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

<ГОЛОВА> Простой документ с набором фреймов <БЕЗ КАДРОВ>

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

, который может создать макет фрейма примерно так:

 ---------------------------------------
| | |
| | |
| Кадр 1 | |
| | |
| | |
| --------- | |
| | Кадр 3 |
| | |
| | |
| | |
| Кадр 2 | |
| | |
| | |
| | |
| | |
 ---------------------------------------

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

16.2 Расположение рамок

Документ HTML, описывающий компоновку фрейма (называется документ набора фреймов ) имеет другую структуру, чем HTML документ без рамок. Стандартный документ имеет один ГОЛОВА секция и одна ТЕЛО . Документ с набором фреймов имеет ГОЛОВА и FRAMESET вместо КУЗОВ .

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

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

16.2.1

FRAMESET элемент

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

строк = список с несколькими длинами [CN]: Этот атрибут определяет расположение горизонтальных фреймов.Это Разделенный запятыми список пикселей, процентов и относительной длины. По умолчанию значение равно 100%, что означает одну строку.
cols = список с несколькими длинами [CN]: Этот атрибут определяет расположение вертикальных рамок. Это Разделенный запятыми список пикселей, процентов и относительной длины. По умолчанию значение равно 100%, что означает один столбец.

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

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

Строки и столбцы

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

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

Фреймы создаются слева направо для столбцов и сверху вниз для строк. Когда указаны оба атрибута, представления создаются слева направо вверху. ряд, слева направо во втором ряду и т. д.

В первом примере экран делится по вертикали на две части (т. Е. Создается верхняя половина и нижняя половина).


  ... остальная часть определения ...

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


  ... остальная часть определения ...

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


  ... остальная часть определения ...

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


  ... остальная часть определения ...

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

Наборы вложенных рамок

Наборы фреймов могут быть вложены на любой уровень.

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


       ... содержимое первого кадра ... 
     
          ... содержимое второго кадра, первая строка ... 
          ... содержимое второго кадра, вторая строка ... 
     
       ... содержимое третьего кадра ...

Обмен данными между фреймами

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

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

<ГОЛОВА> Это набор фреймов с OBJECT в HEAD

<ГОЛОВА> Страница Бьянки <ТЕЛО> ... начало документа ...

... остальная часть документа ...

16.2.2 Модель

РАМА элемент

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

имя = cdata [CI]

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

longdesc = uri [CT]

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

src = uri [CT]

Этот атрибут определяет местоположение исходного содержимого, которое будет содержится в кадре.

размер [CI]

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

прокрутка = авто | да | нет [CI]

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

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

рамка рамки = 1 | 0 [CN]

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

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

ширина поля = пикселя [CN]

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

marginheight = пикселей [CN]

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

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

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

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

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

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



<ГОЛОВА>
 Документ с фреймами

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

 ------------------------------------------
| Кадр 1 | Кадр 3 | Кадр 4 |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
------------- | | |
| Кадр 2 | | |
| | | |
| | | |
 ------------------------------------------

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

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

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



<ГОЛОВА>
 Документ с фреймами 


  
  
  <БЕЗ КАДРОВ>
    ... немного текста ... 
    
 Важный раздел   
    ... немного текста ...

Визуальный рендеринг кадра

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



<ГОЛОВА>
 Документ с фреймами

Примечание. Для получения информации о текущей практике в определения цели кадра см. примечания к кадрам в приложение.

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

цель = кадр-цель [CI]: Этот атрибут определяет имя фрейма, в котором должен быть размещен документ. открыт.

Присваивая имя фрейму с помощью атрибута name , авторы могут называют его «целью» ссылок, определяемых другими элементами. Мишень атрибут может быть установлен для элементов, которые создают ссылки ( A , ССЫЛКА ), карты изображений ( ОБЛАСТЬ ) и формы ( ФОРМА ).

См. Раздел имена целевых фреймов для информации о распознанных именах фреймов.

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



<ГОЛОВА>
 Документ с фреймами

Затем в init_dynamic.html мы делаем ссылку на фрейм с именем «динамический».

<ГОЛОВА> Документ с привязками к конкретным целям <ТЕЛО> ... начало документа ...

Теперь вы можете перейти к слайд 2 ... еще документ ...

У вас все отлично. Теперь перейдем к слайд 3.

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

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

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

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

<ГОЛОВА> Документ с BASE с определенной целью <ТЕЛО> ...начало документа ...

Теперь вы можете перейти к слайду 2 ... еще документ ...

У вас все отлично. Теперь перейдем к слайд 3

16.3.2 Целевая семантика

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

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

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

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

16.4.1

NOFRAMES элемент

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

id , класс (идентификаторы на уровне документа)
lang (информация о языке), dir (текст направление)
название (элемент title)
стиль (встроенный стиль информация)
onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события)

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

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

Например:

<ГОЛОВА> Документ с набором фреймов с NOFRAMES <БЕЗ КАДРОВ>

Вот версия документа без рамки.

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

16.4.2 Длинный описания рам

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

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



<ГОЛОВА>
 Плохо спроектированный документ с набором фреймов

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

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



<ГОЛОВА>
 Хорошо продуманный документ с набором фреймов



<ГОЛОВА>
 Быстрый и мощный страус

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

longdesc = uri [CT]: Этот атрибут указывает ссылку на подробное описание кадра.Этот описание должно дополнять краткое описание, предоставленное с использованием title атрибут, и особенно полезен для невизуальных пользователей агенты.
имя = cdata [CI]: Этот атрибут присваивает имя текущему кадру. Это имя можно использовать как цель последующих ссылок.
ширина = длина [CN]: Ширина встроенного фрейма.
высота = длина [CN]: Высота встроенного фрейма.

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

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

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

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

  
  [Ваш пользовательский агент не поддерживает фреймы или в настоящее время настроен
  не отображать рамки.Однако вы можете посетить
  <A href="foo.html"> связанный документ. </A>]

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

Примечание. HTML-документы также могут быть встроены в другой HTML-код. документы с ОБЪЕКТ элемент. См. Раздел о встроенных документах для Детали.

Вот как сделать их отзывчивыми »

Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше

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

Разница между фреймами и iframe

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

iframe , с другой стороны, встраивает фрейм непосредственно в другие элементы веб-страницы.

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

Фреймы являются элементами, определяющими компоновку.
Iframe — это элементы, добавляющие контент.

История и будущее фреймов

Фреймы были признаны W3C устаревшими в HTML5. Это объясняется тем, что фреймы создают проблемы с удобством использования и доступностью. Давайте рассмотрим каждое из этих обвинений.

Проблема с фреймами

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

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

Содержимое должно быть добавлено и определено с помощью разметки, такой как HTML.
Презентация должна управляться с помощью таких языков, как CSS и JavaScript.

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

Будущее фреймов

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

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

Как создавать фреймы

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

Основная идея фреймов

Основная идея фреймов довольно проста:

Используйте элемент frameset вместо элемента body в документе HTML.
Используйте элемент frame для создания фреймов для содержимого веб-страницы.
Используйте атрибут src для определения ресурса, который должен быть загружен внутри каждого кадра .
Создайте отдельный файл с содержимым для каждого кадра .

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

  

    
          Кадр 1  
         Содержание кадра 1

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

Создание вертикальных столбцов

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

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

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

Вот как выглядит наша разметка HTML.

А вот как этот HTML-код будет отображаться.

Создание горизонтальных строк

Строки фреймов могут быть созданы с использованием атрибута rows , а не атрибута cols , как показано в HTML ниже.

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

Смешивание столбцов и строк

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

Вот результат этого кода:

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

Вот как будут отображаться переставленные кадры.

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

Этот код создает набор из двух столбцов одинакового размера. Затем мы разбиваем второй столбец на две строки. Наконец, мы разделили вторую строку на два столбца. Вот как это выглядит на самом деле.

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

Результирующая сетка столбцов и строк выглядит следующим образом.

Как стилизовать фреймы

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

Стили внутри каждого фрейма .
Стилизация набора фреймов

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

Другими словами, frame_1.html должен быть оформлен в соответствии с правилами CSS, содержащимися в frame_1.html или в таблице стилей, связанной с frame_1.html .

Стилизация исходных документов кадра

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

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

Если мы хотим стилизовать frame_1.html нам нужно добавить стили непосредственно в сам документ либо путем ссылки на внешнюю таблицу стилей, либо путем ввода их непосредственно в документ. Вот пример того, как это сделать:

  

    
        <стиль>
            тело {фон: серый;}
            h2 {цвет: синий;}
            p {margin: 20px;}
        
    
    
          Кадр 1  
         Содержание кадра 1

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

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

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

Размер каждого кадра можно указать и заблокировать.
Поле между кадрами можно изменять.
Границу вокруг кадров можно отформатировать.

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

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

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

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

Давайте реализуем обе эти идеи на практике.

Давайте создадим следующий макет:

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

Мы можем создать этот макет с помощью следующего кода.

Этот код создает набор фреймов из двух строк.

Высота первой строки 150 пикселей. Атрибут noresize , появляющийся в первом кадре , означает, что его размер нельзя изменить.
Стили, которые мы применили ранее к frame_1.html сохраняются, но влияют только на содержимое этого фрейма.
Вторая строка расширяется, чтобы заполнить оставшееся пространство.
Второй набор кадров вложен во вторую строку и включает в себя три столбца. Каждый первый и третий столбцы будут занимать по 20% доступного окна браузера. Размер второго столбца изменится, чтобы заполнить пространство, оставшееся между первым и третьим столбцами. Поскольку мы не использовали атрибут noresize для столбцов, они будут изначально отображаться на основе размеров, включенных в код, но посетитель веб-сайта сможет изменить их размер вручную.

Этот код создаст веб-страницу, которая будет отображаться следующим образом.

`Форматирование полей и границ кадра`

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

Атрибут marginheight , примененный к первому кадру, добавит поля на 15 пикселей выше и ниже содержимого, загруженного в первый кадр.Значение frameborder , равное 0 , удаляет границы вокруг трех нижних кадров.

Если мы откроем этот код в браузере, то вот как он будет выглядеть.

`Целевые фреймы со ссылками`

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

Якоря

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

Если все это немного сбивает с толку, давайте рассмотрим это шаг за шагом.

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

Теперь, когда мы назвали центральный столбец name = "mid_col" , мы можем создать пару ссылок в нашем исходном документе в левом столбце frame_2.html и нацелить на центральный столбец.

  


      Кадр 2  
     Содержание кадра 2 
    
      Загрузить frame_1.html  
      Загрузить frame_2.html  
      Загрузить frame_3.html  
      Загрузить frame_4.html

Теперь, когда мы загружаем нашу веб-страницу, у нас есть четыре навигационные ссылки на левой боковой панели, и когда мы щелкаем ссылку, содержимое этого файла загружается в средний столбец frame с атрибутом name = "mid_col" .

Когда мы загружаем нашу страницу, вот что мы видим изначально.

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

Если мы щелкнем ссылку Загрузить frame_2.html , мы увидим содержимое навигации как на левой боковой панели, так и в среднем столбце.

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

Если мы забыли добавить атрибут target = "mid_col" к одной из ссылок, когда мы щелкнем ссылку, ресурс загрузится в том же фрейме, который содержал ссылку. Если мы хотим перезагрузить всю страницу, например, при ссылке на внешний веб-сайт, нам нужно добавить атрибут target = "_ blank" или target = "_ top" к элементу привязки.

`Предоставление`

 noframes  Fallback В прошлом элемент  noframes  использовался для создания резервной копии для браузеров, которые не поддерживали использование фреймов.Однако все современные браузеры на данный момент поддерживают фреймы, а поддержка  noframes  практически отсутствует. В результате больше нет необходимости иметь резервный вариант  noframes  при работе с кадрами.
 Как сделать фреймы адаптивными 
 Одна из проблем с фреймами заключается в том, что они создают проблемы с удобством использования для посетителей веб-сайтов, использующих смартфоны и небольшие планшеты. Поскольку фреймы были полностью удалены из HTML5 и признаны устаревшими, важно, чтобы владельцы веб-сайтов, построенных с использованием фреймов, начали планировать редизайн, который не включает фреймы.Однако до тех пор, пока не будет завершен полный редизайн, веб-мастера могут сделать несколько вещей, чтобы повысить удобство использования дизайнов во фреймах.
 Используйте строки вместо столбцов 
 Если возможно, организуйте фреймы в строки, а не столбцы. На маленьком экране гораздо проще перемещаться по контенту по вертикали, чем по горизонтали, и кадры, расположенные в строки, намного легче просматривать на маленьком экране, чем кадры, расположенные в столбцы.
 Если мы сжимаем наши макеты столбцов и строк для моделирования экрана Apple iPhone 6, мы можем увидеть, насколько легче просматривать строки, чем столбцы.
 Если бы вам пришлось взглянуть на эти два сайта и попытаться их прочитать, что бы вы предпочли посмотреть?
 Использовать проценты для ширины столбцов 
 Если размер столбцов определяется в процентах, а не в пикселях, они автоматически изменяются в зависимости от размера устройства, используемого для просмотра сайта. Хотя это может создать некоторые проблемы, если некоторые кадры станут слишком маленькими, в целом впечатление пользователя будет лучше, если ширина столбцов будет назначаться на основе процентов, а не пикселей.
 Как перейти от фреймов 
 Элементы набора фреймов   и  фреймов  были удалены из последней спецификации HTML, HTML5. Владельцы веб-сайтов, построенных с использованием фреймов, должны завершить редизайн своего веб-сайта, чтобы удалить фреймы из дизайна сайта.
 В какой-то момент веб-браузеры перестанут поддерживать фреймы. Когда это произойдет, веб-сайты, которые все еще полагаются на фреймы, станут непригодными для использования. В результате переход от фреймов - не просто хорошая идея, это обязательно.
 Оценка содержимого во фреймах 
 Первый шаг к изменению дизайна веб-сайта, использующего фреймы, - это продумать причины, по которым фреймы были использованы в первую очередь.

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

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

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

`Разработайте стратегию для вашего нового веб-сайта`

Если ваш веб-сайт построен с использованием фреймов, велика вероятность, что он сильно устарел.Вместо того, чтобы просто поместить весь контент вашего веб-сайта в один HTML-файл и стилизовать его с помощью некоторого CSS, сейчас самое время подумать о модернизации, переключившись на систему управления контентом.

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

Чтобы помочь вам приступить к изучению систем управления контентом, вот три самых популярных системы управления контентом:

`Дополнительные ресурсы`

Если вы хотите узнать больше о фреймах, лучшим источником дополнительной информации является World Wide Веб-консорциум (W3C).Вот несколько их страниц с информацией о фреймах:

Джон - писатель-фрилансер, любитель путешествий, муж и отец. Он пишет о веб-технологиях, таких как WordPress, HTML и CSS.

`Использование HTML-тега для создания встроенных фреймов: вот как »`

`Мощно, но легко использовать не по назначению`

В старые плохие времена дизайна веб-сайтов было много элементов, которые были день. Они почти всегда плохо подходили к дизайну.К счастью, элемент устарел в HTML5, но </code>, или «встроенный фрейм», все еще доступен. Должен ли он тоже быть устаревшим? Лучше всего просто избежать этого? У этого элемента есть несколько допустимых применений, но вам действительно нужно понять, что это такое и как работает, чтобы избежать некоторых ловушек, которые были так распространены в темные времена.</p><h4><span class="ez-toc-section" id="i-35"> Чем похожи </span></h4><code> <iframe> </code> и <code><frame> </code> и чем они отличаются</h4><p> Оба элемента представляют собой независимый документ HTML.Их содержимое для документа упоминается в атрибуте <code> src </code> каждого элемента, поэтому на самом деле это полностью независимый ресурс, на <em> которого ссылается </em> из текущего документа.</p><pre> <code> <! - Вы можете это сделать -> <iframe src = "https://example.com"> <! DOCTYPE html> <html> <заголовок>. . . </head> <body>. . . </body> </html>

Основное различие между </code> и <code><frame> </code> заключается в том, что <code> <iframe> </code> реализует это таким образом, который имеет смысл, с учетом того, что HTML-документ стоит на первом месте.Содержимое <code> <iframe> </code> отображается внутри элемента, который явно является частью текущего документа. Например, рассмотрим встроенное видео YouTube:</p><pre> <code> <iframe src = "https://www.youtube.com/embed/M2kSJbLbIgQ" frameborder = "0" allowfullscreen>

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

`Не создавайте повторно макеты на основе фреймов с помощью iframe.`

Вам может потребоваться обновить или изменить дизайн старого веб-сайта, созданного с использованием фреймов. И тогда у вас может возникнуть соблазн использовать и дизайн с фиксированной шириной, чтобы воссоздать тот же кошмар с независимыми панелями и подокнами.Тогда вы обнаружите, что вы не можете использовать атрибут target , чтобы открыть ссылку в определенном фрейме. Этот должен вас остановить, , но тогда вы можете начать искать решения для JavaScript, и тогда вы перестроите что-то ужасное. Пожалуйста, не делай этого.

`Хорошее (и ужасное) использование для`

  </code></h3><p> Есть несколько законных применений для <code> <iframe> </code>, и имитация ужасных шаблонов проектирования из 1990-х годов не входит в их число. Вот некоторые из них:</p><ul><li> встраивание сторонних носителей</li><li> внедрение ваших собственных носителей без учета документов</li><li> внедрение примеров кода (мы делаем это на этом сайте)</li><li> внедрение сторонних «апплетов», таких как формы оплаты</li></ul><p> И вот несколько ужасных применений для <code> <iframe> </code></p><ul><li> фотогалерея</li><li> forum or chan</li></ul><p> В основном - если вам нужно встроить какой-то независимый, уже существующий HTML-документ в текущий документ, используйте <code> <iframe> </code>.Если вы строите все это с нуля, почти нет веских причин разбивать дизайн страницы на несколько независимых документов, особенно если они не являются фактически независимыми частями контента.</p><p> Адам - технический писатель, специализирующийся на документации и руководствах для разработчиков.</p><h2><span class="ez-toc-section" id="_HTML-7"> Как использовать теги в HTML-коде </span></h2><p> Не рекомендуется в HTML5. Не используйте.</p><p> Устарело, HTML-теги</p> <strong> Раскрытие информации: </strong> Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше<dl><dt> Элемент</dt><dd> HTML-фреймов в HTML5 устарели: вот как сделать их адаптивными</dd><dt> Что делает <code> Как использовать теги<frame> в HTML-коде </code>?</dt><dd> Элемент<frame> использовался для разделения одного окна браузера на несколько независимых контекстов просмотра. Фреймы устарели и не должны использоваться на современных веб-сайтах.</dd><dt> Дисплей</dt><dd> блок</dd><dt> Использование</dt><dd> структурный</dd></dl><h3></h3><code> vs.</code></h3><p> Фреймы позволяют разделить окно браузера на несколько отдельных контекстов просмотра, каждый из которых отображает независимый документ HTML. Вы, вероятно, столкнулись с рядом плохо спроектированных веб-сайтов на основе фреймов, если проводите какое-то время в сети в начале 21 века. Наиболее распространенным шаблоном проектирования, в котором использовались «элементы», был подход с использованием панелей меню и отображения, при котором часть содержимого во фрейме перезагружалась по мере того, как вы щелкали по элементам меню (и все это без изменения URL-адреса на панели навигации, что делало невозможным ссылку на какой-либо конкретный Посмотреть).</p><p> Фреймы теперь не рекомендуются в HTML5, но возможность размещать один документ внутри другого все еще существует. Вы можете сделать это в [<code>] (/ tags / iframe /). И важно понимать, что </code> - это не просто переименованная или обновленная версия <code>. </code> - это «встроенный» фрейм (или, как некоторые его называют, «внутренний фрейм»). Это не разбивает окно браузера на отдельные контексты, а скорее встраивает один документ в другой.</p> Адам - технический писатель, специализирующийся на документации и руководствах для разработчиков.<h3><span class="ez-toc-section" id="i-37"> Атрибуты кадра </span></h3><table><tr><th> Имя атрибута</th><th> Значения</th><th> Примечания</th></tr><tr><td> src <br/></td><td/><td> Определен исходный URL-адрес для кадра. В HTML5 фреймы не рекомендуются.</td></tr><tr><td> имя <br/></td><td/><td> Определяет имя фрейма. В HTML5 фреймы не рекомендуются.</td></tr><tr><td> marginwidth <br/></td><td/><td> Используется для управления полями кадра. В HTML5 фреймы не рекомендуются.</td></tr><tr><td> прокрутка <br/></td><td/><td> Используется для управления прокруткой внутри фреймов.В HTML5 фреймы не рекомендуются.</td></tr><tr><td> noresize <br/></td><td/><td> Используется, чтобы помешать пользователям изменять размер фреймов в окне браузера. В HTML5 фреймы не рекомендуются.</td></tr><tr><td> frameborder <br/></td><td/><td> Используется для управления границами вокруг кадров. В HTML5 фреймы не рекомендуются.</td></tr><tr><td> bordercolor <br/></td><td/><td> Задает цвет границы рамки. В HTML5 фреймы не рекомендуются.</td></tr></table><h3><span class="ez-toc-section" id="i-38"> Навигация по сообщениям </span></h3><h2><span class="ez-toc-section" id="_HTML_-_GeeksforGeeks"> Тег набора фреймов HTML - GeeksforGeeks </span></h2><p> Тег<frameset> в HTML используется для определения набора фреймов.Элемент<frameset> содержит один или несколько элементов кадра. Он используется для указания количества строк и столбцов в наборе фреймов с их пробелами в пикселях. Каждый элемент может содержать отдельный документ.</p><p> <strong> Примечание: </strong> Тег<frameset> не поддерживается в HTML5.</p><p> <strong> Синтаксис: </strong></p><pre> <frameset cols = "пикселей |% | *"> </pre><p> <strong> Атрибуты: </strong> Список атрибутов набора фреймов приведен ниже: <br/></p><ul><li> <strong> cols </strong> <strong>: </strong> Используется атрибут cols для создания вертикальных рамок в веб-браузере.Этот атрибут в основном используется для определения номера. столбцов и их размер внутри тега frameset.</li><li> <strong> строк </strong> <strong>: </strong> Атрибут строк используется для создания горизонтальных фреймов в веб-браузере. Этот атрибут используется для определения номера. строк и их размер внутри тега frameset.</li><li> <strong> граница </strong> <strong>: </strong> Этот атрибут тега frameset определяет ширину границы каждого кадра в пикселях. Если граница отсутствует, используется нулевое значение.</li><li> <strong> frameborder </strong> <strong>: </strong> Этот атрибут тега frameset используется, чтобы указать, должна ли отображаться трехмерная граница между кадрами или нет, для этого используйте два значения 0 и 1, где 0 означает отсутствие границы, а значение 1 означает для да будет граница.</li><li> <strong> интервал между кадрами </strong> <strong>: </strong> Этот атрибут тега набора кадров используется для определения расстояния между кадрами в наборе кадров. Это может принимать любое целочисленное значение в качестве параметра, который в основном обозначает значение в пикселях.</li></ul><p> Примеры ниже иллюстрируют элемент<frameset> в HTML: <br/> <strong> Пример 1: </strong></p> <br/> <br/><h3><span class="ez-toc-section" id="HTML-2"> HTML </span></h3><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p> <code> <! DOCTYPE html> </code><p>53<p> <code> <</code> </code> 905<p> <code> </code> <code> <</code> <code> голова </code> <code>> </code></p><p> <code> </code> <code> <</code> <code> заголовок </code> <code>> атрибут набора фреймов </ </code> <code> заголовок </code> <code>> </code></p><p> <code> 905 905 905 905 <code><p> <code> 905 905 905 905<p> <code> </code></p><p> <code> </code></p><p> <code> </code> <code> <</code> <code> набор фреймов </code> <code> строки </code> <code> = </code> <code> "20%, 60%, 20%" </code> <code>> </code></p><p> <code> 905 905 905 </code> <code> = </code> <code> "верх" </code> <code> src </code> <code> = </code> <code> "attr1.png "</code> <code> /> </code></p><p> <code> </code> <code> <</code> <code> кадр </code> <code> имя </code> <code> = </code> <code>" main "</code> <code> src </code> <code> = </code> <code>" gradient850003 </code> <code> /> 905 905 905 905 905 905 905 905 905 <</code> <code> фрейм </code> <code> имя </code> <code> = </code> <code> "нижний" </code> <code> src </code> <code> = </code> <code> "col_last.png" </code> <code> /> </code></p><p> <code> </code> <code> <</p>54 <code> nof <code> <</code> <code> body </code> <code>> Браузер, с которым вы работаете, не поддерживает фреймы </code></p><p> <code> </code> <code>.</ </code> <code> корпус </code> <code>> </code></p><p> <code> </code> <code> </ </code> <code> без рам </code> <code>> </code></p><p> <code> </code> <code> </ </code> <code> набор рам </code> <code>> </code>83</p></p></p><p> <code>> </code></p></td></tr></tbody></table><p> <strong> Вывод: </strong> <br/> Приведенный выше пример в основном используется для создания трех горизонтальных фреймов: верхнего, среднего и нижнего с использованием атрибута row тега frameset, а тег noframe используется для того браузера, который не использует ' t поддерживает noframe.<br/></p><p></p><p> <strong> Пример 2: </strong> <br/></p><h3><span class="ez-toc-section" id="HTML-3"> HTML </span></h3><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p> <code> <! DOCTYPE html> </code></p><p> <code> <</code> <code> html </code> <code> 905 </code> 905 905 <code> 905 </code></p><p> <code> </code> <code> <</code> <code> заголовок </code> <code>> атрибут набора фреймов </ </code> <code> заголовок </code> <code>> </code></p><p> <code> </code> <code> </ </code> <code> головка </code> <code>> </code>583</p> <code> </code><p> набор фреймов </code> <code> cols </code> <code> = </code> <code> "30%, 40%, 30%" </code> <code>> </code></p><p> <code> </code> <code> <</code> <code> frame </code> <code> name </code> <code> = </code> <code> "top" </code> <code> s <code> "attr1.png "</code> <code> /> </code></p><p> <code> </code> <code> <</code> <code> рамка </code> <code> имя </code> <code> = </code> <code>" main "</code> <code> src </code> <code> = </code> <code>" gradient850003 </code> <code> /> 905 905 905 905 905 905 905 905 905 <</code> <code> фрейм </code> <code> имя </code> <code> = </code> <code> "нижний" </code> <code> src </code> <code> = </code> <code> "col_last.png" </code> <code> /> </code></p><p> <code> </code> <code> <</p>54 <code> nof <code> <</code> <code> body </code> <code>> Браузер, с которым вы работаете, </code></p><p> <code> </code> <code> не поддерживает фреймы.</ </code> <code> корпус </code> <code>> </code></p><p> <code> </code> <code> </ </code> <code> без рам </code> <code>> </code></p><p> <code> </code> <code> </ </code> <code> набор рам </code> <code>> </code>584</p></p></td></tr></tbody></table><p> <strong> Вывод: </strong> <br/> Приведенный выше пример в основном используется для создания трех вертикальных фреймов: левого, центрального и правого с использованием атрибута col тега frameset. <br/></p><p></p><p> <strong> Поддерживаемые браузеры: </strong></p><ul><li> Google Chrome</li><li> Internet Explorer</li><li> Firefox</li><li> Opera</li><li> Safari</li></ul><p></p><p> Внимание читатель! Не прекращайте учиться сейчас.Освойте все важные концепции HTML с <strong> Web Design for Beginners | HTML </strong> <strong> </strong> курс.</p> <br/><h2><span class="ez-toc-section" id="-_HTML"> - HTML: язык разметки гипертекста </span></h2><p> <strong> Устарело: </strong> Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, возможно, он уже был удален из соответствующих веб-стандартов, может быть удален или может быть сохранен только в целях совместимости. Избегайте его использования и, если возможно, обновите существующий код; см. таблицу совместимости внизу этой страницы, чтобы принять решение.Имейте в виду, что эта функция может перестать работать в любой момент.</p><p> Элемент HTML <strong> <code><frame> </code> </strong> определяет конкретную область, в которой может отображаться другой документ HTML. Фрейм должен использоваться в пределах <code><frameset> </code>.</p><p> Использование элемента <code><frame> </code> не рекомендуется из-за определенных недостатков, таких как проблемы с производительностью и недоступность для пользователей с программами чтения с экрана. Вместо элемента <code><frame> </code> может быть предпочтительнее <code> <iframe> </code>.</p><p> Как и все другие элементы HTML, этот элемент поддерживает глобальные атрибуты.</p><dl><dt> <b> <code> src </code> </b></dt><dd> Этот атрибут определяет документ, который будет отображаться во фрейме.</dd><dt> <b> <code> наименование </code> </b></dt><dd> Этот атрибут используется для маркировки фреймов. Без маркировки каждая ссылка будет открываться во фрейме, в котором она находится - ближайшем родительском фрейме. См. Атрибут <code> target </code> для получения дополнительной информации.</dd><dt> <b> <code> размер </code> </b></dt><dd> Этот атрибут предотвращает изменение размеров фреймов пользователями.</dd><dt> <b> <code> прокрутка </code> </b></dt><dd> Этот атрибут определяет наличие полосы прокрутки. Если этот атрибут не используется, браузер при необходимости добавляет полосу прокрутки. Есть два варианта: «да» для принудительного использования полосы прокрутки, даже если в этом нет необходимости, и «нет» для принудительного отключения полосы прокрутки, даже если это <em> является </em> необходимым.</dd><dt> <b> <code> высота поля </code> </b></dt><dd> Этот атрибут определяет высоту поля между кадрами.</dd><dt> <b> <code> ширина поля </code> </b></dt><dd> Этот атрибут определяет ширину поля между кадрами.</dd><dt> <b> <code> рамка, граница </code> </b></dt><dd> Этот атрибут позволяет указать границу фрейма.</dd></dl><pre> <code> <frameset cols = "50%, 50%">
  <frame src = "https://developer.mozilla.org/en/HTML/Element/iframe" />
  <frame src = "https://developer.mozilla.org/en/HTML/Element/frame" />
</frameset>
 </code> </pre><p> Таблицы BCD загружаются только в браузере</p><h2><span class="ez-toc-section" id="HTML-_-_HTML"> HTML-фреймов - Простое руководство по HTML </span></h2><p> Фреймы позволяют иметь несколько разделов окна браузера, называемых фреймами, в каждом из которых отображается свой собственный.html внутри фрейма.
Раньше это было обычной практикой при попытке отобразить отдельные разделы сайта в отдельных разделах окна браузера, таких как заголовок вверху, навигация сбоку, а остальное было содержимым страницы, которое кто-то мог прокрутить вниз, не выполняя заголовок и навигация исчезнут.</p><p> Наборы фреймов в наши дни используются редко, поскольку появление языков сценариев на стороне сервера, таких как php и asp, позволяет динамически создавать страницы содержимого. Введение HTML5 также предоставило новые методы создания макетов страниц без использования фреймов.</p><dl><dt> Набор рамок - <code><frameset> ...</frameset> </code></dt><dd> Используемый вместо тега <code> body </code>, тег <code> frameset </code> определяет группу кадров.
Установка атрибута <code> rows </code> и <code> cols </code> позволяет вам создать количество кадров, необходимое для вашего макета.</dd><dd> <code> rows = "??, ??" </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> Рама - <code> <рама> </code></dt><dd> Для каждого кадра в наборе потребуется тег <code> frame </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><span class="ez-toc-section" id="i-39"> Пример: </span></h4><p> Пример кадра с одной строкой заголовка, левым и правым столбцами и содержимым в центре.</p><pre> <code> <html>
 <head>
  <title> Пример - Рамки </title>
 </head>
 <frameset rows = "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> ошибка, отображаемая для тех, кто не видит фреймы </i>
   </noframes>
 </frameset>
</html> </code> </pre><p> Посмотрите живую демонстрацию этого примера или откройте в новом окне.<div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div><footer class="entry-footer"> <span class="cat-links">Категория: <a href="https://forjobathome.ru/category/raznoe" rel="category tag">Разное</a></span></footer></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://forjobathome.ru/raznoe/crm-obzor-6-luchshih-servisov-dlya-biznesa.html" rel="prev">Crm обзор: 6 лучших сервисов для бизнеса</a></div><div class="nav-next"><a href="https://forjobathome.ru/raznoe/trebuetsya-3d-hudozhnik-3d-hudozhnik-personazhej-razrabotka-igrv-arhive-s-25-yanvarya-2016.html" rel="next">Требуется 3d художник: 3D-художник персонажей (разработка игр)В архиве с 25 января 2016</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/chto-takoe-frejmy-v-html-kak-sozdat-frejmy-v-html-osnovy-html-dlya-nachinayushhih-urok-16.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://forjobathome.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='13198' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div></section><footer class="wrapper wrap-footer"><section class="wrapper footer-widget"><div class="container"><div class="row"></div></div></section><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></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></div></div></div></div></section></footer> <a id="gotop" class="greenturtle-back-to-top" href="#page"><i class="fa fa-angle-up"></i></a></div><div style="display:none"></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://forjobathome.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize -->
<style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script>
<!-- /noptimize --></body></html>