Рассмотрим тот вариант, когда у вас уже есть вёрстка в виде HTML страниц и из всего этого надо сделать шаблоны для сайта.
Начнём с шаблона для отображения страницы (шаблон стиля).
Сначала берёте листинг страницы и начинаете расставлять обязательные переменные, а также управляющие и прочие макросы.
Ниже на простом примере показаны необходимые элементы и кратко изложено их назначение.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<tmpl_var head.tags> <!-- Это необходимая переменная, которая отвечает за системные заголовки -->
<title>^c; - ^Page("title");</title> <!-- ^c; - это макрос, который выводит название сайта. ^Page("title"); - макрос, выводящий название страницы. Таким образом в шапке браузера выводится название сайта и страницы.-->
<!-- Ниже две ссылки на таблицы стилей. Сами таблицы стилей в системе в виде модулей по имени "Фрагмент" (Snippet). Кроме того таблицу стилей можно ставить и непосредственно в блок хедеров в виде листинга в ссоответствии с правилами W3C -->
<link href="/css/wg-base.css" rel="stylesheet" type="text/css" />
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--[if IE 8><div id="ie8only"><![endif]-->
<!--[if IE 7><div id="ie7only"><![endif]-->
<!--[if IE 6]><div id="ie6only"><![endif]-->
<!--[if lte IE 5.5]><div id="lt-ie55"><![endif]-->
^AdminBar; <!-- Это макрос, который отвечает за функционироване администативной панели. Элемент является обязательным и должен находиться в начале тела страницы. -->
<div id="topWrapper">
^AssetProxy(flexmenu); <!-- ^AssetProxy(); - это макрос, который работает как ярлык. С помощью него можно вставить какой-либо из элементов в тело другого. Внутри круглых скобок ставится УРЛ элемента, который необходимо встроить (обязательно без переднего слеша). В данном случае "flexmenu" - это УРЛ элемента навигации (другими словами, меню сайта). Таким образом вы имеете меню сайта на каждой странице, встроенное в шаблон страницы. При этом следует заметить, что само меню должно быть заранее создано в какой-то из служебных папок - скорее всего в той, где располагаются остальные элементы этого дизайна сайта. -->
<br /><br />
^L();Макрос отвечает за блок авторизации пользователя. Макрос имеет ряд опций. -->
<br /><br />
^AdminToggle; <!-- Макрос отвечает за включение/выключение административной панели. -->
<div id="contentArea">
<tmpl_var body.content> <!-- Переменная, которая выводит содержимое тела страницы. То есть содержимое всех модулей, которые находятся внутри страницы будет выводиться здесь. -->
<!-- end div#contentArea -->
</div>
<!-- end div#topWrapper -->
</div>
<!--[if lte IE 5.5]></div><![endif]-->
<!--[if IE 6]></div><![endif]-->
<!--[if IE 7></div><![endif]-->
<!--[if IE 8></div><![endif]-->
</body>
</html>