Итак, фреймы.. для чего они нужны и какую пользу в себе несут? Об этом я и постараюсь рассказать в этой главе, ну и естественно о том, как их внедрять и работать с ними..
Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько HTML документов.. так вот фреймы как раз таки и созданы для того чтобы определить рабочие области для каждого документа. Кроме того, фреймы - это хороший инструмент, с помощью которого можно заниматься версткой страницы, они служат достойной "альтернативой" табличному способу верстки страницы.. в кавычки взял слово "альтернатива" потому, что это совершенно иной способ построения сайта со своими достоинствами и недостатками и его достаточно трудно сопоставлять с доселе привычным построением сайта.. но обо всем по порядку..
Ну что, начнем? Допустим нам необходимо в одном окне браузера открыть сразу три HTML документа и расположить их к примеру вот таким способом:
Что нам для этого нужно? Для начала естественно нам необходимо создать три отдельных html документа которые мы собственно и будем открывать в одном окне.. Пусть первый документ будет нести в себе графическое изображение и будет выполнять роль логотипа назовём его logotype.html , вторым документом будет некое содержание.. назовём menu.html , ну и третьим документ с кучей текста. text.html. Конечно Вы можете придумать свои названия, как впрочем и содержание документов, но пока лучше всё же копируйте мои.. так будет удобнее и мне и Вам.
Итак, есть три файла logotype.html, menu.html и text.html.. которые нам необходимо разместить под одной крышей, а крыши у нас как раз таки ещё пока и нет..
Пишем "крышу", главный документ к которому будем подключать наши файлы. Раз он будет главным, присваиваем ему имя index.html.
фреймы
Вот привычная для нас структура документа которую мы пережевали ещё в самом начале нашего обучения.. Фреймы ломают сложившиеся стереотипы! Структура фрейм документа имеет вот такой вид:
фреймы
Отсутствие тега
компенсирует новый тег - установить фрейм или набор фреймов.. с этим товарищем мы собственно и будем работать дальше.
Тег имеет атрибуты rows
и cols
- эти атрибуты указывают браузеру на то, как следует размещать фреймы в окне браузера
rows
- горизонтально
cols
- вертикально
В нашем случае нам необходимо горизонтальное размещение фреймов.. значит пишем так:
фреймы
Проценты после знака равенства - это не что иное, как размеры наших окошек- фреймов в одном большом окне браузера, у нас предполагается размещение трёх окон - следовательно и значений через запятую тоже три. Вспомните как мы задавали размеры ячеек для таблицы, здесь тот же принцип.. Как и в случае с ячейками таблицы, размеры фреймов можно указывать в процентах от общей площади и в пикселях.
Вот несколько примеров написания:
- такая запись говорит о том, что будет три горизонтальных окошка где последнее займет 70% площади окна браузера, а первые два по 15%.
- здесь три окна расположены вертикально ширина которых указана в пикселях.
- такая запись значит, что первое и третье окно будут иметь ширину 100 и 180 пикселей соответственно, а второй фрейм займет всю оставшеюся площадь.
С размещением документов покончили, теперь собственно осталось их подключить и насладится первым результатом..
Тег
и его атрибут src
укажет браузеру путь к html документу который следует открыть в отведенном для него месте. У нас имеется три отдельных документа logotype.html, menu.html и text.html теперь к каждому нужно прописать путь, что мы собственно и делаем. (предполагаю, что у Вас все четыре файла находятся в одной папке и пути к ним имеют самую простую запись по типу:
)
Файл index.html
фреймы
Файл logotype.html
фреймы
Файл menu.html
фреймы
Меню:
Суп из шампиньонов
Бобы в горшочке по-итальянски
Австралийский летний салат
... ... ...
Файл text.html
фреймы
Суп из шампиньонов
куча текста..
В данном примере я выложил все четыре HTML документа где index.html является основным, а остальные три, это подключаемые страницы, каждая из которых в принципе может работать автономно и содержать в себе всё что угодно картинки, таблицы, тексты, ссылки.. сделал я это для того что бы дать Вам понять принцип работы с фреймами. В дальнейших примерах я буду выкладывать лишь головной файл с фреймами, (а то уж больно много места на странице они все вместе занимают), а Вы знайте что у меня "где то там" есть все остальные файлы содержащие в себе графику, тексты, может быть ещё что ни будь.. ну и не отставайте за мной потихоньку редактируйте свои собственные странички к будущему тренировочному сайту.. Не знаю про что Вы будите писать свой, а я тут пообещался помочь одной девушке в написании сайта посвящённого кулинарии..)) так что решил так сказать сразу на двух зайцев замахнуться.. на девушку зайку и сайт..)) как-то так..))
В выше изложенном примере мы расположили все окна горизонтально, поменяв атрибут rows
на cols
можно расположить их в вертикальном порядке. А как быть, если требуется разместить наши окна
вот так?: или так?: или даже так?:
Выход есть. Разберём на примерах.
Начнём с первого случая.. что мы видим? А видим мы две строки, где вторая поделена на два столбца.
A теперь по порядку:
- делим окно браузера на две строки
- в первую строку загружаем наш логотип
- а вторую строку делим на два столбца
- в первом будет меню
- а во втором куча текста
- закрываем тег деления на столбцы
- закрываем тег деления на строки
Вообще то говорить столбцы и строки неверно, так как фреймы никакого отношения к таблицам не имеют кроме как визуального подобия, правильно говорить горизонтальные и вертикальные фреймы.. ну это я так изрекаюсь что б Вам понятнее было..
Ну да ладно, смотрим пример:
фреймы
Во втором случае у нас имеется два столбца в котором второй поделен на две строки, значит будем писать так:
- делим окно на два столбца
- в первом будет содержание
- а второй делим на две строки
- логотип
- и основной текст
- закрываем деление на строки
- закрываем деление на столбцы
фреймы
Третий случай немного посложней, но бояться его не стоит.. тем более что именно такое построение лично я выбрал для сайта про кулинарное искусство, чуть ниже объясню почему. Что мы имеем? три столбца причем во второй столбец по сути заключён наш первый случай..
- делим окно на три столбика (обратите внимание второй столбец занимает ровно 800 пикселей а два крайних точного размера не имеют и поделят пополам оставшееся место)
-в первый столбец загружаем html документ который будет выполнять сугубо декоративную функцию
-
-
- во второй столбец вставляем наш "первый случай"
-
-
-
-
- в третий столбец загружаем всё тот же файл с декорациями
- захлопываем
Посмотрите пример, а потом я объясню почему избрал путь с пятью окнами
фреймы
Так почему пять окон? Помнится мне, я уже писал про то, что у разных пользователей сети Интернет на мониторах выставлены разные разрешения и соответственно на разных экранах наш сайт будет выглядеть по разному.. и если нет конкретных размеров все наши рисунки, тексты, таблицы что называется "поплывут" у тех пользователей, разрешения мониторов которых отлично от Вашего. Когда мы верстали сайт с помощью таблицы, вопрос с размерами страницы решался при помощи присуждения этой таблице конкретной ширины и высоты, к сожалению, с фреймами так поступить нельзя.. даже если указывать ширину фреймов не в процентах, а в пикселях, всё равно последний столбец растянется на оставшеюся ширину окна браузера и страница, что называется, потеряет "товарный вид". Так как же быть? Приходится идти на маленькие хитрости.. Задав центральному столбцу (в котором у нас собственно и размещена вся страница) размер 800 пикселей мы раз и навсегда определи его ширину, а безразмерные первый и третий столбцы помимо декора выполняют роль своего рода "пружин" на которых подвешен центральный столбец.. Так, у людей с маленьким разрешением монитора эти окна/поля будут узкими, а людей с большим разрешением широкими, таким образом центральный столбец никак не пострадает и теперь мы можем с полной уверенностью размещать в нём какие либо объекты, с точной привязкой по месту, не переживая за их дальнейшую судьбу. Сравните первый пример, где три окна и третий, где их уже пять, неправда ли так лучше?
На этом с размещением и размерами фреймов закончим.. и так здесь долго задержались.. идём дальше.
Приводим фреймы в опрятный вид.
В последнем нашем примере первое, что бросается в глаза, это целая куча полос прокруток, которые стоят где надо и не надо.. Давайте от них избавимся, ну можно и оставить кое где.. Делается это при помощи атрибута scrolling
- тега
, он может иметь одно из трёх значений:
- no
- yes
- всегда показывать,
- auto
фреймы
Поля фреймов или иначе расстояние от границ фрейма до текста или картинки, как в нашем случае, задаются в пикселях при помощи атрибутов marginwidth
и marginheight
тега
фреймы
Поговорим немного о рамках вокруг наших фреймов.
Если Вы обратили внимание, то в последнем примере наведя курсор на границу фрейма он, курсор то бишь, приобретает другой вид (захватить и переместить) и теперь эту границу можно перетащить в какую либо сторону удерживая левой кнопкой мыши. Иногда такая "мобильность" границ фреймов играет на руку веб-мастеру, но чаще всё же мешает.. Для того, чтобы запретить пользователю играться с размерами окон для тега
придумали атрибут noresize
фреймы
А вот давно нам знакомый атрибут border
задаёт ширину в пикселях этих самых рамок между фрёймами.. пишется он внутри тега . Как и раньше значение border="0"
вовсе избавит нас от рамок.
фреймы
Фреймы и ссылки.
Настало время оживить наш сайт ссылками, да вот беда, знакомая нам обыкновенная ссылка Бобы в горшочке по-итальянски
откроет данный документ в том же фрейме где она и находится, в нашем случае непосредственно в фрейме с содержанием, а само содержание в момент перехода по этой ссылки уйдёт в небытие.. можете взглянуть на корявый пример.. кликнете в нём на любую ссылку.. Что бы впредь такого не происходило, необходимо указывать браузеру в каком фрейме следует открывать необходимый нам документ, ну если конечно Вам и в правду не нужно открывать его в этом же фрейме.
Помнится мы уже знакомились, в главе посвящённой ссылкам, с атрибутами name
- имя и target
- цель, применяются они также и при работе с фреймами механизм немного изменён а так почти тоже самое. первым делом фрейму в котором мы хотели бы открывать какие либо документы необходимо присвоить индивидуальное имя.
пишется так:
name="osnovnoe"
> имя можно придумать любое.. главное его не забыть..
Пишется так:
target="osnovnoe"
>Бобы в горшочке по-итальянски
Ну я думаю Вам уже не стоит объяснять, что прежде чем ссылаться на какие либо документы, их необходимо создать.. в моём случае файлы (рецепты) имеют имена text.html, text1.html, text2.html…
Посмотрите пример:
Файл index.html
фреймы
Файл menu.html
фреймы
Меню:
target="osnovnoe"
>Суп из шампиньонов
target="osnovnoe"
>Бобы в горшочке по-итальянски
target="osnovnoe"
>Австралийский летний салат
... ... ...
Так же как и раньше документ можно открыть в отдельном окне. Напомню, пишется так:
target="_blank"
>Бобы в горшочке по-итальянски
Или же присвоив атрибуту target
значение _top
открыть его в этом же окне браузера, но на весь экран.. "обнулив" при этом всё что бы там не находилось.. пишется так:
target="_top"
>Бобы в горшочке по-итальянски
Такой вот сайтик получился.. конечно над ним ещё работать и работать.. к тому же по моёй задумке он будет иметь несколько иную структуру в плане навигации по сайту, в нем будет ёщё целая куча страниц, красивое меню, но что касается фреймовой структуры, думаю она останется прежней..
Плавающий фрейм
Иногда в страницу содержащую в себе не фреймовую структуру необходимо в отдельном окне вставить другой HTML документ или даже ряд таковых документов. Для выполнения этой цели существует тег
Пример документа с плавающим фреймом:
Плавающий фрейм
Плавающий фрейм
В эту страницу введён так называемый "плавающий фрейм".
В отдельном окне он открывает для показа другой документ html.
… … …
Noframes
Некоторые браузеры не поддерживают фреймовую структуру документа или неправильно её интерпретируют, кроме того зачастую пользователи в настройках своих браузеров умышленно отключают поддержку фреймовой структуры html документа. И хотя процент таких браузеров и пользователей невелик, но тем не менее они есть.
Теперь представьте что Вы построили свой сайт с помощью фреймовой структуры и вот некоторые посетители, может быть сами не подозревая в чем проблема, пытаются открыть Ваш сайт, а их браузер выдает ошибку! Что они подумают о Вашем сайте? я думаю, что то типа: "Фу.. ерунда какая то.. больше сроду сюда не зайду!".
Для того что бы дать понять пользователю, что его браузер/настройки браузера не поддерживают фреймы существует тег <![CDATA[
</b> .</p>
<p>Тег <b><noframes>
</b> выводит текст, заключенный в него в том случае, если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках. Если же фреймы поддерживаются браузером пользователя, то данный тег попросту игнорируется.</p>
<p> <html> <br>
<head> <br>
<title>фреймы</title> <br>
</head> <br>
<frameset cols="*,800,*" border="0"> <br><b><noframes>Извините, но Ваш браузер не поддерживает фреймы..]]>
Результат примера будет заметен, если Ваш браузер и в правду не поддерживает фреймы (тут я надолго задумался.. :) если это так, то зачем вообще читать эту главу?) или же Вы в качестве эксперимента выключили поддержку фреймов в своём браузере.
Тег <![CDATA[
</b> должен быть расположен внутри тега <b><frameset>
</b></p>
<p>С плавающим фреймом всё ещё более просто, достаточно написать нужный текст между <b><iframe> </iframe>
</b> и данная надпись будет выводится на экран, в том случае если браузер не поддерживает фреймы.</p>
<p>
<iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1"><b>Извините, но Ваш браузер не поддерживает фреймы..
</b></iframe>
</p>
<ul><p>Перед тем как начать создавать страницу с использованием фрёймовой структуры проанализируйте её макет, размеры каждого окна, наличие или отсутствие в них полос прокруток и т. д. После этого можно создавать подключаемые HTML файлы особо не переживая за их взаимное расположение относительно друг друга..</p><p>Используйте тег <b><noframes>
</b> . Помните что если в Вашем браузере сайт работает и отображается так как Вы и задумывали то у других пользователей дела могут обстоять иначе!</p>
</ul>
<p>На заре сайтостроения веб-ресурсы широко использовали фреймы для отображения отдельных частей страниц. Но с приходом новой версии HTML 5 всё изменилось. Элементы разметки <<i>frame
</i>>, <<i>frameset
</i>> и <<i>noframes
</i>> признаны устаревшими. Заменой им стал один-единственный тег - <<i>iframe
</i>>. Как добавить в html <iframe>? Пример ниже будет понятен даже новичку в программировании.</p><h2>Что такое фреймы?</h2><p>Фрейм - основа большинства первых веб-страниц. Если переводить дословно, данное слово означает «кадр», то есть фрейм представляет собой небольшую часть страницы в браузере. Повсеместное использование фреймов в прошлом можно объяснить низким качеством и дороговизной интернет-трафика. Как правило, сайт разбивался на 3-5 частей, каждая из которых выполняла определённое назначение:</p><ul><li>«шапка» (верхний фрейм по ширине страницы) - отображение название ресурса;</li><li>левый/правый «стакан» - вывод меню;</li><li>центральный фрейм - показ контента сайта.</li>
</ul><p>Разбивка страницы на части позволяла перегрузить лишь некоторую часть при её обновлении. Например, пользователь нажимал пункт меню, и в центральный фрейм закачивалось новое содержимое.</p><h2>Современные фреймы в HTML 5</h2><p>Зачем нужен в HTML <<i>iframe
</i>>? Пример - вставка контента стороннего ресурса. Классической является ситуация, когда веб-разработчик желает показать положение объекта на карте. Как быть? Отрисовывать план местности с нуля? Нет - есть более простое решение: встроить на страницу элемент Google Map, Яндекс Карты или 2ГИС. Задача решается в четыре действия.</p><ol><li>Нужно перейти на сайт любого картографического сервиса.</li><li>Найти желаемый объект. Зная точный адрес, можно ввести его в окне поиска.</li><li>С помощью кнопки «Сохранить и получить код» (для "Яндекс.Карт") или «Готово» (для карт Google) получить код для вставки.</li><li>Осталось вписать сгенерированные теги разметки на страницу.</li>
</ol><p>Дополнительно можно выбрать размер карты и настроить другие опции отображения.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/47242/1650473.jpg' width="100%" loading=lazy></p><p>Как ещё можно использовать в HTML <<i>iframe>
</i>? Пример - вставка видеоматериалов с ресурса Youtube. Мультимедиа-технологии привлекают пользователей Интернета, поэтому видеоконтент столь популярен. С установкой ролика разработчик справится быстро.</p><ol><li>Следует загрузить на Youtube собственное видео или найти сторонний файл для трансляции.</li><li>Получить тег, выбрав кнопку «HTML-код»</li><li>Заключительное действие - вставить в <iframe>. Пример получаемого содержимого тега будет рассмотрен ниже.</li>
</ol><p>В обоих примерах использовалась автоматическое формирование кода, но профессиональные разработчики должны уметь сами составлять его. Во-первых, это позволит им разобраться в вёрстке страницы и при необходимости модифицировать её. Во-вторых, не всегда разметка элементов сайта (даже несмотря на то, что они принадлежат внешнему ресурсу), образуется без участия веб-мастера. Вот здесь и проявляется высокая квалификация разработчика.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/47242/1650474.jpg' width="100%" loading=lazy></p><h2>Синтаксис</h2><p>Итак, прежде чем приступить к вёрстке страницы, необходимо рассмотреть тег iframe (html): что это такое и как правильно его использовать.</p><p>Прежде всего, нужно отметить, что тег парный. Между открывающимся и закрывающимся элементами указывают содержимое, которое будет отображаться в браузерах, не поддерживающих данный элемент разметки. Основные атрибуты тега:</p><ul><li>width (ширина);</li><li>height (высота);</li><li>src (адрес загружаемого ресурса);</li><li>align (способ выравнивания);</li><li>frameborder;</li><li>allowfullscreen.</li>
</ul><p>Таким образом, получен код для <iframe>. HTML-пример полностью продемонстрирован ниже:</p><p><i><iframe width="560" height="315" src= "https://someserver.com/" frameborder="0" allowfullscreen></iframe>
</i></p><p>В приведённой разметке достаточно заменить адрес сайта на любой другой и, если это необходимо, скорректировать размеры фрейма.</p>
<p>Вертикальное расположение фреймов <br>
Как сделать колонку фреймов из трех различных документов.</p>
<p>Горизонтальное расположение фреймов <br>
Как сделать строку фреймов из трех различных документов.</p>
<p>(Вы найдете больше примеров внизу этой страницы).</p>
<h2>HTML Фреймы</h2>
<p>С помощью фреймов вы можете показать более одного HTML документа в том же окне браузера. Каждый HTML документ называется фреймом, и каждый фрейм является независимым от остальных.</p>
<p>Недостатки в использовании фреймов:</p>
<ul><li>Фреймы могут перестать поддерживаться в будущих версиях HTML</li>
<li>Фреймы сложно использовать. (Печать старницы целиком затруднительна).</li>
<li>Веб разработчик должен следить за большим количеством HTML документов.</li>
</ul><h2>HTML Элемент frameset</h2><p>Элемент frameset содержит один или более элементов frame. Каждый элемент frame
может содержать отдельный документ.</p>
<p>Элемент frameset указывает СКОЛЬКО столбцов или строк будет в наборе фреймов, и СКОЛЬКО процентов/пикселей пространства будет занимать каждый фрейм.</p>
<h2>HTML Элемент frame</h2><p>Тег <frame> определяет одно отдельное окно (фрейм) внутри набора фреймов (frameset).</p>
<p>В пример ниже мы имеем набор фреймов с двумя столбцами.</p>
<p>Первый столбец занимает
25% ширины окна браузера. Второй столбец занимает 75%
ширины окна браузера. Документ "frame_a.htm" помещен
в первый столбце, и документ "frame_b.htm" помещен
во второй столбец:</p>
<table class="code notranslate" cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td>
<frameset cols="25%,75%"><br>
<frame src="frame_a.htm" /><br>
<frame src="frame_b.htm" /><br>
</frameset>
</td>
</tr></table><p><b>Замечание:
</b> Размер столбца в наборе фреймов может также быть указан в пикселях
(cols="200,500"), и один из столбцов может использовать оставшееся пространство,
для чего надо указать вместо ширины звездочку
(cols="25%,*").<br></p>
<p><b>Совет:
</b> Если фрейм имеет видимые границы, пользователь может изменить его размер
перетаскиванием границы. Чтобы запретить изменение размера фрейма таким способом,
вы можете добавить noresize="noresize" в тег <frame>.</p>
<p><b>Замечание:
</b> Добавьте тег <noframes> для браузеров, которые не поддерживают фреймы.</p>
<p><b>Важно:
</b> Вы не можете использовать теги <body></body> вместе с тегами
<frameset></frameset>! Однако, если вы добавите тег <noframes> содержащий некоторый текст
для браузеров, которые не поддерживают фреймы, вы заключаете этот текст
в теги <body></body>! Смотрите как это делается в первом примере ниже.</p>
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" width="48">
</td>
<td align="left" valign="middle"><h3>Еще примеры</h3>
</td>
</tr></table><p>Использование тега <noframes> <br>
Как использовать тег <noframes> (для браузеров,
которые не поддерживают фреймы).</p>
<p>Вложенные наборы фреймов <br>
Как создать вложенные наборы фреймов.</p>
<p>Набор фреймов с атрибутом
noresize="noresize" <br>
Как использовать атрибут noresize.
Переместите мышь на границу между фреймами и убедитесь,
что не можете ее перетащить.</p>
<p>Фрейм навигации <br>
Как сделать фрейм навигации.
Этот фрейм содержит список ссылок со вторым
фреймом в качестве назначения, где будут открываться эти ссылки.
Файл "tryhtml_contents.htm" содержит три ссылки.
Исходный код ссылок:<br>
<a href ="frame_a.htm" target ="showframe">Frame a</a><br><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a><br>
Второй фрейм показывает залинкованный документ.</p>
<p>Переход к определенному разделу внутри фрейма <br>
Два фрейма. Один из фреймов имеет ссылку на определенный раздел в файле.
Этот раздел помечается как <a name="C10">
в файле "link.htm".</p>
<p>Несмотря на то, что сайты с фреймами встречаются все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. К тому же фреймы в каком-то смысле заняли свою нишу и применяются для систем администрирования и справки. Там, где недостатки фреймов не имеют особого значения, а преимущества наоборот, активно востребованы.</p>
<p>Для создания фрейма используется тег <frameset>
,
который заменяет тег <body>
в документе и
применяется для разделения экрана на области. Внутри данного тега
находятся теги <frame>
, которые указывают
на HTML-документ, предназначенный для загрузки в область (рис. 13.1).</p>
<p>Рис. 13.1. Пример разделения окна браузера на два фрейма</p>
<p>При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов.</p>
<p>Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 13.1. Нам понадобится три файла: index.html
— определяет структуру документа, menu.html
— загружается в левый фрейм и content.html
— загружается в правый фрейм. Из них только index.html
отличается по структуре своего кода от других файлов (пример 13.1).</p>
<p>Пример 13.1. Файл index.html</p><p>
<!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>
</p><p>В случае использования фреймов в первой строке кода пишется следующий тип документа.</p><p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
</p><p>Данный <!DOCTYPE>
указывает браузеру, что он имеет дело с фреймами, эта строка кода является обязательной. Контейнер <head>
содержит типовую информацию вроде кодировки страницы и заголовка документа. Вот только учтите, что заголовок остается неизменным, пока HTML-файлы открываются внутри фреймов.</p>
<p>В данном примере окно браузера разбивается на две колонки с помощью атрибута cols
, левая колонка занимает 100
пикселов, а правая — оставшееся пространство, заданное символом звездочки.
Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие
таблиц.</p>
<p>В теге <frame>
задается имя HTML-файла,
загружаемого в указанную область с помощью атрибута src
.
В левое окно будет загружен файл, названный menu.html
(пример 13.2),
а в правое — content.html
(пример 13.3). Каждому
фрейму желательно задать его уникальное имя, чтобы документы можно
было загружать в указанное окно с помощью атрибута name
.</p>
<p>Пример 13.2. Файл menu.html</p><p>
<!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 style="background: #f0f0f0">
</body>
</html>
</p><p>В данном примере серый фон на странице задается с помощью стилей, о которых речь пойдет далее.</p>
<p>Пример 13.3. Файл content.html</p><p>
<!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>
</p><p>Рассмотрим более сложный пример уже с тремя фреймами (рис. 13.2).</p>
<p><img src='https://i0.wp.com/htmlbook.ru/files/images/samhtml/fig_1_13_2.png' width="100%" loading=lazy></p>
<p>Рис. 13.2. Разделение страницы на три фрейма</p>
<p>В данном случае опять используется тег <frameset>
, но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows
, где для разнообразия применяется процентная запись (пример 13.4).</p>
<p>Пример 13.4. Три фрейма</p><p>
<!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>
</p><p>Как видно из данного примера, контейнер <frameset>
с атрибутом rows
вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один <frameset>
, который повторяет уже известную вам структуру из примера 13.1. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены атрибуты scrolling="no"
и noresize
.</p>
<p>Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.<br>
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.<br>
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.</p>
<h2>Создание фреймов</h2>
<p>Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами <b><html>
</b>
и <b></html>
</b>
, а в контейнере <b><head>
</b>
располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега <b><body>
</b>
применяется парный тег <b><frameset>
</b>
(от англ. frame set – набор фреймов).<br>
В следующем примере приведена структура HTML-документа с фреймами:</p>
<h3>Пример: Структура HTML-документа с фреймами</h3>
<ul><li>Попробуй сам »</li>
</ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid silver;background-color:blue;color: white;" colspan="2">frame_top</td>
</tr><tr><td style="border-right: 4px solid silver;width: 20%;background-color:green;color: white;">frame_left</td>
<td style="width: 80%;background-color:lime;color: white;">frame_right</td>
</tr></table><p> <!DOCTYPE html>
<html><br><head><br><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>
]]>