Раздел 2. Проектирование Web-сайта

Тема 3. Организация сайта

Классификация сайтов. Этапы разработки WEB-сайта. Уменьшение затрат ресурсов и сроков создания WEB-сайта. Основные формулировки в техническом задании на разработку сайта. Стили сайтов: минимализм, бизнес-стиль, веб 2.0, промостиль и т.д. Примеры удачных решений.

Лабораторная работа № 3 Разработка сайтов в различных стилях

Тема 4. Информационная архитектура сайта

Разработка информационной архитектуры. Элементы информационной архитектуры. Документирование логической и физической структуры сайта. Основные компоненты WEB-страницы и способы их визуального представления на страницах сайта. Навигационная схема. Принципы построения системы навигации.

Лабораторная работа № 4 Разработка информационной архитектуры сайта

Тема 5. Эргономика сайта

Эргономика сайта (web-usability). Факторы, которые затрудняют и факторы, которые облегчают восприятие пользователем информации на сайте. Макетирование в WEB. Приемы макетирования. Разработка модульной сетки. Создание фиксированных и адаптируемых страниц. Размещение информации на странице с учетом решаемых задач. Примеры удачных и неудачных решений.

Практическая работа 4 Анализ предложенных Web-ресурсов с точки зрения эргономики.

Практическая работа 5 Разработка модульной сетки для информационного сайта, промо-сайта.

Практическая работа 6 Создание страниц фиксированных размеров.

Практическая работа 7 Создание адаптируемых страниц.

Лабораторная работа № 5 Размещение информации на странице

Раздел 3. Подготовка графики для Web

Тема 6. Подготовка иллюстраций для Web

Подготовка иллюстраций для WEB. Требования к иллюстрациям в Internet. Обзор форматов иллюстраций JPEG, GIF, PNG, SWF, SVG. Подготовка графики в программах Adobe PhotoShop, Adobe ImageReady. Способы уменьшения объема файла. Использование коллекций изображений (clipart) векторных графических редакторов на примере CorelDraw. Подготовка изображений, имеющих прозрачные области. Представление текстовой информации.

Подготовка графических элементов. Создание фоновых иллюстраций. Техника создания бесшовных узоров в программах Adobe PhotoShop и Adobe ImageReady. "Нарезка" изображений на фрагменты в программе Adobe ImageReady. Оптимизация фрагментов изображений.

Практическая работа 8 Подготовка иллюстраций в Adobe Photoshop.

Практическая работа 9 Подготовка коллажа в Adobe Photoshop.

Практическая работа 10 Нарезка изображений на фрагменты в Adobe Photoshop

Практическая работа 11 Нарезка изображений на фрагменты в Image Ready.

Практическая работа 12 Оптимизация фрагментов изображений.

Лабораторная работа № 6 Оптимизация изображений

Тема 7. Баннеры и ролловеры

GIF-анимация. Способы создания и параметры анимации. Способы уменьшения объема файла. Использование Adobe ImageReady и Ulead GifAnimator для создания gif-анимации. Создание анимации с помощью Macromedia FLASH. Баннеры: параметры, размещение на WEB-странице. Разработка сюжета баннера. Использование GIF-анимации и роликов FLASH в баннерной рекламе. Воздействие баннерной рекламы на пользователя. Применение карт изображений ImageMap в WEB-дизайне. Создание кнопок. Имитация различных состояний кнопки Создание эффекта «rollover» в ImageReady и Macromedia Flash. Использование ImageReady и Macromedia Flash для создания кнопочного меню.

Лабораторная работа № 7 Создание анимации для WEB