Первый фрейм. Создание фреймов

Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.

Создание фреймов

Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:

Пример: Структура HTML-документа с фреймами

• Попробуй сам »

frame_top
frame_left	frame_right

В приведенном примере страница содержит три области, в каждую из которых первоначально загружаются HTML-документы frame_top.html, frame_left.html и frame_right.html. Помимо HTML-документов, фрейм может содержать и графику. Для этого необходимо указать адрес соответствующего изображения в атрибуте src , например src="image.gif" . Обратите внимание, что элемент используется без закрывающего тега.
Внутри контейнера могут содержаться только теги или другой набор фреймов, охваченный тегами и .
Тег имеет следующие атрибуты:

• rows — описывает разбиение страницы на строки:
• cols — описывает разбиение страницы на столбцы:

Области, полученные в результате такого разбиения страницы, и будут являться фреймами. Отсутствие этих атрибутов определяет один фрейм, который займет все окно браузера.

В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:

• cols="20%, 80%" — окно браузера разбивается на две колонки с помощью атрибута cols , левая колонка занимает 20%, а правая 80% окна браузера.
• rows="100, *" окно браузера разбивается на два горизонтальных окна с помощью атрибута rows , верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.

Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols , левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами </b> и <b> . Все, что находится между тегами </b> и <b> , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер </b> , тогда все пользователи смогут увидеть его веб-страницу.<br> Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег <b><frame> </b> . Атрибут <b>src </b> задает документ, который должен отображаться внутри данного фрейма, например: <frame src="frame_top.html">. Если атрибут <b>src </b> отсутствует, отображается пустой фрейм.</p> <h2>Границы или пространство между фреймами</h2> <p>По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.<br> Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента <b><frameset> </b> , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом <b>border </b>. По умолчанию значение толщины границы равно пяти.<br> Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту <b>frameborder </b>. Атрибут <b>frameborder </b> может принимать только два противоположных значения. Если значение атрибута <b>frameborder </b> равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута <b>frameborder </b> различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут <b>frameborder </b>, а для некоторых браузеров требуется еще добавить атрибут <b>framespacing </b> со значением «0»:</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>В следующем примере убираем границу между фреймами:</p> <h3>Пример: Убираем границу между фреймами</h3> <ul><li>Попробуй сам »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;"> frame_left </td> <td style="width: 90%;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 cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Если вы удалите границу между фреймами, посетители не смогут изменять размер фрейма в браузере. Вы можете также не допустить изменения размера фрейма, сохранив границы, используя атрибут <b>noresize </b>:</p><p> <frame src="frame_left.html" noresize> </p><p>С помощью атрибута <b>bordercolor </b> можно изменить цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.<br> Ниже приведен пример html-страницы, которая содержит описанные выше атрибуты управления границей фрейма: цвет границы — красный, изменять размер верхнего фрейма нельзя:</p> <h3>Пример: Управление границей фреймов</h3> <ul><li>Попробуй сам »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid red;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="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Если вы хотите расположить страницу, отображаемую внутри фрейма, ближе к его границам, или, наоборот, отодвинуть дальше, измените атрибуты <b>marginheight </b> и <b>marginwidth </b> тэга <b><frame> </b> . Атрибут <b>marginheight </b> определяет отступ между содержимым фрейма и его верхней и нижней границами. Синтаксис:</p><p> <frame marginheight="число"> </p><p>Атрибут <b>marginwidth </b> определяет отступ между содержимым фрейма и его правой и левой границами. Синтаксис:</p><p> <frame marginwidth="число"> </p><p>Данная строка html, например, располагает отображаемую страницу вплотную к границе фрейма:</p> <p>Если страница отображает нежелательную для вас полосу прокрутки, вы можете решить эту проблему, указав атрибут <b>scrolling </b>="no" в тэге <b><frame> </b> . Но учтите, что если фрейм будет недостаточно большим, чтобы отобразить все содержимое страницы, то у посетителя не будет никакой возможности прокрутить отображаемую страницу.</p> <h2>Ссылки внутри фреймов</h2> <p>Переход по ссылке в обычном HTML-документе осуществляется следующим образом: нажимаете ссылку и текущий документ заменяется новым в текущем либо в новом окне браузера. При использовании фреймов схема загрузки html-документов отличается от обычной и главное отличие — это возможность загружать html-документ в один фрейм из другого фрейма.<br> Для загрузки документа в определенный фрейм используется атрибут <b>target </b> тега <b><a> </b> . В качестве значения атрибута <b>target </b> используется имя фрейма, в который будет загружаться документ, указанный атрибутом <b>name </b> тега <b><frame> </b> . Стоит также отметить, что имя фрейма должно начинаться либо с цифры либо с латинской буквы. Следующие имена используются в качестве зарезервированных:</p> <p>Для внешних ссылок следует задавать в качестве значения для атрибута target либо _top , либо _blank , для того, чтобы сторонние проекты отображались не в ваших фреймах, а занимали полное окно браузера.</p> <p>В следующем примере изображен HTML-документ, в правый фрейм которого загружается страница по ссылке, помещенной в верхний фрейм. Ссылка на документ, который откроется в правом фрейме:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Правому фрейму присваивается имя <i>frame_right </i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Чтобы документ загружался в указанный фрейм, используется конструкция <i>target="frame_right" </i>, как показано в примере:</p> <h3>Пример: Ссылка на другой фрейм</h3> <ul><li>Попробуй сам »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Ссылка на другой фрейм</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Ваш браузер не отображает фреймы</p>

Плавающие фреймы

Элемент

Пример фреймовой структуры

Окно браузера может быть разделено на фреймы, т.е. на области расположенные рядом друг с другом. В каждую из этих областей можно загружать свои html-страницы. На примере будет понятнее, создайте новый файл с названием index.html со следующим кодом:

Фреймы в html

В окне браузера это будет выглядеть так:

Окно браузера разделено на 3 части. Надо сказать, что это единственный случай, когда в html-документе отсутствуют теги . Вместо них используются теги , которые и указывают браузеру разбить окно на несколько областей - фреймов.

Сколько будет таких областей и как они будут расположены зависит от двух параметров тега :

• rows - указывает разбить окно на горизонтальные области. Причем, сколько значений у этого параметра, столько и областей. В нашем примере rows="30%, 10%, 60%" , т.е. три горизонтальные области: ширина первой - 30% от ширины экрана, ширина второй - 10%, а третьей - 60%.
• cols - указывает разбить окно на вертикальные области.

Внутри тегов располагаются одиночные теги , причем их должно быть столько, сколько задано областей. Без параметров эти теги бесполезны.

Мы рассмотрим параметры тега на примерах.

Вот мы и рассмотрели все параметры тега .

Последний штрих: уберем рамки фреймов. Для этого в тег добавим два параметра border="0" frameborder="0" .

Фреймы в html

Теперь наша страница выглядит так:

Плюсы и минусы фреймов

Теперь, когда вы имеете представление о фреймах, пришло время сказать о достоинствах и недостатках сайтов с фреймовой структурой.

Безусловным преимуществом является сокращение количества загружаемой на компьютер пользователя информации. Ведь шапка и меню сайта загружаются только один раз, а далее меняется только контент. Конечно, это сокращает время загрузки.

Но недостатков гораздо больше. Во-первых, в структуре фреймов легко запутаться.

Во-вторых, наше меню лежит в отдельном файле. А это значит, если пользователь нашел, например, вашу страницу content.html через поисковую систему, то он сможет прочитать только ее, ведь никаких ссылок и пунктов меню на этой странице нет.

И наконец, фреймовую структуру поддерживают не все браузеры. Поэтому существуюте теги , они располагаются внутри тегов и содержат альтернативную информацию для браузеров не поддерживающих фреймы. По сути вам придется выполнить двойную работу и создать две версии сайта: с фреймами и без них.

Отсюда вывод - не используйте фреймы без острой необходимости.

Примеры фреймовых структур

Как вы помните за разделение на фреймы отвечают два параметра: rows и cols . Комбинируя их, можно разбить окно на фреймы любым образом. Примеры такого разбиения мы и рассмотрим.

Пример 1:

Фреймы в html

Получим три вертикальных фрейма. Ширина первого - 150 пикселов, второго - 300, а третьего - все остальное пространство окна.

Результат:

Пример 2:

Фреймы в html

Получим два вертикальных фрейма. Ширина первого принимается равной за единицу, а второй - в два раза шире первого (т.е. 33% и 67% от ширины окна).

Результат:

Пример 3:

Фреймы в html

Получим два горизонтальных фрейма. Высота первого - 100 пикселов, а второго - все остальное пространство.
Второй горизонтальный фрейм разобьем на два вертикальных: один шириной 200 пикселов, а второй будет занимать все остальное место. Это достигается с помощью вложенных тегов .

Окно браузера может быть разделено на части, которые называются фреймами, иногда кадрами; можно их назвать и подокнами. В каждую такую часть окна браузера, т.е. фрейм, может быть загружен отдельный HTML документ. Рассмотрим пример окна браузера с тремя фреймами.

В каждый фрейм в этом случае для наглядности загружен простой HTML документ, сообщающий номер фрейма и название файла, хранящего его содержимое. Если в фрейм будет загружен реальный документ, который не помещается полностью в нем, то у фрейма (внимание, не у всего окна!) появятся вертикальная и/или горизонтальная полосы прокрутки в зависимости от того, по горизонтали и/или по вертикали не помещается содержимое документа.
Например, дизайн и структура вашего сайта таковы, что есть одинаковые элементы, повторяющиеся на каждой странице сайта: название, навигационное меню, адрес в конце страницы или какие-то иные подобные элементы. Изменяется только содержание разделов. Тогда страницы можно разбить на части таким образом, чтобы неизменяемые части были помещены в отдельные фреймы, а еще один фрейм выделить для того, чтобы в него загружалось содержимое нужного раздела после щелчка на соответствующей ссылке, например, из меню.
Это дает экономию в скорости загрузки, так как одинаковые части страниц сайта повторно не загружаются, а просто все время отображаются в отведенных им фреймах.

Создание структуры фреймов элемент FRAMESET

Структура разбивки окна хранится в отдельном HTML документе, он и называется документом с фреймами. Структура фреймов формируется при помощи специального элемента FRAMESET. Обычный документ имеет один раздел HEAD и один раздел BODY, тогда как в документе с фреймами раздел BODY заменяется описанием структуры фреймов, Т.е. разделом FRAMESET.
В раздел FRAMESET может быть добавлен элемент NOFRAME с альтернативным содержанием для отображения в браузерах, не поддерживающих фреймы, или в браузерах с отключенной поддержкой фреймов. Такие браузеры просто не поймут структуры FRAMESET и NOFRAME, а отобразят помещенный внутри них текст.