HTML5 и CSS3. Создание сайтов по стандартам W3C: Курсы

Тема 1. Структура документа (1 час)

Введение. Как люди получают доступ к Всемирной Паутине. Как создаются сайты. Примеры структуризации страниц. Структурирование документов Microsoft Word. Использование языка HTML для описания структуры веб-страниц. HTML-элементы. Теги. Атрибуты. Элементы Body, Head, Title. Создание веб-страниц в операционных системах Windows и OS X. Код в системе управления контентом. Как создаются другие сайты.

Тема 2. Текст и списки (2 часа)

Заголовки. Абзацы. Полужирное и курсивное начертание. Подстрочные и надстрочные знаки. Пробелы. Перевод строк и горизонтальные линии. Визуальные редакторы и режим просмотра кода. Семантическая разметка. Важная информация и логическое ударение. Цитаты. Аббревиатуры и акронимы. Источники и определения. Информация о веб-дизайнере. Исправление контента. Упорядоченные списки. Неупорядоченные списки. Списки определений. Вложенные списки.

Тема 3. Ссылки (1 час)

Структура ссылки. Ссылки на другие сайты. Ссылки на другие страницы вашего сайта. Структура директорий. Относительные URL-адреса. Ссылки на электронную почту. Открытие ссылок в новом окне. Ссылки на определенную часть страницы. Ссылка на определенную часть другой страницы.

Тема 4. Изображения (2 часа)

Выбор изображений для сайта. Размещение изображений на сайте. Добавление изображений. Высота и ширина изображений. Размещение изображений в коде. Устаревший прием: выравнивание изображений по горизонтали. Устаревший прием: выравнивание изображений по вертикали. Три правила создания изображений. Инструменты для редактирования и сохранения изображений. Формат изображений JPEG. Формат изображений GIF. Размеры изображения. Кадрирование изображений. Разрешение изображения. Векторная графика. Анимированный GIF. Прозрачность. Использование изображений во Всемирной Паутине. HTML5: иллюстрации и подписи.

Тема 5. Создание таблиц (1 час)

Что такое таблица? Базовая структура таблицы. Заголовки таблиц. Объединение столбцов. Объединение строк. Длинные таблицы. Старый код: ширина и промежуток. Старый код: границы и заливка.

Тема 6. Веб-формы (2 часа)

Элементы формы. Структура формы. Ввод текста. Ввод пароля. Текстовая область. Переключатели. Флажки. Раскрывающийся список. Список множественного выбора. Загрузка файлов на сервер. Кнопка подтверждения. Графическая кнопка. Кнопки и скрытые элементы форм. Метки элементов форм. Группировка элементов формы. HTML5: валидация данных формы. HTML5: ввод даты. HTML5: ввод URL-адреса и адреса электронной почты. HTML5: поле ввода поискового запроса.

Тема 7. Дополнительная разметка (1 час)

Эволюция языка HTML. Типы документов. Комментарии в HTML. Атрибут ID. Атрибут Class. Блочные элементы. Встроенные элементы. Группировка текста и элементов в блок. Группировка текста и элементов в строку. Плавающие фреймы. Сведения о странице. Специальные символы.

Тема 8. Flash, видео- и аудиоконтент (2 часа)

Как работает технология Flash. Использование технологии Flash. Экскурс в историю: Flash, видео и аудиоконтент. Добавление Flash-контента на веб-страницу. Обзор видеоформатов и проигрывателей. Сайты видеохостинга. Подготовка Flash-контента для размещения на сайте. Добавление Flash-контента на страницу. HTML5: подготовка видеоконтента для добавления на страницу. HTML5: добавление видеоконтента для добавления на страницу. HTML5: несколько источников видеоконтента. HTML5: совместное использование технологий Flash и HTML5 для размещения видеоконтента. Добавление аудиоконтента на страницу. Добавление Flash-аудиопроигрывателя. HTML5: добавление аудиоконтента на страницу. HTML5: несколько источников аудиоконтента.

Тема 9. HTML для CSS (1 час)

HTML: прошлое и настоящее. Написание HTML-кода для CSS. Два HTML-тега, о которых не следует забывать. Осмысление тегов div и span. Дополнительные теги в HTML5. Составление своего представления о макете страницы. О каких элементах HTML следует забыть. Важность doctype. Обеспечение использования самой последней версии Internet Explorer.

Тема 10. Создание стилей и таблиц стилей (2 часа)

Что такое стиль. Понимание таблиц стилей. Внутренние таблицы стилей. Внешние таблицы стилей. Связывание таблиц стилей с HTML-кодом. Прикрепление таблиц стилей с использованием CSS.Обучающий урок: создание первых стилей. Создание встроенного стиля. Создание внутренней таблицы стилей. Создание внешней таблицы стилей.

Тема 11. Селекторы: определение элементов стилизации (2 часа)

Селекторы типов: дизайн страницы. Селекторы классов: точное управление. ID-селекторы: определение элементов веб-страниц. Стилизация групп тегов. Создание групповых селекторов. Универсальный селектор. Стилизация вложенных тегов. Дерево HTML. Создание селекторов потомков. Создание модулей. Псевдоклассы и псевдоэлементы. Стилизация ссылок. Стилизация фрагментов абзацев. Дополнительные псевдоклассы и псевдоэлементы. Селекторы атрибутов. Селекторы дочерних элементов. Селекторы типов дочерних элементов. Селекторы смежных элементов одного уровня. Селектор :not(). Обучающий урок: примеры использования селекторов. Создание групповых селекторов. Создание селекторов классов. Создание селекторов потомков. Создание ID-селекторов.

Тема 12. Механизм наследования стилей (1 час)

Что такое наследование? Упрощение таблиц стилей через наследование. Ограничения наследования. Обучающий урок: наследование. Одноуровневое наследование. Наследование для стилизации веб-страницы. Исключения механизма наследования.

Тема 13. Управление сложной структурой стилей: каскадность 91 час)

Каскадность стилей. Объединение унаследованных стилей. Превосходство близкого родительского элемента-предка. Преимущества непосредственно определенного стиля. Множество стилей для одного тега. Особенности механизма каскадности: какие стили имеют преимущество. Управление каскадностью. Изменение значимости. Выборочная отмена значимости. Как избежать войн значимости. Концепция обнуления стандартных стилей браузера. Обучающий урок: механизм каскадности в действии. Сброс стандартных стилей и создание стилей с чистого листа. Создание комбинированных стилей. Преодоление конфликтов.

Тема 14. Форматирование текста (3 часа)

Использование шрифтов. Выбор обычного шрифта. Использование веб-шрифтов. Типы файлов шрифтов. Правовые вопросы использования веб-шрифтов. Поиск веб-шрифтов. Создание нескольких форматов шрифтов. Использование директивы @font-face. Создание стилей с использованием веб-шрифтов. Работа с полужирными и курсивными вариантами. Простой способ добавления полужирного и курсивного вариантов. Добавление полужирного и курсивного вариантов и поддержка Internet Explorer 8. Google web fonts. Поиск и выбор шрифтов. Использование шрифтов Google. Придание тексту цветового оформления. Шестнадцатеричное представление цвета. RGB. RGBA. HSL и HSLA. Установка размера шрифта. Пикселы. Ключевые слова, проценты и единица измерения em. Форматирование символов и слов. Курсив и полужирный шрифт. Прописные буквы. Украшение текста. Межсимвольный и межсловный интервал. Добавление текстовых теней. Форматирование абзацев текста. Установка междустрочного интервала. Выравнивание текста. Отступ первой строки абзаца и удаление полей абзацев. Форматирование первой буквы, первой строки абзаца. Стилизация списков. Типы списков. Позиционирование маркеров и нумерации списков. Графические маркеры. Обучающий урок: форматирование текста в действии.

Тема 15. Поля, отступы, границы (4 часа)

Понятие блочной модели. Управление размерами полей и отступов. Сокращенный набор свойств margin и padding. Конфликты полей. Удаление пустых полей с помощью отрицательных значений. Отображение встроенных и блочных элементов. Добавление границ. Сокращенный набор свойства border. Форматирование отдельных границ.Установка цвета фона. Создание скругленных углов. Добавление теней. Определение параметров высоты и ширины. Вычисление фактических размеров блочных элементов. Переопределение ширины блока с помощью box-sizing. Задание максимальных и минимальных значений высоты и ширины. Управление поведением блочных элементов с помощью свойства overflow. Управление обтеканием содержимого плавающих элементов. Фон, границы и плавающие элементы. Отмена правил обтекания. Обучающий урок: поля, фоновые параметры, границы.

Тема 16. Добавление графики на веб-страницы (3 часа)

CSS и тег . Фоновые изображения. Управление повтором фоновых изображений. Позиционирование фоновых изображений. Ключевые слова. Точные значения. Процентные значения. Фиксация изображения на месте. Определение начальной позиции фонового изображения и порядка его отсечения. Масштабирование фоновых изображений. Сокращенный вариант свойства background. Использование нескольких фоновых изображений. Использование градиентных фонов. Линейные градиенты. Цветовые опорные точки. Префиксы производителей и поддержка Internet Explorer. Повторяющиеся линенйные градиенты. Радиальные градиенты. Повторяющиеся радиальные градиенты. Применение градиентов, создаваемых с помощью Colorzilla. Обучающий урок 1: совершенствуем изображения. Обучающий урок 2: создание фотогалереи. Обучающий урок 3: использование фоновых изображений.

Тема 17. Работа с навигацией сайта (2 часа)

Выборка стилизуемых ссылок. Понимание состояний ссылок. Выборка отдельных ссылок. Группирование ссылок с помощью селекторов потомков. Стилизация ссылок. Подчеркивание ссылок. Создание кнопок. Использование изображений. Создание панелей навигации. Использование маркированных списков. Вертикальные панели навигации. Горизонтальные панели навигации. CSS-стиль для предварительной загрузки ролловеров. Стилизация отдельных видов ссылок. Ссылки на другие сайты. Ссылки на адреса электронной почты. Ссылки на определенные типы файлов. Обучающий урок 1: стилизация ссылок. Обучающий урок 2: создание панели навигации.

Тема 18. Осуществление преобразований, переходов и анимации с помощью CSS (2 часа)

Преобразования. Вращение. Масштабирование. Перемещение. Наклон. Множественные преобразования. Исходная точка. Переходы. Добавление перехода. Распределение скорости выполнения перехода по времени. Задержка начала перехода. Краткая запись свойства transition. Анимация. Определение ключевых кадров. Применение анимации. Распределение скорости выполнения анимации по времени. Завершение анимации. Краткая запись свойства animation. Приостановка анимации. Анимация при проходе указателя мыши над элементом. Обучающий урок.

Тема 19. Форматирование таблиц и форм (3 часа)

Правильное использование таблиц. Создание стилей для таблиц. Добавление отступов. Настройка горизонтального и вертикального выравнивания. Создание границ. Применение стилей к строкам и столбцам. Создание стилей для форм. Элементы HTML-форм. Компоновка форм с помощью CSS. Обучающий урок 1: создание стилей для таблиц. Обучающий урок 2: создание стилей для форм.

Тема 20. Макет страницы (5 часов)

Типы разметок веб-страницы. Как работает CSS-разметка. Элементы секционирования в HTML5. Технология разметки CSS. Стратегии разметок.
Основы плавающих разметок. Использование плавающих элементов в разметках. Перемещение всех столбцов. Плавающие элементы внутри плавающих элементов. Решение проблем плавающих элементов. Отмена и установка перемещения для элементов. Создание столбцов на всю высоту. Предотвращение выпадений плавающих элементов. Предотвращение выпадений плавающих элементов с помощью свойства box-sizing. Обучающий урок: многоколоночная разметка. Структурирование HTML. Создание стилей разметки. Добавление еще одного столбца. Добавление разрядки. Фиксация ширины. Смешаный свободный и фиксированный дизайн.
Макетные сетки. Пример сетки. Возможные макеты: сетка шириной в 960 пикселов, состоящая из 12 колонок. CSS-фреймворки. Использование сетки 960.GS.Макет на основе сетки 960.GS.

Тема 21. Основы адаптивного веб-дизайна (1 час)

Оcновы адаптивного веб-дизайна. Настройка веб-страниц для RWD. Медиазапросы. Стратегии использования медиазапросов. Создание контрольных точек. Для чего сначала разрабатывать дизайн: для настольных или для мобильных систем? Создание медиазапросов. Включение запросов в таблицу стилей. Основная структура таблицы стилей. Предпочтение мобильным системам. Гибкие сетки. Важность порядка следования исходного HTML-кода. Сброс блочной модели. Преобразование фиксированной ширины в гибкие сетки. Изменчивые изображения. Недостатки изменчивых изображений. Видео и Flash-графика. Обучающий урок по адаптивному веб-дизайну. Изменение порядка следования исходного кода HTML. Изменчивые изображения. Добавление стилей для экранов планшетных устройств. Добавление стилей для телефонов.

Тема 22. Позиционирование элементов на веб-странице (2 часа)

Как работают свойства позиционирования. Установка значений расположения. Когда абсолютное позиционирование является относительным. Когда и где использовать относительное позиционирование. Наложение элементов. Скрытие частей страницы. Эффективные стратегии позиционирования. Позиционирование внутри элемента. Исключение элемента за пределы блока. Создание фреймов с помощью стилей CSS с использованием фиксированного позиционирования. Использование CSS-позиционирования для разметки страницы. Обучающий урок: позиционирование элементов страницы. Улучшение баннера страницы. Добавление надписи к фотографии.

Тема 23. CSS для распечатываемых веб-страниц (1 час)

Как работают аппаратно-зависимые таблицы стилей. Как добавлять аппаратно-зависимые таблицы стилей. Определение типа устройства для внешней таблицы стилей. Определение типа устройства внутри таблицы стилей. Создание таблиц стилей для печати. Использование правила !important для отмены экранного стиля. Изменение текстовых стилей. Стилизация фонов для печати. Скрытие нежелательных областей страницы. Добавление разрывов страницы для печати. Обучающий урок: создание таблицы стилей для печати.

Тема 24. Процесс разработки. Практическая информация (2 часа)

Для кого предназначен сайт. Почему люди посещают ваш сайт. Чего хотят добиться ваши посетители. Какая информация требуется вашим посетителям. Как часто люди будут посещать ваш сайт. Карта сайта Структурные схемы. Передача сообщения посредством дизайна. Визуальная иерархия. Группировка и подобие. Разработка навигации.
Понятие поисковой оптимизации (SEO). Поискова оптимизация on-page. Как выбрать ключевые слова и фразы. Аналитика: изучение аудитории сайта. Сколько людей посещает ваш сайт? Что именно просматривают посетители вашего сайта? Откуда приходят ваши посетители? Доменное имя и хостинг. FTP и инструменты сторонних разработчиков.

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

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

Продолжительность курса в 48 учебных часов, отводимых на программу курса, является достаточной для того, чтобы получить базовые навыки HTML-верстки, достаточные для трудоустройства или выполнения собственных проектов. Вы можете углубить свою подготовку, воспользовавшись дополнительным бесплатным временем для самостоятельной работы в объеме до 16 учебных часов.

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

Расписание: возможно обучение в вечерних (с 17.40 до 20.20) группах, в формате вебинара или индивидуально.