IronnerВеб-дизайн → Компоновка веб-страниц: основные элементы структуры сайта #2

Компоновка веб-страниц: основные элементы структуры сайта #2

16 ноября 2011 года

Во второй части материала о структуре веб-сайтов, мы рассмотрим информационные, сервисные, рекламные и дизайнерские блоки. Если, вы не читали первую часть материала, то советую прочитать, т.к. там идёт речь об навигационных блоках.

Немного введения: компоновка это — структура которая состоит из разных элементов.

Информационные блоки

Блок содержания

Блок содержания состоит из заголовка и одного или нескольких блоков с основным содержимым страницы.

Блок текущей информации

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

Блок «Раздел»

Данный блок достаточно обособленный и содержит информацию, несколько отличающуюся от основного содержимого страницы. Это может быть анонс, новость, краткое описание услуг компании, опрос и т.д.. В блоке должно быть название и содержание раздела, а может еще и гиперссылка, позволяющая перейти к полному содержанию, например: «Смотреть новость полностью». Содержимым блока может быть и текст, и набор гиперссылок, и изображение.

Блок изображений / галерея

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

Сервисные блоки

Блок «Выбор языка»

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

«Пустой блок»

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

Блок «Версия для печати»

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

Рекламные блоки

Блок «Название и слоган»

Этот блок содержит название компании или самого сайта и, возможно, слоган. Этот блок оформляется чаще всего крупным шрифтом, иногда на фоновом рисунке или вместе с логотипом компании. Назначение его, думаю, понятно — это громкое заявление компании о себе.

Блок «Копирайт»

Блок описания авторских прав компании-владельца сайта, иногда со ссылкой на его создателя, например «Design by Name.com». Как правило, этот блок — одна-две строчки в нижней части страницы.

Блок «Дизайнерское изображение

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

Собственый рекламный блок

Несмотря на то что такой блок напоминает «Раздел», он может выглядеть как угодно: тут все зависит от фантазии разработчика. Это может быть и мерцающий баннер на половину экрана, и маленькая гиперссылка, и имитация кнопки, например «Участник Rambler Тор 100». Реклама — она и есть реклама — всегда стремится к разнообразию.

Ваши мысли:

Ваше имя:

Комментарий:

Для выделения используйте следующий код: [i]курсив[/i], [b]жирный[/b].
Цитату оформляйте так: [q = имя автора]цитата[/q] или [q]еще цитата[/q].
Ссылку начните с http://. Других команд или HTML-тегов здесь нет.

Сколько будет 84+6?