Пока скачивается дистрибутив, начнем с Дримвьювера. Итак, договоримся, что с начала мы имеем:
1. желание с нуля создать шаблон;
2. Дримвьювер (я использую демо CS3);
3. Дистрибутив "1С-Битрикс" редакции Бизнес (не принципиально; я используюстандартный инсталлятор под Windows );
4. 15-30 минут свободного времени (на простой шаблон).
Если с первым и четвертым пунктами все ок, приступим к работе с Дримом. Оговорюсь - я не буду оптимизировать и чистить код, делать все наикрасивейше и т.п. Также, как и CSS свой разместим покамест прямо в шаблоне (для элементов будем использовать стили из демо-шаблона "WEB20", входящего в стандартную поставку дистрибутива 6.5). Сейчас рассматриваем общие принципы создания шаблона под Битрикс.
Создадим простейшую страничку, которую приведем к следующему виду:
В итоге в Дримвьювере мы получим следующее:
В шаблоне я пометил области, в которых буду размещать компоненты: поиск, меню и т.п.
Теперь откроем установленный Битрикс, перейдем на страницу шаблонов и скопируем нужный код в наш шаблон (копируем подключение заголовка, таблицы стилей, панели администратора и т.п.). Для этого выполним следующие шаги:
Панель управления (админка) - Настройки - Сайты - Список сайтов - Шаблоны сайтов
Откроем шаблон "web20" на редактирование. Скопируем код
Он подключает заголовки браузера (страницы), панель, стили и т.п., и вставим его в наш шаблон, в самый верх (перед нашим кодом).
Шаблон будет иметь следующий код:
Теперь перейдем к размещению компонентов. Ах да, чуть не забыл. Вместо текста "Тело страницы" вставим код:
Он выведет тело страницы, и поможет разделить шаблон в Битриксе на футер и хедер.
Итак, код будет таким:
Идем далее. Размещаем компоненты, которые будут постоянно присутствовать в шаблоне - меню, поис и т.п. Я поступлю крайне просто: создам в Битрикс страницу, размещу на ней требуемые компоненты, настрою их по своему вкусу и просто скопирую получившийся код в шаблон. Приступим.
Создадим страницу в Битрикс (на панели управления вверху 3-я иконка слева - "Создать новую страницу в разделе"). Разместим, согласно нашему шаблону, нужные компоненты: Верхнее меню, Поиск, Авторизация, Левое меню (Будем использовать справа). После каждого компонента сделаем пару строк вниз (для удобства копирования). Теперь настроим их под требования - типы меню, шаблон логина и т.п. Настроили? Идем далее.
Берем получившийся код (в редакторе страницы перейдем в режим "... редактирование исходного кода" - слева 3 иконки, одна под другой. Нам нужна вторая.), и вставляем ВМЕСТО текста в нашем шаблоне. Например, текст "можно вывести поиск" заменяем на:
Разместив все компоненты в шаблон, получим следующий код шаблона:
Все, в Дриме работа завершена. Переходим к Битрикс.
Еще раз откроем страницу шаблонов (Панель управления (админка) - Настройки - Сайты - Список сайтов - Шаблоны сайтов). Теперь выберем пункт "Добавить шаблон". ID поставим равным "test", Название - "Тестовый шаблон", Описание - "Тестовый шаблон для нашего сайта" (все без кавычек!). Теперь скопируем наш итоговый код в "Внешний вид шаблона сайта".
Сохраняем. Справа мы видим пункт "Список сайтов". Перейдем туда, и отредактируем "ru" (Демо-сайт). В частности, установим по-умолчанию для всех страниц наш шаблон - заменим первый пункт из списка пунктом "Тестовый сайт". Сохраняем. Теперь из папки "web20" (C:\Program Files\1C-Bitrix\www\bitrix\templates\web20 - у меня по-умолчанию тут) скопируем папку "components" в нашу папку "test" (C:\Program Files\1C-Bitrix\www\bitrix\templates\test - Битрикс сам создал ее при сохранении шаблона).
Перейдем в публичную часть, и убедимся, что шаблон работает:
Все работает, но выглядит как-то корявенько Поэтому скопируем из C:\Program Files\1C-Bitrix\www\bitrix\templates\web20 в C:\Program Files\1C-Bitrix\www\bitrix\templates\test папочку "images", а также файлы стилей - styles.css и template_styles.css. Обновим страницу сайта:
Ну вот, совсем другое дело. Теперь правьте стили, шаблон, размещайте графические элементы и т.п под ваши требования.
Удачи.
1. желание с нуля создать шаблон;
2. Дримвьювер (я использую демо CS3);
3. Дистрибутив "1С-Битрикс" редакции Бизнес (не принципиально; я использую
4. 15-30 минут свободного времени (на простой шаблон).
Если с первым и четвертым пунктами все ок, приступим к работе с Дримом. Оговорюсь - я не буду оптимизировать и чистить код, делать все наикрасивейше и т.п. Также, как и CSS свой разместим покамест прямо в шаблоне (для элементов будем использовать стили из демо-шаблона "WEB20", входящего в стандартную поставку дистрибутива 6.5). Сейчас рассматриваем общие принципы создания шаблона под Битрикс.
Создадим простейшую страничку, которую приведем к следующему виду:
Код |
---|
<style type="text/css"> <!-- .style1 { font-size: 36px; color: #999999; } .style2 { font-size: 12px } --> </style> <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <th colspan="3" bgcolor="f5f5f5" scope="col">Можно вывести баннер, дату и т.п.</th> </tr> <tr> <td width="238"><span class="style1">Название сайта</span></td> <td width="358"><div align="center">можно вывести поиск</div></td> <td width="204"><div align="center">можно вывести логин</div></td> </tr> <tr> <td colspan="3">Можно вывести верхнее меню.</td> </tr> <tr> <td colspan="2" valign="top"><p><br> Тело страницы</p> <p> </p></td> <td valign="top"><p><br> Правое меню</p> <p> </p></td> </tr> <tr> <td height="3" colspan="3" align="left" valign="top" bgcolor="#f0f0f0"></td> </tr> <tr> <td colspan="3" align="left" valign="top"><div align="center"><span class="style2"><br>© 2007 — "Название сайта". Перепечатка информации разрешена только с письменного согласия администрации сайта. Все права защищены.</span> </div> <div align="right" class="style2"></div></td> </tr> </table> |
В итоге в Дримвьювере мы получим следующее:
В шаблоне я пометил области, в которых буду размещать компоненты: поиск, меню и т.п.
Теперь откроем установленный Битрикс, перейдем на страницу шаблонов и скопируем нужный код в наш шаблон (копируем подключение заголовка, таблицы стилей, панели администратора и т.п.). Для этого выполним следующие шаги:
Панель управления (админка) - Настройки - Сайты - Список сайтов - Шаблоны сайтов
Откроем шаблон "web20" на редактирование. Скопируем код
Код |
---|
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=<?=LANG_CHARSET;?>" /> <?$APPLICATION->ShowMeta("robots")?> <?$APPLICATION->ShowMeta("keywords")?> <?$APPLICATION->ShowMeta("description")?> <title><?$APPLICATION->ShowTitle()?></title> <?$APPLICATION->ShowCSS();?> <?$APPLICATION->ShowHeadStrings()?> <?$APPLICATION->ShowHeadScripts()?> </head> <body> <?$APPLICATION->ShowPanel();?> |
Он подключает заголовки браузера (страницы), панель, стили и т.п., и вставим его в наш шаблон, в самый верх (перед нашим кодом).
Шаблон будет иметь следующий код:
Код |
---|
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=<?=LANG_CHARSET;?>" /> <?$APPLICATION->ShowMeta("robots")?> <?$APPLICATION->ShowMeta("keywords")?> <?$APPLICATION->ShowMeta("description")?> <title><?$APPLICATION->ShowTitle()?></title> <?$APPLICATION->ShowCSS();?> <?$APPLICATION->ShowHeadStrings()?> <?$APPLICATION->ShowHeadScripts()?> </head> <body> <?$APPLICATION->ShowPanel();?> <style type="text/css"> <!-- .style2 {font-size: 12px} .style3 { font-size: 36px; color: #999999; } --> </style> <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <th colspan="3" bgcolor="f5f5f5" scope="col">Можно вывести баннер, дату и т.п.</th> </tr> <tr> <td width="238"><span class="style1">Название сайта</span></td> <td width="358"><div align="center">можно вывести поиск</div></td> <td width="204"><div align="center">можно вывести логин</div></td> </tr> <tr> <td colspan="3">Можно вывести верхнее меню.</td> </tr> <tr> <td colspan="2" valign="top"><p><br> Тело страницы</p> <p> </p></td> <td valign="top"><p><br> Правое меню</p> <p> </p></td> </tr> <tr> <td height="3" colspan="3" align="left" valign="top" bgcolor="#f0f0f0"></td> </tr> <tr> <td colspan="3" align="left" valign="top"><div align="center"><span class="style2"><br>© 2007 — "Название сайта". Перепечатка информации разрешена только с письменного согласия администрации сайта. Все права защищены.</span> </div> <div align="right" class="style2"></div></td> </tr> </table> |
Теперь перейдем к размещению компонентов. Ах да, чуть не забыл. Вместо текста "Тело страницы" вставим код:
Код |
---|
#WORK_AREA#<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); IncludeTemplateLangFile(__FILE__); ?> |
Он выведет тело страницы, и поможет разделить шаблон в Битриксе на футер и хедер.
Итак, код будет таким:
Код |
---|
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=<?=LANG_CHARSET;?>" /> <?$APPLICATION->ShowMeta("robots")?> <?$APPLICATION->ShowMeta("keywords")?> <?$APPLICATION->ShowMeta("description")?> <title><?$APPLICATION->ShowTitle()?></title> <?$APPLICATION->ShowCSS();?> <?$APPLICATION->ShowHeadStrings()?> <?$APPLICATION->ShowHeadScripts()?> <style type="text/css"> <!-- .style2 {font-size: 12px} .style3 { font-size: 36px; color: #999999; } --> </style> </head> <body> <?$APPLICATION->ShowPanel();?> <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <th colspan="3" bgcolor="f5f5f5" scope="col">Можно вывести баннер, дату и т.п.</th> </tr> <tr> <td width="238"><span class="style1 style3">Название сайта</span></td> <td width="358"><div align="center">можно вывести поиск</div></td> <td width="204"><div align="center">можно вывести логин</div></td> </tr> <tr> <td colspan="3">Можно вывести верхнее меню.</td> </tr> <tr> <td colspan="2" valign="top"><p><br> #WORK_AREA#<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); IncludeTemplateLangFile(__FILE__); ?></p> <p> </p></td> <td valign="top"><p><br> Правое меню</p> <p> </p></td> </tr> <tr> <td height="3" colspan="3" align="left" valign="top" bgcolor="#f0f0f0"></td> </tr> <tr> <td colspan="3" align="left" valign="top"><div align="center"><span class="style2"><br> <span class="style2">© 2007 — "Название сайта". Перепечатка информации разрешена только с письменного согласия администрации сайта. Все права защищены.</span></span> </div> <div align="right" class="style2"></div></td> </tr> </table> |
Идем далее. Размещаем компоненты, которые будут постоянно присутствовать в шаблоне - меню, поис и т.п. Я поступлю крайне просто: создам в Битрикс страницу, размещу на ней требуемые компоненты, настрою их по своему вкусу и просто скопирую получившийся код в шаблон. Приступим.
Создадим страницу в Битрикс (на панели управления вверху 3-я иконка слева - "Создать новую страницу в разделе"). Разместим, согласно нашему шаблону, нужные компоненты: Верхнее меню, Поиск, Авторизация, Левое меню (Будем использовать справа). После каждого компонента сделаем пару строк вниз (для удобства копирования). Теперь настроим их под требования - типы меню, шаблон логина и т.п. Настроили? Идем далее.
Берем получившийся код (в редакторе страницы перейдем в режим "... редактирование исходного кода" - слева 3 иконки, одна под другой. Нам нужна вторая.), и вставляем ВМЕСТО текста в нашем шаблоне. Например, текст "можно вывести поиск" заменяем на:
Код |
---|
<?$APPLICATION->IncludeComponent( "bitrix:search.form", "flat", Array( "PAGE" => "#SITE_DIR#search/index.php" ) );?> |
Разместив все компоненты в шаблон, получим следующий код шаблона:
Код |
---|
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=<?=LANG_CHARSET;?>" /> <?$APPLICATION->ShowMeta("robots")?> <?$APPLICATION->ShowMeta("keywords")?> <?$APPLICATION->ShowMeta("description")?> <title><?$APPLICATION->ShowTitle()?></title> <?$APPLICATION->ShowCSS();?> <?$APPLICATION->ShowHeadStrings()?> <?$APPLICATION->ShowHeadScripts()?> <style type="text/css"> <!-- .style2 {font-size: 12px} .style3 { font-size: 36px; color: #999999; } --> </style> </head> <body> <?$APPLICATION->ShowPanel();?> <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <th colspan="3" bgcolor="f5f5f5" scope="col"><?$APPLICATION->IncludeComponent( "bitrix:advertising.banner", "", Array( "TYPE" => "BOTTOM", "CACHE_TYPE" => "A", "CACHE_TIME" => "0" ) );?></th> </tr> <tr> <td width="238"><span class="style1 style3">Название сайта</span></td> <td width="358"><div align="center"><?$APPLICATION->IncludeComponent( "bitrix:search.form", "flat", Array( "PAGE" => "#SITE_DIR#search/index.php" ) );?></div></td> <td width="204"><div align="center"><?$APPLICATION->IncludeComponent( "bitrix:system.auth.form", "auth", Array( "REGISTER_URL" => "", "PROFILE_URL" => "" ) );?></div></td> </tr> <tr> <td colspan="3"><?$APPLICATION->IncludeComponent( "bitrix:menu", "horizontal_multilevel", Array( "ROOT_MENU_TYPE" => "top", "MAX_LEVEL" => "2", "CHILD_MENU_TYPE" => "left", "USE_EXT" => "N" ) );?></td> </tr> <tr> <td colspan="2" valign="top"><p><br> #WORK_AREA#<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); IncludeTemplateLangFile(__FILE__); ?></p> <p> </p></td> <td valign="top"><p><br> <?$APPLICATION->IncludeComponent( "bitrix:menu", "left", Array( "ROOT_MENU_TYPE" => "left", "MAX_LEVEL" => "1", "CHILD_MENU_TYPE" => "left", "USE_EXT" => "N" ) );?></p> <p> </p></td> </tr> <tr> <td height="3" colspan="3" align="left" valign="top" bgcolor="#f0f0f0"></td> </tr> <tr> <td colspan="3" align="left" valign="top"><div align="center"><span class="style2"><br> <span class="style2">© 2007 — "Название сайта". Перепечатка информации разрешена только с письменного согласия администрации сайта. Все права защищены.</span></span> </div> <div align="right" class="style2"></div></td> </tr> </table> |
Все, в Дриме работа завершена. Переходим к Битрикс.
Еще раз откроем страницу шаблонов (Панель управления (админка) - Настройки - Сайты - Список сайтов - Шаблоны сайтов). Теперь выберем пункт "Добавить шаблон". ID поставим равным "test", Название - "Тестовый шаблон", Описание - "Тестовый шаблон для нашего сайта" (все без кавычек!). Теперь скопируем наш итоговый код в "Внешний вид шаблона сайта".
Сохраняем. Справа мы видим пункт "Список сайтов". Перейдем туда, и отредактируем "ru" (Демо-сайт). В частности, установим по-умолчанию для всех страниц наш шаблон - заменим первый пункт из списка пунктом "Тестовый сайт". Сохраняем. Теперь из папки "web20" (C:\Program Files\1C-Bitrix\www\bitrix\templates\web20 - у меня по-умолчанию тут) скопируем папку "components" в нашу папку "test" (C:\Program Files\1C-Bitrix\www\bitrix\templates\test - Битрикс сам создал ее при сохранении шаблона).
Перейдем в публичную часть, и убедимся, что шаблон работает:
Все работает, но выглядит как-то корявенько Поэтому скопируем из C:\Program Files\1C-Bitrix\www\bitrix\templates\web20 в C:\Program Files\1C-Bitrix\www\bitrix\templates\test папочку "images", а также файлы стилей - styles.css и template_styles.css. Обновим страницу сайта:
Ну вот, совсем другое дело. Теперь правьте стили, шаблон, размещайте графические элементы и т.п под ваши требования.
Удачи.
------
PHP - он всеядный, в плане типов данных. Если прикажешь - он тебе правду на 10 умножит, или ложь на пополам поделит..!
PHP - он всеядный, в плане типов данных. Если прикажешь - он тебе правду на 10 умножит, или ложь на пополам поделит..!