Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Inserting HTML and Edge content

From: InDesign CS6 New Features

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.

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 adobe.com, 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 maps.google.com.

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 lynda.com. 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.

Show transcript

This video is part of

Image for InDesign CS6 New Features
InDesign CS6 New Features

34 video lessons · 17634 viewers

Anne-Marie Concepción
Author

 
Expand all | Collapse all
  1. 1m 59s
    1. Welcome
      57s
    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 5s
    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 25s
  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 24s
    1. Aligning selections to a key object
      2m 17s
    2. Using Save As to create a file for earlier versions of InDesign
      1m 40s
    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

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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 CS6 New Features.

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

Your file was successfully uploaded.

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.