Содержание

Учебник 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 в архиве), которая содержит фрейм и четыре ссылки:

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

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

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


Фрейм (HTML) — это… Что такое Фрейм (HTML)?

У этого термина существуют и другие значения, см. Фрейм.

Фрейм (от англ. frame — рамка) — отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне браузера.

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

Фреймы часто использовались для навигации по веб-сайту. При этом навигационная страница располагается в одном окне, а страницы с текстом — в другом.

В настоящее время использование фреймов для публичных сайтов не рекомендовано. Главным образом это связано с принципом работы поисковых машин, которые приводят пользователя к HTML-документу, являющемуся согласно задумке лишь одним из фреймов того, что автору сайта хотелось бы представить. Данный недостаток фреймов устраняется средствами JavaScript.[1]

Описание

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

<FRAMESET>, который к тому же задает способ разметки страницы на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью параметра src=. Хотя обязательных атрибутов у тега <FRAME> и нет, рекомендуется задавать каждому фрейму имя через атрибут name=. Это особенно важно, если требуется по ссылке из одного фрейма загружать документ в другой.

Синтаксис: <frameset> <frame> </frameset>

Параметры:

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

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

<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 :: Фреймы

Иногда возникает необходимость вставить в html-документ не только изображения или мультимедийные объекты, но и другие независимые html-документы. Для этой цели предусмотрен специальный элемент, называемый фреймом, который формируется парным тегом <iframe> (от англ. inline frameвстроенный фрейм). Данный элемент создает в документе прямоугольную область, в которую, по умолчанию, и загружается внешний документ, полный или относительный путь к которому указывается в качестве значения атрибута src (см. пример №1).

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

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

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

<!DOCTYPE html>
<html>
<head>
	<!--  Незабываем задавать служебные элементы  -->
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Фреймы</title>
</head>
<body>
		
<!--  Код фрейма берем на Ютубе  -->
<iframe src="https://www.youtube.com/embed/txeKbmw7nro" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
gyroscope; picture-in-picture" allowfullscreen>
Ваш браузер не поддерживает встроенные фреймы! </iframe>
	
</body>
</html>

Пример №1. Использование элемента «iframe»

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

  • «allow-forms» – разрешает использование форм во фрейме;
  • «allow-pointer-lock» – разрешает включение API-интерфейсов (интерфейс прикладного программирования) во фрейме;
  • «allow-popups» – разрешает всплывающие окна во фрейме;
  • «allow-same-origin» – считается, что загружаемый во фрейм документ принадлежит тому же источнику, что и основной документ;
  • «allow-scripts» – разрешает работу скриптов во фрейме;
  • «allow-top-navigation» – разрешает содержимому фрейма получать доступ к элементам основного окна.

Разрешается через пробел указывать сразу несколько значений атрибута sandbox. Если атрибут указан без значения, то действуют все ограничения сразу.

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

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

Frame (или «фрейм») — это рамка, контейнер, область, в которую загружается сторонняя HTML-страница. Использование фраймов в HTML выглядит следующим образом:

<!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>Использование фреймов - "Нубекс"</title>
 </head>
 <frameset cols="200, *">
  <frame src="nubexMenu.html" name="nubexMenu">
  <frame src="nubexContent.html" name="nubexContent">
 </frameset>
</html>

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

Фреймы применяются, например:

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

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

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

Зачем нужны фреймы в html. Как загрузить фрейм без дополнительных файлов? Пример: Управление границей фреймов

Всем доброго времени суток! С Вами Бернацкий Андрей.

Прежде, чем перейти непосредственно к статье, я Вам хочу дать ссылку на видео-версию данной темы:

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

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

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

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

XHTML

… ….

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

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

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

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

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

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

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

XHTML

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

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

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

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

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

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

XHTML

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

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

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

И в последней строке закрывается контейнер

.

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

XHTML

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

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

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

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

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

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

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

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

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

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

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

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

XHTML

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

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

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

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

XHTML

Соответственно, вместо тега , мы должны вставить еще один контейнер ..

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

XHTML

«../урок3/Untitled-1.html» />

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

XHTML

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

XHTML

«../урок3/Untitled-1.html» />

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

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

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

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

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

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

XHTML

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

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

(Вы найдете больше примеров внизу этой страницы).

HTML Фреймы

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

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

  • Фреймы могут перестать поддерживаться в будущих версиях HTML
  • Фреймы сложно использовать. (Печать старницы целиком затруднительна).
  • Веб разработчик должен следить за большим количеством HTML документов.

HTML Элемент frameset

Элемент frameset содержит один или более элементов frame. Каждый элемент frame может содержать отдельный документ.

Элемент frameset указывает СКОЛЬКО столбцов или строк будет в наборе фреймов, и СКОЛЬКО процентов/пикселей пространства будет занимать каждый фрейм.

HTML Элемент frame

Тег определяет одно отдельное окно (фрейм) внутри набора фреймов (frameset).

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

Первый столбец занимает 25% ширины окна браузера. Второй столбец занимает 75% ширины окна браузера. Документ «frame_a.htm» помещен в первый столбце, и документ «frame_b.htm» помещен во второй столбец:

Замечание: Размер столбца в наборе фреймов может также быть указан в пикселях (cols=»200,500″), и один из столбцов может использовать оставшееся пространство, для чего надо указать вместо ширины звездочку (cols=»25%,*»).

Совет: Если фрейм имеет видимые границы, пользователь может изменить его размер перетаскиванием границы. Чтобы запретить изменение размера фрейма таким способом, вы можете добавить noresize=»noresize» в тег .

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

Важно: Вы не можете использовать теги

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

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

Вложенные наборы фреймов
Как создать вложенные наборы фреймов.

Набор фреймов с атрибутом noresize=»noresize»
Как использовать атрибут noresize. Переместите мышь на границу между фреймами и убедитесь, что не можете ее перетащить.

Фрейм навигации
Как сделать фрейм навигации. Этот фрейм содержит список ссылок со вторым фреймом в качестве назначения, где будут открываться эти ссылки. Файл «tryhtml_contents.htm» содержит три ссылки. Исходный код ссылок:
Frame a

Frame b

Frame c
Второй фрейм показывает залинкованный документ.

Переход к определенному разделу внутри фрейма
Два фрейма. Один из фреймов имеет ссылку на определенный раздел в файле. Этот раздел помечается как в файле «link.htm».

07.12.2015

Пока нет

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

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

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

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

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

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

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

Как работать с фреймами в html

HTML фреймы

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

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

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

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

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

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

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

  • Элементом <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> alt=»html5″ />и <article> alt=»html5″ />мы поговорим в статье «Теги разметки страницы в HTML».

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

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

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

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

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:
  • Используя полученные знания составьте HTML страницу (practice_19.html в архиве), которая содержит фрейм и четыре ссылки:
  1. Первая ссылка загружает сайт «Википедии», или любой другой.
  2. Вторая ссылка загружает во фрейм изображение из папки (practice_19_1.jpg).
  3. Третяя ссылка загружает во фрейм изображение из папки (practice_19_2.jpg).
  4. Четвертая ссылка загружает во фрейм изображение из папки (practice_19_3.jpg).

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

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

Урок 4. HTML фреймы и гиперссылки

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

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

HTML5 окончательно удалил инструмент фреймов, но, при этом элемент <iframe>, который позволяет вставлять одну страницу в другую, остался в новом стандарте. Это ему удалось по той причине, что он используется на веб-страницах для выполнения ряда интеграционных задач, таких как вставка в страницы окон YouTube, рекламных блоков и поисковых полей Google.

Можно предположить, что тег <iframe> вряд ли исчезнет из языка HTML, как уже было сказано, он используется для вставки окон YouTube, а на сегодня YouTube является одним из способов заработка и бизнеса, который требует также привлечения пользователей для просмотра видеороликов. Для привлечения пользователей и увеличения просмотров видеороликов развиты специальные сервисы, благодаря которым можно получить 1000 просмотров YouTube и создать значительный трафик на свой видеоканал.

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

При использовании простого дизайна с двумя HTML фреймами (рис.1) задействовано три документа:

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

Рис. 1. Простая фреймовая структура из двух фреймов

Фреймы содержатся в структуре <frameset> и </frameset> , замещающей в странице с фреймами структуру <body> и </body>, т.е. документ, описывающий фреймовую структур не имеет тегов <body> и </body>.

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

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

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

cols=n – определяет столбец шириной в n пикселей.

cols=n% – выделяет данному столбцу фрейма n%-долю ширины окна броузера.

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

rows=n – определяет строку высотой в n пикселей.

rows=n% – выделяет данной строке фрейма n%-долю высоты окна броузера.

frameborder

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

frameborder=yes – отображается трехмерная рамка (значение по умолчанию).

frameborder=no – рамка невидима

Лучше определять строки и столбцы не в пикселах, а используя относительные значения. Символ звездочка (*) используется для указания того, что экран делится на пропорциональные части: COLS=»*,*,*» – соответствует COLS=»33%,33%,33%».

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

Рассмотрим пример кода простой фреймовой структуры, изображенной на рис. 1.

Практическое задание 1

  1. Создайте папку frames. Скопируйте в нее файлы с изображениями фонов fon3.jpg,fon8.jpg,fon10.jpg из папки html_css_4
  2. Откройте файл shablon.html
  3. Измените код как в листинге на рисунке 2. Сохраните документ под именем frames_2.html
  4. Создайте файл, как на рисунке 3. Сохраните документ под именем doc1.html
  5. Создайте файл, как на рисунке 4. Сохраните документ под именем doc2.html
  6. Запустите файл frames_2.html двойным щелчком. В окне браузера Internet Explorer web-страница должна иметь вид, как на рис. 1

Рисунок 2. Фреймовая структура из двух столбцов

Рисунок 3. Документ doc1.html

Рисунок 4. Документ doc2.html

На рис. 1 представлен вид этой HTML-страницы в браузере. Экран по вертикали разбивается на 2 фрейма. Левый HTML фрейм занимает 25% экрана и содержит страницу с названием doc1.html. Правый HTML фрейм займет 75% экрана и содержит страницу doc2.html.

Тег <FRAME>

Тег <frame> определяет отдельный фрейм. Это непарный тег. Тегов <frame> должно быть ровно столько, на сколько областей делится экран. У тега <frame> имеются следующие атрибуты:

Этот атрибут указывает URL-адрес содержимого фрейма.

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

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

scrolling=yes (установка полосы прокрутки)

scrolling=no (отсутствие полосы прокрутки)

scrolling=auto (значение по умолчанию)

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

Практическое задание 2

  1. Откройте файл shablon.html.
  2. Измените текст, как в листинге на рисунке 5.
  3. Сохраните документ в папке frames под именем frames_3.html
  4. В новом документе наберите текст, изображенный в листинге 6. Сохраните документ под именем doc3.html
  5. Запустите файл frames_3.html двойным щелчком. В окне браузера Internet Explorer Web-страница должна иметь вид, как на рис. 7.

Обращаем Ваше внимание на то, что во фреймовой структуре количество открывающих <frameset> должно быть равно количеству закрывающих </frameset>

Рисунок 5. Фреймовая структура из трех фреймов

Рисунок 6. Документ doc3.html

Рисунок 7. Фреймовая структура из трех фреймов

Контрольное задание

  • Создайте файл с фреймовой структурой нашего сайта MyHouse.ru, состоящей из трех HTML фреймов (рис. 8). Сохраните его в папке public_html под именем index.html
  • Правому фрейму присвойте имя main.
  • В верхнем фрейме расположите бегущую строку (файл shapka.html)
  • В левом фрейме расположите список проектов (файл menu.html).
  • В правом фрейме – файл main.html.

Рисунок 8. Фреймовая структура сайта MyHouse.ru

2. Организация гиперссылок

Для организации гиперссылок используется тег <а>, у которого есть обязательные атрибуты, иначе гиперссылка работать не будет.

Рассмотрим пока только обязательный атрибут href.

Структура гиперссылки

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

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

Гиперссылки можно встроить в любое место HTML – документа.

На рис. 9 приведен пример HTML-кода создания гиперссылки и вид в браузере страницы с этим кодом:

Подробную информацию об услугах нашего агентства Вы можете получить

<a href=»inform.htm»>здесь</a>

Рис. 9. Пример создания текстовой гиперссылки

В этом примере слово “здесь” является элементом привязки (или якорем – anchor), а часть href=”inform.htm” представляет ссылку на URL и означает, что при щелчке на элементе привязки должен быть загружен файл “inform.htm”, находящийся в том же адресе сети.

Элементы привязки (якорь – anchor)

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

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

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

Рассмотрим пример организации графической гиперссылки (рис. 10):

У нас в агентстве приветливые и компетентные диспетчеры

Рис. 10. Пример создания графической гиперссылки

В этом примере рисунок «ris.jpg» является графическим элементом привязки. Браузер выделяет его синей рамкой.

Виды адресов

Абсолютный адрес – это полный адрес в Internet.

  • <а href=»http://www.rambler.ru»> – удаленный переход;
  • <а href=»c:\temp\myfile.html»> – использование в ссылке абсолютного адреса на своем сервере ( не используется ).

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

  • <а href=»../folder/my.htm»> – переход на другой документ на своем сайте

Гиперссылки можно разделить на 3 категории:

1. Внешняя – ссылка на web-страницу, которая находится по другому адресу Internet (за пределами сайта). Для ее организации используется абсолютный адрес.

Пример: <а href=»http://www.rambler.ru»>

2. Внутренняя – ссылка на другую web-страницу внутри сайта. Для ее организации необходимо использовать относительный адрес.

Пример: <a href=»../../folder_1/folder_2/mysite.htm»>Текст гиперссылки</a>

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

Практическое задание 3

  1. Откройте раздел «Организация гиперссылок» в файле справочника Sprav_html.doc. Ознакомьтесь с атрибутами тега <a>. Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.
  2. В файле menu.html для пункта «Проекты таунхаусов и блокированных домов», сделайте гиперссылку, целевым адресом которой является web-страница townhouse.html таким образом, чтобы web-страница townhouse.html грузилась в правый фрейм. Напомним, для того, чтобы ссылка грузила документ в нужный фрейм в теге <a> необходимо указать атрибут target, который содержит имя фрейма, куда должен быть загружен документ. Например, <a href=»townhouse.html» target=»main»>. Результат на рис. 11.

Практическое задание 4

1. В папке public_html создайте папку project, а внутри нее папку img_d_152_1d.

2. Оформите web-страницу о проекте d-152-1d, используя материалы (тексты и фотографии) из папки projects/d-152-1d. Для оформления web-страницы должны быть использованы стили в таблице стилей и форматирование средствами атрибутов тегов.

3. Все материалы должны быть использованы. В результате на web-странице у Вас должны быть следующие блоки: Заголовок, Аннотация, Материалы, Цена за проект, Планы, Фасады

4. Сохраните web-страницу под именем projekt_d-152-1d.html в папке projects. Примерный результат на рис. 12.

Рис. 12. Web-страница projekt_d-152-1d.html.

5. На web-странице townhouse.html оформите изображение проекта D-152-1D и фразу «Проект D-152-1D» как гиперссылки на страницу projekt_d-152-1d.html, на которой содержится более полная информация об этом проекте (рис. 13).

6. Проверьте работоспособность гиперссылок.

Рис. 13. Изображение является гиперссылкой

Внутристраничные гиперссылки

Внутристраничная гиперссылка создается в два этапа.

Например, необходимо создать ссылку из оглавления на первую главу

1. В оглавлении рядом с названием главы 1 следует создать запись:

<a href=«#glava1«>Перейти к главе 1</a>

2. Внутри web-страницы рядом с заголовком главы 1 создать метку и с помощью атрибута name тега <a> присвоить ей имя. Браузер не выделяет содержимое этого тега как ссылку, так как оно используется в качестве метки. В пределах документа метка должна быть уникальной.

<a name=«glava1«>Глава 1</a>

Прокомментируем запись <a href=»#glava1″>Перейти к главе 1</a>.

Атрибуту href тега <a> назначают имя метки и перед именем ставят знак # . Знак # показывает, что ссылка – внутренняя.

Если необходимо организовать гиперссылку на конкретный фрагмент другого HTML-документа (например, на главу 1 в документе «my.htm»), то этот фрагмент предварительно также помечается. Гиперссылка на него организуется следующим образом <a href=»my.htm#glava1″>. Здесь к имени метки добавляется имя файла.

Практическое задание 5

1. Откройте созданную Вами web-страницу projekt_d-152-1d.html.

2. Под заголовком «Проект дома № D-152-1D» добавьте пункты

  • Аннотация
  • Материалы
  • Цена за проект
  • Планы
  • Фасады

3. Создайте внутристраничные гиперссылки из каждого только что созданного пункта на соответствующий раздел web-страницы (рис. 14, а)

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

Рис. 14. Внутристраничные гиперссылки

Задание цвета гиперссылок

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

Если используемые по умолчанию значения этих атрибутов явно не согласуются с дизайном Вашей страницы, то значения можно поменять. Для этого у тега <BODY> есть соответствующие атрибуты.

Цвет гиперссылки (по умолчанию светло-голубой)

Цвет использованной гиперссылки (по умолчанию темно-фиолетовый)

Цвет активизированной гиперссылки (в момент щелчка)

Практическое задание 6

  1. Вверху левого фрейма сделайте логотип графической гиперссылкой таким образом, чтобы при ее активизации в правый фрейм загружалась страница о сайте (файл main.html).
  2. Убедитесь в работоспособности всех гиперссылок. Ваш сайт должен выглядеть примерно так, как показано на рис. 15, при переходе по ссылке «Проекты таунхаусов и блокированных домов» так, как на рис. 16, при щелчке на изображении проекта D-152-1D как на рис. 17.

Рис. 15. Главная страница сайта MyHouse.ru

Рис. 16. Вид web-сайта при активной ссылке «Проекты таунхаусов и блокированных домов»

Рис. 17. Вид web-сайта при активной ссылке «Проект D-152-1D»

Работа со специальными элементами

Работа со специальными элементами определяется с помощью псевдоклассов.

Псевдокласс – специальный селектор, определяющий, как выглядит HTML-элемент в определенный момент.

Например, CSS определяет псевдокласс, который устанавливает, как выглядят гиперссылки в определенные моменты времени:

a:link – не посещенные ссылки;

a:visited – посещенные ссылки;

a:active – активные ссылки;

a:hover – ссылка при наведении на нее фокуса.

Можно определить псевдокласс для первого символа элемента. Например, для абзаца:

p:first-letter . Это удобно для задания спецэффектов выделения заглавных букв.

Практическое задание 7

1. Для верхнего меню страницы проекта включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 18.

2. Проверьте работоспособность стиля.

а – не посещенные ссылки

б – ссылка при наведении на нее курсора

Рис. 18. Вид гиперссылки в определенный момент времени

Практическое задание 8

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

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

а – не посещенная и посещенная ссылка

б – ссылка при наведении на нее курсора

Рис. 19. Вид гиперссылки «Проекты таунхаусов и блокированных домов»

3. Для пункта с названием проекта на странице proekt_townhouse.html включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 20.

4. Проверьте работоспособность стиля.

а – не посещенная ссылка

б – ссылка при наведении на нее курсора

Рис. 20. Вид гиперссылки для названия проектов

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

Как работать с фреймами в html

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

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

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

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

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

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

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

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

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

тег frameset

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

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

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

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

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

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

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

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

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

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

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

тег frame

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

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

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

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

  • src – адрес веб страницы. src=»http://stepkinblog.ru/html/kak-sozdat-frejmy-v-html-osnovy-html-dlya-nachinayushhix-urok-16.html/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» там, где вы хотите, чтобы открывались в нем другие html-документы

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

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

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

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

ПРАКТИКА

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Понятие фрейма в HTML | Сам Себе Вебмастер

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

 

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

Создание структуры фреймов элемент FRAMESET

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

<HТМL>
 <HEAD>
 <TITLE>Простой документ с фреймами</ТIТLЕ>
 </HEAD>
 <FRAМESET >
 ...описание структуры фреймов ...
 <NOFRAМES>
 Альтернативное содержание для браузеров, не поддерживающих фреймы
 </NOFRAМES>
 </FRAМESET>
</HТМL>

Обратите внимание, что раздел BODY в документе отсутствует полностью, а элемент NOFRAMES содержится внутри раздела FRAMESET.
Сама структура фреймов формируется делением окна браузера на части — строки и колонки; В какой-то степени это похоже не создание таблиц. Для этого у элемента FRAMESET существуют атрибуты cols и rows, задающие деление на колонки и строки соответственно.
Единицы измерения, в которых можно задавать размеры фреймов, это, как обычно, пиксели и проценты. Есть еще возможность задавать размер в новой пока для нас единице измерения, которую условно можно назвать «часть» окна. Значения атрибутов cols и rows задаются перечислением размеров соответствующих областей через запятую. Можно комбинировать разные способы задания. Рассмотрим несколько примеров, исходя из предположения, что размер окна браузера 800х600 пикселей.

<FRAМESET rows= "50%, 50%">
 . . . продолжение определения структуры фреймов. . .
</FRAМESET>

Такой код поделит окно по горизонтали на два одинаковых по высоте фрейма (строки). Если задать атрибут cols=» 50%, 50%», то получим две одинаковые по ширине колонки.

<FRAМESET cols= "120, 400. *">
 . . . продолжение определения структуры фреймов. . .
</FRAМESET>

При таком коде получим три колонки фреймов: левая шириной 120 пикселей, средняя шириной 400 пикселей, а на третью колонку отводится все, что останется от первых двух колонок, в атрибуте это значение обозначается символом звездочки «*».

<FRAМESET cols= "1*, 4*">
 . . . продолжение определения структуры фреймов. . .
</FRAМESET>

Такой код создаст две колонки фреймов. Ширина первой принимается за единицу (это обозначается как 1 * или просто *), ширина второй в четыре раза больше. Таким образом, ширина первой будет 20%, а ширина второй 80% от общей ширины окна браузера.

<FRAМESET cols= "100, 40%, *">
 . . . продолжение определения структуры фреймов...
</FRAМESET>

В приведенном мере комбинируются все три способа задания размеров. Ширина первой колонки будет равна 100 пикселей, для второй отводится 40% оставшейся ширины (800 — 100 = 700), и на третью остается все, что не занято первой и второй колонками.
Раздел FRAMESET может содержать вложенные разделы FRAMESET, что позволяет создать довольно сложную структуру фреймов. Допустим, нам надо разделить окно на 4 фрейма следующим образом:

Сначала необходимо организовать 2 колонки таким образом:

cols= "100, * "

Затем вторую колонку поделить на три строки таким образом:

rows=" 80, *, 30"

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

<FRAМESET cols= "100, * ">
    <FRAМE name= "framel" src= "framel.html">
  <FRAМESET rows= "80, *, 30">
    <FRAМE name= "frame2" src= "frame2.html">
    <FRAМE name= "frame3" src= "frame3.html">
    <FRAМE name= "frame4" src= "frame4.html">
  </FRAМESET>
</FRAМESET>

Каким образом разбивается окно на фреймы, вроде бы разобрались. При создании фреймов можно сделать так, чтобы границы между фреймами видно не было. Как вы, наверное, уже догадались, делается это при помощи атрибута border его значение должно равняться нулю. Но дело в том, что для фреймов этот атрибут не воспринимается браузером Internet Explorer, зато поддерживается браузером Netscape Navigator. Для Internet Explorer граница между фреймами задается атрибутом frameborder, который не поддерживается браузером Netscape Navigator. Получается, что необходимо задавать одинаковые значения для обоих атрибутов, чтобы оба браузера восприняли HTML код одинаково и толщина границ между фреймами была одинаковой.
Толщину границ или, по-другому, расстояние между фреймами также можно регулировать атрибутом framespacing, значение которого задается в пикселях. Все атрибуты элемента FRAMESET приведены в таблице.

Атрибуты элемента <FRAMESEТ>

 

Атрибут

Описание

Пример

rows Определяет количество и размеры горизонтальных фреймов (фреймов строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров:

а) в процентах от высоты рабочей области окна браузера например: "30%, 30%, 40%";

б) в виде знака «*» (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами например, звездочка в записи "25%, 25%, *" равносильна 50%;

в) в пикселях например: "75, *".

Все три способа можно совмещать.

rows= "25%, 25%, *"
cols Определяет количество и размеры вертикальных фреймов (фреймов столбцов) в окне браузера. В качестве значения
задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем параметре ROWS.
cols= "265, *"
border Определяет ширину рамок фреймов в пикселях. Данный параметр действует только в браузерах Netscape. Border= "0"
frameborder Данный параметр действует только в браузерах lnternet Explorer и определяет наличие рамок у содержащихся внутри элемента FRAMESET фреймов. Возможные значения: Yes отображать рамки; No или 0 не отображать рамки. Frameborder= "0"
framespacing Определяет расстояние (так называемую «серую область») между фреймами в пикселях. Данный параметр также необходим для создания фреймов без рамок. framespacing= "0"

Теперь вернемся к элементу FRAME, который описывает отдельный фрейм внутри всей структуры. Обязательный параметр для него — атрибут src, который задает URL HTML — документа или изображения для отображения в этом фрейме. Также лучше задать фрейму имя при помощи атрибута name. Это позволит использовать данное имя в качестве значения атрибута target элемента А и управлять тем, в какой фрейм должна загружаться ссылка. Имена фреймов не могут начинаться с цифр, в качестве начальных символов допустимы только буквы латинскою алфавита (az, AZ).

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

Должна ли отображаться рамка вокруг отдельною фрейма, определяется его атрибутом frameborder. Значение yes (или 1) говорит о том, что рамка должна быть, значение no (или 0) указывает, что рамки быть не должно.
Пользователь может изменять размер фреймов, созданный HTML документом. Для этого достаточно подвести курсор мыши к границе фреймов (неважно, видны эти границы или нет) и стандартным для операционной системы способом изменить размер окна.
В Windows курсор мыши примет вид двунаправленной черной стрелки. Нажав левую кнопку мыши, можно передвинуть границу окна. Аналогично можно изменить и размер фрейма, поскольку фрейм это тоже окно. Если вы рассчитали размеры своих фреймов и не хотите, чтобы пользователь менял их, задайте атрибут noresize. В результате изменение размеров будет запрещено.
Как мы уже говорили ранее, полосы прокрутки у фрейма появляются в том случае, если его содержимое в заданных его границах полностью не помещается. Наличие полос прокрутки регулируется атрибутом scrolling. Допустимы три значения yes, no и auto.
Значение auto соответствует автоматическому появлению полос прокрутки в тех случаях, когда это действительно необходимо. Если содержимое видно и так, полос прокрутки нет, если часть содержимого не помещается появляется нужная полоса прокрутки.
Значение yes включает обе полосы прокрутки независимо от того, нужны они или нет. Иногда это может выглядеть не очень красиво.
Значение no запрещает показывать полосы прокрутки совсем. Будьте осторожны с этим значением, поскольку при его указании можете лишить пользователя возможности увидеть все содержимое фрейма, Когда оно не помещается в нем полностью. Все атрибуты элемента FRAME приведены в таблице.

Атрибуты элемента <FRAME>

Атрибут

Описание

Пример

src Обязательный параметр. Указывает адрес (URL) HTL
файла, отображаемого в данном фрейме
src= "frame2 .html"
name Определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута target (см. элемент А). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр
(начальными символами могут быть только буквы латинского алфавита: a-z, A-Z). Имя не должно начинаться с цифр и специальных символов. Зарезервированные имена фреймов начинаются со знака подчеркивания.
name= "menu1"
marginwidth Определяет ширину (в пикселях) левого и правого полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа. marginwidth= "0"
marginheight Определяет ширину (в пикселях) верхнего и нижнего полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа. marginheight= "0"
scrolling Определяет наличие полос прокрутки содержимого фрейма. Возможные значения:
yes — отображать полосы прокрутки;
no — не отображать полосы прокрутки;
auto — отображать полосы прокрутки при необходимости (если документ, указанный в параметре SRC, не умещается во фрейме)
scrolling= "auto"
noresize Не позволяет изменять размеры фрейма. Данный параметр является флагом и не требует указания значения. noresize
frameborder Определяет наличие рамок у фрейма. Возможные значения:
yes или 1 — отображать рамки;
no или 0 — не отображать рамки.
frameborder= "0"
[Всего голосов: 0    Средний: 0/5]
Читайте также:

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

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

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

Вот простой фрейм-документ:



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


  
      
      
  
  
  <БЕЗ КАДРОВ>
      

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

  • Небольшое содержание
  • Хорошее изображение
  • Другое полезное содержимое
  • , который может создать макет кадра примерно так:

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

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

    16.2 Компоновка рам

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

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

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

    16.2.1 Элемент

    FRAMESET

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

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

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

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

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

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

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

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

    Первый пример делит экран по вертикали на две части (т. е. создает верхний половина и нижняя половина).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
    
    <ГОЛОВА>
    Это набор фреймов с OBJECT в HEAD
    
    <ОБЪЕКТ data="data.bar">
    
    <НАБОР КАДРОВ>
        
    
    
    
    
    
    <ГОЛОВА>
    Страница Бьянки
    
    <ТЕЛО>
      ...начало документа... 
    <Р>