В современном мире использование веб-сайтов стало обычным повседневным занятием. И это не удивительно, ведь веб-сайты являются источником получения, хранения, обработки и передачи информации и тем самым являются необходимой частью жизни как большой корпорации, маленькой компании или просто человека.Само понятие «веб-сайт» подразумевает под собой совокупность технологий дизайна, верстки, программирования и продвижения. Все эти этапы тесно связаны между собой, поэтому успех веб-сайта зависит от правильного понимания взаимосвязей всех технологий сайтостроения.
Этап верстки можно назвать одним из ключевых этапов в создании веб-сайта, по той причине, что как раз верстка отвечает за скорость загрузки страниц и правильное отображение на множестве современных устройств, а это очень важно для конечного пользователя. К сожалению, существует острая проблема во многих проектах, где необходимо доработать или исправить существующую верстку, из-за не умения и неправильного её использования.
Данный курс предназначен для формирования у слушателей навыков правильной верстки, понимания основ построения html верстки, а также для изучения новейших технологий в этом направлении.
Знания и умения, полученные в результате изучения
Входе обучения слушатели расширят теоретические знании по следующим направлениям:
- основы языка разметки гипертекста HTML/HTML5;
- каскадные таблицы стилей CSS/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 элементов на веб-страницу