Редактирование страниц (7): Стили в визуальном редакторе

Для форматирования контента в визуальном редакторе вы можете использовать стили и классы, которые доступны вам в двух ниспадающих списках на панели инструментов редактора.

Какие стили и классы доступны в этих списках - целиком и полностью настраиваемая возможность.

Если вы при установке сайта выберите один из шаблонов сайта (кроме пустого Bare Bones), то кое-что из стилей и классов уже будет добавлено в списки.

Как применять стили и классы

Если вы установите Стартовый сайт, то в списке стилей вам будут доступны такие стили:

• Heading H1
• Heading H2
• Heading H3
• Paragraph

Это блоковые стили, то есть применяются к блоковым элементам таким как абзацы (<p></p>) и заголовки разных уровней (<h1></h1>).

Разместив курсор на блоковом элементе в редакторе, например, абзаце текста, вы можете превратить его в заголовок, и наоборот.

Точно также обстоят дела и классами стилей для определенных элементов.

На Стартовом сайте такие классы предопределены для таких элементов:

• <p>: Note, (Нет)
• <img>: Framed, Framed (heavy), (Нет)
• <table>: Heavy, Light, (Нет)

Для применения класса вам нужно правильно выбрать нужный элемент.

Кстати, указанные выше классы можно применять к изображению при добавлении его на страницы - в диалоговом окне.

То же самое относится и к таблицам.

(Эти снимки экрана сделаны в версии 4.0. В версии 3.2 классы располагаются на вкладке "Дополнительно" и имеют более простое отображение.)

Как выбирать элементы на странице и применять стили

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

Когда вы размещаете курсор на соответствующем элементе в визуальном редакторе, внизу отображается это вложенность элементов -  в виде селекторов.

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

Например, вы хотите применить стиль Light к таблице на странице.

1. Разместите курсор в одной из ячеек таблицы. Обратите внимание на селекторы, появившиеся внизу.
   
   
   
   
   
2. Нажмите селектор table внизу. Вся таблица будет выбрана...
   
   
   
   
   ...а в списке классов появятся относящиеся к таблице классы стилей.
   
   
   
3. В списке классов выберите класс Light.

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

Далее мы рассмотрим, как в редакторе страниц редактировать HTML-код.


Читайте также в этом блоге:

• Редактирование страниц (1): Настройки, контент, метаданные, просмотр
• Редактирование страниц (2): Общие и расширенные настройки
• Редактирование страниц (3): Публикация страниц по расписанию
• Редактирование страниц (4): Выбор шаблона страниц
• Редактирование страниц (5): Визуальный редактор
• Редактирование страниц (6): Вставка контента в редакторе