Автор: Фарход ФайзуллаевВведение
В этой статье я объясню разработчикам, не имевшим ранее опыта создания сайтов на системе Open Constructor (OC), как разработать простой сайт, состоящий только из статических страниц.
Нам даны:
- Макеты дизайна главной и внутренних страниц
- Карта сайта с указанием названий разделов и URI
Задание:
Разработать сайт на базе ОС
Информация до начала разработки
Для начала я рекомендую прочесть «Документацию разработчика». А так же, не помешает иметь некоторый опыт работы с другими системами управления сайтами.
Сайт, созданный на ОС (aka «Модель ОС»), состоит из:
- Шаблонов (весь HTML сайта)
- Объектов — выбирает контент из базы данных и передает в шаблон для оформления (несколько объектов могут использовать один и тот же шаблон), который впоследствии добавляется в структуру сайта в разделе...
- Карты сайта — вся структура сайта
- Данных (статьи, новости, файлы, и др.)
Краткий план действий
- Анализируем макеты дизайна нашего сайта
- Создаем разделы данных
- Создаем шаблоны страниц и блоков (таких как шапка, меню и др.) и объекты, которые будут содержать шаблоны
- Собираем сайта в единое целое
- Создаем страницы в соответствии с картой сайта
- Указываем, какие шаблоны должны использоваться для главной и внутренних страниц
- Добавляем объекты во вновь созданные страницы
- Добавляем контент на страницы
Держа в голове вышеуказанный «план боевых действий», приступаем к работе.
1. Анализ макетов дизайна
Перед нами макеты дизайна главной и внутренней страницы сайта:
Главная страница
Внутренняя страница
Анализируем, из каких блоков состоит главная страница:
А также анализируем дизайн внутренних страниц:
{run_block id=whatever} — это элемент шаблона, так называемый маркер, в который мы можем вставлять объекты (шапку, футер, сайдбар и т.п.).
2. Создание разделов данных
В силу особенности ОС, до создания объектов создаем раздел данных, откуда объекты будут брать данные. Мы будем использовать тип данных «HTML код» для хранения контента страниц, поскольку только этот тип данных позволяет привязывать документ к конкретной странице в карте сайта.
Называем раздел «Content»:
3. Создание шаблонов и объектов
Создание шаблонов
Шаблон — это HTML нашего сайта. В шаблонах мы создаем структуру нашего сайта с помощью HTML.
Создание объектов
Cоздаем объекты, которые содержат эти шаблоны. Тип шаблона и объекта должен совпадать. Например, если шаблон имеет тип «Список страниц» (как шапка и футер), то объект тоже должен быть такого типа, для того, чтобы функции, заложенные в шаблон, работали корректно.
Создание шаблона главной страницы
Как вы видели, главная страница имеет двухколоночную структуру.
Для создания шаблона выполняем несколько операций.
Сначала выбираем тип шаблона, который мы хотим создать, затем создаем шаблон и вводим нижеследующий код:
Код шаблона главной страницы:
{run_block id=PRE}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{$page->getHeadTags(true)}{* передаем true чтобы оформить как xml *}
<title>{$page->getTitle()|escape}</title>
</head>
<body>
<div class="wrapper">
<div class="header">
{run_block id=header}
</div>
<div class="banner">
{run_block id=banner}
</div>
<div class="content">
<div class="center">
{run_block id=center}
</div>
<div class="right">
{run_block id=right}
</div>
<br class="clear" />
<div class="footer">
{run_block id=footer}
<br class="clear" />
</div>
</div>
</div>
</body>
</html>
{run_block id=POST}
Любой верстальщик поймет, что это за код и как он будет отображаться в браузере. Этот код — самый что ни на есть обычный XHTML, в котором находятся несколько тегов шаблонизатора Smarty.
Шаблон шапки
Шаблон шапки имеет тип «Список страниц» и может выводить список страниц первого уровня автоматически, и это будет играть роль верхнего меню.
{* логотип *}
{if $page->is('/')}{* мы на главной *}
<img src="/res/files/logo.gif" alt="logo" title="logo" />
{else}{* мы во внутрненних страницах *}
<a href="/"><img src="/res/files/logo.gif" alt="logo" title="logo" /></a>
{/if}
<ul class="menu">
{* выводим пункты главного меню *}
{foreach from=$pages item=p}
{if $p.at == 2}{* пункт выбран *}
<li title="{$p.header}" class="active"><span>{$p.header}</span></li>
{elseif $p.at == 1}{* выбран подпункт *}
<li title="{$p.header}" class="active"><a href="{$p.href}" title="{$p.header}">{$p.header}</a></li>
{else}{* пункт не выбран *}
<li title="{$p.header}"><a href="{$p.href}" title="{$p.header}">{$p.header}</a></li>
{/if}
{/foreach}
</ul>
<p>+7 (495) 232-99-66</p>
<br class="clear" />
Что мы тут видим? Видим логотип, который на внутренних страницах является ссылкой на главную страницу, и Smarty-код, который генерирует список страниц, которые были указаны на разделе «Карта сайта».
Объект шапки
Шаблон футера
Футер имеет схожий шаблон:
<p class="copyright">
Copyright © 2008 Брокерский дом <br />
100000, Москва, 2-я ул., д. 1, стр. 1<br />
Телефон: +8 985 111-11-11
</p>
<ul class="menu">
{foreach from=$pages item=p}
<li title="{$p.header}">
{if $p.at == 2}
{$p.header}
{elseif $p.at ==1}
<a href="{$p.href}" title="{$p.header}"><span class="active-parent">{$p.header}</span></a>
{else}
<a href="{$p.href}" title="{$p.header}">{$p.header}</a>
{/if}
</li>
{/foreach}
</ul>
<p class="agents"><img alt="Предложение агентам" src="/res/files/icon-agents.gif" /><a href="/services/for-agents/"><span>Предложение<br /> агентам</span></a></p>
Объект футера
Объект футера создается так же, как и объект шапки.
Шаблон верхней иллюстрации
<h1>Брокерский дом</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum mi massa, imperdiet ac, egestas commodo, auctor in, dolor. Nulla semper, mi in viverra rhoncus, enim est lobortis pede, eget tempor nulla nibh id velit. Pellentesque tincidunt. Etiam aliquam luctus lacus. Nulla a est nec lectus sollicitudin porta. Vestibulum dapibus tincidunt sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a nunc eu tellus placerat elementum.</p>
<p><a href="#">Подробнее о компании</a></p>
Объект верхней иллюстрации
Шаблон центрального блока
{if $header}
<h1>{$header}</h1>
{/if}
<table class="mainpage">
{* создаем таблицу с двумя столбцами *}
{foreach_row from=$pages item=doc cols=2 table=no}
{foreach_cell}
{* содержимое ячеек таблицы *}
<h2><a href="{$doc.href}">{$doc.header}</a></h2>
<p>{$doc.intro}</p>
{/foreach_cell}
{/foreach_row}
</table>
Объект центрального блока (основной контент)
Шаблон правого сайдбара
<p class="openfund"><img alt="Открытые паевые фонды" src="/res/files/icon-fund.gif" /><a href="#">Открытые<br /> паевые фонды</a></p>
<br class="clear" />
Объект правого сайдбара
Объект правого сайдбара создается так же, как и верхняя иллюстрация (объект типа «Включение шаблона»).
Мы закончили создание шаблонов и объектов главной страницы.
Шаблон внутренних страниц
{run_block id=PRE}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{$page->getHeadTags(true)}{* передаем true чтобы оформить как xml *}
<title>{$page->getTitle()|escape}</title>
</head>
<body>
<div class="wrapper">
<div class="header">
{run_block id=header}
</div>
<div class="inner-content">
<div class="left">
{run_block id=left}
{run_block id=left-2}
</div>
<div class="center">
{run_block id=center}
</div>
<div class="right">
{run_block id=right}
</div>
<br class="clear" />
</div>
<div class="footer">
{run_block id=footer}
<br class="clear" />
</div>
</div>
</body>
</html>
{run_block id=POST}
Шаблоны и объекты шапки и футера оставляем такими же, как и на главной странице.
Шаблон центрального блока (основной контент)
Создаем шаблон типа HTML-текст для блока center, где будет находиться основной контент нашего сайта:
<div class="content-text">
<h1>{$title}</h1>
{$content}
</div>
Объект центрального блока
Шаблон левого меню
Шаблон левого меню имеет тип «Список страниц», как и верхнее меню:
<ul class="leftmenu">
{* перебираем пункты первого уровня *}
{foreach from=$pages item=top}
{* перебираем пункты вротого уровня *}
{foreach from=$top.children item=p}
{if $p.at == 2}{* пункт выбран *}
<li title="{$p.header}" class="active">{$p.header}</li>
{elseif $p.at ==1}{* выбран подпункт *}
<li title="{$p.header}" class="active-parent"><a href="{$p.href}" title="{$p.header}">{$p.header}</a></li>
{else}{* пункт не выбран *}
<li title="{$p.header}"><a href="{$p.href}" title="{$p.header}">{$p.header}</a></li>
{/if}
{* проверяем существуют ли пункты третьего уровня *}
{if $p.children}
<li class="inner"><ul class="small">
{* выводим меню третьего уровня *}
{foreach from=$p.children item=child}
{if $child.at == 1}
<li title="{$child.header}" class="active-parent"><a href="{$child.href}" title="{$child.header}">{$child.header}</a></li>
{elseif $child.at == 2}
<li title="{$child.header}" class="active">{$child.header}</li>
{else}
<li title="{$child.header}"><a href="{$child.href}" title="{$child.header}">{$child.header}</a></li>
{/if}
{/foreach}
</ul></li>
{/if}
{/foreach}
{/foreach}
</ul>
Объект левого меню
Этот объект требует настройки — мы должны указать глубину страниц, которые будут включаться в меню:
Шаблон правого сайдбара
Создадим шаблон правого сайдбара внутренних страниц, так как он будет отличаться от сайдбара главной страницы. Шаблон и объект будут типа «Включение шаблона».
Объект правого сайдбара
Объект правого сайдбара будет создаваться так же, как и верхняя иллюстрация главной страницы
4. Сборка сайта из объектов
1. Создаем страницы нашего сайта
Теперь «собираем» сайт в единое целое. Для этого добавляем объекты в те места, которые были предусмотрены в шаблоне главной страницы (помните теги {run_block id=whatever}?).
Для достижения этой цели, нам необходимо создать структуру (карту) сайта, используя переданный нам вначале документ «Карта сайта», в котором черным выделены страницы первого уровня, красным — второго и зеленым — третьего):
| Главная | / |
| О компании Lorem Ipsum | /about |
| Структура | /structure |
| Руководство | /headquaters |
| Реквизиты и лицензии | /requisites-and-licenses |
| Контактная информация | /contact-information |
| Услуги | /services |
| Брокерские операции | /brokerage-service |
| Торговые площадки | /trading-floors |
| Интернет-трейдинг | /internet-trading |
| Как стать нашим клиентом | /become-our-client |
| Документы | /documents |
| Управление активами | /asset-management |
| Доверительное управление | /trusted-asset-management |
| Паевые фонды | /unit-funds |
| Для пенсионных фондов и страховых компаний | /pension-funds-and-insurance-companies |
| Услуги на срочном рынке | /future-market-services |
| Консалтинговое сопровождение | /consulting-support |
| Опционные стратегии | /option-strategies |
| Риск-менеджмент по опционам | /option-risk-management |
| Опционный деск | /option-desk |
| Субброкеридж на FORTS | /forts-subbrokerage |
| Как стать нашим клиентом | /become-our-client |
| Инвестиционно-банковские услуги | /investment-and-banking |
| Депозитарные услуги | /depository |
| Агентам | /for-agents |
| Юридические услуги | /legal-services |
| Тарифы | /tariffs |
| Биржевой рынок | /exchange-market |
| Внебиржевой рынок | /off-exchange-market |
| Срочный рынок | /future-market |
| Единый фиксированный | /fixed |
| Вознаграждение за использование ИТС QUIK | /quik-reward |
| Вознаграждение брокера за иные услуги по Договору об оказании брокерских услуг | /broker-reward |
| Тарифы на депозитарное обслуживание | /depository |
| Тарифы торговых площадок | /trading-floors |
| Классичесий рынок РТС | /rts-classic |
| Биржевой, Срочный рынок РТС | /rts-stock-future |
| ЗАО ММВБ | /mmvb |
| ЗАО «Фондовая биржа ММВБ» | /mmvb-stock-exchange |
| НП ФБ «Санкт–Петербург» (ОАО «Газпром») | /saint-petersburg-se |
| 404 | /404 |
Создадим нужные нам страницы:
Папка — это URL страницы.
2. Указываем шаблоны главной и внутренних страниц
При создании страниц указываем шаблон этих страниц. Для главной страницы мы используем шаблон «main», а для внутренних — «inner»:
В итоге карта сайта должна выглядеть вот так:
3. Добавляем объекты во вновь созданные страницы
Теперь вставляем объекты в нужные нам страницы в разделе «Карта сайта». Логично преположить, что некоторые объекты (например, шапка) будут добавлены во все страницы, поскольку присутствуют во всех страницах.
Добавить объект можно двумя способами:
1 способ — когда один объект необходимо добавить в большое количество страниц, например, во все внутренние страницы нашего сайта.
2 способ — когда один объект необходимо добавить только в одну страницу, например, на главную страницу.
Теперь добавляем объекты (1-м способом) во все внутренние страницы и на главную страницу сайта. Для примера возмем объект шапки (header). Для этого откроем сам объект:
В нижней части окна объекта нажимаем на кнопку «Места применения объекта». Откроется окно, где выбираем страницы и блок страницы, куда необходимо добавить объект:
Обратите внимание, что мы сейчас добавили объект шапки и на главную страницу, поскольку объекты шапки и футера идентичны для всех страниц.
Таким образом добавляем другие объекты в нужные нам страницы.
Теперь нам надо добавить некоторые объекты, которые еще не добавлены на главную страницу используя 2-й способ добавления объектов (на главную страницу уже добавлены объекты шапки и футера — мы их добавили выше). Для этого, переходим в раздел «Карта сайта» и нажимаем кнопку «Добавить объект»:
В открывшемся окне выбираем нужный нам объект (не забудьте также обратить внимание на тип объекта; объект «banner» — это объект верхней иллюстрации):
Таким образом добавляем другие объекты главной страницы. В итоге главная страница должна выглядеть так:
Обратите внимание на выпадающее меню, справа от объектов. Пункты этого меню совпадают с тем id, что мы давали в шаблоне главной страницы — например, {run_block id=header} или {run_block id=center}.
Этот способ привязки объектов к страницам лучше использовать с простыми сайтами, с таким, который мы сейчас создаем.
Стили (CSS)
Чтобы подключить стили (CSS) к сайту, создаем папку css в корневой папке вашего сайта и в эту папку помещаем css-файл вашего сайта. Тогда этот файл стиля появится в свойствах шаблона и будет использован по умолчанию (тег CSS автоматически добавится в HTML).
5. Добавление контента
Контент добавляется через раздел «Данные» в ОС:
Как вы видите, напротив названия страницы стоит его URI. Таким образом можно указать, где будет отображаться именно эта статья. Что бы добавить текст для конкретной страницы, поступаем следующим образом:
Выбираем страницу, где именно этот текст будет отображаться, через дроп-даун бокс. Список страниц в этом дроп-даун боксе берется из «Карты сайта».
Вот так можно очень быстро собрать сайт на базе ОС.
Комментарии
Никогда не думал, что Open Constructor на такое способен.
А вообще есть ли всему этому смысл ли же проще какую-нибудь цмску попробовать?
Или это так все - для интереса? :)
С уважением,
Бизнесмен
http://bfrf.ru/
Только в отличие от других CMS у нее практически нет ограничений в функционале.
То, что описано в этой статье это только начало ознакомление с движком.
Конечно стоит попробовать, ведь для этого и эта статья написана — что бы пользователи увидели как легко собираются сайты, что бы это было толчком в освоении этой системы.
Butsch, это не CMS, это гораздо круче :-) На базе ОС можно собрать сайты любой сложности, на что многие CMS не способны.
Только жаль медленное развитие!!!
Но для практики самое оно!!! Вот потихоньку развиваю www.butsch.ru
227664585 исикю
____________
На правах рекламы:
теплый водяной пол