Update – August 2016: I just wanted to note that I now format all my ebooks using Sigil. It’s a free ebook formatter, that has all the advantages of Dreamweaver (Clean code, directly edit html etc), but also will compile an NCX table of contents, and other ebook specific formatting. I highly recommend you download it and try it out.
*NOTE: After a few formatting issues after Amazon recently changed their conversion process for the KF8 format, I realised that I was missing some coding in the style sheet. I’ve changed the code below to reflect this. For more details about what was happening, check out this post.
There is a lot of advice around the web on formatting kindle ebooks. Some people say never use Word, others say word Works fine. Some say do all of it in HTML. Some suggest using other programs (such as Calibre). I don’t know about you, but I found most of it confusing! I can’t say that my way is the best way, but it worked for me, and seems to have produced an ebook with no formatting errors.
Why not just use Word?
I tried converting word to filtered HTML (as per the instructions on the Kindle Direct Publishing help page), and tested it using the Kindle Previewer (which I 100% recomend downloading and installing), and it transferred pretty well for a book that was mostly text. But the bloating that remained due to Word’s messy HTML just bugged me. And one version did show large segments of text italicised at one point (though I couldn’t replicate this a second time?)
Why Dreamweaver?
I wanted a different option. One that was somewhere between completely coding my novel in HTML, and letting Word do all the coding. I picked Dreamweaver because:
* It has a reputation for generating clean HTML
* It allows you to switch between editing the raw HTML, or WISWIG (what you see is what you get) editing. I like to have a split window, showing both at the same time.
* I could shortcut some of the tedious HTML coding by using the Dreamweaver commands, and enter in Kindle specific formatting using the code editor.
* I could download it free using the Adobe Cloud subscription I have for work
The Process:
Creating the document:
First, I created a new document, which puts in the necessary HTML tags such as the head and body tags (head is for commands people won’t see, body is for your actual text).
Adding the novel:
Then I copied and pasted my text, chapter by chapter, from Word, into the design view window.
I did it chapter by chapter mostly because Dreamweaver objected to the size when I tried to do it all at once. I have no idea what size it considers acceptable for a webpage, but apparently it’s less than 97,000 words! Doing it chapter by chapter though, allowed me to add in the images for my chapter headings (using the Insert->Image command), and to make sure there was a page break (by pasting the kindle specific tag <mbp:pagebreak/> into the code window) between each chapter.
Copying it into the design window (instead of the code window) turned Word’s curly quotes into the correct HTML codes (“ etc). It didn’t unfortunately, copy paragraph tags properly, using the </br> tag rather than <p> and </p> tags. These I fixed by using a find and replace in the code window.
Then I set a CSS style by pasting the code
<!– CSS –>
<style type=”text/css”>
<!–
.tab { text-indent: 1EM; }
–>
</style>
I selected the paragraphs in bulk, and applied the style (by selecting the option in the properties tab at the bottom of the window). I choose the 1M indent, as I read that it was the industry standard. It is set at the width of the letter M, and thus will adjust with text size.
To avoid the indent on the first paragraph of each chapter or after a scene break, use the command <p style=”text-indent:0″> in place of the <p> tag at the beginning of the paragraph.
Kindle specific bookmarks:
Paste the code <a name=”start” /> at the beginning of your first chapter. This will enable the user to click on the ‘Beginning’ link on the kindle. It will also take the reader directly to the first chapter when they open your book for the first time.
<a name=”toc” /> does the same thing for your table of contents.
Note: These won’t work in the kindle previewer or the .mobi file it complies, but will work once you’ve uploaded.
Creating a Table of Contents:
First, you need to set the bookmarks that the table of contents refers to. Click at the beginning of your chapter, then use the Insert->Named Anchor command to add in each bookmark. Name them something easy to remember. I called mine ‘Ch1’ etc.
Then type in each chapter in a list wherever you want your table of contents. I’ve put mine at the back, and used line breaks (</br>, or shift->enter) to keep them closer together and use less space). Highlight each chapter, and use the Insert->Hyperlink command. This opens up a little box and the only part you need to worry about is the ‘link’ field, where you choose the appropriate link from the drop down box.
And that’s pretty much it. Download the Kindle Previewer, check that it all looks good (especially check that all the paragraphs are indented properly, I managed to miss a few in my find and replace). I recommend downloading your book (using the .mobi file the previewer will create in a subfolder) to your kindle or other reading device, and doing a final proofread before uploading.
A couple of issues I noticed. In some formats, the Kindle Previewer cuts off the edges of some images. This seems to be a problem with the previewer, and doesn’t translate to the final ebook. The other one I’ve noticed is that the beginning and table of contents links in the .mobi file that it produces doesn’t work in the previewer, but they do once your ebook is uploaded.
Oh my goodness! I came on to your blog today to say how much I adore the formatting of your ebook (I finally got my iPad at the weekend and yours was the first book opened!). It looks gorgeous! It made me envious and wondering how I could recreate it for my books. Then I came across this post and just, well, shrugged! 🙂
I don’t ‘do’ HTML. I probably could if I gave myself the time to learn it (I once got 85% on a programming entry exam, so that kind of thinking must be in my brain somewhere). I may even have Dreamweaver on one of my old laptops, as I borrowed a copy from someone to build my website, then abandoned it when I couldn’t figure out how the software worked.
So anyway thank you for sharing how you did it and maybe, one day, when I’m feeling brave, I’ll come back to this post and see if I can have a go myself! 🙂 In the meantime I’ll stick to my Word way, clunky and horrible as it is.
Thanks! Dreamweaver is a bit confusing when you first look at it! I nearly gave up initially. If you can find an old copy, when it was still owned by Macromedia, I’m sure it was a lot simpler to use. HTML is pretty simple though, you just need to look up commands when you need them. Although with the new CSS and stuff (which isn’t so new, probably a sign of how long it is since I’ve done much with HTML!) is a lot more confusing.
Thank you! Exactly what I was looking for!
Glad I could help!
Thank you for keeping me from tearing my hair out with trying to make the very clunky and messy Word give me a nice layout and clean code!
Your tips worked perfectly! The indent style was actually not even needed: I uploaded it just with the paragraphs and the indents happened automatically.
And yes, the downloaded previewer works much better than the online one.
I’ve used h1 tags for the chapter headings and h2 for the subheaders and they both are too big compared to other books. So I’ll par it down a notch and see if I like it better. Any tips for header sizes?
Thanks again!
I’m glad it helped Marita.
I used images for chapter headings, so I didn’t play around with the sizes too much. I think that they get smaller as you go down, so you could try h3, 4, or 5. Alternatively, you could probably specify the text size etc using CSS?
Thank you for this amazing article. I have tried formatting my book using Calibre and Smashwords and it has never come out right. I am going to try the Dreamweaver way now having looked at your book on Amazon. It is so beautifully laid out. Well done.
Thanks! Glad to hear you liked it. Good luck with getting your book formatted exactly the way you want.
Hi Rinelle, the problem with the headers is that it’s hard to figure out how they will display in relation to the the rest of the text. If the reader changes the font size, will it also change the headers?
I guess what I’m having trouble with is to figure out what the default sizes are for the header tags in Dreamweaver. Not sure which size to start with.
I believe that they are proportionally larger to the text, so if they change text size, the headers should change as well. You would be able to set the sizes in styles, though I haven’t tried to do it.
I use this in my css file with the following reference link in your file above the title tag.
You can change your font sized or family to suit yourself
h1 { font-size:5em; font-family: Goudy Old Style; color:#E8B30D; text-align:center; margin:0px 0px 5px 0px; } /* color yellow */
h2 { font-size:18pt; font-family: Times New Roman, Times, serif; color:#2d4b4c; text-align:center; margin:5px 0px 5px 0px; } /* color sage */
h3 { font-size:14pt; font-family: Times New Roman, Times, serif; color:#e68a00; text-align:left; margin:5px 0px 5px 0px; } /* color orange */
h4 { font-size:12pt; color:#298A08; text-align:left; font-family: Times New Roman, Times, serif; font-weight:bold; margin:5px 0px 5px 0px; } /* color sage */
h5 { font-size:12pt; font-family: Times New Roman, Times, serif; color:#A72104; text-align:left; font-weight:bold; margin:5px 0px 5px 0px; } /* color red */
h6 { font-size:12pt; font-family: Times New Roman, Times, serif; color:#530884; text-align:left; margin:5px 0px 5px 0px; } /* color brownish/red */
h7 { font-size:12pt; font-family: Goudy Old Style; color:#1f7a1f; font-weight:bold; text-align:left; margin:5px 0px 5px 0px; } /* color green */
h8 { font-size:12pt; font-family: Ariel; color:#A72104; font-weight:normal; text-align:left; margin:5px 0px 5px 0px; } /* color brownish/red */
h9 { font-size:12pt; font-family: Ariel; color:#bf4080; font-weight:normal; text-align:left; margin:5px 0px 5px 0px; } /* color purple */
h10 { font-size:12pt; font-family: Ariel; color:#600080; font-weight:bold; text-align:left; margin:5px 0px 5px 0px; } /* color brownish/red */
Thanks! I’ll have to give that a try.
Thanks for a great post. I have decided to try Dreamweaver to help format the addresses in my book of letters, Dear Codebreaker. The InDesign export to EPub just did not carry forward that formatting. I have never used Dreamweaver before so your detailed post is a great boost. Thanks
I did fine the epub less forgiving than mobi files, but that was because I hadn’t been consistent in my formatting. Dreamweaver does do a great job though, once you figure it out.
Thank you and muchisimas gracias! I have dreamweaver on my desktop mac and had stopped using it. I have been going crazy using all the suggested programs for my ebooks. Dreamweaver, here I come!
Good luck with it! Hope it comes together for you.
Thanks for an extremely helpful post! Just what I was looking for. Quick question: in Dreamweaver, did you save your original file as *.htm or *.html before looking at it in the Previewer?
Hi Kathryn. I saved them as whatever the default is. I just checked, and they’re .html. I have used .htm files (from word), and they work fine too, so I don’t think it matters.
Thanks, Rinelle! I followed your instructions and made my first (very small) Kindle book. I am so excited to know how to do this. Thanks again!
Congratulations! Glad the instructions helped.
So glad to have run across this. Thank you for sharing this helpful info. I am fairly proficient in Dreamweaver and I believe that I will give this a try!
I too use Dreamweaver for doing ebooks. Simply edit the InsertOfficeDoc.js file with any text editor to change the file size limit for importing. Link below gives you details on where to find the JS file. While it can take a while to do the import of a large Word doc, I haven’t run into any word doc that I couldn’t import after increasing the size limit. Handled the Word TOC and bookmarks just fine as well in Dreamweaver.
http://www.jdhodges.com/blog/dreamweaver-document-too-large-copy-past/
Thanks Shawn. I’ll definitely give that a go next time.
I began formatting an eBook in Word, after my mortification of the results when Kindle tried transforming the PDF file of the print edition. Close, but I thought I’d try Dreamweaver. It sounds feasible, but size should graphics be? Width, height, etc? I was hoping to have a full-page graphic on the title page … but I’m not certain what constitutes a full-page in eBooks.
Do you create Page Breaks, as it is suggested in word? Or do you just let everything flow as one big document?
I made the graphic headers for my book 800 pixels wide, and this seems to fit nicely on the page in the previewer (I obviously can’t test it on all the possible systems). Height is a little more difficult, as there is a huge variety of different aspect ratios on the different kindle devices.
I create page breaks between chapters, or else your chapters will start as soon as the previous one ends.
Hello Rinelle,
just came across your very helpful comments. I have started Dreamweaver and seem to struggle through it.
Apart from formatting one Q: does Kindle or KPD offer a paperback version as well and if so does it build on the HTML version? I have designed the paperback/hardback version in IN Design which looks very good and I would prefer to keep it that way.
My book consists of 350 pages 6×9 format (don’t know how to do it yet in Dreamweaver) entitled: The Uncommon Monk – A Soul Searching Confession – Autobiograpy
Hope I didn’t trouble you.
Best wishes Arjuna
Hi Arjuna. The paperback book is completely separate from the kindle book, and you upload them separately. Definitely keep your InDesign version!
I am actually using sigil to create my ebooks now, as it is similar to dreamweaver, but has a lot of functions specific to ebooks, such as allowing you to directly create a NCX table of contents.
Hi Rinelle. I found you by looking for help creating an ebook with Dreamweaver which is what I use to make my website. I am NEW to ebooks! I’d like to create an in-depth “more information” ebook to give free to certain paid clients now, with the idea of publishing it later for retail purposes. I understand you are using sigil to create your books now and am not opposed to using it. I am entirely familiar with Dreamweaver but do not yet fully understand the requirements for ebooks especially dimensions for the page, if there are any.
I am trying to wrap my head around how to do this and I’m hoping this is a question you can answer. Can I use sigil (or Dreamweaver if I get what I need to know), upload the ebook to my server and offer my elite clients a link for free download on my site until I sort out publishing it?
Any help you could offer would be Enormously helpful as I am on a bit of a deadline. Got clients waiting in the wings!
Thanks, Leesa
Hi Lessa. Ebooks are pretty much exactly like webpages. They’re one long ‘page’, that gets divided up dependent on the screen size of the ereader or device the book is read on. You can use page breaks to force a new chapter onto a new page, or in Sigil, a new file. Ebooks come in two formats, .epub, which is the standard, and .mobi which is Amazon’s proprietary format. Epub is the most versatile format, so if you only include one, I’d make it epub.
I’d really recommend downloading Sigil and having a look at it. You’ll find that it’s quite similar to dreamweaver in a lot of ways, but it allows you to do epub only things, like include a table of contents with the touch of a button, set the cover with all the right formatting, and edit the ebooks metadata easily.
Hi Rinelle, thank you so much for all the information. I really appreciate your insight and will definitely download sigil.
Once I create the ebook on sigil will I be able to upload the file to my server and offer certain clients a link via email for free download from there until I sort out actually publishing it?
Thanks again,
Leesa
Yep. That would work!
Really want to say THANK YOU, Rinelle. Many times I’ve reached out on sites similar to yours for help with various issues with no response whatsoever. Your sight is easy to read, understand and your advice is the same.
Thanks again,
Leesa
That’s no worries! Glad I could help.