Как создать электронную книгу в формате EPUB [Axa-Ru] (epub) читать онлайн

-  Как создать электронную книгу в формате EPUB  4.64 Мб скачать: (epub 3) - (epub 3+fbd)  читать: (полностью) - (постранично) - Axa-Ru

Книга в формате epub! Изображения и текст могут не отображаться!


 [Настройки текста]  [Cбросить фильтры]
  [Оглавление]


Unknown
Начало

Оглавление


  1. Несколько слов перед тем как начать
  2. Обложка
  3. Форзац
  4. Фронтиспис
  5. Титульный лист
  6. Анотация
  7. Заголовки
  8. Эпиграф
  9. Абзац
  10. Буквица
  11. Стихи
  12. Картинки
  13. Таблица
  14. Список ненумерованный
  15. Список нумерованный
  16. Врезка текста
  17. Исходный текст программы.
  18. Вывод в терминал
  19. Формирование сносок
  20. Концевой титульный лист
  21. Нахзац
  22. В завершение
  23. Листинг css-шаблона


Пометки


  1. Оглавление
  2. Обложка



Анотация

 Короткое описание содержимого книги. Делается более мелким шрифтом по отношению к основному тексту.


<div class="annotation">
<p>Текст аннотации</p>
</div>

Пример:

Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации. Текст аннотации.


Врезка текста 

В технических книгах врезка чаще всего делится на три вида (каждый вид я снабдил соответствующей иконкой):


  1. 🖎 - рецепт-примечание;
  2. 📄 - пример;
  3. 🖐 - внимание.

В шаблон включены все три иконки. Ненужные потом удляю.

Я сделал врезку серого и белого стиля, аналогично как и представление исходного кода.


Вариант врезки текста в светлом стиле с иконкой.

<div class="recipe-white" comment="Примечание">
<p class="recipe-icon">🖎📄🖐</p>
<p class="recipe-message">Текст рецепта</p>
</div>

Пример:

🖎📄🖐

Текст рецепта

 

Другой вариант врезки:


Вариант серого блока врезки текста.

<div class="recipe-grey" comment="Примечание">
<p class="recipe-theme">Тема</p>
<p class="recipe-title">Заголовок</p>
<p class="recipe-message">Абзац 1.</p>
<p class="recipe-message">Абзац 2</p>
</div>

Пример:

Тема

Заголовок

Абзац 1. 

Абзац 2.


Эпиграф


html код эпиграфа

<div class="epigraph" comment="Эпиграф">
<p>...</p>
<p>...</p>
</div>

Пример:

Вот так выглядит в книге текст представляет собой эпиграф. Он форматируется по правому краю и выполняется шрифтом курсив.

Автор Эпиграфа


Заголовки

Заголовки уровней 1 и 2 при оформлении исользуют виньетки. Заголовки уровней 3, 4, 5, 6 выровнены по левому краю.

Код формирующий заголовки 1 и второго уровней идентичны.


html-код заголовка

<div class="vignette_title_bedore">
<div class="vignette_title_before">
<img width="90%" src="../Images/title_before.png"/>
</div>
<h1>Заголовок уровня 1</h1>
<div class="vignette_title_after">
<img width="90%" src="../Images/title_after.png"/>
</div>
</div>

Примеры:


Как создать электронную книгу в формате EPUB. Axa-Ru. Иллюстрация 2

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


Как создать электронную книгу в формате EPUB. Axa-Ru. Иллюстрация 3

Текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги.


Как создать электронную книгу в формате EPUB. Axa-Ru. Иллюстрация 4

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


Как создать электронную книгу в формате EPUB. Axa-Ru. Иллюстрация 5

Текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги.


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

Текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги.


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

Текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги.


Заголовок Уровня 5

Текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги.


Заголовок Уровня 6

Текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги, текст абзаца книги.


Несколько слов перед тем как начать

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

Так же в интернете можно найти с десяток различных css шаблонов. Без методики и примеров использовать их равнозначно созданию своего собственного css.

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

В процессе поготовки книг я прошел по всем трём дорожкам и в итоге создал свой css шаблон, который с небольшими изменениями использую во всех книгах. 

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

В общем целью было - создать лаконичную инструкцию, как использовать css-шаблон.


Фронтиспис

frontispiece (Фронтиспис)

Страница с изображением (например, портретом автора), находится между форзацем и титульным листом.


Код старницы фронтспис

<div class="image95">
<img alt="" src="../Images/frontispice.jpg"/>
</div>

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


Код ссылки в тексте

&#160;<a id="anchor_001" href="../Text/notes.xhtml#note_001">[_1_]</a>

Код сноски в файле notes.xhtml

<div class="notes">
<p><a id="note_001">[_1_]</a>&#160;Текст сноски.</p>
<p><a href="../Text/Chapter_01.xhtml#anchor_001">&lt;&lt;&lt;&lt;&lt;</a><br/></p>
</div>

Я выношу сноски в отдельную секцию "notes.xhtml". 

Область для перехода в "note" делаю достаточно большой, для уверенного попадания в нее. 

Картинка  и пример ниже иллюстрируют переходы по ссылке и возврат обратно.

Как создать электронную книгу в формате EPUB. Axa-Ru. Иллюстрация 6

Пример:


Код ссылки в тексте

называемых пакетами&#160;<a id="anchor_017" href="../Text/notes.xhtml#note_017">[_17_]</a>

Код сноски в файле notes.xhtml

<div class="notes">
<p><a id="note_017">[_17_]</a>&#160;Наряду с термином «пакет», используются также термины «кадр», «фрейм», «ячейка» и др. В данном контексте различия в значении этих терминов несущественны.</p>
<p><a href="../Text/Chapter_01.xhtml#anchor_017">&lt;&lt;&lt;&lt;&lt;</a><br/></p>
</div>

Концевой титульный лист

Trailer_title_page Концевой титульный лист.

Последняя страница издания с его выпускными данными. 


Форзац

fly-leaf (Форзац)

Лист бумаги, одной стороной приклеиваемый к внутренней стороне переплётной крышки, а другой - к первому листу. Соединяет книжный блок с переплётной крышкой.

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


Обложка

Cover (обложка)

Код обложки формируется автоматически в программе Sigil. Для этого нужно просто выбрать Сервис ⏵ Добавить обложку. Далее выбираем картинку и в текст книги будет вставлен html код формирующий вид обложки.

Код генерируется автоматически, поэтому приводить его не буду.


Стихи


<p class="subtitle">* * *</p>
<div class="stanza">
<div class="poem">
<p>Над омраченным Петроградом</p>
</div>
</div>

Пример:

* * *

Над омраченным Петроградом

Осенний ветер тучи гнал,

Дышало небо влажным хладом,

Нева шумела. Бился вал

О пристань набережной стройной,

Как челобитчик беспокойный

Об дверь судейской. Дождь в окно

Стучал печально. Уж темно

Всё становилось. В это время

Иван Езерский, мой сосед,

Вошел в свой тесный кабинет…

Однако ж род его, и племя,

И чин, и службу, и года

Вам знать нехудо, господа.


Картинки

В css определены 3 размера картинок: 95%, 50% и 30% от размера страницы по ширине. 

Картинки встраиваются в книгу с помощью следующего кода.


html код вставки картинки по центру. Три варианта масштаба.

<div class="image95">
<img alt="" src="../Images/1percent.jpg"/>
</div>
<div class="image50">
<img alt="" src="../Images/1percent.jpg"/>
</div>
<div class="image30">
<img alt="" src="../Images/1percent.jpg"/>
</div>

Примеры:


Как создать электронную книгу в формате EPUB. Axa-Ru. Иллюстрация 7

 


Как создать электронную книгу в формате EPUB. Axa-Ru. Иллюстрация 8

 


Как создать электронную книгу в формате EPUB. Axa-Ru. Иллюстрация 9

Таблица

К сожалению в Sigil нет визуального инструмента создания и редактирования таблиц. Поэтому разметка таблицы производится на языке html. В css есть шаблоны для создания таблиц. Если необходимо изменить представление таблиц, то придется менять соответствующие элементы css файла.

Ниже представлен html код и вид таблицы, который он генерит:


<p class="tbl-name">Таблица 1. Пример таблицы в книге.</p>
<table>
<tbody>
<tr>
<th width="40%" class="style-08">
Протокол
</th>
<th width="60%" class="style-08">
Максимальное количество октетов в датаграмме (MTU)
</th>
</tr>
<tr>
<td class="style-08">
По умолчанию для PPP
</td>
<td class="style-08">
1500
</td>
</tr>
</tbody>
</table>

Пример:

Таблица 1. Пример таблицы в книге.


Протокол
Максимальное количество октетов в датаграмме (MTU)

По умолчанию для PPP

1500

PPP (с небольшой задержкой)

296

SLIP

1006 (исходное ограничение)

X.25

1600 (отличается для некоторых сетей)

Список ненумерованный


<ul>
<li><p class="list-1l">пункт 1;</p>
<p class="list">пункт 1, параграф 2;</p></li>
<li><p class="list-1l">пункт 2;</p></li>
<li><p class="list-1l">пункт 3;</p></li>
<li><p class="list-1l">пункт 4.</p></li>
</ul>

Первый параграф буллета использует класс list-1l, в котором подавлен перевод строки. Все последующие параграфы текущего булета должны использовать класс list.

Пример:

Абзац текста до списка. Абзац текста до списка. Абзац текста до списка. Абзац текста до списка. Абзац текста до списка. Абзац текста до списка:


Абзац текста после списка. Абзац текста после списка. Абзац текста после списка. Абзац текста после списка. Абзац текста после списка. Абзац текста после списка.:


Список нумерованный


<ol>
<li><p class="list-1l">пункт 1;</p>
<p class="list">пункт 1, параграф 2;</p></li>
<li><p class="list-1l">пункт 2;</p></li>
<li><p class="list-1l">пункт 3;</p></li>
<li><p class="list-1l">пункт 4.</p></li>
</ol>

Первый параграф буллета использует класс list-1l, в котором подавлен перевод строки. Все последующие параграфы текущего булета должны использовать класс list.

Пример:

Абзац текста до списка. Абзац текста до списка. Абзац текста до списка. Абзац текста до списка. Абзац текста до списка. Абзац текста до списка:


  1. пункт 1;

    пункт 1, параграф 2;

  2. пункт 2;

  3. пункт 3;

  4. пункт 4.


Абзац текста после списка. Абзац текста после списка. Абзац текста после списка. Абзац текста после списка. Абзац текста после списка. Абзац текста после списка.:


Титульный лист

title_page (Титульный лист)

Начальный лист книги, на котором размещены основные выходные данные: название, автор, издательство и т.д.


title.xhtml    - авторы  и название книги

<div class="vignette_title_before">
<img width="90%" src="../Images/title_before.png"/>
</div>
<div class="h0">
<p class="title">Автор</p>
<p class="title">Название строка 1</p>
<p class="title">Название строка 2</p>
</div>
<div class="vignette_title_after">
<img width="90%" src="../Images/title_after.png"/>
</div>
<div class="traum_logo">
<img alt="traum-logo" width="30%" src="../Images/traum-logo.png"/><br/>
</div>

Исходный текст программы.

В общем случае блок кода состоит из двух областей: заголовка и собственно кода.  

Для оформления исходного кода в тексте книги я использую две формы: белую и серую. Код для вставки одинаков, отличается только именем класса:

Для получения такого вида используется следующий html код:


html код вставки исходного кода в белом стиле

<div class="listing-head-white" comment="listing head">
<em class="example" title="title">Заголовок</em>
</div>
<pre class="listing-white">Код</pre>

html код вставки исходного кода в сером стиле

<div class="listing-head-grey" comment="listing head">
<em class="example" title="title">Заголовок</em>
</div>
<pre class="listing-grey">Код</pre>

--

Оглавление

Несколько слов перед тем как начать

Обложка

Форзац

Фронтиспис

Титульный лист

Анотация

Заголовки

Эпиграф

Абзац

Буквица

Стихи

Картинки

Таблица

Список ненумерованный

Список нумерованный

Врезка текста

Исходный текст программы.

Вывод в терминал

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

Концевой титульный лист

Нахзац

В завершение

Листинг css-шаблона

Буквица


<p style="text-indent:0em"><span class="dropcap">В</span>а...</p>

 

Важнейшим направлением стандартизации в области вычислительных сетей является стандартизация коммуникационных протоколов. Наиболее известными стандартными стеками протоколов являются: OSI, TCP/IP, IPX/SPX, NetBIOS/SMB, DECnet, SNA (не все из них применяются сегодня на практике).


Абзац

Абзац оформляется простыми тегами <p></p>. Для того чтобы выделить текст используются различные теги.

Например эта часть предложения выделена жирным.


<p>Например эта часть <span class="b">предложения выделена жирным</span>.</p>

Эта часть часть предложения выделена курсивом.


<p>Эта часть <span class="i">часть предложения выделена курсивом</span>.</p>

Эта часть предложения подчеркнута.


<p>Эта часть <span class="u">предложения подчеркнута.</span></p>

Эта часть предложения зачеркнута.


<p>Эта часть <span class="st">предложения зачеркнута</span>.</p>

Нахзац

Nachsatz Нахзац

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

Этот раздел бумажной книги не содержит никаких отображаемых элементов.


Вывод в терминал


<div class="terminal-head image100">
<img alt="terminal_01" src="../Images/terminal_01.png"/>
</div>
<pre class="term-dark">
....
</pre>

Пример:


Как создать электронную книгу в формате EPUB. Axa-Ru. Иллюстрация 10

axa@x270 ~/Stuff/book $ ls -l
total 24
drwxr-xr-x 19 axa axa 4096 авг 25 2018 cr-new
drwxr-xr-x 24 axa axa 4096 апр 24 08:43 edit_books
drwxrwxr-x 10 axa axa 4096 мар 13 01:34 fb2mobi
drwxr-xr-x 7 axa axa 4096 мая 15 2017 kobo_bookshelves
drwxr-xr-x 5 axa axa 4096 фев 11 2018 kobo_patch
drwxr-xr-x 8 axa axa 4096 апр 19 17:37 traum
axa@x270 ~/Stuff/book $

Для вывода лкна терминала в светлых тонах используется класс term-light. Кроме того, можно не выводить окно-декоратор.


<pre class="term-light">
....
</pre>
axa@x270 ~/Stuff/book $ ls -l
total 24
drwxr-xr-x 19 axa axa 4096 авг 25 2018 cr-new
drwxr-xr-x 24 axa axa 4096 апр 24 08:43 edit_books
drwxrwxr-x 10 axa axa 4096 мар 13 01:34 fb2mobi
drwxr-xr-x 7 axa axa 4096 мая 15 2017 kobo_bookshelves
drwxr-xr-x 5 axa axa 4096 фев 11 2018 kobo_patch
drwxr-xr-x 8 axa axa 4096 апр 19 17:37 traum
axa@x270 ~/Stuff/book $

В завершение

В шаблоне есть еще с десяток классов, такие как выделение ключевого слова, центрирование текста и многое другое. 

Использование этих элементов - это вопрос легкости манипулирования шаблонами css. Чем больше книжек вы отформатируете , тем легче вам будет их использовать.

Надеюсь эта короткая инструкция поможет вам в форматировании книжек.

И да, чуть не забыл.

Сам шаблон можно взять из git репозитория.

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

Ну, вот и все.

Удачи, в создании книг.