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

Не нужно бояться делать заглавия слишком длинными — длинное и подробное, пусть и обрезанное при выводе заглавие лучше, чем короткое и невразумительное. Прочтите свое заглавие и подумайте — достаточно ли оно осмысленно само по себе, вне контекста страницы?

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

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

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

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

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

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

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

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

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

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