1. КОРНЕВАЯ ПАПКА (папка на хостинге, выделенная под ваш веб-узел).

1.1. Главная страничка (часто называется index.html или default.html).

1.2. Контакты (страничка с контактными данными и, иногда, формами для осуществления обратной связи).

1.3. ГРАФИКА (папка, а точнее – субдиректория, обычно называемая images) – сюда сбрасываются графические элементы, общие для всех страничек сайта. Это преимущественно различные рисунки в формате GIF, в особенности общие детали интерфейса страничек и баннеры, а также иконки (в том числе favicon). Обо всем этом мы еще поговорим, когда конкретно остановимся на графике.

1.4. РАЗДЕЛ 1. Такие папки отведены под тематические разделы и повторяют логическую структуру сайта с богатым контентом. Сколько тематических блоков можно выделить в контенте вашего ресурса, столько и папок «Раздел» нужно создать. Внутри каждой папки такого рода целесообразно выделить следующие субдиректории второго порядка:

1.4.1. ТЕКСТОВЫЕ МАТЕРИАЛЫ. Субдиректория содержит только html-странички, содержащие нужный контент.

1.4.2. ГРАФИКА. В субдиректорию загружаются рисунки *.gif и *.jpg, относимые только к отдельным или всем страничкам данной субдиректории. Это схемы, графики, диаграммы, фото, сканированные копии с репродукций и тому подобные материалы, предназначенные для иллюстрирования статей, выложенных на веб-узле. Внутри этой папки бывает уместно выделить следующие субдиректории третьего порядка.

1.4.2.1. Превьюшки – рисунки предварительного просмотра (preview), очень небольшие, кликнув на которые можно получить крупное изображение. Мы непременно научимся делать такие.

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

1.4.2.3. Аватары и т. д.

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

1.4.2.1. Сорта роз (фото, демонстрирующие образцы цветов того или иного сорта).

1.4.2.2. Сорта гладиолусов (то же самое).

1.4.2.3. Сорта гортензий и т. д.

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

1.4.3. АУДИО/ВИДЕО. Не стоит даже пояснять подробно. Здесь хранятся файлы со звуковыми и видеозаписями, если такие нужны. Когда на сайте много аудио и видеоматериалов, то целесообразно разбить эту субдиректорию на две самостоятельные папочки.

1.4.4. КУРСОРЫ. Папка не обязательна. Она применяется в том случае, если для разных страниц сайта используются разные типы курсоров, что облегчает ориентировку в пространстве ресурса и делает его более живым и интересным. (Понятно, что при разработке солидных бизнес-ресурсов такой подход неприемлем.).

1.4.5. DOWNLOAD(S) – загрузка. Папка обычно востребована на подавляющем большинстве ресурсов, поскольку здесь хранятся материалы, предназначенные для скачивания посетителями. Содержимое этой папки должно быть представлено преимущественно (если не сказать более категорично: исключительно!) заархивированными файлами. Дело в том, что скорость скачивания архива ниже, что несомненно оценит посетитель. Сюда сваливаются отчеты, прайсы, рекламные проспекты, электронные книги и прочие полезные для клиента материалы. Иногда сам факт, что все это имеется на сайте, уже настраивает посетителя на благодушный лад, пусть даже гость и не собирается ничего скачивать. Как говорится, дорог не подарок – дорого внимание!

1.5. РАЗДЕЛ 2 (папка, отведенная под материалы тематического раздела 1, обладает той же физической структурой, что и предыдущая папка).

1) корневая папка; 2) папка графики, создающей интерфейс; 3) главная страничка (указана ссылка на нее); 4) папка одного из разделов (галерея № 2), куда ведет картинка-ссылка «Click on me»; 5) раздел № 1, материалы с которого отображены на экране; 6) страничка для контактов (не показана); 7) папка страниц из раздела № 1 (указана закладка открытой странички); 8) папка графики в разделе № 1; 9) субдиректория превьюшек в разделе № 1; 10) субдиректория обоев в разделе № 1; 11) папка с опознавательным курсором для раздела № 1; 12) папка с аудиофайлами для прослушивания в разделе № 1; 13) папка с файлами для скачивания в разделе № 1 (указаны ссылки для прослушивания и скачивания мелодий на мобильник).

Далее список продолжается по числу разделов. (Увидеть конкретное воплощение данной структуры можно на иллюстрации 5, где автор проследил физические взаимосвязи между компонентами странички с воображаемого сайта «Bikini Girls», предоставляющего юзерам обои на рабочий стол.). Должен сказать, что предложенная схема очень сложна, хотя для логически и физически сложного сайта, а тем более для сайта, созданного в коммерческих целях, она просто необходима, иначе ресурс не сможет полноценно выполнять свои функции. Малоемкие персональные сайты не требуют такой скрупулезности, вот почему их структура обычно сугубо физическая и весьма тривиальная.

1. КОРНЕВАЯ ПАПКА.

1.1. Html-странички, не имеющие собственной субдиректории.

1.2. Images – субдиректория для рисунков (сюда же загружаются немногочисленные аудио– и видеоматериалы, если таковые имеются).

1.3. Downloads – субдиректория для скачиваемых архивов.

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

Важно запомнить, что богатый контент требует делать веб-страницы как можно более простыми для визуального восприятия. Сказанное предполагает, в том числе, большое количество пустого (белого) пространства, в особенности «белизны» между отдельными элементами страницы.

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

Уж если мы заикнулись о «белизне», то следует подумать о таком немаловажном для сенсорики факторе ориентации в пространстве, как цветовая гамма. Цвет – король веб-среды. Если мы полагаемся на зрение в 90 % случаев в реальном мире, то наша зависимость от глаз в мире виртуальном возрастает до 99,99 %. Совокупность цветов, оформляющих странички ресурса, носит название цветовой гаммы. От тщательности подбора цветовой гаммы зависит:

> восприятие сайта в целом (удобный, удачный, смелый, нелепый, неумелый, некрасивый);

> психологическое и физиологическое состояние гостя, включая его настроение;

> читабельность информации;

> форма объектов и видимость мелких деталей.

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