Прозрачная» графика
Во второй версии графического формата GIF, разработанной в 1989 году, появилась возможность указывать прозрачный цвет, т.е. такой цвет, сквозь который видно все, что под ним находится. Но по-настоящему эта возможность стала использоваться лишь после того, как ее поддержка появилась в браузерах.
Прозрачный цвет позволяет создавать изображения произвольной формы - пикселы рисунка, имеющие этот 'цвет, при просмотре в браузере становятся невидимы. В связи с тем, что у большей части изображений прямоугольную форму имеет только пустой фон, а сам рисунок занимает область произвольной конфигурации в центре прямоугольного фона, такой режим отображения может, оказаться очень полезным.
Посмотрим, как можно использовать изображение с прозрачным цветом. Такое изображение BG.GIF вы можете найти на предлагаемом с книгой компакт-диске в папке \Web\Chap03\web. Вставим в Web-документ geoton.html рисунок с прозрачным цветом. В файле BG.GIF в указанной папке хранится та же фотография, что и в файле BG.JPG, с которым мы работали до сих пор, но записанная в формате GIF таким образом, что серый цвет фона при просмотре в браузере становится прозрачным.
> Откройте в программе Блокнот (Notepad) файл geoton.html.
> Отредактируйте код HTML файла, использовав в качестве значения атрибута background открывающего тега <body> адрес файла BG.GIF на вашем сайте так, чтобы этот элемент принял примерно такой вид:
<body bgcolor=blue text=yellow link=white vlink=yellow alink=red backgroundc"http://geoton.narod.ru/BG.GIF">
> Сохраните файл geoton.html и откройте его в браузере.
Пока нет подключения к Интернету фон открытого документа - однотонный синий, как это определено атрибутом bgcolor.
> Установите связь с Интернетом и скопируйте рисунок BG.GIF с компакт-диска в каталог вашего сайта, например, на geoton.narod.ru, как это описано в главе 2 этой книги.
> Обновите изображение в окне браузера. Браузер подключится к указанному в адресе сайту и начнет загрузку рисунка.
Когда рисунок будет загружен, сначала может показаться, что фотография девушки сделана на синем фоне. В действительности же синий цвет - это цвет фона страницы, а прежний серый цвет фона фотографии в браузере стал прозрачным и сквозь него виден синий фон документа. В этом можно убедиться, если изменить цвет фона страницы на любой другой, изменив значение атрибута bgcolor.
> Прервите связь с Интернетом.
> Сохраните рисунок фона в папке Web, щелкнув правой кнопкой мыши на рисунке в окне браузера и выбрав команду контекстного меню Сохранить фон как (Save Background As).
> Закройте программу просмотра и редактор Блокнот (Notepad).
Итак, мы познакомились с возможностями использования «прозрачной» графики GIF.. О том, как ее создавать, мы поговорим в следующих главах.
Графический текст
Многие Web-дизайнеры широко используют в своих проектах графический текст. Это обычно небольшие надписи, состоящие из одного или нескольких слов, оформленные с применением различных эффектов и сохраненные в файле одного из графических форматов. Такой графический файл с текстом вставляется в Web-документ как рисунок или как фон и используется в качестве заголовков, названий, логотипов, кнопок и т.д. На Рис. 3.11 показаны примеры таких надписей. Хотя подобная графика и увеличивает объем Web-страниц и время их загрузки, разумное ее использование придает сайту привлекательный профессиональный вид.
Графический текст, как и другие изображения, создается обычно в программах точечной графики и поэтому состоит из множества пикселов. Если размер шрифта надписей достаточно крупный, то на границах символов возникает резкий контраст, в результате чего очертания символов кажутся неровными, особенно в наклонных и закругленных .элементах (Рис. 3.12, вверху).
С помощью специального эффекта сглаживания (anti-aliasing) можно минимизировать контраст на границах символов. В результате их очертания станут более мягкими и надпись будет выглядеть более элегантно (Рис. 3,12, внизу). Однако, в тех случаях, когда надпись создается мелким шрифтом, использование сглаживания нежелательно, так как текст может стать плохо читаемым.
С приемами и способами создания графики и, в частности, графического текста мы познакомимся в следующей главе.