Websites can be enhanced by including Publish Online documents, which can be added by using embed code. This creates a window through which the Publish Online document can be viewed. Diane Burns shows you how to obtain the embed code and how to add it to an HTML web page. You'll learn the different optoins for accessing the embed code.
- [Voiceover] Publish Online documents live on Adobe servers, you can't copy them directly to your own web server. However, you can embed them in your website as though they were on your own server. In fact, you could have only the embedded Publish Online document on your website, where it'll act like a website itself. Let's take a look at how embed code works. This assumes that you or someone you work with is accustomed to working with HTML and website. It's pretty easy though, even I can do it, and I'm not a coding type, believe me. There are two places you can access the embed code.
One is on your web dashboard. To the right of the document you can click on this icon and grab the embed code yourself for that document. The other place that you can get the embed code, or that your viewers can get the embed code, is from your Publish Online document itself. This assumes that you've not disabled the embed code. Remember, in InDesign we have this little option in the publish general options dialog hide the share and embed options in the published document, so if you've checked that on the embed code won't be available to your viewers.
But the default is that it will be. Let's take a look at that code. When I click on the icon I get this dialog. At the top is a preview of the first page of my document and furthermore it is a preview of the size that I'm going to embed this document on my website. This is the medium size, this is what it'll look like in large size, and how large it will be on screen, and then this is the small size, that's what we're going to use.
You can set the start page of the document to some page other than one. In this case we're just gonna leave that. Now we have this option disable fullscreen for embed window. By default your embed code will give you a display window that has this read now button and when your viewer clicks on it it will go into fullscreen mode. If you don't want that behavior, in other words, if you want the document to be constrained just to the viewing area, you wanna check this option, disable fullscreen for embed window.
And here is our embed code. We can copy this and paste it into our own website. Basically it has the URL for this document, and that it's going to be fullscreen, and then here's my width and height. You can edit that if you want, but we're gonna use it just as is. So I'm gonna copy this into my clipboard with Command or Control + C, and then we're gonna go over to Dreamweaver and put this in a page for my website. Here's the homepage for my website Diane Burns inc. And I have Dreamweaver set up with a split view, so we see the page here and we see the code down here.
I find that's a really easy way to work with it. I'm gonna scroll down in this view here, the live view, and I wanna replace this promotion of my animations course with my Publish Online example. So I'm gonna click there and Dreamweaver identifies the location of that graphic for me. Now I need to actually replace all of this text, it's a table cell actually, so I'm gonna select the text that I need to replace and delete it, and then I'm gonna paste in the embed code.
If we update my preview we should see a different result there. There we go, there's the preview. Let's check it out in Safari. I'll preview it right from within Dreamweaver. And we'll save these changes. There we go. This is being served off the Adobe servers, but I have this little window on my website where you can view the document. If I click on it it goes automatically into fullscreen mode with all the controls that you'd expect to see.
To get out of fullscreen mode press the Escape key, it's that simple. Now one more thing, remember I showed you the option where you can disable the fullscreen mode and I have an example of what that looks like. Here's a version of this homepage where I checked that option. And notice there's no read now button, and when I click this I actually stay inside this window. Now I probably should have used a larger size window, but you get the idea here.
We have a fully functional document here that we can navigate through. We don't have the controls at the bottom for embedding and sharing and that sort of thing, but our viewer can experience the document and stay on our webpage without popping out to this fullscreen mode that can be confusing. So there's no right or wrong for this, it's really depends on what you wanna do in your particular application on your website with this code. Using embed code opens up some really interesting options I think. I've seen some great examples out there and it's definitely worth considering as a way to leverage Publish Online to enhance your own website.
Learn what Publish Online can and cannot do, and how to adjust the publication settings to make sure documents look the way you want. Find out how to upload documents to the web and then share them via Facebook, Twitter, or email. Then look at the navigation and interface options used when viewing published documents, and learn how to update your published documents online. Author Diane Burns concludes with some advanced techniques, such as embedding published documents in websites and creating customized thumbnails for document navigation.
- Previewing real-world Publish Online documents
- Changing the publishing settings
- Uploading documents to Adobe servers
- Updating published documents
- Sharing documents via social media and email
- Using the Publications dashboard
- Understanding document analytics
- Viewing documents online
- Embedding documents on websites
- Adding projects to Behance