Конструктор в Astra.CMS автоматически формирует итоговые шаблоны для сайта из взаимозаменяемых фрагментов для основных областей/блоков. Поэтому верстка и внедрение html кода и стилей имеет свои особенности и отличается от интеграции дизайна обычным способом.
Первая особенность состоит в том что для сайта уже заранее предусмотрено несколько вариантов каркасов, в которые на этапе сборки внедряются выбранные фрагменты. Доступно 8 готовых вариантов, достаточно скачать один из них, чтобы увидеть базовые слои и стили.
Ниже перечислены области сайта, которые подразумевают взаимозаменяемость, т.е. один вариант области можно заменить на другой без ущерба целостности верстки дизайна.
Физическое расположение файлов этой области - wizard_config/[mysiteid]/header/.
Эта область на уровне каркаса заключена в <div id="header"> ... </div> , поэтому имеет смысл делать классы стилей относительно #header. Для #header требуется обязательно указать свойство height.
Физическое расположение файлов этой области - wizard_config/[mysiteid]/footer/.
Эта область на уровне каркаса заключена в <div id="footer"> ... </div> , поэтому имеет смысл делать классы стилей относительно #footer. Для #footer требуется обязательно указать свойство height.
Физическое расположение файлов этой области - wizard_config/[mysiteid]/sidebar/left/.
Эта область на уровне каркаса заключена в <div id="sl"> ... </div> , поэтому имеет смысл делать классы стилей относительно #sl. Для #sl требуется обязательно указать свойство width.
Физическое расположение файлов этой области - wizard_config/[mysiteid]/frame/left/.
Шаблон должен содержать специальные вставки TITLE и CONTENT.
Физическое расположение файлов этой области - wizard_config/[mysiteid]/sidebar/right/.
Эта область на уровне каркаса заключена в <div id="sr"> ... </div> , поэтому имеет смысл делать классы стилей относительно #sr. Для #sr требуется обязательно указать свойство width.
Физическое расположение файлов этой области - wizard_config/[mysiteid]/frame/right/.
Шаблон должен содержать специальные вставки TITLE и CONTENT.
Физическое расположение файлов этой области - wizard_config/[mysiteid]/content/.
Эта область на уровне каркаса заключена в <div id="content"> ... </div> , поэтому имеет смысл делать классы стилей относительно #content. Шаблон должен содержать специальную вставку CONTENT.
Физическое расположение файлов этой области - wizard_config/[mysiteid]/navigation/.
В шаблоне используется стандартный набор данных для этого объекта.
Физическое расположение файлов этой области - wizard_config/[mysiteid]/pager/.
В шаблоне используется стандартный набор данных для этого объекта.
Физическое расположение файлов для каждого из блоков - wizard_config/[mysiteid]/blocks/[blockid]. В шаблонах используются стандартные наборы данных для каждого из типов блоков.
Для достижения взаимозаменяемости, верстка каждой области делается максимально изолированной. А именно, отдельный tpl и css файл в котором все используемые стили действуют только в рамках этой области. Набор необходимых графических файлов так же обособлен.
Например, для шапки сайта все стили будут иметь вид:
#header .classname { … }
Для центральной области:
#content .classname { … }
Таким образом, каждая область (например шапка) будет состоять из своего tpl файла, своего css файла, и своей папки с картинками. Для выбранного варианта шапки физически это будет каталог wizard_config/[mysiteid]/header/.
Редактировать файлы tpl и css, а так же загружать используемые картинки можно через веб-редакторы админки для соответствующей области.
В качестве языка шаблонов (tpl файлы) используется Smarty, такой же как при обычном способе интеграции дизайна. Кроме этого используются специальные вставки:
Используется для указания пути к графическим файлам. Сами графические файлы загружаются либо с помощью веб-редактора, либо непосредственно в каталог wizard_config/[mysiteid]/header/images/ (для области шапки сайта).
<img src="[IMAGESDIR]/logo.gif">
Используется только в шаблоне левой колонки блоков (закладка «Колонка»). На этапе сборки замещается на функцию leftblocks, которая осуществляет вывод всех блоков с левым расположением.
Аналогично для правой колонки блоков.
Используется только в шаблонах обрамлений боковых блоков. На этапе сборки замещается на вывод переменной с названием блока.
Используется:
Про обособленность стилей для локальных областей уже писалось выше. Все необходимые глобальные стили помещаются в css файл выбранной темы, который доступен для редактирования в секции "Тема дизайна".
Пути к графическим файлам должны указываться в относительном виде: url('images/myimage.png'). При этом путь 'images/…' будет таким всегда, меняться могут только имена файлов.
В tpl и css файлах можно использовать специальные конструкции для вынесения каких-то параметров в список визуальных опций (например цвет, размер шрифта и т.п.).
[?ид_опции caption="название опции" type="тип" default="значение по умолчанию"]
#header { height: [?header-height caption="Высота" type="px" default="225"]; }
#content { background: url('images/[?content-background caption="Фон" type="image"]'); } #content a, #content a:visited { text-decoration: none; color: [?content-a-color caption="Цвет ссылки" type="color" default="FB9233"]; }
.pager { font-size: [?pager-font-size caption="Размер шрифта" type="px" default="14"]; text-align: [?pager-align caption="Выравнивание" type="select" options="left:Слева,right:Справа,center:По центру" default="center"]; }
Центральная область включает в себя основной контент страницы, как для главной, так и для внутренних. В отдельном css файле, с префиксом #content следует указывать стили для форматирования заголовков, текста, списков, таблиц.
Для всех предусмотренных в конструкторе типов страниц, шаблоны физически располагаются в wizard_config/[mysiteid]/templates/, откуда они копируются в момент сборки итоговых шаблонов. Веб-редактор этих шаблонов доступен в секции "Тема дизайна".