Веб-дизайн

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

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

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

СТУПЕНЬКИ РИГИДНОСТИ

Интересно проследить, как меняется отношение страницы к описанным ограничениям формата в зависимости от назначения сайта и стиля дизайна.

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

Следующая ступень после академического стиля — так называемый «резиновый» дизайн, при котором для размещения текста и изображений уже используются таблицы (стр. 234), но ширина этих таблиц задана не в пикселах, а в процентах от ширины окна. Это позволяет оставлять вокруг текста поля, значительно облегчающие чтение, верстать текст в несколько колонок и достаточно свободно размещать графику. Главное же достоинство «резиновой» страницы — то, что она позволяет столбцам текста свободно растягиваться и сжиматься, тем самым и приспосабливаясь к минимальным (и даже меньше минимальных) размерам экрана, и эффективно используя пространство на экранах шире среднего. Это свойство «резиновых» страниц особенно ценно для контент–сайтов (пример — первая страница сайта www.webreference.com).

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