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

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

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

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





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

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

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

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

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



ПРАКТИКУМ

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

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

com»Ximg src=»mailbox. gif»

border=»О»

width=»0″ height=»20″>





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

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

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

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

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

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

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

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



ПРАКТИКУМ

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





npnMep фона





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

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





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









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

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

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

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

ПРИМЕЧАНИЕ Поскольку фоновое изображение имеет ширину 800 пикселей, посетители,

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



Аналогично, изображение, использованное для создания фона второй Web — страницы на рис. 6.28, имеет высоту 50 и ширину 800 пикселей. Левые 200 пик — селей — светло-серого цвета и снабжены эффектом отбрасывания тени. Осталь — ные 600 пикселей — более светлого серого цвета. В результате фон приобретает трехмерный вид. В данном примере оба графических файла создают два видимых

раздела на Web-странице. В левой части Web-страницы можно поместить гипер —

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





текстовые ссылки на другие страницы на вашем сайте, а правую часть страницы

отвести под содержимое, которое вы предлагаете прочесть посетителям.

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

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

Создание прозрачности в GIF-изображениях

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

моугольником (bounding box)). К сожалению, иногда нужно, чтобы изображение было

отображено на фоне не ограничивающего прямоугольника, а чего-то другого.

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

ет тому, что находится «позади» изображения (обычно фон Web-страницы), про — свечивать сквозь само GIF-изображение. Эффект прозрачности можно

использовать для удаления «уродливой белой рамки» вокруг рисунка, как показа —

но на рис. 6.29.







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

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

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

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





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

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

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

Создать прозрачность несложно с помощью Photoshop 5.5 или выше, выпол — нив следующие действия:

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

2. Убедитесь, что на участках, которые вы хотите сделать прозрачными, при —

сутствует «скатертный узор» (говорящий о прозрачности), и выберите в меню File | Save for Web (Файл | Сохранить для Web).

3. Выберите формат GIF и отметьте флажок Transparency (Прозрачность), как показано на рис. 6.30.





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

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





ПРАКТИКУМ

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

ти в файле изображения. Например, чтобы создать прозрачный GIF-файл в

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

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

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

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

щелчка на цвете в изображении инструментом типа «пипетки11. Photoshop, с дру —

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

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



Извлечение полноразмерного изображения после щелчка на пиктограмме

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

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

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

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

Web-графика зачастую сохраняется с разрешением 72 ppi с целью соответствия разрешению типового монитора. Однако принтерам требуются более высокие

разрешения (обычно 300 dpi (dots per inch — точек на дюйм) и выше). По этим двум причинам сосредоточьте свои усилия на том, чтобы изображения на Web —

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





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

на бумаге.

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

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

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

не загружая его и не печатая.

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

14enKHHTe на картинке, чтобы загрузить полноразмерное

изображение



border=»0″

width=»50″ height=»25″X/a>







border=»0″

width=»50″ height=»25″X/a>