Веб-дизайн полностью

После стоящего несколько особняком заглавия (title) логично перейти к иерархии заголовков (headings) на самой странице. Вообще говоря, у большинства страниц никакой «иерархии» нет — после основного заголовка вверху страницы редко когда можно встретить заголовки второго и тем более третьего уровня. Отчасти поэтому стандартные в HTML заголовки шести уровней (теги Н 1—Н 6) редко используются за пределами академического стиля. (Верно и обратное: если вам требуется больше двух–трех уровней заголовков, это следует считать аргументом в пользу перехода к академическому стилю.) Однако в первую очередь непопулярность тегов Н* объясняется параметрами их оформления, принятыми по умолчанию в визуальных броузерах, — параметрами, чаще всего неприемлемыми для страниц с минимальными художественными запросами (к примеру, HI оформляется полужирным начертанием повышенного кегля).

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

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

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

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

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

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

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