Вебинар #15. Рекомендации по настройке внешнего вида оглавления курса и тематических секций. Часть первая

Дарья Крошухина
09.20.24

1. Общая информация

В вебинаре рассматриваются следующие темы:

  • настройка внешнего вида секций, заголовков, баннера и элементов на главной странице курса;
  • настройка цветовой схемы курса в профиле темы оформления;
  • рекомендации по оформлению главной страницы курса.
Дата выхода вебинара 29.04.2020г.
Версия системы, на которой был проведен вебинар 3.5.11а

-Вернуться к содержанию-

2. Темы вебинара

Название темы Время начала темы в вебинаре Описание Тематические статьи, вебинары
Вступительная часть 00:00 Организационные вопросы, обзор тем вебинара  
Настройка внешнего вида секций, заголовков, баннера и элементов на главной странице курса 02:14 Страница оглавления курса (главная страница курса), режим редактирования, добавление и удаление секций, перемещение секций, вводная секция, использование баннера (слайдера)

Главная страница курса

Тематические секции курса

Управление тематическими секциями курса

Инструкция по работе с блоком «‎Слайдер»

Вебинар #09. Настройки внешнего вида док-панели и рекомендации по использованию блока Слайдер:

П.3.1 конспекта. Из чего состоит секция

Форматы курсов:

Настройка цветовой схемы курса в профиле темы оформления 13:46 Где располагаются настройки цветовой схемы курса, настройка цвета фона и текста заголовков контентной области, настройка яркости иконок, изменение цвета фона контентной области, изменение цвета фона и текста для заголовков третьего уровня

Настройка внешнего вида СЭО 3KL:

Настройка внешнего вида секций, заголовков, баннера и элементов на главной странице курса (продолжение) 20:29 Как загрузить изображение в описание секции

Руководство по работе с редактором Atto:

Рекомендации по оформлению главной страницы курса 23:30 Рекомендуемый размер изображения в секции, правила добавления текста

П. 3.2 конспекта. Рекомендации по оформлению главной страницы курса

Настройка внешнего вида секций, заголовков, баннера и элементов на главной странице курса (продолжение) 28:19 Настройка элементов и ресурсов в секции

Элементы курса и ресурсы:

Ресурс «‎Текст и медиа»‎

Элемент Пояснение. Быстрый старт

Элемент Пояснение. Дополнительная информация

Рекомендации по оформлению главной страницы курса (продолжение) 30:55 Советы по оформлению секций в курсе, правила верстки заголовков

П. 3.2 конспекта. Рекомендации по оформлению главной страницы курса

Настройка внешнего вида секций, заголовков, баннера и элементов на главной странице курса (продолжение) 40:42  Краткий обзор настроек формата курса «СЭО 3КL»

Форматы курсов:

-Вернуться к содержанию-

3. Конспекты

3.1. Из чего состоит секция

Рис. 3.1.1. Из чего состоит секция.

Секция, как правило, состоит из заголовка (см. поз. 1. Рис. 3.1.1.), описательной части, где зачастую располагается какое-либо изображение (см. поз. 2. Рис. 3.1.1.), и области, куда добавляются элементы и ресурсы (см. поз. 3. Рис. 3.1.1.).

-Вернуться к содержанию-

3.2. Рекомендации по оформлению главной страницы курса

1) Заголовки в секциях лучше именовать по темам, например, «‎Тема 3. Трансмиссия» (см. поз. 1. Рис. 3.1.1). В названиях элементов также желательно указать номер темы (см. поз. 3. Рис. 3.1.1). Это поможет быстрее сориентироваться при просмотре таких отчетов, как, например, журнал оценок (Рис. 3.2.1).

Рис. 3.2.1. Отображение названий тем в журнале оценок.

2) В качестве визуального оформления можно использовать небольшие изображения, помещенные в описательную часть секции (см. поз. 2. Рис. 3.1.1).

Не рекомендуется использовать изображения со слишком высоким разрешением. Ширина изображения, загружаемого в секцию, должна быть не меньше ширины самой секции. Например, если секция занимает всю ширину страницы, то изображение для неё должно быть не менее 1700 px. При использовании двух- или трех-колоночного режима, размер изображения должен быть примерно 800 px. Высота также не должна быть слишком большой.

3) При необходимости использования скопированного текста, рекомендуется сначала вставить его в блокнот, а затем в редактор, чтобы сбросить примененные к нему стили. Также некоторые операционные системы, браузеры и приложения поддерживают комбинацию Ctrl+Shift+V, позволяющую вставить неформатированный текст.

4) При верстке старайтесь соблюдать следующие правила:

  • Желательно визуально группировать элементы и стараться грамотно использовать отступы (Рис. 3.2.2). Для того, чтобы сделать небольшой отступ в тексте, можно воспользоваться комбинацией клавиш Shift+Enter, которая позволяет осуществить перевод строки без создания нового абзаца (Рис. 3.2.3). При использовании только клавиши Enter расстояние между строками будет заметно больше (Рис. 3.2.4).

Рис. 3.2.2. Пример использования отступов для группирования элементов.

Рис. 3.2.3. Перевод строки с использованием комбинации клавиш Shift+Enter.

Рис. 3.2.4. Обычный перевод строки по Enter.
  • При формировании подзаголовков рекомендуется изменять размер применяемого шрифта в зависимости от уровня вложенности заголовка (Рис. 3.2.5): заголовки должны визуально уменьшаться, начиная от главного заголовка до последнего вложенного.

 

Рис. 3.2.5. Изменение размера шрифта в зависимости от уровня заголовка.

5) Для подписи к картинке рекомендуется использовать меньший размер шрифта, чем у основного текста, а также устанавливать минимальный отступ от изображения (Рис. 3.2.6).  

Рис. 3.2.6. Оформление подписи к изображению в секции курса.

6) Описания элементов и ресурсов курса рекомендуется использовать, ориентируясь на выбранные настройки формата курса: например, если установлен режим отображения значков «плитками» или «плитками с отображением значков», то описание будет показано во всплывающем окне, при наведении на элемент курса, и не будет визуально «утяжелять» внешний вид страницы.

Если же вам необходимо использовать описания элементов и ресурсов курса и в других режимах, то:

  • включайте отображение описания для каждого элемента и ресурса;
  • старайтесь, чтобы во всех описаниях было примерно одинаковое количество строк;
  • отступы настраивайте так, чтобы было понятно, к какому элементу и ресурсу относится то или иное описание.

-Вернуться к содержанию-

 

Теги: вебинар, курсы и категории, оформление и темы
Рейтинг ответа: 0 (0 оценок)

Комментарии запрещены