+7 (812) 703-02-02 info@hse.spbstu.ru

UX-WIB. Основы верстки веб-интерфейсов

Длительность дисциплины: 52 ак.ч.


Аннотация

Целью реализации модуля «UX-WIB. Основы верстки веб-интерфейсов» является изучение базовых технологий создания веб-страниц, а также приобретение навыков верстки шаблонных и контентных блоков сайта фиксированного и отзывчивого дизайна с учетом возможностей отображения современных браузеров и удобства пользователей.


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

В результате освоения программы обучающийся должен уметь:
• создавать семантически правильную html-разметку;
• использовать основные свойства оформления html-элементов с помощью CSS;
• использовать растровые и векторные изображения;
• включать медиа-контент (аудио-, видеоролики) на страницу;
• создавать css-анимацию;
• разрабатывать шаблонные и контентные блоки веб-страниц;
• создавать веб-страницы, реализующие макеты фиксированного и отзывчивого дизайна.

В результате освоения программы, обучающийся должен знать:
• основные стандарты по созданию html- и css-кода;
• html-элементы, необходимые для размещения контента;
• базовые свойства CSS для расположения основных блоков макета;
• CSS-свойства для реализации визуальных эффектов.

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


Содержание дисциплины

Тема 1. HTML - технология создания содержимого веб-страниц
    ПО и сервисы для верстки
    Структура html-документа
    Семантическая разметка текста
    
Тема 2.     Адресация в Интернет. Гиперссылки
    Основные понятия Клиент-Сервер. Хостинг. Домен
    Адресация документов
    Гиперссылки. Состояния элементов
    Внедрение изображений на веб-страницу
    
Тема 3.    CSS - технология оформления содержимого веб-страниц
    Подключение CSS
    Селекторы CSS. Наследование. Каскадность. Специфичность
    СSS-свойства  оформления текста
    Подключение шрифтов
    
Тема 4.    Блочная модель элемента
    Типы html-элементов. Свойство display
    СSS-свойства оформления блочного элемента
    Свойство box-sizing
    СSS-свойства фона: цвет, градиенты, изображения
    
Тема 5.    Таблицы и списки
    Основные структурные элементы
    Оформление таблиц с помощью CSS
    СSS-свойства оформления списков
    Псевдоэлементы
    
Тема 6.    Создание галерей изображений
    Верстка на основе float-позиционирования
    Использование inline-block
    Визуальные эффекты: clip-path, box-shadow, border-radius
    Свойство transform
    Свойство transition
    
Тема 7.    Создание меню навигации
    Плоская навигация
    Свойство position
    Выпадающее меню навигации
    
Тема 8.    Формы
    html-элементы форм
    Состояния элементов
    Верстка форм
    
Тема 9.    Свойство animation. Слайдер
    Параметры css-анимации
    Примеры анимации
    Верстка слайдера
    
Тема 10.    Мультимедиа. Векторные изображения
    Теги audio, video
    Использование SVG-файлов
    Иконочные шрифты
    
Тема 11.    Макет фиксированного дизайна
    Сетки фиксированного дизайна
    Верстка колонок
    Стили блоков
    
Тема 12.    Макет "отзывчивого" дизайна
    Управление шириной области отображения контента
    Верстка с учетом требований юзабилити
    Полезные сервисы для верстки
    
Тема 13.    Экзамен