Создание сайтов в Саратове
Продвижение сайтов в Саратове
МММ-2011 в Саратове
Реклама на блоге
Мои контакты
Для начала интеграции вашего дизайна с CMS Битрикс нам необходимо создать собственно сам дизайн. Пока я этот раздел пропускаю, потому что — это наверное тема отдельной статьи.
Если не умеете рисовать и верстать шаблон с нуля, не беда — в сети есть множество бесплатных и платных html шаблонов.
Перед началом работы — установите себе на компьютер последнюю версию браузера FireFox. Рекомендую это, потому что когда я пользовался Гугл Хром в визуальном редакторе Битрикс после редактирования появлялись ошибки по коду.
Приступим. Предварительно нам надо включить в Главном модуле опцию Использовать визуальный редактор для редактирования шаблонов сайта. Для этого заходим в панель управления - Настройки — Настройки продукта — Настройки модуля — Главный модуль и ставим галочку напротив данной опции. Сохраняем настройки.
Далее. Заходим в административную панель Битрикс — Настройки — Настройки продукта — Сайты — Шаблоны сайтов
Нажимаем добавить шаблон. Вводим ID, Название, Описание.
Теперь на вкладке шаблон в редакторе вставляем код вида:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <?$APPLICATION->ShowHead()?> <title><?$APPLICATION->ShowTitle()?></title> <meta charset="utf-8"> <link rel="stylesheet" href="/bitrix/templates/имя_шаблона/css/имя_файла.css" type="text/css" media="screen"> // Таким образом мы вставляем файлы стилей css. Файлы предварительно загружаются в нужную папку. <script src="/bitrix/templates/имя_шаблона/js/имя_файла.js" type="text/javascript"></script> // А вот так подключаются файлы js </head> <body><?$APPLICATION->ShowPanel();?> /*Сюда вставляем весь код файла index.php следующего после открывающего тега <body> до закрывающего тега </body> и в месте где мы хотим установить наш контент (текст или форум неважно) прописываем #WORK_AREA#*/ </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <?$APPLICATION->ShowHead()?> <title><?$APPLICATION->ShowTitle()?></title> <meta charset="utf-8"> <link rel="stylesheet" href="/bitrix/templates/имя_шаблона/css/имя_файла.css" type="text/css" media="screen"> // Таким образом мы вставляем файлы стилей css. Файлы предварительно загружаются в нужную папку. <script src="/bitrix/templates/имя_шаблона/js/имя_файла.js" type="text/javascript"></script> // А вот так подключаются файлы js </head> <body><?$APPLICATION->ShowPanel();?> /*Сюда вставляем весь код файла index.php следующего после открывающего тега <body> до закрывающего тега </body> и в месте где мы хотим установить наш контент (текст или форум неважно) прописываем #WORK_AREA#*/ </body> </html>
После тега <body> обязательно прописываем вывод панели управления <?$APPLICATION->ShowPanel();?>
Далее в скачанном html шаблоне находим файл index.html, копируем весь код между тегами <body>код шаблона </body> и вставляем его так же между тегами <body><?$APPLICATION->ShowPanel();?> код шаблона </body>.
Файлы вида - название файла.css — открываем и копируем весь код во вкладку Стили шаблона. Потом можно будет распределить некоторые стили и перенести их во вкладку Стили сайта.
Теперь поставьте галочку напротив надписи — Использовать визуальный редактор. Наша задача правильно расположить Рабочую область в Шаблоне (та область где будет выводится основной контент).
Для того, чтобы вставить рабочую область (WORK AREA) нажмите на кнопку Вставить разделитель шаблона #WORK AREA#
Далее (выйдя из визуального редактора) по коду можно проверить правильность расположения рабочей области.
Теперь можно сохранить шаблон и посмотреть на результат.
Да чуть не забыл — после сохранения шаблона перенесите папку images (изображения шаблона) и другие недостающие файлы в папку шаблона.
Шаблоны в CMS Битрикс находятся по адресу — /bitrix/templates/имя шаблона/
Для корректного задания пути для изображений и подключения файлов — добавляйте ко всем относительным путям строчку - /bitrix/templates/<? echo SITE_TEMPLATE_ID;?>/папка с изображениями/файл.
Дополнительные файлы стилей CSS подключаются следующим образом — в коде между тегами <head></head> прописываем код:
<?$APPLICATION->SetAdditionalCSS("/bitrix/templates/".SITE_TEMPLATE_ID."/имя-файла.css");?><?$APPLICATION->SetAdditionalCSS("/bitrix/templates/".SITE_TEMPLATE_ID."/имя-файла.css");?>
