Веб-дизайн - Дмитрий Кирсанов

В то же время нужно отдавать себе отчет в том, что теги Н*, как и большинство тегов академического стиля, являются в гораздо большей степени средствами логической, нежели визуальной, разметки (стр. 22). Поэтому пользоваться ими (даже в том случае, когда на странице всего один заголовок) следует в первую очередь ради улучшения переносимости вашего документа, для приведения его разметки в соответствие с его логической структурой, а не для сопутствующих визуальных эффектов (вроде изменения шрифта).

Стандарт HTML не возбраняет помещать между <Н 1> и </Н 1> не строки текста, а графические изображения заголовков со всеми требуемыми причудами оформления: alt–тексты которых (стр. 35) будут играть роль заголовков в неграфических броузерах. Такое решение — казалось бы, удовлетворительное и с логической, и с визуальной точек зрения — не всегда выполнимо из–за нежелательных вертикальных отступов, которые оба графических броузера оставляют вокруг элементов Н* (из чего бы они ни состояли — из текста или изображений). Единственный законный способ изменять параметры оформления стандартных тегов, включая теги заголовков, — использование CSS; к сожалению, из–за несовершенств реализации подавить эти отступы помощью CSS удается только в одном из броузеров bmsie).

Надо сказать, что стандартные заголовки HTML не удовлетворяют многим требованиям, важным именно для академического типа документов, — так, броузер не может самостоятельно нумеровать их, из них невозможно собрать автоматически обновляемое оглавление документа. Все эти возможности доступны для XML-документов со стилевыми спецификациями на XSL (стр. 53).

ЗАГОЛОВКИ: ДИЗАЙН

Рассмотрим теперь самый распространенный и дающий максимум творческой свободы вариант — графическую вставку в роли заголовка. Обычно каждый такой заголовок распадается на две части: собственно текст, украшенный подбором шрифтов, цветов, текстур и графических эффектов, и околозаголовочная графика (этот компонент может отсутствовать) — фотография или рисунок, а для главного заголовка страницы нередко и логотип сайта или фирмы. Хотя популярные в современном дизайне графические темы — предмет рассмотрения следующей главы, здесь все же стоит отметить основные тенденции, существующие в этой области. Заголовки могут также заимствовать кое–какие приемы и подходы дизайна логотипов (стр. 264).

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

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

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

В примере 4 основное содержимое страницы состоит из нескольких заголовков, «сшитых» в единое целое активными вертикальными и горизонтальными линиями, строгой системой выравнивании, общим шрифтом и ярки» фотографическим фоном (он же визуал), чья второплановость подчеркнута размывкой. Здесь же, кстати, мы видим редкий пример гармонизации вычурного каллиграфически–рукописного шрифта (надпись Tori Amos) с достаточно своеобразным, хотя и близким к рубленому шрифтом остальных заголовков.

РАЗДЕЛИТЕЛИ

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

Очень часто вместо заголовков следующих уровней на веб–страницах используются нетекстовые разделители. Академический HTML предлагает для этой цели тег HR, призванный отделять друг от друга разнородные фрагменты текста. Пытаясь придать визуальную привлекательность этому, вообще говоря, чисто логическому средству разметки, авторы первого графического броузера Netscape поступили так, как поступил бы на их месте любой дизайнер–любитель: сделали соответствующие этому тегу горизонтальные линейки псев-Ютрехмерными — не то выпуклыми, не то вдавленными «плоскость страницы. Создатели MSIE заимствовали этот прием оформления, хотя и в менее «агрессивном» варианте (рис. 48).

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

Рис. 48 Псевдотрехмерность под микроскопом: концы линеек HR в NC (слева) и MSIE (справа)

Поэтому, сказав «а», создатели броузера Netscape вынуждены были сказать и «б» — им пришлось сразу же добавить к тегу HR атрибут noshade, дающий простую плоскую линейку без каких бы то ни было украшений (если не считать закругленных концов). Тем не менее даже и плоская, подобранная по толщине (атрибут size) и длине (атрибут width) линейка вряд ли станет украшением вашей страницы — и не только с эстетической, но и с логической точки зрения. Очень часто желание поставить <HR> есть верный признак того, что либо визуальная, либо содержательная структура страницы в этом месте недостаточно продумана.

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

БАННЕРЫ

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

К сожалению, чаще всего веб–дизайнер не имеет никакой власти над тем, какие баннеры будут вывешены на его страницах; для него баннер есть лишь прямоугольный «черный ящик» стандартного размера (стр. 277), который он обязан разместить на видном месте страницы и который едва ли не по всем своим аспектам — формам, цветам, шрифтам, текстурам — почти наверняка окажется кричащим диссонансом в сложившейся композиции. Даже если автором баннера будет профессиональный дизайнер (на то не очень–то стоит рассчитывать), с вашей собственной композицией его творение, скорее всего, не будет иметь ничего общего.