Что такое фреймы в html. Создание структуры на основе Frameset и его атрибутов Cols и Rows. Объединение столбцов и строк
Итак, фреймы.. для чего они нужны и какую пользу в себе несут? Об этом я и постараюсь рассказать в этой главе, ну и естественно о том, как их внедрять и работать с ними..
Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько 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="/smart-tv/otmetit-imya-cheloveka-v-kontakte-kompyuternaya-pomoshch-kak/">нужный текст</a> между <b><iframe> </iframe>
</b> и <a href="/routers/kak-obnovit-sotovye-dannye-na-iphone-nadpis-carrier-naprotiv-stroki/">данная надпись</a> будет выводится на экран, в том случае если браузер не поддерживает фреймы.</p>
<p>
<iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1"><b>Извините, но Ваш браузер не поддерживает фреймы..
</b></iframe>
</p>
<ul><p>Перед тем как начать создавать страницу с использованием фрёймовой структуры проанализируйте её макет, размеры каждого окна, наличие или отсутствие в них полос прокруток и т. д. После этого можно создавать подключаемые <a href="/smartphone/html-document-pdf-chem-otkryt-kak-otkryt-vash-fail-html-kak-otkryt-fail-html/">HTML файлы</a> особо не переживая за их взаимное расположение относительно друг друга..</p><p>Используйте тег <b><noframes>
</b> . Помните что если в Вашем браузере сайт работает и отображается так как Вы и задумывали то у других пользователей дела могут обстоять иначе!</p>
</ul>
<p>Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали, как установить favicon на сайт . В данной статье я бы хотел рассказать, что такое <b>фреймы в html
</b>. В переводе с англ. фрейм означает "рамка". С точки зрения html, фрейм
— это некая выделенная область на странице, которая ссылается на другую страницу и выводит её содержимое (той самой другой страницы или сайта). Стоит сразу отметить, что фреймы не получили <a href="/internet/instagramm-uvelichenie-podpischikov-luchshih-taktik-razvitiya-v-instagram/">большого развития</a> и сейчас почти не используются, разве что в каких-то специализированных проектах.Всё то же самое можно сделать с <a href="/windows/kak-sdelat-plavnuyu-animaciyu-obektov-v-html-plavnaya-animaciya/">помощью CSS</a> и Javascript.<br>
С помощью фрейма страницу можно разбить на несколько блоков, каждый из которых будет независим от других. Давайте создадим основной документ index.html
и два вспомогательных (внутренних), содержимое которых как раз и будет отображаться на основной странице: menu.html
(будет содержать разметку навигации по сайту) и content.html
(контент сайта). Разметка index.html
будет иметь следующий вид:</p><p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Фрэймы в HTML</title>
</head>
<frameset cols="40%, *">
</frameset>
</html>
</p><p>Обращаю ваше внимание, что здесь отсутствует тег <body>, вместо него появился тег <frameset>
. У данного тега есть несколько атрибутов:</p>
<ul><li>cols
— <a href="/apple/pyanyi-form-php-proverka-formy-na-adekvatnost-vvodimyh-dannyh-php-self-v/">данный атрибут</a> указывает, что фреймы будут помещены в столбцы. В значении данного атрибута через запятую указываются размеры фреймов. В нашем случае у нас будет 2 фрейма. Ширина первого будет 40% от ширины страницы, * означает всё остальное пространство страницы (в <a href="/operating-systems/zashchita-lichnyh-dannyh-na-telefone-na-sluchai-poteri-ili-krazhi/">данном случае</a> можно было написать и 60%). Также размер можно задавать и в пикселях.</li>
<li>rows
— данный атрибут указывает, что фреймы будут помещены в строки.</li>
</ul><p>Содержимое файла menu.html
имеет вид:</p><p>
<ul>
<li>1 пункт меню</li>
<li>2 пункт меню</li>
<li>3 пункт меню</li>
</ul>
</p><p>Содержимое файла content.html
имеет вид:</p><p>
<div>
<h1>Тестируем фреймы</h1>
<p>Абзац текста</p>
</div>
</p><p>Чтобы вывести содержимое другого документа нужно использовать тег <frame>
с атрибутом src
, в значении которого указывается путь до файла. Также можно указывать url сайта, который мы хотим вывести в этом блоке. Для начала давайте выведем наши страницы menu.html
и content.html
:</p><p>
<frameset rows="50%, *">
<frame src="menu.html"/>
<frame src="content.html"/>
</frameset>
</p><p>Обязательно наберите <a href="/modems/mts-puk-kod-po-umolchaniyu-proverka-dannyh-i-verifikaciya-klienta-v-ofise/">данный код</a>, чтобы посмотреть как это всё работает.</p>
<p>У тега frame
существуют следующие атрибуты:</p>
<ul><li>src
— путь до страницы или же url-адрес сайта (страницы сайта). Стоит отметить, что у некоторых сайтов существует защита от встраивания,</li>
<li>name
— присваивает фрейму имя, с помощью которого данным фреймом можно управлять,</li>
<li>noresize
— запрещает изменять размер фрейма,</li>
<li>scrolling
— возможность прокручивать содержимое.</li>
</ul><p>В качестве <a href="/windows/urok-animacii-novichkam-s-chego-nachat-izuchenie-flesh-razbiraem-domashnee/">домашнего задания</a> создайте 2 фрейма и разместите их в строку. В качестве значения атрибута src укажите путь до сайтов.</p>
<p><i>
</i> 07.12.2015</p>
<p>Пока нет</p>
<br><p>Всем привет!<br>
Продолжаем усердное изучение <a href="/linux/bazovye-znaniya-html-css-osnovy-html-dlya-nachinayushchih-na-ponyatnom/">основ 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://i0.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>Если хотите разделить браузер еще на несколько частей, допишите через запятую <a href="/internet/kakoe-razreshenie-u-iphone-7-sravnenie-gabaritnyh-razmerov-razmerov-ekrana-i/">дополнительные размеры</a>, вот, например, так:</p><p>
<frameset cols="30%,20%,10%,40%">
</p><p>В итоге первая <span>вертикальная колонка
</span> будет шириной 30%, вторая - 20%, третья - 10%, четвертая - 40%.</p>
<p><img src='https://i2.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://i0.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>
Вот, например, нам нужно загрузить в одном окне браузера три <a href="/apple/pribavit-masshtab-stranicy-nastroika-v-raznyh-brauzerah-masshtabirovanie/">разных страницы</a> «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://i2.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://i0.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="/the-device/pochemu-ne-otkryvaetsya-startovaya-stranica-yandeks-kak-sdelat-glavnuyu-stranicu/">Главная страница</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.! Ваш браузер не поддерживает фреймы.
Предыдущая запись
Следующая запись
Начнем с фреймовой структуры. В чем ее суть? У нас есть возможность в документе, который мы загружаем в браузер, организовать специальные области оконного типа. В эти области можно загружать другие отдельные документы (веб-страницы).
Зачем это нужно? Поскольку документы загружены в свои отдельные области, то ведут они себя независимо. Т.е в одном документе можно что-то делать, при этом другие документы неизменны.
Где можо встретить такие фреймовые структуры? Это файлы помощи, справки (с расширением.chm).
Приведу простой пример документа с фреймами:
Пример фреймов
Элемент frameset
. Его задача - охватить область просмотра и разделить ее на отдельные области. Т.е. дать указание браузеру, в каком соотношении и как (горизонтально или вертикально) мы делим эти области.
Элемент frame
– описывает каждую такую отдельную область. Тег одиночный. Он занимает те размеры, которые указаны во frameset.
Элемент noframes
- отображается, если браузер не поддерживает фреймы.
Обратите внимание, что элемента body нет. Вместо него используется элемент frameset. Это и есть одна из причин, по которой фреймы уже не применяются на сайтах.
Атрибуты элемента frameset
- cols - вертикальное деление страницы на области просмотра.
- rows - горизонтальное деление страницы на области просмотра.
