HTML / Лабораторная работа 5
.docЛабораторная работа 5. Фреймы. Карты изображений
Цель: Научиться создавать фреймы; Научиться управлять свойствами фреймов; Научиться создавать и применять карты изображений для не прямоугольных ссылок.
5.1 Теоретические сведения
5.1.1 Фреймы
Фреймы позволяют разбивать веб-страницы на скроллируемые подокна с целью улучшения внешнего вида и функциональности информационных систем и веб-приложений. Каждый фрэйм имеет следующие свойства:
-
каждый фрэйм имеет свой URL, что позволяет загружать его независимо от других фрэймов;
-
каждый фрэйм имеет собственое имя (атрибут name), позволяющее переходить к нему из другого фрэйма (атрибут target в теге ссылки <a>);
-
размер фрэйма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрешено указанием специального параметра).
Эти свойства фрэймов позволяют создавать интерфейсные решения, которые могут совмещать статическую информации в одном фрэйме (это может быть оглавление, графический логотип фирмы или набор управляющих кнопок) и динамическую информацию в другом фрейме. Таким образом в одном фрэйме находится собственно запрос, а в другом результаты запроса.
Формат документа, использующего фрэймы, внешне очень напоминает формат обычного документа, только вместо тэга <body> используется контейнер <frameset>, содержащий описание внутренних html-документов, содержащий собственно информацию, размещаемую во фрэймах. Контейнер <frameset>, в свою очередь состоит из самих фреймов - тег <frame> и <noframe> позволяет строить двойные документы для броузеров, поддерживающих фрэймы и не поддерживающих фрэймы.
Тэг <frameset> имеет два взаимоисключающих атрибута: rows (определяет число и высоту строк в наборе фреймов) и cols (определяет число и ширину столбцов в наборе фреймов). Ширина (или высота) фрейма может задаваться как в пикселях, так и в процентах от общей ширины (или высоты) окна браузера.
Например:
-
<FRAMESET COLS="50,*,50"> - описывает три фрэйма, два по 50 точек справа и слева, и один внутри этих полосок.
-
<FRAMESET ROWS="20%,3*,*"> - описывает три фрэйма, первый из которых занимает 20% площади сверху экрана, второй 3/4 оставшегося от первого фрэйма места (т.е. 60% всей площади окна), а последний 1/4 (т.е. 20% всей площади окна.
Тег <frame> имеет свои атрибуты, которые детально описывают содержимое и поведение каждого фрейма (см. таблица 5.1):
Таблица 5.1 - Атрибуты тега <frame>.
|
Атрибут |
Назначение |
|
src |
задает путь к файлу, предназначенному для загрузки во фрейме |
|
name |
задает уникальное имя фрейма |
|
scrolling |
способ отображения полосы прокрутки во фрейме. Возможные варианты значений: yes, no, auto. |
|
bordercolor |
цвет линии границы |
|
frameborder |
определяет следует ли отображать рамку вокруг фрейма |
|
norsize |
определяет можно изменять размер фрейма пользователю или нет |
Пример использования фреймов рассмотрен в листинге 5.1:
Листинг 5.1 - Пример использования фреймов.
Комментарий к листингу.
-
в документе отсутствует тег <body>;
-
вначале фреймовая структура разбита на два столбца: первый шириной в 200 пикселей, а второй занимает все оставшееся пространство;
-
в левом фрейме открыт файл menu.htm. Ссылки этом файле организованы с указанием целевого фрейма, в котором должны открывать новые файлы;
-
вместо правого фрейма организована новая фреймовая структура из двух строк. Высота первой строки 30% от общей высоты окна, а нижняя часть занимает оставшиеся 70%;
-
в верхнем файле открыт файл header.htm;
-
в нижнем файле открыт файл content.htm или тот, который будет выбран в левом фрейме. Именно по имени тега content (см. листинг 5.1) и по атрибуту target в теге </a> файла menu.htm (см. листинг 5.2) определяется где должна быть открыта ссылка.
Листинг 5.2 - Атрибут target в теге
Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуются карты изображений в двух различных вариантах – серверном и клиентском.
В случае применения серверного варианта браузер посылает запрос на сервер с указанием координат курсора мыши над изображением для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение. Клиентский вариант является более часто используемым. Для указания браузеру, что изображение является картой, используется атрибут usemap в теге <img>. Он является ссылкой на описание конфигурации карты, которая задается тегом <map>. Значение атрибута name данного тега должно соответствовать имени в usemap. Для задания активой области, являющейся ссылкой на HTML-документ, используется тег <area> с атрибутами (см таблица 5.2):
Таблица 5.2 - Атрибуты тега <area>.
|
Атрибут |
Назначение |
|
shape |
определяет форму активной области. Может принимать значения circle, rect, poly |
|
alt |
добавляет альтернативный текст подписи ссылки для каждой области |
|
cords |
задает координаты активной области. Координаты отсчитываются в пикселях от левого верхнего угла изображения. Первое число является координатой по горизонтали, второе – по вертикали. |
Список координат передаваемых в атрибут coords зависит от формы области.
Для окружности задаются три числа - координаты центра круга и радиус: <area shape="circle" coords="230,340, 100" href="/circle.html">.
Для прямоугольника – координаты левого верхнего и правого нижнего угла <area shape="rect" coords="24,18, 210,56" href="/rect.html">:
Для полигона задаются координаты его вершин.
В случае использования ссылок не прямоугольной формы альтернативой картам изображения может быть внедрение flash.
5.2 Практическая часть
-
Запустите веб-сервер Денвер.
-
Создайте html-файл (frame.htm), состоящий из трех фреймов (см. рисунок справа). Для создания фрейма необходимо после раздела заголовка документа указать структуру фреймов: два фрейма вертикальный, а во втором вертикальном еще два горизонтальных фрейма…
<frameset cols="20, *">
<frame src="file.htm">
<frameset rows="100, *">
<frame src="file.htm">
<frame src="file.htm">
</frameset>
</frameset>
-
Поместите файл на свой веб-сервер и дайте каждому фрейму уникальное имя: значение атрибута name для тега <frame>.
-
Задайте левому фрейму фиксированную ширину в 234 пикселя с запретом изменять ширину фрейма (атрибут noresize).
-
В левый фрейм поместите файл меню (menu.htm), который будет состоять из списка лабораторных работ. Меню разместите в таблице, состоящей из 3-х строк (в каждую строку фоном поместите рисунок).
-
Задайте для каждой лабораторной работы ссылку на соответствующий документ, который будет открыт в правом нижнем фрейме. Для открытия ссылки в другом фрейме используйте атрибут target тега <a>, в качестве значения атрибута target укажите имя фрейма в котором необходимо открыть файл.
-
В верхний фрейм поместите в качестве источника поисковую систему google.com. Значение атрибута src для второго тега <frame>.
-
Создайте в папке своего домена файла map.htm, содержащий карту изображений.
-
Поместите в файл map.htm изображение-карту с геометрическими фигурами: <img src="figure_1.png" border="0" usemap="#navigation">
Дополните файл обработкой карты изображений
<map name="navigation">
<area shape="circle" coords="72,93,40" href="krug.html" title="Круг">
<area shape="rect" coords="129,129,268,194" href="pryam.html" title="Прямоугольник">
<area shape="poly" coords="168,108,221,15,279,108" href="triangle.html" title="Треугольник">
</map>
-
Проверьте работу карты изображений. Обратите внимание на всплывающие подсказки и ссылки.
-
Создайте в отдельном файле аналогичную карту зображений для задания областей Украины. В карте изображений выделите три области, на киевскую область назначьте ссылку на сайт meta.ua на две других области любые ссылки. Что бы узнать координаты точек изображения можно использовать программу Paint :)
-
Добавьте в файл, находящийся в левом фрейме ссылку на обе карты изображений.
-
Покажите выполненную работу преподавателю.
5.3 Контрольные вопросы
-
Для чего используются фреймы?
-
За что отвечает атрибут target тега <a>?
-
Как указать ссылке в каком фрейме надо открыться?
-
В каких единицах можно задать ширину или высоту фрейма?
-
Можно ли изменять границы между фреймами?
-
Для чего используются карты изображений?
-
Какие формы фигур могут использоваться в картах изображений?
-
Как можно подписать фигуры карты изображений?
-
Какие виды карт изображений бывают?
-
Что может служить альтернативой использования карт изображений?