Страницы и переменные

Администрирование и управление контентом CMS Zeta Web выполняется в программе 1С: Предприятие.

Zeta Web 2.x

Основные инструменты доступны в панели управления сайтом, которую можно открыть из меню Zeta Web, кликнув на соответствующий пункт меню "Панель управления сайтом".

Zeta Web 3.x

Основные инструменты доступны по ссылке меню Инструменты Zeta Web →Панель управления "Контент".

Области, переменные, страницы

Разделение html-контента на области, страницы и переменные - условно.

Все контейнеры поддерживают хранение статического html-кода, контролов и вложенных контейнеров.

Переменная - это переиспользуемый контейнер, который может быть использован при верстке других переменных, областей и страниц.

Область - определяет контент в определенной части дизайна (шапка, подвал, левая и правая колонки).

Страница - определяет основной контент дизайна.

Пример сетки дизайна

Добавление нового html-контейнера

Zeta Web 2.x

Для добавления нового html-контента перейдите на вкладку Наполнение сайта и затем на вкладку Страницы / Переменные.

Выберите нужную группу (области, переменные или страницы) и нажмите "Добавить".

Zeta Web 3.x

Перейдите на вкладку Основные и заполните поле Наименование. Вы можете указать в поле Имя в URL свое значение, в противном случае в это поле будет подставлено значение из поля Наименование переведенное в транслит.

Нажмите кнопку "Записать".

Значение поля Имя в URL должно быть уникальным.

В случае автоматической генерации - это правило соблюдается автоматически (к наименованию добавляется числовой суффикс).

Для областей и переменных - значение этого поля не влияет на формирование URL и не участвует в конечном html-коде страницы.

Для страниц - значение из этого поля будет участвовать в формировании адреса данной страницы.

Разграничение прав доступа к html-контейнеру

После записи вновь-созданного html-контейнера, вы можете настраивать доступность этого контейнера различным группам пользователей.

Для настройки прав перейдите на вкладку Доступ ролей. Установите флажок напротив тех ролей, которым должен быть доступен html-контент и нажмите кнопку Записать.

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

Добавление контента

Zeta Web 2.x

Для добавления/изменения контента, нажмите на кнопку "Редактировать наполнение" или нажмите на окно предварительного просмотра html-контента.

html-редактор

В визуальном редакторе доступны следующие действия:

• Ввод и редактирование текста;

• Добавление / редактирование ссылки;

• Добавление / редактирование изображения;;

• Добавление вложенного html-контейнера

• Добавление контрола.

В редакторе текста:

• Ввод и форматирование текста.

Zeta Web 3.x

Для добавления/изменения контента, нажмите на кнопку "Редактировать".

Работа визуальном редакторе

Визуальный редактор используется только в Zeta Web 2.x

Ввод и редактирование текста в визуальном редакторе

Начните вводить текст непосредственно в окне редактора. Форматировании текста вам доступны быстрые комбинации клавиш, таких как CTRL + B (жирный), CTRL + I (курсив), CTRL + U (подчеркнутый), CTRL + MouseScrol (увеличение / уменьшение размера текста) и т.д.

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

Более правильно для других задач использовать "Редактор текста".

Добавление / редактирование ссылки в визуальном редакторе

Вы можете добавить ссылку:

• На внутреннюю страницу;

• На внешнюю страницу;

• На файл.

- Добавление перетаскиванием:

Перейдите не вкладку HTML Элементы и перетащите элемент Ссылка в окно визуального редактора.

В открывшемся окне выберите адрес назначения нажав на "...":

• Строка - добавление ссылки на внешний ресурс, например, https://google.ru;

• Картинка (Zeta Web) - добавление ссылки на скачивание файла;

• Страницы / переменные (Zeta Web) - добавление ссылки на внутреннюю страницу.

Также, укажите текст / пиктограмму для ссылки в поле Картинка / текст нажав на "...":

• Строка - строковое представление ссылки;

• Картинка (Zeta Web) - ссылка в виде изображения.

Значение полей Подсказка, Класс и Targe добавится в атрибуты title, class и target соответственно для тега <a>.

- Быстрое добавление:

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

- Быстрое удаление:

Установите курсор мыши на ссылке и нажмите на значок "Удалить ссылку" в верхнем меню редактора.

- Редактирование ссылки:

Установите курсор мыши на ссылке и нажмите значок Редактировать в верхнем меню редактора. В результате откроется окно редактирования ссылки.

Пример сгенерированного html-кода:

<a title="Переход на гоавную страницу" class="clearfix" href="#" zw="PABQAHIAbwBwAGUAcgB0AGkAZQBzAD4APABUAHkAcABlAEkARAA+AFQAQQBCAHAAQQBHADQAQQBhAHcAQQA9ADwALwBUAHkAcABlAEkARAA+ADwAQwBsAGEAcwBzAD4AWQB3AEIAcwBBAEcAVQBBAFkAUQBCAHkAQQBHAFkAQQBhAFEAQgA0AEEAQQA9AD0APAAvAEMAbABhAHMAcwA+ADwAVABhAHIAZwBlAHQAPgBYAHcAQgB6AEEARwBVAEEAYgBBAEIAbQBBAEEAPQA9ADwALwBUAGEAcgBnAGUAdAA+ADwAVABpAHQAbABlAD4ASAB3AFEAMQBCAEUAQQBFAE4AUQBSAEYAQgBEADQARQBOAEEAUQBnAEEARAAwAEUATQBBAFEAZwBBAEQATQBFAFAAZwBRAHcAQgBEAEkARQBQAFEAUgBEAEIARQA0AEUASQBBAEIAQgBCAEUASQBFAFEAQQBRAHcAQgBEADAARQBPAEEAUgBHAEIARQBNAEUAPAAvAFQAaQB0AGwAZQA+ADwASAByAGUAZgA+AE4AZwBBADAAQQBHAFkAQQBaAFEAQQB6AEEARABRAEEAWgBnAEEAegBBAEMAMABBAE4AUQBCAG0AQQBHAFEAQQBPAFEAQQB0AEEARABFAEEATQBRAEIAbABBAEQAWQBBAEwAUQBBADUAQQBEAFEAQQBaAGcAQQB3AEEAQwAwAEEATQBBAEEAdwBBAEQARQBBAE4AUQBBADEAQQBHAFEAQQBNAFEAQQAxAEEARwBVAEEATQB3AEEAeABBAEQAUQBBADwALwBIAHIAZQBmAD4APAAvAFAAcgBvAHAAZQByAHQAaQBlAHMAPgA=">
	На главную
</a>

Атрибут zw является служебным атрибутом и будет убран из сгенерированного html-кода страницы в процессе ее обработки.

Добавление / редактирование изображения в визуальном редакторе

- Добавление:

см. размещение изображения.

- Редактирование:

Выделите изображение курсором мыши и нажмите значок Редактировать в верхнем меню редактора. В результате откроется окно редактирования изображения.

Пример сгенерированного html-кода:

<img width="100" height="100" title="Запасная часть" class="clearfix" alt="Запасная часть" src="C:\Users\tarasovna\AppData\Local\Temp\43bd86a8-c49e-11e9-8970-00155d153b1a" zw="PABQAHIAbwBwAGUAcgB0AGkAZQBzAD4APABUAHkAcABlAEkARAA+AFMAUQBCAHQAQQBHAEUAQQBaAHcAQgBsAEEAQQA9AD0APAAvAFQAeQBwAGUASQBEAD4APABDAGwAYQBzAHMAPgBZAHcAQgBzAEEARwBVAEEAWQBRAEIAeQBBAEcAWQBBAGEAUQBCADQAQQBBAD0APQA8AC8AQwBsAGEAcwBzAD4APABXAGkAZAB0AGgAPgBNAFEAQQB3AEEARABBAEEAPAAvAFcAaQBkAHQAaAA+ADwASABlAGkAZwBoAHQAPgBNAFEAQQB3AEEARABBAEEAPAAvAEgAZQBpAGcAaAB0AD4APABBAGwAdAA+AEYAdwBRAHcAQgBEADgARQBNAEEAUgBCAEIARAAwAEUATQBBAFIAUABCAEMAQQBBAFIAdwBRAHcAQgBFAEUARQBRAGcAUgBNAEIAQQA9AD0APAAvAEEAbAB0AD4APABUAGkAdABsAGUAPgBGAHcAUQB3AEIARAA4AEUATQBBAFIAQgBCAEQAMABFAE0AQQBSAFAAQgBDAEEAQQBSAHcAUQB3AEIARQBFAEUAUQBnAFIATQBCAEEAPQA9ADwALwBUAGkAdABsAGUAPgA8AFMAcgBjAD4ATgBBAEEAegBBAEcASQBBAFoAQQBBADQAQQBEAFkAQQBZAFEAQQA0AEEAQwAwAEEAWQB3AEEAMABBAEQAawBBAFoAUQBBAHQAQQBEAEUAQQBNAFEAQgBsAEEARABrAEEATABRAEEANABBAEQAawBBAE4AdwBBAHcAQQBDADAAQQBNAEEAQQB3AEEARABFAEEATgBRAEEAMQBBAEcAUQBBAE0AUQBBADEAQQBEAE0AQQBZAGcAQQB4AEEARwBFAEEAPAAvAFMAcgBjAD4APABGAG8AcgBtAGEAdAA+AEwAZwBCAHEAQQBIAEEAQQBaAHcAQQA9ADwALwBGAG8AcgBtAGEAdAA+ADwALwBQAHIAbwBwAGUAcgB0AGkAZQBzAD4A" />

Атрибут zw является служебным атрибутом и будет убран из сгенерированного html-кода страницы в процессе ее обработки.

Добавление вложенного html-контейнера в визуальном редакторе

Перейдите не вкладку Переменные и перетащите элемент Ссылка в окно визуального редактора.

Избегайте использование html-контейнера в самом себе (зацикливание).

При изменении html-контента в переменной header-logo изменение текущего html-контейнера не требуется.

Пример сгенерированного html-кода:

<div style="BORDER-TOP: rgb(198,198,198) 1px solid; BORDER-RIGHT: rgb(198,198,198) 1px solid; WIDTH: 150px; BORDER-BOTTOM: rgb(198,198,198) 1px solid; PADDING-BOTTOM: 5px; TEXT-ALIGN: center; PADDING-TOP: 5px; PADDING-LEFT: 5px; BORDER-LEFT: rgb(198,198,198) 1px solid; PADDING-RIGHT: 5px; BACKGROUND-COLOR: rgb(239,239,239)" zw="PABQAHIAbwBwAGUAcgB0AGkAZQBzAD4APABDAG8AbgB0AHIAbwBsAEkARAA+AE8AQQBCAGwAQQBHAEkAQQBaAEEAQgBoAEEARABRAEEATgBBAEIAaQBBAEMAMABBAE4AZwBBAHcAQQBEAFUAQQBPAFEAQQB0AEEARABFAEEATQBRAEIAbABBAEQAWQBBAEwAUQBBADUAQQBEAFEAQQBaAGcAQQB3AEEAQwAwAEEATQBBAEEAdwBBAEQARQBBAE4AUQBBADEAQQBHAFEAQQBNAFEAQQAxAEEARwBVAEEATQB3AEEAeABBAEQAUQBBADwALwBDAG8AbgB0AHIAbwBsAEkARAA+ADwAVAB5AHAAZQBJAEQAPgBWAGcAQgBoAEEASABJAEEAYQBRAEIAaABBAEcASQBBAGIAQQBCAGwAQQBBAD0APQA8AC8AVAB5AHAAZQBJAEQAPgA8AC8AUAByAG8AcABlAHIAdABpAGUAcwA+AA==">
	header-logo
</div>

Все содержимое тега div с атрибутом zw, а также сам тег div будет заменен на значение html-контента использованного html-контейнера в сгенерированном html-коде страницы в процессе ее обработки.

Добавление контрола в визуальном редакторе

- Добавление перетаскиванием:

Перейдите не вкладку Шабл. контр., выберите нужный контрол и перетащите его в окно визуального редактора.

В результате, откроется окно настройки параметров контрола.

У каждого контрола индивидуальный набор параметров.

Параметры бывают обязательные (отмечены галочкой) и общие (например, размер станицы выводимых контролом данных).

- Редактирование параметров контрола:

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

Пример кода:

<img src="C:\Users\tarasovna\AppData\Local\Temp\ЗетаWEB_zw_ProductSearchByCodeOrText" zw="PABQAHIAbwBwAGUAcgB0AGkAZQBzAD4APABDAG8AbgB0AHIAbwBsAEkARAA+AGUAZwBCADMAQQBGADgAQQBVAEEAQgB5AEEARwA4AEEAWgBBAEIAMQBBAEcATQBBAGQAQQBCAFQAQQBHAFUAQQBZAFEAQgB5AEEARwBNAEEAYQBBAEIAQwBBAEgAawBBAFEAdwBCAHYAQQBHAFEAQQBaAFEAQgBQAEEASABJAEEAVgBBAEIAbABBAEgAZwBBAGQAQQBBAHUAQQBHAEUAQQBjAHcAQgBqAEEASABnAEEAPAAvAEMAbwBuAHQAcgBvAGwASQBEAD4APABUAHkAcABlAEkARAA+AFEAdwBCAHYAQQBHADQAQQBkAEEAQgB5AEEARwA4AEEAYgBBAEEAPQA8AC8AVAB5AHAAZQBJAEQAPgA8AEkAbgBzAHQAYQBuAGMAZQBJAEQAPgBNAEEAQQB3AEEARABBAEEATQBBAEEAdwBBAEQAQQBBAE0AQQBBAHcAQQBDADAAQQBNAEEAQQB3AEEARABBAEEATQBBAEEAdABBAEQAQQBBAE0AQQBBAHcAQQBEAEEAQQBMAFEAQQB3AEEARABBAEEATQBBAEEAdwBBAEMAMABBAE0AQQBBAHcAQQBEAEEAQQBNAEEAQQB3AEEARABBAEEATQBBAEEAdwBBAEQAQQBBAE0AQQBBAHcAQQBEAEEAQQA8AC8ASQBuAHMAdABhAG4AYwBlAEkARAA+ADwAUwBpAHQAZQBUAGUAbQBwAGwAYQB0AGUAcwBJAGQAPgBZAGcAQQA1AEEARwBVAEEATgBRAEIAbABBAEcAUQBBAE0AQQBBAHkAQQBDADAAQQBPAEEAQQA0AEEARABrAEEATgBnAEEAdABBAEQARQBBAE0AUQBCAGwAQQBEAGMAQQBMAFEAQQA0AEEARABnAEEAWQBRAEEAMwBBAEMAMABBAE0AQQBBAHcAQQBEAEUAQQBOAFEAQQAxAEEARwBRAEEATQBRAEEAMQBBAEQATQBBAFkAZwBBAHcAQQBEAE0AQQA8AC8AUwBpAHQAZQBUAGUAbQBwAGwAYQB0AGUAcwBJAGQAPgA8AEkAcwBQAHIAaQBtAGEAcgB5AD4AWgBnAEIAaABBAEcAdwBBAGMAdwBCAGwAQQBBAD0APQA8AC8ASQBzAFAAcgBpAG0AYQByAHkAPgA8AEgAaQBkAGUARgBvAHIAUgBlAGcAaQBzAHQAZQByAGUAZAA+AFoAZwBCAGgAQQBHAHcAQQBjAHcAQgBsAEEAQQA9AD0APAAvAEgAaQBkAGUARgBvAHIAUgBlAGcAaQBzAHQAZQByAGUAZAA+ADwASABpAGQAZQBGAG8AcgBBAG4AbwBuAHkAbQBvAHUAcwA+AFoAZwBCAGgAQQBHAHcAQQBjAHcAQgBsAEEAQQA9AD0APAAvAEgAaQBkAGUARgBvAHIAQQBuAG8AbgB5AG0AbwB1AHMAPgA8AEgAaQBkAGUAQwBvAG4AdAByAG8AbABJAGYARQBtAHAAdAB5AD4AWgBnAEIAaABBAEcAdwBBAGMAdwBCAGwAQQBBAD0APQA8AC8ASABpAGQAZQBDAG8AbgB0AHIAbwBsAEkAZgBFAG0AcAB0AHkAPgA8AEkAcwBTAGEAdgBlAFUAcwBlAHIAVgBhAGwAdQBlAHMAPgBaAGcAQgBoAEEARwB3AEEAYwB3AEIAbABBAEEAPQA9ADwALwBJAHMAUwBhAHYAZQBVAHMAZQByAFYAYQBsAHUAZQBzAD4APABJAHMAQQB1AHQAbwBDAGwAYQByAGkAZgB5AFcAaABlAG4ATwBuAGUAQgByAGEAbgBkAEYAbwB1AG4AZAA+AFoAZwBCAGgAQQBHAHcAQQBjAHcAQgBsAEEAQQA9AD0APAAvAEkAcwBBAHUAdABvAEMAbABhAHIAaQBmAHkAVwBoAGUAbgBPAG4AZQBCAHIAYQBuAGQARgBvAHUAbgBkAD4APABSAGUAbgBhAG0AZQBWAGUAbgBkAG8AcgBOAGEAbQBlAHMAVwBpAHQAaABXAHMAZwBWAGUAbgBkAG8AcgBOAGEAbQBlAHMAPgBaAGcAQgBoAEEARwB3AEEAYwB3AEIAbABBAEEAPQA9ADwALwBSAGUAbgBhAG0AZQBWAGUAbgBkAG8AcgBOAGEAbQBlAHMAVwBpAHQAaABXAHMAZwBWAGUAbgBkAG8AcgBOAGEAbQBlAHMAPgA8AEQAbwBOAG8AdABVAHMAZQBUAGUAYwBEAG8AYwBQAGEAcgB0AHMAPgBaAGcAQgBoAEEARwB3AEEAYwB3AEIAbABBAEEAPQA9ADwALwBEAG8ATgBvAHQAVQBzAGUAVABlAGMARABvAGMAUABhAHIAdABzAD4APABIAGkAZABlAFAAcgBvAGQAdQBjAHQAUwBlAGEAcgBjAGgAZQBkAEIAeQBVAHMAZQByAHMAQwBvAGQAZQBzAD4AWgBnAEIAaABBAEcAdwBBAGMAdwBCAGwAQQBBAD0APQA8AC8ASABpAGQAZQBQAHIAbwBkAHUAYwB0AFMAZQBhAHIAYwBoAGUAZABCAHkAVQBzAGUAcgBzAEMAbwBkAGUAcwA+ADwALwBQAHIAbwBwAGUAcgB0AGkAZQBzAD4A" new="new" />

Тэг img с атрибутом zw будет заменен на тег div с набором служебных атрибутов (cp_...), содержимое которого будет сгенерировано в соответствии с указанным в параметрах шаблона.

Ввод и форматирование текста в редакторе текста

Zeta Web 2.x

В редакторе текста вы можете набирать html-код как вручную, так и вставив его из любого внешнего редактора.

Zeta Web 3.x

Для форматирования текста нажмите кнопку Форматировать в верхнем меню редактора.

<!-- неотформатированный текст -->
<table><tr><td>column 1</td><td> column 2</td></table>

<!-- отформатированный текст -->
<table>
	<tr>
		<td>
			column 1
		</td>
		<td>
			column 2
		</td>
	</tr>
</table>

Переопределение дизайна для конкретной страницы

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

Zeta Web 2.x

Для этого на вкладке Основные установите нужный дизайн в поле Дизайн и нажмите кнопку Записать.

Zeta Web 3.x

На вкладке Разобрать установите нужный дизайн в поле Дизайн и нажмите кнопку Записать.

См более подробную информацию о дизайне.

Переопределение содержимого области дизайна для конкретной страницы

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