Web-дизайн. Создание сайтов.: Курсы

Тема 1. Введение

Обзор программ, используемых при создании веб-сайта. Обзор ресурсов, полезных для веб-дизайнера;

Этапы разработки веб-сайта;

Написание технического задания на разработку сайта;

Создание прототипов сайта;

Принципы построения системы навигации на сайте;

Знакомство с программа по созданию сайтов. Настройка программы, общие принципы работы. Работа с текстовым наполнением;

Лабораторная работа: перенос текста в программу DreamWeaver и его логическое форматирование.

Тема 2. Информационная архитектура сайта. Цветовые схемы.

Элементы информационной архитектуры;

Распределение информации по разделам сайта с учетом информационной, логической и визуальной связи между разделами;

Основные компоненты страницы и способы их визуального представления на страницах сайта;

Цвет. Цветовые схемы, применяемые на сайте. Использование "безопасных" цветов;

Современные стили дизайна;

Лабораторная работа: структурирование информации и разработка системы навигации на конкретном примере.

Тема 3. Макетирование веб-страницы. Эргономика (юзабилити) веб-сайта

Принципы построения макета. Роль размеров в дизайне;

Оформление веб-страницы с использованием CSS;

Эргономика сайта (usability). Факторы, которые затрудняют и факторы, которые облегчают восприятие пользователем информации на сайте;

Версии сайта адаптированные для печати и для мобильных устройств;

Оформление текстового материала. Выбор шрифтов и размеров. Практические советы и рекомендации;

Лабораторная работа: анализ эргономики сайтов на примерах, оформление макета страницы с использованием CSS

Тема 4. Подготовка иллюстраций и графических элементов

Требования к иллюстрациям в Интернете. Форматы иллюстраций: JPEG, GIF, PNG, SWF, SVG;

Подготовка графики в программе Adobe Photoshop. Способы уменьшения объема файл;

Использование векторных программ;

Создание стандартных графических элементов - иконок, пиктограмм, favicon и др.;

Подготовка изображений с учётом стиля дизайна.;

Особенности подготовки изображений на прозрачном фоне;

Применение карт изображений в веб-дизайне;

Использование CSS для создания эффектного дизайна;

Лабораторная работа: создание различных элементов дизайна.

Тема 5. Макетирование веб-страниц с помощью таблиц

Нарезка и сохранение типового макета в программе Adobe Photoshop;

Сборка макета в программе DreamWeaver;

"Резиновый" и фиксированный дизайн: анализ и критерии выбора;

Практические советы и рекомендации;

Лабораторная работа: Разметка области для нарезки макета;

Создание таблицы и сборка макета;

Способы создания резиновой «шапки» страницы;

Способы оформления меню, левой и правой колонок;

Тема 6. Блочное макетирование веб-страниц

Нарезка и сохранение типового макета в программе Adobe Photoshop;

Способы сборки макета с использованием свойств CSS float и свободного позиционирования;

Приёмы блочной вёрстки web-страницы;

Лабораторная работа: Разметка области для нарезки макета, сборка макета с использованием float, применение свободного позиционирования на странице;

Способы создания резиновой «шапки» страницы;

Способы оформления меню, левой и правой колонок.

Тема 7. GIF-анимация и баннеры. Создание динамических элементов в DreamWeaver

Введение в GIF-анимацию;

Создание анимированных баннеров, аватаров и смайликов;

Способы подключения роликов Flash-роликов на страницу;

Вставка видео на страницу;

Использование динамических элементов на странице (на примере выпадающих меню и пр.), приёмы работы с элементами SPRY в Dreamweaver;

Лабораторная работа: Создание баннера и установка на страницу сайта, установка Flash на страницу сайта, добавление динамических элементов.

Тема 8. Тестирование сайта. Использование CMS (системы управления сайтом)

Тестирование сайта. Система управления сайтом (CMS);

Этапы стандартного тестирования сайта;

Добавление поиска на сайт;

Вставка географической информации (схема проезда и пр.) Использование системы управления сайтом (CMS). Виды CMS и решаемые ими задачи;

Демонстрация системы, наполнение системы информацией;

Демонстрация подключения дизайна к системе.