VisualEditorNew

Материал из ABCP Documentation
Перейти к: навигация, поиск

Краткие сведения о тегах HTML

Html-страница представляет собой набор элементов, имеющих в начале и конце специальные пометки - теги. Разные теги соответственно имеют различное оформление и предназначение. Элементы с разными тегами могут быть вложенными друг в друга, при этом свойства тегов объединяются. Последний открытый тег должен первым же закрываться. Пример правильной вложенности элементов:

<p><strong>Параграф с полужирным текстом</strong></p>

Подробнее можно узнать на странице википедии: Элементы HTML


1. Простой текст

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

Для простого текста можно использовать формат параграфа. Чтобы применить этот формат, нужно поставить курсор на строке и выбрать в выпадающем списке формат «Параграф», что сразу поместит текст в теги «p».

Простой текст.png

Параграф по умолчанию имеет отступы сверху и снизу для визуального отделения блока текста. В нижней части редактора можно увидеть, в каких тегах содержится текст, внутри которого на данный момент стоит курсор, что подтверждается при просмотре html-кода.

Простой текст2.png

2. Добавление заголовков

Текст на странице может содержать заголовки разного уровня, от первого до шестого (теги h1-h6). По умолчанию, заголовки первого уровня имеют самый крупный шрифт, второго уровня - немного меньше, и т.д. Самый мелкий шрифт - у заголовка шестого уровня. На странице желательно помещать только один заголовок первого уровня.

Для того, чтобы сделать текст в визуальном редакторе заголовком, необходимо поставить курсор на нужную строку и выбрать в выпадающем списке форматов значение «Header 1».


Заголовки.png


В результате тег параграфа в нижней части редактора сменился на «h1».


Заголовки2.png


Аналогичным образом можно добавить заголовки других уровней.


Warning.png При переносе строк формат сохраняется, поэтому текст заранее должен быть готов перед применением форматирования. Есть возможность отменить формат, выбрав его из списка повторно.


3. Полужирный текст

Использование заголовков необходимо не только для того, чтобы визуально выделить текст и сделать его полужирным, но и для правильного индексирования контента поисковыми системами. Поэтому использовать их не по назначению не стоит. Для выделения текста полужирным шрифтом в визуальном редакторе есть кнопка «Полужирный»:

Полужирный.png

Так же, как и в программе Microsoft Word, чтобы сделать текст полужирным, нужно выделить мышкой необходимую область и нажать вышеуказанную кнопку. Если вы обратите внимание на нижнюю часть редактора, то увидите иерархию тегов «p >> strong». Именно такая вложенность элементов была упомянута в самом начале статьи, в кратких сведениях про теги Html, и теперь вы видите результат.


Полужирный текст.png


4. Добавление классов элементам

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

Можно назначать элементу несколько классов подряд, при этом их стили объединятся. Если классы содержат одинаковые стили, но значения у них разные, то берется значение из класса, который был прописан элементу последним, т.е. значение «перезаписывается» более поздним.

В выпадающем списке «Стили» доступны некоторые классы. Чтобы добавить их элементу, нужно выделить мышкой область текста или поставить на конкретном элементе курсор и выбрать класс из выпадающего списка. Также в списке присутствуют стили для форматирования картинок в тексте: расположить по левому (Image Left) или правому (Image Right) краю). Некоторые стили будут серого цвета, и их нельзя будет выбрать: это значит, что они не применяются к текущему элементу.

Стили.png

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


Warning.png Можно указать элементу произвольные классы и стили только открыв исходный код (Html) и прописав их вручную. В нижней части редактора не показываются классы элементов. Для того, чтобы проверить, есть ли у элемента класс, также следует открыть исходный код.

Классы.png


5. Добавление ссылок

Для добавления ссылки в текст служит иконка «Вставить/редактировать ссылку». Можно перед этим выделить часть готового текста. Для удаления ссылки (но не самого текста) используется одноименная иконка рядом:

Ссылка.png


Ссылки1.png


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


Ссылки2.png


Нажмите кнопку «Ок», чтобы применить изменения. По завершению процедуры добавления выделенная область будет ссылкой.


Ссылки3.png


6. Добавление картинок

Для того, чтобы добавить картинку, поставьте курсор в нужном месте и нажмите иконку «Вставить/редактировать изображение»:

Вставить изображение.png

Откроется окно параметров изображения, где обязательно нужно указать путь к картинке (Источник), описание (альтернативный текст, который виден при отсутствии файла), можно указать точные размеры картинки. Путь к картинке, уже имеющейся в загруженных файлах в ПУ, вы можете найти в Панели Управления -> «Управление контентом» -> «Файлы» -> столбец «URL». Копировать путь следует начиная с «/getfile» до конца строки адреса, это можно сделать просто нажав кнопку «Copy» в следующем столбце.


Вставка изображения.png


Для регулирования положения картинки относительно окружающего контента воспользуйтесь стилями «Image Left» или «Image Right» в выпадающем списке «Стили».

Форматирование изображения.png Форматирование изображения2.png


7. Очистка формата

Иногда может возникнуть необходимость убрать всё форматирование текста, для этого есть специальный инструмент. Выделите нужную часть текста мышкой и нажмите на кнопку «Очистить формат».

Очистка формата.png

Однако не будет затронуто форматирование, применённое из списка форматов, например «Header 1». Такое форматирование нужно будет убирать повторным выбором из списка.

После очистки формата html приобретает более понятный и чистый вид, а внешний вид текста становится стандартным.


Результат очистки.png


Есть ещё способ вставки текста без лишних стилей. Перед вставкой активируйте кнопку «Вставить как текст»:

Вставить как текст.png


8. Списки

Существует два типа списков: маркированный (или неупорядоченный) и нумерованный (упорядоченный). Для вставки списка на страницу служат две кнопки с соответствующими названиями «Маркированный список» и «Нумерованный список»

Маркированный список Нумерованный список.png

Сразу после нажатия какой-либо из этих иконок на месте поставленного курсора возникнет первый маркер элемента списка. Теперь можно составлять список. При переходе на новую строку каждый новый элемент списка будет иметь маркер. Для того, чтобы закончить список, надо перейти на новую строку еще раз, и последний автоматически возникший маркер исчезнет.


Списки.png


9. Таблицы

Таблицу можно добавить с помощью кнопки «Таблица», а также из контекстного меню по нажатию правой кнопкой мыши в рабочей области редактора

Таблица.png


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

Создание таблицы.png


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

Размер таблицы.png

Далее можно открыть свойства таблицы и настроить её внешний вид.

Свойства таблицы.png Свойства таблицы2.png


Из контекстного меню можно работать с ячейками, строками и столбцами таблицы: добавлять, удалять, объединять и т.д. Работа с таблицей.png


10. Добавление анимации

Для того, чтобы добавить анимацию (flash-баннер), поставьте курсор в нужном месте и нажмите иконку «Вставить/редактировать видео»:

Медиа.png

Откроется окно для вставки видео, в котором нужно переключиться на вкладку «Код для вставки».

Вставка кода.png

Путь к анимации, уже имеющейся в загруженных файлах в ПУ, вы можете найти в Панели Управления -> «Внешний вид и контент» -> «Файлы» -> столбец «URL». Копировать путь, нажав на кнопку «Copy».

Для получения готового html-кода объекта воспользуйтесь любым предназначенным для этого генератором, например http://tools.webmasters.sk/embedded-media.php (Media type нужно выбрать flash).

На снимке ниже выделена часть сгенерированного кода, которая понадобится:

Генерация кода.png


Далее полученный код нужно вставить в открытое ранее окно редактора и нажать «Ок».

Код объекта.png

Готовую анимацию можно посмотреть при помощи инструмента «Предпросмотр».

Готовая анимация.png