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

Визуальный редактор предоставляет различные средства форматирования текста. Опишем подробнее кнопки и выпадающие списки панели форматирования:

Панель форматирования текста

Стили шаблонов сайта

При переходе к редактированию динамических элементов (например, элементов инфоблоков) в визуальном редакторе в списке шаблонов будет выбран шаблон по умолчанию. Его таблица стилей (файл styles.css) будет подключена для использования для данной страницы.

Для каждого шаблона задается своя таблица стилей (файл styles.css). При смене шаблона в этом окне визуальный редактор подгрузит стили выбранного шаблона.

Для каждого из стилей шаблона может быть задано название. В визуальном редакторе описанные стили выводятся идентификаторами (ID) шаблонов сайтов к которым относятся.

Примечание: Все стили шаблона разделены на две таблицы стилей, хранящиеся в двух разных файлах. Один из них носит название styles.css и содержит стили для представления внутреннего содержания страниц на сайте. Во втором – с именем template_styles.css – описаны стили для представления шаблона дизайна. Эти стили отображаются при редактировании шаблона сайта с помощью визуального редактора.

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

Cписок стилей в визуальном редакторе


Работа с заголовками

В визуальном редакторе есть возможность управлять заголовками в тексте. Для этого существует выпадающий список, в котором можно выбрать нужное выделение заголовка:

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

Значение Normal из списка выбрано по умолчанию, оно соответствует отсутствию заголовка.

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

Heading 1

<h1>Heading 1</h1>

Heading 2

<h2>Heading 2</h2>

Heading 3

<h3>Heading 3</h3>

Heading 4

<h4>Heading 4</h4>
Heading 5
<h5>Heading 5</h5>
Heading 6
<h6>Heading 6</h6>
Preformatted
<pre>Preformatted</pre>

Размер шрифта

В редакторе могут быть использованы следующие размеры шрифтов:

Для задания размера шрифта при редактировании в режиме кода используется такой код:

<font size="size_number">TEXT</font>

где size_number заменяется на размер шрифта от 1 до 7. Например, в визуальной части текст medium соответствует коду: <font size="4">medium</font>


Кнопки форматирования

Рассмотрим, с помощью каких тегов реализуется различное написание текста.

КнопкаТекстТеги
Жирный<strong>Жирный</strong>
Курсив<em>Курсив</em>
Подчеркнутый<u>Подчеркнутый</u>

Кнопка удаляет текстовое форматирование, т.е. удаляет тег <font> со всеми его атрибутами, отменяет выделение жирным, курсивом, подчеркивание.

Кнопка позволяет вставить горизонтальный разделитель. В коде это действие выполняется с помощью тега <hr>

Кнопка Оптимизировать HTML-код убирает пустые HTML-теги.
Список убираемых пустых тегов: b, em, font, h1, h2, h3, i, li, ol, p, small, span, strong, u, ul и т.д.
В дальнейшем функционал этой кнопки будет расширяться.

Выравнивание текста

КнопкаТекстТеги

По левому краю

<p align="left">По левому краю</p>

По правому краю

<p align="right">По правому краю</p>

По центру

<p align="center">По центру</p>

Выравниваем по ширине

<p align="justify">Выравниваем по ширине</p>

Списки элементов

В визуальном редакторе есть возможность создать два вида списков: нумерованный и маркированный. Первый вариант создается с помощью кнопки и выглядит так:

  1. первый
  2. второй
  3. третий

Для этого представления при редактировании в режиме кода используется следующий код:

<ol>
<li>первый </li>
<li>второй </li>
<li>третий </li>
</ol>

Второй вид, маркированный список, создается с помощью кнопки и выглядит так:

  • первый
  • второй
  • третий

Исполняемый код такой:

<ul>
<li>первый </li>
<li>второй </li>
<li>третий </li>
</ul>

Сдвиг текста

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

<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<p>ТЕКСТ</p>
</blockquote>

Кнопка сдвигает текст влево и убирает из кода тег <blockquote>

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

Свойства текста


Если выделено изображение, то:

Свойства изображения


А если выделить ссылку в рабочей области, то в Свойствах отобразится следующее:

Свойства ссылки


3

 Пройти тест для самопроверки


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