+7 (812) 703-02-02 info@hse.spbstu.ru

FRNT-HTML. Верстка сайтов (HTML+CSS)

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


Аннотация

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

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

Данный курс предназначен для формирования у слушателей навыков правильной верстки, понимания основ построения html верстки, а также для изучения новейших технологий в этом направлении.


Знания и умения, полученные в результате изучения

Входе обучения слушатели расширят теоретические знании по следующим направлениям:

  • основы языка разметки гипертекста HTML/HTML5;
  • каскадные таблицы стилей CSS/CSS3;
  • отзывчивый и интуитивно понятный веб-дизайн.

Также, слушатели курса получат практические навыки:

  • в создании веб-страниц;
  • в написании правильного кода.

Содержание дисциплины

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

  • Введение
  • Как работает сайт. Клиент-серверная архитектура.
  • Язык разметки HTML.
  • Разметка текстового содержания.
  • Разметка текстовых блоков.
  • Встраивание графических изображений.

Тема 2. Разметка веб-страницы. Ссылки. Символьные сущности. Таблицы. Создание форм.

  • Символьные сущности.
  • Таблицы.
  • Пример простейшей формы.
  • Формы. Теги и атрибуты.
  • Виды полей ввода.

Тема 3. Каскадные таблицы стилей CSS.

  • Введение в CSS.
  • Виды селекторов.
  • Специфичность.
  • Боксовая модель элемента.

Тема 4. Основные свойства CSS. Создание макетов верстки.

  • Классификация свойств CSS.
  • Единицы измерения для текста и свойств.
  • Свойство display. Inline, inline-block. Верстка галереи.
  • Свойство float, clear. Обтекание на веб-странице. Очистка обтекания clearfix.
  • Свойство Overflow.
  • Позиционирование элементов на веб-странице.
  • Применение позиционирования. Позиционирование и трансформация. Фиксированное позиционирование.
  • Сборка меню

Тема 5. Дополнительные возможности CSS.

  • Подключение нестандартных шрифтов. Генерация шрифта из файла.
  • Использование иконочного шрифта. Создание собственных иконок.
  • СSS  спрайты.
  • Анимация и функции плавности.

Тема 6. Отзывчивый веб-дизайн.

  • Отзывчивый веб-дизайн.