Как вставить в HTML iframe: пример использования. Как создать страницу с фреймами Создание фреймов для веб страниц в html
Всем доброго времени суток! С Вами Бернацкий Андрей.
Прежде, чем перейти непосредственно к статье, я Вам хочу дать ссылку на видео-версию данной темы:
В этом выпуске мы поговорим о фреймах в HTML . Фреймы по своей сути очень похожи на таблицы, но в отличие от таблиц, каждый фрейм независим и в каждом из них может быть отдельная web страница со своим адресом.
На рисунке видим достаточно распространенную структуру сайта. Ее можно представить в виде таблицы, а можно все это сделать при помощи фреймов. В верхний фрейм можно загрузить страницу с логотипом и меню, в левый – страницу с навигацией по сайту, в центральном фрейме будет страница с основным содержимым сайта, в правый фрейм загрузим страницу с рекламными баннерами, а в нижний – страницу с контактной информацией. Вот вкратце что такое фреймы.
Теперь рассмотрим, как это все можно осуществить.
Особенностью документа, содержащего фреймы, является то, что он не содержит контейнера BODY . Вместо него используется контейнер FRAMESET . Общий синтаксис фреймов выглядит следующим образом:
XHTML
…
…
|
В контейнере располагаются теги , которые определяют содержимое фреймов.
У тега есть два параметра:
rows = число – количество строк (горизонтальных подокон).
cols = число – количество столбцов (вертикальных подокон).
Вообще говоря, значение параметров rows и cols задаются не совсем числами, а перечислением чисел через запятую. Сколько будет идти чисел, столько строк или столбцов и будет, а числа определяют размер фрейма. Главное, чтоб сумма этих чисел составляла всю ширину экрана.
Давайте, разберем это на примере, и все будет понятно. Сейчас создадим фреймовый документ следующего вида:
Код, который определит нам такую структуру фрейма, будет выглядеть так:
XHTML
В первой строке приведенного кода открывается контейнер frameset, в параметре cols указано, что будет три вложенных фрейма. У первого ширина будет 30% от всей ширины экрана. У третьего ширина будет тоже 30% от всей ширины экрана. А второй фрейм займет все оставшееся место. Да символ "*" (звездочка) означает занять все оставшееся место на экране.
Кстати, рассмотрим, каким образом фреймам можно задавать размеры в параметрах cols и rows:
Можно задать размер, поставив просто число. Это число, будет определять размер фрейма в пикселях.
Можно задать значение ширины в процентах. Причем, если сумма процентов всех колонок будет превышать 100%, то все фреймы пропорционально уменьшаться, что бы общая сумма было равна 100%. Аналогично ситуация будет, если сумма процентов всех колонок будет менее 100%, то все фреймы пропорционально увеличатся, что бы общая сумма было равна 100%.
Можно задавать размер фрейма символом “*” (звездочка). Это означает, что фрейм должен занять все оставшееся место. Если будет указано, например , то есть две звездочки, то все оставшееся место будет поровну разделено между этими двумя фреймами (в данном случае по 40%).
Можно комбинировать варианты задания размеров фреймов в HTML. Например:
XHTML
.Если заменить в первой строке кода параметр cols на rows, то мы получим такой же фреймовый документ, состоящий из трех фреймов. Только разбиение на фреймы будет идти по вертикали.
XHTML
|
Параметры rows и cols одновременно использовать нельзя. Это приводит к ошибкам, и неверному отображению содержимого.
У всех сейчас возник вопрос о том, как создать такую структуру, о которой я говорил в самом начале статьи. К этому вернемся чуть позже, а пока обратимся к тому, что у нас сейчас происходит в браузере.
В браузере мы видим три страницы, каждая из которых находится в своем фрейме.
При этом мы, наведя курсор мыши к границам фреймов, можем изменять размеры фреймов, так же видны полосы прокрутки и границы между фреймами. Это не всегда нужно, даже скорее совсем не нужно. А всем этим можно управлять благодаря параметрам тегов frame и frameset .
Параметры тегов frame и frameset :
src ="url" – обязательный параметр. Указывает адрес страницы, которая будет отображена внутри фрейма. Используется только для frame.
noresize – отменяет возможность изменения размеров. Используется только для frame .
scrolling="yes/no/auto" – определяет наличие полос прокрутки. Значение yes – указывает на присутствие полос прокрутки. Значение no – указывает, что полос прокрутки не будет. При значение auto – браузер сам определяет, будут ли полоски прокрутки. Используется только для frame .
name="frame-name" – имя фрейма. Данный параметр используется для взаимодействия между фреймами. Подробнее о нем поговорим чуть позже. Используется только для frame .
border=число – толщина границ между фреймами. Если принимает значение 0, то границы между фреймами не отображаются. Используется только для frameset.
framespacing="число" – расстояние между фреймами. Используется только для frameset.
Используя эти параметры, можно получить страницу, у которой не отображаются границы между фреймами, нет возможности изменять размеры фреймов и у двух последних фреймов запретим скроллинг. Код такой страницы выглядит следующим образом:
XHTML
|
Есть еще несколько параметров, но они не однозначно работают, поэтому я считаю целесообразным их даже не упоминать в выпуске.
Пожалуй, с параметрами все. Рассмотрели на примере как их применять.
Теперь создадим фреймовую структуру, о которой я говорил в самом начале выпуска.
Для этого, создаем структуру из трех фреймов с разбиением по вертикали.
XHTML
Соответственно, вместо тега
, мы должны вставить еще один контейнер
XHTML
"../урок3/Untitled-1.html" />
|
После этого вставляем наш третий фрейм с контактной информацией и закрываем главный контейнер
XHTML
|
Полный код данной страницы приведен ниже:
XHTML
"../урок3/Untitled-1.html" />
|
Конечно, адреса для фреймов я взял из предыдущих выпусков рассылки, и никакого меню, логотипа, навигации и так далее мы тут не увидели. Но структуру такую как нужно мы получили. Но если создать реальные нужные страницы, то можно получить красивую структуру.
Что мы получили в итоге. Чем это удобно или неудобно (решать вам), но при фреймовой структуре, всегда все наши фреймы остаются на странице. Независимо от величины содержимого у нас всегда будет виден логотип и меню сайта, нижняя часть сайта контактной информацией, блок навигации и баннеры. Вот, в общем-то, суть и смысл фреймов.
Существует возможность взаимодействия между фреймами. Можно сделать так, чтобы нажав на ссылку в одном фрейме, информация появилась в другом. Сейчас мы посмотрим, как это делается.
Создадим фрейм следующего вида:
В левом фрейме, будут располагаться наши ссылки. А в правом – страницы на которые ведут эти ссылки.
Создаем такой фрейм:
XHTML
Наверняка Вы уже не один раз слышали о таком понятие, как фреймы. Прочитать о них можно в любом html-учебнике, а также на ресурсах о создании сайтов . Изучив множество примеров и описаний, я решил рассказать все о фреймах своими словами в очень простой форме. О плюсах, о минусах и о будущем фреймов будет сказано в самом низу этой страницы. Итак, что же такое фреймы в html?
Что такое Фреймы в html
Фрейм (англ. frame) - некоторая подключаемая независимая область на веб-странице.
Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.
Отройте помощь (help) в любой программе (это может быть блокнот, какая-то программа, браузер и т.п.). Практически всегда Вы увидите хелп состоящий из двух частей (слева навигация, справа содержимое). Левая и правая части как раз и являются отдельными фреймами. Ниже представлен скриншот сделанный из хелпа самого обыкновенного блокнота Windows:
Рис 1. Использования фреймы на примере хелпа блокнота
То что Вы видите, является веб-страничкой состоящий из двух отдельных независимых фреймов. Приведем примерный html код такого фрейма из хелпа.
Пример с фреймами №1 (делаем помощь)
В каркасе выше рассмотренный хелп будет выглядеть следующим образом:
Рис 2. Каркас использования фреймов для примера №1
Разбиение страницы на области с помощью фреймов очень напоминает табличную верстку html (см. HTML тег table). Примерный код такой страницы может выглядеть следующим образом:
Пояснение к примеру №1Пример №1 html-страницы с фреймами
Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел
, заголовокПоследний совсем необязательный тег это
Кстати, обратите внимание, что для тега не нужен закрывающий тег.
Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать простую html-страницу состоящую из 4 фреймов. Это будет пример №2.
Пример с 4 фреймами №2
Каркас для примера 2:
Рис 3. Каркас использования фреймов для примера №2
Код исходной html-страницы с фреймом будет следующий:
Пример №2 html-страницы с фреймами Ваш браузер не поддерживает отображение фреймов
Код файла top.html
Файл top.html - шапка сайта Пример №2
А здесь могло быть лого и не только:)
Код файла menu.html
Файл menu.html - меню сайта
Код файла content.html
Файл content.html - контент сайта Главная страница
Содержимое сайта. Сейчас открыт файл content.html
Это исходное состояние нашего фрейма. Назовем этот файл "Главной страницей"
Код файла about-site.html
Файл about-site.html - Страница о сайте О сайте
Страница о сайте. Сейчас открыт файл about-site.html
Код файла about-autor.html
Файл about-autor.html - об авторе Об авторе
Страница об авторе. Сейчас открыт файл about-autor.html
Код файла footer.html
Пояснение к примеру №2Файл footer.html - о сайте Футер сайта. Сейчас открыт файл footer.html
Первоначально вся страница разбивается на три области по горизонтали в пропорции 3:14:3. За это отвечает атрибут rows="15%,70%,15%" . Первый фрейм в нашем примере - шапка (мы её обозвали top.html ), на нее отводится 15% места по высоте. Далее идет большой фрейм занимающий 70% по высоте. Мы его разбиваем на две части с помощью cols="25%,75%" в пропорции 1:3. Слева будет фрейм menu.html , справа content.html . Мы специально дали имя второму фрейму name="main" с целью возможности переключения страниц. Обратите внимание, что в файле menu.html к каждой ссылки приписан атрибут target="main" , что позволяет при нажатии на эту ссылку загружать элементы в область с именем main. Внизу сайта расположился последний фрейм footer.html .
Если вы реализуете пример №2, то должны получить такую html-страницу в исходном состоянии:
Рис 4. Пример №2 - исходное состояние
При переходе на страницу о сайте страница будет выглядеть следующим образом:
Рис 5. Пример №2 - второе состояние
Рис 6. Пример №2 - третье состояние
Тег
Тег
Необязательные атрибуты этого тега являются width="ширина" и height="высота" , а обязательный атрибут src="адрес фрейма" .
Атрибуты и свойства тега
1. Атрибут COLS="Параметры"
Задает количество разбиений страницы по вертикали.
2. Атрибут ROWS="Параметры"
Задает количество разбиений страницы по горизонтали.
Теперь рассмотрим каким образом можно задать параметры разбиение.
а) С помощью числа , которому будет соответствовать количество пикселей. Например, cols = "100,100,300" задает разбиение страницы на три области, каждая из которых будет по ширине: 100 пикселей, 100 пикселей и 300 пикселей соответственно.
б) С помощью процентов от общей ширины/высоты. В рассмотренных выше примерах мы использовали именно процентное разбиение, поэтому приводить пример мне кажется бессмысленно.
в) С помощью * (звездочки). Например, cols = "2*,3*,100" задает первые две области в соотношение 2:3, а третья область будет шириной в 100 пикселей.
Все три способа можно совмещать. Например, cols="2*,100,15%,4*" .
3. Атрибут frameborder="{yes|no}"
Определяет наличие рамки у фрейма. Если ответ yes, то следующий четвертый атрибут border имеет силу.
4. Атрибут border="параметр"
В пикселях border задает толщину обводки области фрейма. Например, frameborder = "2"
задает область с выделенным контуром в 2 пикселя.
5. Атрибут bordercolor="цвет"
Определяет цвет рамки, если она есть. Цвет можно задать как словами, так и кодом (см. цветовая палитра html).
Примечание: обратите внимание, что тегу
Атрибуты и свойства тега
1. Атрибут src="адрес элемента"
В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.
2. Атрибут marginwidth="число"
Задает отступ внутри фрейма от границ в пикселях по ширине. Например, marginwidth="10"
задаст отступ содержимого слева и справа от границы фрейма.
3. Атрибут marginhight="число"
Аналогичен второму с той лишь разницей, что задает отступ по высоте.
4. Атрибут scrolling="{yes|no|auto}"
Задает возможность прокрутки фрейма, в случае если он не смог уместиться в рамки отведенной ему области. По умолчанию стоит значение auto (означает, что при необходимости создавать скролл).
5. Атрибут noresize
Если установлен этот атрибут, то пользователю запрещается самостоятельно менять границы фрейма. По умолчанию этот атрибут не стоит и пользователь может менять границы как хочет.
5. Атрибут name="название"
С помощью этого атрибута можно давать фрейму имя. Это нужно для того, чтобы к этому фрейму могли обращаться другие фреймы. В примере №2 как раз рассматривается такой случай.
Примечание:
Имя не должно начинаться с нижнего подчеркивания "_".
6. Атрибуты frameborder, border и bordercolor
Эти три атрибута такие же как и у frameset (см. атрибуты frameset выше).
Преимущества и недостатки фреймов
Плюсы фреймов
- Возможность отображения в одном окне независимо несколько страниц (пример 1 и 2 выше);
- Возможность переключать содержимое страницы не перезагружая страницу (меняется только одна область экрана);
- Возможность построить гибко структуру сайта (шапка, меню, футер и т.д. - вся статическая информация хранится отдельно в файлах, а это позволяет быстро отредактировать часть сайта);
- Пользователь может сам изменять размер области просмотра, в случае если не установлена опция noresize;
Минусы фреймов
- Поисковые системы плохо индексируют сайты на фреймах, поскольку не в состоянии интерпретировать подгружаемые файлы во фреймах. Поисковая машина различает страницы по их адресу (URL), а у фреймов несмотря на разные состояния, адрес страницы не изменяется. Это противоречит правилам поисковой машины, а значит не факт, что поисковик сможет проиндексировать сайт.
- Невозможно сохранить в закладки сайт на фреймах, т.к. URL страницы будет одинаковый. Таким образом, можно лишь сохранить исходное состояние фрейма.
- Не все браузеры поддерживают фреймы.
Будущее фреймов:
От фреймов уже давно стали отказываться многие вебмастеры. Это связано с трудностями продвижения в поисковиках. Сейчас все переходят на Ajax, как более динамичный и современный способ отображения информации на одной странице сайта.
Уважаемый читатель, мы рассмотрели теги html документа касающиеся фреймов. Несмотря на сомнительное будущее этого направления, знать про фреймы должен каждый вебмастер.
Начнем с фреймовой структуры. В чем ее суть? У нас есть возможность в документе, который мы загружаем в браузер, организовать специальные области оконного типа. В эти области можно загружать другие отдельные документы (веб-страницы).
Зачем это нужно? Поскольку документы загружены в свои отдельные области, то ведут они себя независимо. Т.е в одном документе можно что-то делать, при этом другие документы неизменны.
Где можо встретить такие фреймовые структуры? Это файлы помощи, справки (с расширением.chm).
Приведу простой пример документа с фреймами:
Элемент frameset . Его задача - охватить область просмотра и разделить ее на отдельные области. Т.е. дать указание браузеру, в каком соотношении и как (горизонтально или вертикально) мы делим эти области.
Элемент frame – описывает каждую такую отдельную область. Тег одиночный. Он занимает те размеры, которые указаны во frameset.
Элемент noframes - отображается, если браузер не поддерживает фреймы.
Обратите внимание, что элемента body нет. Вместо него используется элемент frameset. Это и есть одна из причин, по которой фреймы уже не применяются на сайтах.
Атрибуты элемента frameset
- cols - вертикальное деление страницы на области просмотра.
- rows - горизонтальное деление страницы на области просмотра.
Элемент frame
Этот элемент описывает отдельную оконную область. В нее можно загрузить любой документ - с помощью атрибута src. Примеры:
Атрибут scrolling - прокрутка (по умолчанию auto). Если документ превышает размеры области просмотра этого фрейма, значит появляется прокрутка. Если документ помещается полностью во врейм, значит прокрутки нет. Прокрутку можно запрещать, но лучше оставить значение auto.
Одиночный атрибут noresize - запрещает изменять размер фрейма в браузере. По умолчанию это разрешено.
Атрибут frameborder – рамка у фрейма. Значение ‘1’ - рисовать, значение ‘0’ - не рисовать. Допустимы только эти два значения. По умолчанию рамка рисуется.
Атрибут marginwidth – указывает расстояние, которое контент в данной фрейме будет отступать по горизонтали от рамок этого фрейма.
Атрибут marginheight – отступ по вертикали от контента до границ фрейма.
Встроенный фрейм iframe
Элемент iframe (‘строчное окно’). Этот элемент парный (есть отрывающий и закрывающий тег). Этот элемент служит для того же - чтобы в документе организовать оконный элемент.
В чем его отличие от старых фреймов? Он самодостаточен, ему не надо никаких дополнительных контейнеров. И он может стоять в любых документах, так где есть элемент body.
Элемент iframe - это строчный элемент с замещаемым контентом. Т.е. формируется область строчного типа с любыми абстрактными размерами, и в эту область загружается содержание какого-то внешнего документа (файл html).
Iframe обладает такими же атрибутами, что и картинки (т.к. они одного типа): name, width, height, src, frameborder, scrolling, hspace, vspace, marginwidth, marginheight.
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами
и
, а в контейнере
располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега
применяется парный тег
В следующем примере приведена структура 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 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.
Как видно из данного примера, контейнер
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег
. Атрибут src
задает документ, который должен отображаться внутри данного фрейма, например: . Если атрибут src
отсутствует, отображается пустой фрейм.
Границы или пространство между фреймами
По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder
. Атрибут frameborder
может принимать только два противоположных значения. Если значение атрибута frameborder
равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder
различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder
, а для некоторых браузеров требуется еще добавить атрибут framespacing
со значением «0»:
В следующем примере убираем границу между фреймами:
Пример: Убираем границу между фреймами
- Попробуй сам »
frame_left | frame_right |
Если вы удалите границу между фреймами, посетители не смогут изменять размер фрейма в браузере. Вы можете также не допустить изменения размера фрейма, сохранив границы, используя атрибут noresize :
С помощью атрибута bordercolor
можно изменить цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.
Ниже приведен пример html-страницы, которая содержит описанные выше атрибуты управления границей фрейма: цвет границы — красный, изменять размер верхнего фрейма нельзя:
Пример: Управление границей фреймов
- Попробуй сам »
frame_top | |
frame_left | frame_right |
Если вы хотите расположить страницу, отображаемую внутри фрейма, ближе к его границам, или, наоборот, отодвинуть дальше, измените атрибуты marginheight и marginwidth тэга . Атрибут marginheight определяет отступ между содержимым фрейма и его верхней и нижней границами. Синтаксис:
Атрибут marginwidth определяет отступ между содержимым фрейма и его правой и левой границами. Синтаксис:
Данная строка html, например, располагает отображаемую страницу вплотную к границе фрейма:
Если страница отображает нежелательную для вас полосу прокрутки, вы можете решить эту проблему, указав атрибут scrolling ="no" в тэге . Но учтите, что если фрейм будет недостаточно большим, чтобы отобразить все содержимое страницы, то у посетителя не будет никакой возможности прокрутить отображаемую страницу.
Ссылки внутри фреймов
Переход по ссылке в обычном HTML-документе осуществляется следующим образом: нажимаете ссылку и текущий документ заменяется новым в текущем либо в новом окне браузера. При использовании фреймов схема загрузки html-документов отличается от обычной и главное отличие — это возможность загружать html-документ в один фрейм из другого фрейма.
Для загрузки документа в определенный фрейм используется атрибут target
тега
. В качестве значения атрибута target
используется имя фрейма, в который будет загружаться документ, указанный атрибутом name
тега
. Стоит также отметить, что имя фрейма должно начинаться либо с цифры либо с латинской буквы. Следующие имена используются в качестве зарезервированных:
Для внешних ссылок следует задавать в качестве значения для атрибута target либо _top , либо _blank , для того, чтобы сторонние проекты отображались не в ваших фреймах, а занимали полное окно браузера.
В следующем примере изображен HTML-документ, в правый фрейм которого загружается страница по ссылке, помещенной в верхний фрейм. Ссылка на документ, который откроется в правом фрейме:
Правому фрейму присваивается имя frame_right :
Чтобы документ загружался в указанный фрейм, используется конструкция target="frame_right" , как показано в примере:
Пример: Ссылка на другой фрейм
- Попробуй сам »
Ваш браузер не отображает фреймы
Плавающие фреймы
Элемент
(сокращение английского термина «плавающий фрейм») позволяет встроить в любое место веб-страницы отдельный HTML-документ или другой ресурс.
Содержимым плавающего (встроенного) фрейма может быть любая НТМL-страница, как с вашего ресурса, так и с другого веб-сайта. Как вы уже поняли, плавающие фреймы создаются с помощью элемента
, который в отличие от тега
вставляется не между тегами
В элементе можно использовать те же атрибуты, что и для фрейма , за исключением атрибута 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 | определяет выравнивание фрейма |
В следующем примере размеры плавающего фрейма заданы в пикселях, однако вы можете задавать их и в %:
Прежде чем использовать фреймы на практике, не мешало бы узнать, что это такое, а также чем выгодно использование фреймов для организации информации на страницах сайта по сравнению с теми же таблицами.
Во всех примерах ранее в книге рассматривалось выравнивание текста, графики, таблицы и прочего наполнения HTML?документов в окне браузера. При этом в нем могло отображаться содержимое только одного документа. Использование фреймов позволяет разбить окно браузера на несколько частей, в которых могут отображаться разные HTML?документы. Например, так, как показано на рис. 8.1.
Рис. 8.1. Три документа в одном окне
При этом содержимое каждого документа выравнивается относительно своего собственного окна – фрейма. Теперь представьте себе, что в левом верхнем фрейме находятся ссылки на ресурсы сайта, в левом нижнем – какая?то рекламная или другая информация, в правом большом фрейме помещается текст. Допустим, при навигации по сайту изменяется только текст, отображаемый в правом фрейме. В этом случае использование фреймов позволяет следующее.
Прокручивать содержимое одних фреймов независимо от содержимого других.
Осуществлять переход между страницами сайта, загружая содержимое только в правый фрейм. Это экономит время пользователя, так как статичное содержимое сайта загружается с сервера только один раз.
Теперь, после знакомства с фреймами, можно рассмотреть, как выполняются создание и настройка сайтов с использованием фреймов.
8.2. Создание набора фреймов
Даже самый простой сайт, показанный на рис. 8.1, состоит из четырех HTML?документов. Содержимое трех из них показывается в окне браузера. Четвертый документ, который и нужно открывать браузером, содержит описания фреймов, на которые разбивается окно, а также включает в себя указания браузеру, откуда загружать страницы в созданные фреймы. Содержимое HTML?документа приведено в примере 8.1.
Пример 8.1. Файл с описанием фреймовСайт с фреймами
Здесь можно увидеть два новых HTML?элемента: FRAMESET и FRAME. Первый из них используется для разбиения окна браузера или окна родительского фрейма на отдельные фреймы. Элемент FRAMESET задается парными тегами
Cols – список значений ширины создаваемых фреймов (могут использоваться как абсолютные значения в пикселах, так и процентные, а также пропорциональные, см. пример 8.1);
Rows – список значений высоты создаваемых фреймов (значения аналогичны значениям атрибута cols).
Можно задавать значения только одного из атрибутов. При этом если задано значение только атрибута col, то созданные фреймы будут занимать всю высоту окна браузера. Если задано значение только атрибута rows, то созданные фреймы будут занимать всю ширину окна браузера. Если заданы значения обоих атрибутов, то фреймы создаются слева направо и сверху вниз.
Между тегами
Name – задает имя фрейма, позволяя использовать его в качестве целевого фрейма в гиперссылках;
Src – URI документа, содержимое которого отображается в окне фрейма;
Noresize – булев атрибут, блокирует возможность изменения размера окна фрейма;
Scrolling – позволяет показать или убрать полосы прокрутки в окне фрейма, может принимать значения yes (показать полосы прокрутки), no (не отображать полосы прокрутки) или auto (используется по умолчанию: показать полосы прокрутки только в том случае, если содержимое не умещается в окне фрейма);
Frameborder – указывает, должен ли браузер показывать рамку окна фрейма, может принимать значения 1 (рамка показывается, как на рис. 8.1, используется по умолчанию) или 0 (рамка не показывается);
Marginheight – задает расстояние между границами и содержимым фрейма по вертикали.
Ранее было затронуто понятие вложенных фреймов. Теперь пришло время рассмотреть вложение фреймов подробно. В HTML фреймы могут вкладываться друг в друга любое количество раз. Это находит применение тогда, когда нужно разбить окно браузера, например так, как сделано на рис. 8.1. Изучите внимательно следующий фрагмент.
Здесь создается внешний набор из двух фреймов, занимающих всю высоту окна браузера. При этом в левом фрейме внешнего набора создается еще один набор фреймов. Нужно заметить, что блок
Существует еще одно примечательное отличие документа, описывающего набор фреймов, – в нем нет тела (элемента BODY). В таком документе не допускается наличие содержимого, кроме определения набора фреймов.
8.3. Новые возможности гиперссылок
Практически в самом начале этой главы было сказано, что с помощью фреймов можно организовать навигацию по сайту таким образом, что загружаться с сервера будет только необходимая информация, а все статичные части (например, список ссылок сайта, название сайта и т. д.) не будут подвергаться изменениям или перезагрузке с сервера. Такая возможность достигается указанием целевого фрейма для гиперссылок, при переходе по которым необходимо изменять только содержимое одного из фреймов.
Целевой фрейм отдельных гиперссылок
Для указания целевого фрейма каждой гиперссылки, то есть фрейма, в котором будет показано содержимое открываемого по ссылке HTML?документа, используется атрибут target. Значением этого атрибута может быть либо имя нужного фрейма (значений атрибута name этого фрейма), либо одно из следующих предопределенных строковых значений:
Blank – открыть документ в новом окне;
Self – открыть документ в том же окне, где находится гиперссылка;
Parent – открыть документ в окне родительского фрейма (аналогично _self, если фрейм, в котором находится гиперссылка, не имеет родителя);
Top – заменить содержимое окна браузера содержимым открываемого документа, отменяя все созданные ранее фреймы.
Атрибут target поддерживается для всех HTML?элементов, позволяющих создавать гиперссылки: A, LINK, AREA.
Теперь для закрепления полученных знаний переделаем документ из примера 7.11 предыдущей главы, поместив ссылки, название и текст сайта в отдельные фреймы.
Документ с описанием набора фреймов будет иметь имя index.html. Его содержимое приведено в примере 8.2.
Пример 8.2. Файл с описанием набора фреймовНовый сайт с фреймами marginheight = 0 frameborder = 0>
В приведенном выше примере имя назначено только одному фрейму (правому нижнему). Именно в этом фрейме и будет отображаться содержимое документов.
В файле links.html находится документ с гиперссылками на файлы примеров (в него также добавлена ссылка на стартовую страницу). Предполагается, что файлы примеров расположены в папке Examples. Ниже приводится содержимое файла links.html (обратите внимание на задание значения атрибута target гиперссылок) (пример 8.3).
Пример 8.3. Файл с гиперссылками
В файле title.html помещен заголовок сайта (вместе с гипотетическим логотипом), который показывается в соответствующем фрейме (пример 8.4).
Пример 8.4. Файл для фрейма с заголовком сайтаЗаголовок сайта
7. Таблицы
Как можно увидеть из приведенного текста HTML?документа (см. пример 8.4), для достижения приемлемого расположения рисунка?логотипа пришлось прибегнуть к использованию таблицы.
В рассматриваемом примере сайта используется еще один файл – start.html. В этом файле помещена стартовая страница сайта. Содержимое этого файла может быть любым. При написании примера в файл start.html была помещена часть текста гл. 7. Из?за экономии места книги содержимое этого файла не приводится.
После того как все файлы сайта созданы, можно полюбоваться результатом (рис. 8.2).
Рис. 8.2. Сайт, созданный с использованием фреймов
Целевой фрейм по умолчанию
Напоследок рассмотрим, как можно уменьшить объем текста HTML?документа при использовании для многих гиперссылок одного и того же фрейма в качестве целевого. Еще раз взгляните на текст примера 8.3. Для каждой гиперссылки из этого примера задано одно и то же значение атрибута target. Чтобы избавиться от необходимости много раз задавать его, можно назначить целевой фрейм по умолчанию.
Для задания целевого фрейма по умолчанию используется HTML?элемент BASE (одиночный тег
). Атрибуту target этого элемента присваивается имя фрейма, используемого по умолчанию. Если элемент BASE используется, то он должен быть помещен в заголовке (HEAD) HTML?документа. С учетом сказанного пример 8.3 можно переписать следующим образом (пример 8.5).
Пример 8.5. Использование целевого фрейма по умолчанию
8.4. Элемент NOFRAMES
Фреймы являются весьма привлекательным средством оформления сайтов, это должно было стать очевидным из приведенных ранее примеров. Однако фреймы в HTML появились не сразу, да и долгое время они не были стандартизированы, поэтому до сих пор обработка и представление документов с фреймами различными браузерами могут существенно отличаться. Кроме того, у достаточно большого количества пользователей до сих пор могут стоять старые версии браузеров, не поддерживающие фреймов вообще.
Если важно, чтобы при просмотре сайта, использующего фреймы, пользователь хоть что?то увидел, то следует использовать HTML?элемент NOFRAMES. Этот элемент задается парными тегами
и . Он помещается в один файл с описанием набора фреймов.Между тегами элемента NOFRAMES помещается HTML?текст, который браузер показывает в том случае, если он не поддерживает фреймы (или если пользователь отключил в браузере поддержку фреймов). Если браузер в состоянии показать фреймы, то текст между тегами элемента NOFRAMES игнорируется. Текст между тегами
и .и можно форматировать точно так же, как если бы он находился между тегамиОчевидно, что с помощью элемента NOFRAMES можно создавать гораздо лучше переносимые сайты, особенно если позаботиться о том, чтобы при невозможности отображения фреймов никакая важная информация не была потеряна. Для рассмотренного ранее сайта можно создать версию, не использующую фреймы (выполненную, например, с использованием только таблиц), а внутри элемента NOFRAMES поместить информационное сообщение и ссылку на эту версию сайта (пример 8.6).
Пример 8.6. Использование элемента NOFRAMESНовый сайт с фреймами marginheight = 0 frameborder = 0>
Внимание! Ваш браузер не поддерживает фреймы. Для открытия версии сайта, не использующей фреймы, жмите
сюда.
8.5. Плавающие фреймы
Кроме обычных фреймов, рассмотренных ранее, HTML допускает использование так называемых плавающих фреймов. Плавающие фреймы выглядят точно так же, как и внедренные HTML?документы: показываются браузером в окне, расположенном прямо в тексте (рис. 8.3).
Рис. 8.3. Внешний вид плавающего фрейма
Для создания плавающих фреймов используется HTML?элемент IFRAME (задается при помощи парных тегов ). Настройка плавающего фрейма осуществляется при помощи следующих атрибутов:
Src – URI HTML?документа, отображаемого в окне фрейма;
Frameborder – режим отображения границы фрейма, может принимать значения 0 (не показывать границу) или 1 (показывать границу);
Scrolling – режим отображения полос прокрутки содержимого фрейма, может принимать значения no (не показывать полосы прокрутки), yes (показывать полосы прокрутки) или auto (используется по умолчанию, показывать полосы прокрутки, только если содержимое не помещается);
Marginwidth – задает расстояние между границами фрейма и его содержимым по горизонтали (в пикселах);
Marginheight – задает расстояние между границами и содержимым фрейма по вертикали;
Align – задает положение плавающего фрейма в тексте, может принимать значения left, right и center;
Width – задает ширину окна плавающего фрейма, значение может быть как абсолютным (в пикселах), так и процентным;
Height – задает высоту окна плавающего фрейма.
Текст между тегами отображается браузером только в случае невозможности отобразить сам плавающий фрейм.
В качестве примера использования элемента IFRAME ниже приведен текст HTML?документа, внешний вид которого показан на рис. 8.3 (пример 8.7).
Пример 8.7. Документ с плавающим фреймомПример страницы с плавающим фреймом Плавающий фрейм выглядит следующим образом:
Ваш браузер не поддерживает "плавающие" фреймы. Для просмотра содержимого документа start.html нажмите
8.6. Замена фреймов внедренными HTML-документами
Если по каким?то причинам у вас нет возможности использовать фреймы, но все же хочется сохранить интерфейс сайта в том же виде, каким он был бы при использовании фреймов, можно прибегнуть к использованию HTML?элемента OBJECT. Взгляните на текст примера 8.8. Здесь для создания аналога плавающего фрейма, показанного на рис. 8.3, используется элемент OBJECT.
Пример 8.8. Замена плавающего фрейма элементомЗамена плавающего фрейма внедренным HTML-документом Внедренный HTML-документ выглядит так:
Ваш браузер не поддерживает внедрение объектов. Для просмотра содержимого документа start.html нажмите
Результат внедрения в HTML?документ еще одного HTML?документа приведен на рис. 8.4. Как видите, внедрение объекта по виду практически не отличается от добавления плавающего фрейма.
Рис. 8.4. Внедренный документ в роли плавающего фрейма
Правда, есть в рассматриваемой здесь замене один подвох. Средствами только лишь HTML не получится использовать область внедренного документа как целевой фрейм для гиперссылок, так что область применения описанного здесь решения гораздо уже, чем область возможного применения фреймов.
Материалы по теме:
- Автомобильный усилитель – экономные варианты создания звука в салоне Как собрать схему усилителя звука
- Высококачественный усилитель без ООС: The End Millennium Двухкаскадный усилитель на транзисторах
- Стримы World Of Tanks Aces gg l первое танковое
- Лучшие средние танки в World of Tanks
- Электроника шаг за шагом скачать fb2
- Делается седло в майнкрафте 1
- Binds (бинды) для быстрой покупки оружия в cs:go
Подписаться на еженедельную рассылку sbsko.ru