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

• Название: Искусство оформления сайта. Практическое пособие
• Автор: Сергей Бердышев
• Жанр: Прочая околокомпьтерная литература

Читатель держит в своих руках уникальный самоучитель по искусству веб-дизайна, позволяющий любому человеку, даже плохо знающему компьютер и Интернет, за несколько дней научиться создавать отличные, графически безупречно оформленные сетевые ресурсы: персональные, коммерческие, развлекательные, консультационные и т. д. В книге объясняется технология создания красочных надписей, геометрических фигур, собственных оригинальных курсоров, бегущих строк, прочих динамических эффектов и многого другого, что делает веб странички исключительно привлекательными. Настоящее пособие – одно из первых в России пособий, дополняемых учебным сайтом (http://obrazcats.narod.ru).

---

> обычные заголовки (Headings), которые получаются посредством простого введения кода в html-документ. С ними мы детально познакомимся в п. 3.3 пособия;

> трехмерные заголовки (3D Headings), получаемые путем использования функции фильтр, с которой мы познакомимся в той же части самоучителя;

> фоновые рисунки (Backgrounds), образующие базовый элемент темы странички. Иногда целесообразно применять вместо фонового рисунка фоновую заливку, что выгоднее, поскольку страничка становится легче и загружается быстрее;

> кнопки (Buttons), являющиеся частью навигации и по способу исполнения представляющие собой гифы;

> графические маркеры (Bullets, они же пульки), а также вообще маркированные и нумерованные списки, о которых мы тоже непременно поговорим;

> горизонтальные полосы-разделители (Dividers) могут быть очень красивы при задании им верной длины, ширины, цвета и локализации.

Реклама в виде баннеров и объявлений тоже может быть и, говоря прямо, должна быть частью дизайна интерфейса. Рекламные блоки нужно в небольших количествах органически интегрировать в композицию странички, добиваясь при этом смыслового соответствия тематике ресурса. Естественно, графическое оформление рекламы тоже должно быть на достаточно высоком уровне. При этом надлежит осторожно применять нефункциональные элементы оформления страницы: неактивные баннеры и объявления вводят в заблуждение.

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

Эго-составляющая сайта. Этому аспекту не всегда уделяется достаточное внимание теоретиками веб-дизайна, однако всякий сайт обязан иметь среди множества конструкционных элементов эго-составляющую, как называются в их совокупности средства самоидентификации и индивидуализации посетителя. Данные средства помогают юзеру реально ощутить свое присутствие на сайте. Подробнее о технике создания эго-составляющей будет рассказано в пункте 4.3 настоящего пособия, а пока просто перечислим такие средства. Во-первых, курсор. Это продолжение всемогущей руки юзера. Так пусть юзер отчетливо видит свою руку, ощущает ее движения: нужно сделать для своего сайта скромный, но оригинальный, по-своему необычный курсорчик. Например, на сайте по продаже раскрасок для малышей курсор может изображать карандаш или фломастер.[6]

Затем, если вам нужна устная реклама, полезно одну из страничек сайта отвести под коллекцию аватаров (авиков). Напомним, что аватарами называются такие потешные квадратные картинки, обычно анимэ,[7] которые используются чаще всего на форумах, блогах, в дневниках и т. д. в качестве юзерпика – портрета пользователя. Пусть люди берут ваши аватары и потом говорят о вас «под личиной» этих самых аватаров! Современные технологии позволяют сконструировать гиперактивные аватары, которые отнюдь не будут похожи на традиционные картинки-квадратики, но всем своим видом напоминают зверьков или человечков и умеют перемещаться в пространстве сайта вместе с посетителем, реагировать на действия гостя.

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

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

Самый лучший способ общения – это предоставить юзеру возможность высказать свое мнение, например, в процессе голосования. На этот случай сайт необходимо оборудовать формами для голосования. Еще больше возможностей для общения предоставляет гостевая книга, в которой люди не просто отвечают на ваши вопросы, но и записывают все свои мысли, какие только приходят им в голову. На коммерческих сайтах гостевая совершенно не нужна. Во-первых, в ней будут отмечаться ваши конкуренты, оставляя адреса своих ресурсов. А во-вторых, почитайте рассказ А. П. Чехова «Жалобная книга», добавьте в него современный мат и вообразите себе, что произойдет, когда такую ерунду увидят у вас на ресурсе потенциальные покупатели.

Форум – место для общения. Cобеседниками здесь выступают гости ресурса, они ведут между собой перепалку, дают советы и т. д. Форумом в Риме называлась базарная площадь, если кто подзабыл. Для определения слова «базарный» можете воспользоваться словарями Даля или Ожегова. Когда дойдете до конца списка, вообразите себе, какой негативный заряд приобретет ваш сайт благодаря форуму. Разумеется! Коммерческому ресурсу форум необходим столь же мало, как и гостевая книга.[8]

Поэтому гораздо более полезны для наших целей контактная информация и контактные формы. С их помощью каждый может связаться с владельцем сайта в любой момент, в том числе не покидая сайта. Контактная информация важнее контактной формы. Конечно, форма облегчает быстрое оформление заказа, но ведь не все в жизни сводится к купи-продайским отношениям! Пребывать на сайтах, где нет адреса электронной почты (e-mail), попросту противно. А что если возник очень важный вопрос, но вы не можете его сразу сформулировать? Или, быть может, нужно задать несколько вопросов, чтобы определиться в своем выборе, а это предполагает отправку нескольких писем. Адрес электронной почты должен присутствовать обязательно, равно как и почтовый адрес (для компаний). А злоупотребление контактными формами при отсутствии полноценной обратной связи гарантирует по большей части поступление невнятных заказов такого рода, как в известном анекдоте: «Мне, плз, ДВД с киной про того чувака, который еще снимался в том кине».

Гипертекст и язык HTML. Ранее читателя уже предупредили, что понадобится освоить азы языка HTML, на котором пишутся веб-странички. Аббревиатура HTML означает в расшифровке Hyper Text Markup Language, то есть язык разметки гипертекста. Сказанное нуждается в пояснениях. Дело в том, что WWW представляет собой не только паутину, но и технологию поддержания информационного потока, в основу которой положена гиперсвязь в виде системы переходов между источниками данных. Такая связь осуществляется за счет гипертекстовых ссылок, или, если называть их короче, гиперссылок. Ссылкой может служить фрагмент текста и рисунок. Причем на вашей html-страничке могут полностью отсутствовать переходы (гиперссылки), однако она все равно остается HTML-документом, поскольку написана на языке HTML, что и обеспечивает переход на нее по ссылке с других страничек сайта либо с поисковика (поисковой системы).

Найдем в Проводнике нашу ученическую страничку index.html и, выделив ее курсором, зададим команду Открыть с помощью… › Интернет-Эксплорер. Интернет-Эксплорер (Internet Explorer), как вам уже известно, представляет собой программу для просмотра веб-страничек. Эта программа определенно установлена на вашем ПК, поскольку она относится к числу стандартных.

Первое, что мы увидим, это непонятный набор символов вместо нашего текста. Так передаются Эксплорером русские буквы, и подобная передача нас, естественно, не устраивает. Тогда выполним первую в нашей жизни работу с HTML языком. Для начала пройдем путь Страница › Кодировка (или Вид › Кодировка). Тогда мы увидим, что наш файл имеет кодировку ISO. Именно она и делает русские шрифты непонятными для компьютера. Выберем другую кодировку – «Кириллица (Windows)». Установив ее, посмотрим лишний раз на ученическую страничку: теперь она в нормальном виде (рис. 6). И мы можем смело пройти путь Страница › Просмотр HTML-кода (или Вид › Просмотр HTML-кода).