Ольга Яцюк - Основы графического дизайна на базе компьютерных технологий

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

Внизу страницы обычно располагаются дополнительные текстовые ссылки. Они дублируют контекстные или графические ссылки.

На страницах сайтов по договоренности или за плату размещают баннеры. Это графический элемент, который служит ссылкой на другой сайт или страницу. Часто баннеры делают анимированными. На размер баннера существует несколько стандартов: 468x60, 460x55, 392x72, 334x60, 125x125, 120x90, 120x60, 88x31, 120x240 пикселов, поэтому прежде чем создавать баннер, следует выяснить, где он будет размещаться и ознакомиться с требованиями выбранных серверов. Обычно хозяева Web-страницы жестко оговаривают не только размер картинки в пикселах, но и размер ее файла в килобайтах (слишком большой и медленно загружающийся баннер недопустим), так что вопросы анимации на баннерах, выбор цветов и т. д. надо решать очень аккуратно.

Еще один популярный элемент Web-страниц – ролловер (rollover). Это кнопка, изменяющаяся в зависимости от состояния. Обычно, если на ссылку-ролловер наводится мышь, она меняет цвет или форму. В ролловерах второго поколения используются два или более различных изображения. Ролловеры обычно имеют три состояния:

□ обычное или рабочее, когда кнопка еще не выбрана;

□ активное, когда над кнопкой установлен указатель мыши;

□ нажатое, когда кнопка мыши нажата.

В зависимости от назначения Web-страницы, можно выделить следующие их типы: содержательная страница, страница навигации, специализированная страница, страница смешанного типа.

Большинство страниц относятся к смешанному типу (содержание + навигация), но есть чисто навигационные (например, карты сайтов) или чисто содержательные, хранящие информацию по теме, которой посвящен сайт.

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

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

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

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

□ отображать дату создания (последней модификации);

□ время от времени менять общий вид страницы;

□ дать короткую информацию об основных изменениях на сайте;

□ дать ссылку на раздел новостей сайта.

Внутренние страницы (навигационные или содержательные) несут основную информацию. Они должны иметь более сдержанный дизайн, чем домашняя страница, но соответствовать ей по стилю. Содержание внутренних страниц зависит от назначения сайта и может быть любым, от пресс-релизов до стихов и репродукций картин (рис. CD-5.3).

Среди них есть специальные страницы, например, страницы FAQ (Frequently Asked Questions – часто задаваемые вопросы). Их цель – давать ответы на наиболее часто возникающие вопросы. Это освобождает пользователя от поисков по всему сайту. Как правило, такие страницы удобно распечатать для более подробного изучения, поэтому стоит продумать отдельную печатную версию.

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

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

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

□ увеличивается объем данных и страницы медленно загружаются;

□ при изменении разрешения экрана шрифт плохо читается;

□ трудно обновлять или редактировать информацию, так как текст больше не редактируется;

□ возникают серьезные проблемы, если браузер не поддерживает отображение графики;

□ такой текст игнорируется поисковыми системами.

Пожалуй, применение текста, преобразованного в формат графики, оправдано только в заголовках, кнопках в специальных эффектах.

Если же работать с наборным текстом, нужно учитывать некоторые особенности.

По умолчанию браузеры поддерживают два типа шрифтов: пропорциональный (Times) и моноширинный (Courier). Пропорциональный шрифт более удобен для восприятия. Моноширинный чаще всего используется для отображения компьютерного кода или технических данных. Если вы хотите использовать другие гарнитуры, придется проделать несколько дополнительных операций, чтобы выбрать шрифты, поддерживаемые браузером. С помощью команд HTML-кода можно регулировать интерлиньяж, выключку, расстояние между символами и словами, определять стиль заголовков и подзаголовков. Для форматирования текста используются буквицы, линейки, колонки, врезки. Есть возможность создавать таблицы.