Оформление веб-страниц в LMS Collaborator: используем все возможности
Sorry, this entry is only available in RU.
В 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 – убирает.
- Читайте также: Экстренная помощь E-Learning специалисту: работа с текстом
Кнопки
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:
- избегайте целой строки ЗАГЛАВНОГО текста. Не кричите на своих сотрудников 😉
- не переусердствуйте с выделением – не надо смешивать все стили текста, закрасив его цветом и сделав разным размером шрифта;
- выделяйте курсивом или жирным только самое важное, то, на что стоит обратить внимание в первую очередь;
- “тестируйте” готовый дизайн на сотрудниках и прислушивайтесь к их замечаниям;
- не бойтесь экспериментировать и веселиться 🙂
