Предположим, что на Web-странице
опубликован очень длинный документ (повесть). Для удобства
пользователя автор ввел в начало документа содержание,
состоящее из 20 пунктов, соответствующих
главам повести. Что он должен предусмотреть, чтобы читатель мог перейти
к любой главе щелчком на соответствующем
пункте в содержании?
Какие виды списков вы знаете?
Какими средствами создают списки на Web-страницах?
Что такое вложенные списки?
Лабораторная
работа №5 Организация фреймов
Цель работы научить студентов:
использованию основных тегов
по созданию фреймов,
создавать фреймы в HTML-документах,
организовать гиперссылки между
фреймами.
Мы можем создать документ, который разобьет
одно окно просмотра на несколько прямоугольных
областей, в каждой из которых будет отображаться
один HTML-документ. Эти прямоугольные области,
каждая из которых, по сути, отдельное
окно просмотра, и называются фреймами или
кадрами. В каждом фрейме показывается
свой HTML-документ. Фреймы могут функционировать
независимо или влиять друг на друга, используя
ссылки, указывающие на другие фреймы.
Каждый фрейм может иметь следующие свойства:
имеет свой URL, что позволяет
загружать его независимо от других фреймов;
имеет собственое имя (параметр NAME), позволяющее переходить к нему из другого фрейма;
размер фрейма может быть изменен
пользователем прямо на экране при помощи
мыши (если это не запрещено указанием
специального параметра).
Данные свойства фреймов позволяют
создавать продвинутые интерфейсные решения,
такие как:
помещение в статическом фрейме
оглавления всех или части WEB-документов,
содержащихся на WEB-сервере, что позволяет
пользователю быстро находить интересующую
его информацию;
создавать окна результатов
запросов, когда в одном фрейме находится
собственно запрос, а в другом результаты
запроса.
5.1. Способы создания
фреймов
Фрейм определяется как некое
выделенное в окне броузера поле в форме
прямоугольника. Каждый из фреймов выдает
на экран содержимое собственного HTML-документа.
Таким образом, можно, например, создать
два фрейма. В первый такой фрейм можно
загрузить “домашнюю страницу" фирмы
Netscape, а во второй – фирмы Microsoft.
Формат документа, использующего
фреймы, внешне очень напоминает формат
обычного документа, только вместо тега
BODY используется контейнер FRAMESET, содержащий
описание внутренних HTML-документов, содержащий
собственно информацию, размещаемую во
фреймах.
<HTML>
<HEAD>...</HEAD>
<FRAMESET>...</FRAMESET>
</HTML>
Представим общий синтаксис
фреймов:
<FRAMESET COLS="value" | ROWS="value">
<FRAME SRC="url1">
<FRAME ...>
...
</FRAMESET>
5.2 Тег FRAMESET
Общий контейнер FRAMESET описывает
все фреймы, на которые делится экран.
Вы можете разделить экран на несколько
вертикальных или несколько горизонтальных
фреймов. Тег FRAME описывает каждый фрейм
в отдельности. Рассмотрим более детально
каждый компонент.
<FRAMESET [COLS="value" | ROWS="value"]>
Тег <FRAMESET> имеет завершающий
тег </FRAMESET>. Все, что может находиться
между этими двумя тегами, это тег <FRAME>,
вложенные теги <FRAMESET> и </FRAMESET>, а
также контейнер из тегов <NOFRAME> и </NOFRAME>,
который позволяет строить двойные документы
для броузеров, поддерживающих фреймы
и не поддерживающих фреймы.
Тег <FRAMESET> имеет два атрибута:
ROWS и COLS.
ROWS="список-определений-горизонтальных-подокон"
Данный атрибут содержит описания
некоторого количества подокон, разделенные
запятыми. Каждое описание представляет
собой числовое значение размера подокна
в пикселах, процентах от всего размера
окна или связанное масштабное значение.
Количество подокон определяется количеством
значений в списке. Общая сумма высот подокон
должна составлять высоту всего окна (в
любых измеряемых величинах). Отсутствие
атрибута ROWS определяет один фрейм, величиной
во все окно броузера.
Синтаксис используемых видов
описания величин подокон:
value
Простое числовое значение определяет
фиксированную высоту подокна в пикселах.
Это далеко не самый лучший способ описания
высоты подокна, поскольку различные броузеры
имеют различный размер рабочего поля,
не говоря уже о различных экранных разрешениях
у пользователя. Если вы, все же, используете
данный способ описания размера, то настоятельно
рекомендуется сочетать его с каким-либо
другим, чтобы в результате вы точно получили
100%-ное заполнение окна броузера вашего
пользователя.
value %
Значение величины подокна в
процентах от 1 до 100. Если общая сумма процентов
описываемых подокон превышает 100, то размеры
всех фреймов пропорционально уменьшаются
до суммы 100%. Если, соответственно, сумма
меньше 100, то размеры пропорционально
увеличиваются.
value *
Вообще говоря, значение value
в данном описании является необязательным.
Символ "*" указывает на то, что все
оставшееся место будет принадлежать
данному фрейму. Если указывается два
или более фрейма с описанием "*" (например
"*,*"), то оставшееся пространство
делится поровну между этими фреймами.
Если перед звездочкой стоит цифра, то
она указывает пропорцию для данного фрейма
(во сколько раз од будет больше аналогично
описанного чистой звездочкой). Например,
описание "3*,*,*", говорит, что будет
создано три фрейма с размерами 3/5 свободного
пространства для первого фрейма и по
1/5 для двух других.
COLS="список-определений-горизонтальных-подокон"
То же самое, что и ROWS, но делит
окно по вертикали, а не по горизонтали.
Примеры:
HTML-страница, создающая два
фрейма, в общем случае может
выглядеть следующим образом:
<html>
<frameset rows="50%,50%">
<frame src="1 файл.htm">
<frame src="2 файл.htm">
</frameset>
</html>
|
<html>
<frameset rows="50%,50%">
<frame src="dog.jpg">
<frame src="cat.jpg">
</frameset>
</html>
|
В результате будут созданы
два фрейма. Вы можете заметить, что во
фрейме <frameset> мы используем
атрибут строк rows. Это означает,
два наших фрейма будут расположены друг
над другом. В верхний фрейм будет загружена
HTML-страница 1файл.htm, а в нижнем
фрейме разместится документ 2 файл.htm. Окончательно
созданная структура фреймов будет выглядеть
следующим образом:
Рис.1. Горизонтальные фреймы
Все рамки предполагаются прямоугольными.
Установка атрибута rows определяет
число рамок по горизонтали, а атрибут cols задает число
рамок по вертикали. Таким образом, задается
сетка рамок. Если атрибут rows не задан, каждая
колонка занимает всю длину страницы.
Если атрибут cols не задан, каждый
ряд занимает всю ширину страницы. Если
не заданы оба атрибута, на странице присутствует
одна рамка, занимающая всю страницу.
HTML-страница, создающая три
вертикальных фрейма выглядит следующим
образом:
<frameset cols="33%,33%,*">
<frame src="1
фрейм-столбец.htm">
<frame src="2
фрейм-столбец.htm">
<frame src="3
фрейм-столбец.htm">
</frameset> |
<frameset cols="33%,33%,*
">
<frame src="dog.jpg">
<frame src="animals/dog04.jpg">
<frame src="animals/dog05.jpg">
</frameset> |
Рис.2. Вертикальные фреймы
Рис.3. Вертикальные фреймы с
рисунками
Теперь построим фрейм-кадры
из пяти ячеек – первый столбец из двух
строк и второй столбец из трех строк:
<frameset cols="50%,50%">
<frameset
rows="50%,50%">
<frame src="1 ячейка.htm">
<frame src="2 ячейка.htm">
</frameset>
<frameset
rows="33%,33%,33%">
<frame src="3 ячейка.htm">
<frame src="4 ячейка.htm">
<frame src="5
ячейка.htm">
</frameset>
</frameset>
Рис.3. Деление окна
на фреймы
В следующем примере создается три колонки:
вторая имеет фиксированную ширину в 250
пикселей (что удобно для картинки известного
размера). Первая получает 25% оставшегося
пространства, а третья – 75%.
<FRAMESET cols=”1*,250,3*”>
… остальная часть определения …
</FRAMESET>
В следующем примере создается
решетка 2х3:
<FRAMESET rows=”30%,70%” cols=”33%,34%,33%”>
… остальная часть определения …
</FRAMESET>
В следующем примере предполагается,
что высота окна равна 1000 пикселей. Для
первой рамки выделяется 30% общей высоты
(300 пикселей). Для второй рамки выделено
точно 400 пикселей. Это оставляет 300 пикселей
на две оставшиеся рамки. Высота четвертой
рамки определена как “2*”, а третей - *,
следовательно, третья получит 100, а четвертая
– 200 пикселей.
<FRAMESET rows=”30%,400,*,2*” >
… остальная часть определения …
</FRAMESET>
Если при задании абсолютных
размеров остается свободное место, или
возникает перерасход пространства, броузер
пропорционально увеличит или уменьшит
размеры рамок. FRAMESET могут вкладываться
друг в друга на любом уровне. В приведенном
примере внешний FRAMESET делит имеющееся
пространство на три равные колонки. Внутренний
FRAMESET делит вторую область на два ряда
не равной высоты.
<FRAMESET rows=”33%,33%,34%” >
…содержимое первой рамки…
<FRAMESET rows=”40%,50%” > |
…содержимое второй рамки первого
ряда… |
…содержимое второй рамки второго
ряда… |
</FRAMESET> |
…содержимое третей рамки… |
</FRAMESET>
Атрибут src определяет источник
текста, помещаемого в рамку. Содержимое
рамки не может быть записано в том же
документе, в котором описана сама рамка.
Пример:
<HTML>
<FRAMESET cols=”33%, 33%, 33%”>
| |
<FRAMESET rows=”*,200”> |
| |
|
<FRAME src=”contents_of_frame1.html”> |
| |
|
<FRAME src=”contents_of_frame2.gif”> |
| |
</FRAMESET> |
| |
<FRAME> src=”contents_of_frame3.html”> |
| |
<FRAME> src=”contents_of_frame4.html”> |
</FRAMESET>
</HTML>
В результате будет получена
раскладка рамок, показанная ниже на рисунке.
Ниже приведенный пример содержит
в себе ошибку, так как текст второй рамки
включен в описание самой рамки.
<HTML>
<FRAMESET cols=”50%,50%”>
| |
<FRAME src=”contents_of_frame1.html”> |
| |
<FRAME src=”#anchor_in_same_document”> |
</FRAMESET>
<BODY>
… некоторый текст…
<H2><A name=”anchor_in_same_document”>Important section</A></H2>
… некоторый текст…
</BODY>
</HTML>
5.3 Тег FRAME
Данный тег определяет фрейм
внутри контейнера FRAMESET. В общем виде он
записывается следующим образом:
<FRAME SRC="url" [NAME="frame_name"]
[MARGINWIDTH="nw"] [MARGINHEIGHT="nh"] [SCROLLING=yes|no|auto]
[NORESIZE]>
Описание атрибутов:
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/Рассмотрим реализацию
фреймов для подобного разбиения окна:
<FRAMESET ROWS="*,*">
<NOFRAMES>
<H1>Ваша версия WEB-броузера
не поддерживает фреймы!</H1>
</NOFRAMES>
<FRAMESET COLS="65%,35%">
<FRAME SRC="link1.html">
<FRAME SRC="link2.html">
</FRAMESET>
<FRAMESET COLS="*,40%,*">
<FRAME SRC="link3.html">
<FRAME SRC="link4.html">
<FRAME SRC="link5.html">
</FRAMESET>
</FRAMESET>
Планирование фреймов
и взаимодействия между фреймами
С появлением фреймов сразу
возникает вопрос: "А как сделать так,
чтобы нажимая на ссылку в одном фрейме
инициировать появление информации в
другом?"