Дизайн

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

Zeta Web 2.x

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

Zeta Web 3.x

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

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

Сетка (макет)

В CMS Zeta Web для создания сайтов используется набор готовых сеток (макетов).

<!-- html-код сетки "Шапка над колонками" -->
<!DOCTYPE html>
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>
		</title>
	</head>
	<body id="body">
		<form id="form1" action="/" novalidate="novalidate">
			<!-- wrapper -->
			<div id="zw_mp_content" style="margin: 0 auto;">
				<!-- nofooter -->
				<div class="nofooter">
					<!-- header -->
					<header id="ccphupper">
					</header>
					<div class="clr">
					</div>
					<!-- end of header -->
					<div id="content-wrapper">
						<aside id="ccphleft">
						</aside>
						<section id="ccphworkarea"> 
							<!-- текст страницы -->
						</section>
						<aside id="ccphright">
						</aside>
					</div>
				</div>
				<!-- end of nofooter -->
				<!-- footer -->
				<footer id="ccphbottom">
				</footer>
				<!-- end footer -->
			</div>
			<!-- end of wrapper -->
		</form>
	</body>
</html>

Для каждой области сетки можно задать html-контент, отображаемый по умолчанию, (установив произвольный html-контейнер), а также, при необходимости, задать имя css-класса, которое будет проставлено в атрибут class html-тега, ответственного за отображение области.

Создание сайта и настройка дизайна, используемого по умолчанию

Zeta Web 2.x

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

В открывшемся окне, на вкладке Основные - укажите наименование вашего нового дизайна.

Zeta Web 3.x

Перейдите в раздел Сайты, откройте настройку сайта и выберите "Дизайн".

Нажмите правой кнопкой мыши в строке Дизайн и "Создать/Открыть", чтобы перейти в его настройки.

В настройках шаблона доступны следующие настройки:

  • Шаблон - выберите подходящую для вас сетку. С правой стороны после выбора сетки будет отображено схематическое отображение расположения областей;

  • Ширина шаблона - выберите один из двух вариантов:

    • фиксированная - для создания сайта с фиксированной шириной

    • от и до - для создания "резинового" сайта

  • Ширина (доступна в режиме Ширина шаблона = Фиксированная) - ширина сетки в пикселях;

  • Ширина от (доступна в режиме Ширина шаблона = от и до) - минимальная ширина сетки в пикселях. Пустое значение - без ограничений по минимальной ширине;

  • Ширина до (доступна в режиме Ширина шаблона = от и до) - максимальная ширина сетки в пикселях. Пустое значение - без ограничений по максимальной ширине;

  • Стиль документа - наименование css-класса, которое будет установлено в атрибут class тега html;

  • Стиль тела документа - наименование css-класса, которое будет установлено в атрибут class тега body;

  • Иконка сайта - изображение favicon

  • Табличная часть настройки областей сетки - список доступных к использованию в сетке областей.

    • Страница / переменная - html-контейнер, содержимое которого будет помещено в указанную область

    • Стиль - наименование css-класса, которое будет установлено в атрибут class тега, отвечающего за отображение области.

У каждой сетки есть основная рабочая область (отмечена галочкой). В данной области будет отображено содержимое страниц сайта. Оставьте значение страницы пустым при настройке дизайна сайта для этой области.

Сохраните изменения, нажав на кнопку Записать.

Возвращаясь к настройкам домена:

Zeta Web 2.x

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

Zeta Web 3.x

Перейдите в раздел Сайты, откройте настройку сайта и выберите "Дизайн".

Нажмите правой кнопкой мыши в строке Дизайн и "Создать/Открыть", чтобы перейти в его настройки.

Заполните следующие настройки:

  • На вкладке Основные:

    • Наименование -наименование вашего сайта;

    • Дизайн - укажите созданный на предыдущем шаге дизайн;

    • Стартовая страница - укажите стартовую страницу (главную) сайта;

  • На вкладке Доменные имена укажите одно или несколько доменных имен привязанных к вашему сайту и установите один из них основным;

  • На вкладке Наполнение robots.txt наполните содержимое файла robots.txt;

  • На вкладке Наполнение head вставьте ссылки на файлы css, js и пр.;

  • На вкладке Наполнение body:

    • После открывающего тега - укажите html-контент, который будет добавлен первым дочерним узлом к тегу body;

    • Перед закрывающим тегом - укажите html-контент, который будет добавлен последним дочерним узлом к тегу body;

  • На вкладке Анимация настройте отображение глобальной анимации для сайта (отображается при переходе от одной страницы к другой при задержке перехода большей, чем указана в настройках анимации):

    • Анимационный контент - html-контент, который будет наложен на всю видимую часть страницы;

    • Включить глобальную анимацию с задержкой - отображение анимации с задержкой в миллисекундах / мгновенное отображение анимации;

    • Настройка таймаута - укажите значение задержки отображения анимации в миллисекундах;

  • На вкладке Водяной знак укажите изображение, которое будет наложено в качестве водяного знака на изображения товаров и настройте параметры наложения:

    • Размещать по центру / сдвиг слева и сверху;

    • Размер водяного знака (оригинальный / с заданной высотой и шириной);

    • Прозрачность.

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

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

См. переопределение дизайна страницы.

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

См. переопределение html-контента страницы.

PreviousИзображения и файлыNextSVG - иконки

Last updated