Графическая карта ссылок или изображение карта

Изображения-карты позволяют выделить отдельные области изображений и определить для каждой из них свое действие. Скажем, какие-то части картинки будут служить ссылками на другие страницы, после клика по другим областям рисунка будет загружен и проигран музыкальный фрагмент, или выполнен JavaScript. Существует два типа изображений-карт:

клиентские (client-side) - когда пользователь кликает по рисунку, браузер сам интерпретирует координаты клика. Он выбирает ссылку, определенную для данной области, и переходит по ней (либо выполняет заданное действие);

серверные (server-side) - координаты клика передаются для интерпретации на сервер и уже он делает соответствующие действия (например, возвращает браузеру URL для перехода). Первый тип проще и доступнее, поэтому далее рассматривать будем только его.

Для создания изображения-карты используются элементы <MAP> и <AREA>.

Элемент MAP (так и переводится - "карта") должен обязательно иметь атрибут NAME. Это позволяет указать браузеру, к какому именно рисунку на странице относится данная карта.

Элемент AREA имеет следующие атрибуты:

1. SHAPE - описывает форму выделяемой области, возможные значения:

a) RECT - прямоугольник;

b) CIRCLE - круг;

c) POLY - многоугольник;

d) DEFAULT - определяет всю область.

2. COORDS - координаты, определяющие размеры и положение области на изображении. Количество и порядок значений зависит от значения атрибута SHAPE:

a) RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего);

b) CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус);

c) POLY: - X1, Y1, X2, Y2,..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника).

3. NOHREF - этот атрибут определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца.

4. ALT - альтернативный текст для выделенной области, используется невизуальными браузерами.

5. TITLE - название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.

6. TARGET - значение этого атрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ (в случае если окно разбито на фреймы).

Если описываемые области пересекаются (накладываются друг на друга), то приоритет имеет область, описанная первой.

Атрибут USEMAP используется для того, чтобы соотнести какое-то изображение с определенной картой. Он может использоваться с элементами IMG (чаще всего!), OBJECT и INPUT.

Пример использования графической карты ссылок

Приведем практический пример создания изображения-карты. Выберем изображение безымянный.gif и определим его размеры - ширина 200 пикселов и высота 150 пикселов. Определим три фигуры: прямоугольник с вершинами (110,30) и (178,79); круг с центром в точке (70,106) и радиусом 30; треугольник с вершинами (75,25), (31,69) и (12,11). Вам рекомендуется сделать поясняющий рисунок. Пусть первая фигура должна загружать файл lesson1.htm из каталога с текущим документом, вторая - вызывать переход в начало документа, а третья - загружать файл dolphin.jpg в новый экземпляр броузера (для этого в соответствующем тэге AREA нам потребуется атрибут target=_blank). Вот как выглядит описание изображения-карты:

<center><img src="hotstou3.gif" width="200" height="150" usemap="#mymap"></center> <map name="mymap">

<area shape="rect" coords="110,30,178,79" href="lesson1.htm" title="Урок 1">

<area shape="circle" coords="70,106,30" href="#totop" title="К началу этого урока">

<area shape="poly" coords="75,25,31,69,12,11" href="dolphin.jpg" title="Рисунок" target=_blank> </map>

Вот как будет выглядеть изображение-карта на экране браузера:

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

Задания:

1. Сделайте на странице меню, со ссылками на методические рекомендации и поисковые системы.

2. Сделайте внизу страницы ссылку, возвращающую пользователя в начало (вверх страницы).

3. Измените стандартные цвета, принятые для ссылок в своем документе (ответ на данныйвопрос найдите самостоятельно в учебниках!)

4. Создайте на своей странице графическую карту ссылок. Оформите отчет по проделанной работе, который должен содержать:

Формат записи рассмотренных на лабораторной работе тегов, их атрибуты и назначение. Для этого начертите и заполните таблицу, в которой в одном столбце указывается тэг, в другом описывается его назначение, а далее все возможные для него атрибуты.

Контрольные вопросы:

1. Рисунок в качестве фона. Какой тег для этого используется, какие атрибуты у него могут быть? Как зафиксировать фоновый рисунок под текстом, чтобы при прокручивании он не перемещался?

2. В какой форме можно задавать цвет в HTML?

3. Как изменить стандартные цвета для активной и посещенной ссылок?

4. Создание ссылок на другую часть текущей страницы (например, вверх страницы).

5. Чем отличаются клиентские и серверные графические карты ссылок?

6. Как создать графическую ссылку-миниатюру (то есть маленькое изображение является ссылкой, при нажатии на которую открывается тоже изображение, но в полный размер)?

7. Как задать ссылку на e-mail автора страницы.

 

 

 

Практическая работа №6

«Таблицы на WEB странице»

Цель работы: познакомиться с тэгами для создания таблиц, строк, ячеек, с их атрибутами, а также создавать простые и сложные таблицы, создавать макет страницы с помощью таблиц

Создание таблиц

Для создания таблиц используются теги table, tr и td.

<TABLE...>... </TABLE>

Эта тэговая пара определяет начало и конец таблицы. Все элементы между тэгами

<TABLE...>... </TABLE> являются частью таблицы. Все элементы таблицы вне этих тэгов игнорируются.

<TR...>... </TR>

Определяет одну строку в таблице.

<TD...>... </TD>

Определяет данные (table data) для ячейки в строке таблицы. Каждая пара <TD...>... </TD> соответствует одной ячейке в строке таблицы <TR...>... </TR>. Каждая строка в таблице необязательно должна иметь одно и то же число пар <TD...>... </TD>.

Между тэгами <TD...>... </TD> могут находиться любые HTML-тэги тела документа.

<TH...>... </TH>

Определяет ячейку таблицы как ячейку заголовка - ячейку, которая находится вверху столбца. Текст в таких ячейках по умолчанию отображается жирным шрифтом и центрируется. Атрибуты для элемента <TH...>... </TH> такие же как для элемента <TD...>... </TD>. Рассмотрим пример:

<table> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> </tr> </table>

Обратите внимание, что по умолчанию таблица отображается без границ, если они явно незаданы!

Таблица может иметь и другой вид:

 

 

С помощью различных атрибутов можно задать толщину границ ячеек, цвет, фон ячеек и т.д.Комбинируя значения цветов фона и границы для таблицы и ячеек, можно добиваться различных оформительских эффектов:

 

<table border=2 bordercolor=red bgcolor=green>

<tr> <td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr> <td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr>

</table>

Запишите в отчет теги и атрибуты для создания таблицы. Добавьте на созданную ранее своюстраницу, табличку (например, с вашим расписанием занятий или любую другую). 2. Объединение ячеек в таблице

Атрибуты тега ячейки td позволяют объединять ячейки по горизонтали (colspan) и вертикали (rowspan):

Обратите внимание: из элемента tr, описывающего вторую строку таблицы, удален элемент, создававший ячейку «2-1», т.к. его место теперь занято первой ячейкой из первой строки. Та же ситуация наблюдалась бы, если бы ячейка «1-2» стала занимать место двух ячеек (ячейку «1-3» удалили бы).

 

<table> <tr> <td rowspan="2">1-1 +<br> 2-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-2</td> <td>2-3</td> </tr> </table>

 

Табличная верстка страницы

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

С использованием таблиц можно сверстать, например следующую страницу: