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

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

Электронное пособие будет создано в формате HTML-страниц, в отдельной папке. Просмотреть такой учебник можно на любом устройстве через веб-браузер (обозреватель).

Содержание

• 1. Создание нового проекта
• 2. Подготовка материалов учебника
• 3. Добавление страницы учебника
• 4. Оглавление и оформление учебника
• 5. Итог: готовый электронный учебник
• 6. Видеокурс «Электронный учебник за 1 день» 35 видеоуроков

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

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

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

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

Примечание

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

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

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

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

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

Урок 1. Создание нового проекта

Урок 2. Интерфейс программы

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

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

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

• Microsoft Word
• OpenOffice
• WordPad

Страницы

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

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

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

Совет

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

Изображения

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

Видео и аудио

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

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

Презентации

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

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

Урок 3. Подготовка материалов к работе

Урок 4. Основные параметры учебника

Добавление страницы учебника

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

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

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

Совет

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

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

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

Подробнее об этом можно узнать в платном видеокурсе по созданию электронного учебника.

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

Примечание

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

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

Урок 5. Добавление страниц учебника

Урок 6. Добавление изображений

Оглавление и оформление учебника

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

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

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

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

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

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

Шаблоны можно редактировать под свои предпочтения. Для этого понадобятся минимальные знания языка CSS. В платном видеокурсе есть уроки по редактированию шаблона, а также 3 премиум шаблона, адаптированных под мобильные устройства.

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

Примечание

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

Итог: готовый электронный учебник

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

Пример электронного учебника созданного в TurboSite (по видеокурсу):

Примечание

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

Видеокурс по созданию электронного учебника

Онлайн видеокурс

Электронный учебник за 1 день

Купить видеокурс

Список уроков

+ Презентации

+ Видеоролики

+ Тестирования

+ Кроссворды

+ Аудиофайлы

+ Формулы

+ Двухуровневое меню

+ Адаптивность

Базовая часть

18 уроков ~ 70 мин

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

2:00

Интерфейс программы

5:07

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

2:15

Основные параметры учебника

4:09

Добавление страниц учебника

6:25

Добавление изображений

4:56

Добавление видеороликов

4:17

Добавление презентаций

11:22

Добавление аудиофайлов

3:09

Добавление тестирования

3:24

Страница с содержанием

1:39

Работа с блоками

5:44

Изменение готовых шаблонов

7:33

Прикрепление файлов (Список литературы)

2:27

Иконка учебника (favicon)

1:21

Использование учебника

1:35

Стартовая страница учебника

5:10

Загрузка учебника на Яндекс.Диск

5:39

Премиум часть

17 уроков ~ 65 мин

Добавление 3 адаптивных шаблонов

4:01

Создание 2-уровневого меню

8:25

Обзор адаптивного шаблона PremiumOne

5:07

Обзор адаптивного шаблона PremiumTwo

3:02

Обзор адаптивного шаблона PremiumThree

2:27

Добавление логотипа в адаптивные шаблоны

2:20

Добавление страниц учебника (2 способ)

4:51

Изменение CSS стиля текста

5:27

Вставка формул (1 способ)

2:45

Вставка формул (2 способ)

5:02

Вставка видеоролика с сайта YouTube

2:59

Редактирование 2-уровневого меню

5:46

Регистрация домена и хостинга (в интернет)

7:59

Загрузка учебника на хостинг (в интернет)

7:40

Заключительный урок

1:22

Бонус 1. Добавление кроссворда

4:32

Бонус 2. Добавление теста TestEDU

3:17

Перейти на страницу курса

Информация

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

105812 12.05.2022 г. Создание учебника

Комментарии (63)

• Нурсултан 23.03.2022 г. в 19:42

  Здраствуйте. Как публиковать в интернете??

  • Артур Шарипов 24.03.2022 г. в 09:12

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

• Жанар 06.02.2022 г. в 16:00

  Добрый день! Математические формулы не вставятся. Или их нельзя добавить?

• Николай 08.08.2021 г. в 20:21

  Сколько учебников я могу разработать, купив у Вас один комплект программы установки;

  • Артур Шарипов 09.08.2021 г. в 15:11

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

• Салтанат 01.02.2021 г. в 15:44

  В блоке содержание не высвечиваются все разделы, только 19 пунктов, или программа не обновляется и последние изменения не показывают, в чем может быть ошибка,

  • Артур Шарипов 01.02.2021 г. в 17:06

    Может быть не стоят галочки "В списке страниц"

• Мира 24.05.2020 г. в 17:33

  Нужно опубликовать, чтоб этот учебник можно было кому -то скинуть? если да, то как опубликовать? я вообще не поняла, и урок не нашла про это

• Валентина О. 19.02.2020 г. в 15:28

  Как добавлять презентацию из powerpoint 2007 в мой учебник. Мне нужно чтобы, мои ученики смогли смотреть тему урока прямо в учебнике?

  • Артур Шарипов 21.02.2020 г. в 14:35

    Основная идея такая: вам нужно преобразовать презентацию в формат flash (этот вариант устарел) или вставить её в виде слайдера.

• Татьяна 14.10.2019 г. в 19:21

  Таже проблема, видео отображается черным квадратом. Я и конвертировала в МР4, результата нет.

  • Артур Шарипов 15.10.2019 г. в 13:05

    В программе TurboSite функция добавления видео, работает только с флеш-форматом. Урок по вставке видео в формате mp4 есть в платном видеокурсе, если у вас возникают трудности напишите в техподдержку курса

• Сергей 14.10.2019 г. в 13:53

  После добавления видео в документ в формате flv оно отображается черным квадратом и не проигрывается. Может Я что то не так делаю? Всё делал по Ваших видео уроках. Посоветуйте пожалуйста как это исправить.

  • Артур Шарипов 14.10.2019 г. в 14:05

    Видео в формате флэш не поддерживаются некоторыми современными браузерами. Попробуйте другой браузер. А лучше вставляйте видео в формате mp4. С помощью html5

• Рамиль 20.09.2019 г. в 10:31

  Спасибо за интересный способ. Мне нужно добавить презентацию в электронный учебник по этой программе. Подскажите как это можно сделать. Я встраиваю файл презентации через object но ничего не выводится

• Ками 29.01.2019 г. в 17:42

  Здравствуйте спасибо за программу TurboSite все отлично работает хотела бы спросить мне нужно написать реферат к своей электронной программе сделанной именно в программе TurboSite написать в реферате ТИП РЕАЛИЗУЮЩЕЙ ЭВМ ЯЗЫК ПРОГРАММИРОВАНИЯ ну в общем вы поняли наверно о чем я помогите пожалуйста

• Лилия 03.01.2019 г. в 16:47

  Добрый день,Артур. Спасибо за очень грамотное и доступное изложение материала по созданию электронного учебника. Но у меня не получается вставка презентаций, можно ли как-то купить у Вас именно этот урок?

  • Артур Шарипов 16.01.2019 г. в 00:42

    Отдельная продажа роликов курса не предусмотрена

• Светлана Юрис 20.09.2018 г. в 15:39

  Артур, как вставить презентацию из Power point 2013 в электронный учебник?

• Александр 18.01.2018 г. в 02:59

  Здравствуйте, мне необходимо, написать учебник в котором после каждой главы будет тест, при условии правильных ответов на 80% тестов, открывается следующая глава. Подскажите пожалуйста программу на которой это можно было - бы реализовать? CourseLab не предлагать она стоит более 28 тысяч. Да если с HTML и таблицей стилей я ещё могу найти общий язык... То программист из меня никакой знания на уровне циклы, ветвления... Поэтому был бы благодарен за наводку на программу конструктор.

• Александр 18.01.2018 г. в 02:50

  Мне нужно сделать, электронный учебник где после каждой главы будет тест, не прошедшим тест следующая глава не открывается. Подскажите пожалуйста какую программу лучше использовать для этого? Courselab не предлагать она стоит больше 20 тысяч.

• Роза 06.01.2018 г. в 22:21

  Здравствуйте! Как поменять размер шрифта?

• Татьяна 11.11.2017 г. в 21:47

  Можете ли Вы поделиться созданным вами электронным учебником? Как раз для преподавания информатики нам бы очень пригодился...

• Кира Найтли 11.11.2017 г. в 01:21

  Артур, все хорошо. Только как создать многоуровневое меню в учебнике?

• Лена 04.11.2017 г. в 18:00

  Дайте ссылку на программу

• Надежда 26.09.2017 г. в 11:09

  Здравствуйте, если создать электронный учебник то он будет открываться на телефонах и планшетах?(android, ios, linux.)Спасибо

  • Артур Шарипов 29.09.2017 г. в 03:09

    Да, будет, но в экран он скорее всего не поместится

• Надя 22.09.2017 г. в 14:09

  а этот учебник будет открываться на планшетах, телефонах?

• Калдыбай 02.09.2017 г. в 11:09

  Здравствуйте! Пытаюсь опубликовать программу, нажимаю «опубликовать», но письмо с Результат: Failed Request Failed: 500 DNS lookup error - Host not found (#11001) приходит. Что мне делать?

• Калдыбай 02.09.2017 г. в 00:09

  Привет!Скажите пожалуйста,как опубликовать свой книгу.Постоянно ошибку показывает.Результат: Failed\r\nRequest Failed: 500 DNS lookup error - Host not found (#11001)

• Калдыбай 31.08.2017 г. в 23:08

  подскажите как опубликовать электронное книгу TurboSite

• Евгения 02.08.2017 г. в 20:08

  Привет, если покупаешь \"Полный курс\", то сама программа (установочный файл)там уже есть?

  • Артур Шарипов 07.08.2017 г. в 17:08

    Да, есть!

• Еркебулан 06.06.2017 г. в 00:06

  как можно купить?

• Андрей 27.05.2017 г. в 02:05

  Подскажите пожалуйста как вставить презентацию у меня скоро дипломная защита

  • Артур Шарипов 28.05.2017 г. в 22:05

    Её нужно перевести в флеш формат, а затем вставить код на страницу сайта

• Дарья 19.05.2017 г. в 01:05

  А можно это разместить не на сайте, а на диске и подручно пользоваться

  • Артур Шарипов 19.05.2017 г. в 13:05

    Да, можно! Скидываете папку public_html в любое место, и запускаете index.html

• христина 12.05.2017 г. в 19:05

  а можно ли туда внести лаборатоные работы что бы их в следствии потом решали студенты...я просто ищу где сделать методический практикум...тут же я могу это сделать??

• Екатерина 29.04.2017 г. в 12:04

  Отличная программа, разобралась за 5 минут)) вот только вопрос: рисунок нельзя чтоли разместить по середине?

  • Артур Шарипов 02.05.2017 г. в 23:05

    Можно, там есть инструмент выровнять по центру!

• ...... 21.04.2017 г. в 00:04

  Можно добавить видео через эту программу?

  • Артур Шарипов 22.04.2017 г. в 09:04

    Да можно, об этом я рассказываю в полной версии курса

• 48 20.04.2017 г. в 17:04

  А можно ли вставить фаил видео или мр3

  • Артур Шарипов 22.04.2017 г. в 09:04

    Да можно, об этом я рассказываю в полной версии курса

• Зема 11.04.2017 г. в 11:04

  а новичок справится с этим)?

  • Артур Шарипов 16.04.2017 г. в 21:04

    Конечно, справится!

• Зема 11.04.2017 г. в 09:04

  Помогите плиз! как создать базу тестов из 500 вопросов и при каждой тестирований выдовало по 30 вопросов из 500???

  • Артур Шарипов 11.04.2017 г. в 09:04

    Стандартными функциями не реализовать, можно доработать на языке javascript

• Глеб 08.04.2017 г. в 23:04

  скажите пожалуйста где находятся математические формулы

  • Артур Шарипов 10.04.2017 г. в 15:04

    В программе их нет, попробуйте скопировать с Word

• Дария 08.04.2017 г. в 16:04

  Отличная платформа! достаточно быстро разобралась. спасибо! Разъясните, пожалуйста, как правильно опубликовать готовый учебник в интернете? где взять FPT сервер, логин, пароль..?

  • Артур Шарипов 10.04.2017 г. в 15:04

    Нужно зарегистрировать хостинг(он выдаст вам FTP сервер с логином и паролем)? и домен.

• Азамат 04.04.2017 г. в 17:04

  Здравствуйте, как можно поменять шрифты и размер шрифтов. я что то не вижу. помогите!

• Юлия 01.04.2017 г. в 17:04

  Добрый день, Артур. Подскажите, пожалуйста, как выложить уже созданный електронный учебник в интернет? Другими словами, какую ссылку скопировать и куда я её могу вставить, чтобы обеспечить доступ к моему учебнику ученикам. Заранее спасибо.

• Инна 01.04.2017 г. в 13:04

  Добрый день! Спасибо за Ваши уроки, учебник создан. Подскажите, как я могу разместить его в Интернете?

  • Артур Шарипов 10.04.2017 г. в 15:04

    Нужно содержимое папки public_html загрузить на хостинг своего сайта

• Анна 31.03.2017 г. в 17:03

  Чем отличается от Word? Там ведь тоже автоматическое оглавление, возможность опубликовать

  • Артур Шарипов 10.04.2017 г. в 15:04

    Тут есть наличие шаблонов, а также программа бесплатная и легкая. Word не предназначен для создания web-страниц

• Диана 27.03.2017 г. в 16:03

  Здравствуйте как из формата PDF,перевести в формат чтобы читался в Worde Microsoft

  • Артур Шарипов 31.03.2017 г. в 09:03

    Можно либо через Pdf Transformer, либо FineReader

• Бек 14.03.2017 г. в 19:03

  очень классная программа

  • Артур Шарипов 16.03.2017 г. в 15:03

    Согласен!

• Наталья 18.02.2017 г. в 19:02

  Подскажите, пожалуйста, как величину шрифта изменить? Слишком мелко на странице получается...

• Лана 13.02.2017 г. в 23:02

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

  • Артур Шарипов 16.03.2017 г. в 15:03

    Скинуть папку public_html из папки с проектом, в ней все необходимые файлы

• Алехандро 07.02.2017 г. в 03:00

  Автору респектище за такую статью. Супер

• Олена 23.12.2016 г. в 03:00

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

• Vera 21.12.2016 г. в 03:00

  Здравствуйте. Программа замечательная, большое спасибо за статью и разбор. Интересует одно, почему качество изображений вставляемых такое низкое? Картинка при подгоне под формат становится "пиксельной". Нетли каких-нибудь решений или настроек для такой ситуации?

• Олена 21.12.2016 г. в 03:00

  а можно вводить математические формулы?\r\n

  • Артур Шарипов 01.02.2017 г. в 04:08

    Да можно

• Елена 17.12.2016 г. в 03:00

  Добрый день. Скажите, а блокировать текст от копирования можно ли? И как?

  • Артур Шарипов 31.03.2017 г. в 11:03

    С помощью Javascript

• Алеся 12.12.2016 г. в 03:00

  Здравствуйте, могу ли я здесь создать в конце проверочный тест?

• Диана 09.12.2016 г. в 03:00

  Здравствуйте, очень классно, можно ли ее перенести на флешку чтобы показать преподу чтобы он мог ее к себе сохранить? И как это сделать?

  • Артур Шарипов 12.12.2016 г. в 03:00

    Да, запросто! Скинуть папку public_html из папки с проектом, в ней все необходимые файлы

• Василий Пашинин 31.10.2016 г. в 03:00

  Классная статья спасибо вам огромнейшее!!!!!

• Анжелика 20.05.2016 г. в 21:43

  Здравствуйте, очень классная программа, только вот,я закончила электронный учебник,но мне не надо его запускать в интернет, хочу просто чтоб работал как нтмл страница, короче как его закончить, или он так и останется???

  • Артур Шарипов 24.05.2016 г. в 15:13

    Внутри папки с проектом есть папка public_html, а чтобы открыть учебник нужно запустить в ней файл index.html

• Виктор 21.04.2016 г. в 21:14

  Смотрел программу у друга. Понравилась.Хотел запустить у себя.Почему-то антивирусник блокирует ее.

• Павел 31.01.2016 г. в 23:10

  Подскажите пожалуйста как изменить размер шрифта?

• Аида 25.12.2015 г. в 04:04

  ЗДРАВСТВУЙТЕ! ПОДСКАЖИТЕ МОГУ ЛИ Я СОЗДАТЬ ТАКУЮ ПРОГРАММУ(НАПОДОБИЕ) НА ДЕЛЬФИ ИЛИ ДРЕАМВИВЕР?

  • Артур Шарипов 25.12.2015 г. в 09:33

    Да! Если вы имели ввиду электронный учебник, то на Dreamviewer'е. Если саму оболочку создавать, то думаю лучше писать на языке C# или Java.

• Никито 15.12.2015 г. в 11:39

  Очень доходчево, большое спасибо за инструкцию

• Лидия 28.11.2015 г. в 17:45

  Учебники, созданные в этой программе, работают только при наличии интернет-соединения?

  • Артур Шарипов 28.11.2015 г. в 22:58

    Лидия, нет. Электронный учебник будет работать без интернета, просто он открывается в браузере. Но при этом его можно будет выкладывать в интернет, где он тоже будет прекрасно работать!

• Несибели 27.11.2015 г. в 21:36

  Спасибо, очень помогло

• Кени 09.11.2015 г. в 15:30

  а в какой программе вы открывали готовый учебник?

  • Артур Шарипов 16.11.2015 г. в 17:25

    Открывается в любом браузере (в моем случае Google Chrome)

• weqwewqe 21.09.2015 г. в 11:35

  Сделайте видеоурок по этой программе, в наглядном виде было бы поднятнее

  • Артур Шарипов 21.09.2015 г. в 12:46

    В ближайшем будущем планирую сделать миникурс по этой программе!

• sdfdf11 23.07.2015 г. в 13:21

  Спасибо, помогли

• Виталий 10.06.2015 г. в 10:30

  Есть подозрения что программа демо - версия, уж очень простой функционал программы.

• Дмитрий 11.05.2015 г. в 13:28

  Спасибо! Простое и быстрое решение. Статья отличная