• Back

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

    Date published: 16.05.2019
    Views: 986

    Sorry, this entry is only available in 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
    Всі записи автора
    Tags
    Try LMS Collaborator in action
    Need guidance picking the right features for digitizing and automating your enterprise learning processes? We're here to help.
    Get demo
    Or call our manager
    +44 20457 73128