Рамки
Рамки (или фреймы — Frame) — мощный механизм представления информации на Web-страницах. С помощью рамок экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы и даже Web-узла.
Создание рамок
Для создания рамок (областей страницы) иcпользуют флаг <FRAMESET> и парный ему флаг </FRAMESET>, а для их описания — флаги < FRAME >. Начнем с простого примера.
Создайте в текстовом редакторе два маленьких Web-документа и сохраните их как файлы a.htm и b.htm. Эти страницы будут отличаться только названиями.
Файл a.htm:
<HTML><HEAD><ТIТLЕ>Рамки. Страничка A</TITLE></HEAD><BODY>
<ВОDY>страничка А</BODY></HTML>
Файл b.htm:
<HTML><HEAD><TITLE> Рамки. Страничка B</TITLE></HEAD><BODY>
<ВОDY>страничка В</BODY></HTML>
Создайте базовую страницу, на которой будут отображаться рамки, и сохраните baza.htm:
<HTML><HEAD><TITLE>Paмки</TITLE></HEAD>
<FRAMESET COLS="50%, 50%">
<FRAME SRC="a.htm"><FRAME SRC ="b.htm"></FBAMESET></HTML>
Откройте страницу baza.htm в программе просмотра, и Вы увидите, что она состоит из двух областей:
Приведем небольшой комментарий к использованию флага <FRAMESET>. В нем указывается, что экран подразделяется на две колонки (параметр COLS), каждая из которых занимает ровно половину экрана (COLS="50°/o, 50%").
Флаг < FRAMESET> представляет собой флаг-контейнер, то есть флаг, который может включать в себя другие флаги. Флаг - контейнер заканчивается парным ему флагом </FRAMESET>. Флаг <FRAME > не является флагом - контейнером и не требует парного закрывающего флага.
Как разделить страницу на большее число областей?
Создайте четыре HTML-файла: a.htm, b.htm, c.htm, d.htm. Кроме того, измените цвет фона каждой страницы, для чего используйте атрибут BGCOLOR флага BODY: на странице А укажите цвет FFOOFF, на странице В — OOFFOO, на странице С — FFFFOO и на странице D —FFFFFF.
Файл a.htm:
<HTML><HEAD><Т1ТLЕ>Рамки. Страничка A</TITLE></HEAD>
<BODY BGCOLOR="#FFOOFF">ФреймАрозовогоцвета</BODY></HTML>
Файл b.htm:
<HTML><HEAD><Т1ТLЕ>Рамки. Страничка B</TITLE></HEAD>
<BODY BGCOLOR="#OOFFOO">ФреймВзеленогоцвета •</BODY></HTML>
Файл c.htm:
<HTML><HEAD><Т1ТЬЕ>Рамки. Страничка C</TITLE></HEAD>
<BODY BGCOLOR="#FFFFOO">фреймСжелтогоцвета</BODY> </HTML>
Файл d.htm:
<HTML> <HEAD><Т1ТЪЕ>Рамки.Страничка D</TITLE></HEAD>
<BODY BGCOLOR=#tFFFFFF">фрейм D белогоцвета </BODY></HTML>
|Базовая страница demo.htm: (в нашем случае – это и есть index.html)
<HTML><HEAD><Т1ТLЕ>Демонстрация фреймов</Т1ТLЕ></HEAD>
FRAMESET COLS="25%, 25%, 25%, 25%">
<FRAME SRC="a.htm"><FRAME SRC="b.htm">
<FRAME SRC="c.htm"><FRAME SRC="d.htm"></FBAMESET></HTML>
Откройте файл demo.htm в программе просмотра. На экране компьютера Вы увидите, как выглядят созданные Вами рамки
Можно ли сделать рамки разного размера? Да вайте попробуем!
Отредактируйте Ваш файл demo.htm и сохранитe его как demo2.htm:
•<HTML> <HEAD>
<Т1ТLЕ>Демонстрация фреймов 2</TITLE> </HEAD>
<FRAMESET cols=”10%, 10%, *"> <FRAME SRC="a.htm"><FRAME SRC="b.htm">
<FRAME SRC="c.htm"> <FRAME SRC="d.htm"></FBAMESET> </HTML>
Обратите внимание, что размер четвертой ;cамой правой рамки указан не числовым значением, символом «*». Это означает, что данная рамка должна занимать всю оставшуюся площадь главной стра-ицы. ; Просмотрите файл на экране:
Размеры рамок можно задавать не только в процентах, но и в пикселях. Например, можно указать, что каждая из четырех рамок имеет горизонтальный размер в 60 пикселей:
<HTML> <HEAD><Т1ТLЕ>Демонстрация фреймов 3</TITLE></HEAD>
<FRAMESET COLS="60,60,60,60">
<FRAME SRC="a.htm">< FRAME SRC="b.htm">
<FRAME SRC="c.htm">< FRAME SRC="d.htin"></FBAMESET</HTML>
Здесь следует сделать важное замечание. Созданные Вами страницы будут просматривать разные пользователи, у которых мониторы имеют разноe разрешение. Использование абсолютных величин может привести к нежелательным эффектам — страница, которая отлично смотрится с разрешением 1024х768, может выглядеть совсем по-другому в разрешении 800х600. Поэтому следует придерживаться простого правила: задавать размер одной из рамок символом «*».
Во всех рассмотренных примерах использовались рамки в виде колонок. Естественно, что мы можем использовать и горизонтальные ряды. Обратите внимание, когда создавался файл demo.htm, Вы использовали флаг <FRAMESETCOLS>. Измените базовый файл с четырьмя рамками указанным ниже образом, используя флаг <FRAMESETROWS>. Сохраните его как файл demo3.htm.
<HTML> <HEAD><Т1ТLЕ>Демонстрацияфреймов 3</TITLE> </HEAD>
<FRAMESET ROWS="25%, 2.5%, 25%, 25%">
<FRAME SRC="a.htm"> <FRAME SRC="b.htm"> <FRAME SRC="c.htm"> <FRAME SRC="d.htm"> </FBAMESET></HTML>
Что еще можно делать с рамками?
Например, можно задать соотношение между ними.
Создайте файл demo4.htm:
<HTML><HEAD><Т1ТLЕ>Демонстрация фреймов 4</TITLE></HEAD>
<FRAMESET COLS="100, *, 2*">
<FRAME SRC="a.htm"><FRAME SRC="b.htm"><FRAME SRC="c.htm">
</FBAMESET> </HTML>
Откройте файл в программе просмотра :
Разберемся, как задан размер трех рамок в данном примере: <FRAMESETCOLS="100, *, 2*">
Самая левая рамка имеет горизонтальный размер 100 пикселей, вторая должна занимать всю оставшуюся часть главной страницы, а третья (самая правая) — в два раза больше второй.
Теперь разделите третью рамку пополам. Текст на языке HTML в Вашем файле demo5.htm должен выглядеть следующим образом:
<HTML><HEAD><Т1ТLЕ>Демонстрация фреймов 5</TITLE></HEAD>
<FRAMESET COLS="100, *, 2*">
<FRAME SRC="a.htm"><FRAME SRC="b.htm"><FRAMESET ROWS="50%,50%">
<FRAME SRC="c.htm"></FRAMESET></FRAMESET></HTML>
На экране компьютера Вы увидите, что рамка С разделена на две части
Рамки — мощное и удобное средство, но не следует злоупотреблять ими. Не располагайте на экране более трех рамок и старайтесь не применять их без надобности.
Вернемся к примеру с двумя рамками, каждая из которых занимает ровно половину области главной страницы (файл baza.htm):
<HTML><HEAD><Т1ТLЕ>Демонстрация фреймов</ТIТLЕ></HEAD>
<FRAMESET COLS="50%,50%">
<FRAME SRC="a.htm"><FRAME SRC="b.htm"></FBAMESET></HTML>
„Найдите какую-нибудь небольшую картинку в формате .gif или .jpg. Измените значение второгo флага FRAME так, чтобы он указывал не на страницу, а на графическое изображение:
<HTML><HEAD><Т1ТLЕ>Демонстрация фреймов 6 </TITLE> </HEAD>
<FRAMESET COLS="50%,50%"><FRAME SRC=”a.htm”>
<FRAME SRC:="fly.gif"> </FBAMESET> </HTML>
Вы можете сделать страницу более элегантной, если укажете, что размер рамки, содержащей графическое изображение, равен размеру изображения, а вторая рамка покрывает оставшуюся часть главного окна.
Отобразите это в файле demo7.htm так:
<HTML><HEAD> <Т1ТLЕ>Демонстрация фреймов 7</TITLE></HEAD>
<FRAMESET COLS="*, 78%"> -
<FRAME SRC ="fly.gif"><FRAME SRC="a.htm"></FBAMESET></HTML>
Если мы зададим размер рамки-фрейма, содержащей графическое изображение, меньшим, чем раз мер изображения, то увидим появление полос прокрутки (файл demo8.htm):
<HTML><HEAD><Т1ТLЕ>ДемонстраЦия фреймов 8</TITLE></HEAD>
FRAMESET COLS="*, 85%"> <FRAME SRC ="fly.gif"><FRAME SRC="a.htm">
</FBAMESET> </HTML>
На экране Вы увидите стрелочки, появившиеся внизу левой рамки
Введя атрибут SCROLLING в соответствующий флаг < FRAME>, можно управлять появлением на экране полос прокрутки. Возможные значения атрибута SCROLLING
SCROLLING = YES — у рамки всегда будут полосы прокрутки, независимо от того, нужны ли они или нет.
SCROLLING=NO—у рамки не будет полос прокрутки, независимо от того, нужны ли они или нет.
SCROLLING = AUTO — у рамки будут полосы прокрутки только в случае необходимости.
Проведем эксперимент с полосами прокрутки
Создадим файл demo9.htm
<HTML><HEAD><TITLE>neMOHCTpauuH фреймов 9</TITLE></HEAD>
<FRAMESET COLS="*, 85%">
<FRAME SRC ="fly.gif" SCROLLING=NO><FRAME SRC="a.htm"></FBAMESET>|</HTML>
Обратите внимание на то, что на экране на левой рамке, где размещено графическое изображение, исчезла полоса прокрутки. Теперь мы не можем просмотреть изображение полностью.
Давайте посмотрим, как выровнять графическое изображение по левой границе рамки. Как видно из предыдущего рисунка, графическое изображение не-много смещено вправо от границы рамки. Выровнять его можно с помощью атрибутов MARGINWIDTH и MARGINHEIGHT. Эти атрибуты управляют отступом изображения внутри рамки Создайте файл demolO.htm. и установите минимальные значения каждого атрибута:
<HTML><HEAD> <TITLE>демонстрацияфреймов 10</TITLE></HEAD>
<FRAMESET COLS="*,80 %">
<FRAME SRC="fly.gif"MARGINWIDTH=1MARGINHEIGHT=1>
<FRAME SRC=" a.htm">
</FBAMESET>
</HTML>
На экране Вы увидите, что графическое изображение выровнялось:
Связь между рамками
Вернемся к часто используемому нами примеру с двумя рамками (baza.htm). Измените содержимое файла a.htm, добавив ссылку на другой файл (c.htm):
<HTML> <HEAD><Т1ТЬЕ>Демонстрация фреймов (ссылка) </TITLE> </HEAD>
A link to <A HREF="c.htm">c.htm</A> </BODY> </HTML>
Если Вы загрузите базовый пример с двумя рамками и активизируете ссылку, то получите содержимое страницы С, отображенное внутри рамки А. А как отобразить содержимое страницы С внутри рамки В? Внимательно изучите пример:
<HTML><HEAD><Т1ТLЕ>Демонстрация фреймов </TITLE></HEAD>
<FRAMESET COLS="50%, 50%"><FRAME SRC="a.htm">
<frame SRC ="b.htm" NAME="FRAME_B"></FBAMESET></HTML>
Добавление имени не отражается на его внешнем виде — это лишь внутреннее изменение. Но Вы можете использовать это имя в качестве параметра атрибута targetфлага <А>:
<HTML><HEAD>;<Т1ТLЕ>Демонстрацияфреймов </TITLE> </HEAD><BODY>
<A HREF="c.htm" TARGET="FRAME B"> c.htm</A></BODY> </HTML>
Посмотрев на этот пример в программе просмо тра, Вы обнаружите, что содержимое страницы С отображается теперь внутри фрейма В.