среда, 13 февраля 2013 г.

Редактирование страниц (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-код.


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

Комментариев нет:

Отправить комментарий