Шаг первый.  Делим исходный код html-шаблона на части.

Рассмотрим последовательность действий на примере

вот этого html-шаблона сайта


Посмотрите на html-код этой страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Oceania by FCT</title>
<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<div id="wrapper">
<div id="header">

<div id="logo"> <h1><a href="#">Oceania</a></h1> </div>
<div id="menu">
<ul>
<li class="first current_page_item"><a href="#">Homepage</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul>
<br class="clearfix" /> </div>
</div>
<div id="page">
<div id="content">
<div class="box">
<h2>Welcome to Oceania</h2>
<p>
This is <strong>Oceania</strong>, a free and fully standards-compliant free CSS template by <a href="http://www.freecsstemplates.org">FCT</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions 3.0</a> license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep all of the links in the footer intact. Aside from that, have fun with it :) </p>
</div>
<div class="box">
<h3>Condimentum dictum mi dignissim hendrerit</h3>
<p>
Nisl feugiat aliquet curae volutpat commodo amet aenean. Ipsum fermentum sapien lacus. Lorem mauris eleifend venenatis lorem nec natoque adipiscing. Mollis primis magnis pretium etiam. Consectetur consectetur eget libero curabitur integer lectus. Lorem fringilla sit risus consequat. Phasellus nibh quam turpis montes. </p>
<ul class="list">
<li class="first"><a href="#">Condimentum egestas quisque orci varius eget gravida</a></li>
<li><a href="#">Suspendisse lobortis fringilla augue tortor malesuada</a></li>
<li><a href="#">Egestas quisque praesent convallis euismod turpis non interdum</a></li>
<li class="last"><a href="#">Hendrerit adipiscing arcu nibh id semper</a></li>
</ul>
</div>
<div class="box">
<h3>Adipiscing odio varius egestas</h3>
<p>
Pretium condimentum viverra adipiscing sociis tincidunt. Tincidunt non hendrerit arcu nascetur nec enim. Condimentum curae euismod massa etiam parturient gravida. Tempus odio penatibus posuere elementum. Justo gravida curae lectus. Aliquet egestas ante ornare. Consectetur dolor cum ultricies ligula sodales. </p>
<ul class="list">
<li class="first"><a href="#">Cras metus tincidunt risus aenean egestas vulputate</a></li>
<li><a href="#">Sollicitudin pellentesque nisl blandit sit vulputate lectus viverra</a></li>
<li class="last"><a href="#">Condimentum elementum a commodo cubilia suscipit quam purus</a></li>
</ul>
</div>
<br class="clearfix" /> </div>
<div id="sidebar">
<div class="box">
<h3>Arcu tempus</h3>
<p>
Viverra pharetra eget odio tortor. Montes erat suscipit odio condimentum laoreet luctus neque. </p>
</div>
<div class="box">
<h3>Viverra amet</h3>
<p>
Eleifend et amet pretium pellentesque ultricies sed amet. Condimentum amet praesent fusce felis urna ornare eget ridiculus. </p>
<ul class="list">
<li class="first"><a href="#">Tellus blandit sollicitudin</a></li>
<li><a href="#">Sodales magna commodo</a></li>
<li><a href="#">Lacus quisque sagittis</a></li>
<li><a href="#">Sollicitudin aliquet fringilla</a></li>
<li class="last"><a href="#">Posuere pellentesque</a></li>
</ul>
</div>
</div>
<br class="clearfix" />
</div>
</div>
<div id="footer">
Copyright (c) 2012 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org">FCT</a>. </div>
</body>
</html>

Как видите, мы раскрасили три части кода в разные цвета. Именно на эти части и необходимо разделить код в данном случае для интеграции его в шаблон сайта для битрикс.

Верхняя часть, выполненная в зеленом цвете, отправится в файл header.php , нижняя, выполненная в синем цвете, соответственно в файл footer.php.

А вот центральная часть кода, выполненная красным цветом, отправится в так называемую рабочую область, в данном случае это будет файл index.php , потому что это текст для главной страницы. А на других страницах сайта вместо этого текста будет иная информация, какую вы захотите вставить в процессе ввода контента на соответствующие страницы.

Таким образом, на каждой странице сайта на битрикс, будет повторяться общий фон, верхняя часть дизайна с логотипом и меню, правая колонка, и нижняя часть дизайна. Вместе они и будут составлять шаблон сайта на битрикс.

Куда скопировать эти части кода? Будем исходить из того, что ваш битрикс уже установлен на хостинге и сайт пока работает на стандартном шаблоне, идущем в комплекте с соответствующей редакцией битрикса. которая у вас есть.

Поэтому новый шаблон битрикс для упрощения работы сделаем на базе стандартного.

Зайдите в административную панель битрикс (контент-структура сайта-файлы и папки), откройте папку bitrix/templates, создайте в ней новую папку с любым именем, скопируйте в неё существующую папку стандартного шаблона, переименуйте её, например в moishablon, и скопируйте обратно в папку bitrix/templates. Новую созданную папку со скопированным шаблоном удалите, она больше не нужна.

Далее зайдите в список шаблонов (настройки-настройки продукта-сайты-шаблоны сайтов). Там вы увидите шаблон с присвоенным вами именем moishablon. Отредактируйте его название и описание.

Вот с этой копией стандартного шаблона и будем работать (это и будет ваш новый шаблон).

Откройте на редактирование в режиме php файл header.php в папке шаблона moishablon (контент-файлы и папки-bitrix-templates-moishablon), удалите всё, что там есть и скопируйте туда код зеленого цвета, сохраните файл.

Аналогично проделайте с файлом footer.php, скопировав туда код синего цвета.

Найдите в файловой структуре вашего битрикса файл index.php, скопируйте его в любую папку, переименуйте в index1.php и скопируйте обратно. Откройте его на редактирование в режиме php, удалите всё, что там есть и скопируйте туда код красного цвета. Сохраните файл.

На этом этапе пока всё, дальнейшая работа на следующем шаге.

(Кстати, аналогичным образом происходит разделение кода и других html-шаблонов. Если будете испытывать в этом затруднение - обращайтесь к нам, поможем.)


ПЕРЕЙТИ КО ВТОРОМУ ШАГУ

© 2021 Все права защищены.