Working With Styles, CSS, and XML in Adobe InDesign CS4

This chapter is from the book

Adobe InDesign CS4 Styles: How to Create Better, Faster Text and Layouts

Learn More Buy

This chapter is from the book

This chapter is from the book 

Adobe InDesign CS4 Styles: How to Create Better, Faster Text and Layouts

Learn More Buy

IN THE PAST, a discussion of Web applications for InDesign documents would have been limited to an overview of the program’s PDF or JPEG export features. InDesign was originally built to create print-based documents, pure and simple. But things change. The ability to export and import XML was added in InDesign CS. The ability to export XHTML (see the sidebar “What’s XHTML?”) was added in CS3.

The ability to move content from print documents to the Web has advanced well beyond simple copy and paste. But before you get too excited, it doesn’t mean that doing so is either easy or foolproof. And, as you’ve probably already guessed, InDesign styles are a crucial component of this capability.

Before discussing the methods for exporting content to XHTML and XML, let’s first address any expectations you have of these features. If you’re expecting InDesign to create a replica of your print document for the Web, you’ll be heartily disappointed. If you need a re-creation of your layout, stick to the PDF and JPEG export filters.

Export for Dreamweaver

You’ll find the Export for Dreamweaver command in the File menu. Although it would be more accurate to call it “Export to XHTML,” in a way, this feature is aptly named because it identifies the crucial role Adobe Dreamweaver plays in the process. To achieve a truly usable result from this feature requires the able assistance of Dreamweaver or some other HTML editor. This section focuses primarily on items within this feature that relate to styling and formatting. For a complete description of the Export for Dreamweaver capabilities, see InDesign’s Help file.

Choose File > Export for Dreamweaver to begin the process of exporting to XHTML. In the Save As dialog, which opens after you select the command, name the file and click Save.

InDesign adds an extension (.html) to the file automatically. Feel free to change the extension in the dialog to suit your own needs. InDesign will honor any manual alteration and then remember your preferred extension during subsequent export operations.

After saving the file, the XHTML Export Options dialog opens (FIGURE 10.1). Within the dialog are three categories—General, Images, and Advanced; each offers options to help specify the kind of XHTML to create, but the amount of tweaking you can do is not extensive.

Figure 10.1 The options listed within this dialog help create the desired XHTML structure and formatting.

GENERAL OPTIONS

In the General section of the XHTML Export Options dialog, you can control which parts of the file are exported and how bulleted and numbered lists are mapped or converted.

Export. Choose Document or Selection to export an entire document or merely items selected within the document. Items can be chosen with either the Selection or Text tools. If nothing is selected when the command is activated, the Selection option is grayed out and the entire contents of the document are exported by default.

Using the Text tool you can target specific paragraphs, words, or even characters that you want to export. It can export only one story, or a portion of story, at a time.

Use the Selection tool to select multiple text and graphic frames. It’s important to know that InDesign exports all the contents of a selected text frame, including text in threaded frames on other pages.

When graphics are selected, or are anchored in selected text frames, InDesign exports them along with the text. Unfortunately, this doesn’t include graphics or graphical objects created within the program or pasted into the layout from other programs. Only graphics listed in the Links panel can be exported to XHTML.

Be cautious when you choose to export the entire document, because the option does export almost everything in the file—often in a jumbled mess that may be more trouble than it’s worth.

Bullets and Numbers. As every Web designer knows, HTML can generate bulleted and numbered lists automatically. InDesign can format lists with bullets and numbers, too. The export filter allows you to map the InDesign-based formatting to the method used in HTML.

• Bullets. Choose Map to Unordered Lists from the drop-down menu when the bullets are in consecutive paragraphs. Bullets formatted with special glyphs or custom fonts will be replaced by standard HTML bullets.

Choose Convert to Text when the bullets in the document are scattered in nonconsecutive paragraphs. This option converts the bullets to actual characters in the text. However, use this option with care. If you’ve chosen custom bullet characters, like there’s no telling how they will be converted. When in doubt, it’s best to use the unordered list option.

• Numbers. Choose Map to Ordered Lists from the drop-down menu when your numbered paragraphs are consecutive. Like InDesign, HTML lists will update automatically when you add or delete list items.

NOTE

When it comes to elaborate numbering schemes employing indentation and mixtures of Roman, Arabic, and alpha characters, there is good news and bad news. The Ordered and Static Ordered options will preserve the indentation of such lists but display all numbering in Arabic characters by default. On the other hand, Convert to Text preserves the numbering scheme exactly as it appears in InDesign but drops the indentation. Fortunately, you can use Cascading Style Sheets (CSS) to address both issues (see the sidebar “The ABCs of CSS”).

Choose Map to Static Ordered Lists when the numbers are scattered through the document or when the paragraphs are consecutive but you want to freeze the numbering as is. This option generates class and value attributes to specify what number to use for each paragraph. In this case, numbers will not update automatically when you add or delete items from the list.

Choose Convert to Text when you want the actual numbers inserted in each paragraph.

IMAGE OPTIONS

As described earlier, InDesign can export linked graphics. The Images category of the dialog (FIGURE 10.2) provides options for exporting graphics and images. It basically does so by converting InDesign-based link information to be compatible with HTML. It can also create Web-compatible (GIF and JPEG) versions of each graphic when you select Optimized from the Copy Images drop-down menu. If you allow InDesign to handle the image conversion for the Web, there are two main concerns pertaining to styling:

• On export, InDesign converts the object style name to a CSS class attribute and assigns it to the <div> element containing the HTML graphic reference. It happens automatically when a style is used, and the only way to prevent it from happening is to remove the object style from the frame before exporting. The class will also be added to the CSS declarations if you choose to export them as described in the following “Advanced Options” section. The class attribute that is created may come in handy for formatting the images for the Web.
• Whenever the Optimized option is selected from the drop-down menu, you’ll notice that the Formatted check box will become selectable. Choose this option whenever you want to preserve the cropping or other effects applied to linked images within InDesign.

Although the ability to export linked graphics is handy at times, you may find that you end up creating most of the Web graphics manually outside of InDesign. If this is the case in your workflow, be sure to select Link to Server Path in the drop-down menu so that InDesign inserts an HTML-compatible reference to the image in the code.

Figure 10.2 Select the Formatted check box if you want to include cropping and other effects, like drop shadows, too.

ADVANCED OPTIONS

The heavy lifting (styling) happens in the Advanced category of the XHTML Export Options dialog (FIGURE 10.3). Choose Empty CSS Declarations to convert the text and object styles to CSS-based classes. No CSS does exactly what it says: nothing. Choose External CSS if you have an existing CSS file, and enter the name and path in the available field.

Figure 10.3 The Advanced options in the XHTML Export Options dialog.

CSS Options

Choose Empty CSS Declarations or External CSS to make InDesign convert and export all paragraph, character, table, cell, and object styles as CSS classes (see the sidebar “The ABCs of CSS”). If you select the option Empty CSS Declarations, corresponding CSS rules will be generated (without any styling information) and inserted automatically within the <head> region of the XHTML file. Select External CSS and InDesign exports the content but only links the XHTML to an external CSS file. You are responsible for creating the CSS file and the necessary CSS rules.

Choose No CSS when you want to create your own formatting based on criterion other than styling. Text will be exported using plain <p> tags, and any references to style names from InDesign will be discarded. If you don’t use paragraph, character, table, cell, or object styles at all, just choose No CSS, because there’s nothing to export anyway.

The JavaScript Options don’t involve styles so we’ll skip it.

A simple flyer demonstrates the potential results of exporting from a document that doesn’t use styles but has all formatting applied manually. The formatting and positioning are not retained. The options used to export the XHTML are shown in FIGURE 10.4.

Figure 10.4 XHTML export options (right) cannot fix this layout for the Web.

The results of exporting an unstyled InDesign layout as XHTML are far from impressive. In Dreamweaver’s Design view, the text shows no formatting whatsoever, and the picture has been moved to the bottom of the layout (FIGURE 10.5).

Figure 10.5 Unformatted text and incorrect picture position are possible results of exporting an unstyled layout.

In Code view, you can see how the <div> elements correspond to various text and graphic frames from the InDesign file (FIGURE 10.6). Being able to switch from design to code quickly in one program demonstrates vividly why Dreamweaver is an essential part of your workflow. You could easily fix the code problems in Dreamweaver, but it’s more effective to create layouts in InDesign that are compatible to the requirements of the Web from the beginning.

Figure 10.6 Styled text and picture frames from the InDesign file correspond to <div> elements in the exported code.

p {
color: red;
}

table p {
color: blue;
}

#header p {
color: green;
} 

.sidebar p {
color: orange;
}

CREATING WEB-AWARE LAYOUTS

A close look at the exported code in the preceding section tells you a lot about how InDesign creates XHTML (see Figure 10.6). Basically, it starts at the top of the layout and works toward the bottom of each page, working from left to right. Frames (text and graphic) are converted to <div> elements, and their entire contents are exported before it deals with the next element. Graphics that are not inserted (inline or anchored) in the text are exported separately and may end up anywhere in the code. If an InDesign document isn’t structured from the beginning to be “Web-aware,” all the CSS in the world won’t be able to help it. On the other hand, a few minutes in InDesign can save you hours of work in Dreamweaver.

To create a more Web-aware layout, a bit of modification to the original design is required:

• Wherever possible, link text frames together to create a single text flow. Connect any free-floating heading frames to their stories, and daisy-chain stories together if they relate to a single topic or will be sharing space in the final Web page.
• Don’t embed graphics or create essential illustrations within InDesign that you want in the XHTML. Create them in other programs and save them as independent graphics first, and then place them into InDesign as links.
• Insert all Web-bound graphics inline or anchored at the appropriate position in the text so they are part of the text flow.
• Preserve the existing styling; format text and graphics by using paragraph, character, table, cell, and object styles.

These simple procedures will pay dividends in the long run by creating more effective XHTML structures, achieving much better code, and saving you time in Dreamweaver (FIGURE 10.7). For future projects, incorporate these techniques during document production. So when you’ve finished the layout, the document will be ready for XHTML as is.

Figure 10.7 The differences when exporting from a Web-aware layout versus its counterpart are obvious. This exported XHTML page is ready to be formatted by CSS.

DEFINING CSS RULES

When XHTML is created from a styled document and you choose to export Empty CSS Declarations, all the text-based styles as well as object styles are converted to CSS classes and inserted as a block within the <head> element. To comply with Web standards, the style names are reformatted in lowercase and spaces are replaced with hyphens (FIGURE 10.8).

Figure 10.8 InDesign converts paragraph and character styles (left) into properly structured but empty CSS rule elements in Dreamweaver (right).

To edit the CSS rules, double-click on the one you want to change. When the CSS Rule Definition dialog opens, select the options you want to apply. But don’t be fooled by all the empty fields in the dialog (FIGURE 10.9). An empty field doesn’t mean there isn’t a setting. Most HTML elements come with a full set of built-in formats, or default specifications.

Figure 10.9 Dreamweaver’s CSS Rule Definition dialog allows you to create and edit CSS rules.

While it may seem at first an inconvenience to build Web-aware layouts, it only takes a few minutes at most and it really doesn’t affect your design options or what you can achieve. The combination of a Web-aware layout in InDesign and a set of well-defined CSS rules can produce far more desirable results more quickly (FIGURE 10.10).

Figure 10.10 The resulting XHTML layout viewed in Dreamweaver.

Creating and editing the CSS rules in your XHTML file can be fun as you experiment with different settings. But here’s a warning to the novice Web designers: You’ll discover that what looks fine in one browser can look horrible in another! Sometimes the variations between browsers are dramatic, even unsettling.

Print designers are accustomed to text and objects remaining where they put them and how they formatted them. On the Web, all bets are off. Until you’re more familiar with CSS, a guiding principle for Web design is to keep it simple.

GLASS CEILINGS AND BRICK WALLS

For the near future, using InDesign to create usable Web pages is more of a parlor trick than a true workflow. While it’s relatively easy to obtain usable results from one- or two-page documents, attempting to export an entire newsletter of three or more pages all at once is an exercise in aggravation. This is especially true for multipage and intricately designed documents, because you may find yourself spending too much time in Dreamweaver cleaning up the results.

A better process is to export one page, or spread, at a time to create individual, self-contained Web pages. Be aware of stories that continue on other pages (FIGURE 10.11) and confirm that all linked text flows are exported completely.

Figure 10.11 Multipage documents may have text links that need careful attention on export.

There are simply too many impediments to using this basic export process for professional, high-end workflows. Some of the limitations revolve around InDesign’s inability to adapt content to any HTML elements other than <p>, <div>, and <span>, as well as its dependence on formatting based on ids and classes. Besides being limiting, it doesn’t conform to current best practices for the Web.

Yet with two improvements, the Export to Dreamweaver feature could provide real productivity gains. An interface that would let users choose how styles are mapped to HTML elements and the ability to manipulate the XHTML structure before it’s exported would be ideal. You can, however, already do that in InDesign with XML.