HTML и CSS. Уровень 2. Кроссбраузерная верстка, основы юзабилити

Программирование и IT

На курсе изучаются современные технологии HTML и CSS, которые совместимы со стандартами W3C, WHATWG и поддерживаются в современных браузерах. Рассматриваются вопросы юзабилити и удобство работы с сайтами.

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

Курс подойдет

Веб-программисту

для углубления знаний в HTML и CSS

Веб-дизайнеру

для понимания юзабилити, правильной постановке задач верстальщикам и программистам

HTML-верстальщику

для понимания принципов адаптивной вёрстки сайтов и наработки практических навыков html-вёрстки

SEO-специалисту

для понимания html-кода, корректной постановки технического задания и контроля его выполнения

Чему вы научитесь

продвинутым технологиям вёрстки веб-страниц и специальным эффектам

общим принципам разработки интерфейсов в применении к сайтам

верстать макет сайта

использовать свойства CSS2, CSS3, CSS4

использовать абсолютное и относительное позиционирование, переполнение и обрезку блоков, внедрённых объектов, изображений в CSS

составлять и анализировать требования к вёрстке веб-страниц

использовать селекторы классов, атрибутов, псевдоклассов, псевдоэлементов, контекстные селекторы

совмещать веб-страницу с различными браузерами

эргономике, практичности и удобству использования (usability) и доступность (accessibility) сайтов

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

10 тематических
модулей
35 академических
часов
32 аудиторных
часа
Веб-стандарты и их поддержка
  • Хостинг. Загрузка файлов через веб-интерфейс и по FTP;
  • Протокол HTTP;
  • Сервисы для тестирования сайтов;
  • Составление и анализ требований к вёрстке веб-страниц
Селекторы в CSS
  • CSS: документация Консорциума W3C и на сайтах разработчиков;
  • Использование селекторов классов, атрибутов, псевдоклассов, псевдоэлементов, контекстных селекторов;
  • Специфичность (приоритетность) селекторов;
  • Практические работы по теме.
Веб-стандарты и их поддержка
  • Стандарты W3C, WHATWG. Документация;
  • DOCTYPE;
  • MIME-типы
Usability и Accessibility сайтов
  • Эргономика, практичность и удобство использования (usability) и доступность (accessibility) сайтов;
  • Целевая аудитория;
  • Общие принципы разработки интерфейсов в применении к сайтам;
  • Семинар - обсуждение юзабилити некоторых сайтов.
Позиционирование элементов
  • Модели представления;
  • Свойства float и clear;
  • Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z-index. Примеры позиционирования: наложение блоков, закрепление “подвала” внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование. Свойство display;
  • Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание “фреймообразной” вёрстки с использованием overflow. Расширения IE: свойства overflow-x и overflow-y;
  • Практические работы по теме.
Принципы отображения текста
  • Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах;
  • Оформление шрифта в CSS;
  • Подключение шрифтов @font-face;
  • Практические работы по теме.
Совместимость веб-страниц с различными браузерами
  • Условные комментарии;
  • Скрипты для поддержки селекторов и изменения поведения старых браузеров;
  • Браузерные префиксы CSS;
  • Практические работы по теме.
Верстка макета
  • Изменения в HTML 5;
  • Секции, выноски, статьи, навигационные, «шапка», «подвал»;
  • Спрайты и ролловеры;
  • Пиктограмма сайта (favicon). Форматы ICO, JPEG, SVG. Особенности поддержки пиктограммы в различных браузерах;
  • Принципы нарезки макета из psd-файла;
  • Практические работы по теме.
  • Практическая работа: нарезка макета страницы;
  • Практическая работа: верстка страницы по заданному макету
Виды вёрстки сайтов
  • Медиа-запросы (Media Queries);
  • Виды веб-дизайна (верстки макета);
  • Примеры шаблонов и верстки макетов;
  • Практические работы по теме.
Использование свойств CSS2, CSS3, CSS4. Типовые решения
  • Курсоры;
  • Фильтры и градиенты;
  • Трансформации (преобразования, переходы);
  • Определение технологий, поддерживаемых браузером;
  • Типовые решения, используемые при разработке сайтов;
  • Примеры шаблонов для CMS;
  • Практическая работа по теме.

Преподаватели курса

Преподавательский состав Центра дополнительного образования МГТУ им. Н.Э. Баумана состоит из профессионалов лучшего технического ВУЗа России с многолетним опытом работы в ведущих отраслевых компаниях. Многие из наших специалистов имеют ученые степени и звания.

Наши преподаватели искренне любят свое дело: структурированно и последовательно излагают материал, доступно объясняют верные решения сложных профессиональных задач и разбирают только реальный опыт крупнейших российских и зарубежных компаний. Так, после окончания обучения слушатели Центра дополнительного образования МГТУ им. Н.Э. Баумана могут сразу же применять свои знания и навыки на практике.

Резюме «HTML-верстальщик»

Знания и навыки

  • Разработка frontend-части сайтов

  • Вёрстка по макетам

  • Кроссбраузерная адаптивная верстка макетов

  • Рефакторинг существующих разделов сайтов

Заработная плата от:
90 000 руб.
Желаемая должность:
HTML-верстальщик

Документы об окончании

Задать свой вопрос
+7 (495) 182-83-85
do@bmstu.ru Мы работаем ежедневно с 9:00 до 21:00
+7 (495) 182-83-85
do@bmstu.ru Мы работаем ежедневно с 9:00 до 21:00