Модуль 1. Веб-стандарты и их поддержка - Стандарты W3C. Документация.
- DOCTYPE.
- Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах.
- Протокол HTTP.
Модуль 2. Элементы и атрибуты HTML5 и структура страницы - Секции, выноски, статьи, навигационные, «шапка», «подвал».
- Элементы форм и их атрибуты.
Модуль 3. Эффективное использование инструментов разработки веб-страниц - Инструментарий разработчика:, FTP-клиенты, текстовые редакторы, графические редакторы, вспомогательные программы. Web Developer, Mozilla Firebug, Zen Coding/Emmet, IE WebDeveloper.
- Составление и анализ требований к вёрстке веб-страниц . Проектирование макетов. Тестирование веб-страниц: просмотр в различных браузерах, проверка валидатором, просмотр при различной ширине окна браузера и различных размерах шрифта. Контроль качества веб страниц.
Практическая работа: построение структуры страницы с использованием вспомогательных программ.
Модуль 4. Селекторы в HTML5 - Селекторы перешедшие из HTML4/xHTML.
- Псевдоклассы/псевдоэлементы. Контекстные селекторы. Новые селекторы в HTML.
- Ролловеры, спрайты.
Практическая работа: использование специфических селекторов при верстке страницы.
Модуль 5. Введение в построение удобных для использования сайтов (usability) и доступность (accessibility) сайтов - Практичность (usability) сайтов. Цели и задачи пользователей. Общие принципы разработки интерфейсов в применении к сайтам. Психологические аспекты взаимодействия пользователя с сайтом. Тестирование практичности.
- Доступность (accessibility) сайтов. Обзор различных технических устройств для просмотра сайтов. Технические аспекты взаимодействия пользователя с сайтом. Ограниченные возможности пользователей
Семинар: Учет удобства использования сайтов
Модуль 6. Продвинутые технологии HTML и CSS - Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z-index. Примеры позиционирования: наложение блоков, закрепление 'подвала' внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование. Свойство display.
- Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание 'фреймообразной' вёрстки с использованием overflow. Расширения IE: свойства overflow-x и overflow-y.
- Внедрение внешних ресурсов: элемент object. Внедрение файлов HTML, создание 'фреймообразной' вёрстки с использованием object. Внедрение роликов Flash в соответствии со стандартами Консорциума W3C. Внедрение векторной графики (SVG); предоставление альтернативного растрового изображения браузерам, которые не поддерживают этот формат.
- Пиктограмма сайта (favicon). Формат ICO. Особенности поддержки пиктограммы в различных браузерах.
Практическая работа: использование на практике CSS-свойств позиционирования, отображения и др.
Модуль 7. Совместимость веб-страниц с различными браузерами - Условные комментарии.
- Скрипты для поддержки селекторов и изменения поведения старых браузеров.
- Программы эмуляторы старых версий IE.
- Фильтры.
Практическая работа: использование кроссбраузерной верстки
Модуль 8. Использование свойств CSS2 и CSS3 - Градиенты, анимация, трансформация (2D и 3D), переходы
- Медиа-запросы (построение мобильных версий сайтов, адаптивная верстка)
- font-face (веб-шрифты), текстовые эффекты,
- Многоколоночная верстка,
- Работа с фоном (+градиенты)
- Закругление углов, модель Flex-блоков.
- Определение технологий, поддерживаемых браузером.
Практическая работа: построение выпадающего меню средствами HTML5 и CSS3
Модуль 9. Верстка макета - Принципы нарезки макета из psd-файла.
- Выбор размеров и вариантов верстки.
- Верстка.
Практическая работа: нарезка макета страницы
Практическая работа: верстка страницы по заданному макету.
Модуль 10. Типовые решения - CSS-фреймворки.
- Динамический CSS (на примере LESS).
- Шаблоны CMS
- Решения на JavaScript.