HTML и CSS. Уровень 2. Кроссбраузерная верстка, основы юзабилити, HTML5 и CSS3: Повышение квалификации
Анонс программы
Вы изучите современные технологии HTML и CSS, которые совместимы со стандартами Консорциума W3C и поддерживаются в браузерах, распространённых на сегодняшний день.Целевая аудитория
Веб-мастера, начинающие верстальщики, редакторы кода, веб-дизайнеры, веб-программисты, оптимизаторы.Преподаватель
Науменко Святослав НиколаевичОписание Программы
Веб-стандарты и их поддержка:
- Стандарты 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. Также рассматриваются вопросы профессиональной разработки кода: настройка инструментов разработки, организация технического процесса, разработка технических требований, проектирование макетов, тестирование и контроль качества веб-страниц.