Верстка сайтов (HTML5+CSS3)

Темы лекции

Тема 1

Язык разметки HTML. Теги. Структура документа.

• Основные понятия языка разметки HTML.
• Основные теги форматирования текста. Логические и физические теги.
• Структура сайта. Мета теги и заголовок <! DOCTYPE>.
• Графические изображения.
• Ссылки на странице.
• Таблицы.
• Формы.
• Сценарии в HTML.

WYSWYGредакторы HTMLдокументов. AdobeDreamweaver.

• Принципы работы WYSWYGредакторов HTMLкода.
• Основные функции AdobeDreamweaver.
• Особенности работыAdobeDreamweaver..

Стилевые описания CSS. Иерархия стилей. Редакторы стилевых описаний.

• Основные понятия каскадных таблиц. Внутренние, глобальные и внешние стили.
• Иерархия селекторов CSS. Приоритеты CSS правил. Псевдоэлементы. Псевдоклассы. Единицы измерения в CSS.
• Свойства текста.
• Свойства шрифта.
• Цвет и фоновое изображение.
• Границы элементов.
• Отступы.
• Курсоры, полосы прокрутки.
• Правила простой верстки. Основные требования к верстке.
• Редакторы стилевых описаний.

Тема 2

Табличная и блочная верстка. Способы верстки элементов веб-страницы. Точка позиционирования. Верстка типовых элементов веб-страницы.

• Различные способы верстки.
• Табличная верстка.
• Блочная верстка.
• Свойства позиционирования.
• Свойства отображения.
• Типовые элементы: меню, кнопки, картинки.

Отзывчивый дизайн

• Фиксированная верстка.
• Резиновая верстка.
• Адаптивная верстка.
• Отзывчивая верстка.

Новые возможности HTML5 CSS3.

• Основные понятия HTML5.
• Семантическая верстка.
• Элементы, исключенные из HTML5.
• Новые правила верстки.
• Для чего нужен CSS3.
• Свойство прозрачности.
• Префексы для элементов CSS3.
• CSS генераторы.
• Новые возможности цвета и фона.
• Создание элементов со сглаженными углами.
• Подключение шрифтов.
• Добавление теней к тексту.
• Создание прозрачных элементов и картинок.
• CSS3 трасформация.
• Линейные градиенты.
• Анимация.
• Разбиение текста на столбцы.

Тема 3

Техники вёрстки. Управление исходным кодом

• Создание каркаса страницы.
• Преобразования типов
• Применение свойств позиционирования при разметке каркаса страницы
• Создание динамической сетки
• Работа с графикой
• Техника спрайтов
• Техника раздвигающихся дверей
• Структура сайта
• Понятие базового проекта

Тема 4

Тестирование и публикация сайта

• Программные средства: редакторы, браузеры
• Проблемы кроссбраузерности
• Определение тестового окружения и его настройка
• Правила тестирования вёрстки
• Начальные свойства элементов и их унификация
• Режимы работы браузера
• Процесс создания сайта
• Постановка задачи и написание технического задания
• Проектирование и определение функциональности
• Доменные имена и хостинг
• Публикация сайта и его поддержка
• Системы управления контентом

Практические занятия

Тема 1. Фиксированная верстка веб-страницы

• Создание проекта в Dreamweaver.
• Создание структуры веб-страницы.
• Подключение шрифтов.
• Позиционирование элементов.
• Оформление текста.
• Работа с картинками и фоном.
• Типовой элемент – меню.

Домашнее задание

• Создание веб-страницы.

Тема2. Работа с таблицами и формами

• Создание таблицы с данными.
• Стилевой оформление таблицы.
• Создание формы.
• Типовой элемент – кнопки.

Домашнее задание

• Создание таблицы и формы на веб-странице.

Тема 3. Табличная и резиновая верстка

• Табличная верстка.
• Резиновая верстка.

Домашнее задание

• Изменение веб-сраницы в зависимости от разных видов верстки.

Тема 4. Адаптивная и отзывчивая верстка

• Адаптивная верстка.
• Отзывчивый дизайн.
• Использование Twitter Bootstrap.

Домашнее задание

• Изменение веб-сраницы в зависимости от разных видов верстки.

Тема 5. Добавление CSS3 элементов

• Создание прозрачных элементов и картинок.
• Префексы для элементов CSS3.
• Новые возможности цвета и фона.
• Создание элементов со сглаженными углами.
• Добавление теней к тексту.
• Линейные градиенты.

Домашнее задание

• Добавление CSS3 элементов на веб-страицу

Тема 6. Добавление CSS3 элементов

• CSS3 трасформация.
• Анимация.

Домашнее задание

• Добавление CSS3 элементов на веб-страницу