Веб-дизайн. Разработка и оформление сайтов «UNIT»

compare_arrows

• Умение работать с языками HTML 5 и CSS 3

• Прохождение курса «Adobe Photoshop CS6/CS5 для PC. Уровень 1. Растровая графика для начинающих» или эквивалентная подготовка

• Основы дизайна сайтов

Содержание курса: 

Модуль 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 и решаемые ими задачи. 
• Демонстрация системы управления сайтом.