Самоучитель по креативному веб-дизайну. Книга 2, стр.86



Эта строка текста отделена от следующей строки горизонтальной линией



Эта строка текста отделена от текста вверху горизонтальной линией





В данном примере дескриптор создает видимый разрыв между двумя

строками текста, как показано на рис. 6.21. ^ В





Однако хотя с помощью этих дескрипторов можно разбивать Web-страницы

на разделы, горизонтальным линиям не хватает «настроения». Чтобы добавить

изюминку в свои Web-страницы, замените функциональные (хотя и скучные)

стандартные линейки цветной графикой.



ПРАКТИКУМ

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

тальную линию шириной 600 пикселей и высотой 5 пикселей. Сохранив графи —

ческое изображение в виде маленького GIF-файла (iine. gif ) размером всего

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

Глава 6. Графика ‘ 31 5









IlpHMep с горизонтальными линиями





Эта строка текста отделена от следующей строки горизонтальной линией







Эта строка текста отделена от текста вверху горизонтальной линией

Самоучитель по креативному веб-дизайну. Книга 2, стр.87

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

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

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





JPEG, чтобы сделать размер файла фотографии как можно меньше. Однако, со- хранив изображение, вы обнаруживаете, что размер файла изображения все равно составляет более 200 Кб. Таким образом, посетителям вашего сайта, подключен — ным к Internet на скорости 28.8 Кбод, придется ждать более 30 секунд, чтобы их Web-браузеры загрузили и отобразили пейзаж.

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

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

Самоучитель по креативному веб-дизайну. Книга 2, стр.88



width=»600″ height=»300″>



Графический файл, заданный атрибутом lowsrc (iandiow. jpg) — это копия с

низким разрешением исходного изображения (iand. jpg). Когда Web-браузер об — наруживает дескриптор в данном примере, браузер сначала загружает изображение, указанное в атрибуте lowsrc, а затем загружает исходное изобра —

жение, указанное атрибутом src.

Поскольку изображение lowsrc (iandiow. jpg) имеет файл меньшего размера, чем исходное изображение (iand. jpg), браузер может быстро загрузить и отобра — зить iandiow. jpg. Благодаря этому посетители смогут видеть версию пейзажа с низким разрешением, пока браузер загружает исходную фотографию с высоким

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

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

ПРАКТИКУМ

Как было сказано выше, основное назначение атрибута lowsrc — вывод на экран изображения с низким разрешением (быстро загружающегося). Однако вместо того,

чтобы использовать атрибут lowsrc для отображения копии с низким разрешением того же изображения, почему бы не сделать все несколько интереснее — не загру — зить с помощью одного дескриптора два разных изображения (см. рис. 6.23)?

Самоучитель по креативному веб-дизайну. Книга 2, стр.89

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

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

ла. В приведенном ниже примере показано, как можно воспользоваться дескрипто —

ром для загрузки изображения со словами «Следующим летом» на время ожидания загрузки и отображения браузером картинки в файле photo. jpg:



width=»600″ height=»300″>

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





Итак, когда посетитель .извлекает Web-страницу, он видит изображение из

файла nextsummer. jpg, которое позже заменяется изображением, заданным ат — рибутом src, что и можно лицезреть на рис. 6.23.

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





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



Обеспечение правильного представления цветов

с помощью Web-безопасной цветовой палитры

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

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

вая палитра (Web-safe color palette) состоит из 216 цветов, которые Web-браузеры способны правильно воспроизводить как в среде Windows, так и в среде Macintosh.

Большинство посетителей вашего Web-сайта — не Web-дизайнеры, и многие

из них работают на старых машинах, видеоадаптеры которых поддерживают мак —

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

Самоучитель по креативному веб-дизайну. Книга 2, стр.90

Скажем, например, вы создаете изображение, содержащее тысячи или даже

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

Если при разработке графики для Internet вы используете цвета, не входящие

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

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

Самоучитель по креативному веб-дизайну. Книга 2, стр.91

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





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





ПРАКТИКУМ

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

1. Откройте изображение.

2. Выберите в меню Image | Mode | Indexed Color (Изображение | Режим | Ин — дексированные цвета).

3. После того, как Photoshop выведет на экран диалоговое окно Indexed Color (Индексирован —

ные цвета), выберите элемент Web в выладаю — щем меню Palette (Палитра) и щелкните на

кнопке ОК, как показано на рис. 6.25.



GIF-изображения лучше сохранять с помощью

Photoshop 5.5 и выше, пользуясь опцией Save For

Web (Сохранить для Web). Чтобы сохранить графи — ческое изображение с помощью опции Save For Web, откройте изображение в Photoshop и выберите в меню File | Save for Web (Файл | Сохранить для Web).

Photoshop откроет диалоговое окно Save For Web, в

котором вы сможете выбрать, как сохранить файл. Функция Save For Web не только позволяет сохранить GIF-изображение в Web-безопасной цветовой палит- ре, но также позволяет зафиксировать те или иные цвета и удалить остальные из цветовой палитры изображения.

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

Самоучитель по креативному веб-дизайну. Книга 2, стр.92



Создание графических гиперссылок

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

1, гипертекстовая ссылка создается путем помещения «текста ссылки» (то есть текста, на котором посетитель щелкает, чтобы перейти по ссылке на другую

32 0 Глава 6. Графика





страницу) между начальным и конечным дескрипторами привязки () в

HTML-коде Web-страницы.

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

могут не знать, как написать HTML-код для создания ссылки, однако они име —

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



ПРАКТИКУМ

Помимо использования в качестве гипертекстовой ссылки текста, можно приме — нять для ссылок графические изображения. Скажем, вы хотите сделать так, что — бы посетители могли посылать вам электронные сообщения. Для этого можно

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

Самоучитель по креативному веб-дизайну. Книга 2, стр.93



com»Ximg src=»mailbox. gif»

border=»О»

width=»0″ height=»20″>





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

го ящика из файла maiibox. gif) становится ссылкой, на которой посетитель может щелкать (см. рис. 6.26).

Обратите внимание на добавление атрибута border в дескриптор . Ког —

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

равным. нулю.

При использовании графического изображения в качестве гиперссылки следи —

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

Самоучитель по креативному веб-дизайну. Книга 2, стр.94

дает Web-браузеру указание заполнить окно браузера эле — ментами мозаики.



ПРАКТИКУМ

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





npnMep фона





3«ro пример мозаичного фона

Самоучитель по креативному веб-дизайну. Книга 2, стр.95

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





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









На рис. 6.28 показаны две Web-страницы с единственными в своем роде фо- новыми изображениями.

, Графические элементы, показанные в качестве фоновых изображений на рис.

6.28, были созданы с помощью программы редактирования изображений. Каж — дый мозаичный элемент фона, использованный в изображении слева, представ- ляет собой графическое изображение высотой 50 и шириной 800 пикселей. Изображения такого типа Web-дизайнеры называют спагетти-графикой {spaghetti

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



Полезные ссылки
Случайные записи
  • 13.03.2011">Руководство по actionscript. часть 3, стр. 107
  • 03.03.2011">Руководство по actionscript. часть 5, стр. 062
  • 06.09.2011">Обзор ноутбука Acer As 5534-512G25Mn
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.52
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.101
  • 04.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.9
  • 17.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.4
  • 25.02.2011">Руководство по actionscript. часть 6, стр. 094
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 123
  • 27.08.2010">Советы начинающему дизайнеру.
  • 27.02.2011">Руководство по actionscript. часть 6, стр. 023
  • 04.06.2011">О дизайне веб-сайта
  • 06.04.2010">Бесплатные шрифты
  • 21.03.2011">Руководство по actionscript. часть 2, стр. 047
  • 23.08.2011">Пиво не только вредно, но и полезно!
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...