17 марта 2014 года произошло обновление визуального редактора материалов:

Навигация по инструкции:

1. Работа с текстом
2. Работа со ссылками
3. Работа с картинками
4. Работа с таблицами
5. Работа с Flash
6. Добавление видео с YouTube
7. Дополнительные функции
8. Ответы на частые вопросы

Ответы на частые вопросы

Работа с картинками

При вставке изображения в визуальный редактор появляется окно «Свойства изображения» с двумя вкладками: «Данные об изображении» и «Ссылка».

Вкладка «Данные об изображении»

• Ссылка: можно вставить URL картинки или выбрать файл на сервере через кнопку «Выбор на сервере».
• Альтернативный текст: описание изображения (атрибут alt).
• Ширина и высота: задаются в пикселях. По умолчанию — текущие размеры изображения.
• Граница: толщина в пикселях. По умолчанию — черная рамка.
• Горизонтальный отступ: отступ слева и справа (в пикселях).
• Вертикальный отступ: отступ сверху и снизу (в пикселях).

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

Вкладка «Ссылка»

Заполняется, если изображение будет использоваться как ссылка:

• Ссылка: адрес перехода (атрибут href).
• Цель: способ открытия ссылки (атрибут target).

Пример вставленного изображения:

<p><a href="http://www.ucoz.ru/" target="_blank">
 <span style="color:#FF8C00;"><img alt="Логотип uCoz" src="http://www.ucoz.ru/ucoz/img/logo.png"
 style="border-width: 2px; border-style: solid; margin: 15px 10px; float: left; width: 139px; height: 88px;" /></span>
</a>Тут можно писать любой текст</p>

<p>Расположение картинки</p>
<p>От этого не поменяется</p>
<p>Сейчас картинка располагается слева от текста</p>
<p>и красиво смотрится в большом тексте, благодаря обтеканию.</p>

Часто задаваемые вопросы

Работа с текстом

Редактор поддерживает следующие функции:

• Абзац, Перенос строки, Красная строка (добавить отступы), Убрать отступ
• Нумерованный и маркированный список
• Полужирный, Курсив, Подчёркнутый, Зачёркнутый
• Подстрочный и надстрочный индекс
• Выравнивание по левому/центру/правому краю
• Вставка специальных символов

По умолчанию при нажатии Enter используется тег <p>. Чтобы вставить <br> вместо <p>, нажимайте Shift + Enter.

Пример исходного HTML-кода:

<p>Добавление текста в новый визуальный редактор</p>
<p>Следующий абзац (Enter) Перенос строки (Shift+Enter)</p>
<p style="margin-left: 40px;">Также можно начинать новый абзац с красной строки</p>
<p>Следующий абзац начинается с красной строки (с отступом), но отступ легко убирается</p>

<ol>
 <li>еще</li>
 <li>можно</li>
 <li>делать</li>
 <li>нумерованные</li>
</ol>

<ul>
 <li>маркированные</li>
 <li>списки</li>
</ul>

<p>Еще можно <strong>выделять</strong> <em>в тексте</em> <u>нужную</u> и <s>ненужную</s> информацию и работать с формулами: H<sub>2</sub>O и x<sup>2</sup>+2x-1=0</p>
<p style="text-align: left;">Лево</p>
<p style="text-align: center;">Центр</p>
<p style="text-align: right;">Право</p>

Заголовки, шрифт, размер, цвет, цитата

Пример HTML:

<p><span style="font-size:14px;">Разнообразить скучный текст красивыми</span></p>
<span style="color:#FF0000;">Ц</span>
<span style="color:#FFA500;">В</span>
<span style="color:#FFFF00;">Е</span>
<span style="color:#008000;">Т</span>
<span style="color:#0000FF;">А</span>
<span style="color:#0000CD;">М</span>
<span style="color:#000080;">И</span>
и <span style="font-family:comic sans ms,cursive;">ШРИФТАМИ</span>

<h1>Заголовок 1 h1</h1>
<h2>Заголовок 2 h2</h2>
<p>Заголовок 3 h3</p>

<pre>Моноширинное</pre>
<blockquote><p>Цитата</p></blockquote>

Моноширинный шрифт — это стиль, при котором все символы имеют одинаковую ширину. Полезен для кода.

Вставка текста

Если вы вставляете текст из Word или другого редактора, используйте:

• «Вставить только текст» — для очистки от форматирования
• «Вставить из Word» — для очистки от «мусора» Word-разметки

Специальные символы

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

FAQ

Работа со ссылками

После нажатия на иконку добавления ссылки открывается окно с тремя вкладками:

• Информация о ссылке
• Цель
• Дополнительно

Информация о ссылке

• Тип ссылки: атрибут type
• Ссылка: адрес перехода (атрибут href)

Цель

Цель: способ открытия ссылки в браузере (атрибут target)

Дополнительно

• Идентификатор: атрибут id (используется в CSS: #link_id)
• Имя: атрибут name (обязателен для якорей)
• Код языка: атрибут lang
• Последовательность перехода: атрибут tabindex
• Заголовок: атрибут title (всплывающая подсказка)
• Классы CSS: атрибут class (например, .class_ucoz)
• Кодировка ресурса: атрибут charset
• Отношение: атрибут rel
• Стиль: атрибут style

Пример HTML-кода добавленной ссылки:

<p>
 <a charset="utf-8" class="class_ucoz" href="http://ucoz.ru" id="link_id" lang="ru" 
 name="ucoz" rel="nofollow" style="color:blue;" tabindex="1" 
 target="_blank" title="Конструктор сайтов">
 http://ucoz.ru
 </a>
</p>

Редактирование / Удаление ссылки

Чтобы изменить или удалить ссылку:

1. Кликните по ней правой кнопкой мыши.
2. Выберите нужное действие в контекстном меню.

Также удалить ссылку можно через кнопку «Убрать ссылку» на панели редактора:

Якоря

Якорь — это метка с уникальным именем, указывающая на определённое место на странице. С помощью якорей можно быстро переходить к нужным разделам длинного документа.

Создание якоря

Допустим, вы хотите создать якорь для второго абзаца текста:

1. Поставьте курсор в начало второго абзаца.
2. Нажмите иконку Вставить/редактировать якорь.
3. Введите имя якоря в появившемся окне:

После нажатия «ОК» в редакторе появится красный флажок — он обозначает якорь. Флажок виден только в режиме редактирования.

Создание ссылки на якорь

1. Переместите курсор в место, где хотите вставить ссылку.
2. Нажмите иконку Вставить/редактировать ссылку.
3. В поле Тип ссылки выберите Ссылка на якорь в тексте.
4. Выберите нужный якорь: по имени или идентификатору.

Якорь создан!

HTML-код с якорем

<p><a href="#Второй абзац">#Второй абзац</a></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Quisque varius diam in lacus sollicitudin faucibus.</p>

<p><a id="Второй абзац" name="Второй абзац"></a>
 Nunc nulla odio, dignissim sit amet consequat id, consectetur eu enim.</p>

Редактирование или удаление якоря

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

Работа с таблицами

Чтобы создать таблицу в визуальном редакторе, нажмите иконку «Таблица».

Основные параметры таблицы:

• Строки: количество строк в таблице (<tr>). Первая строка — заголовочная (используется <th>).
• Колонки: количество столбцов.
• Размер границ: толщина границ в пикселях (border).
• Выравнивание: расположение содержимого в ячейках (align).
• Ширина и высота: задаются в пикселях (width, height).
• Внешний отступ ячеек: расстояние между ячейками (cellspacing).
• Внутренний отступ ячеек: расстояние от содержимого до границы (cellpadding).
• Заголовок: отображается над таблицей (<caption>).
• Итоги: краткое описание таблицы, не отображается в браузере, но может использоваться поисковиками (summary).

Пример пустой таблицы:

После заполнения:

Пример HTML-кода таблицы:

<table align="center" border="1" cellpadding="5" cellspacing="10" style="height: 50px; width: 500px;">
 <caption>Заголовок таблицы</caption>
 <thead>
 <tr>
 <th scope="col">Заголовок столбца1</th>
 <th scope="col">Заголовок столбца2</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Данные столбца1</td>
 <td>Данные столбца2</td>
 </tr>
 <tr>
 <td>Данные столбца1</td>
 <td>Данные столбца2</td>
 </tr>
 </tbody>
</table>

Редактирование таблицы

Чтобы отредактировать таблицу (добавить/удалить строки, ячейки, объединить и т.д.):

• Кликните правой кнопкой мыши по таблице
• Выберите нужное действие в контекстном меню

Свойства ячейки

Чтобы изменить параметры конкретной ячейки (ширину, фон, границу и др.):

1. Выделите нужную ячейку или диапазон
2. Нажмите правой кнопкой мыши
3. Выберите «Ячейка → Свойства ячейки»

• Ширина и высота: можно задавать в px или %
• Тип ячейки: заголовок (<th>) или данные (<td>)
• Объединяет колонок: colspan
• Объединяет строк: rowspan
• Перенос по словам: nowrap
• Выравнивание: align, valign
• Цвет фона: bgcolor
• Цвет границ: bordercolor
• Фоновое изображение: можно загрузить через «Выбор на сервере»
• Позиция и повтор фона: управление отображением фонового изображения

Работа с Flash

Чтобы вставить Flash-элемент в редактор, нажмите на иконку:

Откроется окно «Свойства Flash» с тремя вкладками:

• Основное
• Свойства
• Дополнительно

Вкладка «Основное»

• Ссылка: путь к .swf-файлу. Можно выбрать файл на сервере — кнопка «Выбор на сервере».
• Ширина, Высота: размеры в пикселях.
• Горизонтальный и вертикальный отступы: задаются в пикселях.

В блоке «Предпросмотр» можно увидеть, как выглядит Flash-элемент до вставки.

Вкладка «Свойства»

• Масштабировать: варианты: пропорционально, заходить за границы, заполнять.
• Доступ к скриптам: можно ограничить — «всегда», «на том же домене», «никогда».
• Взаимодействие с окном: обычное, прозрачное или непрозрачное (для Flash с прозрачными областями).
• Качество: настройка качества проигрывания.
• Выравнивание: относительно окружающего текста.
• Доп. параметры: включение меню, автозапуск, повтор, полноэкранный режим.

Вкладка «Дополнительно»

• Идентификатор: атрибут id (например, для CSS: #id_flash).
• Цвет фона: HTML-цвет (атрибут bgcolor).
• Класс CSS: атрибут class (например, .class_flash).
• Стиль: inline-стили (атрибут style).

Результат вставки

Редактирование Flash-элемента

Чтобы изменить параметры после вставки:

1. Кликните правой кнопкой мыши по Flash-элементу
2. Выберите пункт «Свойства Flash»

Добавление видео с YouTube

Вы можете добавить видео с YouTube в визуальный редактор двумя способами:

1. Вставка HTML-кода
2. Вставка ссылки на видео (URL)

Для этого нажмите иконку «Вставить YouTube видео» в панели редактора.

1 способ. Вставка HTML-кода

На странице с видео выполните следующие шаги:

1. Нажмите Share (Поделиться)
2. Выберите Embed (Встроить)
3. Скопируйте HTML-код

Вставьте скопированный код в первое поле окна редактора:

Дополнительные параметры:

• Показать похожие видео после просмотра — включить/отключить рекомендации.
• Режим повышенной конфиденциальности — видео загружается через https://www.youtube-nocookie.com.
• Автозапуск — видео начнёт воспроизводиться при загрузке страницы.
• Начать с — указание времени начала (в формате сс, мм:сс или чч:мм:сс).

2 способ. Вставка ссылки (URL)

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

Вставьте эту ссылку во второе поле:

Дополнительно: можно задать ширину и высоту плеера в пикселях.

Пример вставленного видео в редактор:

Дополнительные функции

Отменить / Повторить

Кнопки «Отменить» и «Повторить» позволяют откатить последнее действие или вернуть его.

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

Горячие клавиши: Ctrl/Cmd + Z — отменить, Ctrl/Cmd + Y — повторить.

Источник

Кнопка «Источник» переключает редактор в режим просмотра и редактирования HTML-кода.