Итак, фреймы.. для чего они нужны и какую пользу в себе несут? Об этом я и постараюсь рассказать в этой главе, ну и естественно о том, как их внедрять и работать с ними..
Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько 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>С плавающим фреймом всё ещё более просто, достаточно написать <a href="/kak-sohranit-sozdannyi-dokument-v-word-sohranyaem-dokument-word-v.html">нужный текст</a> между <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>Перед тем как начать создавать страницу с использованием фрёймовой структуры проанализируйте её макет, размеры каждого окна, наличие или отсутствие в них полос прокруток и т. д. После этого можно создавать подключаемые <a href="/kak-prosmotret-fail-html-kak-otkryt-fail-html-prosteishie.html">HTML файлы</a> особо не переживая за их взаимное расположение относительно друг друга..</p><p>Используйте тег <b><noframes>
</b> . Помните что если в Вашем браузере сайт работает и отображается так как Вы и задумывали то у других пользователей дела могут обстоять иначе!</p>
</ul>
<p>Тег <b>frameset
</b> определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега FRAME
. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Тег FRAMESET
заменяет собой элемент BODY
на веб-странице.<br>Допустимо использовать вложенную структуру элементов, это позволяет разбить один фрейм на две и более области.</p>
<p>При использовании фреймов примите во внимание их следующие особенности.</p>
<ul><li>Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, обычно нет ссылок на другие документы.</li>
<li>Фреймы скрывают адрес страницы на которой находится посетитель и устанавливаемый через <a href="/hitrosti-napisaniya-title-i-description-teg-title-chto-eto-takoe-i-kak-ego-pravilno.html">тег TITLE</a>
, и всегда показывают только адрес сайта. По этой причине понравившуюся страницу невозможно поместить в раздел «Избранное» браузера.</li>
<li>Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в <a href="/kak-osushchestvlyaetsya-poisk-v-poiskovyh-sistemah-poiskovaya-sistema-poiskovye.html">поисковой системе</a>. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают <a href="/ponyatie-faila-failovyi-princip-hraneniya-dannyh-operacii-s-failami-tipy.html">данный принцип</a>, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в <a href="/zaiti-na-skrytuyu-stranicu-vk-istoriya-statusov-polzovatelya-rabotaem-s.html">адресной строке</a>, что в любом случае доставляет неудобство.</li>
<li>Большое число фреймов требует для браузера выделения больше памяти, чем обычно.</li>
</ul><p><b>Синтаксис
</b><br><frameset><br> <frame><br></frameset></p>
<p><b>Закрывающий тег
</b><br>Обязателен.</p>
<p><b>Параметры
</b><br>border
- толщина границы между фреймами. <br>bordercolor
- цвет линии границы. <br>cols
- устанавливает ширину или пропорции фреймов в виде колонок. <br>frameborder
- отображать рамку вокруг фрейма или нет.<br>framespacing
- аналог <a href="/kak-sdelat-otstup-mezhdu-blokami-v-css-otstupy-i-ramki-v-css-s-pomoshchyu-parametrov.html">параметра border</a>
, задает ширину границы. <br>rows
- задает размер или пропорции фреймов в виде строк.</p>
<p>Пример 1. Использование тега FRAMESET</p>
<blockquote>
<p><html><br><frameset rows="80,*" cols="*" frameborder=NO border=0 framespacing=0><br> <frame src=top.html name=topFrame scrolling=no noresize><br> <frameset cols="80,*" frameborder=no border=0 framespacing=0><br> <frame src=left.html name=leftFrame scrolling=no noresize><br> <frame src=main.html name=mainFrame><br> </frameset><br></frameset><br></html></p>
</blockquote>
<p>Некоторые примеры организации фреймов приведены ниже.</p>
<table style="border-collapse: collapse; width: 75%;" border="0" cellspacing="0" cellpadding="4" align="center"><tbody><tr><td width="50%">
<table style="width: 100%;" border="1" cellspacing="0" cellpadding="4" bordercolor="#333333"><tbody><tr align="middle"><td bgcolor="#f0f0f0">Фрейм 1
</td>
<td bgcolor="#ffcc99">Фрейм 2
</td>
</tr><tr align="middle"><td bgcolor="#f0f0f0">Фрейм 3
</td>
<td bgcolor="#ffcc99">Фрейм 4
</td>
</tr><tr align="middle"><td bgcolor="#f0f0f0">Фрейм 5
</td>
<td bgcolor="#ffcc99">Фрейм 6
</td>
</tr></tbody></table></td>
<td>
<table style="width: 100%;" border="1" cellspacing="0" cellpadding="4" bordercolor="#333333"><tbody><tr align="middle"><td rowspan="2" width="28%" bgcolor="#f0f0f0">Фрейм 1
</td>
<td width="72%" bgcolor="#ffcc99">Фрейм 2
</td>
</tr><tr><td height="55" align="middle">Фрейм 3
</td>
</tr></tbody></table></td>
</tr><tr valign="top"><td><frameset rows="33%,33%,*" cols="50%, 50%"><br><frame src=r1c1.html name="Фрейм 1"><br><frame src=r1c2.html name="Фрейм 2"><br><frame src=r2c1.html name="Фрейм 3"><br><frame src=r2c2.html name="Фрейм 4"><br><frame src=r3c1.html name="Фрейм 5"><br><frame src=r3c2.html name="Фрейм 6"><br></frameset><br></td>
<td><frameset rows="*" cols="80,*"><br><frame src=frame1.html name="Фрейм 1"><br><frameset rows="80,*"><br><frame src=frame2.html name="Фрейм 2"><br><frame src=frame3.html name="Фрейм 3"><br></frameset><br></frameset>
</td>
</tr></tbody></table><h3>Описание параметров тега FRAMESET</h3>
<h4>Параметр BORDER</h4>
<p><b>Описание
</b><br>Устанавливает толщину границы между фреймами. По умолчанию линия отображается трехмерной, используя параметры bordercolor и border можно настроить ее вид по своему усмотрению. Браузеры по-разному интерпретируют параметры тега FRAMESET
и показывают линию. Например, для линии черного цвета толщиной 5 пикселов.</p>
<p>Как видно из рисунка, Opera вообще не изменяет цвет линии, но исправно отображает требуемое значение. <a href="/obnovlenie-brauzera-internet-explorer-10-obnovlyaem-brauzer-internet-explorer-do.html">Браузер Internet</a> Explorer за толщину принимает среднюю часть линии залитую черным цветом, а Netscape - полную ширину или высоту, включая небольшие линии по бокам, создающие эффект приподнятости.</p>
<p>Если у тега FRAMESET
установлен параметр framespacing=0
, то <a href="/kak-obnovit-sovremennye-brauzery-neskolko-shagov-dlya-obnovleniya.html">браузер Opera</a> вообще не показывает границу, а Internet Exporer игнорирует значения атрибутов bordercolor
и border
.</p>
<p><b>Синтаксис
</b><br><frameset border=значение>...</frameset></p>
<p><b>Аргументы
</b><br>Целое <a href="/jquery-vse-atributy-polozhitelnye-celye-chisla-svoistvo-classlist-eto-obekt-dlya.html">положительное число</a>. Значение 0 скрывает рамку.</p>
<p><b>Значение по умолчанию
</b><br>Зависит от браузера и операционной системы.</p>
<p><b>Аналог CSS
</b><br>border</p>
<p>Пример 2. Изменение толщины границы</p>
<blockquote>
<p><html><br><frameset rows="*" cols="80,*" bordercolor=black border=5
><br><frame src=left.html name=leftFrame><br><frameset rows="80,*"><br><frame src=top.html name=topFrame><br><frame src=main.html name=mainFrame><br></frameset><br></frameset><br></html></p>
</blockquote>
<h4>Параметр BORDERCOLOR</h4>
<p><b>Описание
</b><br>Определяет цвет видимых границ между фреймами. Цвет <a href="/tehniki-raboty-s-dom-roditelskie-dochernie-i-sosednie-elementy-vyborka.html">родительского элемента</a> FRAMESET
может быть изменен с помощью <a href="/specialnye-selektory-v-css-sosednie-dochernie-kontekstnye.html">дочернего тега</a> FRAMESET
или индивидуального элемента FRAME
. Браузер Opera вообще игнорирует данный параметр.</p>
<p><b>Синтаксис
</b><br><frameset bordercolor=цвет>...</frameset></p>
<p><b>Аргументы
</b><br>Значение цвета можно задавать двумя способами.</p>
<p>1. По его названию<br>Браузеры поддерживают некоторые цвета по их названию.</p>
<p>2. По шестнадцатеричному значению<br>Для задания цветов используются числа в <a href="/perevod-drobei-iz-shestnadcatirichnoi-v-dvoichnuyu-shestnadcaterichnyi.html">шестнадцатеричном коде</a>. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены <a href="/kak-pridumat-login-latinskimi-bukvami-chto-takoe-login-parol-i-uchetnaya.html">латинскими буквами</a>. Числа больше 15 в <a href="/perevesti-chislo-v-shestnadcaterichnuyu-sistemu-schisleniya-perevod-chisel.html">шестнадцатеричной системе</a> образуются объединением двух чисел в одно. Например, числу 255 в <a href="/perevod-chisel-v-razlichnye-sistemy-schisleniya-s-resheniem.html">десятичной системе</a> соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед <a href="/16-bitnaya-sistema-schisleniya-kak-preobrazovat-desyatichnoe.html">шестнадцатеричным числом</a> ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю.</p>
<p><b>Значение по умолчанию
</b><br>Зависит от браузера и настроек операционной системы.</p>
<p><b>Аналог CSS
</b><br>border</p>
<p>Пример 3. Изменение цвета границы</p>
<blockquote>
<p><html><br><frameset rows="*" cols="80,*" bordercolor=black border=5><br><frame src=left.html name=leftFrame><br><frameset rows="80,*" bordercolor=red
border=5><br><frame src=top.html name=topFrame><br><frame src=main.html name=mainFrame><br></frameset><br></frameset><br></html></p>
</blockquote>
<h4>Параметр COLS</h4>
<p><b>Описание
</b><br>Задает размеры или пропорции колонок фреймов в структуре FRAMESET
. Если создаются несколько колонок, то для параметра cols
необходимо установить <a href="/css-kvadratnye-skobki-selektory-po-atributam-tega-znachenie.html">определенное значение</a>. Для этого используется три варианта:</p>
<ol><li>размер в пикселах;</li>
</ol><p>Используйте значение в пикселах, когда требуется установить размер фрейма <a href="/kak-zadat-shirinu-yacheek-v-excel-excel-dlya-chainikov-izmenenie-stolbcov.html">заданной ширины</a>. Это особенно полезно для отображения содержания <a href="/kak-zadat-razmer-stranicy-v-html-kak-ustanovit-razmer-stranicy.html">заданных размеров</a>, например, изображения. Проценты удобно применять для пропорционального разделения фреймов, в этом случае, независимо от размера окна браузера пропорции будут сохраняться, главное, чтобы суммарная ширина колонок равнялась 100%. Если значения не составляют в сумме 100%, браузер отобразит фреймы, но ширина их будет установлена не точно. Наконец, если требуется отвести оставшееся место под фрейм, то используется символ звездочки. В этом случае браузер вычисляет ширину фрейма, когда размеры для остальных фреймов уже установлены. Допускается смешивать <a href="/dlya-chego-nuzhny-razdely-na-zhestkom-diske-osnovnoi-i-logicheskii-razdely.html">отдельные типы</a> значения, перечисляя их через запятую. Тогда работа по расчету нужной ширины выпадает на долю браузера.</p>
<p><b>Синтаксис
</b><br><frameset cols="ширина 1, ширина 2, ...">...</frameset></p>
<p><b>Аргументы
</b><br></p>
<p><b>Значение по умолчанию
</b><br>100%</p>
<p>Пример 4. Ширина фреймов</p>
<blockquote>
<p><html><br><frameset cols="100,*,20%"
><br><frame src=left.html name=leftFrame><br><frame src=main.html name=mainFrame><br><frame src=right.html name=rightFrame><br></frameset><br></html></p>
</blockquote>
<h4>Параметр FRAMEBORDER</h4>
<p><b>Описание
</b><br>Определяет, показывать границу между фреймами или нет. Браузер Opera в любом случае демонстрирует тонкую линию, если не используется framespacing=0
.</p>
<p><b>Синтаксис
</b><br><frameset frameborder=yes | no>...</frameset><br><frameset frameborder=1 | 0>...</frameset></p>
<p><b>Аргументы
</b><br>Допускается использовать значения yes
или 1
для отображения границы и no
или 0
, чтобы ее скрыть.</p>
<p><b>Значение по умолчанию
</b><br>По умолчанию этот параметр включен.</p>
<p>Пример 5. Сокрытие границы между фреймами</p>
<blockquote>
<p><html><br><frameset cols="100,*,20%" frameborder=no
><br><frame src=left.html name=leftFrame><br><frame src=main.html name=mainFrame><br><frame src=right.html name=rightFrame><br></frameset><br></html></p>
</blockquote>
<h4>Параметр FRAMESPACING</h4>
<p><b>Описание
</b><br>Параметр framespacing
является аналогом frameborder и предназначен для установки размеров границы между фреймами. Причина существования двух разных атрибутов с близкими свойствами в том, что framespacing
более старый параметр и поддерживается браузерами для совместимости с их ранними версиями.</p>
<p><b>Синтаксис
</b><br><frameset framespacing=значение>...</frameset></p>
<p><b>Аргументы
</b><br>Целое положительное число. При framespacing=0
браузер Opera полностью скрывает границы между фреймами, а <a href="/css3-resheniya-dlya-internet-explorer-elementy-yandeksa-dlya-internet-explorer-chto-eto-za-programma.html">Internet Explorer</a> устанавливает их параметры по умолчанию. Этот атрибут напрочь игнорируется браузером Netscape.</p>
<p><b>Значение по умолчанию
</b><br>2</p>
<p>Пример 6. Сокрытие границы между фреймам</p>
<blockquote>
<p><html><br><frameset cols="150,*" framespacing=0
frameborder=0><br><frame src=left.html name=leftFrame><br><frame src=main.html name=mainFrame><br></frameset><br></html></p>
</blockquote>
<h4>Параметр ROWS</h4>
<p><b>Описание
</b><br>Задает высоту или пропорции фреймов в структуре FRAMESET
в виде строк. Если создаются несколько строк, то для параметра rows
необходимо установить определенное значение. Для этого используется три варианта:</p>
<ol><li>размер в пикселах;</li>
<li>размер в процентах от доступной ширины фрейма;</li>
<li>символ звездочки (*), который обозначает всю свободную ширину, оставшуюся после указания размеров в пикселах или процентах.</li>
</ol><p>Удобство использования параметра rows
совместно со значением * состоит в том, что фрейм можно определить в нижней части окна браузера. Когда требуется создать равномерную сетку фреймов, используйте в теге FRAMESET
одновременно параметры rows
и cols
. Для более сложной структуры необходимо вкладывать один тег FRAMESET
внутрь другого.</p>
<p><b>Синтаксис
</b><br><frameset rows="высота 1, высота 2, ...">...</frameset></p>
<p><b>Аргументы
</b><br>Значения, перечисленные через запятую в виде пикселов (px или другие пометки указывать не требуется), процентов или символа *.</p>
<p><b>Значение по умолчанию
</b><br>100%</p>
<p>Пример 7. Высота фреймов</p>
<blockquote>
<p><html><br><frameset rows="*,100"
><br><frame src=top.html name=topFrame><br><frame src=main.html name=mainFrame><br></frameset><br></html</p>
</blockquote>
<p><img src='https://i2.wp.com/spravka.seodon.ru/images/xhtml-pn.png' height="20" width="113" loading=lazy></p>
<h1>Тег <FRAMESET></h1>
<p><b>Тег <FRAMESET>
</b> используется для создания самой структуры веб-страницы с фреймами. По сути, фреймы - это отдельные документы, расположенные на одной HTML-странице в виде окон. Как правило, они используются для структурного и логического разделения информации на странице (меню навигации, контент, рекламные блоки и тому подобное). В процессе работы с такой страницей, отдельные фреймы могут заменяться другими или в нескольких окнах может отображаться один и тот же документ и т.д.</p>
<p>Чтобы получит страницу с фреймами - необходимо тег <BODY> заменить на <FRAMESET>
. Причем внутри этого элемента не может содержаться набор тегов обычный для стандартной HTML-страницы. В нем могут находиться только теги <FRAME> , отвечающие за содержимое каждого окна, и один тег <NOFRAMES> , содержимое которого отображается в том случае, если браузер не поддерживает фреймы.</p>
<p>Теги <FRAMESET>
допустимо вкладывать друг в друга для разбиения отдельных окон на более мелкие. Те, кто уже знаком с HTML-таблицами легко поймут логику создания документа с фреймами.</p>
<p>Несмотря на ряд преимуществ, фреймовая структура имеет существенные недостатки, из-за которых она практически не используется.</p>
<p>Во-первых, такой документ дольше загружается, нежели обычный HTML-документ с тем же набором полезной информации. Так как браузеру необходимо сначала определить структуру фрейм-документа, а затем в каждое окно загрузить еще по документу, имеющему свой заголовок и содержимое.</p>
<p>Во-вторых, пользователь видит только адрес самого фрейм-документа, а не отдельные адреса каждого документа во фрейме. Соответственно, если в процессе работы одни фреймы заменялись другими - пользователь не сможет сохранить у себя конечный адрес понравившейся страницы, а только адрес исходного фрейм-документа, со всеми вытекающими...</p>
<p>В-третьих, поисковые машины не умею правильно работать с фреймами, они индексируют каждый фрейм в отдельности. Поэтому, если пользователь нажмет на ссылку в поисковике - он попадет не на страницу с фреймами, а на страницу, содержащуюся в конкретном фрейме, например на меню навигации.</p>
<h2>Атрибуты</h2>
<p>Личные атрибуты:
</p>
<ul><li>border - Устанавливает размер рамок вокруг фреймов, как и framespacing
.</li>
<li>bordercolor - Задает цвет рамок.</li>
<li>cols - Указывает количество и ширину столбцов во фреймовой структуре.</li>
<li>frameborder - Разрешает или запрещает отображать рамки фреймов.</li>
<li>framespacing - Устанавливает размер рамок вокруг фреймов, как и border
.</li>
<li>rows - Указывает количество и высоту рядов (строк) во фреймовой структуре.</li>
</ul><ul><li>class - задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).</li>
<li> - задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.</li>
<li>style - необходим для применения встроенных стилей CSS к тегу.</li>
<li>title - выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.</li>
</ul><h2>Тип тега</h2>
<p>Назначение:
фреймы .</p>
<p>Модель тега:
используется вместо тега <BODY> .</p>
<p>Должен содержать:
</span> теги <FRAMESET>
и/или <FRAME> .</p>
<p>Может содержать:
</span> один тег <NOFRAMES> .</p>
<p>Открывающий тег:
</span> необходим. <span>Закрывающий тег:
</span> необходим.</p>
<h2>Синтаксис</h2>
<frameset>содержимое</frameset>
<p>Пример HTML: применение тега FRAMESET</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>seodon.ru - Применение тега FRAMESET</title>
</head>
<frameset rows="25%,*,25%">
<frame src="files/header.html" name="header">
<frameset cols="30%,*,30%">
<frame src="files/leftmenu.html" name="leftmenu">
<frame src="files/content.html" name="content">
<frame src="files/rightmenu.html" name="rightmenu">
</frameset>
<frame src="files/footer.html" name="footer">
<noframes>Извините, но ваш браузер не поддерживает фреймы.]]>
