ПРОГРАММА ИНТЕНСИВА
«Веб-разработка и компьютерная графика для детей и подростков 12-15 лет»
Количество занятий: 10
Часть 1. Основы разработки веб-приложений
ЗАНЯТИЕ 1
Язык HTML5. Структура HTML-документа. Понятие тега и его атрибута. Заголовки, параграфы, разделители. Физические и логические стили текста, маркированные и нумерованные списки. Списки определений. Вставка изображений, типы и атрибуты изображений. Вставка гиперссылок, атрибуты гиперссылок. Цветовое оформление и фоновые изображения.
ЗАНЯТИЕ 2
Работа с таблицами: структура таблицы, заголовки, строки и ячейки, объединение ячеек. Позиционирование элементов сайта с помощью таблиц. Создание простого многостраничного сайта. Создание форм: текстовые поля, радио переключатели и чекбоксы, списки и области текста, метки и диапазоны. Атрибуты формы. Создание собственной формы.
ЗАНЯТИЕ 3
Размещение музыки и видео на сайте. Типы медиа файлов. Атрибуты медиа тегов: предварительная загрузка, автозапуск, органы управления. Конвертеры форматов аудио и видео. Использование визуальных редакторов для создания сайтов на примере Adobe Dreamweaver и Adobe Brackets. Работа с HTML-шаблонами сайтов в визуальном редакторе.
ЗАНЯТИЕ 4
Язык стилей CSS3. Подключение CSS к HTML-документу. Синтаксис CSS. Основные элементы стилей: строки, числа, проценты, абсолютные и относительные единицы измерения, цвета, адреса, комментарии. Селекторы тегов, селекторы классов, селекторы идентификаторов. Практическое задание по использованию стилей.
ЗАНЯТИЕ 5
Интерактивность и динамические эффекты CSS. Селекторы псевдоклассов и псевдоэлементов. Анимация и трансформация в CSS. Библиотеки анимации. Генераторы CSS кода. Создание эффектов переходов, теней, рамок, градиентов. Использование фильтров. Практическое задание по использованию интерактивности и динамических эффектов.
Часть 2. Компьютерная графика и верстка веб-сайта
ЗАНЯТИЕ 6
Ознакомление с графическим редактором Adobe Photoshop. Обзор интерфейса. Настройки Photoshop. Выбор масштаба и перемещение изображения. Информация об изображении. Создание и сохранение файла. Примеры с инструментами выделения: "прямоугольное" и "овальное" выделения, "лассо", "волшебная палочка", "перо". Пример с командой выделения "цветовой диапазон".
ЗАНЯТИЕ 7
Пикселы, разрешения и размеры. Цветовые модели и типы изображений. Команда "Сохранить для Web". Слои и маски в Photoshop: режим быстрой маски, использование слой-маски и корректирующих слоев, использования канал-маски (Альфа-канал) и редактора градиента. Создание коллажа и работа с текстом. Пример ретуши. Применение фильтров. Создание GIF-анимации.
ЗАНЯТИЕ 8
Создание PSD-макета веб-сайта в Adobe Photoshop: подключение линейки, разметка областей сайта с помощью направляющих, создание групповых слоев, набор текста, использование градиента, наложение эффектов слоя, создание блоков сайта. Подготовка макета веб-сайта к верстке.
ЗАНЯТИЕ 9
Верстка веб-сайта: понятие строчного и блочного элемента, семантические теги, создание структуры папок сайта, контейнеры и обертки, отступы и границы, содержимое блока, тип контейнера элемента, область блочного элемента, позиционирование элементов, переполнение блочного элемента, наложение элементов.
ЗАНЯТИЕ 10
Верстка шаблона веб-сайта по созданному макету с помощью CSS Flexbox: создание стилевых правил с помощью CSS-свойств Flex-контейнера и flex-элемента. Регистрация хостинга и домена. Размещение сайта в интернете.