Как iframe вставить на сайт: Как установить frame, iframe на сайт – Как вставить iFrame на WordPress-сайт — Вебджем.рф

Содержание

Как вставить iFrame на WordPress-сайт

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

iFrame – элемент HTML для отображения контента с другого сайта на своем собственном. Он выглядит как дополнительное окно, через которое пользователь может взаимодействовать с контентом, размещенном на другом сайте.

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

Например, если транслировать видео с YouTube на своем сайте, то пользователи смогут просматривать его без дополнительной нагрузки на сервер.

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

В использовании iFrame на WordPress-сайте есть и преимущества, и недостатки.

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

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

Существует довольно много подобных плагинов. Мы рассмотрим один из них –Advanced iFrame.

Чтобы установить плагин, просто войдите в панель администрирования WordPress и перейдите в раздел «Плагины» → «Добавить новый» и найдите плагин Advanced iFrame.

После установки и активации плагина перейдите в раздел меню «Advanced iFrame», вкладка «Basic Settings».

Здесь можно установить ширину, высоту, границы и вид прокрутки iFrame.

Чтобы сохранить необходимые настройки и создать шорткод, нажмите кнопку «Generate a shortcode for the current settings».

Скопируйте код и вставьте его на страницу сайта, на которой необходимо разместить iFrame.

Ширина и высота iFrame определены внутри шорткода. При необходимости их можно менять вручную.

Вот пример размещения фрейма с помощью шорткода на одной из страниц сайта.

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

[advanced_iframe use_shortcode_attributes_only="true" src="https://www.wpblog.com/"]

Проведем быстрый тест скорости работы WordPress-сайта до и после использования плагина для встраивания iFrame.

До

После

Разница в производительности огромна. После использования плагина количество запросов увеличилось с 8 до 98, а показатели производительности снизились с 96 до 86.

Синтаксис тега iFrame:

<iFrame src =”your_webpage_url”>

Чтобы установить необходимую ширину и высоту фрейма, добавьте в HTML-код соответствующие атрибуты и значения:

<iFrame src = “https://cloudways.com/ “ width= “100%” height=”300px” frameborder =”1” scrolling = “yes” align = “left”></iFrame>

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

До

После

Встраивание iFrame без помощи плагина демонстрирует практически аналогичные показатели скорости.

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

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

Данная публикация представляет собой перевод статьи «How to Embed WordPress iFrame With Or Without a Plugin» , подготовленной дружной командой проекта Интернет-технологии.ру

Тег | HTML справочник

HTML теги

Значение и применение

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

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

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

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

Поддержка браузерами

Атрибуты

Атрибут	Значение	Описание
align	left right top middle bottom	Не поддерживается в HTML5. Определяет выравнивание элемента в соответствии с окружающими элементами.
frameborder	0 1	Не поддерживается в HTML5. Указывает, следует ли отображать рамку вокруг элемента.
height	pixels	Определяет высоту элемента.
longdesc	URL	Не поддерживается в HTML5. Указывает страницу, содержащую длинное описание содержания элемента.
marginheight	pixels	Не поддерживается в HTML5. Отступ сверху и снизу от содержания до границы фрейма.
marginwidth	pixels	Не поддерживается в HTML5. Указывает отступ слева и справа от содержания до границы фрейма.
name	text	Задаёт имя элемента.
sandbox	allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation	Включает дополнительный набор ограничений для содержания в элементе.
scrolling	auto yes no	Не поддерживается в HTML5. Указывает, отображать или нет полосы прокрутки в элементе.
src	URL	Определяет адрес документа для встраивания в элемент.
srcdoc	HTML_code	Указывает HTML-код, который будет показан во фрейме.
width	pixels	Определяет ширину элемента.

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

В этом примере мы возьмем в качестве загрузки во фрейм отличный сайт — 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»).
Первая ссылка открывает сайт, загруженный изначально, а остальные три загружают различные изображения, находящиеся в той же папке, что и файл с примером.

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

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

Рассмотрим пример добавления видео с YouTube во фрейм:

<!DOCTYPE html>
<html>
	<head>
		<title>Размещение видео с YouTube</title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<iframe  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0?autoplay=1?loop=1&start=28&color=white">
		</iframe>
	</body>
</html>

В этом примере элементом <iframe> мы разместили фрейм на странице и задали для него ширину 320 пикселей (атрибут width) и высоту 240 пикселей (height). В атрибуте src мы указали путь к странице с видео, указали

ID видео (выделен курсивом) и добавили дополнительные параметры плеера YouTube (подробное описание доступно в официальной документации):

autoplay = «1» (видео автоматически запускается).
loop = «1» (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
start = «28» (определяет с какой секунды начнется воспроизведение видео, значение длжно быть положительным целым числом).
color = «white» (бегунок просмотренного отмеряет белым цветом, по умолчанию — красным).

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

Добавление видео с YouTube во фрейм.

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

Отличия HTML 4.01 от HTML 5

В HTML5 добавлено два новых атрибута, большинство используемых в HTML 4.01 атрибутов было удалено.

Значение CSS по умолчанию

iframe [seamless] {
display: block;
}

iframe:focus {
outline: none;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

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

HTML теги

Тег | htmlbook.ru

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

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

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Тег <iframe> является контейнером, содержание которого игнорируется браузерами, не поддерживающими данный тег. Для таких браузеров можно указать альтернативный текст, который увидят пользователи. Он должен располагаться между элементами <iframe> и </iframe>.

Синтаксис

<iframe>...</iframe>

Атрибуты

align: Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
allowtransparency: Устанавливает прозрачный фон фрейма, через который виден фон страницы.
frameborder: Устанавливает, отображать границу вокруг фрейма или нет.
height: Высота фрейма.
hspace: Горизонтальный отступ от фрейма до окружающего контента.
marginheight: Отступ сверху и снизу от содержания до границы фрейма.
marginwidth: Отступ слева и справа от содержания до границы фрейма.
name: Имя фрейма.
sandbox: Позволяет задать ряд ограничений на контент загружаемый во фрейме.
scrolling: Способ отображения полосы прокрутки во фрейме.
seamless: Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
src: Путь к файлу, содержимое которого будет загружаться во фрейм.
srcdoc: Хранит содержимое фрейма непосредственно в атрибуте.
vspace: Вертикальный отступ от фрейма до окружающего контента.
width: Ширина фрейма.

Также для этого тега доступны универсальные атрибуты и события.

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

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег IFRAME</title>
 </head>
 <body>  

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

 </body>
</html>

Как встроить iFrame на WordPres-сайт?

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

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

Чаще всего iFrames используется для вывода чужого контента на сайте. Встраивание контента с помощью iFrame не считается нарушением авторских прав.

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

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

Рассмотрим три наиболее распространенных способа добавления iFrames на WordPress- сайт.

Чтобы самостоятельно добавить iFrame на страницу сайта, используется следующий HTML-тег. Например:

<iframe src="example.com"></iframe>

Но следует учитывать, что с помощью iFrames может отображать контент только с сайтов, использующих ту же версию протокола HTTP. Например, если сайт использует протокол HTTPS, то получится встраивать контент только с площадок на HTTPS.

Кроме этого некоторые сайты (в том числе Facebook и YouTube) отключают возможность ручного встраивания iFrame. Попытка отобразить на своем сайте страницу с такого ресурса приведет к выводу сообщения об ошибке.

Поддержка iFrame отключена.

Вы также можете настроить параметры отображения iFrame:

Width — устанавливает ширину области iFrame (в пикселях).
Height — определяет размер окна iFrame на веб-странице (в пикселях).
Allow – устанавливает определенное поведение или функции по умолчанию для iFrame, такие как полноэкранный просмотр или обработка платежей.
Importance – установка приоритета загрузки iFrame браузером.

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

<iframe src="example.com" allow="fullscreen"></iframe>

Как выглядит iFrame на веб-странице.

Есть и другие параметры, которые также можно использовать. Но перечисленные выше параметры позволяют создавать базовые iFrame для размещения YouTube- видео или другого контента.

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

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

Функция YouTube «Поделиться»

Выберите вариант «Встроить».

Функция встраивания в YouTube

После этого YouTube отобразит HTML-код для добавления видео в iFrame с заданными параметрами. Также можно использовать только исходный URL-адрес.

Код для встраивания YouTube

Чтобы добавить ролик в WordPress-сайта, вставьте скопированный код iFrame c с помощью блока пользовательского HTML:

Встраивание iframe в качестве блока пользовательского HTML

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

Встраивание iframe в классическом редакторе.

В результате вы должны получить работающий iFrame.

iFrame правильно добавлен в WordPress

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

Функция встраивания в Facebook

Затем выберите вариант «Вставить на сайт».

Выберите функцию встраивания Facebook

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

Код iframe Facebook

Добавьте этот код на страницу сайта.

Iframe Facebook встроен в WordPress

Наиболее популярным решением является плагин iFrame:

Плагин iframe для WordPress

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

Также можно попробовать плагин Advanced iFrame:

Плагин WordPress Advanced iFrame

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

В этой статье мы рассмотрели три метода встраивания iFrame в WordPress:

Вручную.
С помощью специального кода для встраивания.
С помощью плагинов WordPress.

Данная публикация представляет собой перевод статьи «How to Embed iFrame Code on Your WordPress Site (Manually and with Plugins)» , подготовленной дружной командой проекта Интернет-технологии.ру

| HTML | WebReference

Элемент <iframe> (от англ. inline frame — встроенный фрейм) создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.

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

Атрибуты

align: Определяет, как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
allowfullscreen: Разрешает для фрейма полноэкранный режим.
allowtransparency: Устанавливает прозрачный фон фрейма, через который виден фон страницы.
frameborder: Устанавливает, отображать границу вокруг фрейма или нет.
height: Высота фрейма.
hspace: Горизонтальный отступ от фрейма до окружающего контента.
marginheight: Отступ сверху и снизу от содержания до границы фрейма.
marginwidth: Отступ слева и справа от содержимого до границы фрейма.
name: Имя фрейма.
sandbox: Позволяет задать ряд ограничений на контент загружаемый во фрейме.
scrolling: Способ отображения полосы прокрутки во фрейме.
seamless: Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
src: Путь к файлу, содержимое которого будет загружаться во фрейм.
srcdoc: Хранит содержимое фрейма непосредственно в атрибуте.
vspace: Вертикальный отступ от фрейма до окружающего контента.
width: Ширина фрейма.

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>IFRAME</title> </head> <body> <iframe src=»page/banner.html» align=»left»> Ваш браузер не поддерживает встроенные фреймы! </iframe> </body> </html>

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

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

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

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

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

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Показываем на своем сайте часть другого сайта во фрейме.
Как загрузить во фрейме часть другого сайта.

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

<style type=»text/css»> #frame{ overflow: hidden; width:735px; height:380px; } </style> <script type=»text/javascript»> function loadFrame(){ document.getElementById(‘frame’).scrollTop = 310; document.getElementById(‘frame’).scrollLeft = 40; } </script> <body onload=»loadFrame()»> <div> <iframe src=»https://pharmacomlabs.com/code/» scrolling=»no»></iframe> </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type=»text/css»>
#frame{
    overflow: hidden;
    width:735px;
    height:380px;
}
</style>
<script type=»text/javascript»>
    function loadFrame(){
        document.getElementById(‘frame’).scrollTop = 310;
        document.getElementById(‘frame’).scrollLeft = 40;
    }
</script>
<body onload=»loadFrame()»>
<div>
<iframe src=»https://pharmacomlabs.com/code/»  width=»1024″ scrolling=»no»></iframe>
</div>

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

06Сен2018

05Сен2018

28Июн2018
Что такое фреймы (iframe) в HTML — примеры как сделать и вставить фрейм
В статье о фреймах в HTML я расскажу о том что это такое, как их правильно использовать и вставлять.
В переводе с английского, фрейм это рамка. И в HTML (что такое HTML?) значение похожее. Фрейм — это совершенно отдельный прямоугольный элемент (область) окна браузера, который содержит и показывает свой HTML-документ. Да, в вместе с другими документами в одном и том же окне браузера. Чудеса!
Фрейм это как отдельная ячейка таблицы, содержание которой подгружается с другой страницы. Фреймы универсальны и независимы друг от друга, каждый из фреймов размещенных на странице может иметь свой адрес и свои подгружаемые стили.
Самое главное, что если вы нажмете на ссылку во фрейме, подгружаться это все дело будет внутри фрейма, не затрагивая остальные элементы вебсайта. Именно поэтому фреймы раньше довольно часто использовались для навигации по сайту. Сейчас используют классический вариант (как вставить правильно ссылку в HTML?)
На сегодняшний день, в 2016 году, использовать фреймы на сайтах не рекомендуется в основном представителями поисковых сервисов. Связано это с тем что ПС приводят пользователя на определенную страницу, определяя ее текстовую релевантность, а вот во фрейме вебмастер может подгружать что угодно, поэтому поисковый робот сталкивается с препятствиями определения релевантности такой страницы.
Но небольшим элементам сайта это не вредит — например когда идет речь о встраивании видео при помощи iframe с видеохостинга Youtube.com.
Правила вставки фреймов
Свойства фрейма определяется тегом <frame> — он поддерживается во всех браузерах (в т.ч. мобильных). Тег <frame> помещается в контейнер <frameset>. И, если фрейм участвует в определении свойств одного фрейма, то фреймсет дополнительно размечает страницу сайта на области. И уже в эти области, вы можете подгрузить фрейм с параметром src=””.
Пример синтаксиса:
<frameset>
<frame src=»ссылка на подгружаемый документ» name=»имя фрейма»>
</frameset>
Надеюсь вы обратили внимание на то, что в этом теге не требуется закрывающий тег типа </frame>, а вот для <frameset> — требуется. Список атрибутов фреймов:
bordercolor — определяет цвет пограничной линии (границы)
frameborder — задает рамку вокруг фрейма или ее отсутствие
name — используется для задания уникального имени (не обязателен, но рекомендован) — это нужно чтобы иметь возможность задавать ссылку к конкретному фрейму
noresize — параметр для определения возможности пользовательского редактирования (мышкой) размера области фрейма
scrolling — задает отображение внутрифреймовой прокрутки в том случае если содержимое фрейма не помещается в его физические размеры, может принимать следующие значения: yes, no, auto
src — последний и самый главный параметр — в нем указывается путь (адрес) к файлу или странце, которую вы хотите подгрузить внутри фрейма
marginwidth — с помощью этого параметра можно задать отступ от содержимого фрейма до его левого края
marginheight — а с помощью этого параметра мы задаем отступ от содержимого фрейма до его верхнего края
Пример использования трех <frame> и двух <frameset>:
<frameset>
<frame src=»header.html» name=»headerFrame» scrolling=»no» noresize>
<frameset>
<frame src=»1.html» name=»Frame1″ scrolling=»no» noresize>
<frame src=»2.html» name=»Frame2″>
</frameset>
</frameset>
Либо такой вариант, показываю для примера использования вместе с разметкой html страницы:
<html>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<head>
<title>Фреймы</title>
</head>
<frameset rows=»10%, 80%, 10%» >
<frame>
<frame>
<frame>
</frameset>
</html>
Результат:
Еще пример:
<html>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<head>
<title>Фреймы</title>
</head>
<frameset rows=»100, *» >
<frame>
<frameset cols=»200, *» >
<frame>
<frame>
</frameset>
</frameset>
</html>
Результат:
Последний пример фрейма в HTML:
<html>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<head>
<title>Фреймы</title>
</head>
<frameset cols=»20%, *» >
<frame>
<frameset rows=»30%, *» >
<frame>
<frame>
</frameset>
</frameset>
</html>
Результат:
Как вы видите, frameset в данном случае указывает браузеру, как разбить окно браузера на две-три области — в данном случае тег используется вместо тегов
. Подобное построение шаблона сайта называется фреймовой структурой.
Фреймсет тоже имеет параметры:
rows — определяет количество горизонтальных областей, на которые будет разбито окно: для задания четырех горизонтальных областей с шириной 25% нужно задать параметр rows=”25%, 25%, 25%, 25%”
cols — аналогично горизонтальным областям, только теперь определение вертикальных областей
А для того чтобы фреймсет не имел рамок, используйте следующие атрибуты: border=”0″ frameborder=”0″.
Frame — плюсы и минусы фреймов
Теперь, после того как я рассказал вам теорию и показал на практике HTML код с использованием фреймов, настало время упомянуть о преимуществах и недостатках сайтов, использующих фреймы в своей структуре.
К сожалению, безусловное преимущество только одно — на персональный компьютер интернет-пользователя загружается меньшее количество байтов информации. Так происходит от того, что шапка с меню загружаются один-единственный раз (благодаря чему сокращается время загрузки). Основной контент загружается как и на остальных сайтах — много раз.
К еще большему сожалению, недостатки тоже есть и, увы, их целых три:
1. Структура фреймов может запутать даже бывалого вебмастера.
2. Из-за того что меню располагается в отдельном файле, пользователь который находит отдельную страницу в поисковой системе переходит на нее и не имеет навигации, ведь если мы вставим еще одну навигацию на эту страницу, на основной она будет дублироваться.
3. Несмотря на то, что все браузеры поддерживают фреймы, не все из них поддерживают фреймовую структуру. Поэтому необходимо делать двойную работу, размещая внутри тегов
теги — который будут отображаться, если браузер не поддерживает фреймовую структуру. То есть в любом случае мы делаем сайт без фреймов (для тех браузеров, которые их не поддерживаю) — зачем нам тогда фреймовая структура?
Это значит, что не имеет смысла создавать фреймовую структуру у сайта, если для этого нет каких-то конкретных причин. Я кратко расскажу о том, что это могут быть за причины.
Так где все-таки возможно применять фреймы?
Чаще всего это справочно-административные системы:
1. Для оформления оглавления. Размещение вертикального столбца очень удобно для пользователя, чтобы он в любой момент мог к нему обратиться, не обращаясь к кнопке «Назад». Так, оглавление справочной систему будет всегда под рукой сотрудника или пользователя.
2. Для оформления неподвижных элементов административной системы — графических элементов, таблиц, важных ссылок. Чтобы они были всегда доступны, а остальная часть прокручивалась бы в другом фрейме.
3. Для оформления форм и результатов запросов. Очень удобно в одном фрейме вводить данные, а в соседнем — получать ответ на запрос или видеть введенные данные в какой-то важной таблице.
Читайте также:
Подробные рекомендациии о том, как правильно оформить сайт в интернете.
На этом все, но помните, что в HTML5 не допускается использование <frame>, <noframes> и <frameset> — потому что технология устаревшая и не поддерживается. Взамен этого разработчики спецификации HTML5 предлагают нам использовать тег <iframe> для отображения плавающего или встроенного в сайт фрейма.