HTML и CSS. Уровень 2. Кроссбраузерная верстка, основы юзабилити, HTML5 и CSS3: Повышение квалификации

Веб-стандарты и их поддержка:

• Стандарты W3C. Документация;
• DOCTYPE;
• Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах;
• Протокол HTTP;
• Элементы и атрибуты HTML5 и структура страницы;
• Секции, выноски, статьи, навигационные, «шапка», «подвал»;
• Элементы форм и их атрибуты.

4 ак.ч.

Эффективное использование инструментов разработки веб-страниц:

• Инструментарий разработчика: FTP-клиенты, текстовые редакторы, графические редакторы, вспомогательные программы;
• Составление и анализ требований к вёрстке веб-страниц;
• Проектирование макетов;
• Тестирование веб-страниц: просмотр в различных браузерах, проверка валидатором, просмотр при различной ширине окна браузера и различных размерах шрифта;
• Контроль качества веб страниц;
• Практическая работа по теме.

4 ак.ч.

Селекторы в HTML5:

• Селекторы перешедшие из HTML4/xHTML;
• Псевдоклассы/псевдоэлементы. Контекстные селекторы. Новые селекторы в HTML;
• Ролловеры, спрайты;
• Практическая работа по теме.

4 ак.ч.

Продвинутые технологии HTML и CSS:

• Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z-index. Примеры позиционирования: наложение блоков, закрепление «подвала» внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование. Свойство display;
• Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание «фреймообразной» вёрстки с использованием overflow. Расширения IE: свойства overflow-x и overflow-y;
• Внедрение внешних ресурсов: элемент object. Внедрение файлов HTML, создание «фреймообразной» вёрстки с использованием object. Внедрение роликов Flash в соответствии со стандартами Консорциума W3C. Внедрение векторной графики (SVG); предоставление альтернативного растрового изображения браузерам, которые не поддерживают этот формат;
• Пиктограмма сайта (favicon). Формат ICO. Особенности поддержки пиктограммы в различных браузерах;
• Практическая работа по теме.

4 ак.ч.

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

• Условные комментарии;
• Скрипты для поддержки селекторов и изменения поведения старых браузеров;
• Программы эмуляторы старых версий IE;
• Фильтры;
• Практическая работа по теме.

4 ак.ч.

Использование свойств CSS2 и CSS3:

• Градиенты, анимация, трансформация (2D и 3D), переходы;
• Медиа-запросы (построение мобильных версий сайтов, адаптивная верстка);
• @font-face (веб-шрифты), текстовые эффекты;
• Многоколоночная верстка;
• Работа с фоном (+градиенты);
• Закругление углов, модель Flex-блоков;
• Определение технологий, поддерживаемых браузером;
• Практическая работа по теме.

4 ак.ч.

Верстка макета:

• Принципы нарезки макета из psd-файла;
• Выбор размеров и вариантов верстки;
• Верстка;
• Практическая работа: нарезка макета страницы;
• Практическая работа: верстка страницы по заданному макету.

4 ак.ч.

Типовые решения:

• CSS-фреймворки;
• Динамический CSS (на примере LESS);
• Шаблоны CMS;
• Решения на JavaScript.

4 ак.ч.

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