WEB-ДИЗАЙН

программа профессиональной переподготовки

Объем курса: 300 академических часов

Продолжительность обучения: 4 месяца

Режим занятий: 2 раза в неделю c 18.30 до 21.50, либо ДИСТАНЦИОННО online-консультация

Выдаваемый документ: Диплом Университета ИТМО о профессиональной переподготовке, предоставляющий право на ведение профессиональной деятельности

Модуль 1 - Adobe PhotoShop для web-дизайна

  • Запуск и настройка программы
    Просмотр изображений. Запуск программы и ее основной экран. Открытие и сохранение файлов. Графические форматы. Настройки и установки программы;
  • Работа с инструментами и изображениями
    Группы инструментов. Назначение инструментов и их параметры. Масштабирование изображений. Просмотр изображений с помощью команды Zoomify. Режимы отображения рабочей области;
  • Работа с элементами изображения
    Особенности выделенной области. Приемы выделения. Отмена действий и палитра History. Геометрические выделения. Выделение контрастных областей. Быстрое выделение. Выделение в ограниченной области. Выделение в форме текстовых символов. Исправление границы выделения. Альфа-каналы. Выделение на цветовых каналах;
  • Макетирование с помощью слоев
    Типы слоев. Работа со слоями. Создание новых изобразительных слоев. Добавление изображения на слой. Размещение фрагмента изображения на отдельном слое. Изменение вертикального положения слоя. Непрозрачность слоя и режимы наложения пикселов. Группы слоев. Заливочные слои. Эффекты и стили. Smart-объекты. Объединение и сведение слоев. Автоматическое выравнивание и смешивание слоев;
  • Коррекция тона изображения
    Гистограмма. Оценка тона. Коррекция тона. Корректирующие слои тоновой коррекции. Обработка 32-битных файлов;
  • Цветовая коррекция изображений
    Цветовые каналы. Определение цветовых компонент. Цветовой охват. Цветовой круг. Операции и команды цветовой коррекции. Команда Auto Color. Удаление цветового оттенка. Команда Color Balance. Коррекция цветового баланса. Команда Hue/Saturation. Изменение цветового тона, насыщенности и яркости. Команда Levels. Коррекция отдельных цветовых каналов. Команда Replace Color. Замена цвета. Команда Selective Color. Выборочная коррекция цвета. Корректирующие слои цветовой коррекции;
  • Профессиональная работа
    Camera Raw. Слой-маски. Обтравочные маски. Коррекция погрешностей объектива. Панорамные изображения. Изображения с перспективой. Настройка резкости. Размытие. Коррекция освещения. Обесцвечивание изображения. Эффекты закрашивания. Наложение градиентной заливки. Объединение альфа-каналов. Тонирование выделенной области. Коррекция цветового баланса. Применение фильтров;
  • Ввод и обработка текста
    Инструменты ввода текста и их параметры. Создание заголовочного и абзацного текста. Обработка маскированного текста. Обработка векторного текста. Конвертирование и преобразование текста. Искривление текста. Растрирование текстового слоя. Общие сведения об использовании шрифтов. Использование текста в качестве отсекающей маски. Деформация текста с помощью интеллектуальных объектов;
  • Работа с трехмерными изображениями
    Форматы трехмерных изображений. Открытие и обработка трехмерных изображений. Работа с трехмерными слоями. Совмещение трехмерных и двухмерных изображений. Рисование на трехмерных слоях;
  • Оптимизация изображений для Интернета
    Графические форматы изображений в Интернете. Оптимизация формата GIF. Оптимизация формата JPEG. Изображения с индексированными цветами. Подготовка для Интернета изображений различных цветовых моделей. Использование палитры Actions.

Модуль 2 - Основы композиции

  • Введение. Дизайн как художественное проектирование эстетического облика среды
    Цель и назначение курса. Понятие дизайна. История дизайна. Промышленный дизайн. Развитие творческих способностей слушателей курса. Психологические особенности заказчика. Тип личности. Темперамент (цветовые предпочтения). Восприятие и его закономерности в работе дизайнера.
  • Цвет и стиль в дизайне
    Цвет в дизайне – исторический экскурс. Символическое значение цвета. Колориметрия. Цвет как средство композиции. Знакомство и работа с художественными материалами. Закономерности развития стиля. Цветовые предпочтения в Древнем Египте и Древней Греции.
  • Стратегия и тактика дизайна
    Специфика проектно-художественной деятельности дизайнера. Методы и особенности современного дизайнерского проектирования. Методы визуализации дизайн-идеи: форэскиз, клаузура. Античный период как точка отсчета.
  • Основы дизайн-композиции
    Средства композиции. Законы композиции. Закон контрастов. Статичная и динамичная композиция.
  • Художественные средства композиции
    Золотое сечение и его использование в дизайне. Компоновка элементов композиции. Ренессанс. Наука о светотени и перспективе.
  • Гармония в композиции
    Принципы гармоничной композиции. Фигура и фон в композиции. Форма и контрформа в композиции.
  • Дизайн предметной среды
    Эргономика в дизайне, эргодизайн. Эргономические показатели.
  • Дизайн и современность
    Модерн, конструктивизм. Современные стили: эклектика, индустриальный стиль, хай-тек, пост-модернизм, традиционный, современный стиль, китч. Дизайн и современные технологии.

Модуль 3 - Основы разработки web-сайта: HTML

  • Введение в язык HTML
    Редакторы HTML кода. Браузеры. Валидность HTML-документа. Синтаксис языка HTML. Блочные и строчные элементы. Правила написания атрибутов. Универсальные атрибуты. Разделы документа HTML. !DOCTYPE
  • Форматирование текста Веб-страниц.
    Создание нового абзаца. Запрет переноса слов. Выравнивание элементов страницы по центру. Элементы фразы. Цитаты. Нижние и верхние индексы. Текстовые заголовки. Установка гарнитуры, размера и цвета шрифта. Горизонтальные линии. Нумерованный список. Маркированный список. Список терминов. Комментарии языка HTML
  • Графика на Веб-страницах
    Основные форматы графики. Добавление рисунка на Веб-страницу. Путь к файлу изображений. Установка размеров рисунка на странице. Управление обтеканием текста вокруг графического объекта. Фоновый рисунок веб-страницы.
  • Создание ссылок
    Создание ссылки. Указание адрес документа перехода. Установка целевого окна открытия документа по гиперссылке. Гиперссылки на закладки в тексте страницы. Гиперссылки на закладки. Установка цвета гиперссылок. Карты-изображений.
  • Разметка веб-страниц с помощью таблиц
    Теги HTML для создания таблиц. Размеры таблицы. Выравнивание содержимого ячеек. Отступы в таблицах. Использование в таблице фоновых изображений. Объединение ячеек. Группирование столбцов для форматирования таблицы
  • Создание форм
    Типы элементов формы. Добавления поля ввода и поля ввода пароля. Пояснительный текст к элементу формы. Размеры полей ввода. Блокирование элемента формы. Порядок элементов форм. Добавление флажков и переключателей. Создание списков. Текстовые области. Выбор файла с помощью элемента формы. Скрытое поле. Добавление на форму кнопки Сбросить и Отправить.
  • Работа с фреймами
    Преимущества фреймов. Недостатки фреймов. Наборы фреймов. Границы фреймов. Положение и размер фреймов. Создание фрейма. Изменения размеров фрейма. Полоса прокрутки фрейма. Смешанная фреймовая структура. Навигация внутри фреймов. Встроенные фреймы
  • Заголовок документа HTML
    Заголовок страницы. Установка базового шрифта. Установка базового адреса. Фоновый звук на веб-страницы. Мета теги типа NAME. Мета теги типа HTTP-EQUIV.

Модуль 4 - Средства для создания web-сайтов. Adobe Dreamweaver СС

  • Знакомство с компонентами программы Dreamweaver CС
    Стартовое окно программы Dreamweaver. Интерфейс программы Dreamweaver. Представления. Представление «Дизайн». Представление «Код». Рабочее пространство «Разделение». Работа с панелями. Выбор рабочего пространства. Панель «Заголовка документа». Панель инструментов «Создание кода». Панель «Вставка». Панель «Файлы». Строка состояния. Селектор тегов. Панель «Инспектор свойств». Группа панелей «Результаты».
  • Управление веб-сайтами
    Сайт в Dreamweaver. Создание сайта Dreamweaver. Настройка локальной информации сайта. Настройка удалённой информации сайта. Импорт и экспорт параметров сайта Dreamweaver. Экспорт параметров сайта . Импорт параметров сайта. Получение и размещения файлов на сервер. Передача файлов на удалённый сервер. Получение файлов с удалённого сервера. Поучение/размещение файлов с помощью раскрытого представления панели «Файл». Синхронизация. Совместная работа. Возврат и извлечение с сервера. Заметки разработчика. Скрытие файлов и папок. Создание веб-страниц и вставка содержимого. Создание макета на основе пустой страницы. Задание свойств страницы. Просмотр страниц в Dreamweaver. Просмотр страниц в браузерах. Просмотр страниц в интерактивном представлении.
  • Создание структуры на основе таблиц
    Создание таблиц . Свойства таблиц. Выделение элементов таблицы. Настройка свойств таблицы. Настройка свойств ячеек. Изменение размера таблиц, столбцов и строк. Редактирование таблиц. Сортировка таблиц. Импорт и экспорт табличных данных. Импорт табличных данных. Экспорт таблицы.
  • Создание и редактирование HTML элементов
    Форматирование текста и вставка вспомогательных объектов. Форматирование текста с использованием «Инспектора свойств». Форматирование текста с помощью панели «Вставка». Использование меню «Формат» для редактирования текста. Импорт документов Microsoft Office. Проверка орфографии. Создание ссылок. Создание ссылки с помощью панели «Инспектор свойств». Создание ссылки с помощью панели «Вставка». Поиск повреждённых и потерянных ссылок. Вставка горизонтальных линеек. Вставка даты. Вставка и редактирование изображений. Вставка изображения. Редактирование изображений. Создание замещающего изображения. Вставка и изменение мультимедийных объектов. Вставка звуковых файлов. Вставка видеофайлов.
  • Создание структуры на основе CSS
    Создание страницы на основе шаблона CSS. Вставка и редактирование тегов div. Вставка тегов Div. Редактирование тегов Div. Работа с абсолютно позиционированными элементами.
  • Создание и редактирование CSS
    Панель конструктора CSS. Создание и присоединение таблиц стилей. Определение медиазапросов. Управление селекторами. Управление свойствами. Настройка текста с помощью CSS. Управление шрифтами. Создание и применение эффекта перехода CSS3. Настойки стилей css.
  • Создание веб-форм
    Элементы форм HTML4. Вставка формы. Элемент «Текст». Элемент «Пароль». Элемент
    «Текстовая область». Элементы кнопки. Элемент «Файл». Скрытое поле. Элемент «Выделение». Элемент «Переключатель». Элемент «Флажок». Элемент «Набор полей». Элемент «Надпись». Элементы форм HTML5. Элемент «Электронная почта». Элемент «URL». Элемент «Tel». Элемент «Найти». Элемент «Число». Элемент «Диапазон». Элемент «Цвет». Вставка даты. Невидимые элементы.
  • Панель «Активы», библиотечные элементы и шаблоны
    Панель «Активы». Добавление ресурса в документ. Копирование ресурсов из панели «Активы» на другой сайт. Управление избранными ресурсами. Работа с элементами библиотеки. Создание элемента библиотеки из выделенного фрагмента. Создание пустого элемента библиотеки. Вставка элемента библиотеки в документ. Редактирование элементов библиотеки и обновление документов. Редактирование элемента библиотеки. Обновление текущего документа. Обновление всего сайта. Переименование элемента библиотеки. Удаление элемента из библиотеки. Повторное создание отсутствующего или удалённого элемента библиотеки. Настройка выделения цветом элементов библиотеки. Изменение цвета выделения элементов библиотеки. Отображение или скрытие выделения цветом в окне документа. Редактирование свойств элемента библиотеки. Шаблоны. Типы областей шаблона. Создание шаблона Dreamweaver. Добавление редактируемой области. Добавление повторяющейся области. Добавление дополнительных областей. Добавление редактируемого атрибута. Редактирование содержимого документов на основе шаблона. Добавление и удаление записей повторяющейся области, изменение их порядка.

Модуль 5 - Разработка web-сайтов с использованием CSS

  • Основы css
    Применение css для html-тега. Применение css для страницы. Применение css для web-узла. Создание внешнего css-файла. Импорт таблицы стилей. Применение css к элементам страниц. Переопределение html-тега. Определение классов для создания тегов. Определение id-селекторов для идентификации объекта. Определение стилей с одинаковыми правилами. Наследование родительских свойств. Определение стилей потомка. Определение стилей прямого потомка. Определение стилей сестринских элементов. Универсальный селектор. Определение стилей атрибутов. Определение стилей с псевдоклассами. Определение ссылок стилей с псевдоклассами. Псевдоклассы. Значение !important. Определение каскадного порядка. Таблицы стилей для разных типов устройств. Установка полей для страницы при печати. Свойства с сокращенной формой записи. Комментарии в css.
  • Управление шрифтом
    Установка семейства шрифта. Размер шрифта. Относительные единицы. Абсолютные единицы измерения. Курсив. Толщина шрифта. Создание капители. Загрузка шрифта. Укороченная запись определения свойств шрифта.
  • Управление текстом
    Кернинг. Интервал между словами. Интерлиньяж. Заглавные и строчные буквы. Выравнивание текста по горизонтали. Вертикальное выравнивание текста. Красная строка. Перенос слов. Настройка цвета текста. Оформление текста. Видимость текста. Тень текста. Кавычки. Настройка направления текста. Установка разрыва страницы для печати. Установка разрыва страницы для печати. Управление свойствами пробелов.
  • Управление элементом
    Составляющие элемента. Изменение внешнего вида элемента . Ширина элемента. Высота элемента. Задание высоты и ширины блока. Отступ элемента. Поле элемента. Граница элемента. Установка толщины границы. Установка цвета границы. Cтиль границы. Общая укороченная форма записи. Скругление углов элемента. Установка границ. Настройка фона. Цвет фона. Установка фонового изображения. Установка начального положения фонового изображения. Повторяемость фона. Прокрутка фона. Фон по границам элемента. Масштабируемость фонового изображения. Общая укороченная форма записи. Тень элемента. Выравнивание элемента. Запрет обтекания.
  • Управление позиционированием элемента
    Позиционирование элемента. Абсолютное позиционирование. Фиксированное позиционирование. Относительное позиционирование. Статическое позиционирование. Настройка положения элемента. Настройка положения слева. Настройка положения справа. Настройка положения сверху. Настройка положения снизу. 3d-позиционирование.
  • Управление видимостью элемента
    Видимость элемента. Определение видимой части элемента. Управление невидимой частью. Управление невидимой частью по вертикали. Управление невидимой частью по горизонтали. Эффект прозрачности.
  • Управление списком, таблицей и интерфейсом
    Списки. Задание типа маркера. Создание собственных маркеров. Создание висячих отступов. Укороченная запись управления списком. Счетчик элемента. Увеличения значения счетчика. Таблицы. Свертывание границ между ячейками таблицы. Расстояние между границами ячеек. Отображение пустых ячеек. Отображение ячеек. Положение заголовка таблицы. Изменение внешнего вида курсора мыши.

Модуль 6 - Разработка веб-сайтов с использованием HTML5

  • Основы синтаксиса и семантики
    Заголовок документа HTML. Объявление типа документа. Связи с внешними файлами. Структура страницы. Создание заголовка страницы. Создание навигации. Создание «сайдбара». Создание основного содержимого. Группировка элементов. Нижняя часть страницы.
  • Формы HTML5 
    Поля ввода. Указание числа с помощью ползунка. Поле поиска. Подсказывающий текст. Автофокуса на элементе формы. Обязательные поля. Автозаполнение форм. Список подсказок.
  • Медиа-элементы HTML5
    Звуки на веб-странице. Тег Audio. Тег source. Различные форматы аудиофайлов. Видео на веб-странице. Добавление субтитров к видеофайлу. Использование JavaScript для управления медиа-элементами. Поддержка типа данных. Перезагрузка меда-контента. Управление воспроизведением медиа контента.
  • Рисуем с помощью Canvas 
    Создание холста. Рисование прямоугольников. Задание цвета заливки, цвета контура и задание тени. Настройка текста. Кривые Безье. Рисование дуг и окружностей. Преобразование фигур. Добавление изображения на холст. Управление пиксельными изображениями. Прозрачность. Сохранение и восстановление свойств фигуры.
  • Геопозиционирование и хранилище данных
    Геопозиционирование. Проверка поддержки геопозиционирования. Запрос на определение местоположения. Определение местоположения. Обработка ошибок. Локальное хранилище данных. Проверка поддержки веб-хранилища. Использование веб-хранилища.

Модуль 7 - Web-программирование: JavaScript

  • Введение в JavaScript
    Что JavaScript позволяет делать. Что JavaScript не позволяет делать. Применение сценариев для Web-страниц. Использование сценария для одной Web-страницы. Создание внешних файлов JavaScript. Начало работы с JavaScript. Чувствительность к регистру. Необязательные точки с запятой. Комментарии. Литералы. Идентификаторы. Зарезервированные слова. Типы данных в JavaScript. Числа. Строки. Логические значения. Функции. Объекты. Массивы. Значение null. Значение undefined. Типы объектов JavaScript. Встроенные объекты. Объекты браузера.
  • Переменные, операторы и выражения
    Переменные. Объявление переменной. Назначение переменной определенного значения. Правила присвоения имен переменным. Использование переменной в операторах сценария. Операторы и выражения. Части выражения. Повторяющиеся действия. Виды операторов. Логические операторы. Присваивание с операцией. Операторы сравнения. JavaScript операторы.
  • Условные операторы
    Оператор if. Оператор if...else. Оператор if...else if. Оператор if...else if...else. Оператор switch...case. Операторы цикла. Цикл for. Цикл for in. Цикл while. Цикл do...while. Оператор continue.
  • Объекты и массивы
    Создание объектов. Свойства объектов. Проверка существования свойств. Удаление свойств. Свойства и методы универсального класса Object. Свойство constructor. Метод toString(). Метод valueOf(). Метод hasOwnProperty() . Массивы. Создание массива. Задание исходного значения для массива. Создание элементов массива. Добавление элемента в массив. Перебор элементов массива. Метод join() и concat(). Объединение элементов массива в строку. Метод reverse(). Инвертирование массива. Метод sort(). Упорядочивание элементов массива. Метод slice(). Создание нового массива на основе существующего. Метод splice(). Вставки или удаления элементов массива. Метод push(). Метод pop(). Методы unshift(). Методы shift().
  • Функции
    Определение и вызов функций. Добавление аргументов. Добавление нескольких аргументов. Область видимости переменных и аргументов. Вызов функции. Вызов функции из HTML. Функции, вызывающие другие функции. Возвращаемое значение функции.
  • Объект Window. Работа с окном браузера
    Таймеры. Метод window.setTimeout(). Использование таймера для однократного выполнения действия. Метод window. clearTimeout(). Отмена таймера заданного методом window.setTimeout(). Метод window.setInterval(). Периодическое выполнения действия. Свойство window.screen. Свойства screenLeft, screenTop, screenX, screenY. Определение положения верхнего левого угла браузера. Метод window.open(). Управление размером и расположением нового окна. Отображение панелей инструментов, строки меню и других элементов окна. Метод window.close() и свойство window.closed(). Закрытие окна. Методы Window.moveBy(). Методы focus() и blur(). Метод print().Свойство Location объект window. Перемещение между страницами с помощью свойств объекта Location. Использование свойства search для передачи параметров другой Web-странице. Повторная загрузка страницы . Замена страницы в списке просмотренных страниц. Свойство History объекта window. Свойств length. Методы объекта History. Метод setCursor. Метод stop. Объект Navigator. Управление браузером. Получение информации о браузере пользователя. Свойство userAgent.
  • Управление списком, таблицей и интерфейсом
    Обработка даты и времени. Объект Date. Формат даты в JavaScript. Аргументы объекта Date. Указание текущей даты и времени. Задание произвольной даты и времени. Получение даты и времени. Преобразование возвращаемого функцией getMonth() результата в название месяца. Преобразование результата выполнения метода getDay() в название дня недели. Задание даты. Выполнение операций с датами. Вычисление возраста в неделях, днях и т.д. Другие методы объекта Date.
  • Объект String. Работа со строками
    Объединение строк. Метод charAt(). Метод charCodeAt(). Метод fromCharCode(). Метод concat(). Метод indexOf и lastIndexOf. Свойство length. Метод split(). Метод substring(). Метод slice(). Метод substr. Метод toString. Метод anchor. Метод link.
  • Объект Math. Работа с числами
    Функция parselnt(). Функция parseFloat(). Статические функции объекта Math.
  • Объект Document и динамический HTML
    Причины использования DHTML. DOM (Document Object Model — объектная модель документа). Доступ к узлам DOM. Доступ по идентификационному номеру (ID) . Доступ по атрибуту name. Доступ по имени дескриптора . Доступ и изменение класса через свойство className. Получение информации об узле. Перемещение по иерархическому дереву DOM. Метод removeChild(). Удаление элементов. Методы createElement() и appendChild(). Создание и добавление элементов. Методы insertBefore(). Создание и добавление элементов. Метод createTextNode(). Создание текстовых элементов. Метод setAttribute(). Добавление атрибутов. Метод cloneNode(). Клонирование элементов. Метод replaceChild(). Замена элементов. Свойство innerHTML. Изменение фрагментов кода HTML. Использование CSS стилей в сценариях JavaScript. Соглашения об именах: CSS-атрибуты в JavaScript. Работа со свойствами стилей. DHTML-анимация.
  • Cookie
    Описание cookie. Cookie в браузере.
  • Формы и обработка событий
    Элементы управления и объекты. Быстрый доступ к объектам. Динамическое изменение значений атрибутов. Изменение элементов на основе значений, указанных пользователем. Динамическое изменение списка вариантов. Проверка выбранных флажков. Изменение элементов перед отправкой формы на сервер. Использование встроенных функций JavaScript. Отключение элементов. Элементы только для чтения.

Модуль 8 - Продвижение сайта

  • Введение. Основные возможности сети Интернет для продвижения сайта
    Основные возможности Интернет для продвижения. Инструменты интернет-маркетинга. Исследование как элемент интернет-маркетинга.
  • Традиционные методы продвижения в Интернет
    Баннерная реклама. Контекстная реклама. Реклама в рассылках.
  • Новые методы продвижения в сети Интернет
    Современные тенденции развития сети Интернет. Социальные активности: блоги, сообщества, социальные сети. Мультимедийные возможности. Вирусный маркетинг.
  • Определение трафика, основные способы получения трафика
    Определение трафика. Основные способы получения трафика. Особенности контекстной рекламы. SEO продвижение. SMO продвижение.
  • Поисковая оптимизация контента
    Особенности индексирования сайта поисковыми системами. Оптимизация контента для Яндекс. Оптимизация контента для Google и Rambler.
  • Планирование и проведение рекламной кампании в сети Интернет
    Постановка целей кампании. Разработка инструментов. Разработка «мессаджа» компании. Подбор площадок для проведения кампании. Бюджетирование. Оценка эффективности.

Модуль 9 - Дипломное проектирование