Start learning with our library of video tutorials taught by experts. Get started

InDesign CS4 Beyond the Basics
Illustration by

Exporting to XHTML


From:

InDesign CS4 Beyond the Basics

with David Blatner

Video: Exporting to XHTML

Okay, enough talking about all that print stuff. I mean, come on, who prints anymore? No, I am just joking. Print is great, but these days, people also need to publish on the web and that means we need HTML export or more specifically XHTML. If you don't know the difference, let's just say XHTML is like a more pure version of HTML. Now, one of my biggest frustrations with InDesign is that you cannot easily import HTML files. You can kind of fake it with XHTML import, but it's not pretty. You can however export XHTML pretty easily by going to the File menu and choosing Export For Dreamweaver.
Expand all | Collapse all
  1. 2m 11s
    1. Welcome
      1m 3s
    2. Using the exercise files
      1m 8s
  2. 25m 16s
    1. Reviewing Control panel shortcuts
      8m 34s
    2. Managing panels
      6m 14s
    3. Letting InDesign do the math
      2m 52s
    4. Using Selection tool clicks
      1m 39s
    5. Using Quick Apply shortcuts
      3m 2s
    6. Setting up context shortcuts
      2m 55s
  3. 23m 51s
    1. Using column guides
      3m 42s
    2. Formatting and positioning guides
      5m 15s
    3. Setting first baseline options
      5m 30s
    4. Using the Document grid
      3m 13s
    5. Setting bleeds
      3m 3s
    6. Using slugs
      3m 8s
  4. 48m 2s
    1. Shuffling pages (or not)
      2m 47s
    2. Scaling objects to a specific size
      2m 32s
    3. Aligning objects to a page
      4m 41s
    4. Using advanced libraries
      4m 5s
    5. Using advanced anchored objects
      11m 21s
    6. Setting non-printing objects
      3m 10s
    7. Creating notes
      5m 23s
    8. Using Data Merge
      10m 41s
    9. Creating templates
      3m 22s
  5. 39m 32s
    1. Creating polygons and starbursts
      2m 35s
    2. Setting custom stroke styles
      5m 15s
    3. Using advanced effects
      8m 46s
    4. Making masks in InDesign
      4m 10s
    5. Integrating InDesign and Illustrator
      4m 59s
    6. Setting compound paths
      5m 4s
    7. Using advanced clipping paths
      6m 6s
    8. Using advanced image transparency
      2m 37s
  6. 55m 26s
    1. Using advanced text formatting
      5m 37s
    2. Using other languages
      4m 22s
    3. Setting advanced paragraph numbering
      3m 12s
    4. Using GREP to find/change
      6m 54s
    5. Managing glyphs
      5m 6s
    6. Finding and changing glyphs
      2m 39s
    7. Adding footnotes
      7m 57s
    8. Creating outlines
      3m 39s
    9. Setting conditional text
      9m 16s
    10. Creating cross-references
      6m 44s
  7. 33m 3s
    1. Advanced text importing
      7m 49s
    2. Using Apply Next Style
      5m 4s
    3. Advanced text styling
      6m 9s
    4. Setting load styles
      2m 58s
    5. Linking to text files on disk
      4m 1s
    6. Understanding GREP styles
      7m 2s
  8. 1h 4m
    1. Building a multi-document book
      4m 42s
    2. Setting page numbering across books
      7m 53s
    3. Setting chapter numbering
      6m 7s
    4. Using the Section Marker feature
      6m 53s
    5. Creating "Continued On..." numbers
      4m 44s
    6. Synchronizing documents in a book
      5m 41s
    7. Creating a table of contents
      11m 24s
    8. Indexing documents
      7m 24s
    9. Generating an index
      6m 47s
    10. Printing or exporting a book
      3m 10s
  9. 46m 4s
    1. Creating hyperlinks
      12m 53s
    2. Setting bookmarks
      6m 7s
    3. Creating buttons
      11m 16s
    4. Making movies
      8m 24s
    5. Creating sounds
      4m 51s
    6. Setting page transitions
      2m 33s
  10. 25m 59s
    1. Setting up swatch and style defaults
      3m 24s
    2. Using mixed ink colors
      6m 16s
    3. Working with duotones
      4m 23s
    4. Overprinting
      2m 10s
    5. Ink aliasing
      4m 50s
    6. Using the Kuler panel
      4m 56s
  11. 50m 27s
    1. Creating the transparency blend space
      4m 6s
    2. Understanding InDesign color settings
      9m 8s
    3. Assign Profile and Convert to Profile
      3m 26s
    4. Working with RGB images
      7m 54s
    5. Working with CMYK images
      6m 28s
    6. Soft-proofing
      5m 18s
    7. Managing color at print time
      7m 25s
    8. Managing color in a PDF export
      6m 42s
  12. 42m 1s
    1. Embedding preflight profiles
      5m 1s
    2. Using the Transparency Flattener preview
      3m 23s
    3. Reviewing Transparency Flattener settings
      6m 30s
    4. Setting print presets
      3m 35s
    5. Setting PDF presets
      3m 21s
    6. Exporting to XHTML
      7m 42s
    7. Exporting to SWF
      6m 45s
    8. Exporting to XFL
      5m 44s
  13. 25m 58s
    1. Understanding XML and InDesign
      6m 51s
    2. Structuring InDesign content
      4m 17s
    3. Importing XML
      6m 57s
    4. Exporting to XML
      7m 53s
  14. 34s
    1. Goodbye
      34s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
InDesign CS4 Beyond the Basics
8h 3m Intermediate Dec 05, 2008

Viewers: in countries Watching now:

David Blatner brings his knowledge of and passion for InDesign to the latest release of this state-of-the-art publishing program, showing how to harness its power and functionality. InDesign CS4 Beyond the Basics covers the process of publishing with an eye on the program's latest nuances: optimizing page layouts, automating InDesign with Data Merge and XML, exploring interactive documents (including making movies), and exporting publications to a variety of formats. Exercise files accompany the course.

Topics include:
  • Automating with Data Merge and XML
  • Optimizing page layouts
  • Using advanced effects
  • Creating interactive documents
  • Integrating with Illustrator
Subject:
Design
Software:
InDesign
Author:
David Blatner

Exporting to XHTML

Okay, enough talking about all that print stuff. I mean, come on, who prints anymore? No, I am just joking. Print is great, but these days, people also need to publish on the web and that means we need HTML export or more specifically XHTML. If you don't know the difference, let's just say XHTML is like a more pure version of HTML. Now, one of my biggest frustrations with InDesign is that you cannot easily import HTML files. You can kind of fake it with XHTML import, but it's not pretty. You can however export XHTML pretty easily by going to the File menu and choosing Export For Dreamweaver.

I want to be clear here. It says Dreamweaver, but you don't have to use Dreamweaver if you don't want to. You could use GoLive or any other web editor. It's just plain XHTML. I think they just put Dreamweaver in there to build brand identity, because Dreamweaver is in the Creative Suite. Before I actually choose this, I am going to select what I want to export in my document. Otherwise I will get the entire document and that's just going to kind of bog me down. So I am going to select these three text frames here and now go to File > Export for Dreamweaver, and it opens up the Save As dialog box. I am going to put this inside the Web Files folder in my Exercise Folder and I can see there is some other stuff in there already. I will talk about that in just a minute.

I will call it Bliss_Magazine.html, click Save, and up comes the XHTML Export options dialog box. We can see that even now, if we wanted to, we could export the entire document, even though something is selected on the page, but I am just going to export this selection itself. This General pane of the Export Options dialog box also lets me control what's going to happen to bulleted and numbered text in my document. If I had some automatic bullets or automatic numbers, what do I want to have happen to them? Right now, it's set to Map to Unordered or Ordered Lists, but if I wanted to, I could change it to convert to actual text itself. Then numbers will turn into normal text, but I don't know why I'd want to do that. I am just going to Map it to Ordered Lists.

Let's look at the Images pane here. If I were exporting images, InDesign lets me control what's going to happen to them and specifically, do I want them converted to JIF or JPEGs or GIF and JPEGs, if you want to call them GIFs instead of JIFs. Either way, do you want InDesign to do that conversion for you? Right now, it's set to Optimized, which means it's going to do that conversion for me. If I turn on the Formatted check box, it will also do the cropping and scaling and make it basically look just the way it does in InDesign in the final version. And that's okay, but honestly I must prefer doing that kind of work in Photoshop instead.

I don't really trust InDesign to do a really good job of converting my images into JIFs and JPEGs. That's maybe just me, but I think Photoshop does a much better version. So I would probably choose Link to Server Path instead. You also have the option of choosing the original, which will actually grab the original high-res documents, whatever you have used in your InDesign document, and just put them into a folder. But in this case, like I said, I am going to use Link to Server Path. When I do that, I am telling InDesign that I am going to be handling all the image conversion and you don't have to worry about it all, InDesign. But you do need to tell InDesign where those images are going to be relative to the HTML file. So I am going to just tell it that it's in the Images folder and they are all going to be JPEG file extensions and it will handle all the renaming for me.

Of course, in this example I don't have any images, so I don't really need to worry about this at all. Finally, the Advanced pane gives me control over the CSS. If you don't know about CSS, you should definitely check it out, it's a very powerful way of formatting web pages and I have several options here including Empty CSS Declarations which means that's going to write the CSS code into the HTML file itself, but it's going to leave them empty, it's not going to trying to format those definitions. I could say No CSS or I could specify an External CSS.

I would use this if I have already created a CSS file. Let's start by saying No CSS. I will click Export and it writes the file to disc. So let's go check it out. It's going to be inside this Web files folder. Here it is. There is the HTML file that I created and I am just going to drag this down onto Safari, which is the web browser I'm using right now, and you can see that it is an HTML file. In fact if we look at the View menu and choose View Source, we can see that even though we said No CSS, we are getting DIVs, we are getting the paragraph P tags, Body tags and all of that. It's very basic, simple HTML that we could then take into a web editor like Dreamweaver or something and easily format there.

In this case so, I am going to close that and I will close this. I am going to go back to InDesign and select those one more time. I am just holding down the Shift key while I select those three text frames, and I am going to export again. But this time, I am going to use an External CSS file that I have already created. It's right here inside the Web files folder in the Exercise Files. There it is, blissno5.css. I am going to call this the same name and I will just replace the one that's there and this time, I will go right to the Advanced pane and say, I am using the External CSS and I have to give it a name and it was called blissno5.css, there we go. That was the name of the CSS file. It's going to be in the same folder as the HTML file, so easy to find, and I will click Export, it writes it to disc. Let's go, find it again, right there on the Finder, here it is. There is the HTML file. Put that into Safari, and there we go.

We see that we now have a fully formatted web page with a banner head and what was completely unformatted heading is now a big all caps heading. The pull quotes that were in InDesign show up in this little box over here. That's all possible with CSS, not difficult at all. The subheads and the text all look formatted. So it's a very fast way to get something out of InDesign and quickly apply web formatting to it, and the reason that works is the paragraph styles and the character styles in InDesign match the names almost exactly, it's a little bit different, but it mostly matches the names in the CSS file. So InDesign can actually make that mapping for us.

Let's go back to InDesign one more time, and we can see the paragraph style for this text here is body text and there is a Body Text style inside the CSS file. Okay, let me go back a couple of pages here just to show you how flexible this is. I am going to select two more frames here. I will just grab this heading and the text. I won't do the pull quote this time off on the side, just the heading and the text and one more time, I am going to export this for Dreamweaver XHTML. I will leave it named same, click Save, replace it, and then just say I want to just make sure this is setup. Yup, it's still setup to use the external CSS file, and I will export it. It goes very, very quickly. Go back to Safari, and right now I still have that web page open, but because I saved it with exactly the same name, the second time, all I need to do is refresh this.

I am going to click the Refresh button and you can see that it immediately updates because this is the same HTML file just with different content. I think it's great that Adobe has stuck an XHTML Export feature into InDesign. But to be honest, after you use it a few times, you are going to find that it's just way too limited and frustrating. Many people find that it's faster and easier to just copy and paste your text from InDesign into a program like Dreamweaver and then format the HTML there. Or another good solution is to export your content as XML instead of HTML. I am going to be covering that in the next chapter. But for now, let's take a look at two other ways that we can export interactive documents out of InDesign, SWF and XFL.

There are currently no FAQs about InDesign CS4 Beyond the Basics.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed InDesign CS4 Beyond the Basics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.