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

Основные компоненты Web-страницы

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

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

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

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

Несколько основных пунктов меню можно продублировать в альтернативном меню. Если основное горизонтальное – то в вертикальном, или наоборот.

Меню сайта должно содержать ссылки только на этот сайт! Одно из основных правил навигации: все ссылки сайта открываются в текущем окне, ссылки, ведущие на внешние сайты – в новом окне.

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

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

Посещенные разделы стоит выделять другим цветом, чтобы посетителю было видно, где он был, а где нет.

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

Основные элементы дизайна сайта.

• Дизайн — это конструирование вещей, машин, интерьеров, основанное на принципах сочетания удобства, экономичности и красоты.

• Графика — искусство изображения предметов контурными линиями и штрихами, без красок (иногда — с применением цветовых пятен) (словарь Ожегова).

• Главная идея графического дизайна — соединить эстетические принципы и функциональные задачи в одном исполнении. Успех того или иного проекта во многом зависит от соблюдения внутренних принципов, которыми руководствуется специалист при создании графического дизайна.

• Главная задача Web-дизайна является создание комфортной атмосферы для усвоения информации на страницах Интернет-сайта.

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

• компоновка Web-страниц сайта;

• цвет;

• шрифт;

• графика.

Компоновка страницы сайта.

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

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

Цветовое решение сайта.

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

Для создания эффективного дизайна необходимо учитывать ряд требований налагаемых на выбор цветового решения:

• яркость, тон и насыщенность цвета должны соответствовать фирменному стилю сайта;

• подбор цвета делается с учетом ориентировки на аудиторию этого ресурса;

• количество используемых основных цветов по возможности не должно превышать трех;

• цвета, используемые на сайте должны взаимодействовать и гармонировать между собой;

• употребление цвета должно отвечать элементарным правилам логики;

• отдельным пунктом стоит выделить подбор цвета для текста. Фон и текст страницы должны быть оформлены контрастными цветами. Наилучшая разборчивость обеспечивается при использовании черных символов на белом фоне. Текст не должен сливаться с фоном, а заголовки теряться.

• необходимо что бы цветовое решение соответствовало форме подачи материала, его содержанию, аудитории сайта.

Оптимизация графики Web, подготовка изображений для Web-страницы. Принципы работы с картинками.

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

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

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

Среднее время загрузки страниц не должно превышать 30 секунд при скорости соединения 28.8 Кбит/сек. Допускается увеличение времени загрузки отдельных страниц до 35 секунд, но не более чем 30% общего числа страниц сайта. Главная страница должна иметь время загрузки не более 40 секунд

На WEB странице можно использовать графические файлы форматов JPG, GIF и PNG. GIF -специальный сетевой формат: имеет малый размер файла, возможность плавного проявления и анимации, а также эффект прозрачности, позволяющие использовать картинку как "обои" на странице или в таблицах. Но т.к. gif содержит 256 цветную палитру, он неэффективен для хранения фотографий. JPG напротив не имеет ограничений по глубине цвета, но также и возможности анимации. Новый формат файлов поддерживающий и глубину и прозрачность -PNG, имеет недостаток в том, что старые браузеры его не видят. Поэтому, если не брать во внимание пользователей устаревшими программами, пинги вполне можно включать в свои страницы. Чтобы включить в страницу рисунок, надо описать ссылку на него:

<IMG SRC="Image">

где SRC (от source -источник)=Image -файл в формате gif, jpg или png, содержащий рисунок. Вы можете задавать взаимное расположение рисунка и текста включением атрибута align = " ":

Возможны следующие типы выравнивания: align = "middle" - относительно центра строки align = "left" -текст обтекает картинку справа align = "right"- то же слева

При использовании выравнивания left или right можно включить в тег img дополнительный параметр отступа вокруг изображения, чтоб картинка не прижималась вплотную к Вашему тексту. Параметр VSPACE="n" - создает отступ по вертикали, а HSPACE="n" - по горизонтали на n пиксел. Таким

образом, правильно написанный тег картинки с обтекающим справа текстом будет выглядеть так:

<img src="lego.gif" align="left" height="90" vspace="10" hspace="35" alt="Новый пример" border="1"> Text.

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