Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
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.
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.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 50918 Viewers
117 Video lessons · 38640 Viewers
113 Video lessons · 81562 Viewers
65 Video lessons · 11572 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.