Текст книги "Искусство оформления сайта. Практическое пособие"

Глава 4. Зрелищность сайта

4.1. Темы (фоновые рисунки)

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

Программки типа W.Y.S.I.W.Y.G. предлагают веб-программистам коллекцию шаблонов, готовых решений, включающих в себя разнообразные, подчас весьма оригинальные и продвинутые темы. Стоит ли пользоваться этими шаблонами? Скажем так: их нужно изучать и развивать. Даже поверхностное знакомство с сайтом «Образованные котята», построенном шутки ради на основе нашего ученического дизайна, покажет вам, что из шаблонов вырастают смелые и красивые идеи, весьма простые в исполнении. А самое главное: обилие деталей в веб-конструкторе способствует развитию обостренного восприятия дисгармонии. В процессе учебы нужно как можно чаще пользоваться готовыми темами, кнопками, иконками и т. д., комбинируя их и так и эдак, а потом критически изучая свое творение. Забракованные образцы подскажут, в каком направлении двигаться опасно, а это поспособствует отточенности вкуса и улучшению виртуальной сенсорики.

Проведем аналогию. Самообразование веб-дизайнера похоже на следствие пса Фу-фу из забавных детских детективов Е. Матюшкиной и Е. Оковитой, который разыскивал статую собаки с алмазными глазами. Если вы давно не читали своему ребенку сказок, то напомню, что эта статуя изготовлена из совершенно необычных материалов. У нее были:

1) глаз-алмаз, зубы золотые, нервы железные, шерсть шелковая;

2) голова чугунная, лоб медный, сердце каменное, мышцы стальные, ноги ватные;

3) уши-локаторы, нос по ветру, губа не дура, лапы загребущие, хвост пистолетом.

Я намеренно, чтобы не тратить впустую времени, разбил признаки на три разнокачественные группы. Если бы статуя № 3509 обладала качествами только первой или только третьей группы, то имела бы мало-мальски привлекательный вид благодаря оптимальному сочетанию признаков. Так, нос по ветру гармонирует с хвостом пистолетом, а глаз-алмаз – с золотыми зубами. Но смешанные вместе, вдобавок отягощенные медным лбом и прочими негативными качествами, эти признаки не слишком-то красили статую. Отчего Кролик, услышав описание собаки с алмазными глазами, недовольно хмыкнул: «Вот урод». Чтобы такого не говорили о вашем ресурсе, требуется выбирать качества из позитивных групп (первой или третьей), но только в строго сбалансированном отношении, не путая нервы железные с губой не дурой. А от негативных качеств из второй группы придется вовсе отказаться.

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

Другой ценный «софт» – Xara Webstyle, программа обладающая набором готовых шаблонов под различные визуальные элементы веб-страницы, которые наделены высокой гибкостью и вариабельностью. Задача дизайнера при работе в Xara Webstyle состоит не в том, чтобы комбинировать готовые решения, а в том, чтобы изменять приглянувшийся макет до такой степени, когда возникает неповторимая индивидуальность стиля. Библиотека программы включает в себя баннеры, навигационные панели и меню, кнопки, фоны, логотипы, объемные заголовки, пульки, разделительные полосы. Xara Webstyle предполагает вариабельность стандартных настроек цвета, текстуры, сечения, тени, размера, шрифтов, начертания и прочих свойств объектов.

И напоследок назовем такой изумительный продукт, как Pixarra Twisted Brush, которую на жаргоне ласково называют «Кисточками». В «Кисточках», как недвусмысленно следует из их сленгового наименования, соль заключается в богатом выборе кистей для рисования – их более 2000 штук, сочетающихся с 70 палитрами и 100 фильтрами. Здесь неудобно рисовать отдельные элементы интерфейса, зато чрезвычайно просто получить великолепный фон (background).[16]16
  Большую коллекцию готовых фоновых рисунков, выполненных в Pixarra Twisted Brush, можно найти на сайте «Образованные котята» по адресу http://obrazcats.narod.ru/pages/txt/themes.html


[Закрыть] Pixarra удобна тем, что в ней легко управлять часто используемыми кистями, собирая их в активные коллекции. Например, у меня на компьютере имеются следующие шесть наборов:

1) акварель;

2) blob (эффект объема);

3) KW Foliage Plus (растительность);

4) пастель;

5) patterns – based brushes (управление выбранной текстурой);

6) космос.

Выбор кистей осуществляется из общей коллекции, после чего необходимая кисточка заносится в тот или иной, заранее открытый набор. Формирование такого набора показано на рис. 22.

Рис. 22. Формирование рабочего набора кистей в программе Pixarra Twisted Brush

4.2. Иллюстрации и видео

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

Напомню, что весом файла называется его объем в байтах. Веб-страница представляет собой совокупность файлов – в первую очередь html и графических. Наращивание веса происходит почти исключительно за счет графики. Специалисты утверждают, что файл с весом от 170 Кб и выше открывается дольше 1 мин. Понятно, что ни один потенциальный клиент не станет ждать целую минуту. Он просто продолжит поиск, чтобы выйти на сайт, который открывается быстро. (Согласится ждать медленно открывающуюся страничку только любитель редких текстов, которому очень хочется почитать выставленную у вас электронную книгу.) Стало быть, вес одной странички не должен превышать 100–170 Кб, а в оптимуме должен составлять 60–80 Кб или даже меньше.

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

Другим простым графическим элементом является кодируемая горизонтальная линия. Чтобы она появилась на страничке, достаточно набрать код ‹hr›. Добавляя этому непарному тэгу атрибуты width (длина), align (расположение) и size (толщина, размер), мы можем изменять свойства линии и даже превращать ее в геометрические фигурки. Обычно длина линии задается в процентах от величины страницы. Оптимумом для разделяющей черты считается значение 70–80 %. Но допустимо задавать длину в пикселях. При этом мы обретаем возможность нарисовать фигурку. Так, атрибуты width=60 и size=20 дают нам прямоугольник, а атрибуты width=50 и size=50 – квадрат. Цвет линии и фигурок на ее основе задается следующим образом: ‹hr noshade width=… size=… color=“red (blue, etc.)”›.

Вставка настоящего рисунка в веб-документ тоже предельно проста, она осуществляется посредством навигационной панели Web Page Maker, где есть иконка Image (или через меню Insert › Image – «Вставка › Изображение»). Но нужно уметь и пользоваться кодом. Тем более что он несложен, основывается на использовании одинарного тега ‹img›. Рассмотрим пример: ‹img src=“images/very_beautiful_girl.jpg"›: на страничке задан рисунок very_beautiful_girl.jpg, который броузер должен открыть из папки images. Атрибут src означает описание, дескрипцию тэга. Сейчас описание у нас никуда не годится, зададим дополнительные атрибуты: ‹img width=536 height=427 border=0 src=“images/very_beautiful_girl.jpg"›. Теперь у нас есть ширина, высота рисунка и толщина обрамляющей его рамки.

Эксперимента ради попробуем изменить толщину границы, напишем вместо нуля 10. Страшновато получилось (см. рис. 23, a), вот почему лучше нам добавить к рисунку новый тэг ‹div› и написать вот такую штуку: ‹div style=“border:#808080 16px window-inset"›‹img width=536 height=427 border=0 src=“images/very_beautiful_girl.jpg"›‹/div›. Тэг парный, открывающий и закрывающий свойства пространства вокруг рисунка. В данном случае, через значение border атрибута style, мы выбрали границу толщиной 16 пикселей, с форматом window-inset (оконная рама) и с расцветкой #808080 (один из оттенков серого). Мило, но выбранная нами рамка не подходит картинке по размеру (рис. 23, b). Вот почему проще будет задать указанные свойства через наш веб-конструктор. Откроем Web Page Maker, создадим новый документ, импортируем в него картинку, выделим ее и кликнем на иконку свойств Properties. Выбираем закладку Colors and Borders – заливки и границы, здесь выставляем параметры рамочки (рис. 24).

Рис. 23. Неудачные решения для рамочки

Рис. 24. Решение для рамочки от Web Page Maker

Пока мы в «Свойствах», не забудем поставить для этой картинки альтернативный текст. Выберем закладку Image и запишем название рисунка в окошечке Alt text.

Примечательно, что тэг ‹img› тоже имеет собственный атрибут align=. Когда рисунок находится в блоке ‹div›, это не особенно важно, смысл этот атрибут приобретает при внедрении рисунка в текст. Различаются следующие варианты расположения картинки:

align=“left” – текст обтекает рисунок, который располагается слева;

align=“right” – текст обтекает рисунок, который располагается справа;

align=“top” (или “texttop”) – рисунок внутри текстовой строки, его верхняя граница совпадает с верхней границей букв текста;

align=“middle” (или “absmiddle”) – рисунок внутри текстовой строки, которая вертикально выравнивается по центру рисунка;

align=“bottom” (также “absbottom” либо “baseline”) – рисунок внутри текстовой строки, и его нижняя граница совпадает с нижней границей букв текста.

А для сохранения небольших пустых промежутков между текстом и картинкой надлежит использовать атрибуты hspace= и vsрасе=, задающие свободное пространство вокруг картинки соответственно по горизонтали и по вертикали.

Теперь о параметрах рисунка. Четкость растрового изображения зависит от числа точек на единицу площади. Разрешение любой графики для сети может иметь лишь два значения – 72 и 96 dpi, то есть точек на кв. дюйм. Это разрешение выставляется в графическом редакторе через функцию Imige Size (размер рисунка). Иногда приходится видеть, как броузеры охотно открывают рисунки с невообразимым разрешением, но вам бездумно надеяться на фарт не следует. Максимальное значение длины и/или ширины картинки должно составлять 400 пкс, причем желательно ограничиться 310 пкс. Рисунок, имеющий длину или ширину около 500 пкс и свыше, считается гигантским. Такие иллюстрации надо помещать только в фотогалерею.

Перед размещением на веб-страничке всякий рисунок следует обработать для осветления и добавления контрастности, в противном случае он скорее всего покажется посетителю темным размазанным пятном. В большинстве графических редакторов, и особенно в Фотошопе, осветление наилучшим задается посредством «кривых» (рис. 25). Для этого требуется пройти путь Imige › Adjustments › Curves (Изображения › Настройки › Кривые). Осветление рисунка производится в режиме RGB. В дальнейшем производится повышение контрастности, за счет чего возрастает резкость и четкость изображения (рис. 26). В Фотошопе контраст увеличивают, проходя путь Imige › Adjustments › Brightness or Contrast… (Изображения › Настройки › Яркость или Констраст).

Рис. 25. Осветление рисунка в Adobe Photoshop

Рис. 26. Повышение контрастности рисунка в Adobe Photoshop

Ранее назывались многочисленные программки для создания Gif-анимации и просто хороших гифов. Все программы хороши – выбирай на вкус, как сказал бы на моем месте Маяковский. Но ради выгоды дизайнера лучше приобрести и установить на ПК Bannershop GIF Animator, поскольку работать с ним предельно просто и вдобавок он позволяет создать не только и не столько гифы, сколько баннеры – главный вид гифов, «населяющих» виртуальную реальность. Попробуем создать в Bannershop экспериментальный баннерок с динамичным изображением смайла.[17]17
  Для тех, кто пока мучается с английским, подскажу, что слово shop означало в старой Британии не столько лавку, сколько ремесленную мастерскую. И хотя сегодня остальному миру оно известно в первом значении, в названиях «софта» (Фотошоп, Баннершоп и т. д.) имеется в виду не магазин, а именно мастерская.


[Закрыть]

Для начала определимся с размером баннера. Запускаем Bannershop, выбираем опцию blank animation (анимация с чистого листа) и проходим путь Animation › Frame Size (Анимация › Размер фрейма), благодаря чему перед нами возникает диалоговое окошечко с вариантами всех существующих на свете фреймов – то бишь рамочек – для баннеров. Размеры фрейма можно поменять и самостоятельно, сделав нестандартный баннер, но такие в Сети используются редко. Выберем квадратную кнопку 125 х 125 или близкую по форме, так как в нее легко вписать круглую рожицу (рис. 27).

Рис. 27. Выбор фрейма для баннера в Bannershop GIF Animator

Теперь нарисуем смайл в CorelDraw, используя геометрические фигурки и заливку. Не забудьте задать линиям толщину 1,5–2 пункта, иначе их не будет видно при экспорте в растровую графику. Сдублируем смайл (Copy и затем Paste в новом месте), изменив что-нибудь во внешности этой мордашки. Можно сделать своего вампиром и у второго смайла подрисовать треугольнички клыков. Теперь экспортируем каждый из смайлов в формат JPEG, а потом откроем оба рисунка в Фотошопе. Обрежем их так, чтобы длина и ширина соотносились строго определенным образом, в нашем случае – 1 к 1 (квадрат). Вот перед нами два кадра. Пройдем путь Image › Mode › Indexed Color (Изображение › Режим › Индекс цвета), поставив флажок на индексированный цвет, поскольку RGB нам непригоден. Далее экспортируем оба кадра в формат GIF через меню File › Export (Файл › Экспорт).

Вернемся в Bannershop, пройдем путь Image › Import Image (или кликнем на соответствующую иконку на панели управления) и через окно поиска отыщем два готовых кадра, превращенных в гифы. Вставляем сначала первый кадр. Если он оказался крупнее размеров фрейма, проходим путь Image › Image Size (Изображение › Размер изображения). Забиваем в диалоговое окошко числа 125 и 125, кликаем на ОК, после чего программа сама вставляет рисунок в фрейм. Пройдем путь: Frame › Insert New Frame › After Current Frame (Фрейм › Вставить новый фрейм › После текущего фрейма, см. рис. 28/1) и повторим операцию со вторым кадром. Затем сохраняем анимацию – File › Save GIF Image (рис. 28/2). Обратим внимание, что мы не установили скорость смены фреймов. По умолчанию она задается в 1 секунду. Если такая скорость вас не устроит, перед сохранением рисунка пройдите путь Frame › Frame Delay (Фрейм › Задержка фрейма) и установите нужную скорость смены кадров (оптимум 0,3–0,5 секунды).

Рис. 28. Создание новых фреймов и сохранение анимации в Bannershop GIF Animator

По мере тренировки в разных программах вы научитесь создавать разнообразные красочные гифы. А пока обратим внимание на функцию Animation › HTML Options, которую также задает иконка на панели управления View HTML Options (Смотреть опции HTML). Кликнем на нее, и мы увидим сгенерированный html-код, который нужно вписать в html-код верстаемой странички, чтобы на ней появился этот баннер. Если у нас возникнет потребность снабдить гиф комментариями и гиперссылкой, то достаточно внести нужную информацию в соответствующие поля – URL и description, как программа самостоятельно преобразует html-код. Остается только скопировать его, поставив корректный адрес вашего рисунка в сети (по умолчанию компьютер пишет адрес сохранения гифа на вашем ПК, см. рис. 29). Впрочем, Web Page Maker, которым вы пока пользуетесь, делает эту функцию не особенно нужной, но помнить о таком свойстве Bannershop’а не помешает.

Рис. 29. Генератор html-кода в Bannershop GIF Animator

Гифы позволяют отказаться от использования громоздких видеороликов, которые не всегда получается поместить на сайте. Гиф-анимация по сути дела представляет собой короткий ролик, который и хорош и легок по килобайтам. В некоторых случаях целесообразно имеющийся ролик перегнать в гиф. Новичкам для этой цели посоветую воспользоваться программкой Avi to Gif Converter с очень простым, интуитивным управлением. Все, что нужно делать дизайнеру при работе с этой программкой, – кликать на иконки с всплывающими подсказками. Сначала открыть видеофайл формата *.avi, затем, просмотрев его (а заодно и счетчик кадров), указать на рабочей панельке начальный и конечный кадр для анимации. Далее нужно ввести в подходящие ячейки размеры будущего гифа – его длину и ширину в пикселах. И кликнуть на обособленную иконку «Пуск». Когда файл готов, его сохраняют в нужную папочку, откуда со временем переместят на сайт (см. рис. 30).

Рис. 30. Управление в программе Avi to Gif Converter:

1 – открыть видеофайл *.avi; 2 – счетчик кадров; 3 – начальный кадр; 4 – конечный кадр для анимации; 5 – ширина *.gif; 6 – высота *.gif; 7 – конвертировать; 8 – сохранить

Если же размещение видео принципиально важно, то для этой цели в Web Page Maker припасена опция Insert › Object › Windows Media Video (Вставка › Объект › Видео для Windows, см. рис. 31). Опция применима к файлам видео для Windows, то есть формата AVI. К сожалению, в самом конструкторе видеофайл не просматривается, но имеет вид пустой рамочки. Для просмотра надо открыть страничку в броузере уже после экспорта в HTML. Сверстаем тренировки ради какую-нибудь пробную страничку, используя видеоролик с сайта «Образованные котята», находящийся по адресу: http://obrazcats.narod.ru/other/video.html.

Рис. 31. Вставка видеоролика в программе Web Page Maker

Видео крепится в html-документе посредством тэга ‹img›, как и картинка. Вот только атрибутом, задающим имя файла, является dynsrc=. Не помешает снабдить тэг дополнительным атрибутом start=, показывающим, когда броузер станет проигрывать видео. Значение атрибута start= может быть «fileopen» – то есть сразу после загрузки странички; а может быть «mouseover» – то есть после наведения указателя мыши на изображение. Есть и другой атрибут loop=, значение которого, всегда числовое, показывает количество проигрываний, причем «0» означает бесконечное повторение. Посмотрите код вашей странички в Блокноте и скорректируйте выполненную конструктором запись атрибутов, придав видеоролику следующие качества: ‹img dynsrc=“ваша папка/videostudy.avi” width= на выбор height= на выбор border=0 start=mouseover loop=2› (обратите внимание, что атрибуты не отделяются друг от друга ни запятой, ни точкой с запятой!). Попробуйте сказать заранее, что у вас получится.

А теперь обратим внимание на один такой принципиально важный, каверзный момент, как управление свойствами видео– и графических файлов. К сожалению, об этом думают немногие компании, а между тем для коммерческой организации либо любой другой организации, заинтересованной в притоке посетителей на свой сайт, полезно освоить управление общими свойствами файла – properties. Допустим, какой-то случайный посетитель вашей странички приметил у вас на сайте стоящие картинки, видео, тексты-download. И не просто приметил, но еще и скачал их себе, а потом вдобавок ко всему взял да и разослал копии друзьям. Как же сделать так, чтобы эти тиражируемые материалы послужили первоклассной устной рекламой? Куда можно поставить сообщение о своем ресурсе и своей компании?

Оказывается, способ такой есть. Вот, предположим, есть фотография Анжелины Джоли, и это фото нужно разместить на ресурсе. Понятно, что поклонников Джоли множество, поэтому фотку многие скачают, а потом растиражируют по знакомым. При скромной посещаемости очень молодого ресурса порядка 1400 человек в месяц, на стоящую фотографию польстятся до 20 % гостей, итого 220 визитеров. Каждый из них отправит фото хотя бы одному другу (скорее всего кто-то отправит десяти друзьям, а кто-то – никому, но в среднем будем считать, что именно одному другу). В результате имеем аудиторию в 440 человек, из которых 220 в принципе, при известном везении, могут стать новыми гостями вашего ресурса, повысив вам посещаемость до уровня 1840 человек в следующем месяце.

Зная об этом, нужно открыть фото Джоли в любом вьювере, какой только есть. Какой-то вьювер есть и вас, даже если вы не ставили его на свой ПК сами: программка для просмотра изображений (фоток) обязательно прилагается к любой Windows. Простоты ради открываем фотографию через вьювер «Фотоальбом Windows», который установился на ПК в комплекте с операционной системой. Выбираем опцию Файл › Свойства (File › Properties), и перед нами появляется плашка с информацией о файле. Выберем закладку «Прочие [свойства]», и мы увидим, как много можем вписать о себе, точнее о своем бизнесе и электронном ресурсе. Выделяем курсором поля «Заголовок», «Тема» и проч. – и вносим туда нужную информацию (см. рис. 32): URL, e-mail, сотовый телефон контактного лица компании, юридический или фактический адрес (при необходимости и возможности), наименование компании, сфера ее деятельности.

Рис. 32. Заполнение формы свойств рисунка-jpeg

Оставим в покое мою Джоли и обратимся к реалиям российского бизнеса. Допустим, на сайте вымышленного туристического агентства «МегаГлобус» есть прелестный рисунок, изображающий «тропический рай». В свойства такого рисунка стоит внести: Заголовок – Ваша гостиница на Гран-Канариа; Тема – Доступный отдых на Канарах; Ключевые слова – Канары, отдых, туризм; Комментарии – Сайт: www.megaglobus.com; почта: [email protected]; Авторские права – Турфирма «МегаГлобус» (с) 2008. (Увы, с гифами этот номер не пройдет, столь податливы лишь jpg-файлы.)

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

> компании по торговле легковыми автомобилями (обои с машинами);

> компании по торговле экологически чистыми продуктами (обои с видами природы);

> компании по торговле косметикой или женской одеждой (фото топ-моделей);

> а также некоторые другие.

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

И напоследок, закрывая тему управления свойствами картинок, добавлю: не забудьте об оценке! Поставьте всем своим картинкам высший балл или около того. Ведь светящиеся звездочки вернее привлекут внимание юзера как к самой фотке, так и к ее свойствам, содержащим рекламную информацию о вашей компании и/или вашем сайте.