From the course: Creating HTML Layouts with InDesign

Adding hyperlinks to text - InDesign Tutorial

From the course: Creating HTML Layouts with InDesign

Start my 1-month free trial

Adding hyperlinks to text

“

- In this video, we're going to take a look at how to add hyperlinks from InDesign. Hyperlinks are a fundamental part of HTML and can easily be added inside of InDesign. So, if you want to follow along, I'm in the the Exercise Files, in Chapter 5, 05_02, in the start folder. Inside there, get the mini-catalogue folder. I'm going to open the mini-catalogue indd file. I go all the way to the last page and select the text, right in the middle, that I want to make into a hyperlink. I go ahead and copy that text, because that'll become the link. And I'll go to Window, down to Interactive, and choose Hyperlinks. Now, after the protocol that's already there, I'm going to go ahead and paste in the rest. And it's setup my hyperlink, and the green light is telling me that it's a valid link. So, that's all I had to do for that particular hyperlink. Let's look at a different one. Let's go up to page two, and I'm going to select the "desert to sea" text, and I'd like to link that to the next page, which is Desert to Sea. So, to do that, I'm going to click the Create new hyperlink button, in the hyperlinks panel. And it's already popping up to Page, because that's what I was doing before, but I would just want to show you briefly, there's also a handy option here, which is email. So, I can put an email link in there, if I want someone to email me, or if I want to provide some kind of support address. But, for this link, let's go to Page, and I'm just going to notch it up to Page 3, so it'll go to the next page. I'll click OK, and that link's all setup. Now, I'm just going to click in the text, and, oh boy, what happened? It changed the color, and it added an underline. You know, I actually like the underline, cause that's sort of a common way to indicate a hyperlink, but that color clashes with the color around it. So, I want to make a change there. I'm going to double-click on that hyperlink, just to go back to the Edit Hyperlink dialogue, and show you that what happened was there was a character-style added, as soon as we started adding hyperlinks. And it was given the default name of Hyperlink. So, I could have created my own link to start with and applied that, but this is all well and good. I'm just going to make some edits. So, I'll click Cancel. Now, I'll go up to Type and choose Character Styles. In the Character Styles panel, I'm going to right-click on the hyperlink and choose Edit Hyperlink. Now I can see from the Style Settings that it's adding a color hyperlink, and an underline. The underline shows up in the Basic Character Formats. And like I said, I'm perfectly happy with that. I could optionally add a font style that makes it bolder, italic, or something like that, but some of the text I'm looking at is already bold, so I'm happy with the underline. I just want to edit that character color. Now, if I navigate to the Character Color section, I can see the hyperlink swatch is selected. And I don't see any swatch that says match text color. So, in order to get rid of this hyperlink color and just keep the color of the underlying text, I need to command, or control, click on that hyperlink swatch. So now, it's deselected it. There's nothing selected. And you can see in the Preview indication, there are question marks around the type swatch. So, that tells me that there's nothing selected, it's just passing through. And with the Preview option selected, we could also move the Character Style Options dialogue out of the way and see that my text is indeed matching the surrounding color, and it's still got the underline. So, that looks great. I'm just going to click OK. So, now, we've created two different types of hyperlinks, and they're ready to be exported into HTML. Now, from what you've seen in this video, you should have a good handle on hyperlinks, and how best to use them for HTML output inside of InDesign. We've only scratched the surface of interactivity that you can create in InDesign and export to HTML. If you want to see more about creating interactivity in InDesign, check out Mike Rankin's "InDesign CC: "Interactive Document Fundamentals" course. In the next video, we'll look at creating a slightly more complex HTML element with InDesign, and that's HTML lists.

Contents