Визуальный редактор
Документация по работе с новой версией редактора.
Краткие сведения о тегах HTML
Html-страница представляет собой набор элементов, имеющих в начале и конце специальные пометки - теги. Разные теги соответственно имеют различное оформление и предназначение. Элементы с разными тегами могут быть вложенными друг в друга, при этом свойства тегов объединяются. Последний открытый тег должен первым же закрываться. Пример правильной вложенности элементов:
<strong>Параграф с полужирным текстом</strong>
Подробнее можно узнать на странице википедии: Элементы HTML
1. Простой текст
Первоначально любой напечатанный текст в визуальном редакторе не заключается в теги. В выпадающем списке «Формат» можно выбрать нужный формат текста, за который отвечают определенные теги.
Для простого текста можно использовать формат «Абзац». Чтобы применить этот формат, нужно выделить нужный участок текста и выбрать в выпадающем списке формат «Абзац», что сразу поместит текст в теги «p» (сокращенно от слова paragraph).
Параграф по умолчанию имеет отступы сверху и снизу для визуального отделения блока текста. В нижней части редактора можно увидеть, в каких тегах содержится текст, внутри которого на данный момент стоит курсор, что подтверждается при просмотре html-кода.
2. Добавление заголовков
Текст на странице может содержать заголовки разного уровня, от первого до шестого (теги h1-h6). По умолчанию, заголовки первого уровня имеют самый крупный шрифт, второго уровня - немного меньше, и т.д. Самый мелкий шрифт - у заголовка шестого уровня. На странице должен быть только один заголовок первого уровня.
Для того чтобы сделать текст в визуальном редакторе заголовком, необходимо поставить курсор на нужную строку и выбрать в выпадающем списке "Формат" значение "Заголовок 1".
В результате тег текста в нижней части редактора сменился на h1.
Аналогичным образом можно добавить заголовки других уровней, например, второго.
3. Полужирный текст
Использование заголовков необходимо не только Для того чтобы визуально выделить текст и сделать его полужирным, но и для правильного индексирования контента поисковыми системами. Поэтому использовать их не по назначению не стоит. Для выделения текста полужирным шрифтом в визуальном редакторе есть кнопка "Полужирный":
Так же, как и в программе Microsoft Word, чтобы сделать текст полужирным, нужно выделить мышкой необходимую область и нажать вышеуказанную кнопку. Если вы обратите внимание на нижнюю часть редактора, то увидите иерархию тегов "p >> strong". Именно такая вложенность элементов была упомянута в самом начале статьи, в кратких сведениях про теги Html, и теперь вы видите результат.
4. Добавление классов элементам
Класс - это один из атрибутов элемента html. Один класс содержит целый набор заранее определенных в вашем дизайне стилей-свойств (например, размер текста, высота строки, положение относительно других элементов и многие другие). В основном, класс служит для объединения стилей под одним именем и назначения элементам, которым необходимо придать схожий вид. В большинстве случаев, увидеть действие класса на тег в предпросмотре страницы в Панели Управления невозможно, т.к. классы вашего дизайна доступны только на самом сайте.
Можно назначать элементу несколько классов подряд, при этом их стили объединятся. Если классы содержат одинаковые стили, но значения у них разные, то берется значение из класса, который был прописан элементу последним, т.е. значение "перезаписывается" более поздним.
Для того чтобы добавить класс (или несколько классов) какому-либо элементу, нужно выделить мышкой область текста или поставить на конкретном элементе курсор и нажать кнопку "Добавить/Изменить элемент":
После нажатия должно открыться окошко со свойствами элемента. В выпадающем списке напротив атрибута "Класс" выбираете нужный вам класс или пишете собственное "(значение)". Если необходимо указать несколько классов, то их следует вписывать в это же поле последовательно друг за другом, разделяя пробелами. Нажмите кнопку "Вставить", чтобы применить все изменения.
Поставив курсор на элемент и посмотрев в нижнюю часть редактора, можно убедиться в том, что класс (или классы) был добавлен. Однако для ссылок посмотреть классы таким способом нельзя.
5. Добавление ссылок
Для добавления ссылки в текст, нужно выделить его часть и нажать иконку "Добавить/Изменить ссылку". Для удаления ссылки (но не самого текста) используется одноименная иконка рядом:
После нажатия откроется окно с параметрами ссылки, где в "Общих параметрах" нужно указать адрес ссылки, ее цель, заголовок, выбрать нужный класс.
Если необходимых классов в списке нет, то на вкладке "Дополнительно" того же окна можно добавить собственные классы. Добавить классы для ссылки можно и ранее описанным способом при помощи кнопки "Добавить/Изменить элемент".
Нажмите кнопку "Вставить", чтобы применить изменения. По завершению процедуры добавления выделенная область будет ссылкой.
6. Добавление картинок
Для того чтобы добавить картинку, поставьте курсор в нужном месте и нажмите иконку "Добавить/Изменить изображение":
Откроется окно параметров изображения, где обязательно нужно указать путь к картинке (адрес), описание (альтернативный текст, который виден при отсутствии файла), желательно заголовок (показывается при наведении на картинку). В области предварительного просмотра, сразу же после указания адреса, вы можете увидеть свое изображение. Путь к картинке, уже имеющейся в загруженных файлах в ПУ, вы можете найти в Панели Управления → "Управление контентом" → "Файлы" → столбец "URL". Копировать путь следует начиная с "getfile" до конца строки адреса.
На вкладке "Положение" того же окна вы можете отрегулировать положение картинки относительно окружающего контента. Для тех, кто разбирается в css, в поле "Стиль" есть возможность изменить стили отображения на желаемые, например, убрать отступы снизу и слева, как на скриншоте:
7. Очистка формата
Зачастую, при вставке текста в визуальный редактор из буфера обмена, редактор пытается скопировать все стили текста, который ему был передан. В результате получается ненужная мешанина тегов или не совсем желаемое оформление. К примеру, на скриншоте видно, как текст после вставки приобрел черный фон:
Приобрести нормальный вид тексту поможет кнопка "Очистить формат":
Выделите нужную часть текста мышкой и нажмите на вышеупомянутую иконку.
После очистки формата html приобретает более понятный и чистый вид, а внешний вид текста становится стандартным. По необходимости можно придать нужный внешний вид самостоятельно, используя средства редактора (настроить размер, цвет, стиль).
Есть еще один способ вставки без лишних стилей текста. Перед вставкой активируйте кнопку (т.е. кнопка должна подсвечиваться оранжевым цветом) "Вставить как текст":
8. Списки
Существует два типа списков: маркированный (или неупорядоченный) и нумерованный (упорядоченный). Для вставки списка на страницу служат две кнопки с соответствующими названиями "Маркированный список" и "Нумерованный список"
Сразу после нажатия какой-либо из этих иконок на месте поставленного курсора возникнет первый маркер элемента списка. Теперь можно составлять список. При переходе на новую строку каждый новый элемент списка будет иметь маркер. Для того чтобы закончить список, надо перейти на новую строку еще раз, и последний автоматически возникший маркер исчезнет.
9. Таблицы
Таблицу можно добавить с помощью кнопки "Добавление/Изменение таблицы":
После нажатия появляется окно параметров, где можно задать первоначальные настройки для будущей таблицы.
Закончив работу с параметрами, нажмите кнопку "Вставить". На месте, где стоял курсор, появится каркас таблицы в виде прерывистых линий серого цвета.
Этот каркас появляется при активированной кнопке "Все знаки" и после сохранения на странице виден не будет.
Кликом правой кнопки мыши по таблице можно вызвать контекстное меню, откуда можно снова открыть окно параметров таблицы и изменить настройки при необходимости.
Кнопка "Параметры строки" позволяет изменить свойства строки, на которой поставлен курсор:
Строку можно сделать заголовочной (строка переместится в самый верх таблицы), выставив соответственный тип строки в окне параметров и применив настройки. Также можно выровнять текст внутри ячеек.
Аналогичным образом можно сделать завершающую строку, поменяв тип строки на "Завершение". Текст внутри ячеек будет выровнен по правому краю.
Кнопка "Параметры ячейки"
соответственно позволяет редактировать параметры ячейки, внутри которой находится курсор. Так же, как и строку, ячейку тоже можно сделать заголовочной, указав тип "Заголовок" и обязательно выставив нужную область действия (строка, столбец, группы строк или столбцов).
Если обратить внимание на нижнюю часть редактора, то можно заметить, как тег ячейки поменялся с td на th.
Для добавления или удаления строк и столбцов используйте кнопки:
"Добавить столбец слева"
"Добавить столбец справа"
"Удалить столбец"
"Добавить строку сверху"
"Добавить строку снизу"
"Удалить строку"
Чтобы объединить ячейки, выделите нужные
и нажмите на кнопку "Объединить ячейки":
Результат объединения можно увидеть на скриншоте:
Чтобы разбить ячейки обратно, используйте кнопку "Разбить ячейку":
Чтобы добавить границы ячейкам таблицы, откройте окно параметров таблицы и установите числовое значение для поля "Граница".
В результате таблица приобретет видимые границы:
10. Добавление анимации
Для того чтобы добавить необходимую анимацию(баннер), поставьте курсор в нужном месте и нажмите иконку "Вставить/редактировать видео":
Откроется окно параметров изображения, где обязательно нужно указать путь к картинке (адрес), размеры (в большинстве случаев определяются автоматически). В области предварительного просмотра, сразу же после указания адреса, вы можете увидеть свою анимацию(баннер). Путь к анимации, уже имеющейся в загруженных файлах в ПУ, вы можете найти в Панели Управления → "Внешний вид и контент" → "Файлы" → столбец "URL". Копировать путь, нажав на кнопку "Copy".