In Children’s Fixed Layout ePub for iPad – Part 5, you were shown how to create the iTunesMetadata.plist file. Now it’s time to go into making your page’s XHTML files.

3d character holding head and saying omg, you mean there is more of this.

Basically in the generic template page file you see below, it only has one line and one background picture.

We’ll get into what “span ids” are when we discuss it later. For now, try to look past them when you study the .xhtml file.

XHTML file for a fixed layout ePub

Note: You will do a page like this for every page in your book.

But you do need to remember you will have two XHTML pages for one full page in the iPad. This is what is meant by a two-page spread

I explained this in Artwork Requirements in Part 2 of this series.

Again, we’ll look at the file in parts so you can copy and paste what’s in red into whatever text editor you’re using to make your fixed layout ePub.

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta name=”viewport” content=”width=512, height=768″ />
<meta content=”text/html; charset=UTF-8″/>

None of the above needs to be changed.

It’s just what’s needed at the start of your fixed layout ePub so the iPad will know how to display the page.

The viewport’s width (512px) is one fourth of the pixel size I gave you (2048px width) in Part 2 for Artwork.

If you put two pages together for a two-page spread, then you would have 1024px. The idea is to make your book be compatible going backwards (iPad 1) and forwards to whatever new generation of iPad comes along that have retina display capabilities.

Whatever is bold and in blue can be changed by you.

<title>Page 1</title>

You can put whatever title you want between the title tags. I like to keep it simple.

<link href=”css/styles.css” type=”text/css” rel=”stylesheet”/>
<link href=”css/page01.css” type=”text/css” rel=”stylesheet”/>
</head>

I use two .css files on every page. One is basic and the other is for a particular two page spread. The page01.css has css styles I use in page01.xhtml and page02.xhtml.

Then the next css file would be page03.css and has the css I need for page 03.xhtml and page04.xhtml I find this keeps my book organized.

Also helps when I’m checking my book on my iPad for errors to have separate css style sheets because the css positioning is contained and can be EZ-ily fixed.

<body>

This lets iPad know that anything after the body tag should be displayed.

<div>
<p class=”line1″><span id=”W1″>FIRST WORD</span> <span id=”W2″>SECOND WORD</span> <span id=”W3″>THIRD WORD</span> <span id=”W4″>FOURTH WORD</span></p>
<img class=”background” src=”images/YOURBACKGROUNDPICTUREFORPAGE.jpg” alt=”DESCRIPTION OF PICTURE” />
</div>

Yes, I know this looks really strange but for a “ReadAloud” book for the iPad, each word has a beginning and ending span tag. You could do span tags for each sentence but then the child would not see each word highlighted. And, highlighting helps them learn how to read.

And the <span id=”W1″> simply means word 1 and so forth through the text. Between the span id is where you would put the words for your book.

And this span id is used in the .smil file which we’ll get to in a later part. It also corresponds with the audio file you create. In the audio file, you’ll be adding labels to where each clip (word) begins in the file and where that word ends. In other words, the time in the audio file for each word.

I know, this sounds like a whole lot of work but it’s entirely worth it when you consider a child is learning to read with your book.

The image is simply the background art and when we get to the .css file, I will be explaining how you use it and any other images (.pngs) you might need in your book. Apple does require you have an alt tag with a description for everyone of the images in your fixed layout ePub.

</body>
</html>

And finally, you need to close the body and html tags in your book.

Note: The example is only for one paragraph (line) in your ebook. If you need to add more lines then you can either put a break code <br /> code in the page where needed. This is EZ-ier than trying to position each line.

 

If you do need to position your words in various spots, then you would do a new paragraph class (i.e., <p class=”line2″>) and position this paragraph (line) where you need it in your .css file.

And that’s it for making a basic .xhtml page for your fixed layout ePub.

And here is what page02.xhtml would look like. It has more words because in the next part, I’ll be explaining the .css you need to position your words on a page. Remember this is just a template. Your book will have less or more words on a page.

picture of page 02.xhtml

Take a close look at it and see how it differs from page01.xhtml. It doesn’t need to differ. I just wanted to show you that it could. On some of my pages in The Wonderful of Wunks – Giant Lava Lamp Adventure, some pages don’t even have words. Your fixed layout ePub will be different based on the number of images and text in your Children’s book.

In Children”s Fixed Layout ePub of iPad – Part 7, we’ll discuss the style.css and the page01.css file.
signature of Judith Tramayne

P.S. If you found this post on making a fixed layout ePub helpful, please leave a comment below and or share it with your Author friends.

Go to Children’s Fixed Layout ePub for iPad – Part 7

 

Related Posts: