Contents

Chapter Description

InDesign was originally built to create print-based documents, but it now has the ability to export and import XML and export XHTML. But it isn't foolproof. As you'll see in this chapter, InDesign styles are a crucial component of this capability.

From the Book

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.

What’s XHTML?

While you may be familiar with HTML, InDesign exports only XHTML. So, what’s the difference? XHTML (Extensible Hypertext Markup Language) offers all the capabilities of HTML but follows the stricter syntax rules of XML (Extensible Markup Language). In other words, the main difference between a Web page written in HTML and one written in XHTML is that the XHTML page will feature clean, properly structured code elements. In fact, sloppy, improperly structured code that would still function as an HTML page will often cease to work in a browser expecting to see “strict” XHTML. Visit http://www.w3schools.com/html/html_xhtml.asp
to learn more about XHTML.

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.

TIP

A word of advice to non-Web designers: Keep HTML filenames short and exclude spaces and punctuation marks other than hyphens (-) and underscores (_).

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.

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.

NOTE

While most Web designers prefer to use external CSS files, you can save a lot of time by first choosing the Empty CSS Declaration option. InDesign will create the rule list for you. Then it’s an easy matter in Dreamweaver to move the entire list to an external file.

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.

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.

The ABCs of CSS

InDesign users have a full toolbox of paragraph, character, table, cell, and object styling to format almost everything within a document. Web designers have only Cascading Style Sheets (CSS).

But don’t feel bad for the Web designer. CSS features all the power of paragraph, character, table, cell, and object styles combined, and more! CSS also offers contextual formatting, which InDesign can’t (yet). This means you can insert a paragraph element in the header section, and it’s automatically formatted with the header settings. Then you can insert the same paragraph in the footer section, and it reformats to the entirely different footer settings—all without changing anything other than its location in the layout.

HTML and XHTML consist of fewer than 100 code elements. These elements are responsible for creating Web page structures and for rudimentary formatting of text and objects. To accomplish this, each element comes with a built-in collection of default formats and settings.

For example, the <p> code element creates the structure of a paragraph and formats it automatically with font settings, color, alignment, and so on. In most browsers the text will be black, aligned to the left, and probably formatted to be Times or Times New Roman, 12pt.

The power of CSS is its ability to redefine the default settings and even add some of your own. Let’s say you wanted to make all the paragraphs in a Web page display in red. The CSS rule would look like this:

p {
color: red;
}

Then you decide that some paragraphs should display in blue but only those that appear in tables. No problem; simply create a compound CSS rule like this:

table p {
color: blue;
}

There are situations where compounds won’t be enough, so CSS allows you to add exceptions to each element and compound with the use of attributes called “ids” and “classes.” An id is a unique identifier that should be used only once per page, whereas classes are like categories that can be used multiple times on each page, like styles in InDesign. These attributes can be applied directly to the element, such as <p class=“sidebar”>, or more commonly to the containing <div> element, such as <div class=“sidebar”><p></p></div>

You identify an id modifier in CSS rules by using a hash mark (#) and a class modifier with a period (.), such as:

#header p {
color: green;
}
.sidebar p {
color: orange;
}

With these four simple rules, one tag has been formatted in four completely different ways, yet there’s no modification made to the <p> element used in the code. Simply insert the paragraph into the location context defined by the rule, and the color will change based on whether it is in body text, a table tag, header id, or sidebar class.

Considering there are dozens of books of more than 200+ pages describing all the capabilities of CSS, this humble sidebar can’t do the subject justice. So check out www.w3schools.com/css for a quick tutorial on CSS.

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.

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).

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.

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).

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.

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.