Фрэймы

Фрэймы

Испольльзуя фрэймы, позволяющие разбивать Web-страницы на множественные скроллируемые подокна, вы можете значительно улучшить внешний вид и функциональность информационных систем и Web-приложений. Каждое подокно, или фрэйм, может иметь следующие свойства:
· Каждый фрэйм имеет свой URL, что позволяет загружать его независимо от других фрэймов
· Каждый фрэйм имеет собственое имя (параметр NAME), позволяющее переходить к нему из другого фрэйма
· Размер фрэйма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрешено указанием специального параметра)
Данные свойства фрэймов позволяют создавать продвинутые интерфейсные решения, такие как:
· Размещение статической информации, которую автор считает необходимым постоянно показывать пользователю, в одном статическом фрэйме. Это может быть графический логотип фирмы, copyright, набор управляющих кнопок
· Помещение в статическом фрэйме оглавления всех или части WEB-документов, содержащихся на WEB-сервере, что позволяет пользователю быстро находить интересующую его информацию
· Создавать окна результатов запросов, когда в одном фрэйме находитс собственно запрос, а в другом результаты запроса
· Создавать формы типа "мастер-деталь" для WEB-приложений, обслуживающих базы данных
<HTML>
<HEAD>...</HEAD>
<FRAMESET>...</FRAMESET>
</HTML>
Однако, фрэйм-документ является специфичным видом HTML-документа, поскольку не содержит элемента BODY и какой-либо информационной нагрузки соответственно. Он описывает только фрэймы, которые будут содержать информацию (кроме случа двойного документа, который мы рассмотрим позже).

Бродя по Интернету, вы наверняка не раз видели странички разбитые на несколько частей. Эти части и называются фреймами. Программно разбиение окна браузера на фреймы реализуется так:
1. Создается html файл (обычно это первая страничка сервера по имени index.htm) в котором задаются размеры и количество фреймов, а также имена файлов соответствующих фреймам и некоторые атрибуты для каждого фрейма.
2. Создаются отдельные html странички для каждого фрейма.
Попробуем создать html файл реализующий разбиение экрана на две части. Для этого нам понадобится два обычных html файла с именами homepage.htm и menu.htm. Главный файл обзовем к примеру index.htm, вот как он должен выглядеть:
<HTML>
<TITLE>Название вашей странички</TITLE>
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="frame1">
<FRAME SRC="menu.htm" NAME="frame2">
</FRAMESET>
</HTML>
Рассмотрим каждый тэг по отдельности:
<HTML></HTML> и <TITLE><TITLE> - стандартные тэги для всех html файлов
<FRAMESET> в этом тэге задается количество рядов или столбцов ROWS и COLS соответственно, а также их размеры и расположение. Существует три способа задания их размера:
по пикселам - просто напишите высоту или ширину в пикселах.
процентами - пишите сколько процентов от окна браузера вы хотите отдать фрейму и после цифр ставите знак % Также позаботьтесь чтобы все ваши %`ы в суме составляли 100%.
звездочка - все оставшееся место в окне равняется значку *. Например вы можете написать 20%,20%,60% или 20%,20%,* и никакой разницы не будет.
В этом же тэге можно задать толщину разграничительной линии и окаймляющей рамки командами FRAMEBORDER="X" и BORDER="Y" где x и y толщина в пикселах.
В нашем случае (<FRAMESET cols="*,140">) мы разделяем окно на два столбца, правое шириной в 140 пикселов, а левое шириной во весь оставшийся экран
<FRAME> - здесь задаются атрибуты для каждого фрейма персонально.
Команда SRC задает имя файла который загрузится в этом фрейме, в нашем случае имя файла homepage.htm (<FRAME SRC="homepage.htm" ...).
Команда NAME задает имя данного фрейма, в нашем случае имя "frame1" . Имя необходимо для того чтобы в последствии указать к какому фрейму использовать ссылку. К примеру мы хотим чтобы нажимая на ссылку в фрейме содержащем файл menu.htm содержимое файла ссылки показывалось в фрейме содержащем файл homepage.htm. Для этого нам необходимо откоректировать html код ссылки:
<A HREF="file.htm">file</A> - что было
<A HREF="file.htm" TARGET="frame1">file</A> - что должно быть
А если вы хотите чтобы файл загрузился в главном окне браузера то напишите в ссылке TARGET="_top"
Также в этом тэге можно задать величину граници фрейма за которую ничего кроме бэкграунда не может заходить. Это делается командами MARGINWIDTH="x" и MARGINHEIGHT="y", где x и y величина в пикселах.
</FRAMESET> закрывающий тэг.
Вот несколько примеров создания фреймов:
*
140 <FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="frame1">
<FRAME SRC="menu.htm" NAME="frame2">
</FRAMESET>100
* <FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>100
* <FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
*60 <FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
*45%
55% <FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="45%,55%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET>
</FRAMESET> *
15%15%
70% <FRAMESET cols="*,55%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>50%
50%50%
50% <FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>

Общий контэйнер FRAMESET описывает все фрэймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или несколько горизонтальных фрэймов. Тэг FRAMEљописывает каждый фрэйм в отдельности. Рассмотрим более детально каждый компонент.ФрэймыИспольльзуя фрэймы, позволяющие разбивать Web-страницы на множественные скроллируемые подокна, вы можете значительно улучшить внешний вид и функциональность информационных систем и Web-приложений. Каждое подокно, или фрэйм, может иметь следующие свойства:
Каждый фрэйм имеет свой URL, что позволяет загружать его независимо от других фрэймов
Каждый фрэйм имеет собственое имя (параметр NAME), позволяющее переходить к нему из другого фрэйма
Размер фрэйма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрешено указанием специального параметра)
Данные свойства фрэймов позволяют создавать продвинутые интерфейсные решения, такие как:Размещение статической информации, которую автор считает необходимым постоянно показывать пользователю, в одном статическом фрэйме. Это может быть графический логотип фирмы, copyright, набор управляющих кнопок
Помещение в статическом фрэйме оглавления всех или части WEB-документов, содержащихся на WEB-сервере, что позволяет пользователю быстро находить интересующую его информацию
Создавать окна результатов запросов, когда в одном фрэйме находитс собственно запрос, а в другом результаты запроса
Создавать формы типа "мастер-деталь" для WEB-приложений, обслуживающих базы данных
<HTML>
<HEAD>...</HEAD>
<FRAMESET>...</FRAMESET>
</HTML> Однако, фрэйм-документ является специфичным видом HTML-документа, поскольку не содержит элемента BODY и какой-либо информационной нагрузки соответственно. Он описывает только фрэймы, которые будут содержать информацию (кроме случа двойного документа, который мы рассмотрим позже).
--------------------------------------------------------------------------------Бродя по Интернету, вы наверняка не раз видели странички разбитые на несколько частей. Эти части и называются фреймами. Программно разбиение окна браузера на фреймы реализуется так:1. Создается html файл (обычно это первая страничка сервера по имени index.htm) в котором задаются размеры и количество фреймов, а также имена файлов соответствующих фреймам и некоторые атрибуты для каждого фрейма.2. Создаются отдельные html странички для каждого фрейма.Попробуем создать html файл реализующий разбиение экрана на две части. Для этого нам понадобится два обычных html файла с именами homepage.htm и menu.htm. Главный файл обзовем к примеру index.htm, вот как он должен выглядеть:<HTML>
<TITLE>Название вашей странички</TITLE>
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="frame1">
<FRAME SRC="menu.htm" NAME="frame2">
</FRAMESET>
</HTML>Рассмотрим каждый тэг по отдельности:<HTML></HTML> и <TITLE><TITLE> - стандартные тэги для всех html файлов<FRAMESET> в этом тэге задается количество рядов или столбцов ROWS и COLS соответственно, а также их размеры и расположение. Существует три способа задания их размера:по пикселам - просто напишите высоту или ширину в пикселах.
процентами - пишите сколько процентов от окна браузера вы хотите отдать фрейму и после цифр ставите знак % Также позаботьтесь чтобы все ваши %`ы в суме составляли 100%.
звездочка - все оставшееся место в окне равняется значку *. Например вы можете написать 20%,20%,60% или 20%,20%,* и никакой разницы не будет.В этом же тэге можно задать толщину разграничительной линии и окаймляющей рамки командами FRAMEBORDER="X" и BORDER="Y" где x и y толщина в пикселах.В нашем случае (<FRAMESET cols="*,140">) мы разделяем окно на два столбца, правое шириной в 140 пикселов, а левое шириной во весь оставшийся экран<FRAME> - здесь задаются атрибуты для каждого фрейма персонально.Команда SRC задает имя файла который загрузится в этом фрейме, в нашем случае имя файла homepage.htm (<FRAME SRC="homepage.htm" ...).Команда NAME задает имя данного фрейма, в нашем случае имя "frame1" . Имя необходимо для того чтобы в последствии указать к какому фрейму использовать ссылку. К примеру мы хотим чтобы нажимая на ссылку в фрейме содержащем файл menu.htm содержимое файла ссылки показывалось в фрейме содержащем файл homepage.htm. Для этого нам необходимо откоректировать html код ссылки:<A HREF="file.htm">file</A> - что было
<A HREF="file.htm" TARGET="frame1">file</A> - что должно быть
А если вы хотите чтобы файл загрузился в главном окне браузера то напишите в ссылке TARGET="_top"Также в этом тэге можно задать величину граници фрейма за которую ничего кроме бэкграунда не может заходить. Это делается командами MARGINWIDTH="x" и MARGINHEIGHT="y", где x и y величина в пикселах.</FRAMESET> закрывающий тэг.Вот несколько примеров создания фреймов:* 140
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="frame1">
<FRAME SRC="menu.htm" NAME="frame2">
</FRAMESET>
100 *
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
100 *

<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET> *

60
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET> *

45% 55%

<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="45%,55%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET>
</FRAMESET>
* 15%
15% 70%

<FRAMESET cols="*,55%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>
50% 50%
50% 50%
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET> --------------------------------------------------------------------------------Общий контэйнер FRAMESET описывает все фрэймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или несколько горизонтальных фрэймов. Тэг FRAMEљописывает каждый фрэйм в отдельности. Рассмотрим более детально каждый компонент.
--------------------------------------------------------------------------------FRAMESET <FRAMESET [COLS="value" | ROWS="value"]> Тэг <FRAMESET> имеет завершающий тэг </FRAMESET>. Все, что может находиться между этими двумя тэгами, это тэг <FRAME>, вложенные тэги <FRAMESET> и </FRAMESET>, а также контейнер из тэгов <NOFRAME> и </NOFRAME>, который позволяет строить двойные документы для броузеров, поддерживающих фрэймы и не поддерживающих фрэймы.Данный тэг имеет два взаимоисключающих параметра: ROWS и COLS.ROWS="список-определений-горизонтальных-подокон"Данный тэг содержит описания некоторого количества подокон, разделенные запятыми. Каждое описание представляет собой числовое значение размера подокна в пикселах, процентах от всего размера окна или связанное масштабное значение. Количество подокон определяется количеством значений в списке. Общая сумма высот подокон должна составлять высоту всего окна (в любых измеряемых величинах). Отсутствие атрибута ROWS определяет один фрэйм, величиной во все окно броузера.
Синтаксис используемых видов описания величин подокон:valueПростое числовое значение определяет фиксированную высоту подокна в пикселах. Это далеко не самый лучший способ описания высоты подокна, поскольку различные броузеры имеют различный размер рабочего поля, не говоря уже о различных экранных разрешениях у пользователя. Если вы, все же, используете данный способ описания размера, то настоятельно рекомендуется сочетать его с каким-либо другим, чтобы в результате вы точно получили 100%-ное заполнение окна броузера вашего пользователя.value%Значение величины подокна в процентах от 1 до 100. Если общая сумма процентов описываемых подокон превышает 100, то размеры всех фрэймов пропорционально уменьшаются до суммы 100%. Если, соответственно, сумма меньше 100, то размеры пропорционально учеличиваются.value*Вообще говоря, значение value в данном описании является необязательным. Символ "*" указывает на то, что все оставшееся место будет принадлежать данному фрэйму. Если указывается два или более фрэйма с описанием "*" (например "*,*"), то оставшееся пространство делится поровну между этими фрэймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрэйма (во сколько раз од будет больше аналогично описанного чистой звездочкой). Например, описание "3*,*,*", говорит, что будет создано три фрэйма с размерами 3/5 свободного пространства дл первого фрэйма и по 1/5 для двух других.COLS="список-определений-горизонтальных-подокон"То же самое, что и ROWS, но делит окно по вертикали, а не по горизонтали.
--------------------------------------------------------------------------------

Внимание! Совместное использование данных параметров может привести к непредствазуемым результатам. Например, строка: <FRAMESET ROWS="50%,50%" COLS "50%,50%"> может привести к ошибочной ситуации.
--------------------------------------------------------------------------------Примеры:<FRAMESET COLS="50,*,50"> - описывает три фрэйма, два по 50 точек справа и слева, и один внутри этих полосок.<FRAMESET ROWS="20%,3*,*"> - описывает три фрэйма, первый из которых занимает 20% площади сверху экрана, второй 3/4 оставшегося от первого фрэйма места (т.е. 60% всей площади окна), а последний 1/4 (т.е. 20% всей площади окна.<FRAMESET ROWS="*,60%,*"> - аналогично предыдущему примеру.Тэги <FRAMESET> могут быть вложенными, т.е. например:<FRAMESET ROWS="50%,50%"><FRAMESET COLS="*,*"
</FRAMESET>
</FRAMESET>Результат данного примера мы рассмотрим позже.
--------------------------------------------------------------------------------FRAME <FRAME SRC="url" [NAME="frame_name"] [MARGINWIDTH="nw"] [MARGINHEIGHT="nh"] [SCROLLING=yes|no|auto] [NORESIZE]>Данный тэг определяет фрэйм внутри контейнера FRAMESET.SRC="url"Описывает URL документа, который будет отображен внутри ланного фрэйма. Если он отсутствует, то будет отображен пустой фрэйм.
NAME="frame_name"Данный параметр описывает имя фрэйма. Имя фрэйма может быть использовано для определения действия с данным фрэймом из другого HTML-документа или фрэйма (как правило, из соседнего фрэйма этого же документа). Имя обязательно должно начинаться с символа. Содержимое поименованных фрэймов может быть задействовано из других документов при помощи специального атрибута TARGET, описываемого ниже.
MARGINWIDTH="value"Это атрибут может быть использован, если автор документа хочет указать величину разделительных полос между фрэймами сбоку. Значение value указывается в пикселах и не может быть меньше единицы. По умолчанию данное значение зависит от реализации поддержки фрэймов используемым клиентом броузером.
MARGINHEIGHT="value"То же самое, что и MARGINWIDTH, но для верхних и нижних величин разделительных полос.
SCROLLING="yes | no | auto"Этот атрибут позволяет задавать наличие полос прокрутки у фрэйма. Параметр yes указывает, что полосы прокрутки будут в любом случае присутствовать у фрэйма, параметр no наоборот, что полос прокрутки не будет. Auto определяет наличие полос прокрутки только при их необходимости (значение по умолчанию).
NORESIZEДанный атрибут позволяет создавать фрэймы без возможности изменени размеров. По умолчанию, размер фрэйма можно изменить при помощи мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность. Если у одного фрэйма установлен атрибут NORESIZE, то у соседних фрэймов тоже не может быть изменен размер со стороны данного. --------------------------------------------------------------------------------NOFRAMES Данный тэг используется в случае, если вы создаете документ, который может просматриваться как броузерами, поддерживающими фрэймы, так и броузерами, их не поддерживающими. Данный тэг помещяется внутри контейнера FRAMESET, а все, что находится внутри тэгов <NOFRAMES> и </NOFRAMES> игнорируется броузерами, поддерживающими фрэймы.
--------------------------------------------------------------------------------А теперь на закуску несколько трюков с фреймами:1. Если ваш сервер поддерживает кэширование можно создать один невидимый фрейм (толщиной в 0 пикселов) и загружать в нем разные картинки чтобы они в последствии моментально грузились в другом документе.2. А еще можно создать фрейм соответствующий размеру картинки бэкграунда , выключить бордюр и окаймляющую рамку и тогда когда документ загрузится он будет выглядеть как обычный одно-экранный документ.Программирование для начинающих
HTML .::. Фреймы Итак, мы добрались до фреймов. Необходимость их использования довольно часто ставится под сомнение и порождает массу споров и дискуссий, напоминающих собой споры по поводу применения оператора GOTO в языках высокого уровня. Во многих учебниках и руководствах, распространенных в Сети, авторы - практикующие вебдизайнеры - настоятельно не рекомендуют применять фреймы своим ученикам. Они, естественно, приводят довольно веские причины, и я generally с ними согласен. В принципе мне не стоило бы вам рассказывать о фреймах, дабы не забивать вам этим голову. Однако мое теперешнее положение (я здесь типа учитель) вынуждает меня быть откровенным с вами. Поэтому слушайте грустную историю фреймов. Сначала было слово. И слово это было "фрейм". Инородное такое словечко, которое не переводится однозначно на русский язык (т.е. его перевод зависит от контекста). "Frame"(фрэйм) означает то, что у нас принято называть остовом, каркасом, фундаментом. В теории механизмов и машин есть такое понятие, как "стойка"(неподвижное звено). И это тоже frame. Т.е. фрейм это нечто такое, что служит основой для чего-то другого. Еще "frame" переводится как "кадр" (фотопленки, ...). В нашем русском языке кадр не очень-то похож на фундамент, однако это все же так: кадр является фундаментом для содержимого кадра (скажем, для изображения). В таком вот смысле "frame" используется и в HTML и часто переводится на русский как "кадр". Обычно в браузер загружена одна страница (один файл). Эта страница занимает всю окно. Однажды разработчики сетевого контента стали создавать сайты с развитой навигацией (красивые менюшки и все такое). Они лепили эти менющки на каждую свою страницу, чтобы все они выглядели одинаково. Это был "каменный век" вебдизайна, поэтому поддерживать сайты было тяжело: при появлении нового раздела нужно было обновить меню на каждой странице. Совместно с дизайнерами разработчики браузеров придумали фреймы. Теперь браузеры могли в одном окне показывать несколько страниц (несколько файлов). Основа или фундамент каждой страницы и есть фрейм (еще можно сказать что фрейм это контейнер, т.е. он содержит в себе страницу). Обычно используются два фрейма - один для меню, другой для основного содержания страницы (собственно полезного контента). Но поддержка фреймов в браузере организована таким образом, что в одном окне может быть любое число фреймов. Вот несколько схематичных иллюстраций.
*------------------------------* *-----*------------------------*
| меню | | | |
*------------------------------* | м | |
| | | | |
| | | е | |
| | | | |
| | | н | контент |
| контент | | | |
| | | ю | |
| | | | |
| | | | |
| | | | |
| | | | |
*------------------------------* *-----*------------------------* *------------------------------* *-----*------------------------*
| разделы сайта | | | |
*-----*------------------------* | м | контент1 |
| м | | | | |
| е | | | е | |
| н | | | *------------------------*
| ю р | | | н | |
| а | контент | | | |
| з | | | ю | |
| д | | | | контент2 |
| е | | | | |
| л | | | | |
| а | | | | |
*-----*------------------------* *-----*------------------------*Вы видите, что окно браузера разделено на несколько частей - фреймов. В каждый фрейм загружена вебстраница. Фрейм может иметь имя, по которому на него можно ссылаться. Например, можно сделать так, чтобы при нажатии ссылки в одном фрейме (меню) загрузилась страница в другом фрейме (контент). Кстати, фреймы это независимые объекты. Так, у каждого фрейма могут быть свои полосы прокрутки. Вы можете как угодно прокручивать содержимое, скажем фрейма "контент", а меню при этом останется на своем месте, т.е. всегда будет на экране. Тем более, меню хранится всего лишь в одном файле, поэтому изменив его можно изменить меню на всем сайте. Это, конечно очень удобно и сейчас довольно широко используется, не смотря на рекомендации умудренных опытом вебмастеров. Фреймы это довольно-таки соблазнительная вещь. Так, мой первый сайт использовал фреймы, даже не использовал, а был целиком на них основан. Тогда я уже знал, что использовать фреймы не рекомендуется, знал почему, но не понимал почему это плохо. Со временем, однако, я полностью разобрался в этом вопросе. И сайт рассылки "Программирование для начинающих" был изначально задуман, как не имеющий фреймов. Однако на данный момент полностью отказаться от фреймов мне не удалось (и думаю пока не стоит). Потому что, как и в случае с оператором GOTO есть ситуации, когда применение фреймов более чем оправдано. На сайте рассылки фреймы используются в Архиве рассылки. При этом в верхнем фрейме отображена навигационная панель, позволяющая выбрать выпуск, а в нижнем загружен выбранный выпуск рассылки. После всего сказанного достоинства фреймов должны быть для вас очевидны, чего нельзя сказать о недостатках. Чтобы разобраться в недостатках нам нужно знать как реализованы фреймы в HTML. Этим и займемся. Чтобы организовать фреймы нужно создать специальную вебстраницу, т.н. фрейм-контейнер, в которой будет описана структура фреймов (их положение на экране, размеры и другие свойства, как-то наличие полос прокрутки, разделительных рамок и пр.) Рассмотрим конкретный пример - небольшой сайт, имеющий четыре страницы содержащие контент (content - это содержание; фраза "содержащие содержание" звучит не красиво, поэтому я буду использовать слово "контент" в значении "полезное содержание", т.е. то зачем посетитель пришел на сайт). Меню у нас будет определено в файле menu.html, еще будет страница с информацией о сайте и его авторе в файле about.html, страница с какой-то полезной статьей, из-за которой собственно народ на сайт и заходит, в файле article.html, страница с сылками по теме статьи в файле links.html и страница с новостями в файле news.html. Обратите внимание, что имена для страниц выбраны так, что они характеризуют содержание этих страниц, т.е. имена - осмысленные. Итак сайт имеет одну структуру фреймов, значит нам нужен один фрейм контейнер. Разумно использовать для этого файл index.html, чтобы он автоматически открывался при заходе посетителя на сайт. Страница фрейм-контейнер отличается от обычной страницы тем, что она не имеет тела (BODY), вместо этого в ней описан набор фреймов (FRAMESET). Вообще для описания фреймов используются всего два тега (имеются в виду обычные фреймы, о которых мы сейчас говорим, потому что бывают еще плавающие, но об этом позже) плюс один вспомогательный тег <NOFRAMES>. Тег <FRAMESET> описывает структуру фреймов, а тег <FRAME> описывает каждый фрейм входящий в эту структуру. Наш файл index.html будет примерно таким:
<HTML>
<HEAD>
<TITLE>
Сайт с интересной статьей
</TITLE>
</HEAD>
<FRAMESET ROWS="5%,*">
<FRAME NAME="menu" SRC="menu.html">
<FRAME NAME="content" SRC="news.html">
</FRAMESET>
</HTML>Тег FRAMESET может иметь два параметра ROWS и COLS, которые определяют способ разделения окна на фреймы (на строки или на столбцы). В примере используется ROWS, т.е. один фрейм будет вверху, другой внизу, а разделительная линия горизонтальной. Значением параметров ROWS и COLS является строка значений высоты или ширины (короче, размера) для входящих в структуру фреймов. Размер можно задать тремя способами: - абсолютно в пикселах (ROWS="50,400,50" - три фрейма высотой 50,400 и 50 пикселей соответственно); - относительно в процентах (COLS="20%,80%" - два вертикальных фрейма шириной 20% и 80%, которая будет меняться при изменении размера окна браузера); - относительно в долях (частях) (ROWS="*,*" - два одинаковых фрейма. "*" обозначает одну часть. Браузер анализирует строку, вычисляет сколько всего "частей", в данном случае две, значит каждая равняется половине высоты окна. Перед звездочкой может стоять число: COLS="*,2*,*" - три фрейма с шириной равной соответственно 1/4, 1/2, 1/4 от ширины окна (всего четыре части, значит на "*" приходится 1/4. "2*" это две четверти или 1/2)). Допускается комбинировать все три способа. Несколько примеров: ROWS="5%,*" - верхний фрейм - 5%, нижний фрейм - все остальное пространство (от всей высоты отнимается 5%, делится на части и, т.к. часть определена одна, то она и равняется 95%) COLS="100,25%,*,2*" - четыре фрейма: левый - 100 пикселей, второй с лева - 25%, остальное пространство пропорционально делится между двумя правыми фреймами, один отхватывает одну часть, второй две. COLS="*,3*,2*" - три фрейма с шириной 1/6, 3/6=1/2, 2/6=1/3. COLS="*,20%" - два фрейма, правый - 20%, левый - все остальное. Итак FRAMESET определяет число, размеры и ориентацию (или положение) фреймов. Каждый отдельный фрейм описывается своим тегом FRAME. В примере выше показаны основные параметры, которые может иметь тег FRAME, а соответственно и сам фрейм. Это имя фрейма, по которому на него можно будет ссылаться и файл-источник, который будет загружен во фрейм. Т.е. если вы откроете в браузере наш index.html, то увидите, что окно браузера поделится на две части. Если будут найдены файлы-источники для фреймов, они будут загружены. Между фреймами вы можете увидеть разделительную линию. Можно "зацепить" ее мышью и переместить вверх или вниз, изменив размеры фреймов. Это похоже на изменение размера окна программы. Часто дизайн сайта не предполагает, что пользователь будет менять размеры фреймов. Дизайнер может дать указание браузеру о запрете изменения размеров того или иного фрейма. Для нужно указать параметр NORESIZE в соответствующем теге FRAME:
<FRAME NAME="menu" SRC="menu.html" NORESIZE>
Можно управлять наличием полос прокрутки у фрейма. За это отвечает параметр SCROLLING, который может принимать значения: AUTO - полосы прокрутки отображаются при необходимости YES - полосы прокрутки отображаются всегда NO - полосы прокрутки не отображаются Наиболее часто применяется SCROLLING="NO", чтобы запретить полосы прокрутки у фрейма с меню, которые могут появиться, если пользователь уменьшит окно браузера.
<FRAME NAME="menu" SRC="menu.html" NORESIZE SCROLLING="NO">
У тега FRAME есть еще два параметра MARGINHEIGHT и MARGINWIDTH, которые определяют высоту и ширину границы фрейма. Обратите внимание, что граница это не рамка, это пространство отделяющее элемент, в данном случае фрейм, от других элементов. У многих начинающих вебдизайнеров (именно они особенно активно применяют фреймы) возникает вопрос о том, как можно убрать линию, разделяющую фреймы. Обычно визуально фреймы разделяются с помощью специально подготовленных фоновых изображений, поэтому разделительная линия оказывается лишней и только портит дизайн. В HTML 4.0 определен параметр FRAMEBORDER тега FRAME, который может принимать значения 1 или 0 (по умолчанию: 1). Чтобы убрать разделительную линию, нужно установить FRAMEBORDER="0" у всех фреймов, которые разделяет эта линия:
<FRAME NAME="menu" SRC="menu.html" NORESIZE SCROLLING="NO" FRAMEBORDER="0">
<FRAME NAME="content" SRC="news.html" FRAMEBORDER="0">Некоторые браузеры не поддерживают фреймы (в основном это старые браузеры). Поэтому для пользователей таких браузеров нужно в тег FRAMESET вставлять тег NOFRAMES. Его содержимое будет отображено, если браузер не поддерживает фреймы. Обычно это выглядит так:
...
<FRAMEST ...>
...
<NOFRAMES>
<p>
Ваш браузер не поддерживает фреймы. Скачайте новую версию MSIE
отсюда: <A HREF=...>...<A>
</p>
</NOFRAMES>
</FRAMESET>Но лучше так не делать, потому что это не совсем красиво. Лучше в теге NOFRAMES привести ссылки на все (или основную часть) страницы вашего сайта, чтобы пользователь, чей браузер не поддерживает фреймы, тоже мог до них добраться без необходимости обновлять браузер. В выпуске 25 в рубрике ОКРУЖЕНИЕ были даны ссылки на браузер Lynx. Некоторые версии этого браузера не поддерживают фреймы. Следующий вопрос: как из одного фрейма обращаться к другому? В HTML обращаться к одному документу из другого можно посредством гиперссылок (мы изучали их в выпуске 10). Это делается с помощью тега <A> в котором указывается адрес документа на который мы хотим сослаться. Тег <A> имеет еще один параметр, который мы не рассмотрели в 10-м выпуске, но который будет полезен нам сейчас. Это параметр TARGET ("цель"). Значение этого параметра - имя фрейма или окна браузера, в которое будет загружен документ, если кликнуть по ссылке. В меню нашего сайта мы можем использовать накую строку:
<A HREF="news.html TARGET="content">Новости</A>
Как помните, во фрейм-контейнере мы определили фрейм с именем "content". Файл news.html будет загружен в этот фрейм. Имеется также несколько зарезервированных имен, имеющих специальное значение. Это: _blank (знак подчеркивания обязателен) - новое окно _parent - родительское окно (фреймы могут быть воженными) _top - окно браузера (окно самого высокого (top) уровня) Можно также использовать произвольное имя. Если оно не определено, то будет создано новое окно браузера с этим именем. Наиболее частые применения зарезервированных имен: _blank - открытие документа с другого сайта в новом окне так, чтобы пользователь не ушел с вашего сайта (дешевый трюк, но иногда полезный) _parent - открутие другого фрейм-контейнера или страницы без фреймов (используется на сайте рассылки в ссылках ведущих из Archive browser) _top - избавление от фреймов Кто-то может создать фрейм, в который будет загружена страница с вашего сайта (без вашего на то согласия). Вы можете у всех ссылок установить TARGET=_top. Если по ним кликнуть, то страница будет загружена в окно браузера, а не во фрейм. Однако такой прием чейчас используется редко (или не используется совсем). Для избавления от нежелательных фреймов применяется скрипт на JavaScript, который определяет, загружена ли страница во фрейм и перезагружает ее в окно браузера, если так. Но не об этом сейчас речь... Если все ссылки или большая их часть должны иметь одинаковое значение TARGET, как в случае с меню, то можно использовать тег <BASE>, для задания глобального значения TARGET.
<BASE TARGET="content">
Теперь все ссылки, не имеющие параметра TARGET будут использовать TARGET тега BASE, который, кстати, лучше поместить в раздел HEAD документа. Вернемся к нашему сайту. Обновите файл index.html, создайте файлы остальные файлы для нашего примера и проверьте его работу в браузере.
*----------------------------------------*
<HTML>

<HEAD>
<TITLE>
Сайт с интересной статьей
</TITLE>
</HEAD>
<FRAMESET ROWS="5%,*">
<FRAME NAME="menu" SRC="menu.html" NORESIZE SCROLLING="NO" FRAMEBORDER="0">
<FRAME NAME="content" SRC="news.html" FRAMEBORDER="0">
<NOFRAMES>
<p>Ваш браузер не поддерживает фреймы.
<p>
<UL>Получить доступ к материалам сайта Вы можете воспользовавшись
следующими ссылками:
<LI><A HREF="news.html">Новости</A>
<LI><A HREF="article.html">Интересная статья</A>
<LI><A HREF="links.html">Ссылки по теме статьи</A>
<LI><A HREF="about.html">О сайте и его авторе</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>*----------------------------------------*
<HTML>

<HEAD>
<TITLE>
Меню сайта
</TITLE>
<BASE TARGET="content">
</HEAD>
<BODY>
<CENTER>
<H3><A HREF="news.html">Новости</A> |
<A HREF="article.html">Статья</A> |
<A HREF="links.html">Ссылки</A> |
<A HREF="about.html">О сайте</A>
</H3>
</CENTER>
</BODY>
</HTML>*----------------------------------------*
<HTML>

<HEAD>
<TITLE>
Новости
</TITLE>
</HEAD>
<BODY>
<H3>НОВОСТИ САЙТА</H3>
<OL>
<LI>Новость 1
<LI>Новость 2
</OL>
</BODY>
</HTML>*----------------------------------------*
<HTML>

<HEAD>
<TITLE>
Очень интересная статья
</TITLE>
</HEAD>
<BODY>
<H3>Очень интересная статья</H3>
<P>Однажды все началось.
<HR>
<p>Потом закончилось.
</BODY>
</HTML>*----------------------------------------*
<HTML>

<HEAD>
<TITLE>
Ссылки по теме статьи
</TITLE>
<BASE TARGET=_parent>
</HEAD>
<BODY>
<H3> Ссылки по теме статьи</H3>
<UL>
<LI><A HREF="some.html">Ссылка 1</A>
<LI><A HREF="any.html">Ссылка 2</A>
</UL>
</BODY>
</HTML>*----------------------------------------*
<HTML>

<HEAD>
<TITLE>
О сайте и его авторе
</TITLE>
</HEAD>
<BODY>
<H3>О сайте и его авторе</H3>
<P>Этот сайт представляет собой учебный пример, демонстрирующий
применение фреймов в HTML.
<p>© 2001 <A HREF="http://stacmv.boom.ru"
TARGET="_blank">"Программирование для начинающих"</A>
</body>
</html>Обязательно создайте все эти файлы и посмотрите, как все работает в браузере. Это полезно. Кроме того, это может Вам понравиться и натолкнуть на ряд отличных идей по применению фреймов. Давайте сделаем паузу. Вы поэкспериментируйте с нашим примером, а я пока посмотрю программу, чего у нас там по телеку сейчас. --------------------------------------------------------------------------------Ок. Теперь настала пора вам узнать о недостатках присущих сайтам, использующим фреймы. Сами по себе такие сайты работают хорошо. Однако покажите мне сайт в Интернете, который был бы сам по себе. Кроме собственно сайта всегда есть ссылки, указывающие на него. Эти ссылки могут быть как на других сайтах, так и в закладках разных людей. Я думаю вам захочется, чтобы кто-то ссылался на какие-то страницы на вашем сайте. Теперь подумайте, как это можно сделать. Можно поставить ссылку на любой файл. Например, на index.html. В этом случае загрузится меню и страница новостей. Поставить ссылку на статью или на страницу ссылок не так просто. Можно сослаться на файл article.html, и он будет загружен. Но не будет меню! И посетитель не сможет перейти на другие страницы сайта. Это основная проблема сайтов с фреймами. Но даже если вы будете уверены, что никто не ссылается на страницы вашего сайта, кроме как на главную страницу, то все равно нет гарантии, что кто-то не попадет на одну из ваших страниц через поисковую машину. Проблема это, естественно, решаема. Можно использовать на страницах тапа article.html скрипт, который определив, что страница загружена не в фрейм будет загружать index.html. Также можно создать страницу article_frm.html которая будет точно такой же, как index.html, но загружать в нижний фрейм не страницу новостей, а статью. Теперь люой может ссылаться на статью, как на articles_frm.html (но это не решает проблемы с поисковиками). В этом случае пропадает одно из достоинств фреймов: необходимость редактировать один файл вместо целой кучи. Да, мы будем иметь одно меню, но много фрейм-контейнеров. Кстати, такой способ я использовал при организации архива рассылки. У меня есть файлы с выпусками, например, issue20.htm. Есть файл-меню issue_top.html и есть файлы-фреймконтейнеры, например, issue20_frm.html. Для каждого выпуска есть свой фрейм-контейнер. Однако у меня нет проблем с их созданием и редактированием, т.к. они генерируются MHTML скриптом. Таким же образом можно генерировать и меню на каждой странице, если не использовать фреймы (что также делается в случае сайта рассылки). Таким образом, подходим к главной мысли сегодняшнего разговора: использовать фреймы можно, но лишь тогда, когда это действительно нужно. Кстати, в связи с тем, что использование фреймов считается многими дизайнерами чем-то плохим, сайты, не имеющие фреймов, выглядят более профессионально сделанными. Итак это были обычные фреймы. Спасибо. Далее в нашей программе фреймы... плавающие! AKA встроенные. Встроенный фрейм размечается тегами <IFRAME> </IFRAME>. Между этими тегами должен быть текст (или HTML код) для браузеров, не поддерживающих плавающие фреймы. Сам плавающий фрейм определяется почти также, как и обычный, т.е. через параметры тега. IFRAME может иметь следующие параметры: * аналогичные параметрам тега FRAME: NAME - имя SRC - файл-источник, который будет загружен во фрейм SCROLLING - наличие полос прокрутки * аналогичные параметрам тега IMG: WIDTH - ширина HEIGHT - высота HSPACE - отступы слева и справа VSPACE - отступы сверху и снизу ALIGN - выравнивание Пример:
<IFRAME SRC=frame.html NAME="iframe" HEIGHT=200 WIDTH=30% HSPACE=40
VSPACE=10 ALIGN=right SCROLLING="YES">Ваш браузер не поддерживает
плавающие фреймы и не может отобразить страницу <A
HREF=frame.html TARGET="iframe">frame.html</A>. Кликните по ссылке,
чтобы открыть страницу frame.html в новом окне.</IFRAME>В браузере это выглядит примерно так:
Правда, я убрал параметр ALIGN, чтобы фрейм случайно не залез на текст. Я думаю, вы сами легко придумаете, как можно использовать плавающие фреймы. Сейчас, например, с помощью IFRAME реализованы некоторые баннеры. Такой "баннер" может представлять из себя все, что угодно, ведь во фрейм загружается страница, которая может содержать любой HTML код. А для браузеров не поддерживающих плавающие фреймы показывается обычная картинка. Можно на базе плавающих фреймов организовать систему обмена произвольной информацией с другими сайтами. Например, можно импортировать с других сайтов новости. А так как имеется возможность задать размеры фрейма, то он хорошо впишется в дизайн сайта.