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

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

Электронное пособие будет создано в формате html. Но при этом вам не понадобится изучать язык HTML. Итак, приступим.

Содержание

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

Обзор видеокурса

Установка программы Turbo Site 1.7.1

Первое что нужно сделать, это скачать программу Turbo Site. И установить её на компьютер. Программа находится в курсе по ссылке (просто скачайте демо-версию курса, внутри будет программа). Запускаем программу Turbo Site. И видим окно приветствия.

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

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

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

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

Например, такой (Condition):

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

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

Познакомимся с интерфейсом программы TurboSite

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

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

Можно наполнять страницы во встроенном редакторе программы. Но он изрядно устарел, а некоторые функции и вовсе работают некорректно. Я предлагаю весь контент подготовить заранее:

Все страницы лучше создать в программе Microsoft Word отдельными файлами. Причём крайне рекомендуется использовать только следующие инструменты: полужирный шрифт, курсив, подчеркивание, нумерованный и маркированный список. Не следует изменять начертание шрифта, размер шрифта, выделение цветом и т.п. Это будет только нагружать страницу. Подобные стили лучше задавать только в шаблоне!

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

Видеоролики стоит перекодировать в формат mp4. Это избавит от множества проблем совместимости браузерами.

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

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

Основные настройки электронного учебника

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

Заголовок сайта, подзаголовок - отображается в шапке электронного учебника.

Заголовок списка страниц - надпись над содержанием в сайдбаре.

Подвал - отображается в нижней части учебника.

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

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

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

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

Нажмите кнопку Добавить. В левом окошке появится новая страница. Теперь в правую часть вставьте свой текст.

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

Если отметить чекбокс «В списке страниц» то в боковом меню появится ссылка на текущую страницу.

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

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

Работа с контентом учебника

Добавление изображений в электронный учебник:

Создание страницы оглавления

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

Перейдите на первую страницу (index). В правой части напишите оглавление своего учебника.

И расставляем ссылки на страницы, согласно оглавлению: выделяем пункт оглавления – жмем кнопку Ссылка – на страницу проекта – указываем ту страницу, на которую нужно ссылаться.

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

Теперь электронный учебник находится в папке public_html. Чтобы его открыть, достаточно запустить внутри этой папки файл index.html.

Это был минимальный перечень действий, который необходимо выполнить, чтобы разработать электронный учебник. 

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

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

В электронный учебник можно внедрить следующие мультимедиа материалы:

• Видеоролики
• Аудиозаписи
• Презентации PowerPoint
• Формулы
• Проверочные тестирования
• Кроссворды
• Многоуровневое меню с подразделами

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

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

67120 07.05.2015 г. Для обучения

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

• Мира 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

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