Май 2010

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

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

Достижение баланса между текстом

и графикой на Web-странице

Иногда одних лишь слов недостаточно для передачи сообщения. Однако со —

здание Web-страницы, содержащей и текст, и рисунки требует больших усилий,

290 Глава 6. Графика





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

Например, большинство энтузиастов спорта мгновенно узнают фотографию

Андрея Шевченко без какого-либо текста о талантливом футболисте. Однако, до-

бавив под изображением текстовое поле со словами «Андрея Шевченко из «Ми —

лана» забивает очередной победный гол», вы превратите изображение в истори —

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

Всегда подбирайте фотографии, поддерживающие связанный с ними текст. Например, заменить фотографию города Парижа и Эйфелевой башни фотогра — фией Шепетовки было бы нелепо. Однако многие Web-дизайнеры вставляют

изображения на страницы без четкого представления о том, как изображения со- относятся с текстом Web-страницы.

Кроме нахождения равновесия между текстом и графикой, если Web-страница

содержит более одного изображения, выберите одно из изображений в качестве

«главной» картинки, которая передает тематику Web-страницы. Поместите «темати —

ческое» изображение на видном месте Web-страницы. На Web-страницах, содержа — щих доминирующие изображения, вроде той, которая показана вверху на рис. 6.4, читателям легче сфокусировать взгляд. И, наоборот, на Web-страницах с нескольки — ми картинками без доминирующего (тематического) изображения (как показано в

нижней части рис. 6.4) посетители могут почувствовать себя сбитымис толку.

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

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

Кроме того, вставляя изображения в Web-страницу, старайтесь не размещать

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

причиной излишнего напряжения глаз,

Глава 6. Графика 291





292 Глава 6. Графика







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

шение к тексту. Если текст не подходит к изображению, замените изображение либо перепишите текст. Если картинка стоит тысячи слов, то картинка в сочета — нии с хорошо написанным текстом может передать огромные объемы информа- ции быстро и на небольшом пространстве Web-страницы.



Вопросы межплатформенной совместимости при создании графических изображений для Web-страниц

После того, как вы включили изображение в Web-страницу, то, как изображе- ние будет выглядеть на мониторе посетителя, зависит от множества факторов. Один из этих факторов — операционная система, установленная на компьютере посетителя. На экране Macintosh одно и то же изображение выглядит несколько иначе, чем на экране Windows-компьютера (см. рис. 6.6).

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

та каждого пикселя в системной таблице кодировки цветов (Color Lookup Table

— CLUT). Таким образом, цвета, отображенные браузером при интерпретации

содержимого графического файла, определяются таблицей кодировки. К сожале — нию, в средах Windows и Macintosh используются различные таблицы кодировки цветов; именно поэтому при отображении одного и того же изображения в двух этих системах вы замечаете цветовой сдвиг.

Другая проблема состоит в сдвиге гаммы между мониторами Windows и

Macintosh. Гамма монитора определяет среднюю точку между светлым и темным.

У мониторов Macintosh гамма составляет в среднем 1.8, тогда как гамма монито — ров Windows — 2.2. Различие в гамме между двумя операционными системами

Глава 6. Графика 293







приводит к тому, что изображение, созданное на Macintosh и отображенное на компьютере, работающем под управлением Windows, будет на 15—20% темнее. Другими словами, изображения, созданные в среде Windows, на экране Macintosh кажутся на 15—20% светлее.



ПРАКТИКУМ

Решение, позволяющее справиться и с проблемой цветового сдвига, и с пробле — мой гаммы, заключается в создании одного изображения Для Macintosh и второ —

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

их до публикации изображения на Web-сайте.

Чтобы просмотреть изображение с использованием таблицы цветов и гаммы другой операционной системы, у вас есть две альтернативы. Можно приобрести

и компьютер Macintosh, и Windows-компьютер и затем открывать и просматри — вать свои графические изображения в Web-браузерах на обеих системах. Или же более практичный метод — воспользоваться программой редактирования изобра- жений, позволяющей увидеть, как выглядят изображения на обеих операцион — ных системах. Например, Adobe Photoshop версии 5.5 и выше позволяет про — сматривать изображения с использованием таблицы цветов и гаммы Windows или Macintosh. Просто откройте изображение в Photoshop, выберите в меню View

| Proof Setup (Вид | Настройка цветопробы), а затем Macintosh RGB или Windows

RGB, в зависимости от среды, в которой вы работаете (см. рис. 6.7).

294 Глава 6. Графика







Если, работая в Photoshop для Windows, вы выберете «Macintosh RGB», изоб-

ражение на экране «переместится» в таблицу цветов и гамму монитора Macintosh. И, наоборот, при выборе Windows RGB в Photoshop для Macintosh, изображение

на экране «переместится» в таблицу цветов и гамму монитора Windows.

Если вы обнаружили, что изображение выглядит неудовлетворительно при просмотре под управлением ОС Windows или ОС Macintosh, с помощью про — граммы редактирования изображений (такой как Photoshop, ImageReady и т. д.) настройте цвета и яркость картинки. Продолжайте вносить изменения до тех пор, пока картинка не будет выглядеть приемлемо под управлением обеих ОС.



Задание размеров изображения в дескрипторе

В начале этой главы вы узнали, что дескриптор дает Web-браузеру ука —

зание загрузить и отобразить на Web-странице графический файл. Например, в приведенном ниже HTML-коде показан дескриптор с атрибутом src, ко —

торый дает Web-браузеру указание извлечь и отобразить картинку, сохраненную в

файле landscape. дрд, с шириной 200 пикселей и высотой 80 пикселей:



200″ height=»80″ />

Глава 6. Графика 295





ПРАКТИКУМ

При добавлении атрибутов width (ширина) и height (высота) в дескриптор

вы должны понимать, как Web-браузер использует заданные вами атрибу- ты. Атрибуты width и height определяют размеры графического элемента на эк —

ране, которые могут отличаться от фактических высоты и ширины картинки в

графическом файле. Скажем, фактические размеры картинки в iandscape. jpg составляют 200 пикселей на 80 пикселей. Тогда дескриптор изображения из пре — дыдущего примера, вставленный в HTML Web-страницы, дает Web-браузеру ука — зание отобразить изображение на 100% фактического размера картинки (200×80). Однако если вы случайно поменяете местами значения атрибутов, так, что атри- бут width будет равен 80, а атрибут height — 200, изображение будет искажено, что можно видеть на рис. 6.8.

Хотя изменение атрибутов width и height может показаться удобным спосо — бом приведения размера изображения в соответствие с предназначенной для него областью в пределах Web-страницы, не следует применять этот подход при работе с фотографиями. Атрибуты width и height должны отражать фактические размеры изображения в файле. Если фотография слишком велика для того, что- бы поместиться в отведенную ей область на странице, откройте файл исходного изображения в программе редактирования изображений, например, Photoshop, и

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

Когда атрибуты width и height соответствуют фактическим размерам изобра —

жения в графическом файле, Web-браузеру не приходится тратить время на изме — нение размеров изображения. Если же браузеру требуется изменить размеры изображения, он добавляет пиксели, чтобы увеличить изображение, и удаляет пиксели для его уменьшения. К сожалению, если заставить браузер изменять размер изображения, вывод изображения, и, следовательно, всей остальной Web- страницы на экран займет больше времени. Более того, программы редактирова- ния изображений, такие как Photoshop, изменяют размер изображения «каче —

ственнее», нежели Web-браузер. Это особенно очевидно при использовании атрибутов width и height для увеличения размеров рисунка — изображение ста — новится зернистым и расплывчатым.















Рис. 6.8. Если значения атрибутов width и height поменять местами,

в окне браузера изображение исказится

29 6 . Глава 6. Графика





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

Основная причина использования атрибутов width и height во всех дескрип —

торах состоит в том, чтобы дать^браузеру возможность точно позициони —

ровать текст или иное Web-содержимое вокруг картинки. Если опустить атрибу- ты width и height, Web-браузер не сможет точно расположить изображения и текст на экране до тех пор, пока не загрузит изображения полностью. В резуль — тате произойдет одно из двух:

• Браузер может загрузить и отобразить текст. Затем, после загрузки графи — ческих изображений, браузер перезагрузит страницу и расположит текст и изображения на своих местах.

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



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

каждом из дескрипторов зачастую не позволяет браузеру отобразить на эк — ране текст. Помните: вам нужно удержать внимание посетителей, пока браузер загрузит и выведет на экран изображения. Если посетителю надоест, например, смотреть на пустой экран, он может отправиться куда-нибудь еще. Когда же вы задаете атрибуты width и height в дескрипторах , браузер резервирует пространство под каждую картинку и продолжает загружать и отображать текст,

ожидая, пока загрузятся изображения В результате этого посетители смогут ви — деть и читать текстовое содержимое, дожидаясь, пока браузер закончит загрузку

и вывод изображений на Web-страницу. Помогая браузеру быстро загрузить тек —

сту, вы даете посетителю «что-нибудь почитать», пока браузер загружает графику,

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



Работа с атрибутом alt и браузерами, не воспроизводящими графику

Атрибут альтернативного текста (alt ) — важное дополнение к дескриптору

. Атрибут al t дает Web-браузеру указание отобразить строку текста перед загрузкой графического изображения. Кроме того, Web-браузер продолжит ото —

бражать альтернативный текст (заданный атрибутом ait) , если по какой-либо

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

width=»100″ height=»50′>

alt=»#OTO Джеймса Эллиотта, основателя InGen, Inc.»>

height=»10″ alt=»KpacHb»i маркер»>



Альтернативный текст, «Красный маркер», занимает больше места, чем само

графическое изображение. Более того, поскольку атрибуты width и height дают

браузеру указание зарезервировать под маркер область 10×10 пикселей, для ото-

бражения альтернативного текста не хватает места, что можно видеть на рис.

6.10.

Таким образом, при отображении мелких графических изображений или при

отображении несущественной графики (вроде элементов фона и графических го — ризонтальных линий), делайте альтернативный текст кратким или используйте

атрибут ai t с пустой строкой, как в конце следующего дескриптора :



height=»10″ alt=»">



С помощью атрибута ai t (с текстом или без него) программы чтения текста для незрячих идентифицируют каждое изображение для посетителя с ослаблен — ным зрением. Когда посетитель с ослабленным зрением открывает Web-страницу, программа чтения текста, например, Jaws, читает посетителю текст тела доку — мента и альтернативный текст в каждом дескрипторе изображения. Альтернатив- ный текст для графических изображений, в большом количестве присутствующих

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

вает атрибут ai t с пустой строкой, она игнорирует изображение и продолжает читать текст тела документа, отображенный в окне Web-браузера.

Консорциум W3C считает использование al t настолько важным, что комитет

стандартизации сделал его обязательным элементом надлежащим образом сфор-

мированного дескриптора . Следовательно, пренебрежение атрибутом al t

во всех дескрипторах не только считается признаком неряшливого коди —

рования, но и, в соответствии со стандартом W3C, делает ваши дескрипторы

неправильно сформированными.

Иногда, как вы видели на предыдущей иллюстрации, «заполнитель» изобра- жения слишком мал, чтобы вы могли описать изображение строкой альтернатив —

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

воспользуйтесь атрибутом longdesc (длинное описание) в дополнение к атрибу —

ту alt. Значение атрибута longdesc отправляет пользователя к отдельному

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

Глава 6. Графика 29 9





схему организационной структуры предприятия и вставляете схему (из файла

business. gif ) на страницу с помощью следующего дескриптора :



организационной структуры

предприятия» longdesc=»chart. html»>



HTML-документ (chart. html), указанный в атрибуте longdesc, содержит подробное описание (в формате простого текста) всех данных на рисунке

business. gif. Когда посетители вашего Web-сайта наводят курсор мыши на гра — фический элемент, содержащий атрибут longdesc, Web-браузер открывает окно с информацией из HTML-файла (в данном примере chart. html). Документ chart. htm l содержит только текст.

К сожалению, многие Web-браузеры все еще не поддерживают атрибут

longdesc. Поэтому неплохо бы добавлять на страницы отдельные гиперссылки

на файлы с текстовыми описаниями (помимо добавления атрибута longdesc в

деСКриПТО’ры ).



Создание всплывающей подсказки с помощью атрибута title в дескрипторе

С помощью атрибута titl e в дескрипторе вы можете описать (словес — но) графическое изображение своим посетителям в виде всплывающей подсказ — ки. В спецификациях HTML 4.0 сказано, что использование атрибута titl e в

качестве всплывающей подсказки является целесообразным.



ПРАКТИКУМ

Чтобы создать подсказку, вставьте атрибут titl e в дескриптор изображения сле — дующим образом:

width=»200″ height=»80″

alt=»rcpHb»i Крым» tit1е=»Приезжайте в Крыми>

Когда посетитель на несколько секунд задерживает курсор мыши над изобра- жением, браузер отображает текст, присвоенный атрибуту title, в виде всплыва — ющей подсказки рядом с курсором мыши. На рис. 6.11 показано, как Internet Explorer отображает изображение и описание, заданные в приведенном выше дескрипторе .

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

некоторые Web-браузеры некорректно обращаются с длинными строками текста. Некоторые браузеры не переносят длинный текст на следующую строку. В других браузерах существует максимальная длина всплывающей подсказки, и они уреза — ют текст так, чтобы он поместился в поле подсказки. В отличие от атрибута alt, атрибут titl e — сравнительно новый, и многие Web-браузеры его еще не поддерживают. К счастью, атрибут titl e работает в Internet Explorer версии 4 и выше, а также полностью поддерживается Netscape Navigator версии 6 и выше.