Визуальный редактор (NEW)
Видеоурок
Краткие сведения о тегах HTML
Html-страница представляет собой набор элементов, имеющих в начале и конце специальные пометки - теги. Разные теги соответственно имеют различное оформление и предназначение. Элементы с разными тегами могут быть вложенными друг в друга, при этом свойства тегов объединяются. Последний открытый тег должен первым же закрываться. Пример правильной вложенности элементов:
<strong>Параграф с полужирным текстом</strong>
Подробнее можно узнать на странице википедии: Элементы HTML
1. Простой текст
Первоначально любой напечатанный текст в визуальном редакторе не заключается в теги. В выпадающем списке форматов можно выбрать нужный формат текста, за который отвечают определенные теги.
Для простого текста можно использовать формат параграфа. Чтобы применить этот формат, нужно поставить курсор на строке и выбрать в выпадающем списке формат «Параграф», что сразу поместит текст в теги «p».
Параграф по умолчанию имеет отступы сверху и снизу для визуального отделения блока текста. В нижней части редактора можно увидеть, в каких тегах содержится текст, внутри которого на данный момент стоит курсор, что подтверждается при просмотре html-кода.
2. Добавление заголовков
Текст на странице может содержать заголовки разного уровня, от первого до шестого (теги h1-h6). По умолчанию, заголовки первого уровня имеют самый крупный шрифт, второго уровня - немного меньше, и т.д. Самый мелкий шрифт - у заголовка шестого уровня. На странице желательно помещать только один заголовок первого уровня.
Для того чтобы сделать текст в визуальном редакторе заголовком, необходимо поставить курсор на нужную строку и выбрать в выпадающем списке форматов значение «Header 1».
В результате тег параграфа в нижней части редактора сменился на «h1».
Аналогичным образом можно добавить заголовки других уровней.
При переносе строк формат сохраняется, поэтому текст заранее должен быть готов перед применением форматирования. Есть возможность отменить формат, выбрав его из списка повторно.
3. Полужирный текст
Использование заголовков необходимо не только Для того чтобы визуально выделить текст и сделать его полужирным, но и для правильного индексирования контента поисковыми системами. Поэтому использовать их не по назначению не стоит. Для выделения текста полужирным шрифтом в визуальном редакторе есть кнопка «Полужирный»:
Так же, как и в программе Microsoft Word, чтобы сделать текст полужирным, нужно выделить мышкой необходимую область и нажать вышеуказанную кнопку. Если вы обратите внимание на нижнюю часть редактора, то увидите иерархию тегов «p >> strong». Именно такая вложенность элементов была упомянута в самом начале статьи, в кратких сведениях про теги HTML, и теперь вы видите результат.
4. Добавление классов элементам
Класс - это один из атрибутов html-элемента. Один класс содержит целый набор заранее определенных в вашем дизайне стилей-свойств (например, размер текста, высота строки, положение относительно других элементов и многие другие). В основном, класс служит для объединения стилей под одним именем и назначения элементам, которым необходимо придать схожий вид.
Можно назначать элементу несколько классов подряд, при этом их стили объединятся. Если классы содержат одинаковые стили, но значения у них разные, то берется значение из класса, который был прописан элементу последним, т. е. значение «перезаписывается» более поздним.
В выпадающем списке «Стили» доступны некоторые классы. Чтобы добавить их элементу, нужно выделить мышкой область текста или поставить на конкретном элементе курсор и выбрать класс из выпадающего списка. Также в списке присутствуют стили для форматирования картинок в тексте: расположить по левому (Image Left) или правому (Image Right) краю. Некоторые стили будут серого цвета, и их нельзя будет выбрать: это значит, что они не применяются к текущему элементу.
Если в дизайне вашего сайта существует определенный класс, то вы сможете увидеть его действие в визуальном редакторе. Если же класса нет - никакого воздействия на текст не будет.
Можно указать элементу произвольные классы и стили только открыв исходный код (Html) и прописав их вручную. В нижней части редактора не показываются классы элементов. Для того чтобы проверить, есть ли у элемента класс, также следует открыть исходный код.
5. Добавление ссылок
Для добавления ссылки в текст служит иконка «Вставить/редактировать ссылку». Можно перед этим выделить часть готового текста. Для удаления ссылки (но не самого текста) используется одноименная иконка рядом:
После нажатия откроется окно с параметрами ссылки, где нужно указать адрес ссылки, ее текст, заголовок, который будет отображаться при наведении на ссылку и цель.
Нажмите кнопку «Ок», чтобы применить изменения. По завершению процедуры добавления выделенная область будет ссылкой.
6. Добавление картинок
Для того чтобы добавить картинку, поставьте курсор в нужном месте и нажмите иконку «Вставить/редактировать изображение»:
Откроется окно параметров изображения, где обязательно нужно указать путь к картинке (Источник), описание (альтернативный текст, который виден при отсутствии файла), можно указать точные размеры картинки. Путь к картинке, уже имеющейся в загруженных файлах в ПУ, вы можете найти в Панели Управления → «Управление контентом» → «Файлы» → столбец «URL». Копировать путь следует начиная с «/getfile» до конца строки адреса, это можно сделать просто нажав кнопку «Copy» в следующем столбце.
Для регулирования положения картинки относительно окружающего контента воспользуйтесь стилями «Image Left» или «Image Right» в выпадающем списке «Стили».
7. Очистка формата
Иногда может возникнуть необходимость убрать всё форматирование текста, для этого есть специальный инструмент. Выделите нужную часть текста мышкой и нажмите на кнопку «Очистить формат».
Однако не будет затронуто форматирование, применённое из списка форматов, например «Header 1». Такое форматирование нужно будет убирать повторным выбором из списка.
После очистки формата html приобретает более понятный и чистый вид, а внешний вид текста становится стандартным.
Есть ещё способ вставки текста без лишних стилей. Перед вставкой активируйте кнопку «Вставить как текст»:
8. Списки
Существует два типа списков: маркированный (или неупорядоченный) и нумерованный (упорядоченный). Для вставки списка на страницу служат две кнопки с соответствующими названиями «Маркированный список» и «Нумерованный список»
Сразу после нажатия какой-либо из этих иконок на месте поставленного курсора возникнет первый маркер элемента списка. Теперь можно составлять список. При переходе на новую строку каждый новый элемент списка будет иметь маркер. Для того чтобы закончить список, надо перейти на новую строку еще раз, и последний автоматически возникший маркер исчезнет.
9. Таблицы
Таблицу можно добавить с помощью кнопки «Таблица», а также из контекстного меню по нажатию правой кнопкой мыши в рабочей области редактора
После наведения на «Вставить таблицу» появляется окошко, в котором на предлагаемой сетке сразу можно выделить границы для будущей таблицы, выбор завершается кликом левой кнопки мыши.
Созданная таблица будет иметь сжатый вид, и, потянув мышью за квадратные точки по краям таблицы, можно настроить желаемый размер.
Далее можно открыть свойства таблицы и настроить её внешний вид.
Из контекстного меню можно работать с ячейками, строками и столбцами таблицы: добавлять, удалять, объединять и т.д.
10. Добавление анимации
Для того чтобы добавить анимацию (flash-баннер), поставьте курсор в нужном месте и нажмите иконку «Вставить/редактировать видео»:
Откроется окно для вставки видео, в котором нужно переключиться на вкладку «Код для вставки».
Путь к анимации, уже имеющейся в загруженных файлах в ПУ, вы можете найти в Панели Управления → «Внешний вид и контент» → «Файлы» → столбец «URL». Копировать путь, нажав на кнопку «Copy».
Для получения готового html-кода объекта воспользуйтесь любым предназначенным для этого генератором, например http://tools.webmasters.sk/embedded-media.php (Media type нужно выбрать flash).
На снимке ниже выделена часть сгенерированного кода, которая понадобится:
Далее полученный код нужно вставить в открытое ранее окно редактора и нажать «Ок».
Готовую анимацию можно посмотреть при помощи инструмента «Предпросмотр».
