Веб-дизайн

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

Ниже представлена программа курса . Представлен общий вариант программы, некоторые разделы могут варьироваться в зависимости от возрастной категории обучаемых.

Тема 1. Структура HTML-документа

Как создаются сайты. Использование языка HTML для описания структуры веб-страниц. Версии HTML. Концепция «живого языка» применительно к HTML5. HTML-элементы. Теги. Атрибуты. Элементы body, head, title. Создание веб-страниц. Структура html-документа. Код в системе управления контентом. Проверка разметки страницы с использованием сервисов W3C. Понятие кодировки. Кириллические кодировки. Особенности выбора кодировки в современных браузерах.

Тема 2. Разметка HTML-страницы. Заголовки, абзацы, разрывы строк

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

Тема 3. Семантическая разметка

Семантические элементы блочного уровня HTML5. Браузерная совместимость новых элементов. Физическое и логическое форматирование текста. Полужирное и курсивное начертание. Подстрочные и надстрочные знаки. Важная информация и логическое ударение. Цитаты. Аббревиатуры и акронимы. Источники и определения.

Тема 4. Ссылки

Структура ссылки. Ссылки на другие сайты. Ссылки на другие страницы вашего сайта. Структура директорий. Относительные URI-адреса. Ссылки на электронную почту и номер телефона. Открытие ссылок в новом окне. Ссылки на определенную часть страницы. Ссылки на определенную часть другой страницы.

Тема 5. Списки

Упорядоченные списки. Неупорядоченные списки. Списки определений. Вложенные списки.

Тема 6. Изображения

Форматы изображений для веба: GIF, JPG, PNG, WebP, AVIF, SVG. Сервисы оптимизации изображений для сайта. Выбор изображений для сайта. Добавление изображений. Обязательные атрибуты для изображений. Высота и ширина изображений. Изображение-гиперссылка. HTML5: иллюстрации и подписи.

Тема 7. Мультимедийное содержимое

Обзор аудиоформатов для Web: особенности и недостатки. Добавление аудиоконтента на страницу средствами HTML5. Обзор видеоформатов для Web: особенности и недостатки. Добавление видеоконтента на страницу в HTML5. Проблемы совместимости мультимедийных форматов с браузерами, их возможные решения. Реализация нескольких источников мультимедийного контента на странице. Реализация резервных решений для старых браузеров.

Тема 8. Создание таблиц

Использование таблиц в веб-дизайне: устаревшие и современные тенденции. Базовая структура таблицы. Логическое деление таблицы. Заголовки таблиц. Объединение столбцов. Объединение строк.

Тема 9. Веб-формы

Элементы формы. Структура формы. Ввод текста. Ввод пароля. Текстовая область. Переключатели. Флажки. Раскрывающийся список. Список множественного выбора. Кнопки отправки и очистки формы. Метки элементов форм. Группировка элементов формы.

Тема 10. Создание стилей и таблиц стилей. Размещение таблиц стилей. Типы селекторов

Введение в каскадные таблицы стилей. Версии CSS. Понятие кроссбраузерного кода. Что такое стиль. Понимание таблиц стилей. Связывание таблиц стилей с HTML-кодом. Встроенные стили. Внутренние таблицы стилей. Внешние таблицы стилей.

Понятие селектора. Типы селекторов. Особенности использования селекторов типа, класса, идентификатора. Создание групповых селекторов. Универсальный селектор. Применение селекторов потомков. Блочные элементы. Встроенные элементы. Группировка текста и элементов в блок. Группировка текста и элементов в строку. Осмысление тегов div и span.

Тема 11. Механизм наследования стилей

Понятие наследования. Упрощение таблиц стилей через наследование. Ограничения наследования.

Тема 12. Стилизация текста. Запись цвета в CSS. Использование веб-шрифтов

Способы записи цвета в CSS. Безопасная веб-палитра. Шестнадцатеричное представление цвета. Использование модели RGB для записи цвета. Связь шестнадцатеричных кодов цвета с моделью RGB. Использование модели RGBA для записи цвета.

Использование шрифтов. Выбор обычного шрифта. Применение веб-шрифтов с помощью сервиса Google fonts. Установка размера шрифта. Курсив и полужирный шрифт. Выравнивание текста. Отступ первой строки абзаца. Прописные буквы. Установка междустрочного интервала. Добавление текстовых теней. Использование селекторов псевдоэлементов для форматирования первой буквы, первой строки абзаца. Стилизация списков. Селекторы псевдоэлементов и дочерние селекторы типов.

Тема 14. Работа с блоками. Поля, границы, отступы

Понятие блочной модели. Управление размерами блоков. Особенности поведения свойств width и height у блоков разных типов.

Поля и отступы. Сокращенный набор свойств margin и padding. Конфликты полей. Добавление границ. Сокращенный набор свойства border. Форматирование отдельных границ. Границы в виде рисунка. Создание скругленных углов. Добавление теней блоку. Управление поведением блочных элементов с помощью свойства overflow. Создание плавающих элементов. Отмена правил обтекания. Стилизация таблиц.

Тема 15. Механизм каскадирования в CSS и его практическое применение

Каскадность стилей. Объединение стилей. Множество стилей для одного элемента. Особенности механизма каскадности: какие стили имеют преимущество. Конфликты стилей и их решение. Правила значимости. Изменение значимости стиля. Выборочная отмена значимости. Концепции обнуления и нормализации стандартных стилей браузера.

Тема 16. Стилизация графики и фона

Фоновые изображения. Управление повтором фоновых изображений. Позиционирование фоновых изображений. Фиксация фона. Масштабирование фоновых изображений. Сокращенный вариант свойства background. Использование нескольких фоновых изображений. Применение градиентов, создаваемых с помощью сервиса Colorzilla.

Тема 17. Стилизация ссылок. Создание панелей навигации

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

Тема 18. Проектирование макета страницы на основе технологии Flexbox

Знакомство с технологией Flexbox. «Гибкие» контейнеры и «гибкие» элементы. Оси флексового контейнера. Изменение направлений флексовых осей. Распределение «гибких» элементов по основной и перпендикулярной осям. Выравнивание «гибких» элементов внутри контейнера. Управление размерами «гибких» элементов. Увеличение и сжатие «гибких» элементов. Управление порядком «гибких» элементов внутри контейнера. Многоколоночная верстка на основе «гибких» элементов.

Тема 19. Проектирование макета страницы на основе технологии Grid

Знакомство с технологией Grid. Создание «колонок», «строк» и «областей». Распределение контента в сетке. Добавление «пробелов» между ячейками грида. Управление размерами ячеек в сетке: фиксированный размер, авторазмер, плавающий размер. Выравнивание контента внутри ячеек сетки. Многоколоночная верстка на основе сеточной технологии. Сравнение технологий Grid и Flexbox: области применения, «плюсы» и «минусы», особенности поведения.

Тема 20. Позиционирование

Типы позиционирования: статическое, абсолютное, относительное, фиксированное. Особенности поведения элементов с разными типами позиционирования. Эффекты с использованием позиционирования. Центрирование контента в блоке при помощи позиционирования.

Тема 21. Публикация сайта в Интернете

Регистрация домена. Что такое хостинг. Зачем нужен сертификат безопасности сайта и как его получить. Выгрузка сайта на хостинг.

Тема 22. Преобразования в CSS. Переходы и анимация

Преобразования в CSS: масштабирование, вращение, наклон. Множественные преобразования. Установка исходной точки преобразований. Переходы. Задание свойств и времени перехода. Создание анимации при помощи директивы @keyframes.

Вернуться в начало раздела

Работы учеников

Работы, выполненные ребятами в ходе изучения курса самостоятельно:

Организация занятий

Необходимая подготовка и возраст

Для успешного освоения программы курса нужны базовые навыки работы в операционной системе Windows или Mac OS. Получить необходимые знания можно на нашем курсе «Компьютер для школьника» или самостоятельно. Мы принимаем на данный курс ребят старше .

Продолжительность курса и график занятий

Продолжительность курса составляет (1 учебный час равен 45 минутам). Все указанное время слушатели работают с преподавателем за собственным рабочим местом.

Обучение проводится в группах выходного дня (суббота, воскресенье) и по будням во временном интервале с 10.00 до 17.00. Типовой график занятий включает 2 академических часа в неделю, например, в воскресенье с 11.10 до 12.40. Таким образом, в месяц проводится 4 занятия по 2 академических часа. Такой режим позволяет избежать чрезмерной перегрузки детей.

Занятия на наших курсах совпадают со школьным учебным годом и обычно начинаются в сентябре–октябре, заканчиваясь в мае. Таким образом, на протяжении учебного года ребенок получает полезное и увлекательное дополнительное образование, которое со временем может стать основой будущей профессии.

Обучение по данному курсу проводится по адресу:

ул. Карла Маркса, 67

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

Оплата обучения производится помесячно или единовременно. Стоимость курса при помесячной оплате составляет . При этом осуществлять предоплату не требуется, более того, вы имеете право бесплатно посетить первое занятие (2 академических часа) и уже после этого принять решение о продолжении обучения и оплате занятий удобным для вас способом.

Документ, подтверждающий прохождение курса

По окончании обучения и после сдачи практических зачетов вы получите Сертификат об окончании курса .