Создание и редактирование макетов

При создании макета пользователь указывает его название и ключевое слово. При наборе названия ключевое слово будет автоматически вбиваться транслитом из названия.

Поле "Ключевое слово"

Ключевое слово задается только однажды, при создании макета, и далее не может изменяться. Оно должно быть уникальным и состоять только из лат. букв, цифр, дефиса и знака подчеркивания. Ключевое слово - название каталога в каталоге /templates/. Все файлы макета: картинки, файл стилей, js загружаются в этот каталог.

Поле "Название макета"

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

Демо-макет

Если при создании макета Вы отметили галочку "Загрузить демо-макет", то будет создан не пустой макет, а с html-кодом, демонстрирующим использование различных конструкций и объектом макетов.

Поле "HTML-код макета"

Макет в Werba.SU - это просто html-страница со вставками макросов.

Наследование макетов

Теперь дизайны сайта можно делать еще гибче. Больше нет необходимости копировать похожие куски в верстке дизайна сайта – достаточно использовать наследование макетов. При наследовании в дочернем дизайне будут доступны все элементы навигации, CSS, а также каталог с файлами родительского дизайна. Т.о. для дизайнов разных разделов нет необходимости копировать CSS или какие-то элементы, т.е. все общие элементы Вы можете вынести в общий родительский дизайн.

Верстка дочернего дизайна будет выводится в место для основного контента в родительском дизайне.

Приведем пример:

Родительский дизайн

<html>
<head>{HEADINCLUDES}</head>
<body>
<header>Шапка сайта</header>
<h1>Родитель</h1>
{CONTENT}
<footer>Подвал</footer>
</body>
</html>

Дочерний дизайн:
<h2>Дочерний дизайн</h2>
<article>{CONTENT}</article>
<aside>Сайдбар</aside>

Равнозначный дизайн:
<html>
<head>{HEADINCLUDES}</head>
<body>
<header>Шапка сайта</header>
<h1>Родитель</h1>
<h2>Дочерний дизайн</h2>
<article>{CONTENT}</article>
<aside>Сайдбар</aside>
<footer>Подвал</footer>
</body>
</html>

HTML-код макета можно редактировать с подсветкой синтаксиса. Снизу под полем с html-кодом макета перечислены кнопки для вставки макросов макета: Меню, меню каталога, хлебные крошки и др. Справа от поля с html-кодом перечислены кнопки для вставки меню с пользовательскими шаблонами навигации.

Также доступны следующие конструкции:

{SUBMENU:ключевоеслово}

Вывод подразделов текущего раздела, если они есть и разрешены к показу в меню (указывается в настройках страницы). Для вывода используется шаблон элементов навигации с ключевым словом ключевоеслово. Пример: {SUBMENU:moyomenu}

{IFCATALOGMENU}текст{/IFCATALOGMENU}

Выводит текст, если в настройках раздела задан раздел Каталога.

{ IFSITEMAP}текст{/ IFSITEMAP}

Выводит текст, если на сайте есть страница Карта сайта, т.е. страница с типом данных Карта сайта.

{SITEMAP_LINK}

Выводит адрес страницы с картой сайта.

{IFFEEDBACK}текст{/IFFEEDBACK}

Выводит текст, если на сайте имеется страница с формой обратной связи.

{FEEDBACK_LINK}

Выводит адрес страницы с формой обратной связи. Если страниц несколько, то приоритетнее та, что показывается в меню и та, что создана раньше.

{ IFCONTACTS_EMAIL}текст{/ IFCONTACTS_EMAIL}

Выводит текст, если в настройках сайта внесен контакт e-mail администратора.

{CONTACTS_EMAIL}

Выводит e-mail администратора

{ IFCONTACTS_PHONE}текст{/ IFCONTACTS_PHONE}

Выводит текст, если в настройках сайта внесен контактный телефон.

{CONTACTS_PHONE}

Выводит телефон компании из настроек сайта.

{ IFCONTACTS_ADDRESS}текст{/ IFCONTACTS_ADDRESS}

Выводит текст, если в настройках сайта внесен адрес компании.

{CONTACTS_ADDRESS}

Выводит адрес компании, указанный в настройках сайта.

{IFESHOP_CART}текст{/IFESHOP_CART}

Выводит текст, если на сайте имеется страница с типом данных «Корзина интернет-магазина».

{ESHOP_CART_LINK}

Выводит адрес страницы с корзиной интернет-магазина

{IFESHOP_ITEMS}текст{/IFESHOP_ITEMS}

Выводит текст, если на сайте имеется раздел с типом данных «Товары в интернет-магазине» и в нем есть добавленные товары.

{ESHOP_NEWITEMS:n}

Выводит n последних добавленных товаров в интернет-магазине. Если параметр n опущен, то выводятся последние 4 товара. Пример использования: {ESHOP_NEWITEMS} или {ESHOP_NEWITEMS:12}

{ESHOP_INCART}

Выводит количество товаров в корзине и итоговую стоимость, обрамляя текст блоком <div class='eshop-incart-full' />. Если в корзине нет товаров, то выводится текст <div class='eshop-incart-empty'>корзина пуста</div>

{LIST:id}

Вывести первые три объекта со страницы с номером id (указан слева от названия страницы в структуре сайта).

{LIST:id:n}

Вывести первые n объектов со страницы с номером.

Поле "CSS"

В этом поле описываются все стили Вашего макета дизайна. Текст из поля CSS сохраняется в файл styles.css в каталоге макета. Подключение этого файла желательно делать с помощью конструкции {HEADINCLUDES}.

Поле "Файлы"

Здесь Вы видите все файлы в каталоге Вашего макета. Здесь Вы можете загрузить картинки к макету, дополнительные js-файлы, flash-ролики и прочее.

Шаблоны навигации

Шаблоны навигации используются для вывода различных меню, хлебных крошек, постраничной навигации. Шаблон с ключевым словом pages используется для вывода постраничной навигации, когда количество объектов в разделе больше, чем выводится на страницу (например фотографии в галерее). Поэтому его наличие крайне желательно, хотя и не обязательно.

Как создавать шаблон навигации?

Допустим у Вас есть меню:
<ul id=”top-menu”>
    <li><a href=”/”>Главная</a></li>
    <li><a href=”/”>О компании</a></li>
    <li><a href=”/”>Контакты</a></li>
    <li><a href=”/”>Каталог продукции</a></li>
    <li><a href=”/”>Обратная связь</a></li>
</ul>
При этом, если мы находимся в каком-то разделе (например, О компании), то этот раздел должен отображаться в меню так:
    <li><strong>О компании</strong></li>
А если в каком-то подразделе раздела “О компании”, то так:
    <li><a href=”/about/”><strong>О компании</strong></a></li>

Тогда создаем новый шаблон навигации:
Ключевое слово: topmenu (на Ваш выбор)
Префикс: <ul id=”top-menu”>
Суффикс: </ul>
Активный элемент: <li><a href=”%URL”><strong>%NAME</strong></a></li>
Активный элемент с точно совпадающим урлом: <li><strong>%NAME</strong></li>
Неактивный элемент: <li><a href=”%URL”>%NAME</a></li>
Разделитель пустое поле

в html-код в нужное место вставляем конструкцию {MENU:topmenu} либо нажимаем кнопку “topmenu” справа от поля html-Кода макета.

Для элементов меню доступны следующие условные обозначения:
%URL - адрес ссылки
%NAME - текст пункта меню
%img - картинка, загруженная в настройках раздела
%Description - текст в поле "Мета-тег Description"
{TEMPLATE_PATH} - путь к каталогу макета

Также здесь можно вставить конструкцию {SUBMENU} она выведет дерево подразделы текущего раздела тем же самым шаблоном. Если необходимо вывести подменю другим шаблоном навигации, то можно указать {SUBMENU:ключевоеслово}, где ключевоеслово - ключевое слово соответствующего шаблона навигации.

Для элементов вывода постраничной навигации доступны усл. обозначения:
%URL - адрес ссылки
%PAGE - номер страницы
%FROM -
%TO -

Объекты макета

{MENU:menutemplate} выводит меню сайта, используя шаблон навигации с ключевым словом menutemplate
{CATALOGMENU:menutemplate} аналогично предыдущему, только выводятся подразделы раздела каталога (выбирается в настройках сайта)
{CONTENT} - выводит основной контент страницы в зависимости от раздела (список новостей, полный текст новости, список товаров и т.д.)
{LATESTNEWS} - блок последних новостей на сайте. выводит последние три новости.
{HEADINCLUDES} - этот блок размещается между тегами <head></head> и выводит теги <meta http-equiv="Content-Type">, <title>, а также подключает таблицы стилей (styles.css из каталога макета и common.css). В common.css описаны общие стили, используемые для вывода пользовательских данных, при желании Вы можете переопределить их в styles.css, он подключается после common.css
{BREADCRUMBS:breadcrumbs} выводит хлебные крошки, используя шаблон навигации с ключевым словом breadcrumbs
{LOGO} выводит картинку, которую пользователь загрузил как логотип в настройках сайта. На внутренних страницах картинка обрамляется ссылкой на главную страницу.
{COUNTERS} выводит код из поля для счетчиков в настройках сайта. Сделано для удобства пользователя, чтобы он не лазил в html-код макета.
{TITLE} выводит название текущей страницы
{TEMPLATE_PATH} как и в шаблонах навигации выводит путь к каталогу макета.
{SITE_NAME} - выводит название сайта, указанное в настройках сайта.
{CONTACTS_ADDRESS}, {CONTACTS_EMAIL} и {CONTACTS_PHONE} выводят соответственно адрес компании, контактные e-mail и телефон, указанные в настройках сайта.
конструкция вида {IFINDEX}текс{/IFINDEX} выведет текст только на главной странице. Аналогично конструкция {IFNOTINDEX}текст{/IFNOTINDEX} выведет текст только на внутренних страницах сайта. Данные конструкции удобно использовать, если Вы предполагает использовать один макет на всех страницах: и на главной, и на внутренних, но необходимо по-разному отображать некоторые блоки.
 

Управление видом типов данных

Видом любого типа данных можно управлять через CSS. Пример CSS-кода для описания типов данных приведен ниже


/* Текстовая страница */
.werba-text {

}
.werba-text p {
	margin-bottom:1.5em;
}
.werba-text ul,
.werba-text ol {
	padding-left:3em;
}
.werba-text ul li {
	list-style:circle inside;
}
.werba-text ol li {
	list-style:decimal inside;
}

.werba-text table {
	width: 100%;
	margin: 1em 0;
}
.werba-text td,
.werba-text th {
	padding: 10px 5px;
	border: 1px solid #ccc;
}

/* Вывод ошибок при заполнении форм */
.common-error {

}

/* Форма обратной связи */
.werba-feedback {
}
/* строка формы */
.form-row {
}
/* строка формы с каптчей */
.form-row--captcha {
}
/* тег span, в котором содержится img с каптчей */
.captcha {
}
/* input для ввода кода с картинки */
#f_Captcha {
}
/* 	строка формы с текстом
	"Звездочкой <span class='required'>*</span> отмечены поля,
	обязательные для заполнения."
*/
.form-row--notice {
}
/* строка формы с кнопкой "отправить" */
.form-row--submit {
}
/* звездочка, обозначающая обязательное поле */
.required {
}
/* блок с названием поля */
.form-row-title {
}
/* блок с полем для ввода значения input или textarea */
.form-row-value {
}
.form-row-value input {
}
.form-row-value textarea {
}

/* галерея фото */
/* старый селектор #gallery-thumb-list */
.gallery {
}
/* элемент галереи */
.gallery-thumb {
}
/* ссылка на отдельную страницу фотографии, 
содержит превьюшку фотографии */
.gallery-full-link {
}
/* img - превью фотографии */
.gallery-preview {
}
/* ссылка на полную картинку */
.gallery-pic-link {
}
/* подпись под фотографией */
.gallery-text {
}
/* отдельная страница */
.gallery-full {
}
/* полная фотография на отдельной странице */
.gallery-full-image {
}
/* подпись к полной фотографии */
.gallery-full-text {
}

/* Новостная лента */
.werba-news {
}
/* дополнительный класс, добавляемый к .werba-news,
когда выводится блок "Свежих новостей" через {LIST:} */
.news-shortlist {
}
/* дополнительный класс, добавляемый к .werba-news,
когда показывается раздел новостей */
.newsfeed {
}
/* блок отдельной новости */
.newsblock {
}
/* блок с картинкой к новости */
.news-preview {
}
/* ссылка с картинкой к новости */
.news-preview-a {
}
/* картинка к новости */
.news-preview-img {
}
/* дата новости (тег span) */
.newsdate {
}
/* заголовок новости (тег a) */
.newstitle {
}
/* дата новости (тег p) */
.newsannounce {
}

/* Карта сайта (тег ul) */
.werba-map {
}
/* элемент карты сайта (тег li) */
.werba-map-li {
}
/* ссылка в элементе карты сайта (тег a) */
.werba-map-a {
}

/* Товары в интернет-магазине */
.eshopblocks {
}
/* блок, оборачивающий список новинок */
.eshop-newitems {
}
/* блок, оборачивающий список похожих товаров */
.eshop-similaritems {
}
/* Заголовок блока похожих товаров (тег h2) */
.eshop-similaritems-h2 {
}
/* блок с товаром */
.eshopblock {
}
/* Заголовок товара (тег a) */
.eshop-title {
}
/* Ссылка с превьюшкой товара */
.eshop-pic-link {
}
/* Картинка-превьюшка товара */
.eshop-pic {
}
/* Цена товара */
.eshop-price {
}
/* название валюты в цене товара */
.eshop-cur {
}
/* ссылка "В корзину". Если в настройках раздела указано,
что это раздел с ссылкой "Заказать", то этот же класс 
применяется к кнопке "Заказать" */
.eshop-tocart-link {
}
/* Наличие товара */
.eshop-instock {
}
/* Обрертка количества товаров в наличии */
.eshop-outstock-cnt {
}
/* Краткое описание товара */
.eshop-shortdesc {
}

/* Страница товара */
.eshop-item {
}
/* блок, содержащий большую картинку товара */
.eshop-item-picbox {
}
/* большая картинка товара */
#eshop-item-pic {
}
/* строка с ценой товара
<div id="eshop-item-price">
	<div id="eshop-item-price-title">Цена</div> 10000 <span class="eshop-cur">руб.</span>
</div>
*/
#eshop-item-price {
}
/* текст "Цена" */
#eshop-item-price-title {
}
/* название валюты */
#eshop-item-price .eshop-cur {
}
/* ссылка "В корзину" на странице товара. Либо кнопка на страницу заказа */
#eship-item-tocart {
}
/* блок с текстом о наличии товара */
.eshop-item-instock {
}
/* блок с текстом, выводимым, когда товар отсутствует */
.eshop-item-outstock {
}
/* краткое описание товара на странице товара */
#eshop-item-shortdesc {
}
/* блок с превью товара */
#eshop-item-previews {
}
/* блок с текстом преимуществ */
#eshop-item-advantages {
}
/* блок с текстом подробного описания */
#eshop-item-desc {
}

/* Корзина интернет-магазина */
/* Текст "Корзина пуста" */
.eshop-cartmsg-isempty {
}
/* таблица со списком товаров в корзине */
.eshop-cart-items {
}
/* колонка с порядковым номером */
.eshop-cart-num {
}
/* колонка "Наименование" */
.eshop-cart-title {
}
/* колонка "Цена" */
.eshop-cart-price {
}
/* колонка "Количество" */
.eshop-cart-quantity {
}
/* колонка "Сумма" */
.eshop-cart-cost {
}
/* ячейка с текстом "Итого" */
.eshop-cart-total {
}
/* ячейка с итоговой суммой */
.eshop-cart-totalcost {
}
/* блок с кнопкой "Пересчитать корзину" */
.eshop-cart-update {
}
/* блок с формой заказа */
.eshop-order-form {
}
/* Элементы форма заказа аналогичны форме обратной связи */


/* Вопрос-ответ/Отзывы */

/* блок, содержащий ссылку "Добавить отзыв" */
.faq-add {
}
/* блок, содержащий список вопросов */
.werba-faq {
}
/*
.faqfeed {
}
*/
/* блок вопроса */
.faq-block {
}
/* дата вопроса */
.faq-date {
}
/* текст вопроса, заданного посетителем */
.faq-question {
}
/* имя задавшего вопрос */
.faq-asking {
}
/* текст ответа администратора */
.faq-answer {
}
/* имя ответившего */
.faq-answering {
}
/* блок, содержащий ссылку "читать далее" 
для перехода к отдельной странице отзыва */
.faq-readmore {
}
/* класс, добавляемый к .faq-block на отдельной странице отзыва */
.faq-fullpage {
}

/* Обратный счетчик */
.werba-counter {
}
/* Обратный счетчик */
.counterblock {
}
/* заголовок счетчика */
.counter-title {
}
/* текст с описанием */
.counter-text {
}
/* блок с оставшимся временем */
.counter-down {
}
.counter-timer {
}
/* блок с оставшимися днями */
.counter-timer--days {
}
/* блок с оставшимися часами */
.counter-timer--hours {
}
/* блок с оставшимися минутами */
.counter-timer--minutes {
}
/* блок с оставшимися секундами */
.counter-timer--seconds {
}
/* заголовок блока с оставшимися днями, часами, минутами, секундами */
.counter-timer-title {
}
/* количество оставшихся дней, часов, минут, секунд */
.counter-timer-value {
}

Не нашли ответ на свой вопрос?

Если выше приведенная информация Вам не помогла, Вы можете задать свой вопрос в службу поддержки.

LiveZilla Live Help