HTML и CSS. Уровень 2
Игорь Борисов | 2014 |PCRe
.SpoilerTarget">СпойлерМодуль 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.Продающая страница:
Скачать
Include file key - yRbEDKR805OndeHNW3PlX6UGqJQFWB61fQtLMeESF78
Игорь Борисов | 2014 |PCRe
.SpoilerTarget">СпойлерМодуль 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.Продающая страница:
Скачать
Include file key - yRbEDKR805OndeHNW3PlX6UGqJQFWB61fQtLMeESF78
