Section 4.2. Adding a Link

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 details of how they're configured.

4.2.1. Browsing for a File

To create a link from one 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, as described in the following steps.

Figure 4-2. The Property inspector provides three ways to add links on a Web page.

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 Browse for File 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 linka great trick for adding attractive navigation buttons .

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

    Alternatively, choose Modify Make Link or press Ctrl+L ( -L). In any case, the Select File dialog box opens (see Figure 4-3).

  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 Web site. In other words, it should be in the local root folder (see Section 1.3.1), 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.

  4. Make sure the correct type of linkDocument or Site Rootis selected from the "Relative to" menu .

    As noted earlier in this chapter, document-relative links are the best choice. Root-relative links (which is short for Site Rootrelative 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.)


    Note: Dreamweaver 8 adds a new preference feature, which lets you define what type of linksdocument-relative or root-relativeyou wish to use for most of the links on your site. To set this preference, click the "Change default Link Relative To" link in the Select File dialog box (see the circle in Figure 4-3, bottom). The Site Definition window opens. Click either the Document or Site root radio button next to the text "Links Relative to," and then click OK to close the window and set this preference. As stated before, the Document option is usually your best bet. (You can still change the link-type setting individually for each link as you create it. The preference-setting option just sets up a "default" that Dreamweaver will use unless you specify otherwise .)
  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 into 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 pagesee the box on Section 4.4.

Figure 4-3. The Select File dialog box looks slightly different in Windows (top) and the Mac (bottom), but either way, it lets you browse your computer to select the file you wish to link to. From the "Relative to" popup menu (circled in the top figure), you can choose what type of link to createDocument- or Site Rootrelative. 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. You can tell Dreamweaver which type of link to use for your site in the Site Definition window, as described in the note on Section 4.1.5. Short version: just click the link named "Change default Link Relative To" (circled in the bottom figure) and choose from the window that appears. If you find that your links aren't working when you preview your pages, odds are you have the Site Root option set, or you've been selecting Site Root from the "Relative to" pop-up menu.

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 Properties window, which is shown in Figure 1-15). If you want to take the link for a spin, press F12 (Option-F12 on the Mac) to preview the page in your browser, where you can click the link.


Tip: You can also drag a file from the Files panel into the Link box (in the Property inspector) to link to it.

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 to use the Point-to-File tool will save you time and energy.

Figure 4-4. In this figure, the text "Horoscopes" (circled) is selected in the document window. 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 index.html in the Files panel to create the same link.

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

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

    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 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 Section 1.3.2.)

  2. 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 manual insertion 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-2) .

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


    Tip: An easier approach is to copy a complete URLincluding the http:// from the address bar in your browser window and 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.2 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.


    Tip: If you're adding an absolute link to a Web site without specifying a Web page, add a final / to 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 (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 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: http://www.sawmac.com/dwmx2004/.
    FREQUENTLY ASKED QUESTION
    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 (for details about this increasingly obsolete technology, see the online chapter about frames, which you can find at www.sawmac.com/dw8/ frames .pdf).


  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 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.

Unfortunately, not all browsers 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 Insert Hyperlink or click the icon on the Insert bar .

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

    Figure 4-5. To apply the optional properties in this dialog box to an image or existing text, you have a couple of options. You can always go into Code view (as described in Chapter 9) 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 9.4.)
  2. Type the text you want to appear in the Text box .

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

  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 will work just like a regular link (see Section 4.2.3).

    The last three options are more interesting.

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

    This property is optional. Most Web browsers display this property in a small tooltip window when you move your mouse over the link.

  6. 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, Safari, and Firefox understand this property in conjunction with the Alt key (Control key on the Mac). For example, if you type h in the Access key box, a visitor to your page could press Alt+H (Control-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 next to the link itself: Home Page (Alt+H).

  7. 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 (Option-Tab in Safari) 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 they aren't 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 . 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 toolsincluding those written by independent, non-Macromedia programmersto your copy of the program. You can read a lot more about these add-on programs, called extensions , in Chapter 19.

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 www.tom-muck.com/extensions/.

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

QuickLink also converts email addresses into proper mailto links: just select the email address (missing@sawmac.com, 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 Section 19.1 for more on keyboard shortcuts.)




Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net