Дизайн

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 тега, отвечающего за отображение области.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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