17.1. Linking InternallyAn internal link is one that goes from one page of your site to another. You created the most important internal links when you built your nav bar in Chapter 13, but you probably have some more of this kind of linking to do. If nothing else, the secondary nav choices at the bottom of the main content area could use some destination pages. To create a link to a page of your site, select the string of text that you want to make clickable. For instance, if you're linking the HOME choice in your secondary navigation, select the word HOME. Then go to the Property Inspector and click the folder icon to the right of the Link field. Dreamweaver opens the Select File dialog box. Navigate to the destination page (in this case, the home page of the site, namely index.html), and click OK. Dreamweaver turns the selected text into a link to the designated page, as Figure 17-1 shows. Figure 17-1. Dreamweaver converts the selected text into a link
If you're working on the secondary nav, go ahead and add the rest of the links. Save your template document when you're done, and update the pages of your site. Then open one of the actual pages in Dreamweaver, preview it in a live browser, and test your links. Nothing makes you feel like you're making more progress than getting the links up and running. 17.1.1. Linking to Named AnchorsAssume that you've written a very long page with several different sections of content, like a Frequently Asked Questions page or something to that effect. You might want to add links from the questions at the top of the page to the answers at the bottom. Is such a thing even possible? Of course it is. You just need a few named anchors. A named anchor is a specific link destination somewhere within the page. Named anchors are invisible elements. The visitor doesn't see them on the page, but just because they're invisible doesn't mean they're not useful. When the visitor follows a link to a named anchor, the browser jumps to the anchor point immediately and positions it as close to the top of the browser window as possible.
If you're building a Frequently Asked Questions page, then, the link for each question goes to a different named anchor. All you have to do is place the named anchors on your page. 17.1.2. Inserting a named anchorTo add a named anchor to your page, choose an insertion point in the document window, usually to the left or immediately above the content to which you want to link. Then click the Named Anchor object in the Insert panel (see Figure 17-2). If you don't see the Named Anchor object, set the Insert panel's menu to Common. Figure 17-2. The Named Anchor object iconThe Named Anchor dialog box shown in Figure 17-3 appears. Type a brief but descriptive name for the anchor, and click OK. (The name can't contain spaces, and it can't start with a number.) Dreamweaver places the anchor in the page as a visible icon, as Figure 17-4 shows, but in the browser, the element is invisible. Figure 17-3. Naming an anchor in the Named Anchor dialog box
Feel free to insert as many named anchors as your page requires. Just make sure they all have different names. 17.1.3. Linking to a named anchorTo link to a named anchor, select the text that you want to make clickable, as before. Then, instead of clicking the folder icon to the right of the Link field in the Property Inspector, hold down the mouse button on the Point To File icon between the Link field and the folder icon. Figure 17-4. The named anchor object looks like an anchorStill holding down the mouse button, drag the Point To File icon to the named anchor in the document window to which you want to link. When the link appears in the Link field of the Property Inspector, release the mouse button. 17.1.4. Providing a way backWhen you're dealing with a dozen or more named anchors on a Frequently Asked Questions page, it's good designer etiquette to include a "Back to top" link after each section of text in the body of the page so that the visitor can jump back to the list of questions at the top without having to scroll. To do this, follow these steps:
17.1.5. Opening the Destination Page in a Pop-up WindowNormally, Dreamweaver loads the destination page in the main browser window, replacing the current page. If you prefer, you can load the destination page in a pop-up window instead:
To test your pop up, preview the page in a live browser window, and click the pop up's link, as demonstrated in Figure 17-8. Figure 17-8. Test your pop up in a live browser window
To add a Close link to the pop-up window, open the pop-up page in Dreamweaver, and select the text that the visitor clicks to close the pop up. Then go to the Property Inspector, and type javascript: window.close(); in the Link field, as shown in Figure 17-9. Be sure to type all the punctuation exactly as it appears. Don't skip the colon, period, parentheses, or semicolon! Figure 17-9. Adding a Close link to the popup page |