On September 14th, 2017, we published revised versions of our Privacy Policy, Terms of Service and Website Use Policy and published a Cookie Policy. Your continued use of Lynda.com means you agree to these revised documents, so please take a few minutes to read and understand them.

Creating working navigation buttons

When you're dealing with interactivity in an InDesign document, the next level up froma basic hyperlink is a button.While a hyperlink will work simply when you click on it, a button can have various statesand provide visual feedback when you roll over it, roll off it, and click on it.And InDesign allows you to create buttons that work exactly that way.Let's take a look at how you create a button in InDesign that works and reacts the wayit would on the web.I am going to go to my Pages panel, to the Master page for this site where my nav baris, and I am going to select this first button in the nav bar and zoom in on it.

Now in an earlier movie in this course, I had created this entire nav bar as a singleInDesign table, because it was the fastest and easiest way to do it at the early stageof the design process.Now that I'm actually building some functionality into this, and my design decisions are largelymade, I needed to break up that table because I can't make a button out of each cell in a table.Everything had to be broken out into a separate object.And to do that quickly and easily, all I did was select each cell in the table, cut itto the clipboard, and paste it into a new text frame as a one-row, one-column single-cell table.

And then I placed them all back in the line so that they look like one continuous object.Now I want to take the first of these nav bar items and turn it into a button.To do that, I'll go to Window > Interactive > Buttons and Forms.That opens the Buttons and Forms panel, and I am actually going to pull that off here,so I have it available to me even while I am working in other panels, and I don't haveto keep jumping back and forth.The first thing I will do from the Type Menu is to select button, and that turns this object into a button.

You can see that its outer border changes into this dashed somewhat thicker line.Once I've turned this into a button, this Appearance area gives me three options forhow this button will appear in its various states, Normal, when nothing is happeningto it, Rollover when the mouse moves over it, and Click when it's actually clicked with the mouse.To add any of these other two appearances besides Normal, all I have to do is clicktheir name here in this Appearance window, and a duplicate of the current Normal appearanceis automatically created.

The easiest way to change an object's appearance as always is with an object style.And I happen to have one created in this document already called navbutton_rollover.With this rollover state selected in the Buttons and Forms panel, I will click that navbutton_rolloverobject style to apply it to this appearance of the button.Next, I will select the Click state which another duplicate of the original Normal state.Then I will go back to my Object Styles panel, and apply the navbutton_click state that I'vealready created, and that's just a solid black background behind here.

So now I can toggle through and see what the different appearances of my button will bedepending on the user's interaction with it.And I always want to make sure that I set it back to its normal appearance before Isave this document and export it.Next, I will give the button a name, in this case, Programs.And I have to do two more things to make this a working button, the first is to tell itwhat it's going to react to, and the second is to tell it what to do when it reacts.What it reacts to is an event, and in this case, the default is On Release or Tap, andthat's what I'm going to choose.

That's when someone clicks it and then releases the mouse, not when they initially click it,or when they've tapped it if they're viewing it on a tablet.Next is the Action, what to do when that event takes place.To add an action, I will click this Plus icon, and I have different actions availableto me for different output destinations.Everything at the top, I can do whether I export to Flash Player, or to Interactive PDF.Below that, I have options that are restricted, in this case, to Liquid HTML5 and SWF Only.

I can do any of these.And in PDF Only, I can do any of these.When I export to Flash Player, I have the option to go to a specific page in this document.But I don't have that in PDF only. I can only go to a Destination.And a destination in an InDesign document is either a bookmark or a text anchor, andthose have to be created in order for me to designate it here.So, before I can finish telling this button what to do, I need to create that destination in the document.

So I am going to go to the Pages panel, and I'm going to go to Page 3, and let's fit that in the window.This is the Academic Programs page, and this is the destination that I want for that button.To add that destination to the document, I need to create a bookmark.And I do that from the Bookmarks panel.I have already got ones for the other buttons that I've already created.And from the Bookmarks panel Menu, I'll choose New Bookmark.Since I'm on this page, this is what I'm bookmarking.

So I'll just type in Programs, hit Return, and now I'm ready to go back to my Masterpage, to that button at the top, and assign the proper action of Go To Destination.I will go back to the Buttons panel, or I can now assign the appropriate Go To Destination action.And when I do that, the interface changes again, my destination is within this InDesigndocument, buttons.indd and the Destination is any of my existing bookmarks.

Here is the one I just created, Programs.I'm also given Zoom options. This is specific for PDF export where I can specify whetherthe current zoom is inherited when the destination is reached, or if it switches to Actual Size,Fit in Window, or Visible Width. I am going to keep it at Inherit Zoom right now.And now I've told this button everything I need to about how it's supposed to behave.Let's put it to the test. I am going to close the Buttons and Forms panel.

I've already made all these other options in the top into buttons.So I'm ready to export this file.So first I will save it, and then I will export it.For now, I'm just going to export this to the Flash Player in SWF format, and I willsave it to my Desktop. These are the SWF options that I want.In my Export SWF dialog, I want to make sure that I'm exporting All Pages and then InDesigngenerates the HTML and shows it to me afterward, everything else is exactly the way I want it.

I will click OK, and my layout opens up in my browser.And now let's see how my buttons behave.First I will go over to Programs, and there's my Rollover state.I'll click it, and there's my Click state, and when I release, it goes to that page in the document.And when I move my mouse off as you saw, it goes back to its Normal state.All of these other buttons behave the same way.Some of them go nowhere because I haven't created these pages, but if I click About,it goes to the About Roux Academy page.

And if I click Contact, goes to the Contact page.So my button functionality is working great here.And when you've got your design finalized, and you're ready to show it to your client,a rollover state, and a working click is really worth a thousand words.

Resume Transcript Auto-Scroll

Author

Released

10/25/2012

InDesign offers unique advantages for kick-starting a website design, such as its unmatched typographic control, pixel-perfect positioning, and fluid, intuitive layout environment. InDesign offers designers who want to quickly create webpage prototypes a powerful toolset with robust text and object styles, page grid features, and interactivity—and none of the limitations of Photoshop, complexities of Dreamweaver, or burdens of hand-coding HTML and CSS. This course shows aspiring web designers how to set up documents for the web, utilize web fonts for maximum compatibility, design a navigation bar, and even mimic CSS with InDesign styles. The final chapter shows how to export your mockups as HTML, CSS, PDF, SWF, and web-optimized images that can be shown to clients or quickly published to the web.