Просмотров: 5899 (Статистика ведётся с 06.02.2017)
Денис Котлярчук
Сложность урока:
2 уровень - несложные понятия и действия, но не расслабляйтесь.
1
2
3
4
5

Достаточно часто в работе нам приходится изменить цвет, размер шрифта, выравнивание текста. Чуть реже мы добавляем специальные символы и разрывы страниц. Для всех этих операций мы будем использовать панель инструментов визуального редактора "1С-Битрикс: Управление сайтом":

Нажмите на рисунок, чтобы увеличить

Слева располагаются кнопки отмены и повтора последнего действия - важные команды для повседневной работы. Остальные инструменты разделены на смысловые блоки:

  • 1 - заголовки и шрифт.
  • 2 - изменение написания текста.
  • 3 - списки и выравнивание текста.
  • 4 - инструменты для работы со ссылками, картинками и видео, таблицами и стилями шаблона.
  • 5 - дополнительные инструменты.

Разберем их по отдельности.


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

С помощью выпадающего списка Стиль мы задаем стиль текста. Список предлагает нам:

  • Заголовок 1-6 - Шесть вариантов заголовка, от самого большого к самому маленькому. Эти стили соответствуют html-коду ≺h1≻-≺h6≻.
  • Буквица - крупная первая буква главы или раздела.
  • Цитата - выделение текста в форме цитаты .
  • Выделенный текст - задать цвет фона текста.
  • Текстовый блок - создать блок на всю ширину страницы с выбранным фоном.
  • Текстовый блок с иконкой - создать блок на всю ширину с иконкой.
  • Абзац - абзац текста, соответствует html-коду ≺p≻.
  • Блок - блок текста, соответствует html-коду ≺div≻.

Следующие два выпадающих списка позволяют выбрать шрифт и размер шрифта.


Изменение написания текста

Далее располагаются кнопки для изменения написания текста:

  • - Жирный текст
  • - Курсив
  • - Подчеркнутый текст
  • - Зачеркнутый текст
  • - Удалить форматирование - удалить все форматирование выделенного текста.
  • - Цвет текста и фона - выбор цвета отдельно для текста и для фона.

Каждому варианту соответствует
Кнопка Текст Теги
Жирный <b>Жирный</b>
Курсив <i>Курсив</i>
Подчеркнутый <u>Подчеркнутый</u>
Зачеркнутый <del>Зачеркнутый</del>
html-код. То есть с помощью таких тегов мы бы изменяли написание, если бы писали код вручную.


Списки и выравнивание текста

Следующая группа кнопок предназначена для создания списков и выравнивания текста:

В редакторе мы можем создавать два вида списков: нумерованный Cоответствует html-коду ≺ol≻ - ≺/ol≻ и маркированный Cоответствует html-коду ≺ul≻ - ≺/ul≻ . Нумерованный список создается с помощью кнопки и выглядит так:

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

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

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

Кнопки и служат для увеличения и уменьшения отступа от края.

Кнопка позволяет задать выравнивание текста:

  • По левому краю.
  • По центру.
  • По правому краю.
  • По ширине.

Работа со ссылками, медиа, таблицами и стилями.

Следующая группа элементов содержит инструменты для работы со ссылками, картинками и видео, таблицами и стилями шаблона:

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

Для хранения информации о внешнем виде страницы используются каскадные таблицы стилей (CSS) CSS (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. . Выпадающий список позволяет нам выбрать какая таблица стилей будет применена к текущей странице.

Обратите внимание, что мы не меняем шаблон Шаблон дизайна - программный код, который определяет как внешне будет выглядеть сайт. Создаётся разработчиком сайта, применяется к сайту - администратором, реже - контент-менеджером. Подробнее... (это делается в настройках сайта), а всего лишь выбираем таблицы стилей.

Кнопка разворачивает визуальный редактор на весь экран. Нажмите кнопку еще раз, чтобы выйти из этого режима.


Дополнительно

Нажмите на кнопку для вызова панели дополнительных инструментов:

  • - Вставить специальный символ.

    Иногда нам нужно вставить в текст специальный символ. Нажмите на эту кнопку и откроется таблица часто используемых символов. Если среди них нет нужного вам - нажмите кнопку Другой спецсимвол. Откроется полная таблица спецсимволов, нажмите на символ и он появится на странице.

  • - Вставить разрыв страницы для печати.

    Эта кнопка позволяет разбить одну страницу при печати на несколько страниц.

  • - Вставить разделитель страниц.

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

    Примечание: Эта кнопка работает только при редактировании инфоблоков.

  • - Проверка орфографии.

    Визуальный редактор позволяет автоматически проверять введенный текст на ошибки. Некоторые браузеры (например Mozilla) обладают встроенной системой проверки орфографии. Система "1С-Битрикс: Управление сайтом" для этой функции использует библиотеку pSpell. Установить эту библиотеку может администратор сайта. Если расширение не установлено, то при попытке проверки орфографии будет выдана ошибка .

    Если расширение pSpell установлено и работает, то при нажатии на кнопку Проверка орфографии откроется окно настроек .

  • - Вставить горизонтальный разделитель.

    Вставляет горизонтальную полосу Соответствует html-коду ≺hr≻ .

  • - Нижний индекс.

    Добавляет к тексту нижний индекс.

  • - Верхний индекс.

    Добавляет к тексту верхний индекс.


Заключение

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


18


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