• Назад

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

    Дата публікації: 16.05.2019
    Перегляди: 1012

    Вибачте цей текст доступний тільки в “RU”.

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

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

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

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

    blank

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

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

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

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

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

    <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. Благодаря ему одна строка будет светлее, вторая — темнее:
    blank
     Пример Кода:

    <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">
    

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

    <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 легко – про эти возможности подробно тут. Кроме фона можно применять классы для контекстной “раскраски” текста
    blank
     Пример кода:

    <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> для обозначения ввода с клавиатуры. Инструкции по работе со станками или другими машинами в производстве с помощью такого выделения “кнопок” сразу станут более читабельными. А бывают случаи, когда так выделяют очень важный текст 🙂
    blank

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

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

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

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

    • избегайте целой строки ЗАГЛАВНОГО текста. Не кричите на своих сотрудников 😉
    • не переусердствуйте с выделением – не надо смешивать все стили текста, закрасив его цветом и сделав разным размером шрифта;
    • выделяйте курсивом или жирным только самое важное, то, на что стоит обратить внимание в первую очередь;
    • “тестируйте” готовый дизайн на сотрудниках и прислушивайтесь к их замечаниям;
    • не бойтесь экспериментировать и веселиться 🙂
    blank
    The LMS Collaborator Team
    Content Manager LMS Collaborator
    Всі записи автора
    Спробуйте LMS Collaborator в дії
    Потрібні рекомендації щодо вибору правильних функцій для оцифрування та автоматизації процесів корпоративного навчання? Ми тут, щоб допомогти.
    Замовити демо
    Або телефонуйте нашому менеджеру
    +38(067)217-0440