Этот заголовок определяет начало документа

Текст на странице 1…

Этот заголовок начинает новую страницу |

Текст на странице 2…

style=»page-break~before:’avoid»>

Перед этим заголовком разрыва страницы нет

Дополнительный текст на странице 2…

Этот заголовок начинает новую страницу

Текст на странице 3…

нения с Internet были медленными, и лучшим, чего можно было ожидать,

путешествуя по Internet, был белый текст, медленно появляющийся на зеленом или черном фоне монитора. То было темное, тоскливое время для пользователей Internet. К счастью, дни эти давно минули.

Сегодня Web-страницы с изобилием графики, равно как и Internet (электрон —

ное «шоссе», по которому транспортируется информация) становятся быстрее и

быстрее. Сравнить скорость, с которой информация движется по Internet в наши дни, со скоростью десять лет назад — все равно, что сравнить «Запорожец» с «Феррари». Иными словами, сегодняшняя сеть Internet «намного быстрее. Более того, компьютеры с установленными на них новейшими браузерами, такими, как

Internet Explorer и Netscape Navigator, обрабатывают и загружают Web-страницы быстрее, чем когда-либо ранее.

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

мерам, нежели текстовые, и на перемещение по Internet к компьютеру посетите —

ля им требуется больше времени. В те дни, когда стандартным подключением к

Internet считался модем на 2400 бод, никому не хотелось ждать несколько минут

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

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



Понимание роли графики в Web-дизайне

Графику на Web-страницы помещают по тем же причинам, что и картинки в

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

та. Посетители сайта не только прочтут о преимуществах учебы в этом универси —

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

Один лишь текст не может передать столько же информации, как текст в со —

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

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







К сожалению, с иллюстрациями на Web-страницах, как и со всем прочим,

можно переборщить. На рис. 6.1 несколько удачных изображений вместе тек —

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

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

Создавая Web-сайт, никогда не забывайте о своей ответственности как дизай-

нера. Не выплескивайте на своих посетителей слишком много информации на

одной странице, и не предоставляйте им слишком много альтернатив сразу. Вам

решать, что и когда увидят ваши посетители. Предоставляя посетителям черес —

чур большой объем данных за один раз, вы рискуете вызвать «информационную

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

Создание Web-графики

Включая в свою Web-страницу изображения, вы можете обратиться к несколь —

ким источникам графики. Можно приобрести компакт-диск с готовыми изобра —

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





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

(например, http://photosphere. com ИЛИ http://creative. gettyimages. com).

Еще один вариант — сделать фотографии с помощью цифрового или пленочного

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

танные фотографии в файлы на своем компьютере. И, наконец, можно создать

цифровые аппликации и иллюстрации с помощью дизайнерских приложений,

таких как Adobe Photoshop или Image Ready.

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

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

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

Понимание форматов файлов изображений

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

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

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

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

Глава 6. Графика 28 5





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

данные, чтобы восстановить сжатые блоки цвета.

Последний этап подготовки изображения включает в себя выбор формата файла при сохранении рисунка в дисковый файл. Тремя наиболее распростра-, ненными форматами Web-графики являются JPEG (формат, использующий схему сжатия с потерями, разработанную Объединенной группой экспертов в области фотографии (Joint Photographic Experts Group)), GIF (формат обмена графикой (Graphic Interchange Format)) и PNG (переносимая сетевая графика (Portable Network Graphic)). Форматы GIF и PNG используют для уменьшения размера

файла схему сжатия без потерь. Чем меньше, размер графического файла, тем бы —

стрее ^b-браузер сможет загрузить его й отобразить на Web-странице. Следова — тельно, сжатие графических файлов сокращает длительные периоды ожидания, обычно ассоциирующиеся с Web-страницами, на которых присутствуют большие изображения. Из трех вышеперечисленных форматов JPEG используется главным образом для фотографий, тогда как формат GIF чаще всего применяется для ап — пликаций, иллюстраций и рисунков.

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

потерями) определенных цветов и затем использования оставшихся цветов по

схеме растрирования, то есть смешивания пикселей цветов, позволяющей «обма —

нуть» глаз человека так, что он видит цвета, которых на картинке больше нет. Хотя JPEG-изображение может содержать до 16.7 млн. цветов, в процессе сжатия большая часть из этих цветов удаляется для достижения значительного уменьше — ния размера файла.

В то время как файл формата JPEG может содержать миллионы цветов, файл

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

(Run Length Encoding — RLE) для сжатия больших сплошных цветовых блоков

(вроде тех, которые встречаются в аппликациях). Например, предположим, что

изображение имеет сплошной блок голубого цвета во всю ширину страницы. При сохранении файла схема сжатия GIF фиксирует координаты голубого блока

и удаляет цветовой блок из файла. Когда Web-браузер открывает сохраненное

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

сплошного цвета GIF-файлы создаются с очень небольшими размерами. По-

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

мается до небольших размеров.

Формат PNG использует комбинацию схем сжатия GIF и JPEG. Существуют

две разновидности формата. PNG: PNG-8 и PNG-24. Формат PNG-8 может рабо — тать только с графикой, содержащей максимум 256 цветов. Следовательно, фор —

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





мат PNG-8 весьма сходен с форматом GIF. Кроме того, в PNG-8 используется

метод сжатия RLE, аналогичный GIF-сжатию. Применение формата PNG-8 к аппликациям дает небольшие размеры файлов, близкие к размерам файлов фор —

мата GIF. Формат PNG-24 может обрабатывать изображения, содержащие милли- оны цветов, и применяется для минимизации размеров файлов фотоизображе — ний. Однако поскольку формат PNG не удаляет пиксели цвета, как формат JPEG, сохранение фотографий с использованием формата PNG-24 зачастую со —

здает файлы чересчур большого размера, что делает неприемлемым их использо —

вание на Web-страницах.

Выбирая формат графического файла, вы должны убедиться, что большинство

(а лучше все) посетители вашего сайта могут открывать графические файлы, включенные в вашу Web-страницу. Хотя почти все Web-браузеры в состоянии разворачивать и отображать файлы в форматах GIF и JPEG, этого нельзя сказать

о PNG-графике. (Web-путешественникам из тех, кто пользуется более старыми

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



ПРИМЕЧАНИЕ Netscape Navigator и Internet Explorer предоставляют ограниченную поддер —

жку графики в PNG-формате с 1997 года. Однако для полной поддержки формата PNG, вклю — чая прозрачность изображений, просматривать изображения лучше всего с помощью Internet Explorer версии 5 и выше и Netscape Navigator версии 6 и выше.





Помещение Web-графики на Web-страницу

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

файл графического изображения и HTML-дескриптор . Например, следую-

щий дескриптор дает Web-браузеру указание загрузить и отобразить гра — фический файл image. jpg:







Внутри дескриптора атрибут src сообщает Web-браузеру источник гра — фического изображения (то есть имя файла), которое браузер должен отобразить.



ПРИМЕЧАНИЕ Чтобы дескриптор изображения соответствовал XHTML, он должен иметь конечный дескриптор, или же его начальный дескриптор должен заканчиваться символами

/> . Например, (между замыкающими / и > пустых элемен —

тов ставится пробел) или . )



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

src=»imagel. jpg» />

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





Соблюдение авторских прав при работе

с Web-графикой

Рассмотрение Web-графики не может быть полным без упоминания законода — тельства об авторском праве. Хотя законы об авторском праве варьируются от

страны к стране, если вы — гражданин США, вы должны следовать законам,

принятым Конгрессом Соединенных Штатов.

Законодательство США об авторском праве защищает права людей, создаю — щих новые продукты (изобретателей) и интеллектуальную собственность, при — надлежащую писателям и художникам. Например, текст этой книги подпадает под действие стандартного законодательства США об авторском праве, что дела-

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

Помимо текста, под защиту законодательства США об авторском праве подпада —

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

нов об авторском праве. Рождение Internet не внесло изменений в законодательство

США об авторском праве, а просто усложцило обеспечение соблюдения закона.

Если вы планируете копировать изображения с одного сайта и использовать

их на другом, не принимайте ничего как должное. Во многих случая на Web —

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

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





об использовании или нет, напишите письмо — электронное или обычное — ав — тору перед тем, как использовать изображение. Объясните, что именно вы хоти —

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

сунков. Если автор скажет «нет», не используйте рисунки. И, наоборот, если автор даст согласие на использование своего материала, постарайтесь получить разрешение в письменной форме. Например, отправьте автору письмо с описа — нием того, что вы собираетесь делать с изображениями, и оставьте место для подписи автора. (Стандартный термин для обозначения документа такого типа — расписка в передаче права). При написании расписки в передаче права конкретно укажите, как именно вы намереваетесь использовать изображения. Ав- тор, вероятнее всего, не подпишет общую расписку, в которой не сказано, что вы намереваетесь делать с изображениями.

Некоторые авторы указывают, сколько раз вы можете использовать их изобра —

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

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

тературой «групп ненависти» (hate groups). Всегда следует внимательно прочесть расписку в передаче права, и, если у вас нет уверенности по какому-либо из ус — ловий передачи, попросите у владельца авторского права разъяснений.

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

щать рисунки на сайты коммерческой направленности. Если вы используете ап — пликации из таких источников, как галерея аппликаций Microsoft Office или с

таких Web-сайтов, как Microsoft Design Gallery Live (http://dgi. microsoft. com), внимательно прочитайте лицензию на использование.

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

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

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

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

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

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

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

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





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

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

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

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

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

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

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

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

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

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

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

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