Тема 1. Структура документа
Введение. Как люди получают доступ к Всемирной Паутине. Как создаются сайты. Использование языка HTML для описания структуры веб-страниц. Версии HTML. Концепция «живого языка» применительно к HTML5.
HTML-элементы. Теги. Атрибуты. Элементы body, head, title. Создание веб-страниц. Структура html-документа. Код в системе управления контентом. Проверка разметки страницы с использованием сервисов W3C.
Понятие кодировки. Кириллические кодировки. Особенности выбора кодировки в современных браузерах.
Тема 2. Теги разметки текста. Списки
Заголовки. Абзацы. Перевод строк и горизонтальные линии. Пробелы. Ввод символов, которых нет на клавиатуре. Особенности использования служебных символов HTML в тексте.
Семантическая разметка. Семантические элементы блочного уровня HTML5. Браузерная совместимость новых элементов.
Физическое и логическое форматирование текста. Полужирное и курсивное начертание. Подстрочные и надстрочные знаки. Важная информация и логическое ударение. Цитаты. Аббревиатуры и акронимы. Источники и определения.
Упорядоченные списки. Неупорядоченные списки. Списки определений. Вложенные списки.
Тема 3. Ссылки
Структура ссылки. Ссылки на другие сайты. Ссылки на другие страницы вашего сайта. Структура директорий. Относительные URL-адреса. Ссылки на электронную почту. Открытие ссылок в новом окне. Ссылки на определенную часть страницы. Ссылка на определенную часть другой страницы.
Тема 4. Изображения
Выбор изображений для сайта. Размещение изображений на сайте. Добавление изображений. Высота и ширина изображений. Размещение изображений в коде. Устаревший прием: выравнивание изображений по горизонтали. Устаревший прием: выравнивание изображений по вертикали. Три правила создания изображений. Инструменты для редактирования и сохранения изображений. Формат изображений JPEG. Формат изображений GIF. Размеры изображения. Кадрирование изображений. Разрешение изображения. Векторная графика. Анимированный GIF. Прозрачность. Использование изображений во Всемирной Паутине. HTML5: иллюстрации и подписи.
Тема 5. Мультимедийное содержимое
Обзор аудиоформатов для Web: особенности и недостатки. Добавление аудиоконтента на страницу средствами HTML5.
Обзор видеоформатов для Web: особенности и недостатки. Добавление видеоконтента на страницу в HTML5. Проблемы совместимости мультимедийных форматов с браузерами, их возможные решения. Реализация нескольких источников мультимедийного контента на странице. Реализация резервных решений для старых браузеров.
HTML5: совместное использование технологий Flash и HTML5 для размещения видеоконтента.
Тема 6. Создание таблиц
Использование таблиц в веб-дизайне: устаревшие и современные тенденции. Базовая структура таблицы. Логическое деление таблицы. Заголовки таблиц. Объединение столбцов. Объединение строк.
Тема 7. Веб-формы
Элементы формы. Структура формы. Ввод текста. Ввод пароля. Текстовая область. Переключатели. Флажки. Раскрывающийся список. Список множественного выбора. Кнопки отправки и очистки формы. Метки элементов форм. Группировка элементов формы.
Новые возможности форм в HTML5: валидация данных формы. Новые типы элемента input.
Тема 8. Создание стилей и таблиц стилей
Введение в каскадные таблицы стилей. Версии CSS. Особенности применения CSS в браузере Internet Explorer. Понятие кроссбраузерного кода.
Что такое стиль. Понимание таблиц стилей. Связывание таблиц стилей с HTML-кодом. Встроенные стили. Внутренние таблицы стилей. Внешние таблицы стилей.
Обучающий урок: создание первых стилей. Создание встроенного стиля. Создание внутренней таблицы стилей. Создание внешней таблицы стилей.
Тема 9. Селекторы: определение элементов стилизации
Понятие селектора. Типы селекторов. Особенности использования селекторов типа, класса, идентификатора. Создание групповых селекторов. Универсальный селектор. Применение селекторов потомков.
Блочные элементы. Встроенные элементы. Группировка текста и элементов в блок. Группировка текста и элементов в строку. Осмысление тегов div и span.
Тема 10. Механизм наследования стилей
Что такое наследование? Упрощение таблиц стилей через наследование. Ограничения наследования.
Обучающий урок: наследование. Одноуровневое наследование. Наследование для стилизации веб-страницы. Исключения механизма наследования.
Тема 11. Запись цвета в CSS
Способы записи цвета в CSS. Безопасная веб-палитра. Шестнадцатиричное представление цвета. Использование модели RGB для записи цвета. Связь шестнадцатиричных кодов цвета с моделью RGB. Использование модели RGBA для записи цвета и ее поддержка браузерами. Реализация резервных решений для старых браузеров.
Тема 12. Форматирование текста /3 часа/
Использование шрифтов. Выбор обычного шрифта. Применение веб-шрифтов с помощью сервиса Google fonts. Создание стилей с использованием веб-шрифтов.
Установка размера шрифта. Пикселы. Ключевые слова, проценты и единица измерения em. Курсив и полужирный шрифт. Придание тексту цветового оформления. Выравнивание текста. Отступ первой строки абзаца. Прописные буквы. Украшение текста. Установка междустрочного интервала. Межсимвольный и межсловный интервал. Добавление текстовых теней. Использование селекторов псевдоэлементов для форматирования первой буквы, первой строки абзаца.
Стилизация списков. Типы списков. Позиционирование маркеров и нумерации списков. Графические маркеры. Селекторы псевдоэлементов и дочерние селекторы типов.
Обучающий урок: форматирование текста в действии.
Тема 13. Поля, отступы, границы /
Понятие блочной модели. Управление размерами полей и отступов. Сокращенный набор свойств margin и padding. Конфликты полей. Удаление пустых полей с помощью отрицательных значений. Отображение встроенных и блочных элементов. Добавление границ. Сокращенный набор свойства border. Форматирование отдельных границ.Установка цвета фона. Создание скругленных углов. Добавление теней. Определение параметров высоты и ширины. Вычисление фактических размеров блочных элементов. Переопределение ширины блока с помощью box-sizing. Задание максимальных и минимальных значений высоты и ширины. Управление поведением блочных элементов с помощью свойства overflow. Управление обтеканием содержимого плавающих элементов. Фон, границы и плавающие элементы. Отмена правил обтекания. Обучающий урок: поля, фоновые параметры, границы.
Тема 14. Управление сложной структурой стилей: каскадность
Каскадность стилей. Объединение стилей. Множество стилей для одного элемента. Особенности механизма каскадности: какие стили имеют преимущество. Конфликты стилей и их решение. Правила значимости. Управление каскадностью. Изменение значимости. Выборочная отмена значимости. Концепция обнуления стандартных стилей браузера
Обучающий урок: механизм каскадности в действии. Сброс стандартных стилей и создание стилей с чистого листа. Создание комбинированных стилей. Преодоление конфликтов стилей.
Тема 15. Стилизация графики и фона
Фоновые изображения. Управление повтором фоновых изображений. Позиционирование фоновых изображений. Фиксация фона. Определение начальной позиции фонового изображения и порядка его отсечения. Масштабирование фоновых изображений. Сокращенный вариант свойства background. Использование нескольких фоновых изображений. Применение градиентов, создаваемых с помощью сервиса Colorzilla.
Обучающий урок 1: создание фотогалереи. Обучающий урок 2: использование фоновых изображений.
Тема 16. Работа с навигацией сайта
Выборка стилизуемых ссылок. Понимание состояний ссылок. Стилизация ссылок. Селекторы псевдоклассов. Селекторы атрибутов. Стилизация отдельных видов ссылок. Оригинальные приемы подчеркивания ссылок.
Создание кнопок. Создание панелей навигации. Вертикальные панели навигации. Горизонтальные панели навигации. CSS-стиль для предварительной загрузки ролловеров.
Обучающий урок 1: стилизация ссылок. Обучающий урок 2: создание панели навигации.
Тема 17. Форматирование таблиц
Создание стилей для таблиц. Добавление отступов. Настройка горизонтального и вертикального выравнивания. Управлением границами таблицы при помощи CSS. Применение стилей к строкам и столбцам.
Обучающий урок: создание стилей для таблиц.
Тема 18.Разметка страницы на основе плавающих элементов
Основы плавающих разметок. Использование плавающих элементов в разметках. Решение проблем плавающих элементов. Создание столбцов на всю высоту. Предотвращение выпадений плавающих элементов. Определение параметров высоты и ширины. Вычисление фактических размеров блочных элементов. Переопределение ширины блока с помощью box-sizing. Задание максимальных и минимальных значений высоты и ширины.
Обучающий урок: многоколоночная разметка. Структурирование HTML. Создание стилей разметки. Макет с двумя колонками. Добавление еще одного столбца. Фиксация ширины. Смешанный свободный и фиксированный дизайн.
Тема 19. Позиционирование
Типы позиционирования: статическое, абсолютное, относительное, фиксированное. Особенности поведения элементов с разными типами позиционирования
Обучающий урок: Использование позиционирования при создании макета страницы.
Тема 20. Публикация сайта в Интернете
Как зарегистрировать домен. Что такое хостинг. Зачем нужен сертификат безопасности сайта и как его получить. Выгрузка сайта на хостинг..
Понятие поисковой оптимизации (SEO). Поисковая оптимизация on-page. Как выбрать ключевые слова и фразы.
Вернуться в начало раздела
