Adding a Link

If all that talk of links gets you confused, don't worry. Links are disruptive, and that's one of the best reasons to use Dreamweaver. If yous tin navigate to a document on your ain computer or anywhere on the Web, you tin can create a link to information technology in Dreamweaver, even if you don't know the kickoff 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 iv-iii) or its keyboard shortcut, equally described in the following steps.

The Property Inspector gives you three ways to add links to a web page: the Link field, the

Figure 4-three. The Property Inspector gives you three ways to add together 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 together a link. (To link to a folio on some other website, y'all need to type the web address into the Belongings Inspector. Turn to Typing (or Pasting) the URL or Path for instructions.)

  1. In the certificate window, select the text or image you desire to link from .

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

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

    Note

    When you add a link to an image, Internet Explorer viii and earlier draws a blueish border around the image, just like linked text has a blue underline. Fortunately, with some elementary CSS, you can get rid of that blueish 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 (⌘-Fifty). In any case, the Select File dialog box opens (meet Effigy 4-4 for Windows, Figure iv-v for Macs).

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

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

    Remember: To a website, the root binder is similar the edges of the known universe—nothing exists exterior of information technology. If you try to link to a file outside the root binder—similar to a file on your desktop—Dreamweaver tells yous it's a trouble and offers to copy the file to the root folder. Take the offer.

    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

    Effigy 4-4. In Windows, utilise the Select File dialog box to browse your estimator to select the target file for a link. When yous gear up your site, you lot tin can tell Dreamweaver whether to use document- or site root-relative links. Withal, if yous ever find the need to temporarily switch to a dissimilar blazon of link (to a root-relative link, for case, if you lot ready your site to apply document-relative links), use the "Relative to" driblet-downwards carte (circled). You lot probably won't e'er need to do this, but Dreamweaver gives you lot the option.

    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.

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

    Note

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

  4. Make sure you select the right blazon of link—certificate- or site root-relative—from the "Relative to" menu .

    Equally noted earlier in this chapter, document-relative links are ordinarily the best choice. Root-relative links (a.1000.a. site root-relative links ) don't work when you preview your site on your own computer. (They practise, however, piece of work once y'all motion them to your spider web server.)

    Annotation

    You can skip step iv; just set the blazon of link you want in the Site Setup window, and so forget about it. Dreamweaver always uses the link type y'all specified there. See Figure 4-one for details.

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

    The text or image at present 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 certificate-relative link. Instead, it displays a dialog box saying that information technology will assign a temporary path for the link until y'all salve the page—come across the box above.

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

You can employ the browse-to-file method when you piece of work in Code view, also: select text in Code view and follow the steps above.

Tip

Cyberspace Explorer displays a colored border around linked images. To go rid of that edge, create a CSS style for the <img> tag (see Creating Styles if y'all're unsure about creating styles). Under the Border category of the CSS Dominion Definition window, set the border style to "none" (run into Adding Borders for more information on CSS borders).

Using the Bespeak-to-File Tool

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

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.

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 Belongings Inspector) to a spider web page in the Files panel (right). In this case, 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 employ this pull a fast one on effectively, position your certificate window and Files panel adjacent.

  1. In the certificate window, select the text or paradigm y'all want to turn into a link .

    Make certain you have both the Holding Inspector and Files panel open up. To open the Belongings Inspector, choose Window→Backdrop. To open the Files window, choose Window→Files. (Before using the Files window, you lot demand to create a local site, as described on Setting Upwardly 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 y'all can Shift-drag the selected text or epitome in the document window to any web page in the Files panel, bypassing the Property Inspector altogether (this method only works in Pattern view, however).

    Tip

    You can also drag a file from the Files console 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 only pointed to.

Note

Bizarre Issues Alert : If you apply two monitors as you build spider web pages, the Bespeak-to-File icon might non work. If your main monitor (the 1 with the Start menu for Windows, or the ane 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 once more, it might! Strange, simply truly infuriating.

Typing (or Pasting) the URL or Path

If you demand to link to another website, or you feel comfortable working with document-relative links, yous can also simply blazon the URL or path to the page into the Holding Inspector. Note that this technique and the hyperlink object tool discussed next are the just means to add together links to pages outside the electric current website.

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

  2. In the Property Inspector'southward Link field (Effigy 4-iii), type the URL (the path) to the file .

    If the link leads to some other website, type an accented URL—that is, a complete spider web address, starting with http:// .

    Tip

    An easier arroyo is to re-create a complete URL—including the http:// office—from the address bar in your browser window and paste it into the Link field.

    To link to a folio on your own site, type a document-relative link (see Link Types in Action for some examples). Letting Dreamweaver write the right path using the signal-to-file or browsing technique described above is a proficient mode to avoid typos. Just typing the path can come up in handy when, say, you desire to create a link to a folio you oasis't notwithstanding created, but know where information technology'll go.

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

    While yous don't necessarily take to hit Enter (Render)—sometimes you can but click elsewhere on the page and keep working—Dreamweaver has been known to forget the link and not apply it. This is true for almost fields in the Property Inspector—so if yous type information directly into the Property Inspector (to create a link, add a title, and and then on) get into the addiction of hitting the Enter (Return) fundamental to make certain your change sticks.

Annotation

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

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

Likewise include the final slash when you lot provide a link to the default page inside a binder on a site, like this: http://world wide web.sawmac.com/dwcs6/. That saves the browser from first requesting a file named dwcs6 , and then requesting the default folio inside the binder dwcs6.

Using the Hyperlink Object

Dreamweaver gives you yet some other way to add a link. The Hyperlink object in the Common category of the Insert console (Figure 4-vii) lets you insert a link with many optional properties. Its only real benefit is that it lets you add text and a link in i 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.

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.

Figure four-seven. The Insert panel's Mutual category includes iii link-related objects: the Hyperlink (to add together 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 yous're still interested, here's how it works. Showtime by clicking on the page where you desire to insert a link. Then:

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

    The Hyperlink dialog box opens (see Figure iv-8). To utilise a link to text already on the folio, select the text offset, and then choose Insert→Hyperlink.

    As an alternative to using this dialog box, you can specify all the options you see here, except the

    Figure 4-eight. As an alternative to using this dialog box, you can specify all the options you see here, except the "Admission fundamental" and "Tab index" backdrop (encounter steps vi and vii below), to existing text or images from the Property Inspector. Also, proceed in mind 1 somewhat special example. If you lot want to add an admission key and tab index to an already existing link, you lot have a couple of options: Go into Code view (every bit described in Chapter vii) and hand-edit the HTML, or use the Tag Inspector to see all the properties available to a particular link. (For details, run into page 362.)

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

    Whatever you blazon here is what you'll come across on the page, and what your audition will click to follow the link. If yous previously selected some text on the page, it shows up in the Text box automatically.

  3. Click the binder icon and search for the page yous desire to link to .

    Alternatively, y'all tin 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 virtually linked pages practice—don't select anything. To brand 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 iii options are more than interesting.

  5. Type a title for the destination folio .

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

  6. Type a central in the "Admission fundamental" box .

    An access central lets you trigger a link from your keyboard. Net Explorer and Safari for Windows empathize this property in conjunction with the Alt key; Alt + Shift + the access key works on Firefox and Google Chrome for Windows; Control + the admission key for Firefox and Safari 3 on Macs; Command + option + the access key for Chrome and Safari 4 and subsequently on Macs; and Shift + Esc + the access cardinal for Opera. For case, if yous type h in the "Access key" box, then a company using Internet Explorer can press Alt+H to mouselessly open up that link. Of grade, unless people who visit your site are psychic, information technology's a practiced idea to provide the admission primal adjacent 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 footstep through the links on a page (and boxes on a form). This feature non only gives you a handy manner to go from link to link from your keyboard, but it likewise lets people who can't use a mouse due to disabilities cycle through the links.

    Normally when you printing Tab, web browsers highlight links in the order they appear in the page'south 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 club, type one hither. Number other links in the order you want the Tab central to follow. If you lot aren't concerned virtually the order of a item link, leave this option bare or type in 0 . The web browser volition highlight that link later the visitor has tabbed through all links that do have a Tab index.

Get Dreamweaver CS6: The Missing Manual now with O'Reilly online learning.

O'Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.