Lesson 3.2: More Advanced Links

All About Links

There is more you can do with links than simply linking to another page. This lesson will teach you how to change where links open up their pages, how to link to another section on the same page, and how to change their color.

Link Properties

If you don't alter the link's properties, it will bring up the page it is linked to in the same window or frame that it is in. Basically, this is how 90% of the links on the internet work. However, there are times when you want the linked page to open up in a new window or elsewhere in a frameset instead. When this occurs, you need to alter the link's properties.

Doing so only involves one extra step. When creating the link, also choose the "Target" of the link. The Link Target option is located to the right of the "Link" text fieldbox in the properties toolbar. (It's next to the little yellow folder icon.)

If you want it to open up in the same window or frame that it is in, then choose _self. This is the default and therefore already implied, so you don't have to actually specify this.
If you want it to open up in a new window, choose _blank. This will open up a new browser window so that both the original page and the new page are opened.
The other two options are used for pages with framesets. If you want it to open up in the parent frameset (basically the full browser window, if the link isn't nested), then choose _parent. If you want to remove all the frames and open up in the full browser window, then choose _top.

Linking to a Specific Section of a Page

Sometimes you don't want to link to another page and want to link to another section on the same page instead, such as with a table of contents. (An example of such is the link-checking section of this tutorial.) Or sometimes you want to link to a specific section on another page. To do either of these, you need to use anchors.

Anchors are basically like bookmarks for a page, allowing the browser to easily find marked sections. They are included in what are known as "invisibles", which means that although Dreamweaver displays them on the screen (not surprisingly, as little yellow anchor icons), they are invisible when actually viewed from the web. You can use the Preview Page function to see the page without the invisibles displayed.

Creating the Anchor

To create an anchor, first switch over to the Invisibles toolbar. To do this, click on the little downward arrow on the Objects toolbar and choose "Invisibles". (To switch back later, just choose "Common".)

Then place your cursor where you want the anchor/bookmark to be placed on the page. (This is where the link will jump to.) Then click on the "Insert Anchor" button.

You will first be prompted to name the anchor. Be sure to name it in only one word, or to use dashes or underscores. A little yellow anchor icon will then be inserted. If you ever forget the name of the anchor, you can just click on this anchor icon and the name will appear in the Properties toolbar.

Creating the Link

To link to an anchor on the same page, simply use #anchor-name as the link. For example, to link to an anchor named "bookinfo", you would enter "#bookinfo" in the Link field textbox.
To link to an anchor on another page, simply use #anchor-name at the end of the page's link. For instance, an anchor link named "bookinfo" on a page named page.html would result in a link called page.html#bookinfo.

Let's say I create a site for a short story. I name the main page index.html. I have a table of contents on top, and my page has two anchor-links in it named #chapter1 and #chapter2. I also want to link to another story located on another page named story2.html. This page also contains two anchor-links, this time named #page1 and #page2. So for my table of contents on top, to link to the two anchors within the same page, I would create links simply called #chapter1 and #chapter2. To link to the other page though and its two anchors, I would create links called story2.html (to go to the top of the page), story2.html#page1 (to access the first bookmark), and story2.html#page2 (to access the second bookmark).

Changing the Color of Links

To change the colors of your links, go to Modify > Page Properties. In the resulting dialogue box, you can change the colors of your Links, Visited Links, and Active Links.

"Links" refers to all of your unvisited links on your page. "Visited Links" are the links that the user has already clicked on. "Active Links" are the links that the user is currently clicking on.

To change the color of a link, simply click on the little downward arrow and select the color you want.