Опубликовано в журнале "Hard'n'Soft" №4 2004г.

Сначала вы приходите сюда по делам, т.е. по необходимости.
Потом вы приходите сюда ради развлечений.
А затем вы обустраиваете здесь свой виртуальный дом…

Здесь – это всемирная сеть Интернет. Примерно по описанному выше сценарию развивается обычное знакомство с "паутиной". Всё начинается с поиска нужной информации по работе или учёбе. Возможно, сначала человек обратится в специально занимающиеся этим конторы. Потом он сам поработает с поисковыми системами типа Rambler, Google, Aport… С этого-то всё и начнётся. Чуть позже появляется электронный почтовый ящик и "аська". Если доступ обходится в не слишком много кровных, то дальше человек начинает пропадать в чатах и форумах… Следующим шагом на пути погружения в сеть станет создание собственной домашней странички, а может быть даже и полноценного сайта.

Второй вариант куда проще – воспользоваться каким-нибудь визуальным редактором, действующим по принципу WYSIWYG (What You See Is What You Get). Actual Drawing, Ulead PhotoImpact, Macromedia Dreamweaver, Microsoft FrontPage – вот некоторые программы, позволяющие ваять сайты по принципу "что вижу то и получу". Помнится, когда-то в составе Windows 98 был простенький визуальный html-редактор FrontPage Express, младший брат MS FrontPage. Выбрав этот вариант можно даже и не задумываться, о том, что именно записано внутри получаемых html документов. "Программа умная – она сама всё что нужно напишет!". Да, это так. Но, кроме того что нужно, программа запишет ещё и кучу лишнего. Особенно, если в процессе разработки вы не сразу определились с дизайном и размещением материала, а экспериментировали по ходу разработки. А когда страница грузится в два-три раза медленней, чем реально должна грузиться, судя по объёму текста и графики на ней, хорошего мало. Поэтому я бы посоветовал сайт созданный визуальными редакторами довести до ума вручную, редактирую html код. Как в старом анекдоте "после сборки обработать зубилом". Всё-таки для нормальной дизайнерской работы стоит знать, за что какие теги отвечают и уметь корректировать их "ручками".

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

Найти какую-нибудь книгу или подборку статей и советов сейчас не представляет ни какого труда. Благо сейчас учебников, как начального уровня, так и вполне профессиональных – пруд пруди. Неплохой учебник по HTML можно найти, например, здесь http://www.citforum.ru/internet/html/index.shtml или http://htmlbook.ru/. А о JavaScript – пожалуй, самом простом из скриптовых языков – неплохо рассказано здесь http://www.citforum.ru/internet/javascript/index.shtml . К тому же, сейчас в любом магазине, продающем компьютерную литературу найдётся не одна книга интересующей тематики. Т.ч. даже можно выбирать, изложение какого автора вам больше понравится. Кроме того, по ключевым словам "web-дизайн обучение" любая поисковая система выдаст вам ссылок больше, чем вы сможете посетить. Например, Rambler по такому запросу нашёл 15222 сайтов и 221093 документов!

Но избыток информации, на который обречён современный пользователь, в каком-то смысле даже вреден. Чтобы успевать за прогрессом пользователь вынужден поглощать данные огромными порциями. При этом, зачастую, не успевая их воспринять и осмыслить. Пролистав пару-тройку учебников человек может выхватить несколько ярких средств оформления. "Не правда ли, анимация оживит страничку! А бегущая строка выглядит так свежо по сравнению со статичным текстом. О, ведь можно же ещё и музычку какую-нибудь повесить на открытие! …" Подобные мысли суетливо толкутся в голове только приобщающегося к миру web-дизайна. Но если его угораздит бросить всё это богатство средств самовыражения на одну страничку – ничего хорошего не получится. Во всём стоит соблюдать меру. Учебники могут рассказать что можно сделать и как это сделать. Я же постараюсь рассказать что делать не надо.

При построении сайта, прежде всего, стоит понять, а зачем же он нужен. Делать сайт ради сайта бессмысленно; такой проект обречён на неудачу. Если вы сами не представляете, зачем нужен создаваемый вами сайт, то каково же придётся вашим посетителям? Итак, нужна идея, которой будет подчинён сайт. Когда с идеей определились, переходим к выбору тематики. О чём вы хотите рассказать на своём сайте? Возможно, у вас будет несколько тем. Тогда стоит продумать, как они будут связаны между собой, чтобы не получилось "слоны в Индии, а марсоход приземлился". Переходы от темы к теме должны быть логичны и не вызывать удивления у посетителей. Следующая на очереди стадия сайтостроения – структура сайта. Здесь вы определяете, как разместить материал (тексты, картинки, файлы скриптов, …), чтобы всё это было удобно и демонстрировать, и обновлять. И, наконец, последний этап построения сайта – оформление. Вы можете выложить замечательную, сверхинтересную информацию на сайте, но посетитель всё-равно уйдёт через несколько секунд, если сайт неприглядно смотрится. Принцип "по одёжке встречают" справедлив и для Интернета. Поэтому, чтобы удержать посетителя хотя бы до тех пор, пока он не начнёт читать, дизайн не должен содержать явных просчётов. О таких просчётах, которые, увы, часто допускают начинающие web-строители, я и расскажу.

Зачастую, творя свой первый сайт, люди хотят изобразить что-то яркое, бросающееся в глаза. При этом они во всю используют доступное цветовое оформление, добавляют картинки везде, где только можно, и заваливают свои странички горами анимаций. Анимация это, конечно, хорошо, но не стоит переусердствовать! Когда вся страничка шевелится, мерцает и ни секунды не остаётся в покое первое и единственное побуждение посетителя – бежать с такого сайта и никогда больше не возвращаться! Нечто подобное, хотя и не в гипертрофированных размерах наблюдается, например, на http://dromanoff.narod.ru/. Здесь же стоит обратить внимание и на бегущую строку. Вообще, бегущая строка пришла в мир компьютеров с электронных табло. Но если на табло её существование было оправдано необходимостью вывода достаточно длинного текста на очень ограниченном пространстве, то на html странице её использование выглядит как излишество. Как правило, ни что не мешает разместить текст этой строки на самой странице. Благо страница не имеет фиксированного размера, и добавление ещё одного абзаца ни каких сложностей не представляет. Единственный случай, на мой взгляд, когда можно использовать бегущую строку – это демонстрация сверхновой и важной информации. Но такая необходимость может возникнуть только на популярном, ежедневно посещаемом множеством пользователей ресурсе, а не на домашней страничке, обновляемой раз в месяц или реже. А когда разом встречаются две строки бегущие в разные стороны – это виртуальная смерть для вашего сайта и явная демонстрация плохого вкуса.

Использование фоновой текстуры не редкость. В особенности среди домашних страничек. Но для фона лучше использовать что-нибудь неброское, что не будет отвлекать от основного содержания вашей страницы, а не ярко-кислотное, что с трудом позволит найти буквы среди красочных разводов. Вот, например, на страничке http://students.uniyar.ac.ru/~awdeew/index.html выложена информация по алгоритмам компьютерной графики. Но благодаря ярко-жёлтому фону читать этот текст … малоприятно, мягко говоря. Но на этом сайте не допущена другая распространённая ошибка, что радует.

Часто, выбрав симпатичный фон для своего сайта, сайтостроитель начисто забывает, что не редко для увеличения скорости загрузки страниц пользователи отключают загрузку графики. При этом и фоновая картинка также не грузится! А если фон был тёмным и, следовательно, текст – светлым, то в этом случае что-либо прочитать будет невозможно и посетитель опять-таки уйдёт, чтобы больше не возвращаться. Такая проблема решается элементарно. Достаточно кроме background задать ещё и bgColor (цвет фона страницы) в теге body и эта неприятность с вами не произойдёт. Как видите мелочь, но именно внимание к таким мелочам и позволяет превратить просто сайт в хороший сайт.

Вернусь ещё к теме избытка анимации. Реклама двигатель торговли и средство достижения популярности. Баннеры – разновидность рекламы. Но не надо превращать главную страницу своего сайта в филиал рекламного щита! Когда 10-20 банеров, ссылок на каталоги и дружественные сайты, счётчиков посетителей, кнопок, ведущих на другие страницы сайта, и прочих финтифлюшек сияет и переливается перед изумлённым пользователем, ни к чему хорошему это не приведёт. Образцом такого изобилия можно полюбоваться на http://gradirnja.dax.ru/. На сайтах посвящённых web-дизайну утверждают, что если и использовать баннеры, то не больше двух на страницу: один вверху, один внизу. Больше – уже перебор.

Тег <font …> позволяет использовать любой из имеющихся в системе шрифтов. Можно выводить текст любым цветом, размером, с подчёркиванием, зачёркиванием, курсивом или использовать полужирный вариант начертания. Но не стоит злоупотреблять и этой возможностью. Конечно, я ничуть не сомневаюсь, что у вас есть такой замечательный шрифт, что не использовать его на вашей домашней страничке будет просто преступлением против человечества! Но вот то, что этого шрифта не окажется у тех, кто будет смотреть на ваш шедевр, я тоже мало сомневаюсь. И в результате посетитель увидит обычный Arial или, в лучшем случае, Times New Roman. Так, что пользоваться экзотическими шрифтами нет смысла. Всё-равно это мало кто сможет оценить. Ещё поначалу соблазнительно выглядит возможность использовать font color и font size. Да, разумеется, заголовки нужно выделять размером, а возможно и цветом, по сравнению с основным текстом. Но не стоит использовать новый цвет для каждого заголовка! Если вы хотите, чтобы ваш сайт прилично смотрелся, придётся ограничиться очень небольшим набором цветов. Подобрать набор из 6 сходных цветов поможет утилита, обитающая по адресу http://www.colormatch.dk/ . Она по одному заданному цвету, который будет считаться основным, подбирает ещё 5 наиболее подходящих для оформления сайта в единой цветовой гамме.

Посмотрите на сайт http://alalikinamasha.narod.ru/home.html . Вроде всё вполне не плохо. Но 9 или 10 цветов использованных для текста это уж слишком! Да и подбор фона оставляет желать лучшего. Темно-бордовое меню и белый фон основной области… Получаем «дикое сочетание вкуса и цвета». Просматривая некоторые домашние странички, создаётся впечатление, что их создатели начитались чего-то вроде стихов Юрия Нестеренко. Например, отрывок из «Вредных советов интернетчику»:

Козырь твой – оригинальность:
Красный цвет на рыжем фоне
Не использовал никто!
(опубликовано в журнале Компьютера №8 2000г [337]).

Ещё несколько слов о тексте на картинках. Красивая "шапка" сайта с объёмными буквами будет смотреться несколько странно на изначально "плоскотекстовом" сайте. Для того чтобы такой заголовок органично вписывался в картину сайта, вам придётся позаботиться, чтобы весь сайт был более-менее рельефным. Аккуратно обращайтесь и с эффектом тени. Падающие в разные стороны тени вызовут у посетителя, хотя бы подсознательно, чувство диссонанса, что не способствует популярности вашего сайта.

Заманчиво выглядит использование фреймов (тэг <frameset>). Казалось бы, как хорошо получится: заголовок и основное меню в одном файле, подробное меню навигации, которое будет отображаться слева, в другом, основная часть страницы – в третьем, а баннер, висящий внизу страницы, копирайт и дата последнего обновления в четвёртом. Красота, да и только! Хочешь изменить "шапку" – меняй на здоровье, кроме неё ничего редактировать не придётся. Нужно подправить меню – тоже нет проблем. Редактируем один файл и, не затрагивая основного контента, получаем требуемое. Но всё так замечательно только на первый взгляд. Навигация упрощается только в пределах сайта, а стоит вам поставить ссылку на какой-либо внешний ресурс проблемы тут как тут. Где он отобразится? В новом окне? – Некрасиво, да и на слабых машинах тратить ресурсы на запуск ещё одной копии браузера (при использовании IE) … Посетители этому не обрадуются. А если открыть в том же фрейме, где была ссылка, тогда это будет, во-первых, некорректно по отношению к создателям открываемого ресурса (слишком близко к плагиату). А во-вторых, как на счёт сочетаемости дизайна вашего и открываемого сайтов, и не нарушится ли расположение объектов открываемой страницы в силу ограниченности размерами вашего фрейма?

Ещё одна неприятность – сложность индексации страниц с фреймами поисковыми машинами. Ну и напоследок один чисто визуальный эффект: "повисшие" полосы прокрутки характерные для использования фреймов выглядят не эстетично.

Итак, один-единственный, оставшийся бесспорным "плюс" фреймов – это разделение текста страниц и упрощение корректирования общих для всего сайта элементов дизайна. Но для тех же целей можно воспользоваться технологией SSI (Server Side Include), поддерживаемой почти всеми бесплатными серверами или скриптом, написанным, например, на JavaScript, который будет вставлять на каждую страничку тоже самое меню, или заголовок, или что-то ещё.

Многих интересных эффектов можно добиться, используя несложные JavaScript скрипты. Замещение картинки при наведении курсора, надпись в статусной строке, таймер, выпадающее меню, управление окном браузера, вывод несколько различных страниц в зависимости от используемого браузера или разрешения экрана, и прочие, и прочие… Хорошо смотрится дата последнего обновления, которую автоматически выдаёт простенькая запись:

<script>document.writeln(Последнее обновление: '+document.lastModified)</script>

Но, как и с описанными выше возможностями, с использованием скриптов следует соблюдать меру. Например, надпись в строке статуса. В ней можно вывести комментарий к ссылке, как это сделано на http://wondermaker.narod.ru/js.htm . Но скрывать от пользователя процесс загрузки и то, куда ведут ссылки, "забивая" статусную строку постоянной надписью, как это сделано на http://www.cracks.am едва ли стоит.

Не стоит пренебрегать скриптами для проверки заполнения форм. Вот, например, гостевая книга: http://physfac.bspu.secna.ru/home/sculov/gb/form.html. Но ни что не мешает посетителю оставить все поля пустыми и благополучно нажать "Отправить". А если добавить простенький скрипт, который проверит, скажем, чтобы поля "Имя" и "Комментарии" не были пустыми, книга будет выглядеть куда как приятней.

Проектируя свой сайт не стоит забывать, что просматривать его будут пользователи с отличными от вашего компьютерами. И если у вас монитор работает с разрешением 1280x1024, то это не значит, что и посетители будут пользоваться таким же для просмотра вашего сайта. Пока всё ещё самым распространённым остаётся 800x600. Поэтому стоит проектировать так, чтобы сайт хорошо смотрелся при всех стандартных разрешениях. Проверьте, перед тем как выкладывать на всеобщее обозрение, не появится ли горизонтальная прокрутка при изменении размеров окна (разумеется, в разумных пределах). Редкого пользователя не будет раздражать необходимость передвигать страницу вправо-влево, чтобы прочитать, что на ней написано. Можно пойти ещё дальше и изменять графические элементы оформления и фоновый рисунок в зависимости от разрешения монитора посетителя. Образец подобного скрипта есть здесь http://www.wmaster.ru/rass/2.htm .

Надеюсь, эти несложные рекомендации позволят вам избежать многих типичных ошибок при построении собственного сайта, а в Интернете будет появляться всё больше страниц, которые приятно посещать. Любопытным могу ещё порекомендовать почитать "Золотые правила плохого HTML" (http://ced.perm.ru/schools/l4/projekt/humor/01.htm). В них хорошо сочетается приятное с полезным :).

Владимир Макаров