Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16
Как создать фреймы в HTML. Основы HTML для начинающих. Урок №16
Всем привет!
Продолжаем усердное изучение основ HTML. Я рад, что вы не бросаете уроки основ HTML.
В этом уроке мы разберем, что такое фреймы и как они создаются в HTML.
Итак, давайте определимся, что такое фреймы в HTML.
Фреймы – это разделение окна браузера на отдельные области, в которых могут загружаться отдельные HTML документы.
Я думаю, вы поняли, что благодаря фреймам, вы можете просмотреть сразу несколько веб страниц в одном окне браузера.
Для примера, чтобы понять, как работает фрейм на практике, предлагаю посмотреть пример. Сделайте там пару переходов:
[пример]
Ну, как вам? Хотите научиться такое создавать? Сейчас мы научимся вставлять фреймы в html-документ.
Создание фрейма на веб странице осуществляется по такому макету:
<frameset> <frame> <frame> </frameset>
Внимание: макет фрейм-кода вставляется в html-документ вместо тега <bode></body>:
<html> <head> <title>Фреймы</title> </head> <frameset> <frame> <frame> </frameset> </html>
○ тег frameset
Это главный контейнер для создания фрейма, внутри которого содержатся другие элементы.
Закрывающий тег обязательный.
<frameset></frameset>
*Атрибуты тега frameset:
- Cols — вертикальные
- Rows — горизонтальные
rows — горизонтально
cols — вертикально
В атрибутах cols и rows указывается, на сколько частей делить окно браузера. Вот, например, чтобы разделить окно браузера на две вертикальные части, нужно прописать вот так:
<frameset cols="30%,*">
Левая часть экрана будет размером 30%, а правая – 70%.
Если хотите разделить браузер еще на несколько частей, допишите через запятую дополнительные размеры, вот, например, так:
<frameset cols="30%,20%,10%,40%">
В итоге первая вертикальная колонка будет шириной 30%, вторая — 20%, третья — 10%, четвертая — 40%.
Разобрались?
Так же и с горизонтальной разбивкой:
<frameset rows="30%,20%,10%,40%">
Первая горизонтальная колонка будет шириной 30%, вторая — 20%, третья — 10%, четвертая — 40%.
○ тег frame
Тег frame указывает, какой html-документ должен быть загружен в окно браузера.
Вот, например, нам нужно загрузить в одном окне браузера три разных страницы «1.html», «2.html», «3.html». Тег frame будет выглядеть вот так:
<frame src="1.html"> <frame src="2.html"> <frame src="3.html">
Подытожим знания по фреймам. Итак, задача: нужно разделить окно браузера на две части и загрузить в эти части две веб страницы – «1.html» на 30%, «2.html» на 70%.
Вот готовый код:
<frameset cols="30%,*"> <frame src="1.html"> <frame src="2.html"> </frameset>
Результат будет таким:
* Атрибуты тега frame
- src – адрес веб страницы. src=»1.html»;
- marginwidth – отступ внутри фрейма по ширине. Пример: marginwidth=»10″;
- marginhight – отступ внутри фрейма по высоте. Пример: marginhight =»10″;
- scrolling – прокрутка фрейма через скролл.
— yes – скролл будет присутствовать во фрейме. Пример: scrolling =»yes»;
— no – скролл не будет присутствовать во фрейме. Пример: scrolling =»no»;
— auto – скролл будет присутствовать во фрейме при необходимости. Пример: scrolling =»auto»; - noresize – запрещает двигать границы фрейма.
- name – имя фрейма. Указывает, в каком окне нужно открывать другие фреймы. Пример: name =»stepkinblog-ru»;
○ Ссылки во фреймах или учимся пользоваться атрибутом «name»
Если фрейму не прописать имя в атрибуте «name», то при нажатии по ссылке откроется новый фрейм в том окне, где была ссылка:
[яркий пример, где нет атрибута «name»]
А вот пример, если прописать атрибут «name»:
[яркий пример с атрибутом «name»]
Правда, так лучше?
Для любого фрейма пропишите атрибут «name» там, где вы хотите, чтобы открывались в нем другие html-документы
<frame src="2.html "name ="stepkinblog-ru">
Имя в атрибуте «name» может быть любое. Но в дальнейшем, если вы будете давать имена и остальным тегам «frame», то помните, что каждое должно быть уникальным:
<frame src="2.html "name ="stepkinblog-ru"> <frame src="1.html "name ="bloggood-ru"> <frame src="3.html "name ="nocrisise-ru">
Теперь нужно к ссылке прописать «цель», то есть, в каком окне фрейма должен осуществиться переход. Для этого в теге «a» пропишите атрибут «target»:
<a href="1text.html" target="stepkinblog-ru">страница 1</a> <a href="2text.html" target="stepkinblog-ru">страница 2</a> <a href="3text.html" target="bloggood-ru">страница 3</a>
«Страница 1», «Страница 2» будут открываться в одном окне там, где вы указали имя фрейму «name =»stepkinblog-ru»» и «Страница 3» откроется в другом фрейме, где было название «name =»bloggood-ru»»
Со ссылками разобрались. Переходим к практике.
ПРАКТИКА
Задание: Нужно создать фреймы вот по такому макету:
Вначале создадим три горизонтальных фрейма:
<frameset rows="15%,*,15%"> </frameset>
Теперь добавим «top.html» и «footer.html»
<frameset rows="15%,*,15%"> <frame src="top.html"> <frame src="footer.html"> </frameset>
Результат пока что будет вот таким:
Теперь между «top.html» и «footer.html» добавим «menu.html» и «content.html»:
<frameset rows="15%,*,15%"> <frame src="top.html"> <frameset cols="25%,75%"> <frame src="menu.html"> <frame src="content.html" name="main"> </frameset> <frame src="footer.html"> </frameset>
Готовый код:
<html> <head> <title>Фреймы</title> </head> <frameset rows="15%,*,15%"> <frame src="top.html"> <frameset cols="25%,75%"> <frame src="menu.html"> <frame src="content.html" name="main"> </frameset> <frame src="footer.html"> </frameset> </html>
Сохраните файл, как «index.html»
Создайте странички «top.html », «footer.html», «menu.html» и «content.html»:
Код файла «top.html»
<html> <head> <title>шапка сайта</title> </head> <body bgcolor="#b2f2ff" text="#0000FF"> <h2>StepkinBLOG.ru</h2> </body> </html>
Код файла «footer.html»
<html> <head> <title>Файл footer.html </title> </head> <body bgcolor="#b2f2ff" text="#000000"> StepkinBlog.com © 2015 </body> </html>
Код файла «menu.html»
<html> <head> <title>Файл menu.html – меню сайта</title> </head> <body bgcolor="#b2bbff" text="#112cf5"> <ul> <li><a target="main" href="content.html">Главная страница</a></li> <li><a target="main" href=" autor.html">Об авторе</a></li> </ul> </body> </html>
Код файла «content.html»:
<html> <head> <title>Главная страница</title> </head> <body bgcolor="#e3e5f8" text="#FF0055"> <h2>Главная страница</h2> Содержимое сайта - "Главная страница (content.html)" </body> </html>
Код файла «autor.html»:
<html> <head> <title> Об авторе</title> </head> <body bgcolor="#e3e5f8" text="#FF0055"> <h2> Об авторе</h2> Содержимое сайта - " Об авторе (autor.html)" </body> </html>
Вот такой результат у меня вышел:
[посмотреть пример]
Воспользуемся атрибутами «frame» и запретим вручную растягивание фреймов и уберем скролл в файле «index.html».
<frameset rows="15%,*,15%"> <frame src="top.html" scrolling ="no" noresize> <frameset cols="25%,75%"> <frame src="menu.html"scrolling ="no" noresize> <frame src="content.html" name="main"scrolling ="no" noresize> </frameset> <frame src="footer.html" noresize> </frameset>
[посмотреть пример]
○ что делать если фреймы не поддерживаются браузером?
Можно вывести сообщение пользователю, что его браузер не поддерживает фреймы. Для этого вставьте тег <noframes> вовнутрь конструкции <frameset>:
<frameset rows="15%,*,15%"> <noframes>УПС! Ваш браузер не поддерживает фреймы.</noframes> <frame src="top.html" scrolling ="no" noresize> <frameset cols="25%,75%"> <frame src="menu.html"scrolling ="no" noresize> <frame src="content.html" name="main"scrolling ="no" noresize> </frameset> <frame src="footer.html" noresize> </frameset>
○ Плавающий фрейм
Если вам нужно вставить фреймовое окно прямо в страницу, в которой нет фреймовой структуры, для этого существует тег «iframe»
<iframe src="http://stepkinblog.ru/"></iframe>
* атрибуты тега «iframe»
- src — путь к открываемой странице
- width — ширина плавающего фрейма
- height — высота плавающего фрейма
- scrolling — полоса прокрутки
— no — никогда не показывать полосу прокрутки
— yes — всегда показывать
— auto — показывать при необходимости - align — выравнивание плавающего фрейма
— left – слева
— right – справа
— top – выше
— bottom – ниже - frameborder — рамка вокруг плавающего фрейма
— 1 — включить рамку
— 0- выключить рамку
Вот так будет выглядеть тег «iframe» с атрибутами:
<iframe src=" http://stepkinblog.ru/" align ="left" scrolling="no" frameborder="1"></iframe>
Если браузер не поддерживает фреймы, можно вставить текст «УПС! Ваш браузер не поддерживает фреймы.» между тегами <iframe></iframe>.
Это будет выглядеть вот так:
<iframe src=" http://stepkinblog.ru/" align ="left" scrolling="no" frameborder="1">УПС! Ваш браузер не поддерживает фреймы.</iframe>
Для примера давайте добавим к файлу «content.html» плавающий фрейм:
<html> <head> <title>Главная страница</title> </head> <body bgcolor="#e3e5f8" text="#FF0055"> <h2>Главная страница</h2> Содержимое сайта - "Главная страница (content.html)" <iframe src=" http://stepkinblog.ru/" align ="left" scrolling="auto" frameborder="1">УПС! Ваш браузер не поддерживает фреймы.</iframe> </body> </html>
[посмотреть пример]
Предыдущая запись
Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15
Следующая запись
Тег div в HTML. Основы HTML для начинающих. Урок №17
Создание фреймов | htmlbook.ru
Несмотря на то, что сайты с фреймами встречаются все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. К тому же фреймы в каком-то смысле заняли свою нишу и применяются для систем администрирования и справки. Там, где недостатки фреймов не имеют особого значения, а преимущества наоборот, активно востребованы.
Для создания фрейма используется тег <frameset>,
который заменяет тег <body> в документе и
применяется для разделения экрана на области. Внутри данного тега
находятся теги <frame>, которые указывают
на HTML-документ, предназначенный для загрузки в область (рис. 13.1).
Рис. 13.1. Пример разделения окна браузера на два фрейма
При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов.
Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 13.1. Нам понадобится три файла: index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов (пример 13.1).
Пример 13.1. Файл index.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="100,*">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</html>В случае использования фреймов в первой строке кода пишется следующий тип документа.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">Данный <!DOCTYPE> указывает браузеру, что он имеет дело с фреймами, эта строка кода является обязательной. Контейнер <head> содержит типовую информацию вроде кодировки страницы и заголовка документа. Вот только учтите, что заголовок остается неизменным, пока HTML-файлы открываются внутри фреймов.
В данном примере окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 100
пикселов, а правая — оставшееся пространство, заданное символом звездочки.
Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие
таблиц.
В теге <frame> задается имя HTML-файла,
загружаемого в указанную область с помощью атрибута src.
В левое окно будет загружен файл, названный menu.html (пример 13.2),
а в правое — content.html (пример 13.3). Каждому
фрейму желательно задать его уникальное имя, чтобы документы можно
было загружать в указанное окно с помощью атрибута name.
Пример 13.2. Файл menu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Навигация по сайту</title>
</head>
<body>
<p>МЕНЮ</p>
</body>
</html>В данном примере серый фон на странице задается с помощью стилей, о которых речь пойдет далее.
Пример 13.3. Файл content.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Содержание сайта</title>
</head>
<body>
<p>СОДЕРЖАНИЕ</p>
</body>
</html>Рассмотрим более сложный пример уже с тремя фреймами (рис. 13.2).
Рис. 13.2. Разделение страницы на три фрейма
В данном случае опять используется тег <frameset>, но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows, где для разнообразия применяется процентная запись (пример 13.4).
Пример 13.4. Три фрейма
<!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 rows="25%,75%">
<frame src="top.html" name="TOP" scrolling="no" noresize>
<frameset cols="100,*">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</frameset>
</html>Как видно из данного примера, контейнер <frameset> с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один <frameset>, который повторяет уже известную вам структуру из примера 13.1. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены атрибуты scrolling=»no» и noresize.
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <frame> определяет свойства отдельного
фрейма, на которые делится окно браузера. Этот элемент должен располагаться
в контейнере <frameset>, который к тому же задает
способ разметки страницы на отдельные области. В каждую из таких областей загружается
самостоятельная веб-страница определяемая с помощью атрибута src.
Хотя обязательных атрибутов у тега <frame> и
нет, рекомендуется задавать каждому фрейму его имя через атрибут name.
Это особенно важно, если требуется по ссылке из одного фрейма загружать документ
в другой.
Синтаксис
<frameset>
<frame>
</frameset>Атрибуты
- bordercolor
- Цвет линии границы.
- frameborder
- Отображать рамку вокруг фрейма или нет.
- name
- Задает уникальное имя фрейма.
- noresize
- Определяет, можно изменять размер фрейма пользователю или нет.
- scrolling
- Способ отображения полосы прокрутки во фрейме.
- src
- Путь к файлу, предназначенному для загрузки во фрейме.
Закрывающий тег
Не требуется.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег FRAME</title>
</head>
<frameset rows="80,*" cols="*">
<frame src="top.html" name="topFrame" scrolling="no" noresize>
<frameset cols="80,*">
<frame src="left.html" name="leftFrame" scrolling="no" noresize>
<frame src="main.html" name="mainFrame">
</frameset>
</frameset>
</html>HTML Фреймы
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами <html> и </html>, а в контейнере <head> располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега <body> применяется парный тег <frameset> (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:
Пример: Структура HTML-документа с фреймами
| frame_top | |
| frame_left | frame_right |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Документ с фреймами</title>
</head>
<frameset rows="100, *">
<frame src="frame_top.html">
<frameset cols="20%, 80%">
<frame src="frame_left.html">
<frame src="frame_right.html">
</frameset>
<noframes>
<p>Ваш браузер не отображает фреймы</p>
</noframes>
</frameset>
</html>
В приведенном примере страница содержит три области, в каждую из которых первоначально загружаются HTML-документы frame_top.html, frame_left.html и frame_right.html. Помимо HTML-документов, фрейм может содержать и графику. Для этого необходимо указать адрес соответствующего изображения в атрибуте src, например src=»image.gif». Обратите внимание, что элемент <frame> используется без закрывающего тега.
Внутри контейнера <frameset> могут содержаться только теги <frame> или другой набор фреймов, охваченный тегами <frameset> и <frameset>.
Тег <frameset> имеет следующие атрибуты:
- rows — описывает разбиение страницы на строки: <frameset rows=»100, *»>
- cols — описывает разбиение страницы на столбцы: <frameset cols=»20%, 80%»>
Области, полученные в результате такого разбиения страницы, и будут являться фреймами. Отсутствие этих атрибутов определяет один фрейм, который займет все окно браузера.
В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
- cols=»20%, 80%» — окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 20%, а правая 80% окна браузера.
- rows=»100, *» окно браузера разбивается на два горизонтальных окна с помощью атрибута rows, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.
Как видно из данного примера, контейнер <frameset> с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один <frameset>, который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes>. Все, что находится между тегами <noframes> и </noframes>, игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер <noframes>, тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег <frame>. Атрибут src задает документ, который должен отображаться внутри данного фрейма, например: <frame src=»frame_top.html»>. Если атрибут src отсутствует, отображается пустой фрейм.
Границы или пространство между фреймами
По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента <frameset>, позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder. Атрибут frameborder может принимать только два противоположных значения. Если значение атрибута frameborder равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder, а для некоторых браузеров требуется еще добавить атрибут framespacing со значением «0»:
<frameset frameborder="0" framespacing="0" frameborder="no" border="0">В следующем примере убираем границу между фреймами:
Пример: Убираем границу между фреймами
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Фреймы без границ</title>
</head>
<frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0">
<frame src="frame_left.html" name=" frame_left" >
<frame src="frame_right.html" name="frame_right" >
</frameset>
</html>
Если вы удалите границу между фреймами, посетители не смогут изменять размер фрейма в браузере. Вы можете также не допустить изменения размера фрейма, сохранив границы, используя атрибут noresize:
<frame src="frame_left.html" noresize>С помощью атрибута bordercolor можно изменить цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.
Ниже приведен пример html-страницы, которая содержит описанные выше атрибуты управления границей фрейма: цвет границы — красный, изменять размер верхнего фрейма нельзя:
Пример: Управление границей фреймов
| frame_top | |
| frame_left | frame_right |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Управление границей фреймов</title>
</head>
<frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes">
<frame src="frame_top.html" noresize>
<frameset cols="20%, 80%">
<frame src="frame_left.html">
<frame src="frame_right.html">
</frameset>
</frameset>
</html>
Если вы хотите расположить страницу, отображаемую внутри фрейма, ближе к его границам, или, наоборот, отодвинуть дальше, измените атрибуты marginheight и marginwidth тэга <frame>. Атрибут marginheight определяет отступ между содержимым фрейма и его верхней и нижней границами. Синтаксис:
<frame marginheight="число">Атрибут marginwidth определяет отступ между содержимым фрейма и его правой и левой границами. Синтаксис:
<frame marginwidth="число">Данная строка html, например, располагает отображаемую страницу вплотную к границе фрейма:
Если страница отображает нежелательную для вас полосу прокрутки, вы можете решить эту проблему, указав атрибут scrolling=»no» в тэге <frame>. Но учтите, что если фрейм будет недостаточно большим, чтобы отобразить все содержимое страницы, то у посетителя не будет никакой возможности прокрутить отображаемую страницу.
Ссылки внутри фреймов
Переход по ссылке в обычном HTML-документе осуществляется следующим образом: нажимаете ссылку и текущий документ заменяется новым в текущем либо в новом окне браузера. При использовании фреймов схема загрузки html-документов отличается от обычной и главное отличие — это возможность загружать html-документ в один фрейм из другого фрейма.
Для загрузки документа в определенный фрейм используется атрибут target тега <a>. В качестве значения атрибута target используется имя фрейма, в который будет загружаться документ, указанный атрибутом name тега <frame>. Стоит также отметить, что имя фрейма должно начинаться либо с цифры либо с латинской буквы. Следующие имена используются в качестве зарезервированных:
| Имя | Описание |
|---|---|
| _self | документ загрузится в текущий фрейм, т.е. в котором находится сама гиперссылка |
| _blank | документ загрузится в новом окне веб-браузера |
| _parent | документ загрузится в окне, являющееся родительским по отношению к текущему фрейму |
| _top | документ загрузится поверх всех фреймов |
| targetframe | документ загрузится в фрейм с указанным именем |
Для внешних ссылок следует задавать в качестве значения для атрибута target либо _top, либо _blank, для того, чтобы сторонние проекты отображались не в ваших фреймах, а занимали полное окно браузера.
В следующем примере изображен HTML-документ, в правый фрейм которого загружается страница по ссылке, помещенной в верхний фрейм. Ссылка на документ, который откроется в правом фрейме:
<a href="http://www.google.com" target="frame_right">Google</a>Правому фрейму присваивается имя frame_right:
<frame src="frame_right.html" name="frame_right">Чтобы документ загружался в указанный фрейм, используется конструкция target=»frame_right», как показано в примере:
Пример: Ссылка на другой фрейм
| frame_topic | |
| frame_left | frame_right |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ссылка на другой фрейм</title>
</head>
<frameset rows="100, *">
<frame src="frame_topic.html">
<frameset cols="20%, 80%">
<frame src="frame_left.html">
<frame src="frame_right.html" name="frame_right">
</frameset>
<noframes>
<p>Ваш браузер не отображает фреймы</p>
</noframes>
</frameset>
</html>
Плавающие фреймы
Элемент <iframe> (сокращение английского термина «плавающий фрейм») позволяет встроить в любое место веб-страницы отдельный HTML-документ или другой ресурс.
Содержимым плавающего (встроенного) фрейма может быть любая НТМL-страница, как с вашего ресурса, так и с другого веб-сайта. Как вы уже поняли, плавающие фреймы создаются с помощью элемента <iframe>, который в отличие от тега <frame> вставляется не между тегами <frameset> и </frameset>, а между тегами <body> и </body>.
В элементе <iframe> можно использовать те же атрибуты, что и для фрейма </frame>, за исключением атрибута noresize — в отличие от обычных фреймов, для встроенных фреймов возможность изменения размеров на экране не предусмотрена:
| Атрибут | Описание |
|---|---|
| src | используется для указания URL-aдpeca страницы, отображаемой во фрейме |
| height | устанавливает высоту окна плавающего фрейма в пикселах или % |
| width | устанавливает ширину окна плавающего фрейма в пикселах или % |
| name | имя фрейма, по которому к нему можно будет обращаться в ссылках |
| frameborder | задает обрамление у фреймов, может принимать значения 1 (есть обрамление) или 0 (нет об-рамления) (В HTML5 не поддерживается) |
| marginwidth | отступ слева и справа от содержания до границы фрейма (В HTML5 не поддерживается) |
| marginheight | отступ сверху и снизу от содержания до границы фрейма (В HTML5 не поддерживается) |
| scrolling | определяет вид полос прокрутки у фрейма и принимает значения yes (есть полосы), no (нет полос) и auto (полосы появляются при необходимости) (В HTML5 не поддерживается) |
| allowfullscreen | разрешает для фрейма полноэкранный режим |
| hspace | Горизонтальный отступ от фрейма до окружающего контента |
| vspace | вертикальный отступ от фрейма до окружающего контента |
| align | определяет выравнивание фрейма |
В следующем примере размеры плавающего фрейма заданы в пикселях, однако вы можете задавать их и в %:
<iframe src="demo_iframe.htm"></iframe>Пример: Плавающий фрейм
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Плавающий фрейм</title>
</head>
<body>
<iframe src="demo_iframe.html" align="left">
Ваш браузер не поддерживает плавающие фреймы!
</iframe>
</body>
</html>
По умолчанию плавающий (строчный) фрейм имеет границы черного цвета. Чтобы удалить границу, вместо атрибута frameborder воспользуйтесь свойством border таблицы стилей CSS:
Пример HTML:
Попробуй сам
<iframe src="demo_iframe.html">
</iframe>Используя свойства каскадных таблиц стилей CSS Вы можете также изменить размер, стиль и цвет границы встроенного фрейма:
Пример HTML:
Попробуй сам
<iframe src="demo_iframe.html">
</iframe>В следующем примере при переходе по ссылкам соответствующая страница загружается в окно встроенного фрейма. Для этого
требуется задать имя фрейма через атрибут name, а в теге <a> указать это же имя в атрибуте target:
Пример HTML:
Попробуй сам
<iframe src="demo_iframe.html" name="chapter" align="right">
<p>Ваш Web-браузер не отображает фреймы</p>
</iframe>
<h3>Оглавление</h3>
<ul>
<li><a href="orange.jpg" target="chapter">Апельсин</a></li>
<li><a href="rabbit.gif" target="chapter">Веселый кролик</a></li>
<li><a href="frame_topic.html" target="chapter">О GOOLE</a></li>
</ul>Задачи
Загрузка картинки в окно фрейма
Сделайте так, чтобы при клике по ссылке изображение «smiley.jpg» загружалось в окно фрейма.
Задача HTML:
Реши сам »
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <title>Загрузка изображения во фрейм</title> </head> <body> <iframe src="demo_iframe.html" name="iframe1"> </iframe> <a href="#">Смайлик</a> </body> </html>
Встроенный фрейм
Добавьте встроенный фрейм, URL-адресс которого «http://www.wm-school.ru» в HTML-документ. Размеры фрейма установите 250х250px.
Задача HTML:
Реши сам »
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <title>Встроенный фрейм</title> </head> <body> </body> </html>
Граница встроенного фрейма
Воспользуйтесь свойством CSS для удаления границы плавающего фрейма.
Задача HTML:
Реши сам »
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <title>Граница встроенного фрейма</title> </head> <body> <iframe src="demo_iframe.html"></iframe> </body> </html>
Цвет границы плавающего фрейма
Воспользуйтесь свойством CSS для изменения цвета границы плавающего фрейма на зеленый (green).
Задача HTML:
Реши сам »
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8"> <title>Цвет границы фрейма</title> </head> <body> <iframe src="demo_iframe.html"></iframe> </body> </html>
Что такое фреймы в HTML?
Frameset — это легкий способ создавать несколько отдельных областей прокрутки в окне браузера, а также удобный механизм для изменения содержимого фрейма.
Но у фреймов есть и существенные недостатки. Именно поэтому использовать их не рекомендуется. Хотя фреймы поддерживаются в HTML 4.01, их нет в HTML 5. На смену им пришли многофункциональные методы форматирования CSS. Главные недостатки фреймов:
- Поисковым системам тяжело работать с фреймами;
- Плохая совместимость с URL;
- Фреймы недоступны для всех клиентских приложений;
- Страницы, отображаемые во фреймах, трудно добавлять в закладки;
- Частые проблемы при распечатке веб-страниц.
Обычно фреймы используют для создания отдельных областей с прокруткой в одном окне. Такой подход применяется в приложениях для мобильных и десктопных платформ. Примером такого приложения является проводник Windows. Окно проводника состоит из двух частей. В левой части окна отображаются папки и «Избранное», в правой — содержимое папки, выбранной в левой части окна.
Фреймы трудно использовать, так как для них требуется создание отдельного HTML-файла, определяющего расположение фреймов. А также дополнительных HTML-файлов, чтобы их задействовать.
Ниже приводится пример создания frameset HTML:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
<html>
<head>
…
</head>
<frameset attributes>
<frame attributes></frame>
<frame attributes></frame>
…
</frameset>
</html>Особенности кода:
- Отсутствует элемент «body». Его роль выполняет тег <frameset>;
- Теги <frame>, расположенные внутри <frameset>, определяют содержимое фреймов и их свойства;
- Кроме <frameset> и <head> в документе больше нет никакого содержимого.
Тег <frameset> отвечает за расположение фрейма в документе. Указанные в нем значения определяют количество frameset rows и строк, а также ширину фреймов. Формат тега <frameset> выглядит следующим образом:
<frameset cols|rows = “размер(ы)_столбцов_или_строк”>
Размеры столбцов или строк могут быть заданы в пикселях, процентах или как «*». В последнем случае браузер разделит оставшуюся часть окна на столбцы, где значение “*” указывает их ширину.
Значения атрибута cols или rows также определяют количество отображаемых на странице фреймов. Для каждой записи (значения) требуется наличие тега <frame> внутри тега <frameset>.
Рассмотрим следующие примеры создания тега <frameset>:
<!– Два столбца, 25% окна, остальные 75% окна –> <frameset cols = “25%, 75%”> <!– Два столбца, 25% окна, остальные 75% окна –> <frameset cols = “25%, *”> <!– Три строки, первая 50% окна, две остальные по 25% окна – > <frameset rows = “50%, *, *”> <!– Две строки, первая высотой 100 пикселей, вторая занимает оставшееся пространство окна –> <frameset rows = “100px, 200px”>
Тег <frame> отвечает за свойства каждого фрейма в наборе фреймов, заключенного в тег frameset. Он имеет следующий синтаксис:
<frame name=”название_фрейма” src=”url_содержимого”></frame>
Атрибут name присваивает фрейму уникальное имя, на которое могут ссылаться URL-адреса, скрипты и т. д. Это необходимо для управления содержимым фрейма. Атрибут src используется для указания URL-адреса содержимого, которое должно отображаться во фрейме.
Тег <frame> поддерживает еще один атрибут — noresize. По умолчанию размер фрейма является изменяемым. Чтобы запретить изменение размера, необходимо задать атрибуту noresize значение noresize.
Например:
<frameset cols=“50%,50%”> <frame src=“frame_a.htm” noresize=“noresize”> <frame src=“frame_b.htm”> </frameset>
Чтобы изменить содержимое фрейма, следует указать нужный фрейм. Для этого используется атрибут name. Затем эти имена можно использовать в скриптах и тегах ссылок, чтобы определить для фрейма новое содержимое.
Изменить содержимое фрейма во frameset можно с помощью атрибута target тега ссылки. Для атрибута target допустимы следующие значения:
Например:
<a href=”news.html” target=”content”>Последние новости</a>
В отличие от frameset HTML тег iframe используется для отображения содержимого фрейма рядом с остальным содержимым веб-страницы. Встроенные фреймы не полностью поддерживаются браузерами. Их можно размещать на веб-странице, используя тег <iframe>. Синтаксис тега <iframe> выглядит следующим образом:
<iframe src=”url_содержимого”></iframe>
Тег <iframe> поддерживает такие атрибуты:
Данная публикация представляет собой перевод статьи «What are frames in HTML?» , подготовленной дружной командой проекта Интернет-технологии.ру
примеры применения, различии с frame
Элемент
Frames
Что же делает <iframe>?
Как вставить страницу в страницу HTML? Для этого нужно использовать <iframe>, который создает в текущем документе встроенный фрейм, в котором отображается другой HTML-документ.
Отображение
Display block.
Пример кода
<iframe src="https://www.youtube.com/embed/owsfdh5gxyc" frameborder="0" allowfullscreen></iframe>
Еще в старые недобрые времена веб-дизайна было много <frame> элементов, портящих жизнь каждого разработчика. Они почти всегда были плохим подходом к дизайну. К счастью, элемент <frame> был объявлен устаревшим в HTML5. Но <iframe> или «встроенный фрейм» по-прежнему доступен. Будет ли он устаревшим в следующей версии? Может, стоит его избегать? Есть несколько допустимых вариантов использования этого элемента при создании HTML страницы. Но нужно понять, что это такое и как оно работает, чтобы избежать ошибок.
Оба этих элемента позволяют создать отдельный HTML-документ. Ссылка на содержимое документа, на который ссылается текущая веб-страница, указывается в атрибуте src.
<!—Вы можете сделать так --> <iframe src="http://example.com"></iframe> <!—Но вы не можете сделать так --> <iframe> <!DOCTYPE html> <html> <head> . . . </head> <body> . . . </body> </html> </iframe>
Основное различие между <iframe> и <frame> заключается в том, что <iframe> обеспечивает соблюдение правила, о том, что HTML документ в приоритете. Содержимое <iframe> отображается внутри элемента, который является частью текущего документа. В качестве примера рассмотрим это встроенное видео, взятое из YouTube:
<iframe src="https://www.youtube.com/embed/M2kSJbLbIgQ" frameborder="0" allowfullscreen></iframe>
Видео явно на HTML странице, а не на какой-то отдельной панели. элемент сломал эту парадигму и позволил документу осуществлять контроль над окном браузера, разбив его на несколько мелких панелей (фреймов), каждая из которых отображает отдельный документ. Все другие различия между и вытекают из этого основного различия.
Когда-нибудь вам может попасться задача по обновлению старого сайта, который был построен с использованием фреймов. Возможно, вы захотите использовать <iframe> и фиксированную ширину макета, чтобы воссоздать тот же кошмар из независимых панелей и подокон. Но вы не сможете использовать атрибут target, чтобы открыть ссылку в отдельном фрейме. Вы можете начать искать решения на JavaScript. Пожалуйста, не делайте этого.
Существует несколько допустимых вариантов использования <iframe> для создания HTML страницы:
- встраивание стороннего медиа контента;
- встраивание собственного медиа контента через кроссплатформенный документ;
- встраивание примеров кода;
- встраивание сторонних «апплетов» в качестве форм оплаты.
А вот некоторые ужасные варианты использования <iframe>:
- Фотогалерея;
- форум или чат.
Если вам нужно встроить независимые, уже существующие HTML-документы в текущий, используйте <iframe>. Если же вы строите все с нуля, нет никаких причин разбивать дизайн страницы на несколько самостоятельных документов. Особенно если они на самом деле не являются независимыми частями контента.
| Название атрибута | Значение | Описание |
| sandbox | Allow-same-origin Allow-top-navigation Allow-forms Allow-scripts | Задает ряд ограничений на контент, загружаемый во фрейм. Задается перед тем, как создать HTML страницу. |
| scrolling | yes no auto | Определяет показывать скроллы в фрейме или нет. Является устаревшим в HTML5. Вместо него используйте CSS. |
| Name | название | Задает имя фрейма. |
| Align | left right top middle bottom | Определяет выравнивание фрейма относительно окружающих элементов. Является устаревшим. Вместо него используйте CSS. |
| frameborder | yes (или 1) no | Используется для включения отображения границы вокруг фрейма. Является устаревшим в HTML5. Вместо него используйте CSS. |
| longdesc | URL | Используется, чтобы указать URL-адрес страницы, которая содержит длинное описание содержания фрейма. Является устаревшим. Вместо него используйте CSS. |
| marginwidth | пиксели | Используется для контроля ширины отступа от содержания до границы фрейма. Является устаревшим. Вместо него используйте CSS. |
| src | URL | Определяет URL-адрес документа для отображения в IFRAME. |
| vspace | пиксели | Устанавливает вертикальные отступы от фрейма до окружающего контента. Является устаревшим. Вместо него используйте CSS. |
| width | пиксели % | Определяет ширину фрейма на HTML странице. |
Данная публикация представляет собой перевод статьи «<iframe>» , подготовленной дружной командой проекта Интернет-технологии.ру
Создание страниц с рамками | Теги Microsoft Docs
в предыдущем примере HTML, MyFrameset.ChildFramesetItem (1) возвращает объект Frameset типа wdFramesetTypeFrame , который соответствует фрейму с именем «top». Точно так же MyFrameset.ChildFramesetItem (2) возвращает объект Frameset типа wdFramesetTypeFrameset , содержащий два объекта Frameset : первый объект соответствует фрейму с именем «left», второй — типу wdFramesetType. .
Frameset Объекты типа wdFramesetTypeFrame не имеют дочерних фреймов, а объекты wdFramesetTypeFrameset имеют по крайней мере один.
В следующем примере Visual Basic отображаются имена четырех фреймов, определенных в предыдущем примере HTML.
Dim MyFrameset как набор фреймов
Dim Name1 As String
Dim Name2 As String
Dim Name3 As String
Dim Name4 As String
Установите MyFrameset = ActiveWindow.Document.Frameset
С MyFrameset
Имя1 =.ChildFramesetItem (1) .FrameName
С .ChildFramesetItem (2)
Name2 = .ChildFramesetItem (1) .FrameName
С .ChildFramesetItem (2)
Name3 = .ChildFramesetItem (1) .FrameName
Name4 = .ChildFramesetItem (2) .FrameName
Конец с
Конец с
Конец с
Отладка: напечатать имя1, имя2, имя3, имя4
Отдельные кадры и целые кадры Страница
Чтобы вернуть объект Frameset , связанный с конкретным фреймом на странице фреймов, используйте свойство Frameset объекта Pane .Например,
ActiveWindow.Panes (1) .Frameset
возвращает объект Frameset , который соответствует первому кадру страницы кадров.
Страница фреймов сама по себе является документом, отдельным от документов, составляющих содержимое отдельных фреймов. Доступ к объекту Frameset , связанному со страницей фреймов, осуществляется из соответствующего объекта Document , который, в свою очередь, доступен из объекта Window , в котором отображается страница фреймов.Например,
ActiveWindow.Document.Frameset
возвращает объект Frameset для страницы фреймов в активном окне.
Примечание При работе со страницами фреймов свойство ActiveDocument возвращает объект Document , связанный с фреймом на активной панели, а не со всей страницей фреймов.
Создание страницы фреймов и ее содержимого с нуля
В этом примере создается новая страница фреймов с тремя фреймами, добавляется текст в каждый фрейм и устанавливается цвет фона для каждого фрейма.Он вставляет две гиперссылки в левый фрейм: первая гиперссылка открывает документ с именем One.htm в главном фрейме, а вторая открывает документ с именем Two.htm во всем окне. Чтобы эти гиперссылки работали, вы должны создать файлы с именами One.htm и Two.htm или изменить строки на имена существующих файлов.
Примечание При создании каждого кадра Word создает новый документ, содержимое которого будет загружено в новый кадр. В примере сохраняется страница фреймов, которая автоматически сохраняет документы, связанные с каждым из трех фреймов.
Sub FramesetExample1 ()
'Создать новую страницу фреймов.
Documents.Add DocumentType: = wdNewFrameset
С ActiveWindow
'Добавьте текст и цвет к первому кадру.
Selection.TypeText Text: = "РАМКА БАННЕРА"
С ActiveDocument.Background.Fill
.ForeColor.RGB = RGB (204, 153, 255).
.Visible = msoTrue
Конец с
'Добавить новый фрейм под верхним фреймом.
.ActivePane.Frameset.AddNewFrame _
wdFramesetNewFrameBelow
'Добавьте текст и цвет в нижнюю рамку..ActivePane.Frameset.FrameName = "основной"
Selection.TypeText Text: = "ОСНОВНОЙ КАДР"
С ActiveDocument.Background.Fill
.ForeColor.RGB = RGB (0, 128, 128).
.Visible = msoTrue
Конец с
'Добавить новый фрейм слева от нижнего фрейма.
.ActivePane.Frameset.AddNewFrame _
wdFramesetNewFrameLeft
'Установите ширину 25% от ширины окна.
С .ActivePane.Frameset
.WidthType = wdFramesetSizeTypePercent
.Ширина = 25
.FrameName = "left"
Конец с
'Добавьте текст и цвет в левую рамку.
Selection.TypeText Text: = "ЛЕВЫЙ КАДР"
С ActiveDocument.Background.Fill
.ForeColor.RGB = RGB (204, 255, 255).
.Visible = msoTrue
Конец с
Selection.TypeParagraph
Selection.TypeParagraph
'Добавить гиперссылки в левый фрейм.
С ActiveDocument.Hyperlinks
.Добавить привязку: = Selection.Range, _
Адрес: = "один.htm ", Target: =" main "
Selection.TypeParagraph
Selection.TypeParagraph
.Добавить привязку: = Selection.Range, _
Адрес: = "two.htm", Target: = "_ top"
Конец с
'Активируйте верхнюю раму.
.Panes (1) .Активировать
'Установите высоту 1 дюйм.
С .ActivePane.Frameset
.HeightType = wdFramesetSizeTypeFixed
.Height = InchesToPoints (1).
.FrameName = "вверху"
Конец с
'Сохраните страницу фреймов и связанные с ней файлы..Document.SaveAs FileName: = "default.htm", _
FileFormat: = wdFormatHTML
Конец с
Конец подписки
Создание страницы фреймов, на которой отображается контент из существующих файлов
В этом примере создается страница фреймов, аналогичная приведенной выше, но для каждого фрейма задается URL-адрес по умолчанию для существующего документа, так что содержимое этого документа отображается во фрейме. Чтобы этот пример работал, вы должны создать файлы с именами Main.htm, Left.htm и Banner.htm или изменить строки в примере на имена существующих файлов.
Sub FramesetExample2 ()
'Создать новую страницу фреймов.
Documents.Add DocumentType: = wdNewFrameset
С ActiveWindow
'Добавить новый фрейм под верхним фреймом.
.ActivePane.Frameset.AddNewFrame _
wdFramesetNewFrameBelow
'Задайте имя и начальную страницу для фрейма.
С .ActivePane.Frameset
.FrameName = "main"
.FrameDefaultURL = "main.htm"
Конец с
'Добавить новый фрейм слева от нижнего фрейма..ActivePane.Frameset.AddNewFrame _
wdFramesetNewFrameLeft
С .ActivePane.Frameset
'Установите ширину 25% от ширины окна.
.WidthType = wdFramesetSizeTypePercent
Ширина = 25
'Задайте имя и начальную страницу для фрейма.
.FrameName = "left"
.FrameDefaultURL = "left.htm"
Конец с
'Активируйте верхнюю раму.
.Panes (1) .Активировать
С .ActivePane.Frameset
'Установите высоту 1 дюйм..HeightType = wdFramesetSizeTypeFixed
.Height = InchesToPoints (1).
'Задайте имя и начальную страницу для фрейма.
.FrameName = "вверху"
.FrameDefaultURL = "banner.htm"
Конец с
'Сохраните набор фреймов.
.Document.SaveAs FileName: = "default.htm", _
FileFormat: = wdFormatHTML
Конец с
Конец подписки
Поддержка и отзывы
Есть вопросы или отзывы об Office VBA или этой документации? Чтобы узнать, как получить поддержку и оставить отзыв, см. Раздел Поддержка и отзывы Office VBA.
HTML-фреймов
Когда HTML-фреймы были впервые представлены в Netscape 2 и IE 2.1, их часто критиковали как некрасивые, медленные и неуправляемые. К счастью, современные браузеры тоже реализовали фреймы, и при правильном использовании фреймы могут помочь сделать сайт более привлекательным и более удобным для навигации.
Например, сайт может использовать один маленький фрейм для своего меню навигации, а основное содержимое отображается во втором, более крупном фрейме.Фрейм навигации остается прежним, в то время как основной фрейм контента изменяется для отображения различных страниц контента.
HTML-фреймы
также можно использовать художественно для размещения графических элементов на экране.
HTML frameset и frame tags
Для создания сайта во фреймах используются два тега: и . Первый из них, , помещается вверху вашего сайта, где вы обычно помещаете тег .Второй тег, , используется для определения каждого кадра в наборе кадров. Кроме того, вы можете поместить дополнительные теги во внешний , чтобы вы могли иметь вложенные фреймы.
Для упрощения мы не будем здесь рассматривать весь синтаксис и ; просто наиболее часто используемые варианты.
Давайте сначала посмотрим на тег :
Все атрибуты являются необязательными, кроме атрибута строк или столбцов .
Первый атрибут, строк или столбцов , указывает, будет ли набор фреймов состоять из фреймов, выстроенных в ряды или столбцы. (Чтобы создать набор фреймов, содержащий как строки, так и столбцы, вам необходимо вложить наборы фреймов внутри основного набора фреймов — см. Раздел примеров наборов фреймов внизу страницы.)
Атрибуты rows и cols также позволяют указать, как эти строки или столбцы будут отображаться в наборе фреймов. Каждая из строк / столбцов указывается по очереди, через запятую. Каждое значение может принимать одну из следующих четырех форм:
-
n
- Строка / столбец будет иметь размер n пикселей в глубину / ширину
-
n%
- Строка / столбец займет n% ширины / высоты родительского окна / фрейма
-
*
- Строка / столбец будет занимать все доступное пространство
-
n *
- Строка / столбец будет занимать в n раз больше места, чем строка / столбец, определенный с помощью *
Атрибут border позволяет указать ширину (в пикселях) границ между фреймами в наборе фреймов.По умолчанию в большинстве браузеров ширина составляет 5 пикселей.
Атрибут frameborder указывает, будут ли кадры иметь границы или нет. Часто полезно иметь бесшовные фреймы, как в наборе фреймов Online Japery — эта опция позволяет вам полностью отключить границы фреймов с frameborder = 0 . Обратите внимание, что это не всегда приводит к созданию фреймов без полей во всех браузерах, поскольку все они имеют дополнительные настройки, которые могут привести к появлению однотонных границ между фреймами! На всякий случай укажите border = 0 , frameborder = 0 и framepacing = 0 .
Атрибут framepacing определяет ширину между кадрами в пикселях и, следовательно, ширину границы; фактически то же самое, что и атрибут border .
Теперь давайте посмотрим на тег HTML :
.
.
.
Все атрибуты необязательны.
Вот как работают эти атрибуты фрейма:
-
SRC - Задает содержимое фрейма — обычно HTML-страницу. Например,
main.html. Всегда рекомендуется указывать источник для каждого кадра, хотя это и не обязательно. -
наименование - Позволяет связать имя с каждым фреймом в наборе фреймов. Это необходимо для целевых фреймов (см. Раздел «Связь между фреймами HTML»).Пример:
-
прокрутка - Указывает, будут ли в кадре полосы прокрутки. Значение
«да»означает, что полосы прокрутки всегда будут;«нет»означает, что у него никогда не было полос прокрутки; и"авто"означает, что полосы прокрутки будут присутствовать только в том случае, если содержимое фрейма слишком велико для его размещения. -
рамка рамки - Это работает аналогично тегу
framesetи позволяет включать или выключать границу для отдельных кадров (граница будет отключаться только между двумя соседними кадрами, если они оба указываютframeborder = 0). -
размер - Если присутствует, этот атрибут означает, что пользователь не может изменить размер кадра, перетаскивая границу кадра.
-
ширина поляи высота поля - Они контролируют расстояние в пикселях между краями кадра и содержимым кадра. Если они не указаны, используются значения по умолчанию (примерно 10 пикселей, хотя в разных браузерах значения по умолчанию разные!).
Взгляните на некоторые примеры наборов фреймов в конце этой страницы, чтобы увидеть, как теги и работают вместе.
Связывание фреймов HTML
Часто требуется, чтобы гиперссылка в документе в одном фрейме открывала документ в другом фрейме. Например, один фрейм может быть фреймом навигации или меню, содержащим ссылки на страницы, которые следует открывать в другом фрейме.
Так как же это сделано? Легко. Вы добавляете атрибут target к тегу , чтобы указать имя фрейма, в котором открывается страница. Вы ведь дали каждому фрейму имя, верно? 🙂
Например, предположим, что в вашем наборе фреймов есть два кадра, которые называются , главное и меню .Ваш menu frame имеет src из menu.html . У вас есть ссылка на странице menu.html на страницу с именем services.html , которая должна отображаться в основном кадре . Вот как вы это делаете:
Наши услуги
Эта ссылка при размещении на странице menu.html приведет к открытию страницы services.html в основном фрейме .
Есть некоторые специальные значения, которые можно использовать для цели . Это:
-
_ родительский
- Страница будет загружена в набор фреймов, содержащий текущий фрейм (для вложенных наборов фреймов).
-
_top
- Страница заменит самый верхний набор фреймов, т. Е. Загрузится во все окно браузера. Отлично подходит для замены одного набора фреймов другим.
-
_пусто
- Страница будет загружена в новое окно браузера, в результате чего откроется новое окно.
-
_self
- Страница всегда будет загружаться в тот же фрейм, что и ссылка. В любом случае это цель по умолчанию, но значение по умолчанию можно изменить, указав строку
страницы.
Ссылки на другие сайты в рамках
При переходе по ссылке на внешние сайты из вашего набора фреймов считается хорошим сетевым этикетом загружать внешнюю страницу в главное окно браузера, используя target = "_ top" .
Кодирование для безрамочных браузеров
При использовании HTML-фреймов будет хорошей идеей предоставить альтернативную страницу для ранних браузеров, которые не используют фреймы, даже если на этой странице просто написано «установите новый браузер!». Если вы этого не сделаете, старые браузеры будут отображать пустую страницу, и люди будут думать, что вашего сайта не существует!
Вы предоставляете альтернативную страницу, используя теги перед тегом .Браузеры с поддержкой фреймов будут игнорировать все, что находится между этими тегами, в то время как старые браузеры будут продолжать отображать контент. Например:
.
.
.
<p> Побалуйте себя - купите новый браузер! </p>
Некоторые примеры набора фреймов
Давайте взглянем на несколько примеров наборов фреймов, а также на HTML, из которого они созданы.
1. Набор фреймов «меню слева»
Это довольно распространенный набор фреймов, где страница разделена на две колонки.Узкий левый столбец содержит графические или текстовые ссылки на страницы, которые появляются в правом столбце. Этот изящный подход означает, что для небольших сайтов все содержимое сайта может быть доступно через ссылки в левом фрейме.
Просмотрите набор фреймов. (Чтобы вернуться сюда, воспользуйтесь кнопкой Назад в браузере.)
Пример "Меню слева"
2. Набор из трех рамок
В этом примере используются вложенные наборы фреймов для отображения двух фреймов меню, один вверху, а другой внизу справа.
Просмотрите набор фреймов. (Чтобы вернуться сюда, воспользуйтесь кнопкой Назад в браузере.)
Пример "трех кадров"
Надеюсь, вы нашли этот урок полезным! Скоро вы будете создавать красивые веб-сайты с фреймами. Удачи!
Обучение созданию рамок
Обучение созданию рамок
кадров существуют уже давно, поддерживаются
каждый известный браузер.Хотя некоторые считают их раздражающими, красиво оформленными,
кадры могут быть
очень полезно при навигации по сайту. В этом уроке мы поговорим о том, как реализовать
фреймов, а в заключение расскажем, как создавать фреймы без полей и как создавать ссылки, которые
загрузить содержимое в другой фрейм.
Все
что нужно знать для создания рамок
Все кадры создаются с помощью тега
Добавить комментарий