Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Book II

InDesign CC

Chapter 8: Creating Digital Documents Using HTML and EPUB

In This Chapter

Digital document essentials

Alternate layouts for varying devices

Inserting HTML objects

Exporting to HTML

Exporting to EPUB

InDesign was built more than a decade ago as a tool for creating printed documents — not for creating digital documents and electronic books. As of InDesign CS6, however, Adobe added the capability to create digital documents for distribution on tablets, e-readers, and on the web. The overwhelming majority of the new features added to the previous version of InDesign were focused on creating digital documents.

Because publishing on tablets is still relatively new, the workflows, tools, and features are still in their infancy. In some cases, we find the process a bit clumsy — and the tools added to InDesign feel like an afterthought — but unless you want to learn to code HTML5 and CSS3, the Creative Cloud tools are your best bet for getting your content delivered onto a tablet or e-reading device.

Digital documents can be optimized to appear on a variety of devices, and in different formats. In this chapter, we discuss two such formats:

HTML: HTML is emerging as the standard way to distribute electronic versions of documents that are distributed on the web, as web pages, replacing PDF and SWF (Flash) for two primary reasons:

• Unlike PDF and Flash, HTML can be displayed on any device with a web browser.

• The emerging standards of HTML5 and CSS3 allow for content to be customized depending upon the device or browser being used to view the document. For example, a different layout can exist for vertical and horizontal display.

EPUB: Although HTML is becoming the favorite way to distribute documents in a web browser, the standard for electronic books that can be viewed online and offline is EPUB, and in this chapter we also look at creating documents for distribution using the EPUB format.

Adapting Content for Digital Distribution

Creating a digital document requires more than just selecting an output type and pressing the Export button. To make effective documents, you must design them according to the needs of the device upon which they will be viewed.

To do this, you can either design the document’s layout for specific devices, such as an iPad vertical or iPad horizontal layout, using alternative layouts. Alternatively, using Liquid Layout you can create a set of rules that adapt the layout to work on various devices.

Creating Digital Documents

These days, you should intentionally design your documents for digital distribution. If you must adapt a print document for electronic distribution, you should save a copy of the original InDesign document and work on the copy as a dedicated electronic document. Creating an e-pub allows you to distribute books to e-reading devices such as the nook, Kindle, and iPad.

To convert an existing print document to a digital document layout, follow these steps:

1. Open the existing document and choose File⇒Save As and name the copy of the document.

Choose a name that relates to your intended distribution. Consider including terms such as EPUB or iPad in the filename so you can distinguish the electronic version from the print version.

If you’re creating an e-pub document for a book that primarily uses text and that will be viewed on many readers, you can stop after Step 1, because you do not need to specify layout details or device details for specific devices. For e-pub documents that require highly formatted layouts, continue with the following steps.

2. Choose File⇒Document Setup. In the Document Setup window, choose Digital Publishing from the Intent drop-down menu, and select the desired Page Size and orientation (vertical or horizontal).

3. Click OK to close the Document Setup window and then choose File⇒Save to save these changes.

4. Scroll through the document and make adjustments to the layout based upon the available page size. Use the Selection tool to move objects and use the Pages panel to add pages as needed.

5. Choose Window⇒Articles to open the Articles panel. Use the Selection tool to drag items from your layout into the Articles panel, defining the order in which they will be displayed in an e-pub. If you have something that you don’t want to include in the digital version of the book, simply don’t drag it into the Articles panel. Save your document after dragging all elements to be exported to the Articles panel.

Creating alternate layouts

You can create separate horizontal and vertical layouts for your document in the Pages panel. When you export your document to HTML, the document will include information in the Cascading Style Sheets (CSS) that adapts the layout based upon the way it is being viewed.

To create an alternative layout, follow these steps:

1. In the Pages panel, click to select an existing page that you want to adapt for a different layout.

For example, if you have a horizontal layout, and you want to also create a vertical version of the layout, click the horizontal layout.

2. In the Pages panel menu, choose Create Alternate Layout. Name the alternate layout, specify the page attributes, and then click OK.

A new page is created with the alternate layout, and the content from the original page is duplicated and linked onto the duplicate page.

3. Modify the layout of page elements on the alternate layout as needed.

Notice that any text frames and image frames that were duplicated onto the alternate layout also contain a link symbol in the upper-left corner. This indicates that the text and images on the alternate layout are linked to the original. Changes made to the items in the original layout are reflected on the alternate layout. If an item in the alternate layout is different from the original layout, a yellow triangle appears instead of the link symbol. Double-click the yellow triangle, and the item in the alternate layout is then synchronized with the original layout.

Creating liquid layouts

The Liquid Layout feature, borrowed from the idea of Responsive Design in the web design community, lets you use InDesign as a tool for creating layouts that can be adapted to the web. The Liquid Layout feature helps create HTML pages and CSS that adapt to various web browsers and mobile devices.

To use Liquid Layout, follow these steps:

1. Choose the Page Tool and click to select any page that contains some content.

This tells InDesign how each page should be adapted when it is exported to HTML.

2. In the Control panel, locate the Liquid Page Rule section. Select the Scale option to retain all content on your page, even at a smaller page size.

3. Test the Liquid Layout by continuing to use the Page tool to click and drag the page handles and seeing how the objects on the page are modified.

If you selected the Scale option, the page objects should all reduce in size as you reduce the size of the page using the Page tool, simulating how the page should look on a mobile web browser.

Other digital document features

Use these features to add interactivity to your digital documents:

Animation panel: Use the Animation panel to apply animation to objects on your page. For example, you can have an object fade in as the page appears, or fade out and disappear. Access this panel by choosing Window⇒Interactive⇒Animation, and apply animation to individual objects by selecting them and choosing an animation option from the Preset drop-down menu in the Animation panel.

Timing Panel: Use the Timing panel to modify animations you have created using the Animation panel. Access this panel by choosing Window⇒Interactive⇒Timing. Use the Event drop-down list to specify when an object’s animation occurs, and use the Delay option to specify if the animation should wait before it occurs.

Buttons and Forms: Use this panel to convert text or images to buttons that become interactive when the InDesign document is exported to PDF. Access this panel by choosing Window⇒Interactive⇒Buttons and Forms. Buttons can have actions associated with them, so that something occurs when they are clicked. For example, when clicked, a button can play a movie or sound, navigate to a specific page, or print a form. You can also use this panel to convert text frames to text fields, making it possible to create PDF forms using InDesign.

Exporting HTML

Exporting an InDesign document to HTML allows you to share the document on the web so that it can be viewed on a variety of devices. The HTML file created by InDesign can also easily be edited. Just open the file using Dreamweaver. (See Book VI for more on how to use Dreamweaver to open and edit HTML pages.)

To export an InDesign document to HTML, follow these steps:

1. With an InDesign document open, choose File⇒Export.

The Export dialog box appears.

2. From the Save as Type (Windows) or Format (Mac) drop-down list, select HTML. Then find a location on your hard drive or network for the document to be saved. Enter a name for the HTML file in the File Name portion of the Export dialog box.

3. Click the Save button.

The HTML Export Options dialog box appears with the General options available for editing. In this dialog box, you can determine whether you’re exporting only the selection (if you had something selected) or the entire document. You can also map how to handle bullets and numbers.

4. Select Image in the left column to see options for saving optimized images.

Leave the Image Conversion drop-down list set to Automatic to let InDesign decide whether an image is best saved as a GIF or JPEG file or you can specify the format you prefer for all images. This conversion is needed because the file formats used within InDesign may not work within many web browsers.

5. Select Advanced in the left column to determine how Cascading Style Sheets (CSS) are handled — whether you want to use them, or whether you want them to reference (link to) an external CSS style.

For more information on CSS, see Book VI.

6. Return to the General tab along the left side and select View HTML after Exporting if you want the file to open in your default web browser. Then click the Export button.

The file is exported. If you selected View HTML after Exporting, the file opens in your browser. Otherwise, you can now open and edit the HTML file directly in Dreamweaver.

Exporting EPUB

Books displayed using iBooks, Nook devices, Kobo readers, or Sony eReaders all use the EPUB file format. Books displayed on the Kindle begin as e-pub files but undergo an additional conversion process into Amazon’s proprietary Kindle format. The bottom line — if you want to create electronic books, you need to know about creating EPUB files. Here’s how to create an e-pub using InDesign:

1. With an InDesign document open, choose File⇒Export.

The Export dialog box appears.

2. From the Save as Type (Windows) or Format (Mac) drop-down list, select EPUB and then find a location on your hard drive or network for the document to be saved. Enter a name for the EPUB file in the File Name portion of the Export dialog box.

3. Click the Save button.

The EPUB Export Options dialog box appears with the General options available for editing. Here is an overview of essential settings in the General tab when creating an e-pub:

• Version: If you are exporting an e-pub that contains multimedia, choose EPUB 3.0. Otherwise, you can use EPUB 2.0.1. Although Adobe offers a proprietary EPUB 3.0 with layout option, this isn’t compatible with most popular reading devices and should be avoided unless you have a specific need to export using this format.

• Cover: If you want InDesign to generate the cover image displayed for the e-pub, choose whether it should use the first page of the document or choose a specific image file to use instead if the cover artwork is stored separately on your hard drive or network.

• Navigation: Choose TOC Style if you want InDesign to automatically generate a table of contents that will be used by readers to more easily navigate the e-pub file.

• Margins: Specify any padding you want between the text and the outside edge of the reading device.

• View EPUB after exporting: Causes the e-pub to open and be displayed in the default EPUB reader after InDesign generates the e-pub file.

4. Click the Image tab in the EPUB Export Options dialog box.

In the Image tab, specify the resolution that images should be set at when created for the e-pub. Also specify the location of images on the page, and any space that should be placed before or after images.

5. Click the Advanced tab.

Make these adjustments as needed in the Advanced tab before creating the e-pub:

• Split Document: If you want to split a long document into individual chapters, choose the Paragraph Style to determine where each section should be divided. Otherwise, keep this at the default option of Do Not Split.

• EPUB Metadata: Document metadata is used by EPUB readers to describe the book title, publisher, ISBN, and other information. You can enter the Publisher here and the ISBN number for your book in the Unique ID field.

• CSS Options: If you have created Cascading Style Sheets (CSS) to control the formatting for your EPUB files, you can add a style sheet. Otherwise, you can have InDesign add style definitions and create a CSS file by selecting the Include Style Definitions check box. Under this same option, deselect Include Embeddable Fonts because many electronic reading devices ignore them, and some electronic book stores will reject files that contain embedded fonts.

Additional document metadata can be entered in the Document Information field. Access this by choosing File⇒Document Information.

6. Click the OK button.

The e-pub is generated. If you selected the View EPUB after Exporting check box, the EPUB file opens using your default EPUB reader.

If the EPUB Export Options dialog box looks similar to the HTML Export window, it is because e-pubs actually use HTML as their foundation. Electronic book readers are essentially specialized browsers designed to display books formatted using HTML and CSS. All the HTML and CSS content for an EPUB file is contained within the compressed folder named with the EPUB file extension.