Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

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

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

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

Синтаксис

<frameset>
  <frame>
</frameset>

Атрибуты

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

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

Обязателен.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег FRAMESET</title>
 </head>

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

</html>

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

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

Фреймы в 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> не должен использоваться.
iframesandbox

scrolling

name

align

frameborder

longdesc

marginwidth

src

vspace

width

<iframe> создает встроенный фрейм, который выводит в текущий документ независимый HTML-документ.
framesetframeborder

cols

bordercolor

Элемент <frameset> использовался, чтобы создать группу фреймов, которые могут управляться и стилизоваться, как одно целое. На данный момент фреймы в HTML устарели и не должны использоваться.
frameSrc

name

marginwidth

scrolling

noresize

frameborder

bordercolor

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

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

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

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

Вадим Дворниковавтор-переводчик статьи «Frames»

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

Как запустить видеоурок:
  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл 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. Прокручивая контент, меню остается на месте. При нажатии по ссылке «Обратная связь», если мы добавим страничку «Обратная связь» в папку с фреймом, то она должна отобразиться на месте контента.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фреймы HTML: как создать и примеры

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

Раньше для создания фреймов обязательно нужно было делать отдельную фрейм-страницу и подключать к ней страницы содержания. Для этого использовались теги <frameset> и <frame>.

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

Современные фреймы создаются исключительно с помощью тега <iframe>, для оформления которого используются CSS-стили.

Практическое использование <iframe> изображено на рисунке ниже. На странице index.html расположен фрейм, в котором отображается содержимое документа gallery.html.

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

 

<iframe src=»gallery.html»> Ваш браузер не поддерживает плавающие фреймы! </iframe>

Разберём его.

<iframe> — тег фрейма. Он парный, закрывать обязательно. Текст внутри отобразится в том случае, если браузер не поддерживает фреймы.

src — атрибут, значением которого является ссылка на отображающийся во фрейме документ.

width — ширина (указывается в пикселях или процентах).

height — длина (задаётся аналогично).

Также кроме перечисленных и общих свойств тегу <iframe> доступны следующие атрибуты.

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

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

srcdoc. В этом атрибуте хранится содержимое фрейма, при его наличии свойство src игнорируется.

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

Полезные ссылки:

Создание фреймов — HTML, CSS, JavaScript, Perl, PHP, MySQL: Weblibrary.biz

Один из часто задаваемых вопросов — как фреймы и JavaScript могут работать вместе. Сначала я хотел бы объяснить, что такое фреймы и для чего они могут использоваться. Затем мы рассмотрим, как можно использовать JavaScript совместно с фреймами. В общем случае окно браузера может быть разбито в несколько отдельных фреймов. Это означает, что фрейм определяется как некое выделенное в окне браузера поле в форме прямоугольника. Каждый из фреймов выдает на экран содержимое собственного документа (в большинстве случаев это документы HTML). Таким образом, Вы можете, к примеру, создать два фрейма. В первый такой фрейм Вы можете загрузить «домашнюю страницу» фирмы Netscape, а во второй — фирмы Microsoft. Хотя создание фреймов является задачей языка HTML, я бы хотел все же описать здесь основные моменты этого процесса. Для создания фреймов Вам необходимо два тэга: <frameset> и <frame>. HTML-страница, создающая два фрейма, в общем случае может выглядеть следующим образом:

<html>
<frameset rows=»50%,50%»>
<frame src=»page1.htm» name=»frame1″>
<frame src=»page2.htm» name=»frame2″>
</frameset>
</html>

В результате будут созданы два фрейма. Вы можете заметить, что во фрейме <frameset> мы используем свойство rows. Это означает, два наших фрейма будут расположены друг над другом. В верхний фрейм будет загружена HTML-страница page1.htm, а в нижнем фрейме разместится документ page2.htm. Окончательно созданная структура фреймов будет выглядеть следующим образом:

Если Вы хотите, чтобы документы располагались не друг над другом, а рядом то, Вам следует в тэге <frameset> писать rows, а cols. Фрагмент «50%,50%» сообщает, насколько велики должны быть оба получившихся окна. Вы имеете также возможность записать «50%,*», если не хотите утруждать себя расчетами, насколько велик должен быть второй фрейм, чтобы в сумме получалась все те же 100%. Вы можете также задать размер фрейма в пикселах, для чего достаточно после числа не ставить символ %. Любому фрейму можно присвоить уникальное имя, воспользовавшись в тэге <frame> атрибутом name. Такая возможность пригодится нам в языке JavaScript для доступа к фреймам.

При создании web-страниц Вы можете использовать несколько вложенных тэгов <frameset>. Следующий пример я нашел в документации, предоставляемой фирмой Netscape, (и слегка изменил его):

<frameset cols=»50%,50%»>
<frameset rows=»50%,50%»>
<frame src=»cell.htm»>
<frame src=»cell.htm»>
</frameset>
<frameset rows=»33%,33%,33%»>
<frame src=»cell.htm»>
<frame src=»cell.htm»>
<frame src=»cell.htm»>
</frameset>
</frameset>

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

Вы можете задать толщину границы между фреймами, воспользовавшись в тэге <frameset> параметром border. Запись border=0 означает, что Вы не хотите, чтобы между тэгами имелась какая-либо граница (в Netscape 2. x такой механизм не работает).

Фреймы

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

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

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

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

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


Примечание

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


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


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

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

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

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

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

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

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

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

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

Совет

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


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

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


<html>

<head>


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

</head>

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

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

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

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


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

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

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

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

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


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

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

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

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

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


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

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

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

  2. Совет

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


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

Совет

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

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

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

Как создавать фреймы в HTML? – Веб-ноты

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

Связанный: Узнайте, как создать свой первый блог с помощью WordPress?

В кадре

Тег HTML используется для разделения области отображения вашего браузера на разделы.В каждом разделе может отображаться отдельный документ. Разве вы не видели те страницы, где вы нажимаете на ссылку в левой части страницы, а документ справа изменяется? Что ж, вся эта магия была сделана с помощью рамок! Его можно использовать для разделения различных частей экрана, например. заголовок, индекс, содержание, титры и т. д.

Просто, не правда ли? Теперь давайте посмотрим, как делается это «обрамление»!

Изготовление рамной конструкции

Сначала мы определяем кадры, т.е. описываем, как мы разбиваем экран на секции.Предположим, вы хотите, чтобы ваша страница выглядела примерно так:

. Пример структуры фрейма HTML

Вот код для этого (замените ссылку SRC на ваши исходные URL-адреса страницы):

 <НАБОР КАДРОВ ЦЕЛЕВ = "25%, 75%">

<НАБОР РЯДОК="75%,25%">


<КАДР SRC="index.html">









 

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

HTML-фреймы, отображаемые в браузере

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

Опробовать фрейм HTML

По сути, вы можете изменить значения атрибутов rows и cols тега frameset, чтобы создать кадры разного размера на одном экране.

Браузеры, не поддерживающие фреймы

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

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

ИНФРАМ

Тег не поддерживается в HTML5, и, следовательно, приведенные выше детали не очень полезны в практическом мире на данный момент.Вместо этого в HTML есть новый тег


HTML | Тег — GeeksforGeeks

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

Создание фреймов: Вместо использования тега body используйте тег frameset в HTML, чтобы использовать фреймы в веб-браузере. Но этот тег устарел в HTML 5. Тег frameset используется для определения того, как разделить браузер. Каждый фрейм обозначается тегом фрейма, и он в основном определяет, какой HTML-документ должен открываться в фрейме. Для определения горизонтальных фреймов используйте атрибут row тега frame в документе HTML, а для определения вертикальных фреймов используйте атрибут col тега frame в документе HTML.

Пример:

< HTML >

< голова >

< Название > Пример HTML-кадров с использованием атрибута строки >

>

< Frameset Rows = "20%, 60%, 20%" >

< Frame = "Top" SRC =

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

< Имя = " Главная " SRC =

=

" C: / Пользователи / Dharam / Desktop / Gradient3 .PNG " />

< Name = « Нижние » SRC =

« C: / пользователи / Dharam / настольный / col_last.PNG " />

< > > < Body > Браузер Вы работаете

не поддерживают кадры. тела >

NOFRAMES >

фреймами >

HTML >

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

Пример: Этот пример иллюстрирует атрибут col тега frameset.

< HTML >

< голова >

< название > Пример HTML-кадров с использованием COL атрибута >

>

< Frameset Cols = "30%, 40%, 30%" >

< = "Top" SRC =

"C: / Пользователи/dharam/Desktop/attr1.png " />

< Имя = " Главная " SRC =

=

" C: / Пользователи / Dharam / Desktop / Gradient3 .PNG " />

< Name = « Нижние » SRC =

« C: / пользователи / Dharam / настольный / col_last.PNG " />

< > > < Body > Браузер Вы работаете

не поддерживают кадры. тела >

NOFRAMES >

фреймами >

HTML >

Вывод: Приведенный выше пример в основном используется для создания трех вертикальных фреймов: левого, центрального и правого, используя атрибут col тега frameset.

Атрибуты тега Frameset:

  • cols: Атрибут cols используется для создания вертикальных фреймов в веб-браузере. Этот атрибут в основном используется для определения количества столбцов и их размера внутри тега набора фреймов.
    Размер или ширина столбца задается в наборе фреймов следующими способами:
    • Использовать абсолютное значение в пикселях
      Пример:
        
    • Использовать процентное значение
      Пример:
        
    • Использовать подстановочные знаки:
      Пример:
        

      В приведенном выше примере * возьмет оставшийся процент для создания вертикальной рамки.

  • строк: Атрибут строк используется для создания горизонтальных фреймов в веб-браузере. Этот атрибут используется для определения количества строк и их размера внутри тега набора фреймов.
    Размер строк или высоту каждой строки можно использовать следующими способами:
    • Использовать абсолютное значение в пикселях
      Пример:
        
    • Использовать процентное значение
      Пример:
        
    • Использовать подстановочные знаки
      Пример:
        

      В приведенном выше примере * возьмет оставшийся процент для создания горизонтальной рамки.

  • граница: Этот атрибут тега frameset определяет ширину границы каждого кадра в пикселях. Нулевое значение используется для отсутствия границы.
    Пример:
      
  • frameborder: Этот атрибут тега frameset используется для указания, должна ли отображаться трехмерная граница между кадрами или нет, для этого используйте два значения 0 и 1, где 0 означает отсутствие границы, а значение 1 означает, что граница будет.
  • промежутки между кадрами: Этот атрибут тега набора кадров используется для указания величины промежутка между кадрами в наборе кадров. Это может принимать любое целочисленное значение в качестве параметра, который в основном обозначает значение в пикселях.
    Пример:
     
    Это означает, что между кадрами будет расстояние в 20 пикселей.
     

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

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

        Здесь мы используем три кадра с именами как левый центр и правый.

      • src: Этот атрибут в теге фрейма в основном используется для определения исходного файла, который должен быть загружен во фрейм.Значение src может быть любым URL.
        Пример:
         <имя кадра = "left" src = "/html/left.htm" /> 

        В приведенном выше примере имя кадра оставлено, и исходный файл будет загружен из «/html/left.htm " в рамке.

      • marginwidth: Этот атрибут в теге кадра используется для указания ширины пробелов в пикселях между границей и содержимым левого и правого фрейма.
        Пример:
        <рамочная ширина = "20">
         
      • marginheight: Этот атрибут в теге фрейма используется для указания высоты пробелов в пикселях между границей и содержимым верхнего и нижнего фрейма.
        Пример:
        
         
      • полоса прокрутки: Для управления отображением полосы прокрутки в кадре используйте атрибут полосы прокрутки в теге кадра. Это в основном используется для управления внешним видом полосы прокрутки. Значение этого атрибута может быть да, нет, авто. Если значение no означает, что полоса прокрутки отображаться не будет.
        Пример:
        <кадр полосы прокрутки = "нет">
         

      Преимущества:

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

      Недостатки: Из-за некоторых недостатков редко используется в веб-браузере.

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

      Примечание: Этот тег не поддерживается в HTML5.
      Поддерживаемый браузер: Браузер, поддерживаемый тегом , указан ниже:

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

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


Тег кадра HTML - javatpoint

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

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

Примечание. Не используйте HTML-тег
, так как он не поддерживается в HTML5, вместо этого вы можете использовать