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

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

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


Аннотация

Программа курса предусматривает получение исчерпывающего объема знаний и практических навыков клиентской разработки средствами HTML5 и CSS3, достаточных для осуществления качественной и профессиональной деятельности в сфере создания сайтов, отвечающих современным стандартам.


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

В ходе обучения слушатели расширят теоретические знания о глобальной сети Internet, изучат принципы работы службы WWW, познакомятся с этапами разработки сайта и изучат конструкции и технологии языка HTML, изучат приемы и способы стилицации страниц средствами CSS. Кроме того, слушатели получат представление о специализированных редакторах исходного кода.


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

Темы лекций

Тема 1

Основы работы сети Интернет

  • Подключение к Интернет. Способы подключения, поставщики услуг Интернет (провайдеры). Сравнение способов подключения к Интернет.
  • Понятие гипертекста, принцип гипертекста. Гипертекстовый документ, гипертекстовая ссылка.
  • Адресация ресурсов в Интернет, назначение и структура URL адреса. Документ по умолчанию. Понятие Web-сайта, размещение сайта на сервере. Относительная и абсолютная адресация. Применение различных видов адресации при создании гиперссылок. Применение различных видов адресации при создании гиперссылок.

Основы языка HTML

  • История развития HTML. Назначение и использование. Стандарты и организация W3C.
  • Гипертекстовый документ, содержимое и структура. Объявления типов документов. Основные объекты языка HTML: элементы, атрибуты элементов и их значения, комментарии. Структура HTML-документа.

Основные структурные элементы

  • Назначение и содержимое секций заголовка и тела HTML-документа.
  • Метаинформация о документе, элемент META.
  • Заголовок документа, его назначение.
  • Элементы разметки HTML5.
  • Подключение внешних документов.

Тема 2

Форматирование HTML-документа

  • Семантика HTML5.
  • Встраивание специальных символов в документ.
  • Разбиение документа на абзацы, их форматирование.
  • Заголовки.
  • Создание списков в документе. Виды списков, настройка и форматирование списков.
  • Встраивание и настройка изображений. Особенности выравнивания изображений на странице, обтекание текстом.
  • Гипертекстовые ссылки. Создание и настройка. Создание якорей (именованных областей) на странице. Ссылки на именованные области и идентификаторы.

Каскадные таблицы стилей

  • Назначение CSS.
  • Синтаксис: селекторы и правила. Виды селекторов, особенности применения различного вида селекторов. Единицы измерения.
  • Встраивание стилевых описаний в документ – встроенные стили, глобальные стили, стилевой файл.
  • Наследование.
  • Каскадирование.
  • Специфичность.
  • Вендорные префиксы.

Тема 3

Таблицы

  • Назначение и использование таблиц в HTML.
  • Элементы разметки, определяющие таблицу. Создание сложных таблиц.

Формы

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

Основы верстки

  • Резиновый, фиксированный и гибридный дизайн страницы. 
  • Принципы блочной верстки.
  • Свойства отображения, позиционирования, обтекания.

Проектирование структуры страницы

  • Этапы разработки визуального дизайна: определение типовых страниц, расположение глобальной и локальной навигации, размер и положение логотипа, местоположение содержимого на странице, рисование эскизов страниц.
  • Типовое содержимое каждой из частей страницы.
  • Практические рекомендации по созданию визуального дизайна.

Практические работы

Тема 1.

Введение в HTML

  • Использование Dreamweaver для создания гипертекстовых документов.
  • Обзор текстового редактора Brackets, расширений (Emmet), инструментов разработчика браузера.
  • Встраивание HTML тегов. Основные структурные теги, метаинформация, заголовок документа.
  • Форматирование и разметка документа.
  • Создание гипертекстовых ссылок.
  • Встраивание изображений.
  • Создание списков: упорядоченные, неупорядоченные, списки определений.

Тема 2.

Введение в CSS

  • Подключение таблицы стилей.
  • Оформление структурных элементов.
  • Свойства текста, выравнивание. Относительные и абсолютные единицы измерения.
  • Свойства ссылок.
  • Работа с формами.

Тема 3.

Работа с таблицами. Управление отображением элементов страницы

  • Создание простейших таблиц. Основные структурные элементы таблиц.
  • Создание сложных таблиц: объединение строк, столбцов, выравнивание внутри таблицы. Создание вложенных таблиц.
  • Оформление таблиц с помощью CSS.
  • Способы отображения элементов. Свойство display.
  • Основы блочной модели.

Тема 4.

Позиционирование

  • Способы позиционирования элемента.
  • Свойство overflow.
  • CSS float. Потоковое позиционирование.
  • Создание фотогалереи с использованием плавающих элементов.
  • Создание фотогалереи с применением свойства inline-block.

Тема 5.

Создание сайта, выполненного в технике блочной вёрстки

  • Структурные тэги HTML 5.
  • Создание панели навигации (горизонтальное и вертикальное меню).

Тема 6.

Компоненты адаптивного подхода при верстке

  • Относительные единицы измерения.
  • Медиа-запросы.
  • Адаптивные меню и изображения.
  • Верстка сайта с использованием Twitter Bootstrap.

Тема 7.

Подключение нестандартных шрифтов

  • Работа с библиотеками шрифтов.
  • Шрифтовые иконки.
  • Генерирование собственных веб-шрифтов.

Тема 8.

CSS3 элементы

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

Тема 9.

CSS3 элементы

  • CSS3 трасформация.
  • Анимации и переходы.

Тема 10.

  • CSS flexbox.
  • Эволюция Bootstrap. Обзор Bootstrap 4.