Kindle Fixed Layout Tutorial - Part 11
PAGES
Having gotten the support files out of the way, we can now turn our attention to the actual pages of the ebook. From this point forward we will be examining each page of the Basic and Advanced Templates, beginning with the simple image-only content and progressing in stages through increasingly complex layouts, complete with overlays and zoom functions.
Before we begin a short prologue is in order regarding the files required to create the page layouts themselves. As mentioned previously, each page in a fixed layout ebook is contained within a separate HTML file, formatted to the size of the default display as discussed in the section on images above. We will see how this is done in a moment.
The HTML file contains all of the text for that page, and/or links that tell the reading system which images to insert into that page (if any). Each of these content elements are enclosed within a variety of “containers” that can be sized and styled and placed into position using class and/or id tags, such as:
<div id=“container1” class=“fullpage”>
Some content goes here.
</div>
The div is a “division” of the content that functions as a container for that section of content, and can best be thought of as a text box, although it can contain images as well, and even other divs within it. In this way you can visualize each page as a series of containers within containers, each with a definable height and width, and which can be placed precisely on the page. The page itself consists of an all-encompassing div that contains all of the other elements on that page.
We will spend nearly all the remainder of this book looking at the various content elements in a Kindle fixed layout ebook and how to place them on the page. However, before getting to that content, a few things should be pointed out here with regard to how HTML code works for those who have never used it before, since I must assume there will be some of these among the readers of this tutorial. Many lengthy textbooks have been written on the subject, but a few basic facts are all that are required to begin.
Firstly, each of the attribute tags that surround the content elements in an HTML file are references to an entry in the related CSS file that determines how that content should be styled, which includes all aspects of its visual presentation. CSS stands for Cascading Style Sheet, and is a secondary document, or set of documents, that contains all the styling data for these tags. The relevant CSS is referenced from each HTML file, so that the reading system knows where to look for this information.
If you look inside any of the HTML files contained in either of the templates, or in any ebook file, you will see there are two main sections below the namespace declaration: a <head> section and a <body> section. In the <head> section you will find a line containing the <title> (where you simply enter the title of your publication), a <meta> entry which gives the encoding information for the content, telling the reading system what it’s looking at (you don’t need to change anything here), and finally a <link> to the CSS file, such as:
<link rel=“stylesheet” href=“../css/stylesheet.css” type=“text/css” />
The three attributes may be in any order, but each must be present. The only one you need to change, however, is the href defining the link, or location, of the css file. In this case the ../ portion tells the system to begin looking for the file at the root level, since this particular file is in a neighboring branch folder labeled css.
A second general point to make concerns the difference between the class and id tags. These are often confused, and even used interchangeably, but in proper usage the id tag is used to “identify” one specific instance of an element, such as a particular div on a page, and consequently are generally used in fixed layouts to define the size and position of a given element, rather than its visual style (although they can contain some, such as when there is no need to create a whole new class for just that one instance). Conversely, class tags can be applied to any number of elements, and thus contain general styling data, such as color and weight for text, or border style and background-color for containers.
Inside the CSS file you will find something called a CSS Reset. This is a long string of common code elements set to a default neutral value. This is done so as to override any inherent browser settings that might be added if the file is opened in a third-party reader, since many browsers include their own default values. This sets everything to zero so that nothing goes awry. There are many CSS Resets that can be found online, but in Amazon’s samples they include the one from Yahoo! that is found in both of the templates.
Finally, with regard to positioning in fixed layouts, you must use absolute positioning for all divs in order to affix their position, but the content within those containers can have relative positioning, as, for example, to center align a block of text, which can only be done using relative positioning (since its position is inherently relative to the borders on either side). You can, of course, also use absolute positioning for content within a div. We will see a variety of ways to do this very soon, but be aware that this is very often an attribute that trips up even seasoned formatting veterans, since it can throw off everything with wildly unexpected results! If things are just not showing up where they should be, go back and check your positioning values. Chances are you’ll find one that should be the other.
No comments have been added yet.
