<body>
<div class="imgDiv">
<img alt="girl01" src="../Images/girl01.jpg" />
</div>
</body>
Вооружившись этим набором знаний уже можно вставить иллюстрацию внутрь книги в программе Sigil.
В нужное место после текста ставится курсор. Нажимается кнопка Insert File. (В версиях до 0.7.0 эта кнопка обозначалась как Insert Images.) Появится окно, в котором можно выбрать изображения, которые вы уже поместили в папку Images. Подтвердите выбор файла. Перейдите в режим просмотра кода и скорректируйте код, как описано выше.
Есть ли ещё какие-то особенности? Увы, да.
Многие авторы помнят, как красиво выглядит обтекание картинки текстом (слева или справа). Да, на странице сайта или в файле PDF можно предполагать, что всё будет хорошо. К сожалению, подобное лёгкое украшение может привести к непредсказуемому внешнему виду странички на различных ридерах, вплоть до полной "каши", т.к. невозможно заранее предсказать ширину экрана, на котором вашу книгу будут читать. Пример в Приложении 2
Большинство экспертов по разработке электронных книг рекомендуют размещать картинки отдельно от текста, иногда даже на отдельной страничке (вставляя разрывы страниц до и после изображения).
И ещё особенность. Если текст, например, стихотворения, занимает 2/3 пространства страницы, и далее сразу же разместить иллюстрацию – часть программ чтения "вытесняет" иллюстрацию на следующую страницу, но может случиться и большая "неприятность" – изображение может получиться разрезанным. Или будет катастрофически уменьшено. Это оставляет неприятный осадок при чтении.
Опытным путем лично я пришел к выводу, что не стоит помещать даже небольшие иллюстрации после названия стихотворения, перед текстом. На некоторых устройствах может возникнуть ситуация, что после рисунка на странице может остаться только первая строчка или три строки от катрена (четверостишия). Это тоже неприятно. И давайте подумаем, что автор хочет донести до читателя – свой текст или рисунок и текст к нему? Какая задача первична?
В новой версии Sigil (начиная с v.0.6.0) появилась очень приятная особенность: при просмотре изображений в папке Images теперь можно просмотреть изображения во внешней программе. Под каждой иллюстрацией можно увидеть свойства файла.
Думаю, будет правильно здесь же чуть прокомментировать вопрос "где брать иллюстрации?"
Есть несколько простых рекомендаций, чтобы Ваша книга была легальной и не нарушала авторских прав художников, фотографов и дизайнеров.
1. Сотрудничество со знакомым художником, фотографом, дизайнером.
2. Получение разрешения от автора изображения на использование его работ в Вашей книге.
3. Использование собственных иллюстраций (рисунков или фотографий).
4. Использование изображений из Public Domain (общественное достояние). К примеру, Jason Matthews ( http://ru.scribd.com/doc....or-Free ) приводит перечень сайтов, где можно свободно брать изображения:
http://www.photos8.com/
http://www.public-domain-photos.com/
http://www.publicdomainpictures.net/
http://www.public-domain-image.com/
http://www.pdphoto.org/
http://www.usa.gov/Topics/Graphics.shtml
http://www.flickr.com/creativecommons/ – free with permission (бесплатно с определёнными условиями)
О встраивании в книгу обложки будет рассказано в отдельной публикации.
К странице Содержания
-=***=-
Вставляем Обложку в электронную книгу ePub
Я совершенно убеждён, что издание книги должно быть событием, и не только для автора или издателя. Книга создается для читателя и должна отвечать его литературным и эстетическим ожиданиям.
Первое, с чем сталкивается потенциальный читатель в Интернете – это обложка электронной книги на сайте библиотеки, издательства или магазина. Первое впечатление крайне важно. Обложка должна "зацепить", привлечь внимание, визуальная информация срабатывает раньше текстовой (и это придумал не я, так получилось).
О подготовке обложки лучше всего рассказывать отдельно. Статья на эту тему. Сейчас о технике встраивания обложки непосредственно в книгу. Это можно делать в программе Calibre(попробуйте), но я предпочитаю редактор ePub – Sigil. Скажу сразу, описываемая тема достаточно сложная, чтобы получить чёткий алгоритм действий – пришлось перерыть очень много англоязычных ресурсов, форум http://www.mobileread.com и другие.
Итак, Обложка должна быть в первом файле html в книге ePub (и там не должно быть ничего, кроме изображения обложки). Файл обложки должен быть подготовлен заранее и помещён в папку Images.
Добавляем обложку в первый файл книги:
Сразу должен сказать, что этих действий явно недостаточно, т.к. получается пока вот что:
Размеры обложки большие и часть изображения не помещается в окне просмотра.
Посмотрим, что же в коде страницы:
<body>
<p><img alt="cover" src="../Images/cover.jpg" /> </p>
</body>
При таких условиях или надо уменьшать обложку до каких-то усреднённых размеров гипотетического "ридера", или сделать так, чтобы обложка масштабировалась по ширине экрана.
В таблице стилей CSS должны быть следующие записи:
div.coverpage
{
text-align: center;
page-break-after: always;
}
img.coverimage
{
max-width:100%;
vertical-align: text-top;
margin-bottom:.5em !important;
padding: 0;
}
Теперь надо, чтобы на страничке обложки была ссылка на таблицу CSS и можно в коде чуть исправить код изображения:
<head>
<title></title>
<link href="../Styles/poemstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="coverpage"><img alt="cover" src="../Images/cover.jpg" /> </div>
</body>
Но и этого мало! В описание imgследует добавить class="coverimage"
<body>
<div class="coverpage">
<img alt="cover" class="coverimage" src="../Images/cover.jpg" />
</div>
</body>
Проверяем, что получилось. Правую границу окна просмотра сместим мышкой влево (имитация узкого экрана, например, смартфона). Изображение уменьшилось без искажения пропорций. (Попутно напомню, что запись alt=""должна быть заполнена для каждого изображения, иначе будет ошибка при валидации, а система TTS (text-to-speech – система чтения вслух) при чтении книги может давать сбои на изображениях. В последних верcиях редактора Sigil значение alt="" вcтавляется автоматически.)
Должен напомнить, что в названии файлов html (xhtml) и файлов изображений недопустимы пробелы, нельзя использовать кириллицу.
Всё ли изложено? Почти. В руководстве программы Sigil особо подчёркивается, что и файлу html, и собственно изображению обложки должна быть присвоена "семантика" Coverи Cover Imageсоответственно. Выделяем файл, и по правому клику мышкой вызываем меню действий – Add Semantics: