Ten Ton Dreamweaver [Electronic resources]

Geoff Blake

نسخه متنی -صفحه : 109/ 55

Understanding Hyperlink Paths: The Path to Tranquility

Does the prospect of building hyperlinks have you bouncing off the walls with hyperactivity? Try to remain calm and Zen-like. Deep breath and hold for fivethis is vital stuff!

Hyperlinks are very important in web design. Without them, the World Wide Web would be a pretty boring place. After all, remember what the web is: a bunch of pages and sites that are all interconnected.

You've probably been surfing the web for a while now, so the concept of a link should make sense. The whole idea is click here, go there. In other words, you click a link, and it takes you somewhere else. This means that a hyperlink has two parts: what the visitor clicks (the link's starting point), and where the visitor is taken (the link's destination). For a hyperlink to work, both the starting point and the destination must be in place.

Dreamweaver makes inserting hyperlinks into your pages easy, but they can be tough to troubleshoot when they don't work properly. So before you really get going with hyperlinks, it's critical to understand how they work. Otherwise, you may find yourself with a site full of broken links and a gaggle of frustrated web surfers pounding on your front door. Broken links just scream amateur, so be careful.

A hyperlink has two parts: what the visitor clicks (the link's starting point), and where the visitor is taken (the link's destination).

The first thing you need to know is that there are different types of hyperlink paths. Think of paths as providing directions from one location to another. If you're in New York City and want to get to Berkeley, California, you follow a specific set of directions to get there. Similarly, you follow a specific route through your site's structure when you link from your index file to your services file, for example.

But just as when you travel from the Atlantic coast to the Pacific you can take interstate highways or local roads, when you build links you can choose from three types of pathsabsolute paths, document-relative paths, and root-relative pathsdepending on where you're linking to and the type of link you want to create.

Geek's Delight

Every location on the web has a specific address, called a URL (uniform resource locator). This is similar to a house's street address. If you mail a letter to an incorrect address, it could wind up at the wrong house or get returned to youwhich is exactly what happens when there's an error in a link to a web address.

Absolute Paths

How's your Zen state coming along? I miss the sugar, too. Let's make this quick so we can go raid the junk-food stash.

You can think of absolute paths as "hard" paths, because the entire destination is specified in the path. For example, http://www.tentonbooks/dw/paths is an absolute path. See how the whole URL is specified? Whenever you're linking to another site, or to a page in another site, you must be sure to use an absolute path. You can also use absolute paths when linking to pages within your own site, although it means more work with no major advantage.

Here's a real-world example. If you were in New York City and wanted to visit Peachpit Press in Berkeley, you'd need Peachpit's full address, 1249 Eighth Street, Berkeley, California (send your Geoff Blake hate mail thereplease, no live animals). If you were missing part of the address, then you wouldn't know where to go. For example, if you had only the 1249 Eighth Street part, then you'd be lost. It's the same with absolute paths. If an absolute path is missing part of the URL, your link won't work because it won't know where to go.

Imminent Doom

Absolute paths are very sensitive. If they're off by even a single character, or if the content they're pointing to moves, they won't work.

Document-Relative Paths

Document-relative paths can be considered "soft" paths. Links that use document-relative paths don't include the full URL, but only the path that leads the current file to the linked file.

For example, let's say that your site includes a folder called. Inside this folder, you have two files, news and services. Because the two files reside in the same folder, when linking from one to the other, you can just link directly to the file name and leave out the part of the URL that is common to both files. So if you were linking from news to services, your link would simply read services. (You could use an absolute pathin which case your link would appear as http://www.yoursite.com/servicesbut that's kinda overkill, as most of the URL is common to both files.)

Let's go back to our Peachpit example. If I were giving you directions from your house to Peachpit and you already lived in Berkeley, I wouldn't have to tell you to travel from New York City to Berkeley, Californiayou're already there. Instead, I'd leave out the part of the directions that were common between New York City and your home address and Peachpit's address, and just tell you what you need to know: "Go to 1249 Eighth Street." Make sense?

Noteworthy

Document-relative paths are most commonly used for linking to other pages within the same web site. Dreamweaver uses document-relative paths by default.

The Path to Document-Relative Wisdom

Document-relative paths provide a very straightforward way to create links in your site. In fact, Dreamweaver uses 'em by default. However, if you look at a document-relative path in your page, you may find it a little hard to understand at first. So to calm your nerves, let's take a closer look at exactly how document-relative paths work.

The characters in a path tell the link where to go:

Moves down one level in the structure

../

Moves up one level in the structure

Now let's take a look at a few examples. In each of these examples, assume that the page that's being linked from is called Linking_From and that it resides in your site's folder.

pressroom/recent

Starting in the folder, this path goes down into a subfolder called pressroom and links to the recent page.

../index

Starting in the folder, this path goes up one level to the site's top level (the root level) and links to index.

../catalog/products/paper

Starting in the folder, this path travels up one level to the site's root folder, down into a folder called catalog, and down into a second folder called products, and links to the paper page.

Making sense? Once you start inserting some links on your page, you'll see paths like these appear in the Property Inspector's Link field. Still confused? Don't sweat it. Once you see hyperlinks in action on your page, they'll become much clearer.

Root-Relative Paths

Chapter 4 when you first defined your site.