Пере­ходя от общих вопросов устройства сайта и формата веб-страницы к отдельным элементам дизайна, мы должны прежде всего разбить эти элементы на два примерно равных по важности класса: текстовые блоки и графические вставки (этим словосочетанием я попытался перевести английское inline images).

Конечно, не так уж редко на веб-страницах встречаются и более экзотические объекты — поля бланков, Java-апплеты. Однако именно текст и графика остаются и всегда будут оставаться основными носителями информации в Ин­тернете. Все, что нужно знать веб-дизайнеру об оформлении текстовых блоков, собрано в одном из разделов этой главы (стр. 215). Создание веб-графики — тема более обшир­ная, и ей целиком посвящена гл. IV (стр. 243). Здесь же мне хотелось бы отметить, что противопоставление текста и графики, как частное проявление дуализма содержания и представления в дизайне, особенно наглядно проявляется именно в дизайне заголовков.

Заглавие

И все же первое, на что падает наш взгляд, просматрива­ющий страницу сверху вниз, - это не графическая вставка и даже не совсем текст, а заглавие, строка в заголовке окна броузера, в исходном коде страницы размеченная тегом TITLE.

Важность этого элемента часто недооценивается. Хотя за­главие и не относится к дизайну собственно страницы и вообще человеком замечается редко, для поисковых

200

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

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

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

Заголовки: логика

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

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

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

Заголовки: дизайн

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

202

в этой области. Заголовки могут также заимствовать кое-какие приемы и подходы дизайна логотипов (стр. 264).

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

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

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

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

203

своеобразным,   хотя   и   близким   к  рубленому   шрифтом остальных заголовков.

Разделители

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

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

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

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

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