Join James Williamson for an in-depth discussion in this video Linking to named anchors, part of Dreamweaver CC 2013 Essential Training.
While linking to other pages is usually the norm, there are times when you need to link to places within the same page. Usability is an important consideration when designing websites and, although people will tolerate having to scroll a little bit for your information. If they have to scroll a lot, you usually end up with people who are, less than happy. Named anchors allow us to link to places within the same page, which allows you to have your users jump further down the page or back up the page. Depending upon what you're looking to do. Now, named anchors are aptly named, because instead of the normal HREF attribute that links use links to named anchors reference an ID value. And that allows you to link to any element on the page that has an id attribute. You might also hear these referred to as fragment identifiers, so, if you ever hear that phrase, it's basically the same thing as a named anchor. Alright, so let's see how we can use that to enhance our navigation. Okay, so to do this, I have the faq.htm file open from the 06_05 admissions folder.
Okay, so go into the Admissions folder and 06_05 and you'll find the faq page. Now just to give you a brief overview of the page structure, I've got some text right there that's going be used to link down the page to certain sections. Because each section has their own frequently asked questions. So we have Housing, we have Portfolio, we have Financial Sid, and we have Programs. So this is a lot of scrolling. And it would be nice if people could just sort of jump down the page. Now you'll notice that each one of these also has a link for back, and that allows you to jump back up to the top of the page. And this is one of those nice things that you can do for people. If you're going to allow them to jump down to the bottom of the page, then also allow them to jump back up.
Alright, so this is a two step process. The first thing that you need to do is to create what's called the Fragment Identifiers. Or just make sure that the elements that you want to link to or jump to have an ID attribute. So let's say Common Questions for example, this h1. I want that h1 to be where people jump back up to when they jump to the top of the page. So I'm going to ahead and give that an ID. And I can use the Properties Inspector to do that. Now, right here, we see ID. And I'm just going to go ahead and give it an ID of top. Now, one of the things that you have to remember is what you've used.
Spelling counts, capitalization counts. I like to keep these short and sweet. I also like to use all lower case or camel case naming if I happen to shove two of them together. Because you don't want to have to sort of search your memory banks, and try to remember what you've done. So, the shorter, the better. Alright, now I'm going to scroll down and do that for each one of these different sections. For Housing, for example, I'm going to select that h2, and I'm going to give that an ID value of housing. And, you can use the tag selector right here. You can see that ID was applied.
So every time you do that, its not a bad idea to look up there and make sure that it's where you think it should be. For Portfolio, I'm going to do Portfolio. (SOUND), here we go. The Financial Aid. I'm going to go ahead and do aid. And for Programs, I'm going to do programs. I'm guessing you already figured that out. Programs, alright, there we go. Now, I'm going to go ahead and Save this page. And, now I need to scroll back up to the top, and actually makes the links themselves.
So, if I highlight this text, Housing, so this is, you know, just, I'm going to preview this in Live View so you can see what I'm talking about here. These guys are going to link down to those individual sections. So, turning off Live View, just going to highlight the word, Housing, and here's how we do that link. All we have to do is remember what we named it, and then just type in #housing, and that's it. That's all you have to do to resolve that link. So you use the pound symbol, or that octothorpe, and then the same exact ID that you gave it. So, for Portfolio review, we would do portfolio. For Financial Aid We would do aid, and for Programs, we would do, of course, programs.
Now the other thing that you want to do here, and I'm going to go ahead and Save this. Is again, we wanted to give people the option of jumping back up to the top of the page. And you can see that I have this text right here that says back. Now this is not a link right now, so I need to make it one. And again I"m just going to link that to #top. Now it doesn't take much to type that in, right? But remember if you've used a link once you can use the drop down menu to grab it again. So if you want instead of having to type that in every time, and this helps prevent spelling errors too which I'm notorious for. You know I can just go ahead and grab that, and choose top. There we go.
Alright, so I'm going to test this out. I want to save this, and preview this in one of my browsers. All right, and once this comes up, let's just say I click on Programs. Notice it jumps me right down to the page and it takes me right to Programs. Now, where ever that named anchor is, is going to show up at the very top of the page. Now if I hit Back, notice that it goes right to common questions. It doesn't go all the way back up to the top, and I did that on purpose. Because instead of having people scroll down to get down to the section, it just sort of jumps right to that section. So I'm going to test these all out, Portfolio review, Financial Aid, then finally housing.
Housing doesn't jump down very far, but it does give you that nice little jump. Now you may have also noticed with programs that it managed to give you all the way down to programs, but sometimes it won't. If I didn't have this really large footer at the bottom, if the programs was the end of it. This is as far as it would go. So if that ever happens to you and you expect to see the section up at the top of the page, but it's down here. Just think about the fact that you just don't simply have any other room left to scroll. That way, if you really wanted it to go back up, you could make the page a little taller. Okay, so that works great. Now, one of the really nice things about using these sort of named anchors or fragment identifiers. Is that you are not limited to linking them on the single page, you can also link to them from another page.
Let me show you what I mean, if I go into the programs.htm file which is found by the way. You go into the 06_05 file and into the programs folder you will find programs.htm, so this is where I found this file. There's actually, about halfway down, there's some text that says, please contact the department chairs for more information or view our FAQ on programs. Okay, so I could link this directly to the FAQ page. But I'd really also like it to jump right down to the program section. So all I would have to do right now is just type this link in, if I wanted to. I would resolve the link, and then, after that, I would put the pound symbol. And then the name of the fragment ID that I wanted to browse right down towards. So if I remembered the path that would be great. But what if I don't remember the path? What if I don't remember if these two are in the same directory or not? Well, here's something that you can do that's actually pretty cool.
I'm going to go up to Window and I'm going to choose Tile. Now what that's going to do for me is it's going to put both of my open documents, right, side by side. So, this is pretty cool. And the next thing I'm going to do is, I'm going to highlight again, this FAQ text, and I'm going to grab the point to file icon, and I'm going to point it right here, programs. Now here's what's intresting about this. Take a look in the link dialogue box. Do you see how it's resolving the link? It's going ../, so up a directory, admissions, go into the admissions folder, find FAQ.htm, and then right after that, there's your identifier, #programs.
So if I release my mouse, it's going to go ahead and resolve that for me correctly. So that's again something I didn't really need to type in. So I'm going to go ahead and Save this, preview this in my browser. And now if I scroll down and click on it, it jumps right down to the location that I wanted. Now obviously not every page is going to need a name danker. However, when your data requires a lot of scrolling or if you just want to give people a way to quickly access a specific location. These fragment identifiers allow you to add a lot of functionality to your pages.
- Learning how to approach web design
- Managing workspaces
- Defining a new site
- Managing starter pages
- Exploring the authoring options
- Creating links
- Setting CSS preferences and styling a page
- Placing and styling images
- Working with tabular data
- Uploading files
- Checking for broken links