ePub Formatting – How To Create an EPUB With Microsoft Expression Web

There are a lot of ways to make an ePub, but for anyone with HTML and CSS skills, there’s only one best way. What a lot of people don’t realize is that an ePub document is little more than a mini web site.  A good web designer can very easily build a polished and professional ePub using the same HTML editor tool that he or she would use to build a web site. Dreamweaver or Microsoft Expression Web (my favorite) are excellent choices.

Just like a web site, an ePub file consists of pages of XHTML content, a cascading style sheet that controls all formatting and styling, and a folder of images or links to images. ePub readers “view” ePub documents almost the same way that a browser views the Internet.

If you wish to view an ePub’s pages of XHTML or its style sheet, open the ePub file up in an ePub editor. The most widely used ePub editor is Sigil. It is a free download. Just Google “Sigil” to get the download link. When you open an ePub file in Sigil, you’ll see a collection of folders. The first three folders you’ll see are the Text folder (holds the content pages of XHTML), the Styles folder (contains at least one cascading style sheet which control all formatting and styling), and the Images folder (contains all images or links to images).

If you decide to use an HTML editor such as Dreamweaver to build your ePub document, just set up the same folder structure in Dreamweaver the same as is in Sigil. You only need to set up the Text and Styles folder in the HTML editor. You won’t be working with any images in the HTML editor. 

Here is a view of the Text, Styles, and Images folder within Sigil:

ePub Editor Sigil With Text, Styles, and Images folders

ePub Editor Sigil With Text, Styles, and Images folders

Here is a view of the Text and Styles folder set up inside the same directory in the HTML editor (Microsoft Expression Web):

HTML Editor With Text and Styles folder to create an ePub

HTML Editor With Text and Styles folder to create an ePub

Once you have set up the file structure (the Text and Styles folders within the same directory) in the HTML editor, create a stylesheet in the Styles folder of the HTML editor. Name the stylesheet in the HTML editor using the same name that it has in Sigil. You can see that the stylesheet here in both the HTML editro and in Sigil is named stylesheet.css.

You then create your pages of web content in the HTML editor. All styling and formatting must be derived by the stylesheet. Don’t even use the Bold button to bold text. Create a CSS style that bolds text when applied and then always that style instead of hitting the Bold button.

After you have created your web page in your HTML editor, simply duplicate the same pages in Sigil. For each web page you’ve create in your HTML editor, create a new page in the Text folder of Sigil and cut-and-paste the HTML from the HTML editor into that Sigil page.

Once you have created all of your pages in Sigil, insert the images. That is a simple matter of viewing a page within Sigil in the design view, click  the cursor where you want to place the image, and then click the image insert button in Sigil. You’ll select the image on your hard drive or wherever it is stored and it will then be inserted where your cursor was.

Before placing images into Sigil, you should trim the image files to 500 px max in both width and height, downsample to 72 ppi, and convert to RGB color mode if necessary, sharpened, and save them as .jpeg, .gif. or .png.

That’s it! You’ve just created an ePub by hand. There are a lot more touch-ups that you can do at this point, but you’ve done all the heavy lifting. Your ePub document in its basic form is created.

Here is a step-by-step video which will show you exactly how to perform the above steps, and a few others as well. By the end of this video, you’ll be able to create a basic ePub document using an HTML editor (such as Dreamweaver) or an ePub editor (such as Sigil).

I(Is Your Sound On?)

Step-By-Step Video Showing How To Create the Most Customized Possible ePub

If you create your ePubs this way, you will have much more control over the XHTML and CSS than you do with all other ePub creation tools. You’ll be able to customize your ePub in ways that other tools such as Adobe InDesign can’t touch. That is why I create most of my ePub documents with an HTML editor just like the video shows. If you have good HTML and CSS design skills, you most likely will want to use an HTML editor to create an ePub file also. It is not the easiest way to create an ePub, but it will produce a more most polished and customized ePub than any other method, by far.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s