Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

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

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.
This chapter is 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.

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

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.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020