Главная › Услуги

Что такое фреймы в html. Создание фреймов

Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.

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

Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:

Пример: Структура HTML-документа с фреймами

Попробуй сам »

frame_top
frame_left	frame_right

Документ с фреймами

В приведенном примере страница содержит три области, в каждую из которых первоначально загружаются HTML-документы frame_top.html, frame_left.html и frame_right.html. Помимо HTML-документов, фрейм может содержать и графику. Для этого необходимо указать адрес соответствующего изображения в атрибуте src , например src="image.gif" . Обратите внимание, что элемент используется без закрывающего тега.
Внутри контейнера могут содержаться только теги или другой набор фреймов, охваченный тегами и .
Тег имеет следующие атрибуты:

rows — описывает разбиение страницы на строки:
cols — описывает разбиение страницы на столбцы:

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

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

cols="20%, 80%" — окно браузера разбивается на две колонки с помощью атрибута cols , левая колонка занимает 20%, а правая 80% окна браузера.
rows="100, *" окно браузера разбивается на два горизонтальных окна с помощью атрибута rows , верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.

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

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

Элемент </b> (сокращение английского термина «плавающий фрейм») позволяет встроить в любое место веб-страницы отдельный HTML-документ или другой ресурс. Содержимым плавающего (встроенного) фрейма может быть любая НТМL-страница, как с вашего ресурса, так и с другого веб-сайта. Как вы уже поняли, плавающие фреймы создаются с помощью элемента <b><iframe> </b> , который в отличие от тега <b><frame> </b> вставляется не между тегами <b><frameset> </b> и <b></frameset> </b> , а между тегами <b><body> </b> и <b></body> </b> .<br> В элементе <b><iframe> </b> можно использовать те же атрибуты, что и для фрейма <b></frame> </b> , за исключением атрибута <b>noresize </b> — в отличие от обычных фреймов, для встроенных фреймов возможность изменения размеров на экране не предусмотрена:</p> <table class="table table-bordered"><tr><th>Атрибут </th><th>Описание </th> </tr><tr><td>src </td><td>используется для указания URL-aдpeca страницы, отображаемой во фрейме </td> </tr><tr><td>height </td><td>устанавливает высоту окна плавающего фрейма в пикселах или % </td> </tr><tr><td>width </td><td>устанавливает ширину окна плавающего фрейма в пикселах или % </td> </tr><tr><td>name </td><td>имя фрейма, по которому к нему можно будет обращаться в ссылках </td> </tr><tr><td>frameborder </td><td>задает обрамление у фреймов, может принимать значения 1 (есть обрамление) или 0 (нет об-рамления) (<b>В HTML5 не поддерживается </b>) </td> </tr><tr><td>marginwidth </td><td>отступ слева и справа от содержания до границы фрейма (<b>В HTML5 не поддерживается </b>) </td> </tr><tr><td>marginheight </td><td>отступ сверху и снизу от содержания до границы фрейма (<b>В HTML5 не поддерживается </b>) </td> </tr><tr><td>scrolling </td><td>определяет вид полос прокрутки у фрейма и принимает значения yes (есть полосы), no (нет полос) и auto (полосы появляются при необходимости) (<b>В HTML5 не поддерживается </b>) </td> </tr><tr><td>allowfullscreen </td><td>разрешает для фрейма полноэкранный режим </td> </tr><tr><td>hspace </td><td>Горизонтальный отступ от фрейма до окружающего контента </td> </tr><tr><td>vspace </td><td>вертикальный отступ от фрейма до окружающего контента </td> </tr><tr><td>align </td><td>определяет выравнивание фрейма </td> </tr></table><p>В следующем примере размеры плавающего фрейма заданы в пикселях, однако вы можете задавать их и в %:</p><p> <iframe src="demo_iframe.htm" width="200" height="200">

07.12.2015

Пока нет

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

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

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

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

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

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

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

Фреймы
○ тег 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="1.html" ;

marginwidth – отступ внутри фрейма по ширине. Пример: marginwidth="10" ;

marginhight – отступ внутри фрейма по высоте. Пример: marginhight ="10" ;

scrolling – прокрутка фрейма через скролл.
- yes – скролл будет присутствовать во фрейме. Пример: scrolling ="yes" ;
- no – скролл не будет присутствовать во фрейме. Пример: scrolling ="no" ;
- auto – скролл будет присутствовать во фрейме при необходимости. Пример: scrolling ="auto" ;

noresize – запрещает двигать границы фрейма.

name – имя фрейма. Указывает, в каком окне нужно открывать другие фреймы. Пример: name ="сайт" ;

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

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

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

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

страница 2 страница 3
«Страница 1 », «Страница 2 » будут открываться в одном окне там, где вы указали имя фрейму «name ="сайт " » и «Страница 3 » откроется в другом фрейме, где было название «name ="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»
Файл footer.html StepkinBlog.com © 2015
Код файла «menu.html»
Файл menu.html – меню сайта

Главная страница

Об авторе

Код файла «content.html» :
Главная страница
Главная страница
Содержимое сайта - "Главная страница (content.html)"
Код файла «autor.html» :
Вот такой результат у меня вышел:

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

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

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

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

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

src - путь к открываемой странице

width - ширина плавающего фрейма

height - высота плавающего фрейма

scrolling - полоса прокрутки
- no - никогда не показывать полосу прокрутки
- yes - всегда показывать
- auto - показывать при необходимости

align - выравнивание плавающего фрейма
- left – слева
- right – справа
- top – выше
- bottom – ниже

frameborder - рамка вокруг плавающего фрейма
- 1 - включить рамку
- 0 - выключить рамку

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

Если браузер не поддерживает фреймы, можно вставить текст «УПС! Ваш браузер не поддерживает фреймы. » между тегами .
Это будет выглядеть вот так:
УПС! Ваш браузер не поддерживает фреймы.
Для примера давайте добавим к файлу «content.html» плавающий фрейм:
Главная страница
Главная страница
Содержимое сайта - "Главная страница (content.! Ваш браузер не поддерживает фреймы.
Предыдущая запись
Следующая запись

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

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

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

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" в тег .

Замечание: Добавьте тег