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

Разработка и оформление сайтов

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

Снимки экрана
  • Жанр: Веб-дизайн, верстка
  • Производство: Юрий Евгеньевич Павлов
  • Продолжительность: 21:49:30
  • Размер: 1.44 GB
  • САЙТ РАЗРАБОТЧИКА
Вернуться на предыдущую страницу
Похожие новости
Теги