Сюда вставляется тело Web-документа

img src=»imagel. jpg» width=»l» height=»l»>

img src=»image2.jpg» width=»l» heigbt=»l»>





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

эти изображения и не видны на экране, Web-браузер все же загружает изображения

с Web-сервера и сохраняет копии изображений в папке кэша изображений на жест —

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

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

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

ния, как в дескрипторах в следующем HTML-коде:





IIpHMep обыкновенного Web-flOKyMeHTa





Сюда вставляется тело Web-документа

img src=»imagel. jpg» width=»200″ height=»75″>

img src=»image2.jpg» width=»150″ height=»80″>

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

жает (скрытые) изображения, требуется больше времени, чем для загрузки одного лишь видимого содержимого.

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

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

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

сельных точек на первой странице, не содержащей графики.

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







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

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

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

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

Глава 6. Графика 33 1



Расширение Web-безопасной цветовой палитры

с помощью техники растрирования

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

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

в приведенном ниже HTML-коде), Web-браузер «окра — шивает» фон в нужный вам светло-голубой цвет — между более светлым и более темным оттенками Web-безопасного голубого:





IlpHMep Web-страницы с растрированным i*BeTOM





Сюда вставляется тело Web-документа

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

ния очень маленького размера, что гарантирует его быструю загрузку. Таким об —

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





Глава 6. Графика 33 3



Сглаживание краев текста, преобразованного

в графический элемент, за счет устранения

контурных неровностей

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

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

достижение равновесия между качеством изображения и размером файла и т. д.),

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

Web-страницы.

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

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

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

ложняется еще и тем, что текст расположен по кривой вокруг логотипа. Не гово —

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



ПРАКТИКУМ

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

преобразовании текста в «рисунок» текста нужно решить, применять ли функцию устранения контурных неровностей (anti-aliasing).

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

33 4 Глава 6. Графика





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

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

6.34.

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

отражается на мелком тексте (до 14 пунктов). Размывая контуры каждого симво —

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

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

функция устранения контурных неровностей было отключена, как показано на рис. 6.35.





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





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

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

изображение (то есть в «рисунок» текста), поэкспериментируйте и выберите то изображение, которое легче всего читается.























Создание GIF-анимации с чистого листа

Управление GIF-анимацией с помощью внутренних параметров

Создание баннера с помощью GIF-анимации

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

Включение в Web-сайт готовой Flash-заставк! Создание Flash-фильма с чистого листа Построение анимации на основе текста с

помощью FlaX

Передача потокового аудио и видео

Создание потокового медиа

Создание страницы с Web-камерой

Встраивание видео и аудио в страницу с помощью SMIL

Глава 7. Анимация, звук и видео ‘ 33 7



егодня практически невозможно путешествовать по Internet, не встречая

‘ Web-страниц, содержащих какую-то анимацию, звук, видео или комбина —

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

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

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

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



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

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

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

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

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

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

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

в секунду). Благодаря инертности зрительного восприятия, ваш разум «сшивает»

изображения вместе, создавая иллюзию движения. Конечно же, и в фильмах, и на

33 8 Глава 7. Анимация, звук и видео





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

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

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

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

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



Понимание роли анимации в Web-дизайне

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

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

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

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



Понятие подключаемого программного модуля

На протяжении этой главы вы будете рассматривать различные типы мультиме- дийного содержимого, такие как Flash-анимация, потоковое аудио и видео (streaming audio/video), туры по виртуальной реальности (Virtual Reality — VR) QuickTime и т. д. В зависимости от формата файла анимации, Web-браузер может

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

модулем (plug-in)), которое обычно выгружается из Web и устанавливается в брау — зере — иногда в процессе просмотра страницы, содержащей анимированный объект. Например, для. того, чтобы вы смогли воспроизвести свою первую Flash —

анимацию, в вашем браузере должен быть установлен модуль воспроизведения

Flash. Несколько лет назад пользователям приходилось выгружать этот модуль из

Глава 7. Анимация, звук и видео 33 9





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

ются с уже установленным модулем воспроизведения Flash.

Обычно HTML-утверждения, которые помещают анимированный объект на страницу, включают в себя также инструкции для Web-браузера, позволяющие

последнему найти и выгрузить соответствующий подключаемый модуль. Перед

тем, как выгрузить и установить модуль, браузер выведет на экран диалоговое окно

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

анимированного объекта. В среде. Windows большинство подключаемых модулей представляют собой элементы управления ActiveX. Объекты ActiveX подробно рас — сматриваются в главе 9.



Понятие динамического HTML (DHTML)

В начале Web-содержимое было статическим. После того, как браузер завершал

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

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