Как
же превратить фон из вернейшего признака любительского, «побрякушечного»
оформления в инструмент профессионального веб-дизайна? Одновременно избавляясь
от назойливой повторяемости элементов фона и координируя фоновую графику с
содержимым переднего плана, мы приходим к нескольким типичным схемам
построения фонового слоя веб-страницы.
Самый
распространенный в настоящее время тип фоновых изображений — это фоны,
размножаемые только по одному измерению. Если взять в качестве фона
изображение, ширина которого с гарантией превосходит любую возможную ширину
окна броузера (двух тысяч пикселов хватит с лихвой), то о горизонтальной повторяемости
можно будет забыть, и броузеру останется лишь складывать копии этого
изображения в вертикальную стопку (рис. 60, б). Обеспечив однородность
горизонтальной фоновой полоски в вертикальном направлении, мы сможем
раскрашивать фон произвольно расположенными, лишенными какой бы то ни было
повторяемости вертикальными полосами с произвольной текстурой (эти полосы
могут быть плоскоцветными с резкими краями, а могут и пользоваться любыми горизонтальными
градиентами или пиксельными текстурами). Классический вариант — сравнительно
узкая (150—200 пикселов) полоса более темного цвета вдоль левого края окна,
служащая для размещения навигационной панели, логотипа, минибаннеров (стр.
287) и тому подобных элементов, повторяющихся на всех страницах сайта. Такой
фон выполняет практически ту же функцию, что и деление окна на фреймы.
263
Варьирование
ширин составляющих страницу полос и принципов их информационного наполнения
открывает широкий простор для творчества. Единственное, что объединяет все
решения с вертикальными фоновыми полосами, — их сонаправленность вектору
информационного развития: в отличие от ширины, высота веб-страницы ничем не
ограничена, поэтому информационная иерархия ее элементов выстраивается в
основном по вертикали. Вводя перпендикулярное этому вектору членение, полосатый
фон великолепно держит композицию страницы небольшого размера, однако на
сколько-нибудь протяженных страницах параллельность визуальной и информационной
вертикалей раздражает своей тавтологией, и композиции начинает не хватать
подчеркнуто поперечного начала и концовки.
Как
недостатков, так и, к сожалению, достоинств вертикально-полосатых фонов лишены
фоны, размножаемые только по горизонтали (и, соответственно, по вертикали
гарантированно превышающие высоту страницы — рис. 60, в). Такой
фон, обычно ограничивающийся горизонтальной полосой вдоль верхнего края окна, в
отличие от «вертикального» работает больше на эстетическом, чем на
информационном плане восприятия и не становится фактором, действующим на всем
протяжении страницы. Размещаемые на горизонтальной полосе навигационная панель
или заголовочная графика, собственно говоря, могли бы сами позаботиться о
фоновом цвете в своих окрестностях; роль фона страницы заключается лишь в том,
чтобы дотянуть цветовую заливку до рамки окна, придав этой части композиции
аккуратность и завершенность.
Последний
и, видимо, самый интересный тип фоновых изображений — неповторяющиеся фоны,
настолько большие, что броузеру не нужно размножать их ни по
горизонтали, ни по вертикали (рис. 60, г). Здесь и речи уже нет о каких бы то
ни было полосах: фоновый слой страницы может содержать любое изображение, как
угодно соотносящееся с передним планом. Как я уже упоминал
(стр. 236), такой неповторяющийся фон не может служить носителем информации и
обязан ограничиваться чисто декоративными функциями. Но и одно лишь избавление
от бессмысленного повторения «изразца» делает возможными на удивление
интересные эффекты.
Единственное,
хотя и довольно досадное техническое ограничение — невозможность обеспечить
совмещение
элементов
фона и переднего плана с точностью до одного 1 пиксела — определяет и самый
популярный мотив неповторяющихся фонов: бледные (чтобы не мешать чтению),
свободных очертаний формы, эффектно пользующиеся именно I
той аморфностью, противостоящей регулярности переднего плана, которая
отказывалась работать для «изразцовых» 1 фонов с материальными текстурами.
Дополнительное преимущество такого фона — то, что он не боится слишком 1
длинных страниц: в отличие от фона с горизонтальной полосой вверху окна,
повторение фонового «водяного знака» I через каждые несколько экранов
текста вполне допустимо, 1 а иногда даже желательно. 1
т
Характерен
с этой точки зрения пример 11. Здесь фоновое 1 изображение «дымка от чашки с
кофе» (кстати, клишированный образ для всего, что связано с языком Java)
прежде 1 всего визуализирует динамику восприятия информации, по сути, делая
видимыми «силовые линии» (стр. 167), ведущие от заголовка к визуалу
(изображение упаковки программы, которой посвящена страница) и от него снова к
тексту. Что особенно важно, фон этот сшивает в единое целое все актуальное
содержимое страницы (т. е. все, за исключением навигационной панели и других
элементов, повторяющихся на каждой странице сайта). Заметьте, что такой же по
форме (хотя иной по текстуре) «дымок» украшает и саму упаковку с программой.
Этот пример дает повод обсудить еще один технический
аспект полностраничных фонов: чтобы общий вес страницы с таким фоном не
выходил за рамки приличия, все фоновое изображение размерами в сотни и даже
тысячи (по высоте) пикселов должно уложиться не более чем в 20—30 Кб. Достичь
этого можно двумя путями: либо сжатием в JPEG с большими потерями, которые будут незаметны только для
«очень фотографических», размытых и к тому же темных по цвету изображений, либо
сжатием плоскоцветных изображений в GIF до 2—4-цветной гаммы (естественно, при этом придется
отказаться от анти-алиасинга, что опять-таки допустимо только при низком уровне
контраста). Если же в формате GIF нужно сохранить изображение с чуть более сложной
текстурой, можно «аппроксимировать» ее плоским цветом с помощью, например,
имитации типографского растра, как сделано в примере 11.