Мы уже знакомились с блочным редактором, когда добавляли элемент “Текст и Медиа” на главную страницу сайта. Он же будет встречаться нам во многих других элементах курса, поэтому давайте присмотримся к нему повнимательнее.
Для примера мы будем использовать всё тот же элемент “Текст и Медиа”. Можно создать его внутри курса или открыть для редактирования на главной странице, если ранее он также был добавлен. Важно, что данный элемент предполагает отображение контента на верхнем уровне, то есть для его просмотра посетителям сайта не потребуется кликать по ссылке и переходить на другую страницу.
Итак, блочный редактор. Белая область - для набора текста и вставки медиа контента, на сером фоне кнопки управления. По умолчанию их 19, но если кликнуть на самую первую - откроется дополнительная панель, содержащая еще 14 кнопок.
Рассмотрим их группами, и начнем с элементов форматирования текста.
Кнопка с литералом А позволяет выделять заголовки текста. Для этого желаемый текст надо выделить, кликнуть на кнопку А и выбрать желаемый уровень заголовка.
Кнопка с литералом В сделает выделенный фрагмент текста жирным, а I - рукописным (курсивом).
Далее идет группа кнопок, ответственных за отступы и создание списков.
Первая кнопка создает маркированный список, вторая - нумерованный. Последняя кнопка из данной группы сместит позиционирование текста вправо, а предпоследняя - обратно влево.
Далее следуют элементы по созданию/удалению ссылок. Кнопка в виде скованной цепи позволяет создать гиперссылку для выделенного текста, а кнопка с изображением разорванной цепи - удаляет ранее созданную ссылку.
При создании ссылки необходимо ввести желаемый URL для перехода и, если требуется, отметить чекбокс “Открывать в новом окне”. Последняя опция позволяет пользователю при клике на ссылку не покидать страницы с контентом.
Вторая строка кнопок начинается с медиа элементов.
Первая кнопка позволяет добавить смайлик (эмоджи), вторая - изображения (по ссылке из интернета, либо путем загрузки с компьютера), третья - видео или аудио (опять же, это может быть загруженный файл или ссылка из сети, например, с YouTube).
Кнопки с микрофоном и видеокамерой позволяют записать голосовое сообщение с микрофона компьютера и видеосообщение с веб-камеры соответственно. По нажатию на иконку откроется диалоговое окно с текстом “Начать запись”, и если вы делаете это в первый раз, то браузер дополнительно спросит разрешение на доступ к микрофону/камере.
Далее следует кнопка для загрузки и прикрепления файлов. Вы можете использовать эту возможность, чтобы прикрепить PDF-документ или какой-либо вспомогательный материал для курса.
Кнопка с надписью H5P предназначена для добавления интерактивного элемента. Данная возможность существует и как отдельный элемент курса и содержит в себе большое количество возможностей. Но для базового работы над курсом мы этот ресурс опустим и уделим ему внимание в дальнейшем.
Последние две кнопки второго ряда предназначены для проверки созданного материала на адаптированность к пользователям с ограниченными возможностями. Первая - проверяет ошибки доступности (accessibility), а вторая - на удобство для слабовидящих.
Третью панель кнопок открывает очередной набор форматирования текста:
Кнопка U добавит нижнее подчеркивание для выделенного текста, кнопка S - перечеркнет текст. Кнопки Х с цифрами соответственно отформатируют выделенный элемент книзу или кверху основного содержимого.
Когда требуется управлять выравниванием текстовых абзацев, на помощь приходят следующие три элемента:
Кнопки соответственно выравнивают текст по левому краю, по центру и по правому краю.
Кнопка с изображением калькулятора позволит создавать математические формулы.
Открываемый по нажатию диалог предложит добавить математические символы из нескольких наборов, а снизу покажет превью генерируемой формулы.
Когда же сложная формула не нужна, но требуется добавить спецсимвол - воспользуйтесь следующей кнопкой.
Кнопка с таблицей позволяет создать - да-да, таблицу. В диалоговом окне будет предложено ввести название таблицы и определить его положение относительно данных, выбрать где будут находиться заголовки внутри таблицы (у столбцов, строк или в обоих вариантах), а также задать количество строк и столбцов.
Если вы недовольны результатами форматирования, либо же скопировали в документ какой-то фрагмент из интернета с другим шрифтом, размером и начертанием, то отменить форматирование можно по следующей кнопке.
Предпоследние две кнопки ответственны за отмену предыдущих действий и возвращение вперед после отмены.
И, наконец, для тех, кто владеет HTML и CSS, последняя кнопка дополнительной панели позволяет открыть исходный код создаваемого контента и редактировать содержимое вручную, добавляя стилизацию и HTML-теги.
