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

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

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

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

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

Работа со стилями

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

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

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

Для изменения названий стилей:

• Откройте для редактирования используемый шаблон сайта.
• Перейдите на вкладку Стили сайта.
• В нижней части вкладки в области Описания стилей в поле Имя стиля введите действующее имя стиля. В поле Название стиля введите название стиля под которым вы хотите его видеть в визуальном редакторе.
• Нажмите кнопку Еще. Откроется еще одна строка в этой области.
• Повторите описанные выше действия для каждого из стилей, которые нуждаются в переименовании.

  

• Сохраните внесенные изменения.

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

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

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

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

Preformatted

Шрифты

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

<font face="font_name"> TEXT </font>

Цвет фона текста задается по кнопке .

<font style="BACKGROUND-COLOR: #ffff00">ТЕКСТ</font>

Цвет самого текста задается по кнопке .

<font color="#3366ff">ТЕКСТ</font>

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

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

<font size="size_number">TEXT</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>

Ниже вы можете познакомиться с видео-роликами, наглядно показывающим различные средства форматирования текста.

1. (3 минуты 24 секунды, 15.45 Мб.)

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

2. (3 минуты 14 секунд, 9.78 Мб.)

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