Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

4.1 Understanding Links

A link is a snippet of computer code that gives a Web browser directions for how to get
from one page to another on the Web. What makes links powerful is the fact that the
distance those directions take doesn't matter. A link can just as easily lead to another
page on the same site or to a page on a Web server halfway around the globe.

Behind the scenes, a simple HTML tag called the anchor (<a>) tag makes each and
every link. Links come in three different flavors: absolute, document-relative, and
root-relative. (See Section 4.1.4) for some examples of each link type in practice.

4.1.1 Absolute Links

When people need to mail you a letter, they ask for your address. Suppose it's 123
Main St., New York, New York 12001. No matter where in the country your friends are, if they write 123 Main St, NY, NY 12001 on an envelope and mail it, their letters
will get to you. That's because your address is uniquejust like an absolute link.

Similarly, every Web page also has a unique address, called a URL (most people pronounce
it "You Are El"), or Uniform Resource Locator. If you open a Web browser
and type
www.sawmac.com/dwmx2004/indexl
into the Address bar, the
home page for this book opens.

This URL is an absolute link; it's the complete, unique address for a single page. Absolute
links always begin with http://, and you'll use them anytime you link to a Web
page outside of your own site. Absolute links always lead to the same page, whether the
link to it is on a page in the current site or an entirely different site.

The bottom line: Use absolute links when you want to link to a page on another Web
site.

4.1.2 Document-Relative Links

Suppose you, the resident of 123 Main Street, drop in on a couple who just moved
into the neighborhood. After letting them know about all the great restaurants nearby,
you tell them about a party you're having at your place.

When they ask you where you live, you could, of course, say, "I live at 123 Main St., NY,
NY 12001," but your neighbors would probably think you needed a little psychiatric
help. More likely, you would say something like, "Just go across the street and turn
left. I'm the second house on the right." Of course, you can't use these instructions as
your mailing address, because they work relative only to your neighbors' house.

When you want to create a link from one Web page to another within the same Web
site, you can use similar shorthand: a document-relative link. In essence, a documentrelative
linklike the directions you give your neighborsimply tells the browser
where to find the linked page relative to the current page. If two pages are in the same
folder, for instance, the path is as simple as "Go to that page over there." In this case, the link is simply the name of the file you wish to link to: indexl. You can leave
off all that http:// and
www.sawmac.com
business, because you're already there.

Document-relative links can be finicky, however, because they're completely dependent
on the location of the page containing the link. If you move the page to another part
of the sitefiling it in a different folder, for examplethe link won't work. That's
why working with document-relative links has traditionally been one of the most
troublesome chores for a Web designer, even though this kind of link is ideal for
linking from one page to another in the same site.

Fortunately, Dreamweaver makes working with document-relative links so easy, you
may forget what all the fuss is about. For example, whenever you save a page into a
different foldera maneuver that would normally shatter all document-relative links
on the pageDreamweaver quietly rewrites the links so they still work. Even better,
using the program's site management tools, you can cavalierly reorganize your Web site,
moving folders and files without harming the delicate connections between your site's
files. Dreamweaver's site management features are discussed in depth in Part IV.

4.1.3 Root-Relative Links

Root-relative links describe how to get from one page to another within the same site,
just like document-relative links. However, in this case, the path is described relative
to the site's root folderthe folder that contains the home page and other pages, folders,
and files that make up your site. (For a detailed description of the root folder and
structuring a Web site, see Chapter 14.)

Imagine you work in a big office building. You need to get to a co-worker's office for
a meeting. You call him up for directions. Now, he may not know the precise directions
from your office to his, but he can tell you how to get from your building's
entrance to his office. Since you both know where your building's front door is, these
directions work well. Think of the office building as your site, and its front door as
the root of your site.

Root-relative links always begins with a slash, /like this. This slash is a stand-in character
for the root folderthe front doorof the site. The same root-relative link
always leads to the same page, no matter where it is on your Web site.

If you use Dreamweaver for all of your Web page development, you probably won't
find a need for root-relative links, but they can come in handy. For example, suppose
you're asked to create a new page for an existing Web site. Your client gives you text,
some graphics, and a list of the other pages on the site that this page must link to.
The problem is, your client doesn't know where on the site the new page is supposed
to go, and their Webmaster won't return your calls.

You could use root-relative links to get around this dilemma. Since these links work
no matter where the page is on your site, you could complete the page and let the
client put it where it belongs. The links will still work.

Note, though, that there are some major drawbacks to using root-relative links in
Dreamweaver. For example:

They don't work when you test them on your own computer. Clicking a root-relative
link in a Web browser on your own machine produces only a "File not found"
error. Such links work only after they're moved to a Web server. Web servers understand
root-relative links, but your local computer doesn't.

NOTE

There's one exception. Dreamweaver MX 2004 provides two ways of previewing a Web page: with
a temporary file or without one. The temporary file option gives you a couple of advantages: you get to
preview a page without having to save it first, and you gain the ability to preview on your local computer
any root-relative links you've created. To turn this feature on, open Preferences (EditPreferences or, on
the Mac, DreamweaverPreferences), click the Preview in Browser category, and turn on the Preview Using
Temporary File checkbox. Behind the scenes, Dreamweaver secretly rewrites root-relative links as documentrelative
links whenever it creates a temporary file.

They don't work if the site you're working on isn't located at the Web server root.
Suppose, for example, that your buddy gives you space on his Web server for your
pages. He says that you can put your site in a folder called my_friend, so your URL
is
www.my_buddy.com/my_friend/
. In this case, your Web pages don't sit at
the root of the sitethey're in a folder inside the root. If you try to use root-relative
links, they won't work even after you've moved your pages to the Web server.

Stick to document-relative links for your pages, but keep this discussion in mind.
You'll see later that Dreamweaver's site management features use root-relative paths
to track your site's files behind the scenes.

Here are a few examples of links for a fictitious Web site located at
www.cosmofarmer.com
. Notice that although the root folder (cosmo) is nested inside several
other foldersbook_site and missing manualit's still the top level folder for the
site, since it holds the home page and all of the other files that go on the site.
Keep this distinction in mind: the site root is not the same as the top level of your
hard drive.

4.1.4 Link Types in Action

Figure 4-1 shows a Web site as it lies on a hard drive: folders filled with HTML documents
and graphics. Here's a closer look at some links you might find on the pages
there, and how they might work:

4.1.4.1 Links from the Home page (indexl) to the Subscribe page

The home-page document is usually called indexl or index. (The exact
name depends on the configuration of your Web server. Contact your Web host, or the person in charge of your Web server, to confirm the file name used on your Web
server.). You could create the link from it to the subscribel pageidentified by
the number 1 in Figure 4-1using any of the three link types:

Absolute.

www.cosmofarmer.com/subscribel
. What it means: Go to the
Web site at
www.cosmofarmer.com
and download the page subscribel.

Document-Relative.
subscribel. What it means: Look in the same Web site and
folder and download the page subscribel.

Root-Relative.
/subscribel. What it means: Go to the top level folder of this site (called cosmo, in this case) and download subscribel.

If you can write an absolute URL, you can easily create a root-relative URL. Simply strip off the http:// and Web server name. In the above example, erasing the www.cosmofarmer.com in the absolute address leaves /subscribelthe root-relative path.

4.1.4.2 Links from the Classifieds page to the Strawberry page

Now imagine that you're building a Web page that's in a folder inside another folder.
Here's how you'd use each of the three link types to open a document that's nested in
a subfolder (called 2001, in this case), as identified by the number 2 in Figure 4-1:

Absolute.

www.cosmofarmer.com/classifieds/2001/strawberryl
. What it
means: Go to the Web site at
www.cosmofarmer.com
, look in the folder classifieds,
and then in the folder 2001; download the page strawberryl.

Document-relative.
2001/strawberryl. What it means: From the current page,
look into the folder 2001 and download the page strawberryl.

Root-relative.
/classifieds/2001/strawberryl. What it means: Go to the top
level folder of this site, look in the folder classifieds, and then in the folder 2001;
download the page strawberryl.

4.1.4.3 Links from the Match page to the Advertise page

Now suppose you're building a Web page that's in a deeply nested folder; you want it
to link to a document that's outside of its folder, a link labeled 3 in Figure 4-1:

Absolute.

www.cosmofarmer.com/classifieds/advertisel
. What it means:
Go to the Web site at
www.cosmofarmer.com
, look in the folder classifieds, and
download the page advertisel.

Document-Relative.. ../advertisel. What it means: Go up one leveloutside
of the current folderand download the page advertisel. In links, a slash /
represents a folder or directory. The two dots (..) mean, "Go up one level," into
the folder that contains the current folder.

Root-Relative.
/classifieds/advertisel. What it means: Go to the top level folder
of this site; look in the folder classifieds, and download the page advertisel.

4.1.4.4 The Executive summary

To summarize all of this discussion: use absolute URLs for linking outside of your
site, use document-relative links for links within a site, and avoid using root-relative
links altogether.