WEB – дизайн

Если Вы желаете освоить специальность web-дизайнера, стать креативным художником, хотите разрабатывать уникальный дизайн сайта или научиться модернизировать старый, разбираться и подбирать сочетание цветов, шрифты, тогда курс «Web-дизайн» специально для Вас!

Основной акцент делается на практику. Поэтому на каждом занятии Вы будете отрабатывать практические задания, на конкретных примерах.

Вы узнаете:

• Внутреннюю архитектуру сайтов;
• Пакет Adobe, конструкторы, CMS, сайты и сервисы;
• Основы проектирования и прототипирования;
• Основы работы с шрифтами и эффектами;
• Создание сайта в визуальном редакторе, в конструкторе, на готовой CMS.

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

ТЕМА 1.1 Основы языка HyperText Markup Language (4 часа)

Введение в HTML. Структура HTML-документа. Основные части документа. Основные сущности HTML: элемент, тэг, атрибут. Элемент BODY. Примеры HTML-документов. Основные элементы форматирования текста, ссылок, изображений и таблиц. Цвета и спецсимволы. Фон страницы, блоков.

ТЕМА 1.2 Основы каскадных таблиц стилей (CSS) (4 часа)

Основы CSS, описание стилей для элементов HTML. Область применения CSS, семантическая верстка. Основные селекторы: класс, ID, псевдоклассы, псевдоэлементы. Основные CSS-свойства, способы задания. Внешние таблицы стилей, подключение внешней таблицы к HTML.

ТЕМА 1.3 Блочная верстка HTML-документа (6 часа)

Элемент DIV, его свойства. Виды позиционирования: static, relative, absolute, fixed. Совместное использование нескольких видов позиционирования. Свойства float, clear. Применение overflow и clear в блочной структуре.

ТЕМА 1.4 Адаптивная верстка HTML-документа (4 часа)

Макет сайта. Mockup страницы. Верстка макета страницы при помощи блоков. Адаптивная верстка: виды макетов, разрешения, особенности каждого вида. Использование медиа-запросов. Примеры адаптивной верстки.

ТЕМА 2.1 Графический дизайн для web (2 часа)

Графический дизайн web-страниц. Разработка дизайн-макетов в графическом редакторе. Элементы дизайна. Графические элементы в HTML – документе. Характеристики растровых изображений. Форматы растровых изображений. Модели цвета.

ТЕМА 2.2 Создание графических элементов web-страницы (2 часа)

Знакомство с графическими редакторами. Возможности программ. Средства редактирования изображений: слои, каналы, маски. Ретуширование изображений. Подготовка изображения для встраивания в макет. Требования к изображениям.

ТЕМА 2.3 Использование векторной графики для web (4 часа)

Векторная графика. Использование графических редакторов. Кривые Безье, примитивы и сложные элементы. Экспорт векторных изображений. Векторные изображения на web-страницах. Формат SVG.

ТЕМА 3.1 Дизайн сайта, формирование требований (2 часа)

Основы дизайна сайтов. Этапы разработки дизайна. Сбор информации. Изучение целевой аудитории. Анализ отрасли. Креативный бриф. Требования к адаптивности и кроссбраузерности. Спецификации WCAG (Web Content Accessibility Guidelines).

ТЕМА 3.2 Разработка структуры сайта (4 часа)

Аудит и структурирование контента. Создание макетов. Обеспечение навигации. Определение основных маршрутов пользователей. Создание графических шаблонов. Виды навигации.

ТЕМА 3.3 Типовой дизайн страниц (2 часа)

Типовой дизайн страниц. Реализация основных функциональных решений: авторизация, каталог, галерея, блог, личный кабинет, лента новостей. Типографическое оформление страниц.

ТЕМА 3.4 Верстка и дизайн landing page (4 часа)

Landing page: принципы компоновки. Обязательные и необязательные элементы. Особенности дизайна и верстки. Типовые макеты. Примеры решений.

ТЕМА 3.5 Верстка и дизайн корпоративных ресурсов (2 часа)

Корпоративный ресурс. Принципы компоновки. Обязательные и необязательные элементы. Особенности дизайна и верстки. Типовые макеты. Примеры удачных решений.

ТЕМА 3.6 Верстка и дизайн сетевых проектов (2 часа)

Социальная сеть и сервисы взаимодействия пользователей. Обязательные и необязательные элементы. Особенности дизайна и верстки. Типовые макеты. Примеры удачных решений.

ТЕМА 3.7 Средства разработки: библиотеки и фреймворки (6 часа)

Создание основной разметки сайта. Заполнение разметки частями макета. Знакомство с Bootstrap и его применение. Фреймворки для создания сайтов.

ТЕМА 4.1 Назначение и применение JavaScript (2 часа)

Возможности JavaScript. Размещение кода JavaScript на HTML-странице. Структура сценариев на JavaScript. Типы данных. Переменные и литералы. Операторы. Конструкции языка JavaSctipt. Массивы. Функции пользователя. Проверка условий. Циклы. Операторы языка.

ТЕМА 4.2 Функции и объекты JavaScript (4 часа)

Объекты языка JavaScript (Array, String, Date, Math, Number, Function). Создание пользовательских объектов. Функции. Операторы работы с объектами. Знакомство с объектной моделью документа. Объект navigator, screen, location, history, event. Коллекции. Свойства. Методы. События. Прототип.

ТЕМА 4.3 Программирование свойств окна браузера (2 часа)

Взаимодействие с пользователем. Управление окнами и фреймами. Объект window. Свойства объекта window. Поле статуса и свойство window.status. Поле адреса и свойство window.location. Методы объекта window. События объекта window. Объект document. Всплывающие окна. Открытие новых окон браузера. Управление вспомогательными окнами.

ТЕМА 4.4 Программирование форм (4 часа)

Контейнер Form. Работа с формами. Свойства, методы и события объекта Form. Поля формы и их объекты (текстовое поле, списки вариантов). Передача, обработка и проверка данных форм. Динамическое изменение элементов формы. Создание объектов Option. Кнопки.

ТЕМА 4.5 Программирование графики (4 часа)

Объект Image. Изменение картинки. Мультипликация. Обработчик события onLoad. Запуск и остановка мультипликации. Оптимизация отображения. Оптимизация при загрузке изображений. Предварительная загрузка изображений. Нарезка изображений. Графика и таблицы. Горизонтальное, вертикальное и вложенное меню

ТЕМА 5. Библиотека jQuery (6 часа)

Подключение, структура библиотеки jQuery. Функции ядра jQuery. Функции ядра jQuery. Доступ к объекту jQuery. Селекторы jQuery. Базовые и иерархические селекторы. Основные фильтры. События jQuery. Помощники при работе с событиями. Манипулирование элементами. Вставка содержимого внутрь элементов. Изменение содержимого элементов. Замещение, удаление, копирование элементов.