Верстка адаптивных интерфейсов

Знания и умения, полученные в результате изучения

Преподаватели

• Думп Татьяна Владимировна
• Осипова Оксана Геннадьевна

Лекции

Тема 1

Работа в сети Интернет

• Подключение к Интернет. Способы подключения, поставщики услуг Интернет (провайдеры). Сравнение способов подключения к Интернет.
• Понятие гипертекста, принцип гипертекста. Гипертекстовый документ, гипертекстовая ссылка.
• Адресация ресурсов в Интернет, назначение и структура URL адреса. Документ по умолчанию. Понятие Web-сайта, размещение сайта на сервере. Относительная и абсолютная адресация. Применение различных видов адресации при создании гиперссылок. Применение различных видов адресации при создании гиперссылок.

Основы языка HTML

• История развития HTML. Назначение и использование. Стандарты и организация W3C.
• Гипертекстовый документ, содержимое и структура. Объявления типов документов. Основные объекты языка HTML: элементы, атрибуты элементов и их значения, комментарии. Структура HTML-документа.

Основные структурные элементы

• Назначение и содержимое секций заголовка и тела HTML-документа.
• Метаинформация о документе, элемент META.
• Заголовок документа, его назначение.
• Элементы разметки HTML5.
• Подключение внешних документов.

Тема 2

Форматирование HTML-документа

• Семантика HTML5.
• Встраивание специальных символов в документ.
• Разбиение документа на абзацы, их форматирование.
• Заголовки.
• Создание списков в документе. Виды списков, настройка и форматирование списков.
• Встраивание и настройка изображений. Особенности выравнивания изображений на странице, обтекание текстом.
• Гипертекстовые ссылки. Создание и настройка. Создание якорей (именованных областей) на странице. Ссылки на именованные области и идентификаторы.

Каскадные таблицы стилей

• Назначение CSS.
• Синтаксис: селекторы и правила. Виды селекторов, особенности применения различного вида селекторов. Единицы измерения.
• Встраивание стилевых описаний в документ – встроенные стили, глобальные стили, стилевой файл
• Наследование.
• Каскадирование.
• Специфичность.
• Вендорные префиксы.

Тема 3

Таблицы

• Назначение и использование таблиц в HTML.
• Элементы разметки, определяющие таблицу. Создание сложных таблиц.

Формы

• Элементы форм. Создание веб-форм и задание атрибутов.

Основы верстки

• Резиновый, фиксированный и гибридный дизайн страницы.
• Принципы блочной верстки.
• Свойства отображения, позиционирования, обтекания.

Проектирование структуры страницы

• Этапы разработки визуального дизайна: определение типовых страниц, расположение глобальной и локальной навигации, размер и положение логотипа, местоположение содержимого на странице, рисование эскизов страниц.
• Типовое содержимое каждой из частей страницы.
• Практические рекомендации по созданию визуального дизайна.

Практические работы

Тема 1

Введение в HTML

• Обзор текстового редактора Visual Studio Code, расширений (Emmet), инструментов разработчика браузера.
• Встраивание HTML тегов. Основные структурные теги, метаинформация, заголовок документа.
• Форматирование и разметка документа
• Создание гипертекстовых ссылок.
• Встраивание изображений.
• Создание списков: упорядоченные, неупорядоченные, списки определений

Тема 2

Введение в CSS

• Подключение таблицы стилей.
• Оформление структурных элементов.
• Свойства текста, выравнивание. Относительные и абсолютные единицы измерения.
• Свойства ссылок.
• Работа с формами.

Тема 3

Работа с таблицами. Управление отображением элементов страницы

• Создание простейших таблиц. Основные структурные элементы таблиц.
• Создание сложных таблиц: объединение строк, столбцов, выравнивание внутри таблицы. Создание вложенных таблиц.
• Оформление таблиц с помощью CSS.
• Способы отображения элементов. Свойство display.
• Основы блочной модели.

Тема 4

Позиционирование

• Способы позиционирования элемента.
• Свойство overflow.
• CSS float. Потоковое позиционирование.
• Создание фотогалереи с использованием плавающих элементов.
• Создание фотогалереи с применением свои?ства inline-block.

Тема 5

Создание сайта, выполненного в технике блочной вёрстки

• Структурные тэги HTML 5.
• Создание панели навигации (горизонтальное и вертикальное меню).

Тема 6

Компоненты адаптивного подхода при верстке

• Относительные единицы измерения.
• Медиа-запросы.
• Адаптивные меню и изображения.
• Верстка сайта с использованием Bootstrap.

Тема 7

Подключение нестандартных шрифтов

• Работа с библиотеками шрифтов.
• Шрифтовые иконки.

Тема 8

CSS3 элементы

• Создание прозрачных элементов и картинок.
• Новые возможности цвета и фона.
• Создание элементов со сглаженными углами.
• Добавление теней к тексту.
• Градиенты.

Тема 9

CSS3 элементы

• CSS3 трасформация.
• Анимации и переходы.

Тема 10

• CSS flexbox.
• CSS grid .