Previous Section  < Day Day Up >  Next Section

4.2 Adding a Link

If all that talk of links got 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 Property inspector provides three ways to add links on a Web page.

4.2.1 Browsing for a File

To create a link from one a page to another on your own Web site, use the Browse for File button on the Property inspector (see Figure 4-2) or its keyboard shortcut (see the steps below). To browse for a file in Dreamweaver, you use the same type of dialog box that you already use to open or save a file, making this the easiest way to add a link. (To link to a page on another Web site, you'll need to type the Web address into the Property inspector. Turn to Section 4.2.3 for instructions.)

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

    You can select a single word, a sentence, or an entire paragraph. When this process is over, the selected words will show up 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梐 great trick for adding attractive navigation buttons.

  2. In the Property inspector, click the folder (Browse for File) icon.

    Alternatively, choose ModifyMake Link or press Ctrl+L (figs/command.jpg-L). In any case, the Select File dialog box opens (see Figure 4-3).

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

    The file should be a Web page that's part of your Web site. In other words, it should be in the local root folder (see Section 1.3), or in a folder therein.

    If you try to link to a file outside the root folder, Dreamweaver alerts you to this problem, and offers to copy the file into the root folder. Accept the offer. Remember: For a Web site, the root folder is like the edges of the known universe; nothing exists outside it.

    The Select File dialog box looks slightly different in Windows (top) and Mac OS X 10.3 (bottom), but either way, it lets you browse your computer to select the file you wish to link to.

    From the Relative To pop-up menu, you can choose what type of link to create桪ocument or Site Root relative. Since root-relative links may not work when you preview your pages on your computer, choosing Document from the pop-up menu is almost always your best bet.

    Whichever you choose, Dreamweaver remembers your selection and uses it the next time you create a link. Keep this quirk in mind if you suddenly find that your links are not working when you preview your pages. Odds are you accidentally selected Site Root at some point, and Dreamweaver continued writing site root-relative links.
  4. From the Relative To menu, choose the type of link桪ocument or Site Root.

    As noted earlier in this chapter, document-relative links are the best choice. Rootrelative links (which is short for Site Root-relative links) don't work when you preview the Web site on your own computer. (They do, however, work once you move them to your Web server.)


    Get in the habit of double-checking this pop-up menu. As discussed in Figure 4-3, Dreamweaver remembers your selection and uses it the next time you create a link. If you inadvertently choose Site Root here, Dreamweaver will quietly continue to use Site Root-relative paths for creating hyperlinks and inserting graphics. Furthermore, you may not realize your mistake; depending on your Preferences setting (Section 4.1.4), root-relative links may work just fine when you press F12 to preview your pages in your Web browser. However, if you were to open your Web site directly using your Web browser's Open command, the same root-relative links and graphics would suddenly stop working. To avoid such confusion, use document-relative links in Dreamweaver.

  5. Click Select (Windows) or Open (Mac) to apply the link.

    The text or image now links to another Web page. If you haven't yet saved the Web page, 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梥ee the box on Section 4.3.

After you apply a link, graphics don't look any different, but linked text appears underlined and colored (using the color defined by the Page Property window, which is shown in Figure 1-11). If you want to take the link for a spin, press F12 to preview the page in your browser, where you can click the link.

4.2.2 Using the Point-to-File Icon

You can also create links in Dreamweaver by dragging from the Property inspector to the Files panel (shown in Figure 4-4). If your site involves a lot of links, learning the Point-to-File tool will save you time and energy.

To use this trick effectively, position your document window and Files window sideby- side, as shown in Figure 4-4.

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

    Targeting Links

    What's the Target menu in the Property inspector for?

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

    The new page can appear (a) right in the browser window, just the way most links work; (b) in a new browser window (choose the _blank option); or (c) in a different frame on the same page (see Chapter 9).

    Make sure that both the Property inspector and Files window are open. To open the Property inspector if it's not on the screen, choose WindowProperties. To open the Files window, choose WindowFiles. (Before using the Files window, you need to first create a local site, as described on Section 1.3.1.)

  2. Drag the Point-to-File icon from the Property inspector onto a Web page in the Files window (see Figure 4-4).

    Alternatively, you can Shift-drag the selected text or image in the document window to any Web page in the Files panel梐 method that bypasses the Property inspector altogether.

    In this figure, the text "Horoscope" is selected in the document window (left). To link to another page, drag from the Point-to-File 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 index.html inside the horoscopes folder. You could also Shift-drag from the text "Horoscopes" to the page mowers.html in the Files window.
  3. After dragging over the correct Web page, release the mouse button.

    The selected text or image in your Web page turns into a link to the file you just pointed to.

4.2.3 Typing (or Pasting) the URL or Path

If you need to link to another Web site, or you feel comfortable with how document- relative links work, you can also simply type the URL or path to the page in the Property inspector. Note that this is the only way to add a link to a page outside of the current Web site.

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

  2. In the Property inspector, type the URL or path to the file in the Link field (see Figure 4-1).

    If the link leads to another Web site, type an absolute URL梩hat is, a complete Web address, starting with http://.

    An easier approach is to copy a complete URL梚ncluding the http://梖rom the Address bar in your browser window. Then paste the address into the Link field.

    To link to another page on your own site, type a document-relative link (see Section 4.1.4 for some examples). You'll be less prone to error if you let Dreamweaver write the correct path using the browsing or point-to-file techniques described above; but typing the path can come in handy when, for instance, you want to create a link to a page you haven't yet created.

    If you're adding an absolute link to a Web site without specifying a Web page, always add a final / to the address. For example, to link to Yahoo, type . The final slash tells the Web server that you're requesting the default page (home page) at

    Although leaving out the slash works too ( ), the server has to do a little extra work to figure out what page to send back, resulting in a slight and unnecessary delay.

    Also include the slash when you provide a link to the default page inside a folder on a site like this: .

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

    The text or image now links to another Web page.

4.2.4 Using the Hyperlink Object

Dreamweaver MX 2004 provides yet another way to add a link. The Hyperlink object on the Common tab of the Insert bar lets you insert a link with many optional properties (see Figure 4-5).

QuickLink Is Quick Work

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

When you're working with links, one extension that really comes in handy is called QuickLink. Created by renowned Dreamweaver guru Tom Muck, this extension instantly turns text into either a mailto or an absolute URL. You can find QuickLink at .

Once you've installed the extension, here's how it works. Suppose you paste the text, "You can download the free PDF viewer at ." To turn into a real link, you can either select the text and then go to the Property inspector and type 梠r, with QuickLink, simply select the text and choose CommandsQuickLink. 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.

QuickLink also converts email addresses into proper mailto links: just select the email address (, say), apply the QuickLink command, and watch as the extension automatically inserts the correct code (mailto: into your page.

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

Unfortunately, only Internet Explorer 6, Mozilla, Netscape 6, and later versions of these actually understand all of these additional properties, and you can only use the hyperlink object to create a new text link. You can't use it to add a link to an image or to text you've already placed on the page.

If you want to give this feature a spin anyway, here's how it works. Start by clicking on the page where you wish to insert a new link. Then:

  1. Choose InsertHyperlink or click the icon on the Insert bar.

    The Hyperlink dialog opens (see Figure 4-5).

  2. Type the text you want to appear in the Text box.

    This is the text that you'll see on the page, and that your audience will click to follow the link.

    To apply these optional properties to an image or existing text, you have a couple of options. You can always go into Code view (as described in Chapter 10) and hand-edit the HTML, but it's easier to use the Tag inspector to access all the properties available to a particular link. (For details see Section 10.6.)
  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 for the link.

    If you want the link to open in the same window, like most links, don't select anything. The targeting option works just like a regular link (see Section 4.2.2).

    The last three options are more interesting.

  5. In the Tab Index box, type a number for the tab order.

    In most newer browsers (Internet Explorer, Mozilla, Safari, and Opera to name a few), you can press the Tab key to step through the links on a page (and boxes on a form). This feature not only provides useful keyboard control of your Web browser, but it's also important for people who can't use the mouse due to disability.

    Normally when you press Tab, the browser highlights links in the order in which they appear in the HTML of the page. The Tab Index, by contrast, lets you control the order in which links light up as a visitor tabs through them.

    For example, you can make your main navigation buttons the first things to highlight when someone presses Tab, even if the buttons are not the first links on the page.

    For the first link in 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 0. The Web browser will highlight that link after the visitor has tabbed through all links that do have a Tab index.

  6. Type a title for the page you're linking to.

    This property is optional. Some Web browsers, like Internet Explorer for Windows and Netscape 7, display this property in a small tooltip window when you move your mouse over the link. Many Macintosh Web browsers, on the other hand, don't display this title at all.

  7. Type a key to define an access key.

    An access key provides a way to trigger a link from the keyboard. Internet Explorer, Netscape 6 and later, and Mozilla understand this property in conjunction with the Alt key. For example, if you type h in the Access key box, a visitor to your page could press Alt+H to mouselessly open that link. Of course, unless those who visit your site are psychic, it's a good idea to provide instructions by adding the access key information to the link: Home Page (Alt+H). In addition, the Macintosh doesn't recognize access keys at all, so no Mac browsers can use this feature.

    Previous Section  < Day Day Up >  Next Section