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

Это должен знать каждый

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

Технически создать сайт не слишком сложно, для этого начинающим Web-дизайнерам открыты два пути: первый — потратить немного времени на изучение основ HTML и создавать свой сайт в «Блокноте» или «нормальном» редакторе типа UltraEdit, HomeSite и т. п. В этом случае придется проделать большой объем рутинной работы, зато владелец страницы будет знать ее устройство от «а» до «я».

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

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

Вообще можно рекомендовать заниматься оформление ресурса в последнюю очередь, а в начале стоит понять зачем он нужен. Делать «вещь в себе» бессмысленно, такой проект обречен на неудачу. Если Web-мастер не представляет, зачем нужен создаваемый сайт, каково же придется его посетителям? Итак, нужна идея, которой будет подчинен сайт.

Бывает так, что автор хочет осветить несколько тем, в этом случае стоит продумать , как они будут связаны между собой, чтобы не получить сайт типа «об индийских слонах и новостях ракетостроения». Переходы от одной темы к другой должны быть логичны и не вызывать удивлений у посетителей.

Следующая стадия — разработка структуры. Здесь вы определяете, как разместить материал (тексты, картинки, файлы скриптов), чтобы все это было удобно и демонстрировать и обновлять. И лишь только после этого приступить к оформлению. Теперь перейдем к рассмотрению «частностей», таких как цветовая и шрифтовая политика, а также вопросы применения разнообразных скриптов.

Все цвета радуги

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

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

Так, выбрав симпатичный фон для своего сайта, Web-мастер начисто забывает, что для увеличения скорости загрузки страниц пользователи запрещают отображения графики. Фоновая картинка в этом случае тоже не грузится! А если фон был темным и, следовательно, текст — светлым, то в этом случае что-либо прочитать будет невозможно и посетитель опять-таки уйдет, чтобы больше не возвращаться. Решить такую проблему можно элементарно: достаточно кроме background задать еще и bgcolor (цвет фона страницы) в тэге body. Как видите, мелочь, но именно внимание к таким мелочам и позволяет создать хороший сайт.

Вернемся к теме избытка анимации: напомним, что реклама — двигатель торговли и средство достижения популярности, а баннеры — разновидность рекламы. Но это не повод превращать главную страницу своего сайта в филиал рекламного щита! Когда 10-20 баннеров, ссылок на каталоги и дружественные сайты, счетчиков посетителей, кнопок, ведущих на другие страницы сайта, сияет и переливается перед изумленным пользователем, ни к чему хорошему это не приведет. Запомните: если вы решили размещать баннеры, «переборщить» с их количеством очень легко.

Слово о буквах

Тэг font позволяет использовать любой из имеющихся в системе шрифтов, кроме того, можно выводить текст любым цветом, размером, с подчеркиванием, зачеркиванием, курсивом или использовать полужирный вариант начертания. Но, не стоит злоупотреблять и этой возможностью. Даже если Web-мастер обладает таким замечательным шрифтом, что не использовать его на домашней страничке — просто преступление против человечества, не стоит забывать, что этой гарнитуры может не оказаться у тех, кто будет смотреть на ваш шедевр. И в результате посетитель увидит привычный Arial или Times New Roman. Так что пользоваться экзотическими шрифтами нет смысла — все равно мало кто сможет оценить. Еще соблазнительно выглядит поначалу возможность использовать атрибуты font color и font size. Разумеется, заголовки нужно выделять размером, а возможно и цветом, по сравнению с основным текстом. Но не стоит использовать новый цвет для каждого заголовка! Если вы хотите, чтобы сайт прилично смотрелся, придется ограничиться небольшим их набором.

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

В который раз о фреймах

Заманчиво выглядит использование фреймов (тэг frameset) — казалось бы, как хорошо получится: заголовок и основное меню в одном файле, подробное меню навигации в другом, основная часть страницы в третьем, а баннер, висящий внизу страницы, копирайт и дата последнего обновления — в четвертом. Красота да и только! Хочешь изменить «шапку» - меняй на здоровье, кроме нее ничего редактировать не придется. Нужно подправит меню — тоже нет проблем: редактируем один файл и, не затрагивая основного контента, получаем требуемое. Но это только на первый взгляд. Навигация упрощается только в пределах сайта, а стоит вам поставить ссылку на какой-либо внешний ресурс, проблемы тут как тут. Где его отображать? В новом окне не красиво, а если открыть в том же фрейме, где была ссылка, тогда это будет, во-первых, некорректно по отношению к создателям ресурса, а во-вторых, придется думать о сочетаемости дизайна вашего и открываемого сайтов. Кроме того, запомните, что «повисшие» полосы прокрутки, характерные для использования фреймов, выглядят не очень симпатично. Ну и «стандартная» проблема — сложность индексации страниц с фреймами поисковыми машинами.

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

О пользе скриптов

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

Но, как и в случае с графикой, с использованием скриптов следует соблюдать меру.

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

. . .

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