Dreamweaver CS6: The Missing Manual

Adding a Link

If all that talk of links gets you confused, don’t worry. Links are confusing, and that’s one of the best reasons to use Dreamweaver. If you can navigate to a document on your own computer or anywhere on the Web, you can create a link to it in Dreamweaver, even if you don’t know the first thing about URLs and don’t intend to learn the details of writing them.

Browsing for a File

To create a link from one page to another on your local website, use the Property Inspector’s “Browse for File” button (see Figure 4-3) or its keyboard shortcut, as described in the following steps.

Figure 4-3. The Property Inspector gives you three ways to add links to a web page: the Link field, the “Point to file” tool, and the “Browse for File” button.

To browse for a file in Dreamweaver, you use the same type of dialog box that you use to open or save a file, making “Browse for File” the easiest way to add a link. (To link to a page on another website, you need to type the web address into the Property Inspector. Turn to Typing (or Pasting) the URL or Path for instructions.)

1. In the document window, select the text or image you want to link from.

   You can select a single word, a sentence, or an entire paragraph. When you add a link to text, the selected words appear in blue and underlined (depending on your visitors’ web browser settings), like billions of links before them.

   In addition, you can turn a picture into a link—a great way to add attractive graphics-based navigation buttons.

   Note

   When you add a link to an image, Internet Explorer 8 and earlier draws a blue border around the image, just like linked text has a blue underline. Fortunately, with some simple CSS, you can get rid of that blue outline—see the Tip on Tip.

2. In the Property Inspector, click the folder icon—that’s the “Browse for File” button.

   Or, choose Modify→Make Link, or press Ctrl+L (⌘-L). In any case, the Select File dialog box opens (see Figure 4-4 for Windows, Figure 4-5 for Macs).

3. Navigate to and select the file you want the link to open.

   The file should be a web page that’s part of your site. In other words, it should be in the local root folder (see the box on Terms Worth Knowing) or in a folder therein.

   Remember: To a website, the root folder is like the edges of the known universe—nothing exists outside of it. If you try to link to a file outside the root folder—like to a file on your desktop—Dreamweaver tells you it’s a problem and offers to copy the file to the root folder. Accept the offer.

   

   Figure 4-4. In Windows, use the Select File dialog box to browse your computer to select the target file for a link. When you set up your site, you can tell Dreamweaver whether to use document- or site root-relative links. However, if you ever find the need to temporarily switch to a different type of link (to a root-relative link, for example, if you set up your site to use document-relative links), use the “Relative to” drop-down menu (circled). You probably won’t ever need to do this, but Dreamweaver gives you the option.

   

   Figure 4-5. Every file in a website needs to be somewhere inside a local root folder (see the box on page 46). This master folder holds all the files for your site, including other folders with other files. Because it’s so central to your web files, Dreamweaver includes a Site Root button (circled) in every window that requires selecting or saving a file. (This example shows what you see on a Mac; on Windows PCs, the button’s at the top of the window, as shown in Figure 4-4.) Click this button and you jump straight to your site’s root (so you know exactly where you are on your hard drive), making it easy to navigate to the file you need.

   Note

   You can double-click the name of a file in the Select File dialog box and Dreamweaver selects the file and closes the Select File dialog box in one step.

4. Make sure you select the correct type of link—document- or site root-relative—from the “Relative to” menu.

   As noted earlier in this chapter, document-relative links are usually the best choice. Root-relative links (a.k.a. site root-relative links) don’t work when you preview your site on your own computer. (They do, however, work once you move them to your web server.)

   Note

   You can skip step 4; just set the type of link you want in the Site Setup window, and then forget about it. Dreamweaver always uses the link type you specified there. See Figure 4-1 for details.

   FREQUENTLY ASKED QUESTION: The Mysterious Triple Slashes

   Why do my links start with file:///?

   Links that begin with file:/// (file:///C:/missingmanual/book_site/cafe/events.html, for example) aren’t valid links on the Web. Rather, they’re temporary addresses that Dreamweaver creates as placeholders for links it will rewrite later. (A file:/// path tells Dreamweaver to look for the file on your computer.) You’ll spot these addresses when you add document-relative links to a page you haven’t saved, or when you work with files outside of your site’s local root folder.

   Suppose you’re working on a web page that contains your company’s legal mumbo-jumbo, but you haven’t yet saved it. After adding a document-relative link to your home page, you notice that the Property Inspector’s Link field begins with file:///. Since you haven’t saved your legal page, Dreamweaver doesn’t know its folder location and can’t create a relative link telling a browser where to go to get the page. So it creates a temporary link, which helps it keep track of which page to link to. Once you save the page somewhere in your site, Dreamweaver rewrites the link in proper document-relative format, and the temporary file:/// link disappears.

   Likewise, Dreamweaver can’t write a “legitimate” link (a link that really will work in a web browser) to a file outside the local root folder. Since it considers anything beyond the root folder outside the bounds of the site, Dreamweaver can’t write a link to “nowhere.” So, if you save a page outside the local root folder, Dreamweaver writes all document-relative links on that page as file paths beginning with file:///. (This problem can also crop up if you use Dreamweaver without first setting up a site—that’s why that simple site setup process, described on Setting Up a Site, is so important.) To avoid this invalid link problem, always save your web pages inside the local root folder or in a folder inside the local root folder. To learn more about root folders and websites, see Chapter 15.

   If you set up a site and you link to a page—or add an image (Chapter 5)—stored outside the local root folder, Dreamweaver has the same problem. However, in this instance, Dreamweaver gives you the option of copying the out-of-bounds file to a location of your choosing within the root folder.

5. Click OK (Windows) or Choose (Mac) to apply the link.

   The text or image now links to another web page. If you haven’t yet saved the other web page in your site, Dreamweaver doesn’t know how to write the document-relative link. Instead, it displays a dialog box saying that it will assign a temporary path for the link until you save the page—see the box above.

After you apply a link, in Design view, the link text appears underlined and colored (using the color defined by the Page Properties window, shown in Figure 1-22). Press F12 (Option-F12 on Macs) to preview the page in your browser, where you can click the link.

You can use the browse-to-file method when you work in Code view, too: select text in Code view and follow the steps above.

Tip

Internet Explorer displays a colored border around linked images. To get rid of that border, create a CSS style for the <img> tag (see Creating Styles if you’re unsure about creating styles). Under the Border category of the CSS Rule Definition window, set the border style to “none” (see Adding Borders for more information on CSS borders).

Using the Point-to-File Tool

You can also create links by dragging an icon from the Property Inspector to the Files panel (see Figure 4-6). If your site involves a lot of links, learning to use the Point-to-File tool will save you time and energy.

Figure 4-6. In the document window, select the text (circled) you want to turn into a link. To link to another page, drag the Point-to-File icon (the bull’s-eye icon in the Property Inspector) to a web page in the Files panel (right). In this example, Dreamweaver creates a link to the web page called directions.html. You could also Shift-drag from the selected text to the directions.html page in the Files panel to create the same link.

To use this trick effectively, position your document window and Files panel side by side.

1. In the document window, select the text or image you want to turn into a link.

   Make sure you have both the Property Inspector and Files panel open. To open the Property Inspector, choose Window→Properties. To open the Files window, choose Window→Files. (Before using the Files window, you need to create a local site, as described on Setting Up a Site.)

   Note

   The point-to-file tool works in Code view as well.

2. Drag the Point-to-File icon from the Property Inspector onto a web page in the Files window.

   Or you can Shift-drag the selected text or image in the document window to any web page in the Files panel, bypassing the Property Inspector altogether (this method only works in Design view, however).

   Tip

   You can also drag a file from the Files panel into the Link box in the Property Inspector to link to it.

3. After dragging over the correct web page, release the mouse button.

   The selected text or image in your web page now links to the file you just pointed to.

Note

Bizarre Bug Alert: If you use two monitors as you build web pages, the Point-to-File icon might not work. If your main monitor (the one with the Start menu for Windows, or the one where a program’s menu bar appears on Macs) is on the right, and the second monitor is on the left, the Point-to-File icon may not work. Then again, it might! Strange, but truly infuriating.

Typing (or Pasting) the URL or Path

If you need to link to another website, or you feel comfortable working with document-relative links, you can also simply type the URL or path to the page into the Property Inspector. Note that this technique and the hyperlink object tool discussed next are the only ways to add links to pages outside the current website.

1. In the document window, select the text or image you want to make into a link.

2. In the Property Inspector’s Link field (Figure 4-3), type the URL (the path) to the file.

   If the link leads to another website, type an absolute URL—that is, a complete web address, starting with http://.

   Tip

   An easier approach is to copy a complete URL—including the http:// part—from the address bar in your browser window and paste it into the Link field.

   To link to a page on your own site, type a document-relative link (see Link Types in Action for some examples). Letting Dreamweaver write the correct path using the point-to-file or browsing technique described above is a good way to avoid typos. But typing the path can come in handy when, say, you want to create a link to a page you haven’t yet created, but know where it’ll go.

3. Press Enter (Return) to apply the link.

   While you don’t necessarily have to hit Enter (Return)—sometimes you can just click elsewhere on the page and keep working—Dreamweaver has been known to forget the link and not apply it. This is true for most fields in the Property Inspector—so if you type information directly into the Property Inspector (to create a link, add a title, and so on) get into the habit of hitting the Enter (Return) key to make sure your change sticks.

Note

If you add an absolute link to a website without specifying a web page, add a final forward slash (/) to the end of the address. For example, to link to Yahoo, type http://www.yahoo.com/. The final slash tells the web server that you’re requesting the default page (the home page) at Yahoo.com.

Although leaving out the slash works, too (http://www.yahoo.com), the server has to do a little extra work to figure out which page to send back, resulting in a slight and unnecessary delay.

Also include the final slash when you provide a link to the default page inside a folder on a site, like this: http://www.sawmac.com/dwcs6/. That saves the browser from first requesting a file named dwcs6, and then requesting the default page inside the folder dwcs6.

Using the Hyperlink Object

Dreamweaver gives you yet another way to add a link. The Hyperlink object in the Common category of the Insert panel (Figure 4-7) lets you insert a link with many optional properties. Its only real benefit is that it lets you add text and a link in one step (instead of adding text to a page, selecting it, and then specifying a link address). Unfortunately, this tool only works with text (not graphics), and some of the optional properties don’t work in all browsers.

Figure 4-7. The Insert panel’s Common category includes three link-related objects: the Hyperlink (to add links), the Email link (to link to an email address), and the Named anchor (to link to a specific spot [a bookmark] in the current page or another page in the same site). As discussed in Figure 1-3, the Insert options can appear in a toolbar (as pictured here) or as a panel grouped with other site panels on the right side of the screen.

If you’re still interested, here’s how it works. Start by clicking on the page where you want to insert a link. Then:

1. Choose Insert→Hyperlink or click the chain icon on the Insert toolbar.

   The Hyperlink dialog box opens (see Figure 4-8). To apply a link to text already on the page, select the text first, and then choose Insert→Hyperlink.

   

   Figure 4-8. As an alternative to using this dialog box, you can specify all the options you see here, except the “Access key” and “Tab index” properties (see steps 6 and 7 below), to existing text or images from the Property Inspector. Also, keep in mind one somewhat special case. If you want to add an access key and tab index to an already existing link, you have a couple of options: Go into Code view (as described in Chapter 7) and hand-edit the HTML, or use the Tag Inspector to see all the properties available to a particular link. (For details, see page 362.)

2. In the Text box, type the text you want to appear on the page.

   Whatever you type here is what you’ll see on the page, and what your audience will click to follow the link. If you previously selected some text on the page, it shows up in the Text box automatically.

3. Click the folder icon and search for the page you want to link to.

   Alternatively, you can type a URL in the Link box.

4. Set the target window for the link.

   If you want the linked page to open in the same window—as most linked pages do—don’t select anything. To make the page open in a new window, select the _blank option (see the box on Targeting and Titling Links for more on targeting a link).

   The last three options are more interesting.

5. Type a title for the destination page.

   This property is optional. As described in the preceding box, most browsers display the title in a small tooltip window when a visitor moves his mouse over the link.

   FREQUENTLY ASKED QUESTION: Targeting and Titling Links

   What are the Title box and Target menu in the Property Inspector for?

   A link’s Title property supplies additional information about a link, usually to clearly indicate where the link leads. For example, if you linked the words “Click here for more” to an article describing different types of termites, the link text alone doesn’t clearly explain where the link leads—“Click for more of what?” you might ask. In this case, you could add the title “A complete list of termite species” in the Property Inspector (see Figure 4-3). The Title property is optional, and if the link text already clearly explains where the link leads, don’t bother setting it. In fact, you can avoid the Title property altogether if you write text that explains where the link leads: “Click here for a complete list of termite species,” for example.

   However, in the case of linked images (such as a logo that also acts as a link back to a site’s home page), adding a title is a very good idea. Search engines like the Title property in this case, because it lets them know the purpose of the link; people who use screen readers (programs that help those with vision problems surf the Web) also benefit, since the Title property can be read out loud and the visitor will know where the link goes. The Title property has one other unique feature: Web browsers display a drop-down tooltip with the title’s text in it when a guest moves her mouse over the link.

   The Target menu has nothing to do with the accuracy of your links, nor with shooting ranges. It deals with how a browser displays the destination page when you click a link.

   You can have the new page (a) replace the current page in the browser window (the way most links work); (b) open in a new browser window (choose the _blank option); or (c) appear in a different frame on the same page (an obsolete HTML feature).

   _blank is pretty much the only option used these days, but be careful if your pages use the “Strict” forms of HTML 4.01 and XHTML 1.0; the Target attribute isn’t valid code for these doctypes. However, HTML5, recognizing the usefulness of being able to open links in a new tab or window, allows the _blank target…and so does every browser on the planet).

6. Type a key in the “Access key” box.

   An access key lets you trigger a link from your keyboard. Internet Explorer and Safari for Windows understand this property in conjunction with the Alt key; Alt + Shift + the access key works on Firefox and Google Chrome for Windows; Control + the access key for Firefox and Safari 3 on Macs; Control + option + the access key for Chrome and Safari 4 and later on Macs; and Shift + Esc + the access key for Opera. For example, if you type h in the “Access key” box, then a visitor using Internet Explorer can press Alt+H to mouselessly open that link. Of course, unless people who visit your site are psychic, it’s a good idea to provide the access key next to the link itself, as in “Home Page (Alt+H).”

7. In the “Tab index” box, type a number for the tab order.

   In most browsers, you can press the Tab key to step through the links on a page (and boxes on a form). This feature not only gives you a handy way to go from link to link from your keyboard, but it also lets people who can’t use a mouse due to disabilities cycle through the links.

   Normally when you press Tab, web browsers highlight links in the order they appear in the page’s HTML. The Tab index, by contrast, lets you control the order in which links light up as visitors tab through them. For example, you can give your navigation buttons priority when someone presses Tab, even if they aren’t the first links on the page.

   For the first link in the order, type 1 here. Number other links in the order you want the Tab key to follow. If you aren’t concerned about the order of a particular link, leave this option blank or type in 0. The web browser will highlight that link after the visitor has tabbed through all links that do have a Tab index.

EXTENSION ALERT: QuickLink Is Quick Work

Dreamweaver makes it easy to add innovative commands and tools—including those written by independent, non-Adobe programmers—to your copy of the program. You can read a lot more about these add-on programs, called extensions, in Chapter 20.

When you work with links, one extension that really comes in handy is QuickLink. Created by Dreamweaver guru Tom Muck, this extension instantly turns text into either a mailto or an absolute URL. You can find QuickLink at http://tinyurl.com/3cquzkl. Amazingly, even though this extension hasn’t been updated since Dreamweaver MX 2004, it still works in CS6.

Once you install the extension, here’s how it works: Suppose you insert your cursor somewhere on a web page in Dreamweaver and type the text, “You can download the free PDF viewer at http://www.adobe.com.” To turn http://www.adobe.com into a real link, you can either select the text, go to the Property Inspector, and then type http://www.adobe.com, or—with QuickLink—simply select the text and choose Commands→QuickLink. QuickLink writes the proper code in the Property Inspector, including the initial (and mandatory) http://, even if those characters were missing from the original text. (Note that this extension has one small bug: After you install it, the QuickLink command will appear twice in the Commands menu. Either one works.)

QuickLink also converts email addresses to proper mailto links: Just select the email address ([e-mail], say), apply the QuickLink command, and watch as the extension automatically inserts the correct code (mailto: missing@ sawmac.com) into your page.

For even faster action, create a keyboard shortcut for this command; Shift+Ctrl+L is a good one. (See Keyboard Shortcuts for more on keyboard shortcuts.)