I started with a page I already had from the Frame site so I wouldn't have to make up a bunch of stuff to demonstrate things. First I'm going to give you the way to do it in html, because it's always good to know how things are really working. To make it a bit easier to see, I'm going to show how to make a text link before I do it on an image. (Conceptually, they're identical, but the html for an image is more complex.)


For this, I went straight to the code view and typed in the html. In html, less-than/greater-than signs indicate tags, which tell the browser how to display things. Most tags have two parts, an opening tag and a closing one. For example, the <p> tag opens a paragraph, and the </p> tag closes a paragraph. The "/" always signifies the closing tag. The <a> (anchor tag) defines a hyperlink, and understandably, the </a> closes the link. Anything after the initial word of a tag (in this case, "a") is an attribute of the tag. The "name" attribute means that in this case, we are naming an anchor spot on the document that will be linked to, rather than from. We can put any name we want after the equals sign, but it has to be in double quotes. I'll name it "a" because that's the name of the section I'm linking to. (I'm not sure, but I think it may not like spaces to be in the name. Also, these are case sensitive so I'd suggest staying lowercase all the time. Or uppercase. But pick one or the other.) Because we're linking to this spot on the page, we don't need anything between the opening and closing tags, so they're right next to each other.

Now that we know where we're linking to, we have to define what needs to be clicked to take us there; the actual link, if you will. Back up at the "A B C D" I typed in earlier, I go to the code view again and type in the html. This time, we have the attribute "href" for the <a> tag. This means that the browser should go look for the thing defined after the quote marks. You use hrefs for linking to other pages in your website ("/anotherpage.htm"> or ones on completely different sites ("http://www.completelydifferentsite.com">. But here, we want to link to somewhere on this same document. Specifically, the place we named "a" in the previous step. That's what the "#" is for. When the browser sees that, it knows it's looking for a place in this document. It will make the "A" a clickable link, and when you click it, it will go to the place with the anchor named "a". Note that now we have text that needs to be clickable. Whatever you want to be clickable has to be between the opening and closing tags. So I've put the <a href="#a> before the "A" and the </a> after it. Dreamweaver annoyance note: Dreamweaver tries to be a little to helpful for me here. When I type in <a href="#a"> it realizes I'm making a link, and goes ahead and adds in the </a> tag. But it puts it right after the opening tag, expecting me to type the visible text for the link after I write the html for the link. I never work this way. I always write the text first, and add the html later. If you do it like me, you have to take out the </a> it puts in and put it in the right spot, after the link text. If it confuses you, just make sure that the text you want to be the link is between the two tags, and that there are no extra tags lying around. It should look like this screenshot:

Now. Your link is a graphic. It's exactly the same as before. Place the anchor tag at the correct place in the document just like before, and put the <a href="#a"> around the <img> tag. (If you want to know, <img> is for "image" and like with all tags, the things following "img" are attributes. "src" (for "source") tells the browser where to find the image. "width" and "height" govern how large the image is in pixels.) Nothing difficult here, just make sure that the entire image tag is between the opening and closing <a> tags.

And now I'll show you the Dreamweaver way. You'll probably use this, because it's easier to understand, but honestly, at least knowing your way around the code is so helpful. If there's a problem, it's a lot easier to troubleshoot if you can look at the code and tell what you're seeing. Anyway, at the correct point in the document, do Insert>Named Anchor from the menu. I think the text I put on the graphics is adequate from here on.

I hope that explained it sufficiently. If not, let me know and I can bring my computer on Sunday or something and show you.