Веб-дизайн

НЕУПОРЯДОЧЕННЫЙ КОНТИНУУМ

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

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

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

ТОПОЛОГИЯ САЙТА

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

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

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

Большинство сайтов используют и древовидную, и последовательную структуры. Например, начав с иерархического каталога статей, объединенных в разделы, каждую отдельную статью, если она достаточно велика, имеет смысл разбить на несколько следующих друг за другом частей. Точно так же в древовидном каталоге книжного магазина из каждой ветки — страницы отдельной книги — можно перейти к линейной последовательности страниц заказа и покупки. Обратная конфигурация, когда пучки древовидной структуры вырастают из узлов линейной, встречается реже.

Возможность генерации страниц «на лету» в ответ на запросы пользователя и применение динамического HTML (стр. 65) для создания «живых», изменяющихся по мере прочтения и взаимодействия с ними страниц размывают стройную картину структуры сайта, где, как на рис. 47, каждая страница символизируется своим прямоугольником с определенным количеством стрелок–связей. На многих современных сайтах просто невозможно точно сказать, из скольких страниц они состоят и сколько связей содержат. Однако и при создании своего сайта, и при исследовании чужого вы должны четко представлять себе, в какой системе координат — декартовой линейной или полярной древовидной — вы в каждый момент находитесь.

Особую роль играют внешние ссылки, связывающие данный сайт с другими. Если только весь ваш сайт не посвящен таким ссылкам (т. е. не является каталогом ресурсов или чем–то подобным), внешние ссылки имеет смысл оформить так, чтобы был очевиден их особый статус (например, на www.microsoft.com для этого ставят особые маленькие иконки сразу после внешних ссылок). Сайты с фреймами не должны забывать перенаправлять свои внешние ссылки на верхний уровень иерархии фреймов.

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

РАСПРЕДЕЛЕНИЕ МАТЕРИАЛА

Чем же следует руководствоваться, разделяя содержимое будущего сайта на отдельные страницы? На первый взгляд ответ очевиден: деление должно быть прежде всего логичным, так чтобы каждая страница была посвящена одной теме и чтобы всякая тема занимала одну и только одну отведенную под нее страницу. Кроме того, нужно учитывать ограничение объема файлов, о котором я уже упоминал (стр. 177): оставляя разумный минимум на графику, HTML-текст каждой страницы должен весить не больше 20–30 Кб. С другой стороны, каждый щелчок мышью по ссылке требует от пользователя определенной затраты сил, поэтому слишком много слишком маленьких страниц — тоже не лучший выход (известно даже «правило двух щелчков», гласящее, что первую страницу сайта от любой другой должно отделять не более двух щелчков мыши).

Эти простые правила, однако, имеют множество исключений. Если информационные единицы, из которых состоит сайт, слишком мелки, можно объединять на одной странице несколько таких единиц — но только в том случае, если они сравнимы по объему и важности и расположены на одном уровне иерархии. Нередко, особенно на сайтах академического толка, можно встретить гигантские страницы в сотни килобайт, собравшие всю информацию по какой–нибудь большой теме и образующие иерархию не подчиненных страниц, а подразделов в пределах одного HTML-файла. Это допустимо только в академическом стиле, имеющем достаточно уровней вложенности заголовков (теги Н 1—Н 6) и не обремененном графикой и таблицами (т. е. тем, что способно сильно замедлить загрузку и показ и без того; объемистой страницы).

Справедливости ради отмечу, что даже при исключительном использовании HTML 2.0 авторы больших файлов ставят некоторых из своих читателей — а именно тех, кто переходит на какой–то из разделов в самом конце такого файла по ссылке с # (стр. 30), — перед необходимостью довольно долго ждать у пустого экрана.

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