Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Named Anchors

  • A named anchor is a way to link to anywhere on a web page
  • A normal link takes the user to the upper left corner of a web page
  • We want to be able to create additional locations on the page that we can link to
  • We will create a mini-nav bar with links to the various regions of the world on our destinations page
  • These link locations are called named anchors
  • This is a 2 step process
    • Created a named location on the page
    • Link to that named location
  • Our destinations page lists a lot of content
  • We have some travel tips & a checklist at the bottom of the page
  • We will create a mini-nav bar to add links to the checklist & terms
  • First we need to create the named locations on the page
  • We will insert a named anchor on the page at the beginning of each of these lines
  • Demonstrate how to use the point-to-file method to link from the nav bar to each of these anchors
  • To do this, place your cursor at the beginning of the line where you want to link to
  • Click the anchor in the Common tab of the Insert bar & add a name to the anchor
  • Once we have the anchor, we can use point-to-file and place the cursor over the anchor to create the link
  • If we send the user down the page, we must also provide them a way to get back up the page
  • We will create a top of page named anchor
  • We will link the text back to top to that named anchor
  • The user will now have a way to navigate to the top of the page
  • That is how you can create named anchors within a web page and link to those named anchors from 2 separate pages within the website

Named Anchors

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Adding Links to Page Content 0:26
    • Insert Image
    • Creating Navigation Bar with Links
    • Insert Named Anchor
    • Linking to Anchor
    • Preview in Browser
    • Add Link to Top of Page

Transcription: Named Anchors

What we are now going to take a look at is adding what is known as named anchors to our web pages.0000

What a named anchor is, is a way to navigate up and down a web page, especially if it's a little bit longer page.0007

We're going to do that to our Travel Destinations page.0018

There is a fair amount of information on this page, and what I want to do is add some links at the top; and I'm going to add a link to...these are travel terms.0022

I also have a Travel Checklist.0036

Now, you can see, this Travel Checklist is a Header 3; it might be a good idea to make this line a Header 3, also.0041

I'll select it and hit Ctrl+3, and there is my "The Following Terms" as an H3.0050

Now, when we are doing this, I think what I am going to do is put an image also in between these two.0060

I'm going to put my cursor in front of "The Following Terms"; I'm going to go up and use the Insert menu this time to insert an image.0067

So, if I click the Insert menu and I click on Image, it pops up an interface here.0077

Within the file--the folder that is up in this area (so within the Files panel, whatever site I have open)--that is where it is going to set this up.0085

Now, I'll open up my Images folder, and let me go ahead and choose this image.0096

This is Barcelona; I'll click OK; it should prompt me for alternate text, and I'm just going to say "Barcelona."0103

Now, I should put a more descriptive term in there...and there it is.0114

Now, my T is coming right up against that image; so I'm going to put my cursor in front of it and hit Enter or Return.0120

There is my Travel Destinations page; and you can see, no images had been added--now that they are, it is getting pretty long.0129

I want to allow users to navigate a little bit easier.0138

So, we'll start at the top of the page; and underneath Travel Destinations, I'm going to hit Enter or Return, and I'm going to add kind of a little mini navigation bar.0143

Now, the two items at the bottom of the page are specifically Travel Terms...and we also have Travel Checklist; so let's create links to both of those.0155

I will say Travel Checklist; I'm going to put a space, and then I'm going to use a vertical bar to segregate these two little navigation areas.0171

And, on the PC side, if you hold Shift and press the key underneath the Backspace; on a Mac keyboard, it's underneath your Delete key and hold Shift (on the PC keyboard, it looks like a double dash in a vertical manner; on a Mac keyboard, it looks like a solid vertical line) hold Shift and click the key under your Backspace or Delete key that goes backwards...0185

We have that set up; now I'm going to say Travel Terms.0218

There is my little mini navigation bar.0223

Now, in order for the user to be able to click this link and they will be taken down to that area of the page, what I need to do is add a named anchor, a way for the browser to understand where that part of the page is.0226

I'll click in front of the word "the," and I'm going to go up to the Common tab on the Insert bar and click the anchor.0245

When I click this, it is going to ask me for a name, and I'll name this "terms"; I always make them short, sweet, single words, lowercase--just so there are no issues.0254

That one will be named "terms," and you will see it looks like a little anchor in Dreamweaver.0267

This anchor will not show up in the browser; that is just Dreamweaver trying to help us.0273

That is our Terms; and if you are unsure if you got it in the right spot or named it correctly, just click on the anchor; and you can see it shows the name there; so you can always rename it if you like.0278

Now, I'm going to click in front of Traveling; this is our checklist.0295

I'll click the anchor; I'll type out "checklist"; and I should see an anchor there, right in front of this area.0299

Now, what I want to do is allow the user to click on Travel Checklist, and it takes them right down to that Travel Checklist anchor.0310

So, the first step was to create the anchored area on the page.0320

Now, it's no different than linking to anything else on the Web; I can use the Dreamweaver Point to File feature.0326

I'll select the text I want; I'm going to scroll down the page and use my Point to File, but instead of going over to a file, I'm going to go over to the anchor instead.0335

You will see, once in a while, these little black lines show up; but don't worry about that--they will disappear.0350

Notice, it popped me back to the top of the page, and I now have a hyperlink.0357

What I'll do is do the second one, and then go test it in the browser.0364

I'll select Travel Terms, scroll down here to the Terms anchor, click Point to File, and drag over to the anchor.0368

When I let go, it should pop me up to the top of the page; and we now have both of those set up.0380

Let's go test it in browsers.0388

I'll test this one in Chrome.0392

Now, if I click Travel Checklist, you can see it pulls me to the travel checklist.0396

I'll just hit the back arrow for now (notice, I kind of left the user stranded there); I'll click Travel Terms, and notice, Terms didn't come all the way to the top of the browser window.0402

That is because my page isn't long enough to allow that; but it does make it much more obvious to the user where that specific location is on the page.0415

Those two are working correctly; the problem is, I have no way to get the user back to the top of the page.0428

What I need to do is add a link for that.0436

Underneath my list here, I am going to hit Enter or Return twice in a row; and you want to do it quickly--if you wait too long, it won't work; it will keep adding bullets.0440

And now, I am going to say "Back to top"; now, I am only going to do this one for now, and you will see why in a minute.0452

The idea is: I want the user to be able to click that, and it takes them back to the top of the page--so I need to create one of these anchor areas at the top of the page this time.0461

If you navigate the user to lower on the page, they need to have a way to get back to the higher portion.0475

So, in front of Travel Destinations here, I'll go ahead and insert an anchor; this one I will name Top.0482

There is my anchor, right up at the top.0491

I do the exact same thing I did before: I highlight the text I want to become the hyperlink, scroll to where the anchor is, and use Point to File to hover over that anchor.0495

And now, I should see that that has become a hyperlink (which it has).0513

I want to make sure I test this in the browser first; so I'll go back out...Travel Checklist; Back to top--there it is.0519

Now, the reason I didn't do the second one is because, once you have that content assigned, I don't have to redo all of that; we are going to the same spot at the top of the page, so I can simply copy this.0529

What I will do is: I will actually go in front of the copy right here, hit Return, and then move my arrow back up to make a space so that I don't get caught up in this definition list.0546

And down here, I am going to do a paste and get back to the top of the page.0559

I'll save this and put it back in the browser; now I move down on the page; I move back up; I move down to the Terms; I move back up.0566

We have allowed for the user to be able to navigate around our page, simply using hyperlinks built into the page; and those hyperlinks are known as a named anchor.0578

The word "anchor" is why you click the anchor within Dreamweaver in order to create them, and that is located in the Common tab.0591

So, we just created named anchors within our page using Dreamweaver.0600