Как использовать учебник TurboSite
После разработки электронного учебника, настало время научиться его правильно открывать и передавать пользователям.
Просмотр учебника#
Чтобы открыть электронный учебник, понадобится любой современный браузер с поддержкой HTML5. Рекомендуется сделать такой браузер программой по умолчанию, для просмотра файлов .html.
Всё содержимое учебника находится в папке public_html. Чтобы в неё попасть, нужно нажать на кнопку Открыть папку с сайтом.
- Важно!
-
Чтобы поделиться учебником с пользователем, нужно передавать не весь проект, а только папку public_html. Например, её можно поместить в архив (.zip) и переслать в электронном письме.
Внутри папки public_html находятся файлы и страницы учебника. Открывать следует файл index.html, тогда откроется главная страница электронного учебника.
Стартовая страница#
По мере наполнения учебника, внутри public_html накопится множество файлов, и искать среди них index.html будет не удобно.
Решить это можно созданием дополнительной (начальной) страницы, на которой будет находиться информация об учебнике и ссылка для открытия файла index.html.
В таком случае, нужно создать отдельную папку (например, "Информатика") и поместить в неё папку public_html. И рядом с этой папкой разместить файл start.html. А пользователям предоставлять папку "Информатика".
Пример кода стартовой страницы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
background-color: #eef1f7;
color: #1e467f;
font-family: Tahoma, sans-serif;
text-transform: uppercase;
}
.wrap{
text-align: center;
margin-top: 10vh;
}
.title{
font-size: 40px;
font-weight: 600;
margin-bottom: 15px;
}
.image{
margin-bottom: 20px;
width: 180px;
}
.description{
font-size: 26px;
font-weight: 600;
color: #f23276;
margin-bottom: 20px;
}
.button{
text-decoration: none;
background: #fff;
padding: 10px 14px;
display: inline-block;
font-size: 20px;
font-weight: 600;
color: #ffffff;
background-color: #1e467f;
}
@media(max-width:767px){
.wrap{
margin-top: 0;
}
.title{
font-size: 20px;
}
.description, .button{
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="wrap">
<div>
<img class="image" src="book-title.png">
</div>
<div class="title">
Информатика и ИКТ
</div>
<div class="description">
электронный учебник для студентов
</div>
<div>
<a class="button" href="public_html/index.html">Открыть учебник</a>
</div>
</div>
</body>
</html>
В коде выше предполагается, что в корне папки с учебником, будет находиться ещё файл изображения book-title.png (логотип учебника).
Теперь пользователю нужно запустить файл start.html и перейти в учебник по ссылке Открыть учебник.
А так будет выглядеть стартовая страница:
Содержимое стартовой страницы, можно поменять под свои предпочтения, например, сделать из неё страницу с содержанием.
Загрузка на Яндекс.Диск#
Отправка архива учебника по электронной почте не очень удобна.
Во-первых, письмо может, не пройти проверку из-за содержащихся в учебнике скриптов, и тогда оно не будет доставлено до адресата.
Во-вторых, если вы обновите учебник и отправите его пользователям, у них всё равно останется предыдущая версия в старом письме.
Оптимальным решение будет размещение электронного учебника на одном из облачных сервисов. Например, Яндекс Диске.
В таком случае, вы загружаете учебник в "облако". А пользователям предоставляете только ссылку на него.
Вы всегда можете внести изменения в электронный учебник и снова его загрузить. А пользователь, заходя по старой ссылке, будет всегда видеть актуальную версию вашего учебника.