Сегодня мне хотелось бы поделится с вами своим опытом внедрения на сайте конструктора дизайна. Так как у меня используется нестандартный дизайн - мне нужно внести изменения таким образом, чтобы можно было работать с сайтом при помощи конструктора. Что мне это даст?
Во-первых - удобный способ управлять дизайном сайта и блоками, не заходя в панель управления.
Во-вторых - быстрое добавление нужных мне блоков, которые уже будут оформлены в нужном мне дизайне.
В-третьих - возможность использовать в блоках предоставляемые системой возможности - например гаджеты и виджеты.
В-четвертых - самое важное преимущество. При создании каркаса система сама сгенерирует все шаблоны для всех модулей - и мне не нужно будет менять их руками, для каждого используемого мною модуля. Полезность очевидна - вооружусь терпением и начну вносить изменения.
Для начала нужно убедится, что конструктор активирован - это можно проверить, зайдя в Панель управления, Главная » Общие настройки. Если нужна опция активирована, переходим к настройке дизайна. Для этого нужно зайти в Панель управления, Управление дизайном » Конструктор шаблонов, и в при помощи подсказок оформить будущий каркас должным образом. Принцип создания каркасов прост - существующая структура страницы делится на определенные зоны по смыслу и назначению. Например, мой трехколоночный дизайн, разбитый на подобные зоны для создания каркаса, схематически будет выглядеть так:
Итак, как можно видеть на рисунке, каркас состоит из таких основных частей:
Code
<!-- <header> -->
<!-- </header> -->
- в этом блоке я размещу верхнюю часть (шапку) сайта.
Code
<!-- <middle> -->
<!-- </middle> -->
- здесь будет вся средняя часть сайта, в том числе левая и правая колонки и средняя часть, в которой будет отображаться основной контент.
Code
<!-- <footer> -->
<!-- </footer> -->
- здесь будет нижняя часть сайта - счетчики, копирайты и прочее. Отдельно бы хотелось остановится на описании кода
Code
<!-- <middle> -->
<!-- </middle> -->
В использовании этого кода есть определенные ньюансы, которые необходимо знать. В частности, это связано с использованием модуля "Форум". В моем случае, если мне понадобится использовать этот модуль - моя структура каркаса предполагает, что модуль будет располагаться на всю ширину страницы, так как блоки container у меня включены в блок middle. При генерации шаблона для модуля "Форум" система смотрит, как расположен блок middle и всю область, которую он занимает, отводит под вывод форума. В случае если я вынесу код container правой колонки за границы блока middle - то форум будет занимать место левой и центральной колонки, а правая останется на месте. Если я вообще не использую код middle - то форум будет размещен в том же месте, где выводится остальной контент. Результат: дизайн разбит на три больших части, каждая из которых имеет свое значение. Но - для того чтобы я мог управлять блоками и сгенерировать шаблоны для всех модулей мне нужно рассказать системе о том, как будут выглядеть блоки, и где они будут расположены.
Так как основная часть сайта (колонки) размещена в блоке
Code
<!-- <middle> -->
<!-- </middle> -->
- добавим в него нужные коды.
При помощи кода
Code
<!-- <container> -->
<!-- </container> -->
я определяю в моем дизайне область, в которой будут содержаться блоки, например "Опросы", "Календарь", "Поиск" и другие. При помощи этих кодов я точно указываю системе, где разрешено размещать новые блоки. В моем случае это левая и правая колонка средней части страницы. Прописываем коды в дизайн, например вот так:
Code
<td valign="top" width="175" style="padding:1px; background:#FFFFFF;
border-right:1px solid #666666;" align="center">
<!-- <container> -->
<!-- </container> -->
</td>
Теперь мне нужно как то рассказать системе, как будет выглядеть мой будущий блок. При генерации шаблонов система сгенерирует шаблоны с учетом этой информации, и все новые блоки будут сразу же добавляться в нужном мне дизайне. Самое замечательное в этом то, что мне достаточно описать дизайн блока только один раз - все остальное система сделает сама. Добавляю блок в контейнер:
Code
<td valign="top" width="175" style="padding:1px; background:#FFFFFF;
border-right:1px solid #666666;" align="center">
<!-- <container> -->
<!-- <block> -->
<table border="0" cellpadding="0" cellspacing="0"
style="background:#666666; margin-bottom:1px;" width="175">
<tr><td height="17" style="color:#FFFFFF; border:1px solid #666666;
font-size:10px;padding-left:10px;">
<b>TITLE</b></td></tr>
<tr><td align="center" style=" background-color:#EFEFEF;
padding:5px 0 5px 0;
border:1px solid #666666;">CONTENT</td></tr>
</table>
<!-- </block> -->
<!-- </container> -->
</td>
Если дизайн блоков во всех контейнерах будет одинаковый, то достаточно сформировать лишь один блок, а второй контейнер создать пустым. Блок имеет два зарезервированных кода "TITLE" и "CONTENT", которые соответственно означают "Заголовок" и "Содержимое" блока. Отдельно хотелось бы остановится на зарезервированных кодах каркаса. Их несколько - вот они:
- [TITLE] : заголовок страницы
- [CSS_URL] : путь к файлу с css-стилями
- [BODY] : основная часть страницы
- [COPYRIGHT] : копирайт системы uCoz
Настоятельно рекомендую использовать эти коды для правильной генерации каркаса.
Последнее что нужно указать в каркасе - это внешний вид для всплывающих окон.
Для этого предусмотрен такой код:
Code
<!-- <popup> -->
<!-- </popup> -->
У меня всплывающие окна по стилю будут такими же, как и блоки - поэтому добавляю такой код:
Code
<!-- <popup> -->
<table cellpadding="0" cellspacing="1" style="background:#FFFFFF;">
<tr><td>
<table border="0" cellpadding="0" cellspacing="0"
style="background:#666666; margin-bottom:1px;">
<tr><td height="17" style="color:#FFFFFF; border:1px solid #666666;
font-size:10px;padding-left:10px;">
<b>[TITLE]</b></td></tr>
<tr><td align="center" style=" background-color:#EFEFEF;
padding:5px 0 5px 0;
border:1px solid #666666;">[BODY]</td></tr>
</table>
</td></tr>
</table>
<!-- </popup> -->
Этот код желательно размещать в коде в самом конце, например после закрывающего тега 
