Unknown
Начало

Оглавление

Несколько слов перед тем как начатьОбложкаФорзацФронтисписТитульный листАнотацияЗаголовкиЭпиграфАбзацБуквицаСтихиКартинкиТаблицаСписок ненумерованныйСписок нумерованныйВрезка текстаИсходный текст программы.Вывод в терминалФормирование сносокКонцевой титульный листНахзацВ завершениеЛистинг css-шаблона

Пометки

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

Анотация

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

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

Пример:

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

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

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

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

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

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

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

<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>

Примеры:

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

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

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

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

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

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

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

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

--">