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

Администрирование и управление контентом 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-контейнера

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

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

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

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-контейнера и/или стиль.

Last updated