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

height устанавливает высоту таблицы.

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

bgcolor устанавливает цвет фона таблицы.

border указывает на толщину рамки и пикселах. Если border=0, таблица становится "невидимой".

bordercolor устанавливает цвет рамки таблицы.

bordercolordark, bordercolorlight - используются для задания объемной границы таблицы. Такой эффект достигается за счет разных цветов верхней и нижней линий, образующих рамку. Атрибут bordercolordark определяет цвет затененной части рамки, bordercolorlight задает цвет освещенной рамки.

cellpadding определяет расстояние в пикселах между границей ячейки и её содержимым.

cellspacing задает расстояние между внешними границами ячеек в пикселах.

cols указывает количество столбцов в таблице.

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

border (или box) - устанавливает все линии внешней рамки;

void - внешняя рамка не отображается;

above (или below) - выводит только верхнюю (или нижнюю) границу таблицы;

hsides - выводит только верхнюю и нижнюю линии рамки;

vsides - выводит только левую и правую линию рамки;

lhs - устанавливает только левую линию рамки;

rhs - устанавливает только правую линию рамки.

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

none - все внутренние линии не отображаются;

groups - отображает горизонтальные границы между группами строк и столбцов;

rows - определяет отображение только горизонтальных линий между строками;

cols - устанавливает отображение только вертикальных линий между столбцами;

all - все внутренние рамки отображаются.

5.2 Параметры заголовка, строк и ячеек таблицы. Параметры заголовка определяются следующими значениями атрибутов тега <CAPTION>:

align - определяет выравнивание названия относительно границ таблицы и может принимать значения: left (выравнивание по левой границе, название располагается над таблицей), right (выравнивание по правой границе, название располагается над таблицей), center или top (выравнивание по центру, название располагается над таблицей), bottom (выравнивание по центру, название располагается под таблицей).

valign - используется для выравнивания названия при размещении его над или под таблицей. Атрибут align не выполняет выравнивания названия вправо или влево при значениях top и bottom. Для такого выравнивания нужно применять оба атрибута valign и align: атрибут valign будет задавать расположение названия над или под таблицей, а атрибут align - определять его выравнивание по левой или правой границе таблицы.

Параметры строк таблицы задаются значениями атрибутов тега <TR>, а параметры ячеек - значениями атрибутов тегов <TD>, <TH>:

align - задает выравнивание содержимого ячейки по горизонтали и определяется значениями left, right, center.

valign - задает выравнивание содержимого ячейки по вертикали и определяется значениями top (по верхнему краю), bottom (по нижнему краю), middle (посредине), baseline (по базовой линии).

width задает ширину ячейки.

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

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

bgcolor устанавливает цвет фона ячейки таблицы.

bordercolor устанавливает цвет рамки ячеек таблицы.

bordercolordark, bordercolorlight - используются для задания объемной границы ячеек таблицы. Атрибут bordercolordark определяет цвет затененной части рамки, bordercolorlight задает цвет освещенной рамки.

colspan - устанавливает число ячеек, которые должны быть объединены в одну по горизонтали.

rowspan - устанавливает число ячеек, которые должны быть объединены в одну по вертикали.

nowrap - запрет переноса слов внутри ячейки. Текст отображается одной сплошной строкой.

5.3 Группирование строк и столбцов таблицы
Для удобства форматирования содержимого таблицы её удобно разбить на заголовочную, основную и нижнюю части. Группирование позволяет присваивать каждой группе элементов общие свойства (выравнивание, гарнитуру, размер шрифта и т.д.).

Группирование строк задается с помощью трёх тегов:

<THEAD>

Заголовочная часть таблицы

</THEAD>

<TBODY>

Основная часть таблицы

</TBODY>

<TFOOT>

Нижняя часть таблицы

</TFOOT>

В таблице может быть только один элемент TBODY и FOOT, но несколько элементов TBODY. Допустимыми атрибутами этих тегов являются:

align и valign - для горизонтального и вертикального выравнивания;

title - для формирования всплывающей подсказки;

lang и dir - для задания языка и направления чтения документа.

Для группирования элементов столбцов используется тег COLGROUP. Формат записи тега:

<COLGROUP span=значение

width=”значение”

align=”значение”

valign=”значение”>

Строки, для которых сгруппированы столбцы

</COLGROUP>

Значения атрибутов:

span -задает количество столбцов в группе;

width - задает ширину каждого столбца группы, её значение может задаваться в пикселах;

align и valign - для горизонтального и вертикального выравнивания.

5.4 Наследование свойств выравнивания
По отношению к элементу TABLE дочерними являются: TH, TD, THEAD, TFOOD, COL, COLGROUP. В каждом из них можно задать параметры выравнивания. Наследование свойств горизонтального выравнивания align наследуется с учетом приоритета (от высшего к низшему):

наиболее высоким приоритетом обладают атрибуты, установленные внутри символьных данных ячейки;

атрибуты тегов <TH> и <TD>;

атрибуты тегов группирования столбцов (COL, COLGROUP);

атрибуты элементов строки или групп строк (элементы TR, THEAD, TFOOT);

атрибуты тега <TABLE>;

атрибуты, установленные по умолчанию.

Свойства вертикального выравнивания (значения атрибута valign) для содержимого ячеек наследуется в том же порядке, что и свойства горизонтального выравнивания. Отличие состоит лишь в том, что значения этого атрибута в элементах стрик или групп строк (элементы TR, THEAD, TFOOT) имеют более высокий приоритет, чем значения в элементах группирования столбцов (элементы COL, COLGROUP).

Примеры задания таблиц

1. Простые таблицы

Самые знаменитые алмазы

</CAPTION>

<TH>Название</TH>

<TH>Страна</TH>

<TH>Масса в каратах</TH>

</TR>

<TR>

<TD>Куллинан</TD>

<TD>Южная Африка</TD>

</TR>

<TR>

<TD>Эксцельсиор</TD>

<TD>Южная Африка</TD>

</TR>

<TR>

<TD>Звезда Сьерра-Леоне</TD>

<TD>Западная Африка</TD>

</TR>

</TABLE>

2. Объединение строк и столбцов таблицы.

Магазин предлагает учебники

</CAPTION>

<TH>Предмет</TH>

<TH>Раздел</TH>

<TH>Классы</TH>

</TR>

<TR>

<TD rowspan=4>Математика</TD>

<TD>Арифметика</TD>

</TR>

<TR>

<TD>Алгебра</TD>

</TR>

<TR>

<TD>Геометрия</TD>

</TR>

<TR>

<TD colspan=2>Количество наименований: 1090</TD>

</TR>

<TR>

<TD rowspan=3>Физика</TD>

<TD>Механика</TD>

</TR>

<TR>

<TD>Оптика</TD>

</TR>

<TR>

<TD colspan=2>Количество наименований: 457</TD>

</TR>

</TABLE>

3. Вложенные таблицы. Команды, управляющие созданием и отображением таблиц, допускают вложение одного тега <TABLE> внутрь другого. Эта особенность языка используется для представления "вложенных" таблиц.

Магазин предлагает учебники

</CAPTION>

<TH>Предмет</TH>

<TH>Раздел</TH>

<TH>Классы</TH>

</TR>

<TR>

<TD> Математика</TD>

<TR>

<TD>Арифметика</TD>

</TR>

<TR>

<TD>Алгебра</TD>

</TR>

<TR>

<TD>Геометрия</TD>

</TR>

<TR>

Количество наименований: 1090

</TD>

</TR>

</TABLE>

<TR>

<TD>Физика</TD>

<TR>

<TD>Механика</TD>

</TR>

<TR>

<TD>Оптика</TD>

</TR>

<TR>

Количество наименований: 457

</TD>

</TR>

</TABLE>

</TR>

</TABLE>

6. Гиперссылки
Ссылка представляет собой логическую связь одного фрагмента (элемента) документа с другим фрагментом в том же самом или в другом документе. Ссылка характеризуется двумя точками, называемыми закладками. Различают начальную и конечную закладки.

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

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

В HTML различают внутренние и внешние гиперссылки. Внутренние ссылки осуществляют переход в пределах одного и того же документа. Внешние ссылки обеспечивают переходы к другим документам. Внешние ссылки и называют гиперссылками.

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

6.1 Ссылки на документы
Для реализации простой гиперссылки на другую web-страницу можно использовать в html-документе тег <А>. Формат записи тега:

<А href="URL"

target=”параметр”

title=”альтернативный текст">

Текст гиперссылки

</А>

Атрибут href указывает на адрес страницы, с которой нужно установить гиперсвязь. Этот адрес может быть представлен как в виде полного URL (например, "http: // www. server. ru/page. htin1"), так и в виде сокращенного URL с указанием пути к искомой странице в пределах локального сервера (например, "/folder/page. html"). Если искомый документ расположен в одной директории с текущим, в качестве параметра атрибута href достаточно записать его название.

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

Значения атрибута target:

_self отображает открываемый по ссылке документ HTML в текущем окне броузера;

_blank отображает открываемый документ в новом окне;

_parent загружает страницу во фрейм-родитель, если фреймов нет - в текущее окно;

_top отменяет все фреймы и загружает страницу в полном окне, если фреймов нет - в текущем окне.

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

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

Первый заключается в подготовке так называемой "закладки" - специальной метки с уникальным в пределах данного документа именем, присваиваемым "закладке" посредством атрибута name. Для этого в том участке текста, где необходимо разместить метку, применяется следующая команда:

<А nаme="имя_закладки">

Ключевое слово или заголовок раздела

</А>

Второй этап - создание самой ссылки при помощи команды:

<А hrеf="#имя_закладки">Текст ссылки</А>

Для задания имени "закладки" лучше использовать латинские символы. При вызове раздела посредством гиперссылки имя "закладки" предваряется символом "#".

Если нужно разместить ссылку на раздел какого-либо другого документа, описанный выше алгоритм в целом сохраняется, за исключением того, что в вызывающем теге перед именем "закладки" указывается URL документа. В этом случае рекомендуется также использовать атрибут target с параметром _blank. Подобная команда в обобщенном виде будет выглядеть следующим образом:

<А href=document. htm#имя_закладки

target="_blank">

Текст ссылки

</А>

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

<А href=”mailto: user-l@server. ru? cc=user-2@server. ru,user-3@server. ru&subject=Тема_письма”>

Текст ссылки

</А>

Директива mailto: указывает на основной адрес электронной почты, куда следует отправлять письмо. В минимальной записи атрибута href при реализации гиперссылки на адрес электронной почты можно указать только эту директиву и какой-либо адрес e-mail.

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

C помощью функции &subject можно задать тему отсылаемого сообщения. Пример:

<А href=”mailto: ivanov@gsu. unibel. by&subject=Привет”>

Жду писем!

</А>

6.4 Ссылки на файловые объекты
Гиперссылка на файловый объект подразумевает организацию гиперсвязи документа HTML с каким-либо файлом, хранящимся на сервере, например архивом. При нажатии мышью на такой гиперссылке автоматически открывается сессия загрузки данного файла с удаленного сайта на локальный пользовательский компьютер. Формат ссылки:

<А href="http: // www. myserver. com/files/archive. zip">

Teкст гиперссылки

</А>

Иногда для реализации гиперсвязи с файловым объектом в записи URL этого объекта используется префикс "file: // ", однако такой подход применяется в основном для организации ссылок на файловый объект, расположенный на локальном компьютере. Если загрузку файла планируется осуществлять по протоколу FTP, используйте префикс "ftp: // ". Если искомый файл расположен в той же директории, что и вызывающий его документ, в качестве значения атрибута href можно просто указать его имя.

7. Графика в web-дизайне
Графические компоненты web-страниц по назначению можно условно разделить на три категории: иллюстративная графика, включая дополняющие текст фотографии, пояснительные рисунки, чертежи и схемы, функциональная графика, представляющая собой элементы управления сайтом (кнопки навигации, счетчики и элементы интерактивных форм) и, декоративная графика - элементы дизайна страницы, включенные в нее "для красоты" и не несущие информационной нагрузки (фоновые рисунки, линии-разделители, выполненные в виде графических файлов заголовки и т.д.).

7.1 Сетевые графические форматы
Наиболее популярными форматами графических изображений являются GIF и JPEG. В этих форматах хранится 90% всей графики, представленной Интернете. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря использованию которых удается значительно уменьшить размер целевого файла.

Стандарт GIF (Graphic Interchange Format, формат обмена графическими данными) создан в 1987 году. Он позволяет значительно сокращать объем итогового графического файла по сравнению с исходным изображением за счет смешения сходных оттенков в один. Если, например, в составе рисунка имеется участок, состоящий из нескольких сходных полутонов, к примеру, голубого, светло-голубого и темно-голубого цвета, они будут кодированы одним оттенком - голубым. Информация об изображении в файле стандарта GIF записывается построчно, то есть представляет собой массив описаний строк высотой в один пиксел. Данный формат оперирует фиксированной, так называемой индексированной палитрой, число цветов в которой не превышает 256. Поэтому стандарт GIF используется в документах HTML только для отображения так называемой бизнес-графики: диаграмм, логотипов, кнопок, разделительных линий, других элементов оформления страницы (т.е. для рисованных изображений). Для размещения на web-сайте фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG.

Одном из свойств стандарта GIF является его особенность, названная разработчиками "interlace", или, "черезстрочность". Она позволяет загружать картинку с сервера в клиентский браузер не целиком, а частями следующим образом: сначала на экране отображаются первая, пятая и десятая строки, составляющие изображение, затем - вторая, шестая и одиннадцатая и т.д. Таким образом, для пользователя создается иллюзия постепенной загрузки графического элемента: картинка как бы медленно "проявляется" на странице.

В 1989 году компания CompuServe выпустила новую версию этого графического формата, получившую название GIF89a. Данная модификация включает в себя еще две особенности. Первая называется "transparancy" и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в браузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно "подогнать" части изображений друг к другу не представляется возможным. Убрать ненужный фон из файла GIF можно встроенной процедурой графического редактора Adobe Photoshop.

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

JPEG (Joint Photographic Experts Group, объединенная группа экспертов в области фотографии) - графический стандарт, созданный на основе одноименного алгоритма сжатия, изображений с потерей качества, кодирующего не идентичные элементы, а межпиксельные интервалы.

Механизм сжатия изображения в файл формата JPEG. Первой ступенью компрессии является преобразование изображения в цветовой образ LAB, раскладывающий картинку на три независимых канала, один из которых (Lightness) выделен для сохранения значений интенсивности цветов, а два других (А и В) - для запоминания непосредственно цветовой информации. Причем данные о цветах сохраняются в виде шкалы, организованной но принципу непрерывного спектра. Вторя ступень - собственно компрессия; из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки размером 8х8 точек, и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация - менее заметные оттенки. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хаффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двухбитной кодировкой. Декомпрессия файла JPEG происходит в обратном порядке.

JPEG оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветовых переходов. Максимальное число цветов, которое может содержать изображение в формате JPEG, достигает 16 миллионов.

Существует несколько разновидностей стандарта JPEG. Формат JPEG Baseline Optimized основан на более совершенном алгоритме компрессии изображений. Недостатком данной реализации JPEG является то, что она не распознается целым рядом часто используемых приложений. Progressive JPEG был оптимизирован специально для представления графики во Всемирной сети, изображения в этом формате сжимаются чуть лучше, чем в стандартном JPEG, но хуже, чем в JPEG Baseline Optimized. Отличительная особенность Progressive JPEG - возможность сохранять графику в чересстрочном режиме, как это реализовано в стандарте GIF.

PNG (Portable Network Graphics, портативная сетевая графика), пользователи придумали этой аббревиатуре иную расшифровку: Picture is Not GIF. PNG поддерживает interlacing (черезстрочность) не только по горизонтали, но и по вертикали. Палитра PNG позволяет создавать изображения с глубиной цвета до 48 бит, а также поддерживает альфа-канал, но состоит он не из одного уровня, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности от 0 до 99%. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью, например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был. Изображения PNG содержат так называемый блок описания гамма-коррекции. Под переменной "гамма" в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этот формат поддерживают броузеры Microsoft Internet Explorer, начиная с версии 4.0, и Netscape Communicator версий 4.04 и выше.

Оптимизация графических изображений. При сохранении изображений GIF и JPEG на диск в файлы записывается определенное количество "лишних" данных, таких, например, как невидимые текстовые комментарии, ссылки на разработчиков стандарта и соответствующего программного обеспечения и т.д. Все эти дополнения увеличивают физический размер файла и не несут никакой полезной нагрузки. Чтобы сократить время загрузки иллюстраций в клиентский броузер, используют специальные методы оптимизации изображений с использованием специальных программ - оптимизаторов графики.

7.2 Включение графики в web-страницу
Включение графики в html-документ осуществляется с использованием команды <IMG>, синтаксис которой в общем виде записывается следующим образом:

<IMG src=”URL”

аlign=”значение”

border=”значение”

width=”значение”

height=”значение”

alt=”текст”

hspace=”значение”

vspace=”значение”

ismap>

В качестве параметра атрибута src указывается путь к изображению в виде либо полного URL (например, http: // www. mys1te. ru/images/picture. jpg), либо сокращенного URL с указанием пути к изображению на локальном сервере (например,. . /Images/picture. jpg).

С помощью атрибута align картинка позиционируется в документе HTML. Этот атрибут может принимать значения:

right - изображение выравнивается по правому краю,

left - изображение выравнивается по левому краю,

center - изображение выравнивается по центру,

texttop или top - изображение совмещается верхним краем с верхней границей ячейки таблицы или с верхней границей текстовой строки, в которой размещена картинка,

absbottom или bottom - изображение совмещается нижним краем с нижней границей ячейки таблицы или текстовой строки,

absmiddle или middle - центр изображения выравнивается по основной строке, либо оно размещается в середине табличной ячейки,

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

Атрибут border управляет толщиной синей рамки, в которую заключается изображение, включенное в тег <А>, при превращении его в гиперссылку. В большинстве случаев эта рамка портит дизайн web-страницы, и чтобы избавиться от нее, достаточно установить значение border равным нулю.

В качестве параметров атрибутов width и height указывают ширину и высоту интегрируемого в документ HTML графического изображения в пикселах.

Атрибут alt содержит альтернативный текст, который отображается вместо картинки в браузерах, не поддерживающих графику, а также в случае, если поддержка графики отключена пользователем. Этот же текст выводится в виде всплывающей "подсказки", если пользователь задержит на изображении курсор мыши.

Атрибуты hspace и vspace задают горизонтальные и вертикальные отступы от изображения в пикселах, которые необходимы, например, в случае, когда картинка помещается на web-странице рядом с текстом. hspace определяет величину незаполненного пространства справа и слева от картинки, vspace соответственно сверху и снизу.

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

Пример применения тега <IMG>:

<IMG src=”/images/sunset. ipg”

align=”CENTER”

width=”325”

height=”215”

аlt=”Красивый закат на берегу Карибского моря”>

7.3 Изображения ссылки
Для того чтобы превратить интегрированное в html-документ изображение в гиперссылку, необходимо воспользоваться комбинацией тегов <А> и <IMG>, записав ее следующим образом:

<А href=”URL документа, на который организуется ссылка”>

<IMG src=”URL изображения”

align=”значение”

width=”значение”

hеight=”значение”

alt=”альтернативный текст”

bоrder=”значение”>

</А>

Пример кода HTML, позволяющего использовать изображение в качестве гиперссылки:

<А href=”/hobbie/index. htm1”>

<IMG src=”/mages/hobbie. jpg”

align=”BASELINE”

width=”315”

height=”226”

alt=”Тематический раздел 'Мои увлечения'”

border=”0”>

</A>

7.4 Карты ссылок
Карта ссылок (image map) представляет собой графическое изображение, разбитое на фрагменты, причем каждый фрагмент является одновременно гиперссылкой. Для задания карты ссылок необходимо:

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

2. Разбить изображение на отдельные фрагменты и составить их описание.

3. Описать каждый фрагмент.

Графические карты создаются с помощью тега <МАР>. Элементы <МАР> динамически связаны с изображениями, вызываемыми директивой <IMG>, и в общем виде описываются следующим образом:

<МАР name=”имя карты”>

<AREA href=”URL”

shаре=”параметр”

coords=”x1, y1, x2, y2”

аlt=”альтернативный текст”

target=”параметр”

nohref>

</МАР>

Атрибут name тега <МАР> определяет уникальное имя карты, записываемое латинскими символами. При задании имени карты необходимо соблюдать регистр.

Тег <AREA> определяет непосредственно активную область изображения. Атрибут href указывает на адрес документа, вызываемого при нажатии кнопки мыши над данным участком изображения.

Атрибут alt определяет всплывающую подсказку при наведении курсора мыши на данный элемент.

Атрибут shape управляет формой активной области и может принимать одно из трех значений: rect - прямоугольник, circle - круг или poly - многоугольник.

Атрибут coords позволяет определить относительные координаты вершин активной области. Возможные значения данного атрибута:

Значение shape	Синтаксис записи coords	Значения параметров coords
shape=rect	coords=”xl,yl,x2,y2”	x1 и yl - координаты левого верхнего угла фигуры, x2 и y2 - правого нижнего
shape=circle	coords="x,y,r"	х и y - координаты центра окружности, r - ее радиус в пикселах
shape=poly	coords="x1,y1,x2,y2, x3,y3,... xn,yn,x1,y1"	x1, y1... xn, yn - координаты вершин многоугольника

Значения координат активной области отсчитываются в пикселах по длине и ширине картинки от левого верхнего угла изображения, принимаемого за точку с координатами 0,0. То есть, значение х возрастает справа налево, а значение у - сверху вниз. Координаты х и у могут быть также заданы в процентах от реального размера изображения, например: shape="rect" coords= "0,0,50%,50%". Если несколько активных областей одного изображения перекрывают друг друга, область, описанная тегом <AREA> первой, имеет приоритет.

Значения атрибута target такие же, как и у тега <A>.

Необязательный атрибут nohref определяет неактивные участки карты и исключает переходы при щелчке мышью по данному фрагменту.

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

HTML	CSS
DHTML	JavaScript

<IMG src=”map1. gif”

usemap=”#refer”>

<AREA shape=”rect”

coords=”0,0,169,29”

href=”html. html”>

<AREA shape=”rect”

coords=”170,0,339,29”

href=”css. html”>

<AREA shape=”rect”

coords=”0,30,169,59”

href=”dhtml. html”>

<AREA shape=”rect”

coords=”170,30,339,59”

href=”javascript. html”>

</MAP>

Пример 2. Пусть изображение состоит из многоугольников, а его полный размер составляет 370x120 пикселов. Координаты вершин многоугольников задаются последовательно, причем первая и последняя координаты должны совпадать, чтобы многоугольник был замкнутым.

<IMG src=”map2. gif”

usemap=”#polygons”>

<AREA shape=”poly”

coords=”0,0,184,0,0,59,0,0”

href=”html. html”>

<AREA shape=”poly”

coords=”185,0,369,0,369,60,184,0”

href=”css. html”>

<AREA shape=”poly”

coords=”185,119,369,59,369,119,185,119”

href=”javascript. html”>

<AREA shape=”poly”

coords=”0,59,185,119,0,119,0,59”

href=”dhtml. html”>

<AREA shape=”poly”

coords=”185,0,369,59,185,119,0,59,185,0”

href=”web. html”>

</MAP>

Карты ссылок можно создавать и другим способом. Изображение можно рассечь на отдельные фрагменты и "склеить" его по принципу мозаики в невидимой таблице с назначением отдельным фрагментам картинки свойств гиперссылки при помощи директивы <А>. Данный прием применяется не только при создании элементов, подобных image map, но и при подготовке рисованых заголовков или полей для размещения рекламного баннера. Однако аккуратно "разрезать" изображение при помощи традиционных графических редакторов, причем так, чтобы готовая "мозаика" правильно вписывалась в таблицу, весьма трудно. Для решения этой задачи web-мастеру помогают специальные утилиты - фрагментаторы графики.

8. Мультимедиа на web-странице
8.1 Озвучивание Web-страницы
Существует два способа обращения к мультимедиа-файлам: с помощью элемента привязки <А>, либо с применением специальных тегов.

Элемент привязки <А>. Этот элемент предназначен для задания ссылки на другой файл (в том числе и мультимедийный). Например,

<А href="http: // TravelDev. com/video/MiddleSeaAcuba. avi">

Текст гиперссылки

</А>

После щелчка по тексту гиперссылки отобразится содержимое видеоклипа.

Специальные элементы позволяют вставлять (внедрять) мультимедиа файл в содержимое Web-страницы. Мультимедийный файл загружается одновременно с содержимым всей страницы. Это элементы <IMG>, <APPLET>, <OBJECT>, <EMBED> и <BGSOUND>.

Форматы аудиофайлов. Звуковые эффекты создаются с применением звуковых (аудио) файлов. Форматы звуковых файлов различаются способами записи и областями применения. Наиболее распространены форматы:

AU (AUdio format, "звуковой формат", расширение. au) - стандартный формат для 8-битового звука, который является одним из старейших звуковых форматов в Internet (первоначально разработан для UNIX). Размер звуковых файлов AU относительно небольшой, однако качество звука невысокое.

WAV (Waveform Audio, "звук в форме волны", расширение. wav) - стандартный формат цифрового аудио в системе Windows.

MIDI (от Musical Instrument Digital Interface, "цифровой интерфейс музыкальных инструментов", имеет расширение. midi или. mid) - формат, который не связан с реальным звуком. Этот формат содержит просто запись нот, коды музыкальных инструментов и прочую информацию, по которой синтезируется музыка.

МРЗ (MPEG Audio Layer 3, расширение. mp3). Формат МРЗ применительно к звуку отличается высокой степенью сжатия данных за счет некоторого ухудшения качества звука, незаметного на слух.

RealAudio ("реальный звук", расширение. rа) - применяется для воспроизведения с повышенным качеством звучания. Файлы этого формата поддерживают поток звуковых данных, то есть они могут воспроизводиться по мере поступления данных, не ожидая окончания загрузки файла.

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

Звуковой фон (элемент BGSOUND). Подключение звукозаписи в фоновом режиме обычно применяется для приветствий или музыкального сопровождения. Как только пользователь загрузит страницу, начнется автоматическое воспроизведение фонового звука. Для подключения звукового файла в фоновом режиме применяется элемент <BGSOUND>. Формат тега:

<BGSOUND src=”URL”

loop=значение

volume=значение

balance=значение>

Атрибут src задает URL-адрес звукового файла.

Атрибут loop определяет, сколько раз будет воспроизводиться файл. Например, тег <BGSOUND src="music. mp3" loop=5> означает, что звуковой файл duet будет воспроизведен 5 раз. Если loop="infinite", звук будет повторяться до тех пор, пока пользователь находится на странице.

Атрибут volume назначает уровень воспроизведения звука и может принимать числовые значения от - 10000 до 0. Можно только "приглушить" звучание, а увеличить уровень воспроизведения звука выше максимального уровня (значение 0) нельзя.

Атрибут balance - настройка стереобаланса. Значения этого атрибута выбираются из диапазона чисел от - 10000 до 10000. Назначение любого крайнего значения (-10000 или 10000) приводит к звучанию только одного динамика. Введение тега

<BGSOUND src="duet. mid"

loop=infinite

volume=0

balance=0>

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

Внедрение аудио (элемент EMBED). Звуковое сопровождение в фоновом режиме лишает посетителя страницы возможности управления звуком. Управлять звуком можно, если на Web-страницу встроить аудиоплейер с помощью тега <EMBED>, который размещается в любом месте внутри элемента BODY. Формат тега:

<EMBED src=”URL”

width=”значение”

height=”значение”

autostart=”значение”

hidden=”значение”

title=”Всплывающая подсказка”>

Атрибут src задает URL звукового файла.

Атрибуты width и height устанавливают размеры панели управления проигрывателя (ширину и высоту); значения этих атрибутов указываются в пикселах или в процентах.

Атрибут autostart назначает возможные варианты включения воспроизведения звука. Данный атрибут принимает значения false (включение звука пользователем) и true (автоматическое начало воспроизведения сразу после загрузки страницы).

Атрибут hidden используется для управления отображением панели проигрывателя. Значение true этого атрибута задает воспроизведение звука без отображения панели проигрывателя, а значение false - вывод панели на экран.

Атрибут title служит для задания всплывающей подсказки.

8.2 Внедрение видео
Форматы видеофайлов:

MPEG (Moving Picture Expert Group - "группа экспертов по движущимся изображениям", расширение. mpg или. mpeg) - предназначен для сжатия как аудио-, так и видеофайлов. Этот формат обеспечивает высокое качество и является своего рода стандартом в цифровом видео. Однако файлы этого формата имеют большой размер, и работать с ними трудно.

Страницы: 1, 2, 3, 4