Фреймы в html
Пример фреймовой структуры
Окно браузера может быть разделено на фреймы, т.е. на области расположенные рядом друг с другом. В каждую из этих областей
можно загружать свои html-страницы. На примере будет понятнее, создайте новый файл с названием index.html со следующим кодом:
Фреймы в html
В окне браузера это будет выглядеть так:
Окно браузера разделено на 3 части. Надо сказать, что
это единственный случай, когда в html-документе отсутствуют теги
. Вместо них
используются теги
, которые и указывают браузеру разбить окно
на несколько областей - фреймов.
Сколько будет таких областей и как они будут расположены зависит от двух параметров
тега
:
- rows
- указывает разбить окно на горизонтальные области. Причем, сколько значений у этого
параметра, столько и областей. В нашем примере rows="30%, 10%, 60%"
, т.е. три горизонтальные
области: ширина первой - 30% от ширины экрана, ширина второй - 10%, а третьей - 60%.
- cols
- указывает разбить окно на вертикальные области.
Внутри тегов
располагаются одиночные теги
,
причем их должно быть столько, сколько задано областей. Без параметров эти теги бесполезны.
Мы рассмотрим параметры тега
на примерах.
Вот мы и рассмотрели все параметры тега
.
Последний штрих: уберем рамки фреймов. Для этого в тег добавим два параметра
border="0" frameborder="0"
.
Фреймы в html
Теперь наша страница выглядит так:
Плюсы и минусы фреймов
Теперь, когда вы имеете представление о фреймах, пришло время сказать о достоинствах и
недостатках сайтов с фреймовой структурой.
Безусловным преимуществом является сокращение количества загружаемой на компьютер пользователя информации. Ведь шапка и меню
сайта загружаются только один раз, а далее меняется только контент. Конечно, это сокращает время загрузки.
Но недостатков гораздо больше. Во-первых, в структуре фреймов легко запутаться.
Во-вторых, наше меню лежит в отдельном файле. А это
значит, если пользователь нашел, например, вашу страницу content.html через поисковую систему, то он сможет прочитать только ее,
ведь никаких ссылок и пунктов меню на этой странице нет.
И наконец, фреймовую структуру поддерживают не все
браузеры. Поэтому существуюте теги <![CDATA[ ]]>
, они располагаются внутри тегов
и содержат альтернативную информацию для браузеров не поддерживающих
фреймы. По сути вам придется выполнить двойную работу и создать две версии сайта: с фреймами и без них.
Отсюда вывод - не используйте фреймы без острой необходимости.
Примеры фреймовых структур
Как вы помните за разделение на фреймы отвечают два параметра: rows
и cols
. Комбинируя их,
можно разбить окно на фреймы любым образом. Примеры такого разбиения мы и рассмотрим.
Пример 1:
Фреймы в html
Получим три вертикальных фрейма. Ширина первого - 150 пикселов, второго - 300, а третьего - все остальное пространство окна.
Результат:
Пример 2:
Фреймы в html
Получим два вертикальных фрейма. Ширина первого принимается равной за единицу, а второй - в два раза шире первого (т.е. 33% и 67%
от ширины окна).
Результат:
Пример 3:
Фреймы в html
Получим два горизонтальных фрейма. Высота первого - 100 пикселов, а второго - все остальное пространство.
Второй горизонтальный фрейм разобьем на два вертикальных: один шириной 200 пикселов, а второй будет занимать все остальное место.
Это достигается с помощью вложенных тегов
.
Итак, фреймы.. для чего они нужны и какую пользу в себе несут? Об этом я и постараюсь рассказать в этой главе, ну и естественно о том, как их внедрять и работать с ними..
Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько 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>На заре сайтостроения веб-ресурсы широко использовали фреймы для отображения отдельных частей страниц. Но с приходом <a href="/skachat-novuyu-versiyu-kodi-tv-nastroiki-kodi-na-android.html">новой версии</a> 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>С помощью кнопки «Сохранить и получить код» (для "Яндекс.Карт") или «Готово» (для <a href="/nuzhen-li-internet-dlya-gugl-karty-kak-ispolzovat-karty-google-bez.html">карт Google</a>) получить код для вставки.</li><li>Осталось вписать сгенерированные теги разметки на страницу.</li>
</ol><p>Дополнительно можно выбрать размер карты и настроить другие опции отображения.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/47242/1650473.jpg' width="100%" loading=lazy></p><p>Как ещё можно использовать в HTML <<i>iframe>
</i>? Пример - вставка видеоматериалов с ресурса Youtube. Мультимедиа-технологии привлекают пользователей Интернета, поэтому видеоконтент столь популярен. С установкой ролика разработчик справится быстро.</p><ol><li>Следует загрузить на <a href="/sozdat-sobstvennyi-kanal-na-youtube-sozdanie-kanala-na-youtube-menyaem-oformlenie-i.html">Youtube собственное</a> видео или найти сторонний файл для трансляции.</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><i>
</i> 07.12.2015</p>
<p>Пока нет</p>
<br><p>Всем привет!<br>
Продолжаем усердное изучение <a href="/chto-takoe-svg-plyusy-i-minusy-ispolzovaniya-chto-takoe-svg-osnovy-vektornaya.html">основ HTML</a>. Я рад, что вы не бросаете уроки .</p>
<p>В этом уроке мы разберем, <b>что такое фреймы
</b> и как они создаются в HTML.<br>
Итак, давайте определимся, что такое фреймы в HTML.<br><b>Фреймы
</b>– это разделение окна браузера на отдельные области, в которых могут загружаться отдельные HTML документы.</p>
<p>Я думаю, вы поняли, что благодаря фреймам, вы можете просмотреть сразу несколько веб страниц в одном окне браузера.</p>
<p>Для примера, чтобы понять, как работает фрейм на практике, предлагаю посмотреть пример. Сделайте там пару переходов:</p>
<p>Ну, как вам? Хотите научиться такое создавать? Сейчас мы научимся <b>вставлять фреймы в html-документ
</b>.</p>
<p>Создание фрейма на веб странице осуществляется по такому макету:</p><p>
<frameset>
<frame>
<frame>
</frameset>
</p><blockquote><p><b>Внимание:
</b>
макет фрейм-кода вставляется в html-документ вместо тега <bode></body>
:</p>
</blockquote>
<html>
<head>
<title>Фреймы</title>
</head>
<frameset>
<frame>
<frame>
</frameset>
</html>
<p>○ <b>тег frameset
</b></p>
<p>Это главный контейнер для создания фрейма, внутри которого содержатся другие элементы.<br>
Закрывающий тег обязательный.</p><p>
<frameset></frameset>
</p><p><i><b>*Атрибуты тега frameset:
</b>
</i>
</p>
<ul><li>Cols
- вертикальные</li>
<li>Rows
- горизонтальные</li>
</ul><p><b>rows
</b>
- горизонтально</p>
<p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-1.png' height="125" width="181" loading=lazy></p>
<p><b>cols
</b>
- вертикально</p>
<p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-2.png' height="127" width="185" loading=lazy></p>
<p>В атрибутах cols и rows указывается, на сколько частей делить окно браузера. Вот, например, чтобы разделить окно браузера на две вертикальные части, нужно прописать вот так:</p><p>
<frameset cols="30%,*">
</p><p>Левая часть экрана будет размером 30%, а правая – 70%.</p>
<p>Если хотите разделить браузер еще на несколько частей, допишите через запятую дополнительные размеры, вот, например, так:</p><p>
<frameset cols="30%,20%,10%,40%">
</p><p>В итоге первая <span>вертикальная колонка
</span> будет шириной 30%, вторая - 20%, третья - 10%, четвертая - 40%.</p>
<p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-3.png' width="100%" loading=lazy></p>
<p>Разобрались?</p>
<p>Так же и с горизонтальной
разбивкой:</p><p>
<frameset rows="30%,20%,10%,40%">
</p><p>Первая горизонтальная колонка будет шириной 30%, вторая - 20%, третья - 10%, четвертая - 40%.</p>
<p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-4.png' height="199" width="390" loading=lazy></p>
<p>○ <b>тег frame
</b></p>
<p>Тег frame указывает, какой html-документ должен быть загружен в окно браузера.<br>
Вот, например, нам нужно загрузить в одном окне браузера три разных страницы «1.html
», «2.html
», «3.html
». Тег frame будет выглядеть вот так:</p><p>
<frame src="1.html">
<frame src="2.html">
<frame src="3.html">
</p><p>Подытожим знания по фреймам. Итак, задача: нужно разделить окно браузера на две части и загрузить в эти части две веб страницы – «1.html
» на 30%
, «2.html
» на 70%
.<br>
Вот готовый код:</p><p>
<frameset cols="30%,*">
<frame src="1.html">
<frame src="2.html">
</frameset>
</p><p>Результат будет таким:</p>
<p><img src='https://i1.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-5.png' width="100%" loading=lazy></p>
<p><i><b>* Атрибуты тега frame
</b>
</i>
</p>
<ul><li>src
– адрес веб страницы. <i>src="1.html"
</i>
;</li>
<li>marginwidth
– отступ внутри фрейма по ширине. Пример: <i>marginwidth="10"
</i>
;</li>
<li>marginhight
– отступ внутри фрейма по высоте. Пример: <i>marginhight ="10"
</i>
;</li>
<li>scrolling
– прокрутка фрейма через скролл.<br>
- yes
– скролл будет присутствовать во фрейме. Пример: <i>scrolling ="yes"
</i>
;<br>
- no
– скролл не будет присутствовать во фрейме. Пример: <i>scrolling ="no"
</i>
;<br>
- auto
– скролл будет присутствовать во фрейме при необходимости. Пример: <i>scrolling ="auto"
</i>
;</li>
<li>noresize
– запрещает двигать границы фрейма.</li>
<li>name
– имя фрейма. Указывает, в каком окне нужно открывать другие фреймы. Пример: <i>name ="сайт"
</i>
;</li>
</ul>
<p>Если фрейму не прописать имя в атрибуте «name», то при нажатии по ссылке откроется новый фрейм в том окне, где была ссылка:</p>
<p>А вот пример, если прописать атрибут «name»:</p>
<p>Правда, так лучше? <br>
Для любого фрейма пропишите атрибут «name»
там, где вы хотите, чтобы открывались в нем другие html-документы</p><p>
<frame src="2.html "name ="сайт">
</p><p>Имя в атрибуте «name»
может быть любое. Но в дальнейшем, если вы будете давать имена и остальным тегам «frame»
, то помните, что каждое должно быть уникальным:</p><p>
<frame src="2..html "name ="bloggood-ru">
<frame src="3.html "name ="nocrisise-ru">
</p><p>
страница 2
страница 3
</p><p>«Страница 1
», «Страница 2
» будут открываться в одном окне там, где вы указали имя фрейму «name ="<span>сайт
"
</span>» и «Страница 3
» откроется в другом фрейме, где было название «name ="<span>bloggood-ru
"
</span>»</p>
<p><b>ПРАКТИКА
</b></p>
<p>Задание: Нужно создать фреймы вот по такому макету:</p>
<p><img src='https://i0.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-6.png' width="100%" loading=lazy></p>
<p>Вначале создадим три горизонтальных фрейма:</p><p>
<frameset rows="15%,*,15%">
</frameset>
</p><p>Теперь добавим «top.html»
и «footer.html»
</p><p>
<frameset rows="15%,*,15%">
<frame src="top.html">
<frame src="footer.html">
</frameset>
</p><p>Результат пока что будет вот таким:</p>
<p><img src='https://i2.wp.com/stepkinblog.ru/wp-content/uploads/2015/12/stepkinblog-ru-frameset-html-7.png' width="100%" loading=lazy></p>
<p>Теперь между «top.html»
и «footer.html»
добавим «menu.html»
и «content.html»
:</p><p>
<frameset rows="15%,*,15%">
<frame src="top.html">
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html" name="main">
</frameset>
<frame src="footer.html">
</frameset>
</p><p>Готовый код:</p><p>
<html>
<head>
<title>Фреймы</title>
</head>
<frameset rows="15%,*,15%">
<frame src="top.html">
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html" name="main">
</frameset>
<frame src="footer.html">
</frameset>
</html>
</p><p>Сохраните файл, как «index.html»
</p>
<p>Создайте странички «top.html »
, «footer.html»
, «menu.html»
и «content.html»
:</p>
<p>Код файла «top.html»
</p><p>
<html>
<head>
<title>шапка сайта</title>
</head>
<body bgcolor="#b2f2ff" text="#0000FF">
<h1>сайт</h1>
</body>
</html>
</p><p>Код файла «footer.html»
</p><p>
<html>
<head>
<title>Файл footer.html </title>
</head>
<body bgcolor="#b2f2ff" text="#000000">
StepkinBlog.com © 2015
</body>
</html>
</p><p>Код файла «menu.html»
</p><p>
<html>
<head>
<title>Файл menu.html – меню сайта</title>
</head>
<body bgcolor="#b2bbff" text="#112cf5">
<ul>
<li>Главная страница</li>
<li>Об авторе</li>
</ul>
</body>
</html>
</p><p>Код файла «content.html»
:</p><p>
<html>
<head>
<title><a href="/facebook-com-vhod-glavnaya-vosstanovlenie-stranicy-facebook-mozhno-li-voiti.html">Главная страница</a></title>
</head>
<body bgcolor="#e3e5f8" text="#FF0055">
<h1>Главная страница</h1>
Содержимое сайта - "Главная страница (content.html)"
</body>
</html>
</p><p>Код файла «autor.html»
:</p><p>Вот такой результат у меня вышел:</p>
<p>Воспользуемся атрибутами «frame»
и запретим вручную растягивание фреймов и уберем скролл в файле «index.html»
.</p><p>
<frameset rows="15%,*,15%">
<frame src="top.html" scrolling ="no" noresize>
<frameset cols="25%,75%">
<frame src="menu.html"scrolling ="no" noresize>
<frame src="content.html" name="main"scrolling ="no" noresize>
</frameset>
<frame src="footer.html" noresize>
</frameset>
</p><p><b>○ что делать если фреймы не поддерживаются браузером?<br></b><br>
Можно вывести сообщение пользователю, что его браузер не поддерживает фреймы. Для этого вставьте тег <noframes>
вовнутрь конструкции <frameset>
:</p><p>
<frameset rows="15%,*,15%">
<noframes>]]>
○ Плавающий фрейм
Если вам нужно вставить фреймовое окно прямо в страницу, в которой нет фреймовой структуры, для этого существует тег «iframe»
* атрибуты тега «iframe»
- src
- путь к открываемой странице
- width
- ширина плавающего фрейма
- height
- высота плавающего фрейма
- scrolling
- полоса прокрутки
- no
- никогда не показывать полосу прокрутки
- yes
- всегда показывать
- auto
- показывать при необходимости
- align
- выравнивание плавающего фрейма
- left
– слева
- right
– справа
- top
– выше
- bottom
– ниже
- frameborder
- рамка вокруг плавающего фрейма
- 1
- включить рамку
- 0
- выключить рамку
Вот так будет выглядеть тег «iframe»
с атрибутами:
Если браузер не поддерживает фреймы, можно вставить текст «УПС! Ваш браузер не поддерживает фреймы.
» между тегами
.
Это будет выглядеть вот так:
Для примера давайте добавим к файлу «content.html»
плавающий фрейм:
Главная страница
Главная страница
Содержимое сайта - "Главная страница (content.! Ваш браузер не поддерживает фреймы.
Предыдущая запись
Следующая запись
В любом редакторе текста сделайте новый текстовой файл.
Введите главные теги, не считая тегов
, которые в файле, описывающем фреймы, не употребляются. В тегах
заголовка укажите - Компания SD:
Компания SD
Заместо тегов
в файле, описывающем фреймы, употребляется пара тегов
с атрибутами rows либо cols, определяющими, как делится экран - по горизонтали либо по вертикали. В качестве значений этих атрибутов можно использовать числовое значение высоты либо ширины фрейма в пикселах либо в процентах от 1% до 100%. К примеру, если вы желаете поделить окно браузера по горизонтали на два равных по размеру фрейма, то код HTML должен быть таким:
