The Basics of Links

[ LiB ]

To use links effectively, you first need to know how they work in the browser and how Dreamweaver MX 2004 handles them. The following sections look at the anchor (a) tag, what it can do, and how Dreamweaver can help you insert and manage your links.

How Links Work in the Browser

Hyperlinks are created by surrounding a page element with the anchor, or a, tag. The href attribute, which stands for hypertext reference, specifies the link's destination, like this:

 Read the <a href ="http://www.nytimes.com"> New York Times</a> on  the web.

 <a href ="http://www.nytimes.com"><img src="nytimes_pic.gif"></a>

In the browser, linked text is marked in some way so that it is clearly distinguishable from ordinary text, usually underlined and bright blue; after being visited, the same link usually is rendered in purple. By default, linked images are displayed with a border in the same colors, although most web designers override that default. When over a link, the cursor usually changes into a hand with a pointing finger to indicate that this item is clickable (see Figure 6.1).

Figure 6.1. By default, link text is usually displayed by browsers underlined and colored blue.

Absolute vs. Relative Paths

URL stands for universal resource locator. A URL , or web address, is essentially a pointer to a given document or object located on the Internet, given as a path describing how to get to the document. URL paths can be absolute, document-relative , or root-relative .

An absolute URL is an Internet address that contains all the information your computer could ever want to know about the location being requested . This information includes how the information is to be retrieved, including its protocol, domain, directory, and filename:

http://www.mfa.org/exhibitions/upcoming.htm

Why is the protocol so important? All sorts of different web addresses can be accessed using absolute URLs, including web pages, email addresses, FTP sites, and more. The protocol indicates what kind of resource is being requested. Table 6.1 lists the most commonly used protocols and their meanings.

Table 6.1. Protocols for Creating Absolute URL Paths

Protocol	Description	Example
`http://`	Hyptertext Transfer Protocol, used to request web pages	`http://www.macromedia.com`
`ftp://`	File Transfer Protocol, used to access files stored on FTP servers	`ftp://ftp.mydownloads.com/` `myfiles.zip`
`mailto` :	Mail Protocol, used to send email messages	`mailto: laura @rocketlaura.com`

A relative path is a shortened form of address in which various parts of the addressthe protocol, site address, and directorymight be inferred from other information available.

A document-relative path gives only the information needed to go from the current document to the desired page. To link between two pages in the same directory (as shown in Figure 6.2), only the filename is necessary, like this (linking from mypage.html):myotherpage.html.

Figure 6.2. An example directory structure that might be used with document-relative linking.

To link to a second page that's deeper within the folder structure than the calling page, use the folder name and filename, like this (linking from mypage.html):myfolder/mythirdpage.html. To link to a second page that's higher in the folder hierarchy, use ../ to indicate each level to climb up, followed by the filename: (linking from mypage.html):../index.html.

To move up and down the hierarchy, use as many folder names or ../ indicators as needed, one for each level:

 pages/myfolder/mythirdpage.html ../../index.html

A root-relative path establishes the relationship between a file and the root of the site. The root of the site is what you would consider the general name of the site, such as www.macromedia.com or www.mfa.org:

 /index.html /pages/mypage.html /pages/myfolder/mythirdpage.html

Root-relative links always have a slash in front of the pathname, as you can see.

Why would you want to use root-relative paths? It saves time later if you need to do some reorganization of documents on your site. If you have your company newsletter online and you move the monthly articles to a directory called Archive when the new issue goes online, root-relative links will save you the time it would take to change links within last month's page to reflect the new path structure.

If you want to preview your pages locally inside a browser and without a web server, you must use document-relative paths. Web browsers can't understand what local root folder you are using, so the only paths that can be followed are relative to the document currently being viewed .

Also be warned that not all web servers are configured to handle root-relative paths correctly. Check with your server administrator before employing this kind of link in your site.

Targets

By default, when you click a link, the new document opens in the current browser window, replacing what was in it previously. However, HTML enables you to specify that a link should open in a new browser window or on a frame-based site in a particular frame. This is written using an optional attribute of the anchor tag, <a>, called target . If you want the new document to open in a separate window, the target attribute needs to be set to _ blank :

 <a href="http://www.macromedia.com" target="_blank">Click  here!</a>

Other values for the target attribute are discussed in Chapter 10, "Designing Frame-Based Pages."

Links in Dreamweaver

Creating links is a common task when creating a website, as you can imagine. Luckily, Dreamweaver makes this task quick and easy. Now that you understand the basic principles of URL paths, you are ready to use Dreamweaver's Property Inspector to add links to your site.

Whenever an image or text element is selected in Design view, the Property Inspector includes a set of link fields and controls for specifying link information (see Figure 6.3).

Figure 6.3. The Text (top) and Image Property Inspectors, both showing their link controls.

Assigning Absolute Links

All absolute links must be typed into the Link field of the Property Inspector. Be sure to type the complete link, including the protocol.

If you're working within a defined Dreamweaver site, you can also use the Assets panel to help manage your absolute URLs. Open the Assets panel (Window > Assets) and bring the URLs category to the front (see Figure 6.4).

Figure 6.4. Using URL assets to manage absolute URLs.

Assigning Relative Links

To assign a relative link, select the element and then either type the relative URL in the Link input field of the Properties Inspector or use the Browse or Point-to-File icons. Using either of these methods causes Dreamweaver to construct a document-relative or root-relative path to the specified location.

If you do not save your file before inserting an image or creating a link, Dreamweaver does not understand where this HTML document is located. Therefore, you will get a message reminding you to save the file. Until you save the file, Dreamweaver creates a link specific to your workstation. This link will not necessarily work after you upload your document, so get into the habit of saving your new documents into the proper directory as soon as you create them.

To browse for a link, click the Browse button (the folder icon) next to the Link field and, from the dialog box that appears, browse to the desired file. Choose whether to create a document-relative or root-relative link (see Figure 6.5).

Figure 6.5. Browsing for document- or root-relative links.

To use Point-to-File, you need to have the Site panel or other Dreamweaver documents open in addition to the current document. Click on the Point-to-File icon (it looks like a rifle sight), and drag from there until the cursor is on top of the document you want to link to, either its file icon in the Site panel or its Document window (see Figure 6.6).

Figure 6.6. Creating a relative link using Point-to-File.

Document-Relative vs. Root-Relative Links in Dreamweaver

Every time you browse to create a relative link, Dreamweaver gives you the option of creating that link as document-relative or root-relative. Note that this setting is stickyif you change it, it stays that way until you change it again. This is not retroactive (it does not change links that are already set relative using another method).

When you create a relative link using Point-to-File, you aren't given the option of choosing what kind of relative link to create. Instead, whatever default you established the last time you browsed to a relative URL will be used. To change the default, assign at least one link using Browse, choosing the desired kind of link in the Select File dialog box. Also, root-relative links can't be previewed locally in your browser. Within Dreamweaver, if you preview a page containing root-relative links, Dreamweaver temporarily converts those URLs into document-relative paths. When you click a link in the previewed page, it will work, but any paths on subsequent pages will not work locally because they are site-rootrelative. For this reason, you will be able to preview only one page at a time.

Email Links

An email link is just another kind of absolute URL path. Dreamweaver gives you a few different ways to create email links. The simplest is to use the Property Inspector. Select the text or image you want to use for the link, and in the Link field of the Property Inspector, enter the address, complete with its mailto : protocol:

mailto : youraddress@domainname.com

Figure 6.7 shows this happening. Note that there is no space after the colon .

Figure 6.7. Using the Property Inspector's Link field to enter an email address.

If you prefer not having to remember and type the mailto : protocol every time you enter an email link, Dreamweaver also provides an Email Link object. To use it, follow these steps:

To create an email link from an image, click the image to select it. To create an email link from text, either enter the text and select it or position the cursor where you want the text to go.
Choose the Email Link object from the Insert bar (Common category), or choose Insert > Email Link from the Dreamweaver main menu (see Figure 6.8).

Figure 6.8. The Email Link object and its dialog box.
When the Insert Email Link dialog box appears, enter the email address you want to link to (without the mailto : protocol) and click OK.

After you've inserted an email link this way, if you look at the Property Inspector, you'll see that the Link field shows the absolute URL, exactly as if you had typed it yourself.

To avoid confusing yourself, it's safest to pick one method for inserting email links and stick to iteither typing the full URL into the Link field or using the Email Link object. If you mix and match, you might find yourself adding the mailto : protocol when you shouldn't, or forgetting to add it when you should.