Что такое фреймы

Фреймы - это средство компоновки, которое используют многие веб-дизайнеры. Использование фреймов позволяет разделить страницу на прямоугольные области. Фреймы удобно применять для расположения списка ссылок в левой части экрана или для ввода информации в его правую часть. При этом ссылки, которые находятся в левом фрейме, все время отображаются на экране, хотя посетитель переходит от одной странице сайта к другой по ссылкам.
Cозданние фреймов
Если выбирать фреймовую структуру сайта, стоит заметить что на главной странице отсутствует контейнер Body, так как тело страницы находится в отдельных файлах, в которых хранятся фреймы. Главный файл такой страницы содержит тег <frameset>, определяющий компоновку страницы, также он содержит теги <frame>, в которых необходимо указывать имя файла, который будет отображаться в данном фрейме.
Тег <frameset> имеет следующие параметры:
- rows - указывает разбить окно на горизонтальные области. Задается в %, чем больше значений, тем больше будет разделенных областей.
- cols - указывает разбить окно на вертикальные области. Задается в %, чем больше значений, тем больше будет разделенных областей.
- border - задает ширину линии, которая делит страницу на фреймы
- frameborder - задает ширину рамки самого фрейма
Тег <frame> необходимо задавать столько раз, насколько у вас поделена страница, причем в таком порядке как она делилась в %. Имеет следующие параметры:
- src - основной параметр, в нем задается адрес той html-страницы или изображения, которая будет загружаться в данный фрейм.
- name - задает название фрейма, которое будет использоваться для ссылки к этому фрейму.
- target - указывает в каком фрейме открывать определенную ссылку, имеет следующие значения:
- _self - загружать в тот же фрейм из которого ссылаются.
- _top - загружать в полное окно, закрывая остальные фреймы (обычно используется для ссылок на другие сайты).
- marginwidth - задает отступ во фрейме от левого края до содержимого.
- marginheight - определяет отступ во фрейме от верхнего края до содержимого.
- scrolling - управляет отображением полосы прокрутки, (появляется если содержимое фрейма не помещается в окно). Имеет такие значения: yes, no, auto.
- noresize - отключает способность перемещать границу фрейма курсором мышки.
Пошаговая инструкция
Показать вид фреймов здесь не получится, также показ скринов не очень эффективно расскажет о фреймах, лучше всего попытаться создать их самим.
Шаг первый
Создадим главную фреймовую страничку. Выделим 20% для фрейма меню и 80% для основного контента.
<html> <head> <title>Фреймы в html</title> </head> <frameset cols="20%,*" border="3" > <frame src="menu.html"> <frame src="content.html" name="content"> </frameset> </html> |
Сохраним с расширением html и именем index (получится index.html)
Шаг второй
Создадим две странички. Первая будет предназначаться для меню, вторая - для основного содержимого.
Меню <html> <head> <title>Меню сайта</title> </head> <body bgcolor="#FFFFFF"> <a href="http://phantomx5.ucoz.ru/" target="content">Этот сайт</a><br><br> <a href="Ваши страницы, файл html или URL">название пунктов меню</a> </body> </html> |
Для примера ссылки в меню будут на популярные поисковые системы, однако при нажатии ссылки они будут отображаться в окне основного контента,
который занимает 80% объема всей страницы. Обязательно сохраняем код с именем menu.html, иначе предыдущий код будет бесполезен.
Содержимое
<html> <head> <title>Контент</title> </head> <body bgcolor="grey"> Содержимое страницы, выберете пункт меню. </body> </html> |
Эта страничка будет отображаться изначально, пока вы не выберете один из пунктов меня, после чего эта страничка сменится другой,
а меню при этом останется активным по-прежнему. Обязательно сохраняем код с именем content.html.
Шаг третий
В итоге мы имеет 3 файла (index.html, menu.html и content.html). Помещаем их в одну папку, открываем index и видим результат простого фреймового
построения страницы с вертикальным разделением. Также можно долго говорить о горизонтально разделенных фреймах.
Простейший пример можно скачать
Достоинства и недостатки фреймов
К достоинствам относится скорость загрузки страниц фреймовой структуры, так как браузеру проще загружать отдельные фреймы, чем всю страницу целиков, включая меню, шапку, нижнюю часть сайта и т.д. Также использование фреймов хорошо подходит некоторым сайтам в плане дизайна.
К сожалению недостатков, в использовании фреймовой структуры сайта, намного больше:
- В плане построения, такие сайты очень сложны, легко запутаться в большом количестве подключаемых фреймовых файлов.
- Страницы фреймов индексируются поисковыми роботами отдельно, поэтому в поисковых системах может загрузится только страничка основного контента (без меню, шапки, нижней части сайта и т.д), что очень отразится на дизайне такой странице.
- Хуже всего, что фреймы поддерживают не все браузеры, в некоторых из них такой сайт вообще не откроется. Конечно есть решение, использовать парный тег <noframes> который заключается в контейнер <frameset> и задает альтернативный способ отображения страницы. Однако в этом случае придется делать каждую страничку сайта, двумя способами.
И все же использование фреймов довольно популярно, конечно рекомендуется использовать фреймы, только в крайних случаях, однако если грамотно их применить, от этого можно только выиграть. Далее рассмотрим возможности вставки видео в HTML-код - Видео в HTML