В первых двух статьях этой серии мы рассмотрели основы iBooks и объяснили, как настроить ваш проект. В этой части мы добавим некоторый контент в наш проект с фиксированным макетом и начнем создавать работающий iBook. Давайте начнем!
Получение изображений проекта
Загружаемые исходные файлы содержат изображения, которые вы можете использовать в своем проекте для завершения учебника. Если вы еще этого не сделали, загрузите исходные файлы вверху этой страницы. Дважды щелкните, чтобы открыть папку «iBookDemo», затем откройте папку «OEBPS» и щелкните правой кнопкой мыши папку «images». Выберите «Копировать« изображения »» из меню, прежде чем вернуться обратно в папку проекта, с которой вы работали в этой серии. Перейдите в папку «OEBPS» вашего проекта и щелкните правой кнопкой мыши. Выберите «Вставить элемент» в меню, чтобы вставить папку изображений в папку вашего проекта.
Шаг 1. Добавление содержимого XHTML
Фоновые изображения
Давайте добавим фоновые изображения в файлы XHTML. Откройте «page01.xhtml», «page02.xhtml» и «page03.xhtml» в текстовом редакторе, а затем добавьте следующий код в тег body каждой страницы:
|
1
2
3
4
5
6
|
<div class=»backgroundImage»>
<img src=»images/demoBackground.jpg»
alt=»A big, green, grassy hill
with a bright blue sky in the
background.»/>
</div>
|
Обратите внимание на alt тега alt . Apple придает большое значение доступности, требуя, чтобы теги alt были описательными для слабовидящих пользователей. Файл «demoBackround.jpg» находится в папке «images», которую мы вставили в папку OEBPS ранее.
Добавление изображения птицы
Изображение птицы — это файл PNG, а фоновое изображение — файл JPEG. Это потому, что изображение птицы требует прозрачности за пределами ее краев. Когда изображение не нуждается в прозрачности, чтобы видеть изображение ниже, как в случае с фоновым изображением, вам нужно придерживаться типов файлов JPEG с высоким уровнем качества.
Добавьте следующий код в тег body «page01.xhtml», «page02.xhtml» и «page03.xhtml», чтобы разместить изображение птицы на каждой странице.
|
1
2
3
|
<div class=»bird» id=»bird»>
<img src=»images/bird.png» alt=»a round, red bird» />
</div>
|
Многие элементы, добавленные в книгу, будут иметь связанный class CSS и / или id . Если вы не знакомы с CSS, эти идентификаторы позволят нам настроить свойства элементов, такие как расположение, размер, слои и спецификации шрифта для текста. Атрибут класса используется для создания групп похожих элементов HTML, тогда как идентификатор используется для указания одного конкретного типа элемента. В этой демонстрации нам действительно нужен атрибут ID, но в ваших собственных проектах вы можете сгруппировать похожие объекты вместе с классом. Мы добавим атрибуты во внешний CSS-файл для них чуть позже.
Добавление текста
Теперь, когда у нас есть пара изображений, давайте добавим немного текста в нашу iBook. Вернитесь к «page01.xhtml» и введите следующий код внутри тега body .
|
1
2
3
|
<div id=»page01Text»>
My iBook Demo Project
</div>
|
Весь текст в iBook должен быть закодирован в проект, а не помещен в изображение. Это позволяет пользователю искать или искать текст в любое время, а также обеспечивает полный доступ для пользователей устройств iOS с активированной функцией Voice Over.
Нажмите «page02.xhtml» и добавьте следующий код внутри тега body :
|
1
2
3
|
<div id=»page02Text»>
Little bird sees a blue sky.
</div>
|
Нажмите «page03.xhtml» и добавьте следующий код внутри тега body :
|
1
2
3
|
<div id=»page03Text»>
Little bird sees green grass.
</div>
|
Шаг 2: Создание CSS
Давайте добавим немного CSS для размещения элементов на странице. Откройте файл «cssstyles.css» и добавьте следующий код для размещения фонового изображения:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
.backgroundImage
{
position: absolute;
margin: 0;
z-index: 0;
top: 0px;
left: 0px;
}
.backgroundImage img
{
width: 800px;
height: 600px;
top: 0px;
left: 0px;
}
|
Первое правило CSS размещает контейнер в верхнем левом углу без полей. Второе правило предоставляет спецификации высоты и ширины для самого изображения, а также размещает изображение в верхнем левом углу контейнера.
Расположение птицы
Чуть ниже .backgroundImage img добавьте следующий код, чтобы расположить птицу на каждой странице:
|
01
02
03
04
05
06
07
08
09
10
11
|
#bird {
position: absolute;
z-index: 10;
left: 200px;
top: 250px;
}
#bird img{
width: 200px;
height: 123px;
}
|
Еще раз, размер изображения устанавливается вместе с расположением на странице и размещением поверх фонового изображения.
Расположение и форматирование текста
Правила CSS для текста обычно включают дополнительные свойства, такие как размер шрифта и семейство. Добавьте следующий код чуть ниже предыдущего кода:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
#page01Text {
position: absolute;
z-index: 20;
top: 74px;
left: 90px;
width: 600px;
font-family: serif;
font-size: 28pt;
letter-spacing: 2px;
font-weight: bold;
-webkit-text-fill-color: #000000;
text-shadow: 1.5px 1.5px #ffffff;
}
#page02Text {
position: absolute;
z-index: 20;
top: 74px;
left: 80px;
width: 600px;
font-family: serif;
font-size: 28pt;
letter-spacing: 2px;
font-weight: bold;
-webkit-text-fill-color: #000000;
text-shadow: 1.5px 1.5px #ffffff;
}
#page03Text {
position: absolute;
z-index: 20;
top: 74px;
left: 65px;
width: 600px;
font-family: serif;
font-size: 28pt;
letter-spacing: 2px;
font-weight: bold;
-webkit-text-fill-color: #000000;
text-shadow: 1.5px 1.5px #ffffff;
}
|
Поскольку iBooks полностью поддерживает механизм веб-браузера WebKit, текст можно форматировать различными способами. WebKit имеет множество свойств, которые можно изменить, чтобы создать желаемый вид вашего текста.
Шаг 3: Форматирование файлов, специфичных для EPUB
com.apple.ibooks.display-options.xml
Теперь, когда контент был добавлен, давайте закончим настройку файлов EPUB. Откройте файл «com.apple.ibooks.display-options.xml» и добавьте следующий код в тег display_options .
|
1
2
3
4
5
|
<platform name=»*»>
<option name=»fixed-layout»>true</option>
<option name=»orientation-lock»>landscape-only</option>
<option name=»open-to-spread»>false</option>
</platform>
|
Здесь много чего происходит; давайте посмотрим на различные варианты. Первый вариант говорит iBooks, что книга — это iBook с фиксированным макетом, а не книга Flow или Multi-Touch. Второй вариант фиксирует книгу в альбомной ориентации. Это означает, что если пользователь поворачивает устройство, книга остается заблокированной в альбомной ориентации. Если вы хотите, чтобы ваша книга располагалась в портретной ориентации, используйте значение portrait-only . Если вы хотите, чтобы он вращался свободно, оставьте эту опцию полностью. Последний параметр определяет, открывается ли книга в виде двухстраничного разворота или только одной страницы. Указав значение false , книга откроется на одной странице. Замените значение на true чтобы книга открывалась в виде двухстраничного разворота.
Файл OPF: Metadata
Первая часть файла .opf — это метаданные книги. Откройте файл «content.opf» и добавьте следующий код в тег metadata .
|
1
2
3
4
5
|
<dc:title>iBooks Demo</dc:title>
<dc:creator>Aaron Crabtree</dc:creator>
<dc:identifier id=»bookid»>12345</dc:identifier>
<dc:language>en-US</dc:language>
<meta name=»cover» content=»cover-image» />
|
Это всего лишь небольшая выборка из множества доступных метатегов. Для EPUB требуются три тега: заголовок, идентификатор и язык. Теги довольно просты. Название — это название книги, автор — автор, идентификатор используется для идентификации книги и почти всегда является ISBN. Язык — это язык, на котором написана книга, а обложка обозначает изображение, которое будет использоваться в качестве обложки книги.
OPF файл: Manifest
Для правильной работы EPUB все файлы, включенные в проект, должны быть указаны в манифесте. В файле «content.opf» добавьте следующий код внутри тега manifest :
|
01
02
03
04
05
06
07
08
09
10
11
|
<item id=»ncx» href=»toc.ncx» media-type=»application/x-dtbncx+xml» />
<item id=»cover» href=»page01.xhtml» media-type=»application/xhtml+xml» />
<item id=»page02″ href=»page02.xhtml» media-type=»application/xhtml+xml» />
<item id=»page03″ href=»page03.xhtml» media-type=»application/xhtml+xml» />
<item id=»cover-image» href=»images/demo01.jpg» media-type=»image/jpeg» />
<item id=»bird-image» href=»images/bird.png» media-type=»image/png» />
<item id=»css» href=»cssstyles.css» media-type=»text/css» />
|
Есть несколько атрибутов для каждого элемента в манифесте. Первый атрибут — это id , значение по вашему выбору. Вторым атрибутом является href , который указывает файл, связанный с id и его местоположение. Последний атрибут является media-type , типом и подтипом, которые указывают тип файла элемента. Первым элементом в списке является файл toc.ncx, который мы создали во второй части серии. Второй раздел содержит файлы XHTML. Третий раздел содержит фоновое изображение, JPEG. Четвертый раздел — изображение птицы, PNG, а последний элемент ссылается на файл CSS.
OPF файл: Spine
Позвоночник определяет порядок страниц в книге. Добавьте следующий код внутри тега spine .
|
1
2
3
|
<itemref idref=»cover» />
<itemref idref=»page02″ />
<itemref idref=»page03″ />
|
Обратите внимание, что id элемента из раздела манифеста используется для ссылки на страницу, а не имя самого файла.
OPF File: Guide
Руководство является необязательным элементом, используемым для определения важных справочных разделов книги, таких как глоссарий, указатель или оглавление. Добавьте следующий код внутри тегов guide .
|
1
|
<reference href=»page01.xhtml» type=»cover» title=»Cover» />
|
Поскольку в нашей книге нет справочных разделов, мы будем включать только ссылку на «page01.xhtml» в качестве обложки книги.
Файл NCX: Head
Файл .ncx или файл оглавления используется для создания закладок для важных разделов вашей книги. Откройте файл .ncx и добавьте следующий код внутри
тег.
|
1
2
3
4
|
<meta name=»dtb:uid» content=»12345″/>
<meta name=»dtb:depth» content=»1″/>
<meta name=»dtb:totalPageCount» content=»0″/>
<meta name=»dtb:maxPageNumber» content=»0″/>
|
Наиболее важной частью этого раздела является то, что значение первой строки идентично значению идентификатора книги в разделе метаданных файла .opf.
Файл docTitle : docTitle
Переместитесь вниз к тегу docTitle и добавьте следующий код.
|
1
|
<text>iBook Demo</text>
|
Это значение должно соответствовать значению тега title в теге метаданных .opf.
Файл navMap : navMap
Последний раздел файла .ncx содержит начальную страницу книги. Поскольку мы создаем простую книгу, нам не нужна сложная страница закладок для различных глав и разделов. Добавьте следующий код в тег navMap .
|
1
2
3
4
5
6
|
<navPoint id=»navpoint-1″ playOrder=»1″>
<navLabel>
<text>Book Cover</text>
</navLabel>
<content src=»page01.xhtml»/>
</navPoint>
|
Тег text указывает текст, который будет отображаться в оглавлении вашей книги, а тег content src="" — это место ссылки.
Шаг 4: Создание EPUB
Давайте создадим и протестируем iBook на устройстве. Начните с запуска терминала. Убедитесь, что вы находитесь в том же каталоге, что и основная папка EPUB. Введите в терминал следующие команды:
zip -0Xq iBooksDemo.epub mimetype .
Эта команда указывает Терминалу создать новый zip-файл с именем «iBooksDemo.epub», не сжимая файлы и оставляя файл mimetype вне zip-архива. Поскольку iBooks требуется доступ к файлу mimetype, чтобы открыть EPUB, этот файл должен оставаться за пределами zip-архива.
Далее мы добавим папки META-INF и OEBPS в zip-файл, введя следующее в Terminal:
zip -0Xr9Dq iBooksDemo.epub * .
Этот набор команд сообщает Терминалу добавить две папки и их содержимое в zip-архив. Важно убедиться, что вы называете свой EPUB одинаковым именем в каждой строке. Откройте основную папку вашей книги, и вы увидите недавно созданный файл .epub. Этот файл содержит все элементы вашей книги в одном удобном файле.
Шаг 5. Тестирование iBook на устройстве
Если вы еще не загрузили приложение iBooks, перейдите в App Store на своем устройстве, найдите и загрузите «iBooks». Запустите iTunes и подключите устройство к компьютеру. Перетащите файл .epub в библиотеку iTunes. Нажмите на подключенное устройство в iTunes и нажмите «Синхронизировать» внизу страницы. После синхронизации устройства запустите iBooks и нажмите на книгу, чтобы запустить и протестировать iBook.
Вывод
Поздравляем! Вы только что сделали iBook с фиксированным макетом! Развивая свои навыки, вы обнаружите, что iBooks предоставляет невероятную возможность создавать полностью интерактивные, увлекательные и увлекательные книги для читателей всех возрастов. Книги больше не просто текст и картинки. Благодаря iBooks это мультимедийные приложения, включающие анимацию, видео, аудио, интерактивность и многое другое!