<< Пред. стр.

стр. 20
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

ссылок, вероятно, будет работать неправильно.
ГЛАВА 35. Создание карт ссылок 189

Итак, если вы хотите использовать круглые гиперобъекты вместо прямоугольных для
изображения mars.jpg, просто измените значение атрибута shape и обновите коор-
динаты:
<img s r c = " i m a g e s / m a r s . j p g " width="500" h e i g h t = " 3 0 0 " usemap="#mars">
<!— Начало определений гиперобъектов —>
<map name="mars">
<area shape="clrcle" coords="85,76,60" href="mars01.htm">
<area shape="circle" coords="245,76,70" href="marsO2.htm">
<area shape="circle" coords="410,76,70" href="marsO3.htm">
. <area shape="circle" coords="85,225,70" href="mars04.htm">
<area shape='"circle" coords = "245 ,225 ,70" href = "marsO5 .htm">
<area shape="circle" coords="410,225,70" href="marsO6.htm">
</map>
<!— Конец определений гиперобъектов —>



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



Табл. 35.1. Смысл значений атрибута coords

Число координат Смысл
Форма Пример
circle coords="10,12,20"
Всегда 3 Координата х центральной
точки,координата у цент-
ральной точки, радиус ок-
ружности в пикселах
coords="100,150,
poly По меньшей мере, Координата х точки фигуры,
200,100,50,150"
6 и всегда кратно 2 координата у точки фигуры
(повторяется столько раз,
coords="275,50,
сколько точек фигуры необ-
300,150,350,100,
ходимо для описания многоу-
400,150,450,50"
гольника)
Координата х левого верхне- c o o r d s = " 0 , 0 , 1 0 0 ,
rect Всегда 4
го угла, координата у левого 150"
верхнего угла, координата х
правого нижнего угла,
координата у правого ниж-
него угла
ГЛАВА 36.
Повышение доступности карт ссылок
Все знают, что для улучшения доступности изображения пишется подробное тексто-
вое описание. Средства специальных возможностей, например, читатели экрана, осо-
бым образом выбирают текст, и посетитель, имеющий проблемы со зрением, слышит
вербальное описание того, что изображено на картинке.
Однако карта ссылок является особым случаем, поскольку это не просто изображе-
ние. Карта ссылок объединяет изображение с гиперобластями, которые функцио-
нируют, как ссылки. Поэтому понятно, что для более доступной карты ссылок требу-
ется как общее текстовое описание, так и текстовые описания для каждой гипер-
области.
Используйте атрибут a l t тега img, чтобы задать текстовое описание для всего изоб-
ражения, точно так же, как вы сделали бы это для любого другого изображения
на сайте:
<img src="images/mars.jpg" width="500" height="300" usemap="#ma: ="
alt="An image map showing the d e c l i n e of surface water on the plan-
et Mars.">
Атрибут a l t тега area прекрасно подойдет для текстового описания гиперобластей:
<map name="mars"> /
<area shape="rect" coords="9,3,164,148" href="mars01.htu."
alt="Phase 1">
<area shape="rect" coords="172,2,328,149" href="marsO2.him"
•alt="Phase 2"> .
<area shape="rect" coords = "334 , 5 ,487 ,149" href = "marsO3 . t r "
hi.
alt="Phase 3">
<area shape="rect" coords = "9 ,151,163 ,294" href = "marsO4 . t r "
hr.
alt="Phase 4">
<area shape="rect" coords="171,153,327 , 296" hre?=
"marsO5.htm" alt="Phase 5">
<area shape="rect" coords="334,152,488,295" href=
"marsO6.htm" alt="Phase 6">
</map>
Наш любимый комитет стандартов, консорциум World Wide Web (W3C), советует
включать дублирующие текстовые ссылки для гиперобластей карты ссылок с тем, что-
бы текстовые браузеры или другие устройства, которые не отображают изображения,
могли без труда получить доступ к содержимому карты ссылок, как показано на рисун-
ке 36.1. В любом случае добавление небольшого количества текстовых инструкций
не повредит.
ГЛАВА 36. Повышение доступности карт ссылок 191


Совет
Всегда разделяйте ссылки в горизонтальном списке каким-нибудь
печатным символом, например, круглыми скобками, квадратными
скобками или символами окантовки (вертикальной чертой). Это по-
может вашим посетителям, бегло просматривающим страницы, от-
личить ссылки, а устройствам чтения экрана поможет определить,
где заканчивается одна ссылка и начинается другая.
Другими словам, не делайте так:
Phase 1 Phase 2 Phase 3 Phase 4
Попробуйте так:
[Phase 1] [Phase 2] [Phase 3] [Phase 4]
Или так:
(Phase 1) (Phase 2) (Phase 3) (Phase 4)
Конечно, квадратные и круглые скобки придают вид блочного, техни-
ческого терминала для фанатов математики. Для чего-то более эсте-
тического, попробуйте использовать символы окантовки:
Phase 1 I Phase 2 I Phase 3 I Phase 4



!?KW Favwtes Toe*


Click the phases of surface water on Mars for more information

" [*j An mage map showing the decline of surface water on the rtanet Mais




Phaat 1 | PluseJ: | Phast 3 | PhiS?4 | I t o s f J ) | Phase f




Puc. 36.1. Эта страница с отсутствующим изображением
может никогда и не выиграет приза,
но ее карта ссылок полностью доступна для использования
Строим Web-сайты
192

Листинг 36.1. Просмотр исходного кода для рисунка 36.1
<p>Click the phases of surface water on Mars for more informa-
tion.</p>
<img src="images/mars.jpg" width="500" height="300" border="0"
usemap="#mars" alt="An image map showing the decline of surface
water on the planet Mars.">
< p x a href = "mars01 .htm">Phase l</a> I <a href = "marsO2 .htm">Phase
2</a> I <a href="marsO3.htm">Phase 3</a> I <a href="marsO4.httr"
>Phase 4</a> | <a href="marsO5.htm">Phase 5</a> I <a href=
"marsO6 .htm">Phase 6</ax/p>
<map name="mars">
<area shape="rect" coords = "9 , 3 ,164 ,148" href = "mars01 .hi- n "
alt="Phase 1">
<area shape="rect" coords="172,2,328,149" href="marsO2.htm"
alt="Phase 2">
<area shape="rect" coords = "334 , 5 , 487 ,149" href = "marsO3 .htrr."
alt="Phase 3">
<area shape="rect" coords="9,151,163,294" href="marsO4.hen."
alt="Phase 4">
<area shape="rect" coords="171,153,327,296" href=
"marsO5.htm" alt="Phase 5">
<area shape="rect" coords="334,152,488,295" href=
"marsO6.htm" alt="Phase 6">
</map>
ГЛАВА 37.
использование фоновых изображении
в ячейках таблицы
Вероятно вы знаете, что внутри ячейки таблицы можно разместить изображение сле-
дующим образом:
< t d x i m g src = "mercury. jpg" width="200" height="200"x/td>
Возможно, вы также знаете, что можно задать цвет фона ячейки таблицы следующим
образом:
<td bgcolor="#FF0000">Behold, the planet Mercury</td>
Но знали ли вы и то, что можно использовать изображение в качестве фона ячейки
таблицы? Это работает следующим образом:
<td background="mercury.jpg" width="200" height="200">Behold, the
p l a n e t Mercury</td>
Использование фоновых изображений в ячейках таблицы позволяет наложить
HTML-содержимое, как показано на рисунке 37.1.

Совет
Атрибуты width и height тега td описывают размер ячейки табли-
цы, а не размер изображения. Старые браузеры могут уменьшать
размеры ячейки, чтобы они соответствовали размерам содержимого
ячейки, даже если вы укажете точные значения атрибутов width и
height, что может привести к обрезанию фонового изображения.




Рис. 37.1. При использовании изображения в качестве фона ячейки таблицы
можно накладывать HTML-содержимое
Строим Web-сайты
194

Листинг 37.1. Просмотр исходного кода для рисунка 37.1
<table>
<tr>
<!— Установите значение атрибута valign в bottom, чтобы прижать
текст к низу ячейки таблицы. —>
<td valign="bottom" width="200" height="200" background=
"images/mercury.j pg">
Behold, the planet Mercury
</td>
</tr>
</table>



Определение
Мозаичное заполнение - это повторение изображения для запол-
нения заданной области.


Этот метод работает отлично в том случае, когда маловероятно, что объем содержи-
мого, которое вы хотите наложить, приведет к расширению ячейки таблицы за значе-
ния атрибутов width и height изображения. В противном случае браузер использует
мозаичное заполнение или повторение изображения, чтобы заполнить дополнитель-
ную область, как показано на рисунке 37.2, в результате чего может получиться не тот
эффект, которого мы хотели достичь.


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


Листинг 37.2. Просмотр исходного кода для рисунка 37.2
<table>
<tr>
<!- Здесь нет необходимости использовать атрибут valign, поскольку
текст заполнит ячейку с размерами 2 00 на 200 пикселов. —>
<td width="200" height="200" background="images/mercury.jpg">
ГЛАВА 37. Использование фоновых изображений в ячейках таблицы 195

<p>Behold, the planet Mercury. It is one of the hottest
•places in the solar system due to i t s proximity to the sun.</p>
<p>The planet Mercury is a small, arid, l i f e l e s s , sun-baked
excuse for a heavenly body. Hardly anyone bothers to study


' <p>Its only notable quality is the -speed with which i t orbits
the sun, from which i t derives i t s name. In R m n myth, Mercury,
oa
with wings on his heels, was the messenger of the gods, a divine
postman and errand runner, the swiftest of deities.</p>
</td>
</tr>
</table>




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

К сожалению, язык HTML не предоставляет дополнительные атрибуты для точной
настройки поведения фоновых изображений, что позволяют таблицы CSS (обрати-
тесь к главе 38).
ГЛАВА 38.
использование фоновых изображений
в CSS-разделах
Фоновые изображения в ячейках таблицы либо есть, либо их нет, с чем вы уже позна-
комились в главе 37. Вы либо определяете их в HTML-коде, либо не определяете сов-
• сем, а браузер позаботится обо всем остальном. Если объем содержимого ячейки таб-
лицы превышает физические размеры изображения, браузер использует мозаичное
заполнение для изображения. Если вам подходит такой эффект, то вам повезло. Если
вам не подходит такой эффект - дело плохо.
Иначе обстоит дело с фоновыми изображениями в CSS-разделах. Таблицы CSS предос-
тавляют ряд возможностей для дизайна. Если хотите, можно использовать множество
способов мозаичного заполнения для изображения, или же можно отобразить изоб-
ражение один и только один раз. Можно также указать, где должно располагаться
изображение в разделе.
Начните с типичного раздела, наподобие следующего:
<div id="mercury" style="width: 200px;">
<p>Behold, the planet Mercury. It is one of the hottest places
in the solar system due to its proximity to the sun.</p>
<p>The planet Mercury is a small, arid, lifeless, sun-baked
excuse for a heavenly body. Hardly anyone bothers to study

<p>Its only notable q u a l i t y i s the speed with which i t o r b i t s
the sun, from which i t d e r i v e s i t s name. In Roman myth, Mercury,
with wings on h i s h e e l s , was the messenger of the gods, a divine
postman and errand runner, the s w i f t e s t of d e i t i e s . < / p >


Для добавления фонового рисунка к разделу используйте атрибут background-
image следующим образом:
<div id="mercury" style="width: 200px; background-image: url
(images/mercury.jpg);">
Обратите внимание, что путь к изображению заключается в конструкцию u r l (...).
Добавление одного CSS-атрибута background-image приводит к созданию раздела,
который ведет себя почти так же, как ячейка таблицы, в которой используется моза-
ичное заполнение для фонового рисунка, как показано на рисунке 38.1. Остальные оп-
ределения CSS-стилей позволяют настроить поведение фонового изображения.
Если вы не хотите, чтобы использовалось мозаичное заполнение для фонового
изображения, воспользуйтесь атрибутом background-repeat, как показано на ри-
сунке 38.2.
ГЛАВА 38. Использование фоновых изображений в CSS-разделах 197

Листинг 38.1. Просмотр исходного кода для рисунка 38.2
<div id="mercury" style="width: 200рх;
background-image: url(images/mercury.jpg);
background-repeat: no-repeat;">
Чтобы расположить фоновое изображение внутри раздела, укажите значение для ат-
рибута b a c k g r o u n d - p o s i t i o n , как показано на рисунке 38.3.


Совет
Если вы хотите использовать мозаичное заполнение для фонового
изображения только в горизонтальном направлении, установите зна-
чение атрибута background-repeat в repeat-x. Используйте зна-
чение repeat-у, чтобы использовать мозаичное заполнение для
фонового изображения только в вертикальном направлении.




Рис. 38.1. Если указать только CSS-атрибут background- image и ничего больше,
для фонового изображения будет использовано мозаичное заполнение


Листинг 38.2. Просмотр исходного кода для рисунка 38.3
<div id="mercury" style="width: 200px;
background-image: url(images/mercury.jpg);
background-repeat: no-repeat;
background-position: center;">

В таблице 38.1 приведены распространенные значения для CSS-атрибутов, касающих-
ся фоновых изображений. Помните, что необходимо основательно протестировать
страницы перёд тем, как выложить их в Интернете, поскольку браузеры вытворяют
странные вещи, когда они встречают определения стилей.
Строим Web-сайты
198




Рис. 38.2. Чтобы предотвратить Рис. 38.3. Расположите
использование мозаичного заполнения фоновое изображение
для фонового изображения, при помощи атрибута
установите значение атрибута background-position
background-repeat в no-repeat


Табл. 38.1. Распространенные CSS-атрибуты
для фоновых изображений в разделах

Стиль Возможные Пример
Определяет
значения
background- Как используется и ис- repeat-х, background-repeat:
пользуется ли вообще repeat-y, repeat-y;
repeat
мозаичное заполне- background-repeat:
no-repeat,
ние для изображения repeat repeat;

background- Положение фонового Любая комбина- background-position:
изображения внутри ция следующих
position left;
раздела значений: background-pos i t ion:
right bottom;
left, right,
background-position:
center, top,
center left;
bottom
background-position:
center;
ГААВА39.
использование фоновых изображений
на Web-страницах
Существует два способа добавления фонового изображения на Web-страницу. Первый
способ заключается в использовании атрибутов языка HTML. Второй заключается в
использовании определений стилей CSS. При использовании языка HTML мы получа-
ем ограниченные возможности дизайна, но высокую надежность при использовании
на различных браузерах. При использовании таблиц CSS мы получаем больше воз-
можностей дизайна, но меньшую надежность.
В языке HTML мы добавляем атрибут background в тег body, как в следующей
строке кода:
<body background="images/ufo.gif"> • . . .


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


Браузер использует мозаичное заполнение или повторение изображения по всему
доступному пространству окна браузера, как показано на рисунке 39.1.




Рис. 39.1. При добавлении фонового изображения на страницу
при помощи языка HTML браузер автоматически использует
мозаичное заполнение, чтобы заполнить страницу
Строим Web-сайты
200

При использовании каскадных таблиц стилей получается такой же результат:
<body style="background-image: url(images/ufo.gif);">
В предыдущем примере создается фоновое изображение, которое использует мозаич-
ное заполнение, точно такое же, как показанное на рисунке 39.1. Однако таблицы CSS
дают дополнительные возможности для точного управления поведением фонового
изображения, включая стили background-repeat, background-position и back-

<< Пред. стр.

стр. 20
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>