Как пользоваться HTML-редактором

HTML-редактор

Обзор

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

В этой статье вы узнаете, как получить доступ к различным элементам редактора и использовать их для создания привлекательного и эстетически приятного контента.

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

Меню панели инструментов

HTML-редактор отображается при редактировании контента в курсах, сообщениях, виджетах и ​​многом другом. Панель инструментов состоит из строки меню и значков, позволяющих редактировать контент в соответствующем разделе.

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


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



Файл

В меню «Файл» доступны следующие действия:

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

Редактировать

Меню «Редактировать» включает следующие действия.

Заголовок
Описание
Отменить
Отмените последнее действие.
Переделать
Повторите последнее действие.
Резать
Удалите выделенный текст/изображение и сохраните его в буфере обмена.
Копия
Скопируйте выделенный текст/изображение и сохраните его в буфер обмена.
Вставить
Вставьте текст/изображение из буфера обмена.
Вставить как текст
Вставьте содержимое из буфера обмена только в текстовом виде, без форматирования.
Выбрать все
Выделите весь контент в текстовом окне.
Найти и заменить
Найдите слово или фразу и замените их новым словом/фразой (если применимо).

Вид

Меню «Вид» включает следующие действия для просмотра текста и символов в текстовом окне.

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

Вставлять

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

Заголовок
Описание
Связь
Вставьте гиперссылку на URL-адрес.
СМИ
Вставьте/встройте медиафайл.
Стол Вставьте и создайте таблицу.
Особый персонаж Вставьте специальный символ.
Эмодзи Вставьте смайлик.
Горизонтальная линия
Вставьте горизонтальную линию.
Разрыв страницы
Вставьте разрыв строки, чтобы начать новую страницу.
Неразрывное пространство
Вставьте пробел, который не разорвет страницу.
Якорь
Вставьте якорь/закладку в определенное место/позиция.
Вставить шаблон
Вставьте сохраненный шаблон.
Сохранить как шаблон
Сохраните выделенный текст как шаблон.
Дата/время
Выберите дату или время из выпадающего меню.
Редактировать уравнение
Нажмите, чтобы отредактировать выделенное уравнение.
Загрузить изображение
Нажмите, чтобы загрузить изображение.
Загрузить файл
Нажмите, чтобы загрузить файл.
Создать веб-конференцию
Нажмите, чтобы добавить веб-конференцию в текст*.
Запись звука
Нажмите, чтобы записать звук непосредственно в текстовом окне.
Записать видео
Нажмите, чтобы записать видео прямо в текстовом окне.
Информация
* Для отображения параметров создания веб-конференции необходимо предварительно установить приложение(я) для веб-конференций из Центра приложений.

Формат

Меню «Формат» включает следующие действия для форматирования текста.

Заголовок
Описание
Смелый
Выделите выделенный текст жирным шрифтом.
Курсив
Выделите выделенный текст курсивом.
Подчеркнуть
Подчеркните выделенный текст.
Зачеркнуто
Зачеркните выделенный текст.
Верхний индекс
Выделенный текст отформатировать как верхний индекс.
Нижний индекс
Выделенный текст отформатировать как нижний индекс.
Код
Отформатируйте выделенный текст как код.
Блоки
Выберите соответствующее блочное форматирование из выпадающего меню.
Шрифты
Выберите другой шрифт из выпадающего меню.
размеры шрифта
Выберите размер шрифта из выпадающего меню.
Выровнять
Выберите стиль выравнивания текста из выпадающего меню.
Высота строки
Выберите высоту строки из выпадающего меню.
Увеличить отступ
Сдвиньте текст или абзац вправо.
Уменьшить отступ
Переместите текст или абзац влево.
Цвет текста
Выберите желаемый цвет текста из выпадающего меню.
Цвет фона
Выберите цвет фона из выпадающего меню.
Чёткое форматирование
Очистка форматирования выделенного текста.

Инструменты

Меню «Инструменты» включает следующие действия.

Заголовок
Описание
Исходный код
Просмотреть/отредактировать исходный код.
Количество слов Посмотреть количество слов и символов.

Стол

Меню «Таблица» включает следующие действия для вставки таблицы и изменения ее структуры.

Заголовок
Описание
Стол
Вставьте таблицу.
Клетка Параметры изменения выбранных ячеек из выпадающего меню.
Ряд
Изменяйте, удаляйте и/или добавляйте параметры для выбранной строки (строк) из выпадающего меню.
Столбец
Изменяйте, удаляйте и/или добавляйте параметры для выбранного(ых) столбца(ов) из выпадающего меню.
Свойства таблицы
Просмотр и изменение свойств таблицы, таких как ширина, высота, границы и т. д.
Удалить таблицу
Удалите выбранную таблицу.

Дополнительное меню панели инструментов

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


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

  1. Нажмите значок «Отменить» , чтобы отменить предыдущее действие.
  2. Нажмите значок «Повторить» , чтобы повторить предыдущее действие.
Значки отмены и повтора

Стили абзацев и заголовков

  1. Чтобы применить форматирование и стили к тексту, щелкните раскрывающееся меню «Стиль заголовка» .


стиль шрифта

  1. Чтобы изменить шрифт текста, нажмите на выпадающее меню «Шрифт» .

размер шрифта

    1. Чтобы изменить размер текста, щелкните раскрывающееся меню « Размер шрифта» .

    Формат шрифта

    1. Нажмите на значок жирного шрифта , чтобы выделить текст жирным шрифтом.
    2. Нажмите на значок курсива , чтобы выделить текст курсивом.
    3. Нажмите на значок подчеркивания , чтобы подчеркнуть текст.
    Жирный шрифт, курсив и подчеркивание

    Цвет текста

      1. Нажмите на значок цвета текста , чтобы выбрать/изменить цвет шрифта.

      Выравнивание текста

      1. Нажмите на значок выравнивания , чтобы выровнять текст.


      Маркированный список

      1. Нажмите на значок маркированного списка , чтобы создать и отформатировать маркированный список.

      Пронумерованный список

      1. Нажмите на значок нумерованного списка , чтобы создать и отформатировать маркированный или нумерованный список.

      Загрузите изображение и загрузите файл.

      1. Чтобы загрузить изображение, нажмите на значок загрузки изображения .
      2. Для загрузки файлов нажмите на значок загрузки файла.
      Значки загрузки изображения и загрузки файла

      Чёткое форматирование

      1. Нажмите на значок «Очистить форматирование» , чтобы удалить стили, которые могли быть перенесены при копировании и вставке содержимого.

      Цвет фона

      1. Нажмите на значок «Цвет фона» , чтобы добавить подсветку к тексту/изображениям.

      Расширенная панель инструментов

      Для получения дополнительных функций:

      1. Нажмите « Подробнее» значок для отображения расширенной панели инструментов.


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



      Отступы и горизонтальная линия

      1. Нажмите на значок «Уменьшить отступ» , чтобы уменьшить отступ текста.
      2. Нажмите на значок «Увеличить отступ» , чтобы увеличить отступ текста.
      3. Нажмите на значок «Горизонтальная линия» , чтобы вставить горизонтальную линию.
      Уменьшить отступ, увеличить отступ и добавить значки горизонтальной линии

      Эмодзи

      1. Нажмите на эмодзи Значок эмодзи значок для открытия клавиатуры эмодзи.
      2. Нажмите на смайлик, чтобы вставить его.

      Особые персонажи

      1. Нажмите на специальный символ Специальный значок символа значок для открытия всплывающего окна «Специальный символ».
      2. Нажмите на специальный символ, чтобы вставить его.


      Расширенные значки

      1. Нажмите на значок ссылки «Вставить/редактировать». Вставить ссылку на любой URL-адрес.
      2. Нажмите на значок «Вставить/редактировать медиафайл». Вставить/встроить ссылку на любой URL-адрес.
      3. Нажмите на значок «Вставить/редактировать уравнение». Вставить/встроить ссылку на любой URL-адрес.
      4. Нажмите на значок «Вставить шаблон» . Вставить значок шаблона вставить шаблон.
      5. Нажмите на значок «Исходный код». значок исходного кода чтобы просмотреть исходный код текущей страницы.
      6. Нажмите на значок «Запись звука» . значок записи звука для записи звука непосредственно на страницу курса.
      7. Нажмите на значок «Запись видео» . значок записи видео Записывать видео непосредственно на страницу курса.
      1. Нажмите на значок «Создать веб-конференцию». Создать значок веб-конференции Чтобы создать ссылку на веб-конференцию, воспользуйтесь одним из вариантов в выпадающем списке.
        1. Примечание: будут отображаться только приложения для веб-конференций, установленные на вашей платформе.


      Передовые методы

      Воспользуйтесь этими рекомендациями, чтобы максимально эффективно использовать редактор.

      • Чтобы вставить разрыв строки вместо нового абзаца, нажмите Shift + Enter.
      • При встраивании HTML-виджетов сначала просмотрите текстовое окно в исходном коде.
        • Нажмите на выпадающее меню «Вид» .
        • Нажмите < > Исходный код .
      • Чтобы избежать ошибок форматирования, вставляйте контент сторонних разработчиков в виде обычного текста.
      • Чтобы сделать границы таблицы невидимыми:
        • Выберите таблицу.
        • Нажмите «Свойства таблицы» .
        • На вкладке «Общие» во всплывающем окне установите ширину границы равной «0».
        • На вкладке «Дополнительно» выберите стиль границы «Скрытая» или «Нет».


      проверка орфографии

      В редакторе есть функция проверки орфографии, которая отмечает слова с ошибками красной линией. Чтобы исправить орфографическую ошибку:

      1. Нажмите CTRL + Щелчок правой кнопкой мыши .
      2. Выберите правильный вариант написания из списка подсказок.

      Встраивание переменных

      Вы можете встраивать переменные на страницы уроков, используя формат {{имя переменной}}. Это позволяет настраивать контент для пользователей и курсов.

      На странице с контентом можно использовать следующие переменные:
      • {{class_custom_field_1}}
      • {{class_custom_field_2}}
      • {{class_finish_date}}
      • {{class_id}}
      • {{class_location}}
      • {{class_name}}
      • {{class_name_with_link}}
      • {{class_start_date}}
      • {{completed_at_utc}}
      • {{course_code}}
      • {{credits}}
      • {{days_in_class}}
      • {{days_left}}
      • {{deactivate_students_after}}
      • {{organization_id}}
      • {{organization_name}}
      • {{section_code}}
      • {{site_name}}
      • {{site_name_with_url}}
      • {{teacher_name}}
      • {{teacher_name_with_link}}
      • {{user_email}}
      • {{user_first_name}}
      • {{user_full_name}}
      • {{user_full_name_with_link}}
      • {{ID пользователя}}
      • {{user_last_name}}
      • {{user_prefered_contact_method}}
      • {{user_ssn}}
      • {{ID пользователя}}
      • {{почему}}

      Курс, Модуль, Раздел редактирования с выделенными примерами переменных

      Видеоинструкции по подбору размера

      Если вы добавляете видео в качестве ссылки в HTML-редакторе, вы можете задать его размер, используя следующий HTML-код:
      <a width='100' height='700'>ссылка</a>.
      1. Если вы хотите, чтобы размер видео изменялся автоматически, вы можете опустить одно из значений (ширина или высота).
      2. Для задания размера видео можно также использовать процентные значения, например, <width='100%' >.

      Редактирование изображений

      Редактор предоставляет различные возможности для редактирования изображений после их загрузки. Чтобы отредактировать изображение:

      1. Нажмите на изображение.
      2. Появляется меню с вариантами.
      Икона
      Описание
      Поверните значок против часовой стрелки
      		 Поверните изображение против часовой стрелки
      Значок поворота по часовой стрелке
      		 Поверните изображение по часовой стрелке

      		Переверните изображение по горизонтали
      Перевернуть изображение по вертикали
      Значок обрезки изображения
      		 Обрезанное изображение
      Значок редактирования изображения
      		 Редактировать свойства изображения

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

      Если вы выберете значок «Редактировать свойства изображения» , отобразится всплывающее окно «Вставить/редактировать изображение».
      1. Источник : Отображает источник изображения.
      2. Альтернативное описание : Это описание озвучивается программами чтения с экрана для помощи пользователям с нарушениями зрения.
      3. Ширина и высота : отрегулируйте размер изображения.
        1. Примечание: Используйте значок замка, чтобы убедиться, что изображение сохраняет соотношение ширины и высоты.


      При добавлении нового изображения можно также добавить описание для программ чтения с экрана:
      1. Введите описание в поле «Описание изображения» .

      Всплывающее окно загрузки изображения

      Шаблоны контента

      Шаблоны контента позволяют сохранять фрагменты HTML в каталоге ресурсов, а затем легко вставлять их в области контента в будущем. Вы можете использовать эту функцию для создания библиотеки часто используемых элементов контента в ваших областях.

      Чтобы добавить фрагмент HTML-кода в шаблон контента:

      1. Выделите текст и/или изображения в HTML-редакторе.
      2. Щелчок правой кнопкой мыши.
      3. Выберите «Сохранить как шаблон» .


      1. Введите заголовок для шаблона.
      2. Нажмите «ОК» .
      3. Шаблон контента будет сохранен в вашей личной библиотеке.


      Чтобы получить доступ к сохраненным шаблонам контента:

      1. Нажмите «Ресурсы» в левой навигационной панели.
      2. В выпадающем меню выберите пункт «Каталог» .
      3. Фильтрация по типу ресурса > Шаблон контента в панели поиска.
      4. Выберите свой шаблон контента.


      Отображается шаблон контента. Для получения более подробной информации о шаблоне контента:
      1. Нажмите «Подробности» .

      Ресурсы, всплывающее окно шаблона контента


      Теперь вы можете обновить раздел содержимого:
      1. Нажмите «Редактировать» , чтобы изменить содержимое .
      2. Нажмите «Удалить» , чтобы удалить шаблон.


      Нажав кнопку «Редактировать», вы можете обновить контент и поделиться им с другими пользователями.
      1. Выберите «Личная» , «Организационная» или «Бизнес -библиотека», если хотите, чтобы шаблон контента был доступен другим пользователям.
      2. После редактирования содержимого нажмите «Сохранить» .

      Ресурсы, экран редактирования шаблона контента

      Чтобы вставить копию шаблона контента в раздел:
      1. Перейдите в этот раздел.
      2. Щелчок правой кнопкой мыши.
      3. Выберите «Вставить шаблон» .
      4. Выберите шаблон из выпадающего списка.
      5. Нажмите « Сохранить ».