Веб - дизайн. Разработка и оформление сайтов (2014)

13-06-2015, 08:11

Веб-дизайнер – специалист, от которого зависит «лицо» и структура сайта. Он разрабатывает логическую схему размещения веб-страниц, продумывает наиболее удобные решения подачи информации и занимается оптимизацией всего графического оформления: от простых кнопок до интерактивных flash-баннеров. Окончив курсы веб-дизайна в Центре «Специалист», вы сможете создавать любые сайты, будь то корпоративные порталы, интернет-магазины или онлайн-издания. Мы поможем Вам освоить приемы верстки, работы с изображениями, анимационными элементами и баннерами. Вы научитесь разрабатывать удобную навигацию и грамотно акцентировать внимание на нужной информации, будете грамотно оценивать и тестировать сайт перед сдачей заказчику. Навыки, полученные на курсах, Вы сможете с успехом применить в любой компании или даже открыть свою собственную студию веб-дизайна.

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

По окончании курса Вы будете уметь:
самостоятельно создавать веб-страницы, используя различные программы;
грамотно размещать информацию на сайте;
разрабатывать навигацию, использовать шаблоны;
подбирать изображения нужного формата и размера;
использовать 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 и решаемые ими задачи.
Демонстрация системы управления сайтом.

Снимки экрана