3.3 Оптимизация изображений, видео и анимации

При подготовке изображений для размещения в интернете или отправки по электронной почте требуется обеспечить необходимое в каждом конкретном случае качество при минимальном объеме файла. Для выполнения этого условия исходное изображение надо оптимизировать. Если нужно получить наилучший результат, то альтернативы Photoshop нет. Кроме того, лучшая программа создания сайтов Adobe Dreamweaver CS3 полностью интегрирована с Photoshop, так как, напомню, что компания Adobe приобрела в 2005 году фирму Macromedia, создателя Dreamweaver.

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

Для оптимизации видеоизображений используется программа Adobe Premiere Pro.

4 Технологический раздел

4.1 Настройка навигационной системы

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

• логически объединять отдельные информационные блоки;

• служить оглавлением всего информационного ресурса и давать представление об информации, которая находится на нем;

• показывать элементы управления, с помощью которых посетитель может переходить в тот или иной раздел или страницу сайта для получения заинтересовавшей его информации;

• отображать текущее местоположение посетителя на сайте.

Навигационная панель может быть:

• горизонтальная (ссылки размещаются в верхней части сайта);

• вертикальная (ссылки размещаются вдоль левой границы сайта);

• комбинированная (ссылки размещаются и в верхней, и в левой части сайта).

Всю навигацию можно условно разделить на две части:

• основную;

• вспомогательную.

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

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

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

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

Текстовые ссылки - представляют собой обычный текст.

Достоинства:

• компактность - занимают мало места на странице;

• имеют малый «вес»;

• Понятный элемент, простой в использовании;

• Видны и при выключенной графике;

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

Графические ссылки – это изображение.

Достоинства:

• совместно с графикой помогают сохранить в памяти посетителя визуальный образ web-страницы;

• грамотно выполненные пиктограммы хорошо распознаются.

Недостатки:

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

• дополнительные элементы, затрудняющие читаемость ссылки;

• не отображаются при выключенной поддержке графики в браузере;

• при блочном оформлении занимают больше места на странице по сравнению с текстовыми;

• графические ссылки «весят» больше текстовых.

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