Центре компьютерного обучения Института менеджмента, маркетинга и финансов (ЦКО ИММиФ)

Программа курса:
Тема 1. Создание HTML-страницы (1 час)

HTML: структура языка. Как работают HTML-теги. Особенности HTML 4, XHTML 1, HTML5. Программное обеспечение для HTML и CSS. Объявление и идентификация документа. Добавление элемента html. Элементы head и title. Элемент meta. Кодировка документа. Ключевые слова, описание и авторство. Элемент body. Комментарии языка html. Подготовка шаблона разметки.
Тема 2. Добавление текста и ссылок (2 часа)

Правильное использование заголовков. Добавление абзацев. Использование тега разрыва строки. Упорядоченные списки. Неупорядоченные списки. Вложенные списки. Списки определений. Ссылки. Ссылки электронной почты. Внутристраничное связывание. Добавление содержимого в шаблон.
Тема 3. Добавление изображений, мультимедиа и сценариев (2 часа)

Элемент img. Использование атрибутов width и height. Предоставление альтернативного текста. Связывание изображения. Связывание аудио- или видеофайла. Вставка файлов при помощи элемента object. Помещение файлов Flash. Добавление скриптов. Вставка скрипта. Связывание со скриптом. Скрипты и проблемы браузеров. Использование элемента noscript.
Тема 4. Создание таблиц (2 часа)

Элемент table. Ширина таблицы. Границы таблицы и интервалы. Добавление строки таблицы. Добавление ячеек таблицы. Добавление заголовков таблицы. Добавление заглавия. Описание таблицы. Объединение строк. Объединение столбцов. Комбинирование атрибутов colspan и rowspan. Группирование столбцов таблицы: элемент col. Группирование столбцов таблицы при помощи элемента colgroup. Группирование строк таблицы.
Тема 5. Создание форм (2 часа)

Элемент form. Добавление поля ввода. Добавление флажков и переключателей. Заранее выбранные элементы. Использование меню формы. Использование текстовых областей. Кнопки reset (сбросить) и submit (отправить). Обеспечение доступности форм с использованием элемента label. Группирование полей формы. Группирование элементов меню. Настройка и улучшение форм.
Тема 6. Работа с фреймами (1 час)

Создание набора фреймов. Добавление столбцов. Работа со строками. Комбинирование столбцов и строк. Элементы управления границами, изменением размеров и скроллингом. Именование и указание целевых фреймов. Фреймы без границ. Создание доступных фреймов при помощи элемента noframes. Встроенные фреймы.
Тема 7. Пересмотр языка HTML для совместного использования с CSS (1 час)

Прошлое и настоящее HTML. Написание HTML кода для CSS. Теги <div> и <span>. Что нужно забыть о HTML. Важность doctype.
Тема 8. Создание стилей и таблиц стилей (2 часа)

Что такое стиль. Понимание таблиц стилей. Внутренние таблицы стилей. Внешние таблицы стилей. Связывание таблиц стилей с HTML-кодом. Прикрепление таблиц стилей с использованием CSS.
Тема 9. Селекторы: определение элементов стилизации (2 часа)

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

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

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

Стилизация текста. Выбор шрифта. Шрифты с засечками (serif). Шрифты без засечек (sans-serif). Моноширинные шрифты. Дополнительные шрифты. Придание тексту цветового оформления. Установка размера шрифта. Пикселы. Ключевые слова, проценты и единица измерения em. Форматирование символов и слов. Курсив и полужирный шрифт. Прописные буквы. Украшение текста. Межсимвольный и межсловный интервал. Форматирование абзацев текста. Установка междустрочного интервала. Выравнивание текста. Отступ первой строки абзаца и удаление полей абзацев. Форматирование первой буквы, первой строки абзаца. Стилизация списков. Типы списков. Позиционирование маркеров и нумерации списков. Графические маркеры.
Тема 13. Поля, отступы, границы (2 часа)

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

CSS и тег <img>. Фоновые изображения. Управление повтором фоновых изображений. Позиционирование фоновых изображений. Ключевые слова. Точные значения. Процентные значения. Фиксация изображения на месте. Сокращенный вариант свойства background. Создание фотогалереи. Заключение изображений в рамку. Добавление подписей к изображениям. Добавление теней. Использование фоновых изображений. Замена границ изображениями. Использование графики для маркированных списков. Закругление углов бокового меню.
Тема 15. Работа с навигацией сайта (2 часа)

Выборка стилизуемых ссылок. Понимание состояний ссылок. Выборка отдельных ссылок. Стилизация ссылок. Подчеркивание ссылок. Создание кнопок. Использование изображений. Создание панелей навигации. Использование маркированных списков. Вертикальные панели навигации. Горизонтальные панели навигации. Современные методы стилизации ссылок. Большие активизируемые кнопки. CSS-стиль для предварительной загрузки ролловеров. Вкладки. Исправление ошибок Internet Explorer. Стилизация отдельных видов ссылок. Ссылки на другие сайты. Ссылки на адреса электронной почты. Ссылки на определенные типы файлов.
Тема 16. Форматирование таблиц и форм (2 часа)

Правильное использование таблиц. Создание стилей для таблиц. Добавление отступов. Настройка горизонтального и вертикального выравнивания. Создание границ. Применение стилей к строкам и столбцам. Создание стилей для форм. Элементы HTML-форм. Компоновка форм с помощью CSS.
Тема 17. Разметка страницы на основе плавающих элементов (3 часа)

Как работает CSS-разметка. Типы разметок веб-страницы. Основы плавающих разметок. Использование плавающих элементов в разметках. Перемещение всех столбцов. Плавающие элементы внутри плавающих элементов. Использование отрицательных полей для размещения элементов. Преодоление проблем перемещения. Отмена и установка перемещения для элементов. Создание столбцов на всю высоту. Предотвращение перепадов плавающих элементов. Обработка ошибок в Internet Explorer. Ошибка двойного поля. Трехпиксельные промежутки. Другие проблемы Internet Explorer.
Тема 18. Позиционирование элементов на веб-странице (2 часа)

Как работают свойства позиционирования. Установка значений расположения. Когда абсолютное позиционирование является относительным. Когда и где использовать относительное позиционирование. Наложение элементов. Скрытие частей страницы. Мощные стратегии позиционирования. Позиционирование внутри элемента. Исключение элемента за пределы блока. Использование CSS-позиционирования для разметки страницы. Создание CSS-стиля для шапки страницы с использованием фиксированного позиционирования.
Тема 19. CSS для распечатываемых веб-страниц (2 часа)

Как работают аппаратно-зависимые таблицы стилей. Как добавлять аппаратно-зависимые таблицы стилей. Определение типа устройства для внешней таблицы стилей. Определение типа устройства внутри таблицы стилей. Создание таблиц стилей для печати. Использование правила !important для отмены экранного стиля. Изменение текстовых стилей. Стилизация фонов для печати. Скрытие нежелательных областей страницы. Добавление разрывов страницы для печати.
Тема 20. Новые возможности CSS 3 (2 часа)

Обзор CSS 3. Селекторы в CSS 3. Селекторы дочерних узлов. Селекторы типов. Прозрачность. RGBA-цвет. Тень для текста. Тень для элементов страницы. Граница в виде изображения. Скругленные углы. Выбор произвольных шрифтов. Генерируемое содержимое страницы. Многоколоночная верстка.