Оформление веб-страниц в LMS Collaborator: используем все возможности

В LMS Collaborator веб-страницы используются на каждом шагу: в новостях, ресурсах типов “страница” и “long read”, коротком описании курсов и многом другом. Для их форматирования в LMS встроен редактор с набором стандартных инструментов. Этого хватит для быстрого и легкого оформления любого объема материала.

Когда появляется задача “посерьезнее” и нужно оформить в веб-странице текст, например, по корпоративному шаблону, пригодится HTML-версия редактора. Благодаря кодам и командам материал можно форматировать как угодно. Благо, в LMS Collaborator встроен CSS фреймворк Bootstrap (документация тут) и благодаря этому можно быстро и качественно изменять оформление страниц.   

Мы подготовили для вас несколько примеров, которые можно использовать в нашем редакторе.

Если вы знакомы с WYSIWYG-редактором LMS Collaborator, то знаете, как с ним работать. Нет? Он выглядит вот так:

 

Стандартный функционал редактора:

  • изменение начертания;
  • изменение цвета текста и заливки;
  • выделение абзацев;
  • многоуровневые заголовки;
  • добавление ссылок, мультимедиа и ресурсов;
  • добавление таблиц и т.д.

А теперь перейдем к тому, что предлагает CSS Bootstrap.

*чтобы перейти к HTML-виду в LMS Collaborator выберите инструмент “<>” на панели редактора текста.

Заголовок + текст

Если рядом со стандартным заголовком нужно добавить текст, воспользуйтесь тэгом <small>. Получится легкий текст меньшего размера. Использовать можно для выделения рубрик, заметок к заголовку или материалу в целом и для обозначения автора (например, для статей).

Выглядит это так:

Пример Кода: 

<h1 style="text-align: left;">h1. Ваш заголовок <font color=
"#777777"><span style="font-size: 23.4px;">Дополнительная
информация</span></font></h1>
<h2 style="text-align: left;">h2. Ваш заголовок <small>Дополнительная
информация</small></h2>
<h3 style="text-align: left;">h3. Ваш
заголовок<small>Дополнительная информация</small></h3>
<h4 style="text-align: left;">h4. Ваш заголовок <small>Дополнительная
информация</small></h4>
<h5 style="text-align: left;">h5. Ваш заголовок <small>Дополнительная
информация</small></h5>
<h6 style="text-align: left;">h6. Ваш заголовок <small>Дополнительная
информация</small></h6>

“Полосатые” таблицы

Разнообразить строки таблиц можно с помощью тэга  .table-striped. Благодаря ему одна строка будет светлее, вторая — темнее:

 Пример Кода:

<table class="table table-striped" border="1" width="100%">
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Тэг .table-bordered добавляет к таблице рамку, а .table-hover — убирает.

Кнопки

Bootstrap CSS позволяет не только красиво оформить кнопки (элементы  <button>, или <input type=»button»> ), но  и превращать в кнопки обычные гиперссылки (элемент <a> ). Чтоб оформить кнопку используются класс «button» и его производные.

Пример кода с каждым из них:

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

Кнопки поддерживают любой формат и изменение: 

 Пример кода:

<button type="button" class="btn btn-default">Просто кнопочка</button>
<button type="button" class="btn btn-primary">Красненькая
кнопочка</button> <button type="button" class="btn btn-success">Зеленая
кнопочка</button> <button type="button" class="btn btn-info">Бирюзовая
кнопочка</button> <button type="button" class=
"btn btn-warning">Оранжевая кнопочка</button> <button type="button"
class="btn btn-danger">Красная кнопочка</button>

Контекстные фоны

Еще полезным может оказаться установка фона для элемента страницы в зависимости от его контекста. Так, например, можно выделить красным фоном критически важный момент в учебном материале. Установить контекстный фон элемента с помощью CSS классов Bootstrap легко — про эти возможности подробно тут. Кроме фона можно применять классы для контекстной «раскраски» текста

 Пример кода:

<p class="bg-primary" style="text-align: center;">Синяя строка</p>
<p class="bg-success" style="text-align: center;">Зеленая строка</p>
<p class="bg-info" style="text-align: center;">Голубая строка</p>
<p class="bg-warning" style="text-align: center;">Желтая строка</p>
<p class="bg-danger" style="text-align: center;">Розовая строка</p>

Для уроков по запоминанию кнопок

Используйте элемент <kbd> для обозначения ввода с клавиатуры. Инструкции по работе со станками или другими машинами в производстве с помощью такого выделения «кнопок» сразу станут более читабельными. А бывают случаи, когда так выделяют очень важный текст 🙂

Оформление аббревиатур

А теперь, наверное, про самый полезный элемент в учебном плане. Благодаря тэгу <abbr> можно отметить любую аббревиатуру и привязать к ней ее рашифровку в параметре title . На странице такая отмеченная аббревиатура будет подчеркнута светлой пунктирной линией, а при наведении на нее курсора — будет одображен текст, который мы поместим в title. Подробно — в документации.

Пример кода :

<p style="text-align: center;"><abbr title=
"Система дистанционного обучения">СДО</abbr> Collaborator</p>

Дополнительный “ворох” советов по оформлению текста от LMS Collaborator:

  • избегайте целой строки ЗАГЛАВНОГО текста. Не кричите на своих сотрудников 😉
  • не переусердствуйте с выделением — не надо смешивать все стили текста, закрасив его цветом и сделав разным размером шрифта:
  • выделяйте курсивом или жирным только самое важное, то, на что стоит обратить внимание в первую очередь;
  • “тестируйте” готовый дизайн на сотрудниках и прислушивайтесь к их замечаниям;
  • не бойтесь экспериментировать и веселиться 🙂
Please follow and like us:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*