106  /  330

Добавление кода тестового дизайна в шаблон

Просмотров: 4411 (Статистика ведётся с 06.02.2017)
Дата последнего изменения: 16.09.2015

Задание внешнего вида шаблона происходит в поле Внешний вид шаблона сайта.

Поставьте флажок Использовать визуальный редактор и перейдите в режим визуального редактирования. В этом режиме в известный уже вам редактор добавляется еще одна панель, которая присутствует только в формах редактирования шаблона. Она так и называется: Редактирование шаблона:

В ней всего три кнопки, если смотреть слева на право:

  • Редактировать служебные части шаблона;
  • Вставить разделитель шаблона;
  • Предпросмотр шаблона с внесенными изменениями без сохранения изменений. При ее нажатии в отдельной вкладке (или окне – это зависит от версии браузера) откроется шаблон дизайна, как он будет выглядеть с внесенными изменениями относительно сохраненного на данный момент варианта. Эта возможность предусмотрена для того, чтобы вы могли в полный размер и в реальном виде оценить внесенные в шаблон изменения, не прибегая к сохранению отредактированного кода. Если изменения вас устраивают, то их можно сохранить. Если нет – то продолжать работу дальше.

    Примечание: Если в работе не используется визуальный редактор, то можно использовать кнопку Предпросмотр в низу формы создания шаблона.

В режиме визуального редактора вы увидите пустое поле редактора с единственной иконкой: . Такой иконкой обозначаются куски кода используемые непосредственно в теле страницы (шаблона). Посмотреть, при необходимости, php-код можно так:

  • Нажмите на иконке указателем мыши и сделайте ее активной: вокруг иконки появится рамочка.
  • Нажмите на кнопку Свойства на нижней панели редактора, появится одноимённая панель, в которой и будет отображен код. В нашем случае это будет код для вывода Административной панели.

Служебный код

Теперь нам надо вставить служебные части кода в шаблон дизайна.

  • Нажмите на кнопку Редактировать служебные части шаблона, появится одноимённый диалог с пока еще пустыми полями в обеих вкладках.
  • В этом диалоге нажмите на ссылку Восстановить значение по умолчанию. Появится системный диалог с вопросом: действительно ли мы хотим установить значения по умолчанию для верхней части
  • Нажмите да, в пустом поле появится добавленный автоматически код верхней части:
  • Теперь мы должны сделать так, что бы в шаблоне подключалась Административная панель. Для этого после тега body введите код:
    <?$APPLICATION->ShowPanel();?>
  • Перейдите в закладку Нижняя часть и повторите два последних действия для этой закладки.
  • Сохраните внесенные изменения.

Примечание: Служебный код, вставляемый автоматически несколько устарел. Правильнее будет заменить
<?$APPLICATION->ShowCSS();?>
<?$APPLICATION->ShowHeadStrings()?>
<?$APPLICATION->ShowHeadScripts()?>
на
<?$APPLICATION->ShowHead()?>

В визуальном режиме вы не заметите никаких перемен, так как в нем отображаются только видимые части кода html и иконки разных кодов PHP. Чтобы увидеть добавленный только что код надо перейти либо в режим редактирования исходного кода, либо снять флажок Использовать визуальный редактор. Мы сделаем второе, тем более, что:

  • на этом этапе рекомендуется заканчивать работу над шаблоном через визуальный редактор;
  • исходные коды нашего дизайна вставлять удобнее именно в режиме текста.

Добавление кода шаблона

  • Снимите флажок Использовать визуальный редактор. Откроется форма редактирования в текстовом режиме. Нам нужно вставить разработанный дизайн в создаваемый шаблон.
  • Откройте в браузере файл index.html из папки со скаченным архивом шаблона. В окне браузера откроется тестовый дизайн:

Теперь нам нужно перенести html-код дизайна в поле Внешний вид шаблона сайта.

  • Откройте исходный код страницы, выделите весь код расположенный между тегами <body> </body> (без самих тегов) и скопируйте его в буфер.
  • Вставьте код в поле Внешний вид шаблона сайта перед закрывающим тегом </body>
  • В коде <body> шаблона нет заданных дизайнером параметров. Вставьте в этот тег параметры из аналогичного тега файла index.html: BGCOLOR="#FFFFFF" TEXT="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0".
Просмотр в Визуальном редакторе

Задание разделителя

В визуальном редакторе

Установите разделитель #WORK_AREA#. Он должен быть стоять строго перед меткой <!-- #Begin_Article -->.

Примечание: Найти тот или иной нужный участок кода на большой странице бывает достаточно сложно, но в исходном коде страницы нашего тестового шаблона расставлены специальные метки для облегчения поиска. Их общий вид:
<!-- #Begin******** -->
<!-- #End******** -->
где под звездочками будет стоять название функции, которую имитирует данный код. В нашем конкретном случае это будет название _Article. То есть метка в данном случае будут иметь вид:
<!-- #Begin_Article -->

Теперь можно сохранять созданный шаблон. До сих пор это было невозможно, так как был не задан разделитель #WORK_AREA#.

Назначение шаблона для сайта

Назначьте созданный шаблон для тестового сайта.


13
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии