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

Наиболее распространены три структуры сайта: линейная, древовидная и смешанная. Рассмотрим подробнее каждую из них.

– Линейная (рис. 6.6). Это самая простая для реализации структура. Она представляет собой совокупность равноправных страниц, идущих одна за другой.

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

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

Рис. 6.6. Линейная структура сайта.

– Древовидная (рис. 6.7). Универсальная структура, подходящая для создания практически любого сайта. Принцип работы прост. Главная страница имеет несколько разделов, предоставляющих пользователю выбор, куда идти дальше. Каждый раздел в свою очередь имеет несколько подразделов, подразделы – свои подразделы и т. д. Таким образом, путешествуя по ветвям дерева, посетитель очень быстро сможет найти нужную ему информацию.

Рис. 6.7. Древовидная структура сайта.

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

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

Рис. 6.8. Смешанная структура сайта

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

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

– Не стоит думать, что если ваш монитор поддерживает разрешение 1280x960, то и все остальные пользователи работают при таком же разрешении. Типичным посетителем вашего сайта будет обладатель монитора с разрешением 800x600, поэтому все содержимое должно укладываться в эти рамки.

– При создании графики используйте для рисунков формат GIF, a для фотографий —JPEG. Для рисунков лучше применять формат GIF, так как он очень сильно сжимает изображение практически без потери качества, поэтому полученные файлы рисунков весьма компактные. Кроме того, GIF позволяет определять в картинке «прозрачные» цвета, которые становятся невидимыми при просмотре рисунка в браузере. Минусом GIF является ограничение в количестве цветов – всего 256, поэтому для фотографий лучше использовать формат JPEG.

– Применяйте цвета из «безопасной» палитры. Дело в том, что разные браузеры по-разному воспринимают цвета, которые вы им задаете. Говорят же: «На вкус и цвет товарищей нет!» Как оказалось, эта пословица справедлива не только для людей. Поэтому пользователи, к примеру, Netscape Navigator и Internet Explorer при просмотре одной веб-страницы будут видеть разные цвета. Однако существует так называемая «безопасная» палитра, состоящая из 216 цветов, которые будут всегда и везде отображаться правильно и без искажений. Найти эту палитру можно, например, по адресу http://www.artlebedev.ru/tools/colors/.

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

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

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

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

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

– Достаточно объемные сайты могут содержать строку поиска. По введенным в нее ключевым словам поисковая система будет искать на вашем сайте запрашиваемую информацию и выдавать ее пользователю. Для организации подобного поиска требуется специальное программное обеспечение.

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