Загрузка процессора: 111%

2. Принцип работы

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

2.1. Прототип страницы

Как было сказано выше, страницы сайта объединены единым дизайном - оболочкой, в которую вставляется содержимое. В конструкторе это называется прототипом страниц (синоним прототип) , что есть общий каркасом для всех страниц сайта. Именно с разработки прототипа и начинается работа, все последующие страницы создаются на его основе, добавлением «внутрь» нужного контента.

2.2. Модель сайта

Как создать прототип и добавлять страницы? Пришла пора ознакомиться с идеологией конструктора. Проектирование сайта в конструкторе строиться на базе модели сайта, нашем представлении о его логической и физической структуре (файлы на сервере). Это модель описывает строение любого сайта и стоит на «трех китах»:

1. Сайт состоит из страниц;
2. Страница состоит из модулей, и сама является модулем (т.е. модули могут состоять из других модулей);
3. Модули не пишем сами, а получаем из готовых шаблонов наших строительных заготовок.

Первое положение мы уже обсудили. Остается разобраться ещё с двумя принципами, в которых встречаются 2 новых понятия - модули и шаблоны. Создание прототипа страниц и последующих страниц на его основе из модулей основной процесс создания сайта.

Рис.1. Строение сайта из модулей. Страницы сайт используют модули прототипа.

2.3. Модуль

Второе положение модели сайта следует из представления о строении страницы. Модуль - это строительный «кирпичик» страницы, самостоятельный элемент, который может быть как элементарной картинкой, так и крупной частью страницы -блоком текста, шапкой с меню и пр. Всё зависит от того, как нам удобнее разбить страницу на части. Модуль это фактически фрагмент HTML кода, который может вставляться до, после или внутрь другого кода. Чтобы не писать самому код, мы используем как заготовку шаблон, т.е. все модули рождаются из шаблонов. Можно провести следующую аналогию, шаблон -  это лекало у портного, по которому он кроет и шьет изделие из конкретного материала нужного размера и расцветки. Шаблон дает нам первоначальный образ, после наделения его всеми нужными качествами и свойствами мы получаем конечный модуль наше готовое изделие.

2.4. Редактирование модуля

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

Все модули имеют следующие 4 раздела для редактирования/изменения:

1. Шаблон модуля.
2. Layout.
3. Дизайн.
4. HTML.

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

Рис. 2. Интерфейс редактирования модуля. 4 раскрывающихся раздела для редактирования.

2.4.1. Шаблон модуля

Как говорилось выше, чтобы не писать модуль с нуля, мы создаем его из заготовки-шаблона, и даже когда мы имеем настроенный модуль, можно «на лету» поменять его шаблон. Проводя аналогию с пошивом одежды, это случай, когда мы хотим, например, изменить лекало для левого рукава, и делаем вместо обычного как у правого,  выкройку с карманом. Нельзя кардинально изменить шаблон и поставить на это место, например, штанину. Шаблоны сортируются по семействам, так что шаблоны одного семейства могут быть взаимозаменяемы. На сайте есть семейство шаблонов вертикального меню. Например, если вы уже используете модуль такого меню, есть возможность сменить шаблон и получить новый вид вертикального меню. Но в семействе аналогичных шаблонов этого модуля вы не найдёте шаблонов горизонтального меню. Будьте осторожны, «выдергивая ковер из-под ног», теряется все содержимое модуля. Восстановить обратно модуль на базе старого шаблона невозможно.

2.4.2. Layout

Layout - это схема компоновки внутренних модулей. Если модуль позволяет вкладывать в себя другие модули (например, таблица), в этом разделе вы можете управлять их взаимным расположением, удалять или добавлять новые. Содержимое модуля разбивается на ячейки, которые пронумерованы цифрами. Ячейки расположены схематично и повторяют расположение на странице сайта.

Раздел Layout является основным инструментом при редактировании отдельной страницы сайта. Он обеспечивает компоновку страницы и наполнение её содержимым на основе техники drugndrop. Чтобы поместить на страницу модуль некоторого типа, достаточно выбрать его в палитре шаблонов и перетащить в нужную ячейку на странице. Для изменения взаимного расположения существующих модулей вы их перетаскиваете, меняя местами.

Для удобства работы все шаблоны разделены на несколько категорий в «палитры». Основные палитры следующие: Примитивы, Меню, Банеры, Страницы, Магазин, Авторизация, Форум. Подробнее о каждой из них будет рассказано в разделе «Разработка отдельных страниц».

Рис. 3. Интерфейс раздела Layout. Палитра шаблонов и размещение модулей на странице.

2.4.3. Дизайн

Дизайн очень важный раздел настройки модуля, ответственный за его вид на сайте. Получая модуль из шаблона, мы имеем только голую заготовку, которую далее необходимо подстроить под нужный вид. Настройка заключается в выборе цвета, размера, начертания шрифта и прочих атрибутов различных элементов шаблона. Например, для таблицы это цвет и размер ячеек, выравнивание внутри ячеек и другие параметры. Для каждого шаблона существует свой набор редактируемых параметров, именно благодаря ним задается нужный дизайн. Каждый параметр подписан и имеет краткую аннотацию, вы можете сразу увидеть результат, нажав на предварительный просмотр.

Рис. 4. Интерфейс раздела Дизайн. Настраиваются значения различных атрибутов и свойства элементов модуля. Каждый параметр соответствует своему placeholderу в коде шаблона HTML.

2.4.4. HTML

Как следует из названия раздела, это HTML-код шаблона, который можно редактировать. Сразу оговоримся, шаблон состоит не из сплошного HTML, а содержит специальные вставки (placeholders), параметры которых задаются в Дизайне. Например, если в шаблоне встречается код ##Text-color##, то в разделе Дизайна будет пункт для выбора цвета элемента «Text». Код шаблона и настройка всех его параметров в Дизайне дают законченный вид модуля. Если в коде шаблона отсутствуют placeholderы, то модуль задается исключительно кодом шаблона. Чем больше в шаблоне параметров для настройки (через Дизайн), тем больше можно получить различных вариантов модуля при одном шаблоне. HTML шаблона + настройка Дизайна = вид модуля.

Рис. 5. Редактирование HTML. В код HTML вставлены placeholderы (точки замены), которые настраиваются в разделе Дизайна.

Раздел HTML предназначен для Web-мастеров и продвинутых пользователей, которые хорошо ориентируются в языке разметки. Неудачная правка кода может привести к непредсказуемым последствиям, будьте осторожны! Если эксперимент не удался можно восстановить шаблон по умолчанию (поставить специальный флажок «Использовать шаблон по умолчанию»). Шаблоны содержат достаточно точек для редактирования в Дизайне, потому вам редко понадобиться править сам код. Однако, такая возможность дает вам полную свободу создания своих модулей, вставки фрагментов HTML и целых сверстанных страниц.

Мы перечислили основные разделы редактирования модуля, в будущем встретятся некоторые дополнения, но основная идея работы заключается в этих 4 разделах: шаблон, layout, дизайн, html.

Документация