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

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

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

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

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

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

курс позволит углубить ваши знания в HTML и CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Программа курса
В этом курсе вас ожидает
10 тематических
модулей
35 академических
часов
В этом курсе вас ожидает
10 тематических
модулей
35 академических
часов
Веб-стандарты и их поддержка
    • Хостинг. Загрузка файлов через веб-интерфейс и по 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 и CSS, основы веб-программирования.

Связанные курсы


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