Авторизация

Авторизация / Регистрация

 Зарегистрироваться.
Menu
Итого: 0.00
Оплата услуг через платёжные шлюзы:


Описание создания собственного шаблона страницы
Пользователь: Sysadmin
Дата: 5.12.2011 7:52 pm
Просмотров: 8539
Оценка: 0

Рассмотрим тот вариант, когда у вас уже есть вёрстка в виде 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>