Поиск

Фреймы

<FRAMESET> <FRAME> </frameset>

Фреймы — это области, которые создаются в окне броузера для одновременной демонстрации нескольких документов. Не все броузеры позволяли разделять об ласть просмотра на части, но эта идея завоевала всеобщее признание. Новые вер сии броузеров поддерживают фреймы в обязательном порядке. При создании страниц с фреймами разрабатывается несколько Webстраниц. При этом HTML файлы отличаются по типам. Документы раскладки (layout) используются для создания структуры окна, то есть для описания того, как оно должно быть разде лено. Документы содержания (content) предназначены для заполнения информа цией каждой из областей, Итак, как же создать Webстраницу с фреймами? Вначале необходимо продумать, какие области потребуются. Горизонтальное де ление экрана задается при помощи атрибута rows, а вертикальное — при помощи атрибута cols. Значения атрибутов могут быть выражены в пикселах или процен тах. Кроме того, используется символ * для обозначения оставшейся части экра на. Приведем несколько примеров:

  • cols=50%, 50% — деление области просмотра по вертикали пополам (принцип программы Norton Commander);
  • cols=25%, 75% — левая вертикальная область в три раза уже правой. Такой стиль избрали многие фирмы, имеющие свои сайты в Интернете;
  • rows=150, 30%, *—для верхней горизонтальной области отведено 150 пикселов, для средней — тридцать процентов доступного пространства, а для нижней все, что останется;
  • cols=*, 4* — стиль для любителей головоломок. Правая вертикальная область в четыре раза шире левой. Эту формулу можно записать и так: cols=20%, 80%.

В элементе FRAMESET можно использовать и стандартные атрибуты id, class, title, style, onload, onunload.

Вторым этапом является подготовка отдельных HTMLфайлов для каждой облас ти. Они создаются по таким же правилам, что и другие гипертекстовые документы. Нужно только учитывать размер области, в которой они будут демонстрировать ся. До тех пор, пока эти файлы не будут созданы, открывать документ раскладки в броузере не имеет смысла: вы ничего не увидите. Кстати, из этого следует одна особенность общения с Интернетом. Если вы набрели на сайт с фреймами и хоти те заполучить в свою личную папку понравившийся документ, не пытайтесь со хранять основной HTMLфайл. Вместо этого просмотрите его в режиме источника и найдите ссылку на конкретный документ содержания. Затем загляните в папку кэша, где последний и должен находиться.

В документе раскладки секция FRAMESET используется вместо секции BODY.

Атрибуты элемента <FRAME>

Кроме стандартных атрибутов — id, class, t i t le и style — этот элемент имеет ряд атрибутов, позволяющих усовершенствовать оконную структуру.

Внутри элемента FRAMESET должна быть создана ссылка на каждый документ со держания, входящий в сложную страницу. Кроме того, каждый элемент FRAME по лезно снабдить именем с помощью атрибута name. Имя можно указывать в гипер ссылках (см. листинг 3.5). В результате элемент FRAME может выглядеть так: <FRAME згс="Имя файла, htm" пате="имя фрейма"> После того как все страницы загружены, пользователь имеет возможность пере двигать границы фреймов при помощи мыши. Атрибут no resize запрещает делать это для определенного фрейма.

Атрибут scrolling управляет прокруткой внутри одной области. Он может при нимать значения YES (полосы прокрутки создаются в обязательном порядке), N0 (прокрутка запрещена) и AUTO (полосы прокрутки появляются, когда необходи мо). Если этот атрибут отсутствует, броузер создает полосы прокрутки для тех документов, которые не умещаются целиком в отведенных им областях. Запретив прокрутку, можно создать так называемый баннер.

Значением атрибута longdesc является ссылка на другой файл (URL). Таким спо собом для фрейма создается описа'ние любого объема. Это своего рода альтерна тива использованию стандартного атрибута title, при помощи которого обычно задается короткий текстовый комментарий.

При помощи атрибута f r a m e b o r d e r указывается, нужна или нет рамка вокруг фрейма. Значение 1 создает рамку, значение 0 — отменяет. Если необходимо убрать границу между фреймами, надо учитывать, что она создается рамками двух смежных областей.

Атрибут m a r g i n h e i g h t задает величину отступа страницы от верхнего и нижнего краев фрейма. Значение указывается в пикселах, например: marginheight="75"

Другой похожий атрибут, r n a r g i n w i d t h , создает поля слева и справа, например: marginwidth="10"

В качестве примера, поясняющего конструкцию фреймов, .рассмотрим шабло! (файл Frame.htm) для создания сложной Webстраницы.
Листинг 3.1. Шаблон страницы с фреймами

<НТМ1>
<HEAD>
<TITLE> Фреймы </title>
</head>
<FRAMESET rows="20%,60%,20%">
<FRAME src="fr1.htm" noresize>
<FRAMESET cols="22%,78%">
<FRAME src="fr2.htrrf>
<FRAME src="fr3.htm" scrolling="yes" marginwidth="10" marginheight="75">
</frameset>
<FRAME src="fr4.htm" >
</frameset>
</html>

В данном примере экран делится на четыре части, как показано на рис. 3.14. Дл; верхней части страницы запрещено удаление с экрана, а для правой в обязатель ном порядке создаются полосы прокрутки. Обратите внимание, что для одновре менного деления области просмотра по вертикали и по горизонтали следует со здать вложенный элемент FRAMESET.

<NOFRAMES> </noframes>

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

Листинг 3.2. Шаблон страницы с элементом NOFRAMES

<HTML>
<HEAD>
<Т1Т1_Е>7ексг заголовка</И11е>
</head>
<FRAMESET cols="nn%, /ш%">
<FRAME src="Страница 1. htm">
<FRAME згс="Страница2. htm">
<NOFRAMES>
<Р>Для просмотра этой страницы необходим броузер,
поддерживающий фреймы</р>
<Р>Вы можете посмотреть
<А \ref="Безфреймов. htm">
упрощенную версию </а> страницы</р>
</noframes>
</frameset>
</html>

Разумеется, броузеры, поддерживающие фреймы, не станут воспроизводить ин формацию из секции NOFRAMES.

Организация переходов по фреймам

В качестве примера рассмотрим несколько взаимосвязанных страниц (рис. 3.15). Пусть основная страница (Main.htm) не имеет фреймов, а две другие построены по стандартному принципу: слева меню, справа информация. Конфигурацию фрей мов в нашем случае задает файл Framel.htm. Такую структуру имеют многие сай ты. Кроме того, «цепочки» страниц удобно использовать для создания вирту альных книг, галерей изображений, то есть там, где пользователю требуется последовательно просматривать ряд страниц. В данном случае важно правильно организовать ссылки.

Ниже приведены листинги используемых файлов.

Листинг 3.3. Файл Main.htm

<HTML>
<HEAD>
<Т1Т1Е>Основная страница<ДШе>
</head>
<BODY bgcolor="aqua">
<Н2>Основная страница</Ь2>
<HR>
<А href="framel.htm"> Следующая страница </а>
<HR>
</body>
</html>

Листинг 3.4. Файл Framel.htm

<HTML>
<HEAD>
<Т1Т1Е>Заголовок для фреймов<Т1Т1Е>
</head>
<FRAMESET frameborder=1 framespacing=5 cols="160,*">
<FRAME name="menu01" NORESIZE src="m1.htm">
<FRAME name="info01" src="right"!. htm">
<NOFRAMES>
<Р>Ваш броузер не поддерживает фреймы
</noframes>
</frameset>
</html>

Листинг З.5. Файл Ml.htm

<HTML>
<HEAD>
<Т1Т1Е>Левый фрейм</1Ше>
</head>
<BODY text="black"
bgcolor="gold" link="green"
vlink="purple" alink="red">
<НЗ>Меню</ЬЗ>
<HR>
<А target=_parent href="main.htm" > Основная </а>
<A target="info01"
href="right1.htm" > Правый 1 </a>
<A target="info01"
href="right2.htm" > Правый 2 </a>
<HR>
</body>
</html>

Листинг 3.6. Файл Rightl.htm

<HTML>
<HEAD>
<Т1Т1Е>Правый фрейм<ДШе>
</head>
<BODY text="black" bgcolor=#9CB3BE;
link="green" vlink="purple" alink="red">
<H2> Правый фрейм № 1 </h2>
<A href=main,htm target=_parent> Предыдущая страница </а>
&nbsp; &nbsp; &nbsp;&nbsp;
<A href=right2.htm> Следующая страница </а>
<HR>
</body>
</html>

Листинг З.7. Файл Right2.htm

<HTML>
<HEAD>
<Т1Т1_Е>Правый фрейм<ДШе>
</head>
<BODY text="black" bgcolor="pink"
link="green" vlink="purple" alink="red">
<Н2>Правый фрейм № 2</h2>
<HR>
<A href=right1.htm> Предыдущая страница </а>
&nbsp;&nbsp;&nbsp;&nbsp;
<A href=main.htm target=_parent> Основная страница </а>
<HR>
</body>
</html>

Теперь разберем, как организованы ссылки. Гиперссылка на основной странице (Main.htm) указывает на документ раскладки: файл Framel.htm. Он не содержит полезной информации, но позволяет задать размеры областей и указать необхо димые документы содержания.

Здесь важно, что каждому фрейму дается имя при помощи атрибута name, например

name="info01"

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

В левом фрейме демонстрируется страница Ml.htm, которая выполняет функцт меню: с его помощью можно вернуться на основную страницу или выбрать стра ницу для правого фрейма: в нашем примере их две, но можно использовать любо количество. Левый фрейм сделан более узким (рис. 3.16).

Обратите внимание, что в строке заголовка броузера присутствует заголовок и: файла Framel.htm. Это единственная информация из этого файла, которую мы уви дим на экране, но зато все данные из элементов TITLE других страниц будут скрыты В реальной задаче файлы Rightl.htm и Right2.htm должны быть заполнены полезно! информацией. Кроме нее для удобства пользователя можно разместить ссылю типа «переход к следующей странице», «Переход к предыдущей странице», «пере ход к основной странице». Часто такие ссылки выполняются в виде пиктограмм В нашем примере используется два независимых способа передвижения по стра ницам: при помощи ссылок в меню (левом фрейме) и при помощи ссылок в ин формативных документах (правом фрейме).

Файл Ml.htm содержит три гиперссылки. Первая ведет на страницу без фреймов поэтому в ней обязательно должен быть указан атрибут target со значением _parent В противном случае при переходе возникла бы ошибка: было бы открыто ещ< одно окно броузера или страница Main.htm оказалась бы внутри фрейма. В обще случае шаблон гиперссылки такой:

<А target=_parent href="/uw. htm"> Текст подсказки </а>

Другие значения атрибута target:

• _self — как будто атрибута target нет, то есть страница открывается внутри текущего фрейма;
• _top — то же, что и _parent;
• _blank — открытие еще одного окна броузера и показ страницы в нем.

Две другие ссылки позволяют менять содержимое правого фрейма, оставляя ле вый неизменным. Здесь важно указать атрибут target с именем правого фрейма (используем ссылку в одном фрейме, а страницу загружаем в другой):

target="info01"

На страницах Rightl.htm и Right2.htm гиперссылки построены по такому же прин ципу, но их синтаксис зависит от того, на страницу какого типа следует выполнить переход. Для перехода на страницу без фреймов используется атрибут:

target=_parent

Для перехода на «следующую» («предыдущую») страницу внутри текущего фрейма атрибут target не нужен: действует правило умолчания.

<IFRAME> </iframe>

Этот элемент позволяет создать на странице область с полосами прокрутки (inline frame) для демонстрации содержимого другой страницы. Шаблон для использо вания элемента (просмотра файла Имя файла.htm) такой:

<IFRAME егс="Имя файла, htm"
width="nnn" height="m/™">

Ваш броузер не поддерживает фреймы. Эту страницу можно просмотреть

<А href="^Mfl файла. /?1ти">отдельно. </а>
</iframe>

Атрибуты width и height определяют ширину и высоту фрейма соответственно. Если атрибуты не указаны, используется окно размером 300x150 пикселов. Атрибут sc rolling управляет полосами прокрутки и может иметь следующие зна чения:

  • auto — броузер определяет необходимость показа полос;
  • yes — показ полос прокрутки (вертикальной — обязательно);
  • по — без полос прокрутки.

Можно использовать атрибуты target и f rameborder, а также другие атрибуты стандартных фреймов:

longdesc="(7flL"
name="имя фрейма"
fnarginwidth=" число пикселов"
marginheight=" число пикселов"

Допускается также использование стандартных атрибутов align, class, id, style, title