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

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

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

---

Все, что было названо в этом перечне, в том или ином составе присутствует на современных сайтах. И вряд ли можно говорить о пределе «веб-синтеза». Сегодня каждый веб-сайт – это электронный журнал, который поступает на ваш компьютер через Сеть WWW (World Wide Web, то есть Всемирная Паутина). От веб-мастера требуется довести потенциал управления ресурсом до уровня, при котором навигация становится столь же легкой и приятной, как перелистывание настоящего журнала – интересного и хорошо сверстанного, чего можно добиться, сокращая объем бесполезных мультимедиа и рекламы. И вместе с тем сайт есть инструмент маркетинга, поскольку сама по себе Сеть, как среда, с которой веб-узел жизненно связан, представляет собой совершенно особое поле ведения дел, персонального развития и межличностного взаимодействия.

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

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

Ответим для себя на вопрос, что такое файл. Со школьной скамьи мы знаем, что всякая электронная информация воспринимается машиной как последовательность нуликов и единичек. Например, набранное заглавными буквами название сайта «WWW.ONLYJOLIE.COM», посвященного блистательной американской кинозвезде А. Джоли, в двоичном коде примет вид 01010111 01010111 01010111 00101110 01001111 01001110 01001100 01011001 01001010 01001111 01001100 01001001 01000101 00101110 01000011 01001111 01001101. Поскольку цепочки из одинаковых цифр могли бы легко перепутаться между собой в памяти ПК, им придают вид файла.[2] Файл – это поименованный комплекс информации (нуликов и единичек) на электронном носителе, будь то старая добрая дискета, CD– или DVD-диск, флешка, жесткий диск (винчестер) компьютера, серверные компьютеры во Всемирной Сети.

В зависимости от того, какой род информации содержит файл, он приобретает присущий только ему формат. Вы уже, конечно, знаете, что текстовые файлы носят форматы *.doc («документ Winword») и *.txt (текстовый документ, «документ Блокнот»[3]). «Хвостик» после имени файла, отделяемый точкой, носит название расширения. Веб-дизайн, будучи синтетическим видом искусства, совмещает в себе:

> фотографии, которые существуют в виде файлов с расширением *.jpg (*.jpeg) или, значительно реже, *.gif (другие форматы графических файлов в Сети не применяются);

> рисунки, графику, живопись, которые существуют в виде файлов с теми же расширениями *.jpg и *.gif;

> динамическую графику, которая существует в виде файлов с расширением *.gif, а также *.html, *.mhtml, *.xhtml и т. д. (файлы типа «а также» – html, mhtml, xhtml и т. д. – не кодируют изображения, но могут придавать динамические эффекты статичным картинкам GIF и JPEG);

> тексты, которые существуют в виде файлов с расширением *.html, *.mhtml, *.xhtml и т. д.;

> а в последнее время – музыку и кино, которые существуют в виде файлов с самыми разными форматами (а значит, и расширениями), но довольно часто с расширением *.wav и *.avi.

Таким образом, сайт представляет собой совокупность связанных между собой по журнальному принципу веб-страничек (отчего он и называется веб-узлом), а каждая из таких страничек является совокупностью скрепленных между собой файлов – графических, звуковых и прочих. Основу, тело странички составляет файл, приспособленный для несения текста и скрепляющий все остальные файлы. В современном Интернете он чаще всего имеет формат HTML или PHP, но может обладать расширением *.mhtml, *.xhtml и т. д. Мы с вами будем учиться созданию наиболее простых и одновременно наиболее широко представленных в Сети страничек с расширением *.html. Осилить конструирование остальных будет несложно самостоятельно после знакомства с html-форматом. Почему? Да потому, что в основу веб-дизайна изначально положен особый язык программирования, который так и называется – HTML (подробнее о нем см. пункты 1.2 и 3.2 настоящего пособия).

Откройте на своем ПК программу Проводник и найдите там нашу первую ученическую страничку index. Посмотрим, какое расширение стоит после названия «index». В Проводнике значится index.wpm. Это расширение, как и многие другие, представляет собой аббревиатуру. В данном случае сокращение выполняется от названия программы Web Page Maker. То есть wpm-файлы предназначены для создания и редактирования в программе Web Page Maker. В нашем списке интернетовских файлов этот формат не упоминался, что правильно. Загрузить на свой сайт wpm-страничку вы пока не сможете. Для этого нужно экспортировать ее в html-формат, что мы и делаем, открыв ее в «родном» конструкторе[4] и выбрав команду Export to HTML в меню File (см. рис. 3). Для экспортируемого html-файла требуется указать путь к папочке, где сверстанная веб-страничка и будет благополучно храниться. Пока на этом остановим разработку нашего проекта и продолжим чтение.

Рис. 3. Экспорт wpm-файла в формат HTML

1.2. Веб-дизайн как искусство

Задача веб-дизайнера, как мы поняли, состоит в том, чтобы сделать красивый, привлекательный, очень-очень интересный и удобный для посетителя сайт. Веб-дизайн как ремесло отвечает на чисто технический вопрос, КАК сделать красиво. Веб-дизайн как искусство отвечает на эстетический вопрос, ПОЧЕМУ именно таким путем мы добиваемся привлекательности своего ресурса.

Итак, попробуем найти ответ на каверзный вопрос ПОЧЕМУ. Прежде всего, красиво – это когда предельно понятно и максимально удобно для использования. Представьте себе, что вы пришли в музей посмотреть на полотно великого Рембрандта. Но в музее никто и не подумал включить свет, в результате чего картина тонет в темноте. Вы знаете, что полотно прекрасно, но почувствовать эту красоту не можете. Спрашивается, почему? Да потому, что вам неудобно рассматривать произведения живописи в потемках. Точно так же дела обстоят и с сайтами. Даже очень хорошие странички можно испортить, если сделать их неудобными для ознакомления.

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

> важные тексты и картинки должны быть приметны;

> неважные тексты и картинки не должны быть свалены в кучу, они меньше нуждаются в приметности, чем важные, но не меньше – в упорядоченности;

> посетителю должны быть хорошо видны все переходы на другие странички и сайты;

> посетителю должно быть понятно, в какой секции (в каком разделе) сайта он сейчас находится;

> читателю должна быть предельно ясна тема странички.

Теперь назовем правила, которые действуют в отношении комфортности веб-узла, которая предполагает легкость ориентации в пространстве сайта:

> посетителю должны быть хорошо видны и доступны переходы во все разделы сайта, что называется удобной навигацией по сайту;

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