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

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

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


Аннотация

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

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

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


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

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

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

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

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

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

Тема 1. Язык разметки HTML

  • Язык разметки HTML.
  • Теги HTML.
  • Вложенность тегов.
  • Структура документа.

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

  • Создание простейшей HTML-страницы.

Тема 2. Стилевые описания CSS

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

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

  • Управление отображением HTML-элементов с использованием стилей CSS.

Тема 3. Верстка элементов веб-страницы

  • Табличный подход к верстке элементов веб-страницы.
  • Блочный подход к верстке элементов веб-страницы.

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

  • Управление расположением элементов веб-страницы с использованием табличного и блочного подходов.

Тема 4. Веб-формы

  • Webform (веб-формы) – поля форм, подсказки, проблемы отображения браузерами.

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

  • Возможности HTML5 для работы с веб-формами.

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

  • Новые возможности по форматированию и размещения элементов.

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

  • Выбор схем верстки.
  • Новые средства позиционирования элементов графического интерфейса, предоставляемые СSS3.

Тема 6. Средства CSS3 для позиционирования

  • Каскадные таблицы стилей 3 версии.
  • Свойства блочной модели.
  • Ресурс caniuse.com – рассмотрение возможностей ресурса со сведениями о поддержке свойств новых стандартов.

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

  • Селекторы в СSS3.
  • Поддержка свойств, селекторов СSS3 браузерами.

Тема 7. Составляющие адаптивного дизайна

  • Основные концепции отзывчивого веб-дизайна.
  • Принцип пропорциональности элементов веб-страницы.
  • Построение «гибких сеток».
  • «Гибкие» изображения.
  • Интерполяция изображений при помощи стилей CCS.
  • Медиа-запросы.

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

  • Расчет пропорций экранных шрифтов в макете.
  • Построение медиа-запроов под разные экраны.

Тема 8. Фреймворк Twitter Bootstrap

  • Фреймворк Bootstrap.
  • Состав фреймворка Twitter Bootstrap.
  • Использование Twitter Bootstrap для верстки адаптивных веб-сайтов.
  • Настраиваемые компоненты.

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

  • Возможности фреймворка Twitter Bootstrap.

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

  • Работа с файлами веб-проекта.
  • Основные подходы к управлению жизенным циклом проекта и версиям исходного кода.

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

  • Управление исходным кодом веб-сайта.

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

  • Инструменты тестирования сайта.
  • Обеспечение корректного отображения в разных браузерах.
  • Публикация сайта.

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

  • Использование инструментов тестирования веб-сайта.