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

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

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

Мне осталось объяснить некоторые незначительные отличия рассмотренного выше дизайна от того, который вы найдете по адресу www.quiotix.com, и рассказать о некоторых особенностях реализации сайта.

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

Рис. 92 (см. цветную вкладку, стр.336)

Рис. 93 QEWS и news, или об относительности строчных и заглавных

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

Не обошлось и без конфликта между соображениями единообразия дизайна, требующими писать заголовки разделов только строчными буквами, и устоявшимся обозначением одного из продуктов фирмы — Quiotix Embedded Web Server, сокращенно QEWS. В споре между заказчиком, отстаивавшим привычное написание заглавными в колонтитуле соответствующего раздела сервера, и дизайнером, ратовавшим за единообразие строчных букв, был достигнут компромисс: заглавные «Q» и «Е» были уменьшены до размера строчных, а штрихи их пропорционально утолщены. Полученное в результате гибридное «QEWS» интересно сравнить с набранным натуральными строчными буквами заголовком «news» (рис. 93).

Как можно видеть на рис. 92 на цветной вкладке, внутритекстовые заголовки оформлены изменением начертания и цвета (желтый полужирный курсив), — но без изменения кегля, так как любой крупный шрифт вступил бы в немедленный конфликт с мелким шрифтом графического заголовка страницы. Узость колонки с текстом не позволяет использовать какие бы то ни было приемы верстки с горизонтальными втяжками, поэтому для списков с маркерами мне пришлось отказаться от использования тега UL , ограничившись добавлением в начало каждого абзаца списка маленького желтого графического прямоугольника. В конце 1997 года, когда создавался сайт, полагаться на использование CSS было еще рискованно; теперь для той же цели лучше было бы воспользоваться обычными тегами UL и LI , у которых с помощью CSS подавлены нежелательные отступы и маркеры по умолчанию заменены на графические вставки.

Этот раздел — не каталог URL-адресов, а альбом репродукций всех упоминавшихся ранее страниц, достойных внимания читателя и как примеры образцового дизайна, и как иллюстрации к обсуждавшимся в книге темам.