Компоновка веб-страниц: основные элементы структуры сайта
Компоновка это — структура состоящая из различных элементов. Компоновка присутствует, как при верстке книг, журналов, веб-сайтов (так и отдельных страниц), а также в проектировании устройств и техники.
Основными элементами структуры сайтов являются блоки с различным содержимым, именно о них мы и поговорим. Блоки следует понимать как некоторую абстракцию, а не как конкретный текст с кнопками и полями.
По назначению все блоки условно делятся на навигационные, информационные, сервисные, рекламные и дизайнерские. Следует заметить, что различные блоки могут включать друг друга. Например, в один блок «Основное содержание» могут входить несколько блоков «Раздел», блок «Анонс», блок «Фотографии». В первой части данного материала рассмотрим навигационные блоки.
Навигационные блоки
Блоки поиска и быстрого перехода
Несмотря на то что эти функции разные, их можно объединить в один блок из-за их внешней схожести и некоторой схожести по сути. Оба варианта представляют собой поле ввода (редактируемое или нет) с кнопкой выполнения введенного запроса. Иногда при помощи JavaScript в блоке быстрого перехода убирают кнопку, и тогда посетитель попадает на другую страницу сразу же после выбора из выпадающего списка. Однако такое решение не всегда очевидно для пользователя и может вызвать проблемы совместимости в различных браузерах.
Наиболее часто блоки поиска и быстрого перехода располагаются в верхней правой части страницы. Они важны для навигации, поэтому «прятать» их от посетителя не рекомендуется, особенно если на страницах много информации.
Блок горизонтального меню
Один из самых главных блоков на странице. Под блоком горизонтального меню понимается список гиперссылок, ведущих к основным разделам сайта. Гиперссылки располагаются на одной горизонтальной линии и могут быть оформлены и как обычный текст (меню), и как текст в виде изображения, и как символ (домик, корзина, конверт), и как вкладки. Они могут быть любого цвета и размера.
Блок вертикального меню
Блок вертикального меню по смыслу соответствует горизонтальному. В нем ссылки на разделы расположены одна под одной. В силу привычности данный блок располагают по левому краю страницы, но он может находиться и справа, и с обеих сторон одновременно. Этот блок может быть как статичным, так и с выпадающим меню или раскрывающейся древовидной структурой.
Блок вторичной навигации
Визуально представляет собой усеченный вариант горизонтального или вертикального меню. С точки зрения информационного наполнения сайта этот блок не является главным и чаще всего содержит сведения о компании-владельце сайта.
Блок навигации по выборке
Этот блок необходим, когда мы работаем с выборкой некоторых объектов (изображения, ссылки, результаты поиска), которую невозможно отобразить целиком. Для перемещения между частями выборки используется специальная навигация. Для удобства пользователя должен быть визуально выделен текущий фрагмент, должны отображаться соседние элементы. Если не хватает места для отображения всех порций, то следует использовать стрелки или надписи «Следующая/Предыдущая».
Блок авторизации
Этот блок, наверное, самый предсказуемый и понятный. Он располагается на тех сайтах, где пользователь должен идентифицировать себя, чтобы получить доступ к определенной информации или чтобы система могла распознать его и основывать свою работу на ранее введенных данных (например, для очередного заказа в интернет-магазине).
Блок «Подвал»
«Подвал» используется для текстовых гиперссылок на основные разделы сайта. Он должен быстро загружаться и быть доступным в момент, когда фокус внимания находится внизу страницы. Достаточно удобно: закончил работу с этой информацией и готов перейти к следующей. Часто под «подвалом» понимают все, что находится внизу страницы, а не только список основных разделов.
Блок навигационной строки
Этот блок — последовательность гиперссылок, определяющая путь посетителя к текущей странице. Навигационная строка показывает, где был пользователь, и позволяет быстро вернуться на один и более шагов назад. Если список элементов становится слишком длинным, то можно отображать только несколько первых и последних ссылок, а промежуточные заменить на многоточие.
Продолжение материала — Компоновка веб-страниц: основные элементы структуры сайта #2