Фреймы в html
Фреймы в HTML» – десятый урок учебника HTML. В этом уроке мы поговорим об использовании фреймов в HTML, разберем фреймовую структуру и научимся создавать фреймы самостоятельно.
В современном интернет остается все меньше сайтов, которые используют фреймовую структуру, но иногда использование фреймов может упростить некоторые задачи, возникающие при создании сайта.
Особенности фреймов в HTML.
Фреймы позволяют разделить окно браузера на несколько независимых друг от друга зон и отобразить в каждой из них отдельный блок информации. Идея использования фреймов HTML может показаться очень заманчивой, ведь можно сохранить общую для всех страниц часть кода в отдельном файле и подгружать ее через фрейм.
Но ведь аналогичную операцию можно выполнить посредствам PHP блоков, что само по себе намного проще и эффективнее, если конечно ваш хостинг способен обрабатывать PHP инструкции.
У использования фреймов есть один огромный недостаток, который полностью перечеркивает все возможные достоинства этого метода. А именно – использование фреймов очень сильно затрудняет индексирование сайта поисковыми машинами. А поисковая оптимизация – неотъемлемый этап жизни для любого сайта.
Ввиду сказанного выше сам я фреймы никогда не использую и вряд ли буду.
Но для общего развития стоит сказать несколько слов о создании фреймов в HTML.
Создание фреймов.
В создании фреймов нет ничего трудного. Вместо тела документа <body></body> используется конструкция вида<frameset></frameset>.
Вообще структура кода при создании фреймов очень напоминает табличную HTML структуру:
для начала мы разбиваем все окно браузера на несколько областей, по горизонтали <FRAMESET cols="20%, 80%"></FRAMESET> или по вертикали <FRAMESET rows="60%, 40%"></FRAMESET>. Значения пропорций можно указывать как в процентах, так и простым числом, отвечающим за размер в пикселах.
Далее мы можем разбить каждое окно в отдельности на произвольное количество частей, конструкцией вида<FRAMESET rows="10%, 20%,70%"></FRAMESET> или же подгрузить файл в фрейм конструкцией <FRAME src="frame1.html">.
Для большей наглядности приведем небольшой пример:
<HTML> <HEAD> </HEAD> <FRAMESET cols="30%, 70%"> <FRAMESET rows="100, 200"> <FRAME src="fr1.html"> <FRAME src="fr2.html"> </FRAMESET> <FRAME src="imf_1.gif"> </FRAMESET> </HTML> |
|
Идея очень проста. Для начала создается основной фрейм, который покрывает собой всю страницу. В этрибутах данного фрейма мы указываем, что он будет разбит на два подфрейма в соотношении 3/7. Далее, перед закрытием основного фрейма, мы создаем еще одно окно внутри левой части основного фрейма и в его атрибутах указываем, что он будет также разбит на два подфрейма по вертикали и с заданными параметрами высоты (100 и 200 px).
После разбиения экрана на 3 основных фрейма мы начинаем встраивать в них внешние файлы. В два левых фрейма мы вставляем html документы, а в правый - изображение.
Это важно. Здесь стоило бы заметить, что заполнение фреймов начинается с самого левого, самого верхнего и самого младшего фрейма. Как вы можете видеть в примере первым делом заполняется FRAME1, т.к. он является самым младшим фреймом, расположенным в левом верхнем углу. Соответственно последним заполняется FRAME3, т.к. он самый старший фрейм в созданной нами иерархии. |
Плюсы и минусы фреймов Теперь, когда вы имеете представление о фреймах, пришло время сказать о достоинствах и недостатках сайтов с фреймовой структурой. Безусловным преимуществом является сокращение количества загружаемой на компьютер пользователя информации. Ведь шапка и меню сайта загружаются только один раз, а далее меняется только контент. Конечно, это сокращает время загрузки. Но недостатков гораздо больше. Во-первых, в структуре фреймов легко запутаться. Во-вторых, наше меню лежит в отдельном файле. А это значит, если пользователь нашел, например, вашу страницу content.html через поисковую систему, то он сможет прочитать только ее, ведь никаких ссылок и пунктов меню на этой странице нет. И наконец, фреймовую структуру поддерживают не все браузеры. Поэтому существуюте теги <noframes> </noframes>, они располагаются внутри тегов <frameset> </frameset> и содержат альтернативную информацию для браузеров не поддерживающих фреймы. По сути вам придется выполнить двойную работу и создать две версии сайта: с фреймами и без них. Отсюда вывод - не используйте фреймы без острой необходимости. Примеры фреймовых структур Как вы помните за разделение на фреймы отвечают два параметра: rows и cols. Комбинируя их, можно разбить окно на фреймы любым образом. Примеры такого разбиения мы и рассмотрим. Пример 1:
<html>
<head>
<title>Фреймы в html</title>
</head>
<frameset cols="150, 300, *" >
<frame>
<frame>
<frame>
</frameset>
</html>
Получим
три вертикальных фрейма. Ширина первого
- 150 пикселов, второго - 300, а третьего -
все остальное пространство
окна.
Результат:
Пример 2:
<html>
<head>
<title>Фреймы в html</title>
</head>
<frameset cols="1*, 2*" >
<frame>
<frame>
<frame>
</frameset>
</html>
Получим
два вертикальных фрейма. Ширина первого
принимается равной за единицу, а второй
- в два раза шире первого (т.е. 33% и 67% от
ширины окна).
Результат:
