Клиентские карты

Серверные карты

Активные изображения

Активное изображение — это изображение с так называемыми активными областями, которые ссылаются на URL других страниц или узлов.

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

Два метода формирования активных изображений: на сервере и у клиента.

HTML-документ должен быть размещен на web-сервере.

Web- сервер должен поддерживать CGI-сценарии (Common Gateway Interface, Общий интерфейс шлюза), которые выполняют обработку запросов, поступающих от браузера при работе с картой-изображением.

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

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

Для обеспечения функционирования карты-изображения необходимо указать, что данное изображение является опорным для карты.

Это выполняется заданием атрибута ISMAP в тэге <IMG>.

Кроме того, карту-изображение необходимо сделать ссылкой на Web-странице.

<А HREF=MyImage.map> <IMG SRC=MyImage.gif ISMAP> </A>

Ссылка в этом примере представляет собой не адрес другого HTML-документа, а файл конфигурации карты-изображения, который содержит координаты для каждой активной области изображения с именем Myimage.gif.

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

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

Допустимо сохранять конфигурацию карты в отдельном файле и давать на него ссылку.

Для указания того, что встроенное изображение является опорным для карты, используется атрибут USEMAP тега <IMG>. Значением атрибута USEMAP является ссылка на описание конфигурации карты.
<IMG SRC=logo.gif USEMAP=#logo>

Для описания конфигурации областей карты-изображения используются теги <МАР> и <AREA>

Клиентские карты. Тег <MAP>

Тег <MAP> служит контейнером для элементов <AREA>, которые определяют активные области для карт-изображений.

Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы.

Атрибуты:

· NAME - Имя карты-изображения, которое однозначно ее определяет. Значение атрибута name тега <MAP> должно соответствовать имени в usemap.

При этом аргумент атрибута usemap тега <IMG> начинается с символа решетки.

<img src="map.gif" usemap="#map" border="0">

<map name="map"> … </map>

Клиентские карты. Тег <AREA>

Каждый элемент <AREA> определяет активные области изображения, которые являются ссылками.

Тег <AREA> задает форму области, ее координаты, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ.

Этот тег всегда располагается в контейнере <MAP>, который связывает координаты областей с изображением.

Атрибуты:

· ALT - Альтернативный текст для области изображения.

· HREF - Задает адрес документа, на который следует перейти.

· NOHREF - Область без ссылки на другой документ.

· TARGET - Имя окна или фрейма, куда браузер будет загружать документ.

· SHAPE - Форма области.

· COORDS - Координаты активной области.

· ALT - Альтернативный текст для области изображения.

· HREF - Задает адрес документа, на который следует перейти.

· NOHREF - Область без ссылки на другой документ.

· TARGET - Имя окна или фрейма, куда браузер будет загружать документ.

· SHAPE - Форма области. Возможные значения: rect | circle | poly | default

· COORD S - Координаты активной области.

o rect координаты верхнего левого и правого нижнего углов прямоугольника

o circle координаты центра круга и радиус

o poly координаты вершин многоугольника в нужном порядке

<center>
<img src="karta.jpg" usemap="#panel" width="300" height="100" border="0" alt="Панель управления" title="Панель управления">
</center>
<map name="panel">
<area href="primer1.html" shape="rect" coords="15,15,82,82" alt="Зелёная кнопка" title="Зелёная кнопка">
<area href="primer2.html" shape="poly" coords="148,15,185,82,110,82" alt="Жёлтая кнопка" title="Жёлтая кнопка">
<area href="primer3.html" shape="circle"coords="250,50,33" alt="Красная кнопка" title="Красная кнопка">
</map>

Таблицы в HTML

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

· Элемент создания таблицы TABLE

· Элементы создания ячеек (строк и столбцов) внутри таблицы TR, TD и TH

· Заголовок таблицы CAPTION

· Элементы структурирования таблицы:

o группирования строк THEAD, TBODY и TFOOT

o группирования столбцов COLGROUP и COL

Тег <TR> (3)

TR (Table Row) – создает новую строку ячеек таблицы. Размещается внутри контейнера TABLE. Является контейнером для тегов TH и TD. Закрывающий тег не обязателен.

Атрибуты:

· ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда.
align = left | right |center | justify.

· VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда.
valign= middle | top | bottom | baseline

· BGCOLOR - определяет цвет фона для всех ячеек данного ряда.
bgcolor = цвет | #RRGGBB

Тег <CAPTION> (2)

CAPTION – задает заголовок таблицы. Размещается внутри контейнера TABLE. Является контейнером. Закрывающий тег обязателен. Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо.

Атрибуты:

· ALIGN - определяет способ вертикального выравнивания заголовка таблицы.
align = top | bottom

Тег <TABLE> (1)

Элемент для создания таблицы. Обязательно должен иметь начальный и конечный теги.

По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации.

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

Атрибуты тега TABLE:

· ALIGN – определяет способ горизонтального выравнивания таблицы.
align = left | right |center

· VALIGN – должен определять способ вертикального выравнивания таблицы.

valign = top | bottom | middle Нет в спецификации.

· WIDTH – определяет ширину таблицы. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.
width = n | %

· HEIGHT – определяет высоту таблицы. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.
height = n | %

· BORDER – определяет ширину внешней рамки таблицы (в пикселях).
border = n
Рамка обычно рисуется как трехмерная темно-серым цветом.
При BORDER="0" или при отсутствии этого атрибута рамка отображаться не будет.

· BORDERCOLOR – определяет цвет рамки таблицы.
bordercolor = цвет | #NNNNNN
Добавление параметра bordercolor создают однотонную плоскую рамку.

· FRAME – определяет способ отображения границы вокруг таблицы.

o void не отрисовывать границы.

o border граница вокруг таблицы.

o above граница по верхнему краю таблицы.

o below граница снизу таблицы.

o hsides только горизонтальные границы (сверху и снизу таблицы).

o vsides только вертикальные границы (слева и справа от таблицы).

o rhs граница только на правой стороне таблицы.

o lhs граница только на левой стороне таблицы.

· RULES – определяет границы между ячейками.

o all граница вокруг каждой ячейки таблицы.

o groups граница между группами, которые образуются тегами <THEAD>, <TFOOT>, <TBODY>, <COLGROUP> или <COL>.

o cols граница между колонками.

o none все границы скрываются.

o rows граница между строками таблицы.

· CELLPADDING – определяет расстояние между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
cellpadding = n

· CELLSPACING – определяет расстояние между границами соседних ячеек.
cellspacing = n

· BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатеричной системе.
bgcolor = цвет | #RRGGBB

· BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
background = URL

Теги <TD> и <TH>

TD (Table Data) – создает ячейку с данными в текущей строке.

TH (Table Head) – также создает ячейку, но определяет ее как ячейку-заголовок.

Содержимое ячейки-заголовка и ячеек с данными оформляется разными шрифтами.

Размещается внутри контейнера TR.

Является контейнером. Закрывающий тег не обязателен.

Атрибуты:

· ALIGN - определяет способ горизонтального выравнивания содержимого ячейки.
align = left | right |center | justify.
По умолчанию способ выравнивания определяется значением атрибута ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование.

· VALIGN - определяет способ вертикального выравнивания содержимого ячейки.
valign= middle | top | bottom | baseline.
По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого атрибута не было задано ранее в элементе TR.

· WIDTH - определяет ширину ячейки.
Ширина задается в пикселях или в процентном отношении к ширине таблицы.
width = n | %

· HEIGHT - определяет высоту ячейки.
Высота задается в пикселях или в процентном отношении к высоте таблицы.
height = n | %

· BGCOLOR - определяет цвет фона ячейки.
bgcolor = цвет | #RRGGBB

· BACKGROUND - фоновым рисунком ячейки.
background = URL

· COLSPAN - определяет количество ячеек, которые должны быть объединены по горизонтали. По умолчанию имеет значение 1.

· ROWSPAN - определяет количество ячеек, которые должны быть объединены по вертикали. По умолчанию имеет значение 1.

Пример таблицы

<table border="1">

<caption> Заголовок таблицы </caption>

<tr>

<th>&nbsp;</th> <th> R1C2 </th>

<th> R1C3 </th> <th> R1C4 </th>

</tr>

<tr>

<th>R2C1</th> <td>R2C2</td>

<td>R2C3</td> <td>R2C4</td>

</tr>

<tr>

<th>R3C1</th> <td>R3C2</td>

<td>R3C3</td> <td>R3C4</td>

</tr>

</table>

Тег <THEAD>, Тег <TFOOT>, Тег <TBODY>

THEAD (Table HEAD) - предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Является контейнером. Допустимо использовать не более одного элемента <THEAD> в пределах одной таблицы, и он должен идти в исходном коде сразу после тега <TABLE>.

TFOOT(Table FOOT) - предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Является контейнером. В пределах таблицы разрешается использовать только один элемент <TFOOT>. Хотя тег <TFOOT> в исходном коде должен быть определен до тега <TBODY>, браузеры отображают его в самом низу таблицы.

TBODY(Table BODY) - предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты. Является контейнером. Допускается применять несколько тегов <TBODY> внутри контейнера <TABLE>.

Атрибуты те же, что и для тега TR:

· ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда.
align = left | right |center | justify.

· VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда.
valign= middle | top | bottom | baseline

· BGCOLOR - определяет цвет фона для всех ячеек данного ряда.
bgcolor = цвет | #RRGGBB

Тег <COL>

COL – определяет и управляет отображением столбца в группе столбцов. Не является контейнером.

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

Атрибуты:

· ALIGN - определяет способ горизонтального выравнивания содержимого ячейки.
align = left | right |center | justify.

· VALIGN - определяет способ вертикального выравнивания содержимого ячейки.
valign= middle | top | bottom | baseline.

· WIDTH - определяет ширину ячейки.
Ширина задается в пикселях или в процентном отношении к ширине таблицы.
width = n | %

· SPAN - Определяет количество колонок, к которым следует применять параметры.
span = n

Тег <COLGROUP>

COLGROUP - обозначает группу столбцов таблицы и предназначен для задания атрибутов одной или нескольких столбцов таблицы.

Разница между тегами <COLGROUP> и < COL> не очень велика и состоит в следующем:

1. COLGROUP позволяет объединять колонки в определенные группы, т.е. может использоваться как контейнер для тегов COL
2. При добавлении параметра rules="groups" к тегу <TABLE> браузер будет рисовать линию только между колонками, созданными с помощью <COLGROUP>.

В остальных случаях поведение колонок назначенных через элементы <COLGROUP> и <COL> идентично.

Области применения таблиц в HTML

· В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство вёрстки страницы

Логотип	Меню 2
Меню 1	Основной текст
Баннеры

· Соединение графики

Суть этого приёма довольно проста. Если на вашей странице есть большие картинки, то их можно разрезать. Резать можно в любом графическом редакторе.

Самое главное в этой технологии правильно подогнать размеры ячеек к размерам кусочков рисунка.

· Графическое представление таблиц.

• Создание декоративной рамки

• Добавление тени

и др.

Дата добавления: 2014-01-06