Internet-технологии

Расписание и стоимость

Условия обучения

Проведение занятий Преподаватели Учебные материалы Документы об окончании Отзывы слушателей

Другие курсы направления

Основы Интернет-технологий Системы управления контентом (CMS) Веб-маркетинг Веб-дизайн Веб-программирование

Обратная связь

+7 (812) 703-02-02 Форум
Печать

DEV-P33. Профессиональная верстка. HTML5 и CSS3

Продолжительность обучения: 40 ак.ч. очно
График обучения: 10 дней по 4 ак.ч.

Начало занятий:

    20.11.2017, 1000

Записаться на курс

Аннотация

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

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

На курсе рассматриваются отдельные приемы, а также широко используемые в среде веб-разработки css-фреймворки. Это комплексные решения, включающие настраиваемую модульную сетку, стили расположения и отображения блоков, внедрение шрифтов, кроссбраузерное использование новых возможностей HTML5, CSS3. Обсуждается выбор методов верстки сайта с учетом требований к дизайну, адаптируемости, кроссбраузерности, времени загрузки и т.п.

На курсе используются основные рабочие инструменты верстальщика: как десктопные программы, так и полезные online-сервисы. Используется бесплатное, постоянно обновляемое ПО, в разработке которого участвует широкий круг профессионалов. Выгодная особенность подобных программ – в постоянном оперативном пополнении функциональных возможностей, которые полезны и для решения задач верстки на основе современных технологий, и для облегчения рутинных работ, известных разработчикам «из первых рук».

Документы об окончании обучения

  • Сертификат учебного центра
    Сертификат учебного центра
  • Удостоверение повышении квалификации (выдается лицам имеющим высшее или среднее профессиональное образование)
    Удостоверение повышении квалификации (выдается лицам имеющим высшее или среднее профессиональное образование)

Преподаватели

Знания и умения, полученные в результате обучения

В ходе обучения слушатели:

  • ознакомятся с технологиями верстки адаптируемых интерфейсов,
  • научатся использовать средства CSS3 для позиционирования и оформления статических, интерактивных элементов веб-страниц,
  • изучат методы внедрения графических, аудио, видео элементов разных форматов с ис-пользованием возможностей HTML5,
  • научатся использовать комплекс программных средств верстки, отладки для работы с html-,css-кодом,
  • рассмотрят вспомогательные сервисы для работы с иконками, шрифтами, изображениями для адаптивного веб-дизайна,
  • рассмотрят и научатся применять методы кроссбраузерной верстки,
  • изучат состав и особенности применения наиболее популярных css-фреймворков, облегчающих рутинные операции в создании и редактировании шаблона сайта,
  • освоят подходы, поддерживающие преемственность методов формирования элементов интерфейса сайта от стадии прототипирования, отрисовки графических элементов до верстки;
  • выполнят практические работы по разработке нескольких сайтов с учетом современных требований по используемым технологиям с использованием профессиональных средств работы.

Расписание

Начало курса Окончание курса Даты занятий Время занятий Номер аудитории Преподаватель
20.11.2017 01.12.2017 По будним дням 1000-1320
10 дней по 4 ак.ч. в день
Аудитория №211 Осипова Оксана Геннадьевна Записаться на курс

Стоимость

Дата Физ. лица, руб. Юр. лица, руб.
Без скидки Cкидка 10%* Cкидка 15%** Без скидки Cкидка 10% Cкидка 15%
Цена c 07.04.2016 12000 10800 10200 14000 12600 11900

*Скидка 10% для ранее обучавшихся, при одновременной оплате 2х курсов, а также по акциям.
**Скидка 15% при одновременной оплате 3х и более курсов.
Примечание. Студентам ВУЗов Санкт-Петербурга очной формы обучения скидка до 25%.
Скидки не предоставляется на курсы с дистанционной формой обучения.
Скидки не предоставляется на комплексные и модульные программы обучения.

Требования к начальному уровню знаний

Слушатели должны иметь теоретические и практические навыки по использованию HTML4 и CSS2 для верстки веб-страниц.

Курсы, обеспечивающие достаточный начальный уровень знаний:

DEV-P32. Технологии верстки веб-интерфейсов

Программа курса

Занятие 1. Стандарт HTML5 в веб-разработке.

Обзор технологий HTML5. HTML5 для верстки. Семантическая разметка. Микроданные. Новые элементы и атрибуты, введенные в HTML5. Обзор средств CSS3 – новые блоки свойств. Обзор ресурсов, используемых для верстки по новым стандартам. Выбор программных средств и сервисов для верстки и отладки. Поддержка HTML5 в браузерах. Способы решения проблем поддержки. Распознавание возможностей браузеров. Библиотека Modernizr.

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

Занятие 2. Стандарт СSS3

Селекторы в CSS3. Свойства блочной модели. Поддержка новых свойств, селекторов CSS3 браузерами

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

Занятие 3 Средства СSS3 для позиционирования.

Выбор схем верстки. Обеспечение преемственности позиционирования элементов макета от этапа прототипирования до верстки. Новые средства позиционирования элементов графического интерфейса, предоставляемые CSS3. CSS3 box. Flexible Box. Multi-column.

Практическая работа: примеры верстки на основе различных свойств CSS3-позиционирования.

Занятие 4. Составляющие адаптируемого дизайна

Адаптируемые изображения. Применение и поддержка SVG. Паттерны адаптируемой навигации.

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

Занятие 5. Фреймворки для верстки. Работа с фреймворком Boilerplate

Обзор фреймворков для верстки веб-сайтов. Фреймворки для адаптивных веб-сайтов. Состав фреймворка Boilerplate. Настраиваемые компоненты. Использование Boilerplate для верстки адаптивных веб-сайтов.

Практическая работа: верстка веб-страниц с применением фреймворка Boilerplate.

Занятие 6. Препроцессоры CSS

Обзор CSS-препроцессоров. LESS — динамический язык стилевой разметки. Средства работы с препроцессорами CSS.

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

Занятие 7. Возможности фреймворка Twitter Bootstrap

Состав фреймворка. Настраиваемые компоненты. Использование Twitter Bootstrap для верстки адаптивных веб-сайтов.

Практическая работа: верстка веб-страниц с применением фреймворка Bootstrap.

Занятие 8. Новые возможности CSS3 и HTML5 для работы с элементами

CSS3 анимация. Переходы. Трансформации. Возможности HTML5 для работы с Web-формами в HTML5. Элементы audio, video.

Практическая работа: внедрение элементов с использованием возможностей HTML5.

Занятие 9. Подходы в веб-разработке для браузеров, поддерживающих разные возможности

Прогрессивное улучшение (progressive enhancement). Корректное сокращение функциональности (graceful degradation). Решения для старых браузеров по поддержке некоторых наиболее востребованных возможностей - SVG, canvas.

Практическая работа: тестирование сверстанных веб-интерфейсов «отзывчивого» дизайна.

Занятие 10. Экзамен