Веб-дизайн

  • в группе, индивидуально

Коротко о курсе

  • Знакомство с HTML5 и CSS3.
  • Современный блочный дизайн страниц в соответствии со стандартами W3C в десятках проектов–упражнений.
  • Работа с навигацией сайта и добавление интерактивности.
  • Приобретение доменного имени, выбор хостинг-провайдера, публикация сайта в Сети и его сопровождение.

Краткое описание курса

Знакомство с профессией веб-разработчика. Изучение языков HTML5 и CSS3 для создания современных сайтов.

Подробно о курсе

Сегодня трудно представить себе предпринимателя или организацию, не имеющих представительства в глобальной Сети, поэтому такой востребованной стала профессия веб-разработчика, специалиста по созданию сайтов. Курс «Веб-дизайн» предназначен для изучения основ этой профессии.

В ходе обучения школьники знакомятся с языками HTML5 и CSS3, узнают, как создают сайты в настоящих веб-студиях, и пробуют собственные силы: выполняют разметку веб-страниц, добавляют на них содержимое, создают оформление по макету. На занятиях ребята выполняют множество практических уроков-упражнений, каждый из которых является завершённым проектом и представляет определённый этап создания сайта. При необходимости мы помогаем слушателям реализовать собственные веб-проекты, оказываем поддержку в решении технических вопросов, размещении на удалённом сервере и т. п.

Особенностью курса является то, что ученики взаимодействуют с инструментами профессиональной разработки сайтов — текстовыми редакторами для написания программного кода, графическими платформами для создания макетов сайта, средствами тестирования веб-страниц.

Закончив курс «Веб-дизайн», ребята смогут создавать сайты с семантической разметкой, добавлять на них элементы интерактивности и мультимедиа, размещать свой ресурс в Интернете и выполнять работы по его сопровождению и поддержке.

Знание языков HTML5 и CSS3 значительно облегчает последующий переход к изучению языков веб-программирования JavaScript и PHP.

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

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

Тема 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.

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

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

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

  • Пример работы на курсе Веб-дизайн
    Конкурсная работа Владислава Музыкантова. Номинация «Веб-разработка», 1 место.
  • Пример работы на курсе Веб-дизайн
    Конкурсная работа Екатерины Яковлевой. Номинация «Веб-разработка», 2 место.
  • Пример работы на курсе Веб-дизайн
    Конкурсная работа Полины Намоевой. Номинация «Веб-разработка», 3 место.
  • Пример работы на курсе Веб-дизайн
    Конкурсная работа Кирилла Быкова. Номинация «Веб-разработка», поощрительный приз.
  • Пример работы на курсе Веб-дизайн
    Конкурсная работа Семена Лылова. Номинация «Веб-разработка», поощрительный приз.
  • Верстка сайта. Работа Дарьи Гольцовой, 15 лет.
  • Пример работы на курсе Веб-дизайн
    Верстка сайта. Работа Богдана Плуготыренкова, 14 лет.

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

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

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

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

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

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

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

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

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

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

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

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

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

Так выглядит сертификат, выдаваемый по курсу Веб-дизайн.

Согласие на обработку персональных данных

Настоящим в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» от 27.07.2006 года свободно, своей волей и в своем интересе выражаю свое безусловное согласие на обработку моих персональных данных АНО ДПО «ИНСТИТУТ СОВРЕМЕННОГО ОБРАЗОВАНИЯ» (ОГРН 1143600000290, ИНН 3666999768), зарегистрированным в соответствии с законодательством РФ по адресу: ул. Карла Маркса, дом 67, Воронеж, Воронежская область, Россия, 394036 (далее по тексту — Оператор).
Персональные данные — любая информация, относящаяся к определенному или определяемому на основании такой информации физическому лицу.
Настоящее Согласие выдано мною на обработку следующих персональных данных:
 — Имя;
 — Телефон.

Согласие дано Оператору для совершения следующих действий с моими персональными данными с использованием средств автоматизации и/или без использования таких средств: сбор, систематизация, накопление, хранение, уточнение (обновление, изменение), использование, обезличивание, а также осуществление любых иных действий, предусмотренных действующим законодательством РФ как неавтоматизированными, так и автоматизированными способами. Данное согласие дается Оператору для обработки моих персональных данных в следующих целях:
 — предоставление мне услуг/работ;
 — направление в мой адрес уведомлений, касающихся предоставляемых услуг/работ;
 — подготовка и направление ответов на мои запросы;
 — направление в мой адрес информации, в том числе рекламной, о мероприятиях/товарах/услугах/работах Оператора.

Настоящее согласие действует до момента его отзыва путем направления соответствующего уведомления на электронный адрес osnova@webfly.pro. В случае отзыва мною согласия на обработку персональных данных Оператор вправе продолжить обработку персональных данных без моего согласия при наличии оснований, указанных в пунктах 2 — 11 части 1 статьи 6, части 2 статьи 10 и части 2 статьи 11 Федерального закона № 152-ФЗ «О персональных данных» от 27.07.2006 г.