Оглавление

• Введение
• Форматирование текста
• Заголовки
• Форматирование абзацев
• Изменение размера шрифта
• Изменение начертания шрифта
• Изменение цвета текста
• Оформление подрисуночной подписи
• Создание списков
• Таблицы
• Оформление названия таблиц
• Создание строк
• "Шапка таблицы"
• Создание ячеек

Введение

В данном разделе дано описание некоторых стилей, которые могут быть использованы при оформлении тем и элементов курса Moodle в режиме редактирования html кода страницы.

Для этого преподаватель должен ключить "Режим редактирования" в правом верхнем углу вашего курса.

В правой части строки с элементом курса через кнопку с тремя вертикальными точками войти в режим "Редактировать настройки"

На экране появится окно с содержимым данной страницы с несколькими панелями инструментов. Для перехода в окно "Редактировать HTML-код" необходимо нажать на кнопку с двумя угловыми скобками "<>"

Форматирование текста

Под форматированием текста мы будет понимать изменение стилей оформления следующих элементов:

• - заголовков;
• - абзацев;
• - изменение размера шрифта;
• - изменение начертания шрифта;
• - изменение цвета текста.

Заголовки

Для оформления названия глав используются партные тэги создания заголовков разного уровня: h1, h2, h3, h4, у которых заранее определены: размер, начертание и название типа шрифта; а также отступы от других элементов страницы.

В html-документе, создание заголовка первого уровня выглядит следующим образом:
<h1>Заголовок первого уровня</h1>

Примеры оформления заголовков разного уровна:

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвёртого уровня

Форматирование абзацев

Для создания абзаца используется тэг "p". Но, по умолчанию, абзац не имеет отступа "Первой строки" и отделяется от другого интервалом "После абзаца", что не соответствует правилам русского языка. Поэтому в таблицу стилей мы добавили класс "tbase", который устанавливает "красную строку" (не нулевой отступ "Первой стори") и выравнивание по ширине.

В html-документе тэг создания абзаца выглядит следующим образом:
<p class="tbase t14">Текст абзаца</p>

Примеры оформления заголовков разного уровна:

Так выглядит абзац с отступом первой строки и выравниманием по ширине. Далее идёт произвольный текст на несколько строк. Настоящее Положение устанавливает порядок применения в ФГБОУ ВО Новосибирский ГАУ электронного обучения, дистанционных образовательных технологий при реализации образовательных программ, а также устанавливает правила применения электронного обучения, дистанционных образовательных технологий при реализации основных образовательных программ и/или дополнительных образовательных программ (далее - образовательные программы), регулирует отношения участников образовательного процесса, устанавливает их права и обязанности.

Изменение размера шрифта

Также в таблицу стилей Moodle добавлены классы изменения размера шрифта:

• t14 – при маштабе 100% соответствует размеру шрифта в 14пт. В html-документе тэг создания абзаца c заданным размером шрифта будет выглядит следующим образом:
  <p class="tbase t14">Текст абзаца</p>
• t12 – при маштабе 100% соответствует размеру шрифта в 12пт. В html-документе тэг создания абзаца c заданным размером шрифта будет выглядит следующим образом:
  <p class="tbase t12">Текст абзаца</p>
• t10 – при маштабе 100% соответствует размеру шрифта в 10пт. В html-документе тэг создания абзаца c заданным размером шрифта будет выглядит следующим образом:
  <p class="tbase t10">Текст абзаца</p>

Обращаем внимание, что мы можем изменить размер шрифта для отдельного слова или части абзаца с помощью тэга "span". Для этого, часть текста надо заключить в парный тэг "span" с соответствующим классом размера шрифта, указанным выше. Например, эта часть текста печатается размером шрифта 14пт, а эта – размером шрифта 12пт.
В html-документе эта чать текста будет выглядеть следующим образом:
<p class="tbase t14">Например, эта часть текста печатается размером шрифта 14пт, <span class="t12"> а эта – размером шрифта 12пт</span></p>

Примеры оформления текста шрифтом разного размера:

Так выглядит абзац с отступом первой строки и выравниманием по ширине и размером шрифта в 14 пт. Далее идёт произвольный текст оформленный шрифтом размером 12 пт. Этот текст оформлен шрифтом размером 10 пт. Настоящее Положение устанавливает порядок применения в ФГБОУ ВО Новосибирский ГАУ электронного обучения, дистанционных образовательных технологий при реализации образовательных программ, а также устанавливает правила применения электронного обучения, дистанционных образовательных технологий при реализации основных образовательных программ и/или дополнительных образовательных программ (далее - образовательные программы), регулирует отношения участников образовательного процесса, устанавливает их права и обязанности.

Изменение начертания шрифта

В таблице стилей Moodle определены классы для изменения начертания слова или части текста в абзаце:

• t_i – курсивное начертание шрифта. В html-документе тэг выделения текста курсивным шрифтом выглядит следующим образом:
  <span class="t_i">Текст абзаца</span>
• t_b – жирное начертание шрифта. В html-документе тэг выделения текста курсивным шрифтом выглядит следующим образом:
  <span class="t_b">Текст абзаца</span>
• t_bi – жирное курсивное начертание шрифта. В html-документе тэг выделения текста курсивным шрифтом выглядит следующим образом:
  <span class="t_bi">Текст абзаца</span>

Примеры использования классов изменения начертания шрифта:

Так выглядит абзац с отступом первой строки и выравниманием по ширине и обычным начертанием шрифта. Далее идёт произвольный текст оформленный курсивным шрифтом. Этот текст оформлен жирным начертанием шрифта. Настоящее Положение устанавливает порядок применения в ФГБОУ ВО Новосибирский ГАУ электронного обучения, дистанционных образовательных технологий при реализации образовательных программ, а также устанавливает правила применения электронного обучения, дистанционных образовательных технологий при реализации основных образовательных программ и/или дополнительных образовательных программ (далее - образовательные программы), регулирует отношения участников образовательного процесса, устанавливает их права и обязанности. А этот текст был оформлен жирным курсивным шрифтом.

Изменение цвета текста

В таблице стилей определены классы для изменения цвета слов или части текста в абзаце:

• t_bordo – фирменный бордовый цвет. В html-документе тэг выделения текста бордовым цветом выглядит следующим образом:
  <span class="t_bordo">Текст абзаца</span>
• t_honey – фирменный медовый цвет. В html-документе тэг выделения текста медовым цветом выглядит следующим образом:
  <span class="t_honey">Текст абзаца</span>
• t_Mcolor – фирменный тёмно-серый цвет. В html-документе тэг выделения текста тёмно-серым цветом выглядит следующим образом:
  <span class="t_Mcolor">Текст абзаца</span>
• t_danger – цвет предупреждения. В html-документе тэг выделения текста цветом предупреждения выглядит следующим образом:
  <span class="t_danger">Текст абзаца</span>
• t_info – цвет информирования. В html-документе тэг выделения текста цветом информирования выглядит следующим образом:
  <span class="t_info">Текст абзаца</span>

Оформление подрисуночной подписи

Для форматирования подрисуночных подписей в таблице стилей Moodle определен специальный класс, который устанавливает размер шрифта и выравнивание по центру:

• tRis – класс для форматирования подрисуночных подписей. В html-документе тэг для форматирования подрисуночных подписей выглядит следующим образом:
  <span class="tRis">Таблица 1 – Динамика живой массы телят, кг</span>

Образец оформления подрисуночной подписи:

Рисунок 1 – Динамика живой массы телят, кг

Создание списков

Для создания списков используются два основных парных тэга:

• ol – тэг создания нумерованного списка;
• ul – тэг создания маркированного списка.

Элементы списка создаются парным тэгом li.

В html-документе создание нумерованного списка выглядит следующим образом:

<ol>
   <li>Первый элемент списка</li>
   <li>Второй элемент списка</li>
</ol>

Образец нумерованного списка:

1. Первый элемент списка
2. Второй элемент списка

В html-документе создание маркированного списка выглядит следующим образом:

<ul>
   <li>Первый элемент списка</li>
   <li>Второй элемент списка</li>
</ul>

Образец маркированного списка:

• Первый элемент списка
• Второй элемент списка

Если необходимо убрать маркеры из маркированного списка, то тэг создания маркированного списка следует дополнить атрибутом type="none". В html-документе тэг для форматирования подрисуночных подписей выглядит следующим образом:

<ul type="none">
   <li>Первый элемент списка</li>
   <li>Второй элемент списка</li>
</ul>

Образец маркированного списка без автоматической нумерации:

• Первый элемент списка
• Второй элемент списка

Для оформления элеменотов списка с абзацным отступом можно использовать классы, описанные в разделе "Форматирование абзацев", "Изменение размера шрифта", "Изменение начертания шрифта", "Изменение цвета текста".

Таблицы

Следует вспомнить, что таблица состоит из строк, а строки – из ячеек. И для каждого из этих элементов используются отдельные парные тэги (table, tr, td).

Кроме того, часть таблицы (условно назовём её "Шапка таблицы"), которая содержит названия граф можеет оформляться отдельным тэгом (th). Поэтому важно строго соблюдать последовательность их размещения при создании таблицы.

Для улучшения внешнего вида таблицы в нашей версии Moodle добавлен класс nsau_table, который устанавливает ширину таблицы в 98% от ширины окна, отображение чёрных линий вокруг ячеек таблицы. В html-документе тэг создания таблицы будет выглядит следующим образом:
<table class="nsau_table" border=1>
Строки таблицы
...
</table>

Оформление названия таблиц

Для форматирования названия таблиц в таблице стилей Moodle определен специальный класс, который устанавливает размер шрифта и выравнивание по левому краю:

• tbZ – класс для форматирования абзаца, содержащего порядковый номер и название таблицы. В html-документе тэг для форматирования названия таблиц выглядит следующим образом:
  <p class="tbZ">Таблица 1 – Динамика живой массы телят, кг</p>

Образец названия таблицы:

Таблица 1 – Динамика живой массы телят, кг

Строки таблицы

Мы должны помнить, что всегда сначала парным тэгом <tr> ... </tr> создаются строки таблицы, внутри которых создаются ячейки для "Шапки таблицы" или строк данных.

При создании строк, по умолчанию, установлен белый фон. Но его можно изменить с помощью следующих классов:

• tr_bordo – устанавливает в качестве фона фирменный бордовый цвет. В html-документе тэг создания строки будет выглядит следующим образом:
  <tr class="tr_bordo"> ...</tr>
  Пример применения бордового фона:

  Содержимое ячейки

• tr_honey – устанавливает в качестве фона фирменный медовый цвет. В html-документе тэг создания строки будет выглядит следующим образом:
  <tr class="tr_honey"> ...</tr>
  Пример применения медового фона:

  Содержимое ячейки

• tr_grey – устанавливает в качестве фона фирменный серый цвет. В html-документе тэг создания строки будет выглядит следующим образом:
  <tr class="tr_grey"> ...</tr>
  Пример применения серого фона:

  Содержимое ячейки

"Шапка таблицы", строки данных

При оформлении "Шапки таблицы" или названия граф применяют выравнивание по горизонтали – по центру и по вертикали – по центру.

При формировании "Шапки таблицы" используют тэг TR. В html-документе тэг создания строки будет выглядит следующим образом:
<tr> ...</tr>

Для создания ячеек в "Шапке таблицы" используют тэг TH, который в отличии от тэга TD устанавливает жирное начертание для текста внутри ячейки.
По умолчанию текст выравнивается по левому краю, поэтому для изменения выравнивания внутри ячейки следует использовать атрибуты класса:

• class="tbC" – выравнивание по центру;
• class="tbL" – выравнивание по левому краю;
• class="tbR" – выравнивание по правому краю;

В html-документе тэг создания строки будет выглядит следующим образом:
<th class="tbC"> ...</th>
Пример создания "Шапки таблицы":

Аналогичным образом формируются ячейки строк данных таблицы.

Пример оформления таблицы в html-документе:

Таблица 1 – Тестовая таблица

В html-документе код создания таблицы будет выглядит следующим образом:
<p class="tbZ"> Таблица 1 – Тестовая таблица </p>
<table class="nsau_table" border=1>
   <tr>
      <th class="tbC">№ <br>п/п</th>
      <th class="tbC">Первый столбец</th>
      <th class="tbC">Второй столбец</th>
   </tr>
   <tr class="tr_honey">
      <th class="tbC">1</th>
      <th class="tbC">2</th>
      <th class="tbC">3</th>
   </tr>
   <tr>
      <td class="tbC">1</td>
      <td class="tbC">Строка 3, столбец - 2</td>
      <td class="tbC">Строка 3, столбец - 3</td>
   </tr>
   <tr>
      <td class="tbC">2</td>
      <td class="tbC">Строка 4, столбец - 2</td>
      <td class="tbC">Строка 4, столбец - 3</td>
   </tr>
</table>