Итак, фреймы.. для чего они нужны и какую пользу в себе несут? Об этом я и постараюсь рассказать в этой главе, ну и естественно о том, как их внедрять и работать с ними..
Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько 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> выводит текст, заключенный в него в том случае, если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках. Если же фреймы поддерживаются браузером пользователя, то <a href="/sozdat-programmu-elementa-formy-dlya-html-vvod-dannyh-polya/">данный тег</a> попросту игнорируется.</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-dokument-v-programme-ms-word-sohranenie-dokumenta-v-vorde/">нужный текст</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="/chem-chitat-faila-s-rasshireniem-html-kak-otkryt-fail-html/">HTML файлы</a> особо не переживая за их взаимное расположение относительно друг друга..</p><p>Используйте тег <b><noframes>
</b> . Помните что если в Вашем браузере сайт работает и отображается так как Вы и задумывали то у других пользователей дела могут обстоять иначе!</p>
</ul>
<p>5.6. Плавающие фреймы</p><p>Браузеры <a href="/download-veb-ustanovshchik-ispolnyaemyh-bibliotek-obnovlyaem/">последних версий</a> позволяют использовать плавающие фреймы, добавляемые с помощью элемента IFRAME. Плавающий фрейм находится внутри обычного</p><p>документа, не содержащего тегов <FRAMESET>. </FRAMESET>, и позволяет добавлять на страницу любые другие независимые документы. В элементе I FRAME можно указывать те же атрибуты, что и в элементах, описывающих обычные фреймы. Кроме того, можно использовать <a href="/button-atributy-kogda-sleduet-ispolzovat-element-button-opisanie-parametrov/">следующие атрибуты</a>: width, height, hspace, vspace, align, значения которых совпадают со значениями соответствующих атрибутов элемента IMG.</p><p><iframe src=page.HTML width="50%" height="300" hspace="5" vspace="5" align="left"></p><p>Ваш браузер не поддерживает плавающие фреймы!</p><p>На рис. 5.8 изображено окно браузера, содержащее плавающий фрейм.</p><p><b>Рис. 5.8.
</b> Пример плавающего фрейма</p><p>Если браузер не поддерживает плавающие фреймы, то элемент IFRAME будет проигнорирован. Для таких браузеров можно указать альтернативный текст, расположенный между парой тегов <IFRAME> и </IFRAME>.</p>
Из книги
C++
<span> автора
Хилл Мюррей
</span>
<p>6.3 Плавающие и Целые
Преобразования плавающих значений в целочисленный тип имеет склонность быть машинно-зависимым. В частности, напраление усечения <a href="/kak-otricatelnye-chisla-predstavleny-v-kompyutere-chut-bolee-podrobnoe/">отрицательных чисел</a> различается от машины к машине. Если предоставляемого пространства для значения не хватает, то</p>
<h3></h3>
Из книги
<a href="/photoshop-ekspress-adobe-photoshop-express-udobnyi-fotoredaktor-funkcii-i-instrumenty/">Adobe Photoshop</a> CS3
<span> автора
<span>
Завгородний Владимир
</span>
<p>Плавающие палитры
На плавающих палитрах размещается самая разнообразная информация и элементы управления. Каждая палитра содержит «тематическую» подборку настроек, так что все одновременно они не нужны при работе и можно переключаться от одного набора палитр к</p>
<h3></h3>
Из книги
<a href="/programmy-dlya-verstki-zhurnala-programma-v-rstka-gazety-ili/">Adobe InDesign</a> CS3
<span> автора
<span>
Завгородний Владимир
</span>
<p>Текстовые фреймы
Одно из правил, которое следует накрепко запомнить дизайнерам, имеющим опыт работы в других программах: текст не может существовать сам по себе. В <a href="/sovremennye-graficheskie-redaktory-kakoi-graficheskii-redaktor-samyi-luchshii/">графических редакторах</a> (будь то Photoshop, Illustrator или <a href="/kakaya-programma-prednaznachena-dlya-redaktirovaniya-rastrovogo/">Corel Draw</a>) мы можем щелкнуть кнопкой мыши в любом месте</p>
<h3></h3>
Из книги
AutoCAD 2009 для студента. Самоучитель
<span> автора
<span>
Соколова Татьяна Юрьевна
</span>
<p>Связанные текстовые фреймы
При работе с большими фрагментами текста одного фрейма будет недостаточно. Во-первых, мы можем захотеть сверстать текст в несколько колонок. Это можно решить с помощью настроек собственно фрейма (об этом будет сказано в главе 13) или же создать</p>
<h3></h3>
Из книги
Интернет решения от доктора Боба
<span> автора
Сворт Боб
</span>
<p>Объекты и фреймы
Как мы уже говорили в главе 9, фреймы используются для размещения текста. В главе 12 мы узнаем, как (и зачем) использовать фреймы для размещения <a href="/formatom-graficheskogo-faila-nazyvaetsya-formaty-graficheskih-failov/">графических файлов</a>. В этой же главе нам предстоит понять, что не существует сколько-нибудь значительной разницы</p>
<h3></h3>
Из книги
AutoCAD 2009. Начали!
<span> автора
<span>
Соколова Татьяна Юрьевна
</span>
<h3></h3>
Из книги
Популярный самоучитель работы в Интернете
<span> автора
<span>
Кондратьев Геннадий Геннадьевич
</span>
<p>2.1.8.1. Фреймы
Фреймы это в действительности <a href="/chem-chitat-html-faily-html-rasshirenie-faila/">расширение HTML</a>+, которое не поддерживается некоторыми <a href="/prosmotr-web-stranic-vypolnyaetsya-programmami-brauzerami-brauzery---eto/">web браузерами</a>. Фреймы это свойство разделения вашей <a href="/pochemu-hd2-pishet-veb-stranica-nedostupna-pochemu-ne-zahodit-na-yutub-youtube/">web страницы</a> на две или более страниц. Основное свойство фреймом то, что каждый фрейм может иметь свое <a href="/kak-napechatat-nerazryvnyi-probel-probel-v-html-kak-instrument/">собственное имя</a> и может</p>
<h3></h3>
Из книги
Фреймы для представления знаний
<span> автора
Мински Марвин
</span>
<p>Плавающие видовые экраны
Когда пользователь впервые переключается в пространство листа, <a href="/sony-xperia-e5-zabyl-graficheskii-parol-razblokirovka-ekrana-sony-xperia-kogda-zabyli/">графический экран</a> пуст и представляет собой «<a href="/kak-ubrat-chistyi-list-v-dokumente-kak-udalit-stranicu-s/">чистый лист</a>», где будет компоноваться чертеж. В пространстве листа создаются перекрывающиеся (плавающие) видовые экраны, содержащие</p>
<h3></h3>
Из книги
Интернет – легко и просто!
<span> автора
<span>
Александров Егор
</span>
<p>Фреймы и формы
Рано или поздно вам встретятся страницы, содержащие в себе не только гиперссылки, но и фреймы с формами.ФреймыНередко интернет-страницы разделены (по замыслу разработчиков) на несколько независимых частей, которые называются фреймами . По сути, на</p>
<h3></h3>
Из книги
Самоучитель работы на Macintosh
<span> автора
Скрылина Софья
</span>
<p>Глава первая
Фреймы
Мне представляется, что теоретические исследования, проводимые в области <a href="/kak-sozdaetsya-iskusstvennyi-intellekt-kak-sozdayut/">искусственного интеллекта</a> (ИИ) и психологии в целом были недостаточно общими для того, чтобы объяснить либо с практической точки зрения, либо феноменологически эффективность</p>
<h3></h3>
Из книги
AutoCAD 2009. <a href="/avr-uchebnyi-kurs-upravlyaemyi-vektor-preryvaniya-oshibka-obrabotki/">Учебный курс</a>
<span> автора
<span>
Соколова Татьяна Юрьевна
</span>
<p>3.8. Фреймы в качестве парадигм
«До тех пор, пока не была создана эта парадигма схоластов (средневековая теория „первого толчка“), маятники как таковые не были известны людям, а ученые видели в них только качающиеся камни. Существование маятников было открыто благодаря</p>
<h3></h3>
Из книги
AutoCAD 2008 для студента: популярный самоучитель
<span> автора
<span>
Соколова Татьяна Юрьевна
</span>
<p>Фреймы
Фреймы позволяют разделить веб-страницу на несколько независимых окон и в каждом из них разместить <a href="/offlain-prosmotr-zagruzhat-otdelnye-veb-stranicy-vyhod-iz/">отдельную веб-страницу</a>. Спор о том, нужно это или нет, продолжается. Я скажу одно: при умелом использовании фреймов можно создать страницу-шедевр, а в противном</p>
<h3></h3>
Из книги
HTML, XHTML и CSS на 100%
<span> автора
Квинт Игорь
</span>
<p>5.1.10. Плавающие и внутристрочные объекты
Текстовый процессор Pages различает два вида объектов: плавающие и внутристрочные.Плавающие объектыПлавающие объекты не имеют привязки к тексту, ни форматирование символов, ни форматирование абзацев не влияет на положение объекта</p>
<h3></h3>
Из книги
автора
<p>Плавающие видовые экраны
Когда пользователь впервые переключается в пространство листа, графический экран пуст и представляет собой «чистый лист», где будет компоноваться чертеж. В пространстве листа создаются перекрывающиеся (плавающие) видовые экраны, содержащие</p>
<h3></h3>
Из книги
автора
<p>Плавающие видовые экраны
Когда пользователь впервые переключается в пространство листа, графический экран пуст и представляет собой «чистый лист», где будет компоноваться чертеж. В пространстве листа создаются перекрывающиеся (плавающие) видовые экраны, содержащие</p>
<h3></h3>
Из книги
автора
<p>Глава 5
Фреймы
5.1. Создание фреймов5.2. Границы фрейма5.3. Полосы прокрутки5.4. Ссылки внутри фреймов5.5. Изменение размеров фреймов5.6. Плавающие фреймы5.7. Управление пространством внутри фрейма5.8. Достоинства и недостатки фреймовФреймы (frames) – это HTML-элементы, позволяющие</p>
<p>Фреймы, которые размещаются в обычном HTML-документе в пределах тега <i><
</i> BODY<i>>
</i></BODY<i>>
</i> с использованием тега <i><
</i> IFRAME<i>>
</i></IFRAME<i>>
</i>, называются плавающими, его также называют строчным от сокращения английского термина «inline frame». Задание плавающего фрейма аналогично описанию тега <i><
</i> IMG<i>>
</i>. Кратко перечислим только допустимые атрибуты тега<i>:
</i></p>
<p><i>SRC
</i>– задает URL-адрес загружаемого файла;</p>
<p><i>WIDTH
</i>, <i>HEIGHT
</i> – определяют ширину и высоту плавающего фрейма;</p>
<p><i>ALIGN
</i> – устанавливает выравнивание фрейма относительно окна браузера;</p>
<p><i>MARGINWIDTH
</i>, <i>MARGINHEIGHT
</i>, <i>FRAMEBORDER SCROLLING
</i>– назначают размеры свободных полей, вывод рамки фрейма и полос прокрутки;</p>
<p><i>NAME
</i>– задает имя фрейма, используемого при определении целевого фрейма.</p>
<p>В отличие от обычных фреймов, размеры плавающего фрейма не могут быть изменены посетителем страницы, поэтому атрибут NORESIZE не входит в число допустимых атрибутов тега <i><
</i> IFRAME<i>>
</i></p>
<p>Пример схемы HTML-документа, содержащего плавающий фрейм, приведен ниже, а его отображение в браузере представлено на рис. 4.9.</p>
<p>Рис. 4.9. HTML-документ с плавающим фреймом</p>
<p><HTML><HEAD></p>
<p><TITLE> плавающий фрейм</p>
<p></TITLE></HEAD></p>
<p><IFRAME NAME="plav" SRC="page2fl4.htm" MARGINWIDTH="30"</p>
<p>FRAMEBORDER="1" WIDTH="200" HEIGHT="200" ALIGN="center"></p>
<p><P>Содержимое основной части документа</P></p>
<p><P>Содержимое основной части документа</P></p>
<p><P>Содержимое основной части документа</P></p>
<p>Итак, в этой части главы вы узнали о фреймах и как их используют для разделения окна браузера на несколько независимых частей, в каждой из которых находится свой документ.</p>
<p>Работать с фреймами несложно. Для этого вместо <BODY> используется тег <i><
</i> FRAMESET<i>>
</i>,внутри которого определяются строки и столбцы фреймов. Каждый из них задается с помощью тега <i><
</i> FRAME<i>>.
</i>Кроме того, вы рассмотрели простую и сложную организацию фреймов, познакомились с плавающим фреймом и с его назначением.</p>
<br><p><i>Практическое задание
</i></p>
<p>РАЗМЕТКА WEB-СТРАНИЦЫ С ПОМОЩЬЮ ФРЕЙМОВ</p>
<p><b>1. Разметка web-страницы с использованием фреймов простой организации.
</b>Наберите в <a href="/vectr-prostoi-besplatnyi-redaktor-vektornoi-grafiki-onlain-i-dlya-pk-inkscape/">простом редакторе</a> «Блокнот» структуру гипертекстовой программы.</p>
<p>Фреймы простой структуры</p>
<br><br><p>После закрытия заголовка </HEAD<i>>
</i>вставьте тег <i><
</i> FRAMESET<i>>
</i> для создания шести фреймов на странице (две строки и три столбца) – значения атрибутов ROWS и COLSзадайте в процентах. В этом же теге используйте атрибуты задания ширины <a href="/kak-sdelat-cvet-ramki-v-html-primenenie-svoistva-border-prostoi-sposob/">рамок BORDER</a> и цвет рамок BORDERCOLOR. Сохраните изменения в файле и просмотрите <a href="/skachat-v-kontakte-onlain-kak-skachat-muzyku-iz-vkontakte-ispolzovanie/">исходный файл</a> в браузере. Есть ли разделительные границы между фреймами? И если нет, то почему?</p>
<p>Затем внутрь тега <FRAMESET> вставьте 6 тегов <FRAME> </FRAME>, соответственно количеству фреймов. Сохраните файл и просмотрите в браузере. Отметьте, что изменилось сейчас. Задайте значения для атрибута SRС (для каждого фрейма задайте название файла, содержащего страницы page1.htm, page2.htm и т. д., созданные в предыдущих <a href="/fotoshop-zadaniya-dlya-prakticheskih-zadanii-metodicheskie-rekomendacii-po/">практических заданиях</a>). Сохраните изменения и просмотрите в браузере.</p>
<p>Величину фреймов задайте сначала в относительных единицах, затем задайте в пикселах. Просмотрите разницу при задании этих значений в браузере.</p>
<p>Поэкспериментируйте: задайте <a href="/ekran-mobilnogo-ustroistva-harakterizuetsya-svoei-tehnologiei/">различные цвета</a> рамок для каждого фрейма.</p>
<p><b>2. Разметка web-страницы с использованием фреймов сложной организации.
</b>Используйте предыдущую страницу в качестве <a href="/optimalnoe-ispolzovanie-mysql-mysql-yavlyaetsya-paketom-s-otkrytymi-ishodnymi/">исходного текста</a> программы. Для этого сначала сохраните его в другом файле, а затем внесите изменения согласно рис. 4.10.</p>
<br><br><p>Рис. 4.11. Фреймовая структура для навигации по сайту</p>
<p><b><a href="/chto-vhodit-v-vneshnyuyu-pamyat-gibkie-magnitnye-diski-kontrolnye-voprosy/">Контрольные вопросы</a> и задания
</b></p>
<p>1. Что такое фрейм?</p>
<p>2. Для чего предназначен фрейм?</p>
<p>3. Какие этапы используются при создании простой организации фреймов?</p>
<p>4. В чем отличие простого HTML-документа от документа с фреймовой организацией?</p>
<p>5. Какие теги используют для оформления фреймов?</p>
<p>6. Какие атрибуты тега <i><
</i> FRAMESET<i>>
</i>определяют количество вертикальных и горизонтальных отрезков во фреймовом наборе?</p>
<p>7. Какие атрибуты предназначены для изменения параметров рамок фреймов?</p>
<p>8. Какая существует последовательность для задания параметров фреймов на странице?</p>
<p>9. Какие единицы используются для задания размеров фрейма?</p>
<p>10. Для чего предназначен тег <FRAME>?</p>
<p>11. Для чего используется атрибут NORESIZE тега <FRAME><i>?
</i></p>
<p>12. Перечислите остальные атрибуты тега <FRAME> и их назначения.</p>
<p>13. Как происходит оформление web-страницы фреймами простой организации?</p>
<p>14. Как происходит оформление web-страницы с использованием сложной организации фреймов?</p>
<p>15. Для чего используются атрибуты NAME и TARGET тега <FRAME>?</p>
<p>16. Перечислите зарезервированные имена фреймов.</p>
<p>17. Что такое целевой и базовый фрейм?</p>
<p>18. Назовите способ задания базового фрейма.</p>
<p>19. Какой фрейм является плавающим?</p>
<p>20. Как и где создается плавающий фрейм?</p>
<p>Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к <a href="/mac-os-x-peremeshchenie-i-kopirovanie-piktogramm-ostanovka-zagruzki-stranicy/">предыдущей странице</a>, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.<br>
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально <a href="/pochemu-ne-mogu-skachat-gugl-hrom-ne-ustanavlivaetsya-google-chrome/">известных проблем</a>. Они, например, сбивают с толку <a href="/referat-poiskovye-mashiny-poiskovye-mashiny/">поисковые машины</a>, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с <a href="/kak-osushchestvlyaetsya-poisk-v-poiskovyh-sistemah-poiskovaya/">поисковых систем</a>, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для <a href="/nastroika-faila-podkachki-windows-7-nachalnaya-pravilnye-razmery-faila-podkachki/">разных размеров</a> экранов и мобильных устройств.<br>
Несмотря на то, что проекты с фреймами встречаются во <a href="/internet-i-vsemirnaya-pautina-gipermarket-znanii-vsemirnaya-pautina/">всемирной паутине</a> все реже, <a href="/s-chego-nachat-izuchenie-css-luchshie-resursy-dlya-izucheniya-html-i-css/">изучение HTML</a> было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.</p>
<h2>Создание фреймов</h2>
<p>Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами <b><html>
</b>
и <b></html>
</b>
, а в контейнере <b><head>
</b>
располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега <b><body>
</b>
применяется <a href="/parnyi-teg-html-chto-takoe-html-tegi-i-atributy-validator-validator-w3c-struktura/">парный тег</a> <b><frameset>
</b>
(от англ. frame set – набор фреймов).<br>
В <a href="/anketnye-dannye-na-rabotu-obrazec-nyuansy-kotorye-sleduet-uchest-rabotodatelyu/">следующем примере</a> приведена структура HTML-документа с фреймами:</p>
<h3>Пример: Структура HTML-документа с фреймами</h3>
<ul><li>Попробуй сам »</li>
</ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid silver;background-color:blue;color: white;" colspan="2">frame_top</td>
</tr><tr><td style="border-right: 4px solid silver;width: 20%;background-color:green;color: white;">frame_left</td>
<td style="width: 80%;background-color:lime;color: white;">frame_right</td>
</tr></table><p> <!DOCTYPE html>
<html><br><head><br><meta charset="UTF-8">
<title>Документ с фреймами</title>
</head>
<frameset rows="100, *">
<frame src="frame_top.html">
<frameset cols="20%, 80%">
<frame src="frame_left.html">
<frame src="frame_right.html">
</frameset>
<noframes>
]]>
