Web-дизайн. Создание сайтов.: Курсы
Анонс программы
В курсе рассказывается, как создавать красивые и функциональные сайты с интуитивно понятным интерфейсом. Рассматриваются HTML-редакторы, принципы эргономики, техника выбора шрифтов и т.д. Также изучаются способы тестирования сайта. Обучение займёт шестьдесят четыре часа.Описание Программы
Тема 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 и решаемые ими задачи;
Демонстрация системы, наполнение системы информацией;
Демонстрация подключения дизайна к системе.