Искусство оформления сайта. Практическое пособие - Сергей Бердышев

А пока сделаю ценное предупреждение. Все эти дожди, листопады, метели и т. д. страшно мешают читать текст. Кое-кого попросту раздражают. А на некоторых броузерах еще и не видны вдобавок. Вместо них появляется суровое предупреждение: «Активное содержимое страницы может ПОВРЕДИТЬ ВАШ КОМПЬЮТЕР» (хотя на самом деле не может). Неопытный юзер на ваш сайт после пережитого испуга ни за что в жизни не вернется.

3.3. Сила слова

Сеть – это область текстовых массивов, разбитых на маленькие блоки. Подача внушительного массива на одной страничке неоправданна, если только нам заранее не известно, что читатель намеревается не наслаждаться данным текстом, а работать с ним. Скажем, текст какого-нибудь закона проще выложить на одной страничке, чтобы бедный читатель не метался со ссылки на ссылку, а спокойно скопировал себе весь закон за один присест, чтобы потом, отключив модем, внимательно изучить каждый пункт данного правового акта.

Всегда на страничке должна преобладать информация, представляющая интерес для пользователя. Она должна бросаться в глаза и быть пространственно обособленной от прочих сообщений. Это еще одна причина, почему не следует бояться пустых, «белых» областей, считая их бесполезной тратой пространства. Вдобавок к тому слова и картинки должны визуально уравновешивать друг друга, иначе композиция страницы окажется дисгармоничной. Дело в том, что каждый объект на белом или цветном полотне обладает визуальным «весом», а потому ищет противовес.

Взаимное размещение отдельных контентов также требует соблюдения баланса. Опыт газетной верстки показывает высокую эффективность шаблона, разработанного советником по стратегиям Всемирной газетной ассоциации Дж. Чишольмом.[14] Опираясь на данные психологии, Чишольм составил карту распределения объема внимания на разных участках страницы (бумажной и электронной). Стопроцентной эффективностью при беглом просмотре не обладает ни один участок, однако есть наиболее продуктивные, которые способны заинтересовать читателя. Образец этой карты (на примере странички busbook.narod.ru/baikal.html) рассмотрен на рис. 17.

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

Нужно помнить о том, что не каждый компьютер в состоянии поддерживать экзотические шрифты. Вот почему следует пользоваться наиболее простыми и расхожими – такими, как Arial, Times New Roman, Tahoma, Verdana. Для пущей самобытности стиля можно применять различные гарнитуры, то есть вариации в рамках одного шрифта (например, Arial Black для заголовков). Вдобавок стоит использовать, где положено, разные начертания – курсив, полужирный и полужирный курсив, кроме подчеркнутого, поскольку последний напоминает гиперссылку и станет вводить юзеров в заблуждение на грани раздражения. Веб-дизайнеру не помешает изучать принципы тайп-дизайна (шрифтового дизайна), подсказывающие, как правильно использовать шрифты, чтобы обеспечить адекватное восприятие текста и поддержать заинтересованность читателя. Подбор шрифтов осуществляется с учетом используемых основных элементов текста.

К основным текстовым элементам относятся:

1) текст документа;

2) заголовок;

3) девиз, слоган, цитата;

4) контактные данные.

Базовый текст документа желательно набирать кеглем 10–14. Это область стандартных решений: легкочитаемые шрифты, преимущественно без засечек: Arial, Helvetica, Times New Roman.

Заголовок рекомендуется выполнять более крупным шрифтом, привлекающим внимание. В данном случае можно побаловаться трудно читаемым шрифтом с неординарной гарнитурой (Helvetica, Tahoma, Arial – без засечек, Baltica – c засечками). Впрочем, разумнее всего ставить заголовки в виде изображений или кодировать их на языке HTML, о чем мы поговорим ниже.

Девизы, слоганы и цитаты принято набирать шрифтами на 1–2 пункта меньше базового текста. Поскольку буквы такого размера мелки, их лучше пускать шрифтом без засечек – Helios, Helvetica, Arial, Tahoma. Показано пускать текст цитат курсивом, а слоганов – еще и полужирным курсивом, чтобы он стал более заметен.

Контактные данные включают в себя адреса, телефоны, имена и тому подобную информацию. Обычно эти сведения набираются шрифтом на 1–2 пункта больше базового текста, но допустимо пускать их такими же по размеру, однако при этом с полужирным начертанием.

Иногда полезно использовать в тексте разные цвета. Но такой трюк эффективен лишь в отношении заголовков двух высших уровней. В остальном показано избегать использования расцвеченных шрифтов. Тем более нежелательно применять цветные буквы для передачи смысла текста. Связано это с неадекватностью отображения цветов на разных дисплеях.

Современные технологии позволяют подстраивать сайт под кегль (размер) и вид шрифта, удобные и доступные для пользователя. Новичку осилить подобные хитрости с ходу не удастся, поскольку для этого требуется изучение языка CSS. Вдобавок в ходе применения стандартных шрифтов подобные трудности вряд ли возникнут. Вот почему пока ограничимся только одним несложным кодом. Допустим, некоторые заголовки в тексте выполнены неброским, но красивым шрифтом Copperlate Gothic Bold синего цвета. Этот шрифт встречается едва ли не повсеместно, однако найдется немало юзеров, у которых ПК отобразить его не умеет. Для таких посетителей сайта пишется стиль:

‹style›

‹!-

Example{font-family: Copperlate Gothic Bold, Tahoma;

font-weight; bolder; font-size: 20 pt;

color: blue}

– ›

‹/style›

Запись font-family показывает, что в отсутствии шрифта Copperlate Gothic Bold броузеру надлежит применять шрифт Tahoma.

Тот или иной шрифт по своему графическому исполнению способен вызывать у читателя определенные ассоциации, которые разумный веб-дизайнер использует для усиления эффекта, производимого сайтом на юзера. Название игры, громкая реклама, дружеское объявление, строгий отчет, сухая информационная записка – все они по большому счету нуждаются в старательно подобранных шрифтах. Если дизайнеру столь важно эмоциональное воздействие шрифта, то нужно создать надпись в CorelDraw, Corel Paint Shop или любой другой приспособленной для этих целей программе, а затем экспортировать ее как рисунок, который будет вставлен на сайте вместо заголовка. Разумеется, такой рисунок должен сопровождаться альтернативным текстом, передающим выполненную вами надпись.

Аналогичным образом создается такой графический элемент, как буквица, полезный в сказках и статьях о древней культуре какого-либо народа. Буквица – это большая буква, начинающая первое слово какого-либо текста, красочно расписанная и украшенная орнаментом, в особенности растительным. Такая буквица создается в графическом редакторе и сохраняется как гиф, который потом вставляется по следующему коду

‹img src=“images.files/bukvica_s.gif” width=“ 120” height=“ 110” border=“ 0” align=“left” аlt=“С”›коро сказка сказывается, да не скоро сайт верстается…

Настоятельно рекомендуется установка атрибута align=“left”, чтобы текст обтекал буквицу. Обязательно поставить альтернативный текст, чтобы при медленной загрузке рисунка или при отключенной графике не приходилось гадать, какую букву изображает гиф.

Действенный способ обойтись без какой-либо графики, но при этом создать оригинальный текст, – применение фильтров и кодирование заголовков. Начнем с самого простого – закодируем заголовок. Для этого достаточно выделить в HTML нужный текст парными тэгами заголовков: ‹Н1›, ‹Н2›, ‹НЗ›, ‹Н4›, ‹Н5› и ‹Н6› (показаны в порядке убывания без закрывающих тэгов). Использовать заголовки выгоднее потому, что их обожают поисковики. Обилие заголовков с интересными фразами гарантирует приток к вам на ресурс посетителей. То есть заголовки для поисковых роботов имеют такое же значение, как и ключевые слова, при этом значимость заголовка тем выше, чем меньше его индекс: заголовок Н1 значит для робота больше, чем заголовок Н2 и уж тем более Н6. Каждому заголовку можно придать свойства, добавив атрибут style с подходящими значениями:

‹H2 style=“font-family: вид шрифта; font-size: размер (рекомендуется в процентах от базового); color: ваш цвет на английском”›ЗАГОЛОВОК‹/H2›

А теперь рассмотрим применение фильтров, благодаря которым мы можем получить своеобразные надписи. Из наиболее востребованных фильтров нужно назвать Blur, Shadow, DropShadow, FlipH, FlipV, Wave, Mask и Glow. Фильтр Blur придает буквам объемность, Shadow и DropShadow – разные виды теней, FlipH и FlipV – обеспечивают поворот слова (фразы) по горизонтали и вертикали соответственно, Wave – волнистость, Mask – показывает шрифт таким, словно бы он выделен курсором, а Glow – размытость краев. Ниже приводится запись этих фильтров, а на рис. 18 показан готовый результат. Все коды даны для надписи, пущенной по центру с параметрами width – 400, height – 60, font-size (размер) – 30pt, font-weight (начертание) – bold (полужирный), color – green (зеленый цвет).