главная    e-mail

Это демонстрационная страница








Заголовки

По традиции, прежде чем начать говорить о конкретной теме разберем для начала непосредственно эту страницу. Эта копия дизайна страницы одной из моих работ. Как вы вероятно догадались, тематика сайта посвящена художникам. Темный фон выбран не случайно - предполагается галерея, а фото картин гораздо лучше воспринимаются на темном фоне. Работа выполнена с применением CSS, размеры шрифта фиксированы, размер по горизонтали тоже фиксирован и ориентирован на видеорежим 800х600. Иногда можно услышать от профессиональных дизайнеров утверждение того, что не нужно фиксировать размер шрифта, - вдруг посетитель с ослабленным зрением и захочет увеличить размер шрифта. Извините, но не в этом случае: ведь здесь галерея, а как же он будет рассматривать картины?
    Работа выполнена при помощи таблиц. Здесь я применил комплексное обрамление, а слева в нижней части его вообще нет, что придает некую выраженность. Оранжевый в сочетании с темно-зеленым(темно-зеленый? - будем так называть) - скажем так, подсмотрел окраску пассажирских вагонов и решил, что сочетание самое удачное. Левая часть страницы содержит графическую навигацию. Почему именно в графике я применил "кнопки", что естественно увеличивает время загрузки страницы, - к сожалению качество прорисовки текста в HTML оставляет желать лучшего. Кнопки по событию onMouseOver/Out меняют цвет, реализовано при помощи массива images. Ну и соответственно в верхней части "шапка", а вот о ней, как о главной теме нашего разговора будем говорить подробнее.
    Заголовочный рисунок я решил делать в виде коллажа из работ этих художников, причем, для правой части специально подбирал более темные изображения. Левую же часть уравновесил изображением палитры. Палитру я пытался изобразить из материала типа "стекло", что придает эффект объемности. Буквы надписей и палитра заходят за линию, очерчивающую заголовочный коллаж, это опять же придает эффект переднего плана этих объектов.
    В последнее время часто можно встретить в верхней части объекты типа Flash, с соответствующей экзотической навигацией, но такие объекты чаще всего объемные (имеется в виду размер в килобайтах) долго загружаются, поэтому пока остается обычное графическое представление в виде графического файла GIF или JPEG. Графический заголовок также должен представлять тематику всего сайта или отдельной страницы. Например если "шапка" имеет какие-либо не соответствующие тематики текста элементы, - они воспринимаются как лишние.
    Теперь поговорим о также немаловажной части заголовка. Что поставить в между тегами <TITLE> . . . </TITLE>? Помните, что заголовок окна всегда на виду и он уж точно должен отражать тематику страницы. И еще, информация, заключенная между данными тегами является ключевыми словами для некоторых поисковых индексов, таких например как "AltaVista" и других. Поэтому хорошо продумайте текст заголовка. Совсем необязательно чтобы такая строка помещалась вся, но самая близко-относящаяся к соответствующей странице информация должна помещаться в начале, а затем вся остальная включая название всего сайта. В конце такой строки браузер приписывает свое название - а это разве нужная вам информация? Поэтому не стесняйтесь делать строку длинной. Раз уж мы начали разговор о заголовочной строке, нужно сказать еще и о статусной строке, - НИКОГДА НЕ ИЗМЕНЯЙТЕ ЭТУ СТРОКУ. Пользователь должен знать что в настоящее время загружается, закончена ли загрузка страницы. Тем более бегущая строка совсем неуместна в статусной строке особенно на корпоративных сайтах.
    Теперь поговорим о заголовках на самой текстовой странице. Стандартные HTML-заголовки - теги <H1> . . . <H6> имеют ряд недостатков: Текст заголовка отображается полужирным шрифтом, сам текст, как я уже и говорил имеет "зубчатые края"- с этим ничего не поделаешь. При выходе в свет HTML4 появилось мощное средство CSS (Каскадные таблицы стилей). Вот пример заголовков сформированных CSS:

Пример заголовка. font-weight : 100

Пример заголовка. font-weight : 700

Пример заголовка. font-weight : 900

Как видите, жирность шрифта может быть от 100 до 900, это дает возможность избавиться от одного из недостатков. Также при помощи CSS можно изменять и размер шрифта, а не ограничиваться 6-ю уровнями.

Пример заголовка. font-size : 7pt

Если хотите и межбуквенное расстояние тоже может изменяться:

Пример заголовка. letter-spacing : 6

Так, что CSS представляет широкие средства для оформления и дизайна Web-страниц. Нужно сказать еще и то, что не все атрибуты CSS работают одинаково в различных браузерах. Такие проблемы решаются для XML-документов, но эта область еще пока в развивающей стадии.
    Рассмотрим заголовок с точки зрения дизайна. Вы видели, что заголовок этой статьи выполнен курсивом. Почему я принял такое решение? Дело в том, что все надписи: навигация, текст в "шапке" выполнен курсивом, поэтому объект "Заголовок текстового блока" смотрелся бы "белой вороной". Не нужно пытаться выделять заголовки как нечто главное, нужно четко вписывать его в композицию. Представьте себе пестрый графический заголовок, да еще и с анимацией. Какое первое впечатление? А такое: этот объект кажется лишний и не к месту. Ведь это же заголовок а не демонстрация анимации. Заголовок должен включать смысловую информацию а не изобразительную. Я знаю много случаев, когда даже опытные дизайнеры не используют тег <H*>, а вот это как раз и зря. Опять же дело в том, что некоторые поисковые индексы, например "Rambler" обращают внимание именно на них, и именно там ищут ключевые слова. Опять же, делайте заголовки смысловыми но и в тоже время не тяжелыми: взгляд пользователя не должен останавливаться на заголовке, взгляд должен "Стартовать" от заголовка. Именно поэтому иногда заголовки позиционируют слева от текста.
    Теперь пару слов о "Инородных заголовках". Баннеры являются инородными заголовкоми, которые некоторые рекламодатели вынуждают помещать их рекламу в верхней части страницы. Если помещать "голый" баннер, без "посадочного места" - это зачастую портит внешний вид и соответственно дизайн страницы. Как решить такую проблему? Один только выход: делать в "шапке" специальное место для баннера так, чтобы инородный объект на портил дизайна страницы и вписывался в "шапку" так, чтобы он не выглядел обособленно и не привлекал чрезмерно внимание пользователя. Например я однажды видел очень неплохое решение: в "шапке" изображен коллаж цветной (в настоящее время очень популярны монохромные) с множеством прямых углов, в него очень четко вписывается баннер, а углы играют роль как бы "наслоений" объектов подобных баннеру. Здесь нет однозначных решений и путем эксперимента и интуиции можно с такой проблемой справиться безболезненно.
    Надеюсь я понятно изложил суть и назначение заголовков, которые можно выразить двумя словами: "Пишите проще".

WDstudio © 2000г.