<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>

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


Часто задаваемые вопросы
Где я могу узнать больше о рекомендациях по специальным воз-
можностям?
Всестороннее обсуждение рекомендаций по специальным возмож-
ностям можно найти в Интернете по адресу www.w3.orf/WAI.


Компании по разработке программного обеспечения работают над проблемой. Ком-
пания Macromedia, в частности, отличается своим инструментальным средством Flash
MX, которое используют почти все для разработки Flash-роликов. Программа Flash M X
позволяет вставлять текстовые эквиваленты, клавишные сокращения и другие сред-
ства повышения доступности в содержимое Flash-ролика. Даже с большой натяжкой
это нельзя назвать волшебными решениями, однако это конкретные шаги в правиль-
ном направлении. Принимая во внимание, что технология Flash является самым попу-
лярным мультимедиа-форматом на планете, любой тип прогресса обнадеживает. Од-
нако важно следущее: ни один из мультимедиа форматов не является доступным на
100%, и не слушайте тех, кто будет утверждать обратное, особенно людей, использую-
щих формат Flash. Если вы желаете использовать мультимедиа на вашем сайте, озна-
комьтесь с рекомендациями консорциума W3C, и будьте готовы затратить дополни-
тельные усилия для их правильной реализации.
ГЛАВА 6. Разработка специальных возможностей 55


Управление использованием цвета
Цвет является бесценным дизайнерским инструментом. Мы используем его для прив-
лечения внимания к определенным элементам страницы. Мы используем его, чтобы
проводить различия между одним типом содержимого и другим. Однако цвет является
таким же визуальным элементом, как и изображение, поэтому, как разработчику Web-
сайтов, думающему о доступности, вам необходимо быть осторожным при его исполь-
зовании. В конце концов, многие ваши посетители имеют нарушение цветоощущения.



The planet Saturn is the sixth planet from the sun in
our solar system It is the largest planet after Jupiter,
:its nearest neighbor.


Like Jupiter, Saturn is a gas giant. It is composed
mostly of gases, unlike the inner planets, which have
rocky surfaces. Traveling on Saturn would be very
much like flying through an endless sky. In fact,
Saturn has such a small specific density that, if you
could drop fee entire planet onto a body of water,
Saturn would float like a beach ball


Saturn's majestic rinfls seem solid from a distance, but they are actually composed of millions upon
millions of orbitmgice and rock fragments, ranging in size from dustparticles to boulders 'While Saturn's
rings are the most famous and recognizable, astronomers have discovered smaller, dimmer rings around
all the outer planets m recent years except for Pluto, which may in fact be a comet.


^g My Computer


Рис. 6.1. Подчеркивание помогает привлечь внимание
к гиперссылкам в текстовом блоке



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


Рассмотрим пример на рисунке 6.1. Обратите внимание, как подчеркивание помогает
определить ссылки в этом текстовом блоке. Однако если убрать подчеркивание, как
показано на рисунке 6.2, вы не сможете сказать, где заканчивается текст и начинается
гиперссылка.
Таким образом, хотя цвет и является эффективной визуальной подсказкой или инди-
катором для гиперссылки или другого элемента, он не должен быть единственной
предоставляемой визуальной подсказкой. Конечно, вы можете использовать цвет для
привлечения внимания к элементам страницы. Просто убедитесь, что вы дублируете
его. Используйте подчеркивание, толстую рамку, символ стрелки, жирный шрифт,
курсив - все, что переносится в черно-белую среду, как показано на рисунке 6.3.
Строим Web-сайты
56


File ?dit yew Favorites loote Help

The planet Saturn is the sixth planet from the sun in
our solar system. It is the largest planet after Jupiter,
its nearest neighbor

Like Jupiter, Saturn is a gas giant. It is composed
mostly of gases, unhki: the inner planets, which have
rocky surfaces. Travelling on Saturn would be very
much like flying through an endless sky if you could
drop the entire planet onto a body of water, Saturn
would float like a beadi ball

Saturn's majestic rings seem solid from a distance, but they are actually composed of millions upon
millions of orbiting ice and rock fragments, ranging in size from dust particles to boulders. While Saturn's
rings are die most famous and recognizable, astronomers have discovered smaller, dimmer rmgs around
all the outer planets in recent years except for Pluto, which may in fact be a comet




'i M Computer
y


Puc. 6.2. Уберите подчеркивание, и тощ кто не может различать цвета,
будет иметь проблемы с поиском ссылок




!
The planet Saturn is the sixth planet from the sun in
>ur solar system. It is the largest planet after
Jupiter, its nearest neighbor

Lake Jupiter, Saturn is г. gas giant It is composed
mostly of gases, unlike the inner planets, which have
rocky surfaces. Travelling on Saturn would be very
much like fiying through an endless sky. In fact,
Saturn has such a small specific density that, if you
could drop the entire planet onto a body of water,
Saturn would float like a beach ball.

Saturn's majestic rings seem solid from a distance, but they are actually composed of millions upon
millions of orbiting ice and rock fragments, ranging in size from dust particles to boulders. While Saturn's
rings are the most famous and recognizable, astronomers have discovered smaller, dimmer rings around
all the outer planets in recent years except for Pluto, which may in fact be л comet.


J M Corrputer
y


Puc. 6.3. Чтобы заставить работать ссылки без использования цвета,
их не обязательно подчеркивать. Жирный шрифт подходит так же хорошо,
как и любые другие визуальные подсказки, не зависящие от цвета
ГЛАВА 7.
Удобство навигации
У народных и детских сказок можно многому научиться. Безусловно, они могут пока-
заться детскими игрушками, но, если вы познакомитесь с ними внимательно, то обна-
ружите, что они берутся за решение важных вопросов - зло, справедливость, храб-
рость, Web-дизайн - крайне символическими способами.


Определение
Строка навигации (Breadcrumb trail - дословно «след из хлебных кро-
шек») - это элемент навигации, который помогает посетителям опре-
делить, где они находятся в иерархии вашего сайта, показывающий
связь текущей страницы с остальной окружающей структурой.


Возьмем, к примеру, сказку о Гензель и Гретель. Гензель оставил след из хлебных кро-
шек, чтобы он и его сестра Гретель смогли найти дорогу из леса, где злая мачеха попы-
талась их оставить. На первый взгляд, эта сказка кажется просто еще одой диатрибой
(резкой обличительной речью) против злых мачех, однако попробуйте представить,
что злая мачеха - это вы, а ваши многострадальные посетители - смелые Гензель и Гре-
тель, которые ищут обратную дорогу из запутанного леса вашего Web-сайта.


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


Никто не хочет быть злой мачехой в чьей-либо сказке. Все злые мачехи умирают в
страшных муках. Гензель и Гретель умирали с голода. Но успокойтесь, что сказал и Ген-
зель своей сестре. Чтобы ваш Web-сайт избежал доли злой мачехи, все, что необходи-
мо сделать, - это оставить след из хлебных крошек, по котором)' могли бы следовать
Гензели и Гретели.
Строка навигации - это элемент навигации, который помогает посетителям опреде-
лить, где они находятся в иерархии вашего сайта, показывающий связь текущей стра-
ницы с остальной окружающей структурой. Это что-то вроде миниатюрной карты сай-
та для конкретного раздела.
Строим Web-сайты
58

Это одна из тех концепций, которые приобретают больший смысл, когда вы увидите
ее. Предположим, что ветвь вашего сайта о Европейском фольклоре выглядит следу-
ющим образом:
Детские сказки
• Братья Гримм
• Гензель и Гретель
• Рапунцель
• Белоснежка и Краснозорька
• Эльфы и сапожник
• Ганс Христиан Андерсен
• Гадкий утенок
• Дюймовочка
• Новое платье императора ,
• Девочка со спичками
• Шарль Перро
• Красная шапочка
• Золушка
• Спящая красавица
• Синяя борода
Строка навигации на странице Братьев Гримм будет выглядеть так:
Главная страница > Детские сказки > Братьев Гримм.
Переместившись на страницу сказки Рапунцель, вы увидите:
Главная страница > Детские сказки > Братьев Гримм > Рапунцель
Однако на странице сказки «Золушка» Шарля Перро строка навигации будет выгля-
деть так:
Главная страница > Детские сказки > Шарль Перро > Золушка
Обратите внимание, что строка навигации не пытается отразить структуру сайта це-
ликом. Она просто показывает посетителям логический путь к текущей странице - и,
что более важно, обратный путь к начальной странице.


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


Обычно все элементы строки навигации являются ссылками, кроме последнего
элемента в списке, представляющего текущую страницу.
ГЛАВА 7. Удобство навигации 59

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


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




Безусловно, строка навигации будет полезна настолько, насколько вы сделаете ее та-
кой. Попробуйте расположить ее в верхней части страницы, там, где посетители будут
хорошо видеть ее, как показано на рисунке 7.1. Вдобавок к этому, хорошей идеей явля-
ется отделение строки навигации от других типов текстовой навигации. Если строка
навигации будет иметь одинаковый визуальный стиль, как показано на рисунке 7.2, по-
сетители могут не понять, что к чему. Соглашение для строк навигации заключается в
использовании заглавных и строчных букв, вместо всех заглавных, а для разделения
элементов использовать знак «больше», вместо знака окантовки, как показано на ри-
сунке 7.3. Конечно же, вы можете экспериментировать с другими видами строки нави-
гации, но имейте в виду, что ваши посетители, возможно, уже привыкли к такому.




Home > Fairy Tato > Brotfaere Grimm > Rapunzel

BROTHERS GRIMM

ПС* u p o n » t i m e , йогу gw*ht>re. Story SO** here. Story
erm here. Story goes Here. Stow goe* gerc. Story got* h«re.
1
goes here. Story goes here. Story jitws hen , Story

Stwy goe> here. Story goes here. Story goe» here- Story goes he
goes here. Story кое* here. Story goes here.
"Stoiygoes here." «my goes here. Story goes here.
"Story goes here."
Story goe» here. Story goes here. Story goes here. Story (toes here. Story
goes rrer?. Story goe* here. Story goes acre. Story ectet here. Story goes
here. Story «ruts Ык. Stoty goes here. Story |p>e* turn.
Story got» here. Story goes her». Story goat here. Story Roes here. Story
имя here. Story goe» here. Story goes here. Story goe* here- Story goes
h«re.




Puc. 7.1. Старайтесь размещать строку навигации вверху страницы

В конце концов, строки навигации отлично работают в качестве альтернативного ме-
тода навигации. Все хорошие сайты имеют, по крайней мере, два метода. Не пытай-
тесь строить основную схему навигации по вашему сайту с использованием строк
навигаций, иначе вы получите множество разочарованных посетителей, которые
60 Строим Web-сайты

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


I чр Ю«#




fairy tales
BROTHERS GRIMM
Rapunzel
ПСС u p o n 8 t i m e , «ШУСОМЬШЕ. Story goes hen;, Stop,
goes here. Shin.' got к here, йогу goes gerr. Stein-goes here.
y goes here. Story g«s hure. SUQi goes he re, Story goe* here. Я
goes here.
Story goes here. Son' goes b>re. Story goes here. Story goes here. S
goe» here, йогу goes here. Si oiy goes here.

Story goes here." «ttKygcMC here. Stcwy go«s here
"Story коей here.*
Story (toes here. Story goes here. Story goes tore. Story goes here. SWr>
goes here. Story goes here. Story goes here. Story goes here. Story goes
here. Stoiy goes here. Sbxygoei here. Story goes here.
Story goes here. Storv goes here. Stoiy goes here. Story goes here. Story
goes here. Story goes here. Slorygoes here. Story goes here. Story goes




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




tales
THERS GRIMM
Rapunzel
1 п с е u p o n a t i m e , rtmrgort beta Story goes here. В
^goes hevt. Stoiy goes here. Story gc4»gere. Story goes here.
here. Story goes Ьте. Story got»
goes here,
Story goes here. Story goes hi -re. Ston- goes here. Story goes here. Story
gt>es here. Story goes here. Stay goes'here,
"Stttry goes here," story goes wre. Stoty goes Iterc.
^rtory jt*es here.."
Ston- goes here. Stoty goes here, Story goes Irere. Story goes Ыт
goes here. Story вое» here. Si лгу g-oes here. Story искав here. Slo
Here. Story goes here. Storj' fr^s here. Story goes here.
Stor>' goe* here. Story goes here. Story goes hens. Story goes here. Sto
goes here. Story goes here. St >ry goes here. Story got» here. Story go




Puc. 7.3. Придерживайтесь стиля, в котором используются заглавные/строчные буквы
для ссылок, а ссылки разделяются знаком «больше», и вы не ошибетесь
ГЛАВА 7. Удобство навигации 61

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


<а href="index.htm">Home</a> &gt;
<!— &gt; - это код для знака "больше". >
<а href="levelone.htm">Level One Page Name</a>
&gt ;
<!— Скопируйте и вставьте следующую строку
необходимое число раз, если в строке навигации
вам необходимо больше, чем три уровня страниц. >
<а href="leveltwo.htm">Level Two Page Name</a>
&gt ;
<!— Последний элемент списка не получает ссылку,
поскольку он представляет текущую страницу. >
Level Three Page Name
ГЛАВА 8.
использование меню переходов
Меню переходов - это удобный для использования элемент навигации, если у вас есть,
большой сайт с множеством страниц. По существу, это быстрый указатель на наиболее:
популярные страницы вашего сайта, как показано на рисунке 8.1. Посетители выбирают
элемент из списка, а простая функция на языке JavaScript загружает определенную стра-
ницу. Таким образом, посетителям не придется перемещаться по сайту шаг за шагом.



Определение
Меню переходов - это быстрый указатель на наиболее популярные
страницы сайта.




Choose в ред.

Ne\
ports
Business
Entertainment
Humoi
Style
Travel
Science
Culture




Puc. 8.1. Используйте подобное меню переходов в качестве указателя
на наиболее популярные страницы вашего сайта. Посетитель выбирает страницу
в меню, и выбранная страница загружается в окне браузера
Для построения меню переходов потребуется два компонента: HTML-форма (на ней

<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>