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

Внимание! Использование визуального редактора для редактирования шаблона сайта недоступно в версиях с 14.0. В более ранних версиях необходимо быть очень внимательным: возможны непредвиденные искажения кода. Рекомендуется редактировать шаблон в режиме HTML-кода.


С помощью визуального редактора возможно изменение шаблона сайта.

Шаблон дизайна — это внешний вид сайта, в котором определяется расположение различных элементов на сайте, художественный стиль и способ отображения страниц. Включает в себя программный HTML-код, графические элементы, таблицы стилей, дополнительные файлы для отображения контента. Может также включать в себя шаблоны компонентов, шаблоны готовых страниц и сниппеты.

Внимание! В шаблоне дизайна сайта крайне не рекомендуется использовать комплексные компоненты.

Примечание:Чтобы использовать визуальный редактор при редактировании шаблона в версиях до 14.0 отметьте опцию Использовать визуальный редактор для редактирования шаблонов сайта в настройках Главного модуля (Настройки > Настройки продукта > Настройки модулей > Главный модуль):

Редактирование шаблона

Для редактирования шаблона сайта выполните следующие действия:

  • В публичной части сайта выберите пункт Редактировать шаблон меню кнопки Шаблон сайта на административной панели.

    Пункт меню "Редактировать шаблон"

или

  • Перейдите на страницу Шаблоны сайта (Настройки > Настройки продукта > Сайты > Шаблоны сайтов).
  • В списке либо воспользуйтесь командой Изменить, либо дважды кликните по строке с требуемым шаблоном.

    Выбор шаблона

В обоих случаях откроется форма редактирования выбранного шаблона:

Форма редактирования текущего шаблона сайта

  • Отметьте опцию Использовать визуальный редактор.
  • Опция "Использовать визуальный редактор"

Теперь можно переходить непосредственно к редактированию шаблона сайта.

При использовании визуального редактора в режиме редактирования шаблонов дизайна сайта панель инструментов включает в себя еще одну дополнительную панель - панель Редактирование шаблона . Эта панель содержит вспомогательные инструменты для редактирования шаблона дизайна сайта.

Редактирование служебных областей шаблона

На панели редактирования шаблона располагается кнопка Редактировать служебные области шаблона (<head>) , при нажатии на которую открывается форма редактирования:

Форма редактирования служебных областей

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

Добавление рабочей области Work Area

Для добавления рабочей области Work Area в шаблон сайта служит кнопка - Разделитель шаблона #WORK_AREA# . При нажатии на нее в рабочую область редактора, в которой отображается внешний вид шаблона, будет добавлен ярлык . Размещение этого ярлыка и определяет расположение рабочей области страниц сайта.

Рабочая область

Примечание: Без Work Area шаблон сохранить невозможно.

Предпросмотр шаблона

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

Работа с кодом

Отметим некоторые особенности использования php-кода в коде шаблона. Есть некоторые тонкости при прерывании html-кода php-скриптом. Например, можно писать так:

 <a href="<? echo 'www.oursite.ru';?>" title="Посетите сайт">OurSite</a>

Аналогично, и с рисунками (тег img).

Перечислим атрибуты, которые обрабатываются для ссылок и рисунков:
для тега <a> атрибуты: href, title, class, style
для тега <img> атрибуты: src, alt, class, style
Т.е. вместо этих атрибутов можно вставлять <? ...... ?>

Код таблицы тоже можно прерывать php-скриптом:

<table >
<? ........ ?>
<tr>
<? ........ ?>

<td>
</td>
<? ........ ?>
</tr>
<? ........ ?>
</table>

Если в коде шаблона используются рисунки, расположенные в директории шаблона и глубже, то путь до папки шаблона будет заменен на константу SITE_TEMPLATE_PATH:

<img height="4" alt="" src="<?=SITE_TEMPLATE_PATH?>/images/left_top_corner.gif" width="4" border="0" />

Обратите внимание, что при использовании данной константы в одном атрибуте не может быть нескольких кусков php кода. Т.е. так писать нельзя:

<img src="<?=SITE_TEMPLATE_PATH?>/images/<?='image.gif';?>" width="2" height="17" alt="" class="search-left" />

Ниже вы можете познакомиться с видео-роликом, наглядно демонстрирующим процесс редактирования шаблона. (1 минута 48 секунд, 9.71 Мб.)

Загрузить ролик.

Ниже вы можете познакомиться с видео-роликом, наглядно показывающим дополнительные возможности редактора в области форматирования шаблона. (1 минута 42 секунды , 6.56 Мб.)

Загрузить ролик.


20


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