Как создать электронный учебник

Q: Можно ли пользоваться учебником без интернета?

Да. Скопируйте папку public_html на флешку или диск и откройте файл index.html в любом браузере — интернет не нужен.

Q: Как вставить видео в учебник?

Используйте формат .mp4 и тег (HTML5). Flash больше не поддерживается современными браузерами, поэтому старый способ через .flv не работает.

Электронный учебник можно создать в программе TurboSite за несколько шагов: подготовить материалы, сгенерировать HTML-страницы, подобрать адаптивный шаблон под мобильные устройства и при необходимости конвертировать в EPUB. Главное — проработать структуру и подготовить контент: тогда учебник будет удобно собирать и обновлять.

TurboSite — это программа для сборки учебника-сайта: она генерирует HTML-страницы в отдельную папку, которую можно открыть в любом браузере на компьютере, планшете или смартфоне. Вам нужно только добавить страницы и заполнить их материалами.

HTML-формат подходит, если материал будет обновляться, содержать интерактив и навигацию (а если сомневаетесь — вот ориентир: PDF для статичных материалов, LMS для тестов с оценками).

Электронный учебник, созданный в TurboSite, открытый на планшете

В инструкции ниже — путь от подготовки материалов до готового учебника в папке public_html.

Хотите пройти весь путь по видео?

В видеокурсе «Электронный учебник за 1 день» — 18 уроков: от установки TurboSite до публикации в интернете. С исходниками и готовым шаблоном MobiGray.

Подробнее о курсе →

Создание нового проекта#

Урок 1. Создание проекта. Интерфейс программы
Длительность видеоурока 4:19

Скачайте программу TurboSite 1.7.1 по ссылке. Установите её на компьютер и запустите. Появится окно приветствия (Рис. 1).

Создайте новый проект Создать проект. Сохраните проект электронного учебника в пустую папку с произвольным названием. Например, «Основы безопасности и защита Родины». После сохранения проекта появится рабочая область программы.

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

Создание проекта учебника

Рис. 1. Начало работы

Примечание

Генерировать сайт - применяет все изменения. Нужно нажимать постоянно, чтобы посмотреть текущий результат.

Открыть папку с сайтом - открывает папку со всеми файлами учебника.

Просмотр сайта - открывает электронный учебник в браузере, чтобы посмотреть текущее состояние.

На вкладке Параметры сайта заполните основные поля произвольной информацией (Рис. 2):

Заголовок сайта (отображается в шапке электронного учебника)
Подзаголовок (отображается в шапке электронного учебника)
Заголовок списка страниц (надпись над содержанием в сайдбаре)
Подвал (отображается в нижней части учебника)

Параметры учебника

Рис. 2. Параметры учебника

Подготовка материалов#

Урок 2. Подготовка материалов. Параметры учебника
Длительность видеоурока 8:45

TurboSite всего лишь инструмент для превращения ваших материалов учебника в формат HTML страниц. Поэтому основная часть разработки учебника уходит на подготовку материалов (текстов, изображений, видео и т.п.).

Форматировать текст страницы во встроенном редакторе программы не рекомендуется. Так как он работает не корректно. Я предлагаю весь контент подготовить заранее, в каком-нибудь удобном для вас текстовом процессоре, например:

Microsoft Word
LibreOffice
WordPad

Страницы

Все страницы лучше создавать отдельными файлами, в одной из перечисленных выше программ. Рекомендуется использовать только следующие инструменты:

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

Не следует устанавливать начертание шрифта, размер шрифта и подобные стили текста. Это сделает неудобным контроль над внешним видом учебника и страницы будут громоздкими из-за ненужных встроенных стилей.

Совет: Стилизацию текста и изображений следует задавать только в шаблоне, средствами CSS стилей. Это придаст гибкости при доработке темы, так как изменив стиль в одной файле, он применится ко всему учебнику

Изображения

Изображения будут добавляться только через программу Turbosite. В текстовом редакторе вставлять картинки смысла нет, так как они не сохранятся при копировании материала. Просто пронумеруйте их по примеру: 1-3.jpg. Такое наименование подскажет, что картинка принадлежит к первой странице и будет третья по счету.

Видео и аудио

Видеоролики стоит перекодировать в формат .mp4. Аудиозаписи в формат .mp3. Это избавит от множества проблем совместимости браузерами. По аналогии с изображениями задавайте понятные имена, например:

1-1.mp4
2-1.mp4
1-1.mp3

Презентации

Презентации в формате PowerPoint разместить не получится. Но можно разместить слайды презентации в виде слайдера. При этом все сценарии и переходы сохранены не будут.

Сохраняем все слайды PowerPoint в картинки Файл - Сохранить как - Рисунок в формате JPEG - Все слайды. На выходе получится папка с изображениями слайдов презентации. Чтобы не было проблем с кодировкой сразу переименуйте папку в presentation1, а слайды в 1.jpg, 2.jpg и т.д. (Рис. 3)

Сохранение слайдов презентации

Рис. 3. Сохранение слайдов презентации

Тесты и кроссворды

Тесты и кроссворды удобнее готовить заранее, в обычном текстовом документе или таблице. Так вы не отвлекаетесь на вёрстку и можете проверить вопросы до того, как вставите их в учебник.

Рекомендуемые форматы файлов для электронного учебника
Тип материала	Готовить в формате	Не использовать
Изображения	`.jpg`, `.png`, `.webp`	`.bmp`, `.tiff`, `.psd`
Видео	`.mp4` (кодек H.264)	`.flv`, `.avi`, `.wmv`, `.mov`
Аудио	`.mp3`, `.ogg`	`.wav`, `.wma`, `.flac`
Презентации	Слайды в `.jpg` (по одному файлу на слайд)	`.ppt`, `.pptx`
Формулы	MathJax / LaTeX (через HTML-код)	Картинки с формулами

Добавление страницы#

Вкладка Страницы состоит из двух основных частей. В левой части окна отображается список всех страниц, в котором можно добавлять и удалять страницы. А в правой части их содержимое и параметры.

По умолчанию в программе уже создана главная страница index. Обычно её оставляют для оглавления.

Нажмите на кнопку Добавить. В списке страниц появится новая. Заполните поле Заголовок. Теперь в правой части, на вкладке Визуальный редактор, можно вставить весь текст страницы из заранее подготовленного текстового документа.

Совет: Не стоит напрямую копировать текст и вставлять его в TurboSite. Рекомендуется очистить не нужную разметку, задаваемую редактором Word, в стороннем WYSIWYG-редакторе (например CKEditor). Этот значительно ускорит загрузку страницы, особенно на мобильном устройстве.

На вкладке HTML-код можно существенно увеличить функциональность учебника. Например, вставить:

видеофайлы
аудиофайлы
презентации
формулы
сторонние тестирования
кроссворды

Для сохранения изменений нажимаем Генерировать сайт. И проверим результат - Просмотр сайта.

Страницы учебника

Рис. 4. Добавление страниц электронного учебника

Пример электронного учебника

Рис. 5. Пример страницы электронного учебника

Примечание

Чекбокс В главном меню - добавляет страницу в верхнее меню учебника

Чекбокс В списке страниц - добавляет страницу в боковое меню учебника

Страница оглавления#

После того как добавили все необходимые страницы электронного учебника, заполним страницу оглавления. Перейдите на первую страницу (index). Добавьте в визуальный редактор весь перечень страниц. Разбейте этот перечень на многоуровневый маркированный список, чтобы было удобно в нём ориентироваться.

Осталось прописать ссылки на соответствующие страницы:

Выделяем пункт оглавления – инструмент Ссылка - На страницу проекта – указываем страницу.

Страница оглавления

Рис. 6. Оглавление электронного учебника

Оформление (шаблоны)#

На вкладке Шаблон можно изменить внешний вид электронного учебника. Для этого достаточно выбрать понравившийся шаблон и нажать Генерировать сайт.

Шаблоны можно редактировать под свои предпочтения. Для этого понадобятся минимальные знания языка CSS.

Пример шаблона MobiGray:

Шаблон электронного учебника

Рис. 7. Шаблон электронного учебника

Примечание: Встроенные шаблоны TurboSite не адаптированы под мобильные устройства.

Итоговый учебник#

Электронный учебник сохраняется в папку public_html. Чтобы туда перейти нажмите Открыть папку с сайтом. Затем запустите внутри этой папки файл index.html (это и есть страница с оглавлением).

Пример созданного электронного учебника по ОБЗР
Отображение на планшете

Примечание: Для пользователя предназначена папка public_html. Её можно скопировать пользователям на флешку или выложить в интернет. Обязательно сохраняйте всю папку проекта, для возможности вносить изменения в учебник.

Частые вопросы#

Как опубликовать учебник в интернете?

Зарегистрируйте хостинг и домен, затем загрузите содержимое папки public_html на хостинг по FTP. После этого учебник будет доступен по ссылке.

Будет ли учебник открываться на телефоне?

Да, если использовать адаптивный шаблон. Встроенные шаблоны TurboSite не адаптированы под мобильные — подключите готовый адаптивный шаблон (например, MobiGray) или добавьте медиазапросы в CSS.

Можно ли пользоваться учебником без интернета?

Да. Скопируйте папку public_html на флешку или диск и откройте файл index.html в любом браузере — интернет не нужен.

Как вставить видео в учебник?

Используйте формат .mp4 и тег <video> (HTML5). Flash больше не поддерживается современными браузерами, поэтому старый способ через .flv не работает.

Как вставить презентацию?

Сохраните слайды PowerPoint как изображения (Файл → Сохранить как → Рисунок в формате JPEG → Все слайды) и вставьте их слайдером. Сценарии и переходы при этом не сохраняются.

Как изменить размер шрифта?

Через CSS в шаблоне. Не задавайте размер шрифта в текстовом редакторе — стили должны быть в одном месте, иначе учебник станет тяжёлым и непоследовательным.

Можно ли вставить математические формулы?

Да. Простой способ — скопировать формулу из Word. Для сложных формул используйте MathJax или LaTeX через вкладку HTML-код.

Хотите научиться создавать электронные учебники?

18 видеоуроков по TurboSite: от установки до публикации. Исходники, адаптивный шаблон и программа «Редактор схем».