Dreamweaver as ePub Editor

dreamweaver-100x100

We recently got the following email from Jim Maivald. Jim is one of the foremost experts on XML and web design. As you can see Jim is on a mission to get more people to use Dreamweaver as an ePub editing program.

Hi. I was just perusing your “Digital Publishing” book and ran across the suggestion of using Dreamweaver as an EPUB editor, p 207. First, I like the book. I hope you get tons of sales.

Second, I love DW as an EPUB editor. I use it all the time. I am a huge advocate to get DW to be Adobe’s official EPUB editor. It offers tons of productivity enhancements that your readers should know about.

Features already in DW:

  • Edits all files used in EPUB, except images, natively.
  • Provides an easy way to access, create, edit and preview CSS formatting. Similar to InDesign in making Paragraph and Character styles.
#2 Create, edit CSS

The New CSS Rule dialog box lets you work with CSS formatting.

    • Offers great trouble-shooting tools for CSS issues or errors.
    • Provides code hinting feature for writing code by hand, if necessary. Otherwise the program can write most of the needed HTML code without ever looking at it.
    • Can help build and edit hyperlinks within document.
    • Supports HTML5 and CSS3 features/techniques already. It’s ready for EPUB3.
    • Has a built-in WYSIWYG “Design” view window that provides pretty accurate preview of HTML and CSS. No need to preview in a browser.
    • Has a “Live” view feature that provides near perfect preview of the final code.
    • The Design view window has a feature that can automatically resize to specified dimensions that can simulate the eReader device, such as 600×800, 800×1024, etc.
#9 Select custom window size

Use the settings to view the document for custom window sizes

  • You can insert images and animations and DW will build the code references properly.
  • It’s interface is similar to InDesign’s, so users familiar with one will already be familiar with the other.

    There isn’t a steep learning curve for InDesign users to understand the Dreamweaver interface for working with CSS styles.

    #2 Interface similar to ID

    There isn’t a steep learning curve for InDesign users to understand the Dreamweaver interface for working with CSS styles.

  • Understands JavaScript so you’re ready to edit or add scripts for EPUB3.
  • Shows any files linked to the open document and allows you to view, edit and save changes to the “linked” files from the parent file without having to open them first.
#13 Shows any files linked to the open document

Dreamweaver shows any files linked to the open document.

But the most important item to know is that few other programs offer all these advantages in one place. Sigil and Calibre can edit the files but they don’t make it easy and you have to do most of the work manually.

DW is not perfect, there are some things it still needs to be become the ideal editor.

Features we still need:

  • Open EPUBs directly within DW without first decompressing.
  • Intelligent awareness and editing of XML metadata files. When you add or remove an image or asset, DW should add or remove the appropriate reference from the manifest and anywhere else it appears. Add a chapter or remove a chapter and similar references should be updated in the sidecar files.
  • Access to available validation services or features within DW.
  • Conversion from one standard to another. For instance, from EPUB to K8 or mobi.

The more people that use and want to use DW as their EPUB editor, the faster this will become a reality.

I hope I can enlist you and Diane in this cause.

Consider us on board!

9 thoughts on “Dreamweaver as ePub Editor

  1. Absolutely, I agree with all of Jim’s points! I dedicated one of my InDesign > EPUB videos on lynda.com to using Dreamweaver as an EPUB editor. The part about “Shows any linked files to the document and allows you to view, edit, [etc.]” is one of my very most favorite features, especially if you’re working with an EPUB with multiple CSS files. So easy just to click the CSS file name at the top of the window.

    A couple more tips to add to Jim’s awesome list: 1) You can create an EPUB workspace that only shows the panels that you need, a la the same feature in InDesign. I find this essential because there are so many strange panels in DW that I do not want to deal with. Look for the Workspace Layout flyout menu way down under the Window menu. 2) If you choose Site > New Site, and point to the OEBPS folder (where all the content of a cracked-open EPUB resides) as the root folder for your “site” then you get a bunch more features, such as being able to use the Local Files panel to navigate the EPUB’s files (instead of the Finder/Explorer) and intelligent link updating throughout that folder.

    One stumbling block that I always forget about, though, is that not everyone owns Dreamweaver. :D If you own it, by dint of Creative Cloud or buying the Creative Suite/Design, then cool. If you don’t own it already, it’s a heckuva lot of money to spend on an epub editor. Just wanted to acknowledge that.

  2. Jim’s points are excellent. It would be especially useful if DreamWeaver considered this feature he mentioned: Intelligent awareness and editing of XML metadata files. When you add or remove an image or asset, DW should add or remove the appropriate reference from the manifest and anywhere else it appears. Add a chapter or remove a chapter and similar references should be updated in the sidecar files.

    It can be frustrating to identify every place you need update if images or assets are removed. The ePub often times will not validate after a change is made if you miss one small change. Sometimes deciphering the validation errors can be confusing.

  3. Pingback: Dreamweaver come editor ePub | Pagina Tre

  4. It’s a brilliant idea, Jim, using Dreamweaver should be the more natural way to build rich and clean epub documents, very better than with Indesign, but let me say: I doubt that Adobe will develop Dreamweaver as the main epub editor: too smart the results in epub3 format, and too big the business with that “dark cloud” service called DPS… Thank you!

  5. Great feedback, but where can I find the steps to save out of Dreamweaver back to the EPUB to K8 or mobi file format?

  6. @Michelle: Assuming you unzipped your ePub in the first place to edit in Dreamweaver, you simply need to re-zip it and it will become an ePub again. On Windows, just zip it back up. On Mac, you need a the zip/unzip utility, which you can find here: http://www.mobileread.com/forums/showthread.php?t=55681

    To convert the file to mobi, it’s a little more involved. There are some things that need to be added to the ePub Files before re-zipping and converting to Mobi. By way of a quick overview, these additions include :

    1. In the content.opf file you must add a section that includes references to the cover and TOC:

    2. The CSS must be minimized. For example, no floats, hanging indents, borders.

    3. Cover image should be 600X800 and a jpg file.

    4. Must have a Navigational TOC and Content TOC.

    5. Title and Creator (author) must be in Metadata.

    Once all these additions are added, zip the file to make it an ePub. Next, open your zipped ePub file in Kindle Previewer where it will be automatically converted to .mobi format. You can find Kindle Previewer here: http://www.amazon.com/gp/feature.html?ie=UTF8&docId=1000765261

    Best to preview directly on a Kindle of possible. The on screen preview is okay, but not as accurate. Also, be aware that the max file size for Kindle is 50MB.

    Hope this helps.

  7. @Sandee
    I agree fully with your your plea.
    Please, Adobe, add all the features Sandee mentioned at the end of his article.

    A comment to the validation:
    There’s an excellent free epub validator:

    https://code.google.com/p/epubcheck/

    Adobe can just take it.

    What I really miss in Dreamweaver (not only for EPUBs):
    A tool which lists all used elements of all documents inside a highlighted folder.

    That’s important for a cleaning/polishing existing EPUBs.

    Something like this:

    span
    span class=”italics”
    p
    p class=”noindent”
    p class=”h1″
    h1
    h1 id=”foo123″
    h1 id=”foo345″

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s