Веб-дизайн. Создание дизайн-макета сайта

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

Модуль 1. Что нужно знать веб-дизайнеру

• Стадии разработки веб-сайта. Пример технического задания.

• Система навигации на сайте. Глубина вложенности и позиция меню.
• Adobe DreamWeaver CS5. Настройка программы, общие принципы работы.

• Перенос текста в программу, верстка текста.

• Практическая работа: Логическое форматирование текста в  Adobe DreamWeaver  

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

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

• Современные стили дизайна. Шрифты: стандартные размеры и гарнитуры.

• Приложения для подбора цветов.

• Практическая работа: Освоение использования CSS в Adobe Dreamweaver для оформления страницы.

Модуль 3. Юзабилити. Эргономика веб-страниц

• Юзабилити сайта. Основные элементы юзабилити главных страниц и внутренних.
• Принципы ориентирования пользователя внутри сайта.

• Практическая работа:  оценка эффективности и проектирование пользовательского взаимодействия

 

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

• Основные форматы графики JPEG, GIF, PNG8, PNG24. Основные различия и области применения.
• Подготовка графики в программе Adobe PhotoShop. Способы уменьшения веса изображения.

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

• Подготовки изображений на прозрачном фоне
• Применение карт изображений ImageMap.

• Практическая работа:
  • Сжатие и обрезка фотографий для вставки на страницы сайта. Создание обтекания и отступов через CSS.
• • Применение CSS для создания эффекта «при наведении» в меню сайта.

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

• Нарезка и сохранение типового макета в программе Adobe PhotoShop для табличной верстки.

• Сборка макета в программе Adobe DreamWeaver c использованием таблицы
• "Резиновый" или жесткий дизайн, полурезиновые макеты дизайна.

• Практическая работа:
  • Разметка области для нарезки макета.
  • Создание таблицы и сборка макета.
  • Способы создания резиновой «шапки» страницы
• • Способы оформления меню, левой и правой колонок.        

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

• Нарезка и сохранение типового макета в программе Adobe PhotoShop для блочной верстки.
• Способы сборки макета с использованием свойств CSS float и свободного позиционирования.
• Приёмы блочной вёрстки web-страницы
• Практическая работа:
  • Разметка области для нарезки макета.
  • Сборка макета с использованием float.
  • Применение свободного позиционирования на странице.
• • Способы оформления меню, левой и правой колонок.      

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

• Что такое GIF-анимация
• Создание анимированных баннеров, аватаров и смайликов

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

• Вставка видео на страницу
• Использование динамических элементов на web-странице (на примере выпадающих меню и пр.), приёмы работы с элементами SPRY в Dreamweaver
• Вставка «слайдеров» на страницу

• Практическая работа:
  • Создание баннера и установка на страницу сайта.
  • Установка FLASH на страницу сайта.
• • Добавление динамических элементов

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

• Оптимизация сайта. Способы уменьшения времени загрузки страницы.

• Тестирование сайта. Система управления сайтом.

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

• Добавление системы поиска на сайте.

• Вставка схемы проезда на сайт.

• ВЕБ 2.0 и системы управления контентом (CMS)

 

Стоимость обучения на курсе

Для частных лиц: 12700.00 руб.
Для организаций: 14700.00 руб.