Цель курса:

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

По окончании курса Вы будете уметь:

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

Программа курса:

Модуль 1. Что нужно знать веб-дизайнеру.
Обзор программ, используемых при создании веб-сайта. Обзор ресурсов, полезных для веб-дизайнера.
Этапы разработки веб-сайта.
Написание технического задания на разработку сайта.
Создание прототипов сайта.
Принципы построения системы навигации на сайте.
Знакомство с DreamWeaver. Настройка программы, общие принципы работы. Работа с текстовым наполнением.
Практическая работа:
Перенос текста в программу DreamWeaver и его логическое форматирование
Модуль 2. Информационная архитектура сайта. Цветовые схемы.
Элементы информационной архитектуры.
Распределение информации по разделам сайта с учетом информационной, логической и визуальной взаимосвязи между разделами.
Основные компоненты WEB-страницы и способы их визуального представления на страницах сайта.
Цвет. Цветовые схемы, применяемые на сайте. Использование "безопасных" цветов
Современные стили дизайна
Практическая работа:
Структурирование информации и разработка системы навигации на конкретном примере
Модуль 3. Макетирование веб-страницы. Эргономика веб-сайта.
Принципы построения макета. Роль размеров в дизайне
Оформление веб-страницы с использованием CSS. Работа с CSS в DreamWeaver
Эргономика сайта (web-usability). Факторы, которые затрудняют и факторы, которые облегчают восприятие пользователем информации на сайте.
Версии сайта, адаптированные для печати и для мобильных устройств
Оформление текстового материала. Выбор шрифтов и размеров. Практические советы и рекомендации
Практическая работа:
Анализ эргономики сайтов на примерах.
Оформление макета страницы с использованием CSS.
Модуль 4. Подготовка иллюстраций и графических элементов.
Требования к иллюстрациям в Internet. Обзор форматов иллюстраций JPEG, GIF, PNG, SWF, SVG.
Подготовка графики в программе Adobe PhotoShop. Способы уменьшения объема файла
Особенности использования векторных программ
Создание стандартных графических элементов - иконок, пиктограмм, favicon и пр.
Подготовка изображений с учётом стиля дизайна.
Особенности подготовки изображений на прозрачном фоне
Применение карт изображений ImageMap в WEB-дизайне
Использование CSS для создания эффектного дизайна
Практическая работа:
Создание различных элементов дизайна
Модуль 5. Макетирование веб-страниц с помощью таблиц.
Нарезка и сохранение типового макета в программе Adobe PhotoShop.
Сборка макета в программе DreamWeaver
"Резиновый" и фиксированный дизайн: анализ и критерии выбора
Практические советы и рекомендации
Практическая работа:
Разметка области для нарезки макета.
Создание таблицы и сборка макета.
Способы создания резиновой «шапки» страницы
Способы оформления меню, левой и правой колонок.
Модуль 6. Макетирование веб-страниц с помощью блоков.
Нарезка и сохранение типового макета в программе Adobe PhotoShop.
Способы сборки макета с использованием свойств CSS float и свободного позиционирования.
Приёмы блочной вёрстки web-страницы
Практическая работа:
Разметка области для нарезки макета.
Сборка макета с использованием float.
Применение свободного позиционирования на странице.
Способы создания резиновой «шапки» страницы
Способы оформления меню, левой и правой колонок.
Модуль 7. Gif-анимация и баннеры. Создание динамических элементов в DreamWeaver.
Что такое GIF-анимация
Создание анимированных баннеров, аватаров и смайликов
Способы подключения роликов FLASH на страницу
Вставка видео на страницу
Использование динамических элементов на web-странице (на примере выпадающих меню и пр.), приёмы работы с элементами SPRY в Dreamweaver
Практическая работа:
Создание баннера и установка на страницу сайта.
Установка FLASH на страницу сайта.
Добавление динамических элементов
Модуль 8. Тестирование сайта. Использование системы управления сайтом.
Тестирование сайта. Система управления сайтом.
Этапы стандартного тестирования сайта.
Добавление системы поиска на сайте.
Вставка географической информации (схема проезда и пр.) Использование системы управления сайтом (CMS). Виды CMS и решаемые ими задачи.
Демонстрация системы управления сайтом.