Они используются для разбивки окна браузера на несколько областей

Обновлено: 05.07.2024

Фреймы используются для разбивки окна браузера на несколько независимых частей, каждая из которых представляет собой отдельный HTML-документ. Наиболее частое применение фреймов - это отделение меню от основного информационного наполнения. Хотя фреймы достаточно удобная вещь, использование их не рекомендуется. Следует внимательно следить за тем, чтобы теги, формирующие фреймовую структуру, располагались вне тегов <body> , так как они не относятся к телу документа.

Набор вертикальных фреймов

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

Набор горизонтальных фреймов

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

Теги для работы с фреймами

Тег <frameset> определяет, как разделить окно на фреймы. Каждый frameset определяет набор строк или столбцов. Значения rows/cols указывают величину области экрана, которую будут занимать каждая строка/столбец. Атрибут framespacing - определяет расстояние между фреймами в пикселах.

Тег <frameset> является контейнером для всех остальных тегов фреймов. Между начальным и конечным тэгами кроме элементов <frame> и <noframes> могут находиться другие элементы <frameset> . То есть элемент <frameset> поддерживает вложенные конструкции фреймов.

Тег <frame> определяет, какой документ HTML поместить в каждый фрейм. Тег <frame> имеет атрибут noresize="noresize" , который запрещает изменять размер фрейма пользователю.

В примере ниже задана фреймовая структура с двумя столбцами. Для первого столбца задано 25% ширины окна браузера. Для второго фрейма задано 75% ширины окна браузера. В первый столбец помещается документ HTML "frame_1.htm", а во второй столбец помещается документ HTML "frame_2.htm":

Необходимо учитывать, что браузер может не поддерживать фреймы, в этом случае следует использовать тег < noframes > .

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

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

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

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

Как видно из данного примера, контейнер <frameset> с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один <frameset> , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes> . Все, что находится между тегами <noframes> и </noframes> , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер <noframes> , тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег <frame> . Атрибут src задает документ, который должен отображаться внутри данного фрейма, например: <frame src="https://wm-school.ru/html/frame_top.html">. Если атрибут src отсутствует, отображается пустой фрейм.

Границы или пространство между фреймами

По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента <frameset> , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder. Атрибут frameborder может принимать только два противоположных значения. Если значение атрибута frameborder равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder, а для некоторых браузеров требуется еще добавить атрибут framespacing со значением «0»:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frameborder

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

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

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

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

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

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

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

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

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

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

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

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

Тег <FRAME>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Виды адресов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

13. Для создания Web-страниц используется эта программа:
а) Блокнот +
б) ScanDisk
в) QBasic

14. Для создания Web-страниц используется эта программа:
а) MS FrontPage +
б) Defrag
в) Turbo Pascal

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

16. Для выравнивания текста в документе используется атрибут:
а) src
б) align +
в) valign

17. Тэг может быть:
а) главным
б) основным
в) закрывающим +

18. Тэг может быть:
а) автономным
б) одиночным +
в) вспомогательным

19. Тэг может быть:
а) четким
б) авторитетным
в) парным +

22. Сайт можно создать, воспользовавшись:
а) языком программирования Си
б) языком разметки гипертекста HTML +
в) электронными таблицами

23. Кто занимается проектированием структуры wеb-сайта:
а) wеb-программист
б) системный администратор
в) wеb-дизайнер +

24. При наполнении страниц сайта информационными материалами не следует:
а) избегать слишком длинных текстов
б) использовать пестрый фон +
в) применять краткие названия пунктов

25. Как называется услуга размещения сайта на сервере, постоянно находящемся в сети Интернет:
а) моделинг
б) адаптация
в) хостинг +

26. Как называют схему страницы, на которой представлены элементы, имеющиеся на страницах сайта:
а) хостинг
б) шаблон +
в) браузер

27. Как можно создать сайт:
а) сохранив документ в формате HTML +
б) с помощью электронных таблиц
в) воспользовавшись языком программирования Си

28. Чтобы отличать теги от текста, их заключают в:
а) фигурные скобки
б) квадратные скобки
в) угловые скобки +

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

30. Недостаток бесплатного хостинга:
а) доменное имя
б) коммерческая реклама от поставщика услуги +
в) отсутствие вариантов размещения

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб сайтов под "ключ".

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

Веб-инструмент

Веб-мастерская

Веб-услуги

Веб-графика

Веб-ресурсы

Посмотрите в Google

Подпишитесь на получение самых последних новостей и статей, с уведомлением по E-mail.

Опрос

Фреймы. Разделение окна веб-браузера на несколько областей

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

Разделение окна веб-браузера на несколько областей

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

Создадим веб-страницу с такой структурой. Для этого создадим 5 файлов:

93.html — заголовок веб-страницы;
94.html — панель навигации;
95.html — содержание 1 главы;
96.html — содержание 2 главы;
97.html — HTML-документ описывающий фреймовую структуру.

HTML-документ, содержащий заголовок (93.html)

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Заголовок</title>
</head>

HTML-документ, содержащий панель навигации (94.html)

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Панель навигации</title>
</head>

HTML-документ содержащий основное содержание главы1 (95.html)

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Глава1</title>
</head>

HTML-документ содержащий основное содержание главы2 (96.html)

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Глава2</title>
</head>

HTML-документ , описывающий фреймовую структуру (97.html)

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Пример использования фреймов</title>
</head>

<frameset rows= "100 , *" >
<frame src= "93.html" scrolling= "no" >
<frameset cols= "20% , 80%" >
<frame src= "94.html" >
<frame src= "95.html" name= "charter" >
</frameset>
</frameset>
<noframes>
Ваш веб - браузер не отражает фреймы
</noframes>
</html>

Все созданные файлы сохраним в одной папке. Откроем файл 97.html .

В окне веб-браузера это будет выглядеть ТАК.

Окно разделено на три прямоугольные области. В верхней части окна находится заголовок. В нижней — расположена панель навигации (слева) и основная часть документа (справа). При переходе по ссылкам содержимое основной части меняется, а остальные остаются неизменными. Если теперь посмотреть HTML-код документа ( Вид > Просмотр HTML-кода ), то мы увидим только код структуры веб-страницы, не исходный код каждого из HTML-документов. Иными словами, будет отображен исходный код файла 97.html . Чтобы увидеть исходный код заголовка ( файл 93.html ), необходимо правой кнопкой мыши щелкнуть внутри области, содержащей заголовок. В появившемся контекстном меню нужно выбрать пункт Просмотр HTML-кода. Чтобы посмотреть исходный код файла 94.html , необходимо правой кнопкой мыши щелкнуть по области, содержащей оглавление и т.д.

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

Структура HTML-документа, содержащего фреймы

Структура HTML-документа с фреймами отличается от обычной структуры.

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

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Заголовок страницы</title>
</head>

<frameset rows= "100 , *" >
<frame>
<frameset cols= "20% , 80%" >
<frame>
<frame>
</frameset>
</frameset>
<noframes>
Ваш веб - браузер не отражает фреймы
</noframes>
</html>

Как и в обычном HTML-документе, весь код расположен между тегами <html> и </html> , а в разделе <head> и </he ad> располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами отсутствует раздел <body> , отсутствует содержимое страницы, а присутствуют только теги, служащие для определения фреймовой структуры. Иными словами, документ с фреймами не может содержать раздела <body> и наоборот, обычный HTML-документ не может содержать фреймовую структуру.

Вместо тега <body> применяется парный тег <frameset> , описывающий фреймовую структуру. Каждое отдельное окно описывается тегом <frame> . Если веб-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes> . Рассмотрим эти теги подробно.

Описание фреймовой структуры

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

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

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

Описание отдельных областей

Тег <frame> описывает одиночный фрейм и не имеет закрывающего тега. Он располагается между тегами <frameset> и </frameset> и имеет следующие параметры:

Тег noframes

Если веб-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes> . В противном случае содержимое этих тегов будет проигнорировано.

Ваш веб-браузер не отражает фреймы

Загрузка документа в определенный фрейм

<a href = "filel.html" target = "_blank">Текст ссылки</a>

<a href = "filel.html" target = "_self">Текст ссылки</a>

<a href = "filel.html" target = "_top">Текст ссылки</a>

<a href = "filel.html" target = "_parent">Текст ссылки</a>

Если нужно загрузить документ во фрейм с именем charter , то ссылка будет такой:

<a href = "filel.html" target = "charter">Текст ссылки</a>

Тег iframe. Добавление фрейма в обычный документ

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

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Пример применения плавающих фреймов</title>
</head>

В окне веб-браузера это будет выглядеть ТАК.

<html>
<head>
<meta http - equiv= "Content - Type" content= "text/html; charset=windows - 1251" >
<title>Пример применения плавающих фреймов</title>
</head>

<body>
<h1 align= "center" >Название документа</h1>
<br>
< if rame src= "../html11.php" name= "chapter" width= "900" height= "300" align= "right" scrolling= "auto" >
Ваш браузер не отображает фреймы
</ if rame>
<h2>Оглавление</h2>
<ul>
<li><a href= "../html10.php" target= "chapter" >Таблицы</a></li>
<li><a href= "../html11.php" target= "chapter" >Разметка страницы</a></li>
</ul>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

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

Очень часто тег <iframe> используется в ходе сетей обмена баннерами и коде рекламных сетей. В других целях использование тега очень ограниченно из-за отсутствия поддержки большинством веб-браузеров.

Читайте также: