InDesign CS6 New Features
Illustration by John Hersey

Inserting HTML and Edge content


InDesign CS6 New Features

with Anne-Marie Concepción

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Inserting HTML and Edge content

Just as CS6 handles the exporting to EPUB better with better-constructed CSS and HTML and more support for things that we add in InDesign like table styles, cell styles, inline frame backgrounds, and so on, all those things carry through to straight HTML export as well. So if I went to the Export dialog box, for example, chose HTML, and saved this document, you can see it looks a lot like the Export to EPUB dialog box, because essentially, EPUB is HTML files.
Expand all | Collapse all
  1. 1m 59s
    1. Welcome
    2. Using the exercise files
      1m 2s
  2. 14m 23s
    1. Exploring interface tweaks
      6m 56s
    2. Examining the new tools and dialog boxes
      7m 27s
  3. 32m 41s
    1. Working with the Conveyer tool
      10m 7s
    2. Linking objects
      12m 11s
    3. Mapping styles
      10m 23s
  4. 50m 6s
    1. Understanding flexible layouts
      8m 16s
    2. Working with Alternate Layout
      12m 52s
    3. Understanding Liquid Layout rules
      7m 30s
    4. Using the basic Liquid Page Rule options: Scale, Re-center, and Based on Master
      6m 52s
    5. Applying guide-based Liquid Layout rules
      8m 10s
    6. Applying object-based Liquid Layout rules
      6m 26s
  5. 14m 51s
    1. Working with flexible columns
      3m 27s
    2. Auto-sizing text frames
      5m 28s
    3. Exploring the primary text frame
      5m 56s
  6. 8m 15s
    1. Accessing recently used fonts
      2m 9s
    2. Applying Keep settings to spans and tables
      2m 45s
    3. Fitting frames to different types of text content
      3m 21s
  7. 28m 27s
    1. Using advanced EPUB 2 export controls
      9m 12s
    2. Exporting an EPUB 3
      9m 16s
    3. Inserting HTML and Edge content
      9m 59s
  8. 28m 4s
    1. Reviewing the new Form tools
      7m 21s
    2. Creating and previewing a basic form
      14m 40s
    3. Testing the form in Acrobat
      6m 3s
  9. 21m 26s
    1. Aligning selections to a key object
      2m 18s
    2. Using Save As to create a file for earlier versions of InDesign
      1m 41s
    3. Retaining table headers and footers
      2m 58s
    4. Importing RTFD and exporting to PNG
      4m 38s
    5. Using smart math in fields
      2m 13s
    6. Exporting interactive PDFs as pages
      1m 9s
    7. Previewing and exporting grayscale PDFs
      2m 22s
    8. Using the new world language support
      4m 7s
  10. 1m 6s
    1. Next steps
      1m 6s

please wait ...
Watch the Online Video Course InDesign CS6 New Features
3h 21m Appropriate for all Apr 23, 2012

Viewers: in countries Watching now:

InDesign CS6 is dedicated to improving workflow, document distribution, and flexibility. This course provides in-depth exploration of the new features in InDesign CS6, showing not just where they are and how to use them, but also tips, workarounds, and practical applications of the features. Author Anne-Marie Concepción introduces the Liquid Layout tools and Alternate Layouts for creating flexible layouts for both print and digital publishing; the enhanced tools for creating and updating linked objects within and between documents; the Content Collector and Content Placer tools; and the introduction of EPUB 3. The course also covers creating interactive PDF forms, using the new primary text frame, previewing and exporting color layouts to grayscale, and utilizing the new production aids such as aligning selections to a key object and using smart math in panel fields.

Topics include:
  • Working with the Conveyor tool to link objects and map styles
  • Applying Liquid Layout rules
  • Using flexible columns
  • Creating auto-sized text frames
  • Accessing recently used fonts
  • Fitting frames to more types of text content
  • Exporting to EPUB 2 and 3 using new controls
  • Inserting HTML and Edge content into a layout
  • Creating a PDF form with interactive text, radio, and checkbox fields
  • Mapping text styles in linked objects
InDesign EPUB
Anne-Marie Concepción

Inserting HTML and Edge content

Just as CS6 handles the exporting to EPUB better with better-constructed CSS and HTML and more support for things that we add in InDesign like table styles, cell styles, inline frame backgrounds, and so on, all those things carry through to straight HTML export as well. So if I went to the Export dialog box, for example, chose HTML, and saved this document, you can see it looks a lot like the Export to EPUB dialog box, because essentially, EPUB is HTML files.

But I want you to notice if you are doing a lot of exporting to HTML, that under Advanced, you also have the new feature of being able to link to multiple CSS files, as you can with EPUB. And one or more JavaScripts can be attached to this as well. I am going to cancel out of here, because one of the more exciting aspects of HTML with CS6 is how and you're able to embed HTML and include it when you export out to anything that supports HTML, like digital publishing, you know, exporting to tablet app.

I mentioned in the very beginning of this title that I'm not covering Digital Publishing Suite and all the new features; however, I have installed the optional digital publishing elements because there are a couple things that I've been showing you that rely on that. And I'm about to show you something else. So, for example, when I go to Digital Publishing workspace, you can see that I have Folio Overlays and Folio Builder. Also, under my File menu, I have Folio Preview and Folio Preview Settings.

If you don't have that and you would like to install it, you need to download it separately install it. I don't know which version will be the one that you need to use by the time you get CS6 installed, but for now, your best bet would be to go to the Adobe Digital Publishing software website in, find the Adobe Digital Publishing Suite Family, and if you scroll down here, you'll see you can choose product updates for Mac or product updates for Windows. This is where you actually download the files.

So they're called the Producer tools and Folio Builder panels. These are what you want to download and install, and they would just be installed right on top of InDesign CS6. It knows where everything is supposed to go. And then when you restart InDesign, you'll see that you have these kind of panels. So what I want to talk about is the ability to insert HTML and then to have that be part of your publication when you export out to a folio. And it might very well be that you'll be able to embed HTML for other kinds of projects too, something coming down the pike in the future.

But even if you're not doing that, it's really fun to play with. The command that we are talking about is here: under Object, you choose Insert HTML. Now I did not create a folio. I am just showing you those tools. I have a normal print document like, you know, this brochure that I have been using the whole time. If I choose Insert HTML, it has this is a placeholder. This is HTML Snippet. And I could ask the edit this and write HTML in here if I wanted to. So I could say this is Anne-Marie's HTML snippet and I click OK, and give it a second to rasterize. That's what that fun little watch is about.

It's not really exciting, is it? This is Anne-Marie's HTML snippet. This is actual HTML. What we're seeing here in our document is a very low-res print preview, and that's all you going to get if you are going to print or export to PDF. Let's delete that, and let's do something a little bit more exciting. For example, I am going to jump back to Safari, and let's say that I want to include a Google map. You can include a live interactive Google map or YouTube video or any place that you can grab some embed code, you can use that in your documents.

So this Chicago, Illinois is boring. I love Chicago--it's my hometown--but let's do something more interesting, like Paris, France. There is Paris, France. Let's say that we want to embed a map of Paris, France in our publication. So you find the place in the interface on the website that you're looking at where you can link. And you're looking for something that says Embed, so embed in website. So this would be good, but I think I want to customize this and see what I'm going to get first. So let's see. This is a little too big, I am going to say small. That's better.

Well, let's just leave it as it is. Just copy and paste this HTML into your website. So I am going to grab this all the way down to the bottom, copy it now to my clipboard. Let's jump back over to InDesign, and now we will choose Object > Insert HTML and then I will paste within my clipboard replacing the placeholder. That looks good. Click OK. It starts out by saying this is an HTML snippet, and then it thinks about it for a while--give it a second--and there's the map, in the low-res preview. Trying to make it high-res will not help.

So let's put it right here, and you can put a frame and stuff like that around, but this is basically an iFrame. So I think I am going to put a thick frame around it. Let me switch back to Advanced. And get the swatches, make it a black frame, maybe make it a little curvy. And I don't like it to, that part lying right on the rule there, and I think I will give it a background color too.

Let's just give it background of paper, there. So this is what it would look like in Preview mode. You could print or export this to PDF; it just wouldn't be very high res or thing. It's similar to just taking a screenshot of this. But if we actually look at it on a tablet app--and you can actually get a preview, if you've installed those Digital Publishing Suite tools, by going to File and choosing Folio Preview-- it's going to start up the local desktop folio previewer, called Content Viewer.

And there it is. It opens up. So there is a map. Now, this is completely interactive. Look at--if I click Satellite, there is the satellite view, or the Terrain. Now I don't have the plug-ins to view Google Earth. Let's go back to map. And I guess I can see I need some tweaking with my frame here, but I think you get the general idea. But wait, there's more. Look at, haha! This is interactive. It's just like I am dragging around on

Pretty cool. Or you would have complete control over the YouTube video, if you embedded a YouTube video as well. Let's go back here, and let's say that you wanted to edit this file. You can right-click on the map and go down to Edit HTML. And now you can actually type in something else if you wanted. If you want to change a frame width or height or you know what you are doing with this code, you could change it here as well. So you can edit the HTML after you place it, which is cool. Another way that CS6 integrates HTML is by being able to place animations created with Adobe Edge.

I don't know if you've played with Adobe Edge at all, but it's a cool, neat little program that I believe is actually still in beta as I speak. But I know that they have a couple videos, or at least one video here on getting started with the Adobe edge at And essentially, it's a program that lets you create animations that you can use in websites or any place where you use HTML, maybe even EPUBs, EPUB 3s. But it uses HTML5, CSS3, and JavaScript to create the animation.

So it's all open source. It's not proprietary like Flash. You can take the code, you know, the actual HTML and CSS code that Edge creates and combine it with your website, but also, it will soon be able to save its own proprietary file format and you can place those right into InDesign. Now I was able to create one of those files with the workaround, but soon we will be able to just save it out. So I have this on my desktop as header 2.

And this is that one of files that Mordy Golding created in his Edge video here. It was for an early beta, so I don't know if it's still going to be alive by the time you see this video. And then I am just going to click and place, and it's just basically a rectangular frame containing something. If you didn't see what it was in Edge, you are really not going to be able to see a good preview here. You've got to take my word for it, that there's something here. Let's go ahead and fill this frame-- I don't like having all this empty space here--with black and I think at 75%. Yeah, that's pretty good. That's fine.

So here is our brochure and then when only preview it in folio preview, this might be a brochure that we would have students download from the App Store for free. And here it is, open in the Adobe Content viewer on my desktop, and this is actually an animation. So if I click, this all happens, very simple animation. Of course it could be a lot more exciting, but you can sort of see how you can start to combine HTML and CSS from outside sources right into InDesign. And then when you export it to a format that supports HTML and CSS, like, for example, folios and media overlays and I'm sure other technologies in the near future, then you have the best of both worlds. You are able to stay in InDesign and create and design your publications as you see fit, and then distribute them in the format that your customers would want to see them.

There are currently no FAQs about InDesign CS6 New Features.

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.

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 Already a member? Log in

* Estimated file size

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


You have completed InDesign CS6 New Features.

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

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 ?

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 page and choose Site preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about 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

Sign up and receive emails about 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.