+7 (812) 703-02-02 info@hse.spbstu.ru
16.08.2022 19:00 День открытых дверей программ профессиональной переподготовки
Онлайн-формат. Для участия нужна регистрация...

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

Длительность дисциплины: 76 ак.ч.


Аннотация

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

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

Данный курс предназначен для формирования у слушателей навыков правильной верстки, понимания основ построения 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 элементов на веб-страницу