Порядок выполнения работы
1. По согласованию с преподавателем выбрать графический файл для создания графической карты.
2. Выполнить предварительную разметку фрагментов графической карты, определив координаты опорных точек описанными выше способами.
3. Создать основной HTML-документ, с описанием графической карты и несколько дополнительных, по числу размеченных фрагментов.
4. Скорректировать координаты опорных точек так, чтобы форма каждого фрагмента в точности соответствовала заданию.
Лабораторная работа № 4. Создание и использование фреймов
В настоящее время широкое распространение получил способ представления информации на основе многооконного интерфейса. Экран дисплея при этом делится на несколько частей (окон, рамок, фреймов). В этом случае можно просматривать содержимое сразу нескольких HTML-документов.
Основной документ в этом случае представляет собой описание рамок, или фреймов. Отличие его от рассмотренного ранее обычного HTML-документа (ЛР № 2) состоит в том, что основная его часть начинается и заканчивается не метками <BODY> и </BODY>, а метками < FRAMESET > …</FRAMESET >.
Параметры тега <FRAMESET> могут быть следующими:
ROWS = “xl, x2,..., xN”, где в кавычках перечисляются значения, определяющие количество строк в наборе рамок и их высоту. Величины xl, x2, ..., xN – могут быть заданы либо в пикселах, либо в процентах от общей высоты набора. Сумма высот всех рамок должна быть равна высоте всей области отображения. Если этого не происходит, броузер сам корректирует значения. Одно из значений может быть представлено символом * , это означает, что данная строка имеет размер, дополняющий высоту набора рамок до высоты экрана. Например, описание ROWS = “100, 300,* ” означает, что набор рамок содержит три строки, высота первой 100 пикселов, второй – 300, а высота третьей будет зависеть от разрешения экрана: если установлен режим 640х480, то ее высота будет равна 480-100-300=80 пикселов, а при режиме 800х600 – высота равна 600-100-300=200.
COLS=”xl, x2,..., xN”, – используется для описания рамок как столбцов различной ширины. Используется так же, как параметр ROWS.
Для задания содержимого рамки используется метка <FRAME параметры>. Параметры могут быть следующими:
SRC – указывает адрес документа, который должен быть отображен в рамке. Если параметр не указан, рамка останется пустой.
NAME – значение этого параметра определяет имя для рамки. Впоследствии по этому имени на рамку можно будет сослаться с помощью параметра TARGET.
SCROLLING – показывает, можно ли «прокручивать» содержимое документа в рамке. Может принимать следующие значения: YES – содержимое рамки МОЖЕТ прокручиваться, NO – содержимое рамки НЕ может прокручиваться, AUTO – броузер решает, отображать линейку прокрутки или нет (исходя из длины документа). Это значение используется по умолчанию.
NORESIZE – если этот параметр указан, пользователь не сможет изменить размеры рамки. По умолчанию пользователь МОЖЕТ изменять размеры отображаемых рамок (например, таская границу рамки указательным устройством).
Пример:
<HTML>
<FRAMESET ROWS = “50%, 50%”>
<FRAMESET COLS = «150, *, 150»>
<FRAME SRC = “frame1.html” NAME = “Frame1”>
<FRAME SRC = “frame2.html” NAME = “Frame2”>
<FRAME SRC = “frame3.html” NAME = “Frame3”>
</FRAMESET>
<FRAMESET COLS = “50%, 50%”>
<FRAME SRC = “frame4.html” NAME= “Frame4”>
<FRAME SRC = “frame5.html” NAME = “Frame5”>
</FRAMESET>
</FRAMESET>
</HTML>
Вид экрана при просмотре этого документа показан на рис. 12.
Frame1 Frame2 Frame3
Frame4 Frame5
Рис. 12. Расположение рамок на экране в приведенном выше примере
Для организации связей между рамками используется параметр TARGET.
В качестве примера рассмотрим следующую задачу: используя созданный ранее (см. ЛР №3) документ с графической картой и связанные с ним HTML-документы, необходимо создать документ, в котором будут отображаться одновременно и фотография и комментарий к ней.
Для этого вначале создадим документ описания рамок. Набор состоит из двух рамок c именами FR1 и FR2, расположенных по горизонтали, соотношение по ширине этих рамок должно быть 80% и 20%. В первой рамке будет отображаться документ foto.htm, во вторую рамку будут направляться связанные с ним документы, в зависимости от того, куда будет указывать курсор на графической карте.
Текст документа описания рамок (файл mainframe.htm) приведен ниже.
<HTML>
<HEAD>
<TITLE> Фреймы </TITLE>
</HEAD>
<FRAMESET COLS = “80%, 20%”>
<FRAME SRC = “foto.htm” SCROLLING = NO NAME = “FR1” >
<FRAME NAME = “FR2”>
</FRAMESET>
</HTML>
Из приведенного текста видно, что для второй рамки не указан адрес источника, поэтому при начальном просмотре она будет пустой.
Для того чтобы в окно FR2 направлялись документы, связанные с foto.htm, в последний нужно добавить параметр TARGET в каждую метку описания области <AREA>:
<HTML>
<BODY>
<H5> Группа МВ-5-К </Н5>
<MAP NAME = ”map1” >
<AREA SHAPE = “POLY”
COORDS = “105, 57 ,115 , 57, 116, 71 ,126, 86, 122, 114,
123, 169, 107, 166, 103, 91, 100, 78”
HREF = “text2.htm” TARGET= “FR2”>
</MAP>
<IMG SRC="Photo.jpg" WIDTH="300" HIGTH="220"
USEMAP = "# map1">
</BODY>
</HTML>
Рис. 13. Вид экрана при начальной загрузке файла mainframe.htm
Рис. 14. Вид экрана после щелчка мыши по одной из фигур на снимке
На рис.13 показан вид экрана при начальном просмотре файла mainframe.htm, а на рис. 14 – вид экрана после выбора одной из размеченных областей графической карты (см. рис. 11).
Порядок выполнения работы
По согласованию с преподавателем выбрать схему размещения окон (фреймов) на экране.
Подготовить документ описания фреймов, а также основной и дополнительные HTML-документы, предназначенные для размещения в окнах.