|
Скачать для фотошопа и сайта Вебмастеру Помощь по uCoz Делаем рабочий конструктор |
Делаем рабочий конструктор |
Offline
Сегодня мне хотелось бы поделится с вами своим опытом внедрения на сайте конструктора дизайна. Так как у меня используется нестандартный дизайн - мне нужно внести изменения таким образом, чтобы можно было работать с сайтом при помощи конструктора. Что мне это даст? Для начала нужно убедится, что конструктор активирован - это можно проверить, зайдя в Панель управления, Главная » Общие настройки. Если нужна опция активирована, переходим к настройке дизайна. Для этого нужно зайти в Панель управления, Управление дизайном » Конструктор шаблонов, и в при помощи подсказок оформить будущий каркас должным образом. Принцип создания каркасов прост - существующая структура страницы делится на определенные зоны по смыслу и назначению. Например, мой трехколоночный дизайн, разбитый на подобные зоны для создания каркаса, схематически будет выглядеть так:
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", которые соответственно означают "Заголовок" и "Содержимое" блока. Отдельно хотелось бы остановится на зарезервированных кодах каркаса. Их несколько - вот они: Настоятельно рекомендую использовать эти коды для правильной генерации каркаса.
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> --> Этот код желательно размещать в коде в самом конце, например после закрывающего тега |