2.5 Верстка шаблонов страниц

Разработанные макеты описываются на языке разметки HTML и оформляются с помощью CSS согласно спецификациям данных инструментов [46, 45]. Процесс описания макетов в виде языка разметки называется версткой.

Из особенностей реализации следует отметить, что минимальная ширина страницы, может быть плавающей. Данный вид ширины элемента подразумевает изменение его размеров в соответствии с размерами окна браузера, что позволяет адаптировать размер элементов в зависимости от разрешения экрана.

Верстка, при которой размеры элементов изменяются в зависимости от размеров окна браузера, называется адаптивной. Такой вид верстки позволяет сделать веб-интерфейс более гибким и эффективнее использовать доступное пространство экрана [22].

Особенностью реализации адаптивной верстки в CSS является указание размера ширины элементов в процентах от общей ширины родительского элемента или ширины экрана как представлено на рисунке Е.1 из приложения Е.

Другая особенность верстки шаблонов связана с системой шаблонов Django. Документация указывает на то, что шаблонизатор поддерживает наследование и расширение шаблонов, что позволяет более эффективно описывать их, вынося общий код в базовый шаблон [35].

Рисунки Е.2 и Е.3 из приложения Е показывают процесс наследования шаблона: на основе базового шаблона base.html создается наследник, в котором переопределен код внутри {% block body %}. Весь остальной код заменен строкой «extends "base.html"», которая указывает на то, что в основе данного шаблона лежит код из файла base.html. Таким образом, система шаблонизации Django позволяет вынести общий код шаблонов в отдельный файл, что позволяет сократить время на отладку шаблонов страниц.

Следует заметить, что синтаксис шаблонизатора достаточно прост и, как видно из приведённых рисунков, блоки обозначаются знаками {% и %}, а переменные и объекты -- {{ и }} (в данном случае в шаблон название и текст страницы из таблицы в базе данных, описанной в п. 2.3 данной работы).

Помимо приведенных операций система шаблонов поддерживает различные типы блоков -- циклы и управляющие структуры, а так же всевозможные способы форматирования передаваемых в переменные данных.