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

Код: HTML_CSS

HTML и CSS — основные инструменты гипертекстовой разметки, с помощью которых разрабатываются веб-страницы. Формально HTML и CSS являются разными технологиями, но применяются в тесной связке друг с другом и на практике составляют единое целое. Этот учебный курс даст вам представление о современных технологиях HTML и CSS, которые совместимы со стандартами Консорциума W3C и поддерживаются в браузерах, распространённых на сегодняшний день.

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

Формат проведения

Очный или удаленный

Продолжительность

32 академических часа

Вендор

Microsoft
vendor

Вы научитесь

  • Cамостоятельно выбирать программные средства разработки в соответствии со своими задачами
  • Грамотно проектировать веб-страницы и эффективно организовывать разработку кода
  • Разрабатывать код HTML и CSS в соответствии со стандартами Консорциума W3C
  • Создавать веб-страницы в соответствии с основными принципами практичности (usability) и доступности (accessibility) для пользователей
  • Разрабатывать веб-страницы, совместимые с распространёнными браузерами: Internet Explorer 6 и выше, Firefox, Opera 7 и выше
  • Верстать веб-страницы с применением современных технологий HTML и CSS: бестабличная и комбинированная вёрстка, абсолютное и относительное позиционирование, переполнение и обрезка блоков, внедрение внешних объектов, изображения в CSS
  • Оптимизировать веб-страницы для печати и для просмотра на наладонных устройствах
  • Тестировать веб-страницы, выполнять контроль качества

Аудитория курса

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

Требования к предварительной подготовке слушателя

Знание технического английского языка

Содержание курса

Модуль 1. Веб-стандарты и их поддержка

Продолжительность: 1 ак.ч.

  • Стандарты W3C. Документация

  • DOCTYPE

  • Стандарт Unicode. Кодировки Unicode. Поддержка Unicode в различных браузерах

  • Протокол HTTP

Модуль 2. Элементы и атрибуты HTML5 и структура страницы

Продолжительность: 2 ак.ч.

  • Секции, выноски, статьи, навигационные, «шапка», «подвал»

  • Элементы форм и их атрибуты

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

Продолжительность: 1 ак.ч.

  • Инструментарий разработчика: FTP-клиенты, текстовые редакторы, графические редакторы, вспомогательные программы. Web Developer, Mozilla Firebug, Zen Coding/Emmet, IE WebDeveloper

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

Практическая работа: построение структуры страницы с использованием вспомогательных программ.

Модуль 4. Селекторы в HTML5

Продолжительность: 4 ак.ч.

  • Селекторы перешедшие из HTML4/xHTML

  • Псевдоклассы/псевдоэлементы. Контекстные селекторы. Новые селекторы в HTML

  • Ролловеры, спрайты

Практическая работа: использование специфических селекторов при верстке страницы.

Модуль 5. Введение в построение удобных для использования сайтов (usability) и доступность (accessibility) сайтов

Продолжительность: 4 ак.ч.

  • Практичность (usability) сайтов. Цели и задачи пользователей. Общие принципы разработки интерфейсов в применении к сайтам. Психологические аспекты взаимодействия пользователя с сайтом. Тестирование практичности.

  • Доступность (accessibility) сайтов. Обзор различных технических устройств для просмотра сайтов. Технические аспекты взаимодействия пользователя с сайтом. Ограниченные возможности пользователей

Семинар: Учет удобства использования сайтов

Модуль 6. Продвинутые технологии HTML и CSS

Продолжительность: 4 ак.ч.

  • Относительное и абсолютное позиционирование. Поведение дочерних элементов при позиционировании. Порядок наложения: свойство z-index. Примеры позиционирования: наложение блоков, закрепление "подвала" внизу страницы. Обрезка блока: свойство clip. Фиксированное позиционирование. Свойство display

  • Переполнение блока: свойство overflow. Особенности поддержки overflow в разных браузерах. Создание "фреймообразной" вёрстки с использованием overflow. Расширения IE: свойства overflow-x и overflow-y

  • Внедрение внешних ресурсов: элемент object. Внедрение файлов HTML, создание "фреймообразной" вёрстки с использованием object. Внедрение роликов Flash в соответствии со стандартами Консорциума W3C. Внедрение векторной графики (SVG); предоставление альтернативного растрового изображения браузерам, которые не поддерживают этот формат

  • Пиктограмма сайта (favicon). Формат ICO. Особенности поддержки пиктограммы в различных браузерах

Практическая работа: использование на практике CSS-свойств позиционирования, отображения и др.

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

Продолжительность: 4 ак.ч.

  • Условные комментарии.

  • Скрипты для поддержки селекторов и изменения поведения старых браузеров.

  • Программы эмуляторы старых версий IE

  • Фильтры.

Практическая работа: использование кроссбраузерной верстки

Модуль 8. Использование свойств CSS2 и CSS3

Продолжительность: 4 ак.ч.

  • Градиенты, анимация, трансформация (2D и 3D), переходы

  • Медиа-запросы (построение мобильных версий сайтов, адаптивная верстка)

  • @font-face (веб-шрифты), текстовые эффекты

  • Многоколоночная верстка

  • Работа с фоном (+градиенты)

  • Закругление углов, модель Flex-блоков

  • Определение технологий, поддерживаемых браузером

Практическая работа: построение выпадающего меню средствами HTML5 и CSS3

Модуль 9. Верстка макета

Продолжительность: 4 ак.ч.

  • Принципы нарезки макета из psd-файла

  • Выбор размеров и вариантов верстки

  • Верстка

Практическая работа: нарезка макета страницы

Практическая работа: верстка страницы по заданному макету.

Модуль 10. Типовые решения

Продолжительность: 4 ак.ч.

  • CSS-фреймворки

  • Динамический CSS (на примере LESS)

  • Шаблоны CMS

  • Решения на JavaScript

Затрудняетесь
с выбором курса?

Оставьте заявку на консультацию

Отправляя заявку, вы соглашаетесь с условиями обработки персональных данных

Как происходит обучение в АйТи Клауд

01 Выбор курса

В Учебном центре «АйТи Клауд» Вы можете подобрать курсы с полезным для Вас содержанием. УЦ «АйТи Клауд» готов предложить 1200+ программ различной тематики и степени сложности. Мы проводим курсы, авторизованные производителями ИТ, и также авторские программы от ведущих ИТ-экспертов.

02 Процесс обучения

Вы можете пройти обучение в различных форматах:

  • в очном - на территории Учебного центра либо территории Заказчика,

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


03 Выдача документов

По завершении обучения Вы получите удостоверение о повышении квалификации или сертификат (если у Вас отсутствует диплом о высшем образовании). После обучения на авторизованных курсах Вам также будет выдан сертификат от производителя.

poster
Затрудняетесь
с выбором курса?

Оставьте заявку на консультацию

Отправляя заявку, вы соглашаетесь с условиями обработки персональных данных

Хотите преподавать в АйТи Клауд?

Если вы имеете компетенции и хотите работать тренером курсов в АйТи Клауд - оставьте ваши данные, мы свяжемся с вами!