Section 17.1. Linking Internally


17.1. Linking Internally

An 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


TECHTALK

An internal link is one that goes from one page of your site to another.


TIP

When you created your graphical nav bar, you added alternate text to each image. Now, when the visitor hovers over the Flattery button, for instance, a message appears: "Go to the Flattery section" or some such.

You can do the very same thing for non-image, purely textual hyperlinks. First click anywhere inside the text link in the document window, and then go to the Tag Inspector. (If you don't see the Tag Inspector on screen, choose Window Attributes from the main menu, or press F9.) Then, next to the title attribute, type the alternate text for the link.

TIP

To remove a link, click anywhere inside the link text in the document window. Then go to the Property Inspector, delete the value in the Link field, and press Enter or Return.


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 Anchors

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

TECHTALK

A named anchor is a specific link destination within a web page.


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 anchor

To 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 icon


The 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


TIP

All the named anchors on a page should have different names, but you might associate similar anchors by using the same basic name and then attaching a qualifier or number, such as answer_poisonous, answer_ingredients, and answer_artificial; or answer01, answer02, and answer03.

The browser doesn't treat similarly named anchors as any kind of logical group. You do this simply for your own benefit.


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 anchor

To 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 anchor


Still 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 back

When 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:

  1. Open the template document in Dreamweaver.

  2. Click anywhere inside the main content area.

  3. Go to the Tag Selector at the bottom of the document window, and click the <td> or <div> tag.

  4. Press the right arrow key to set the insertion point at the very beginning of the main content area.

  5. Insert a named anchor called top at this location.

  6. Save the template document, and update the pages of your site.

  7. Open the Frequently Asked Questions page in Dreamweaver. You should see the new named anchor at the top of the main content area, similar to Figure 17-5.

  8. Add or select the "Back to top" text at the bottom of an answer section.

  9. Go to the Property Inspector, and drag the Point To File icon to the named anchor at the top of the main content area. Dreamweaver adds the link (see Figure 17-5).

    Figure 17-5. The "Back to top" link points to a named anchor at the very top of the main content area

  10. Repeat steps 8 and 9 for the remainder of the answers on the page.

17.1.5. Opening the Destination Page in a Pop-up Window

Normally, 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:

  1. In the document window, select the text that you want to make clickable.

  2. Go to the Property Inspector, type # in the Link field, and press Enter or Return. The number sign or hash mark stands for a self-referential linka link that goes nowhere.

  3. With the link selected in the document window, open the Behaviors panel by choosing Window Behaviors from the main menu.

  4. TIP

    If you plan on using pop-ups frequently on your site, you might consider creating a special template document for pop-up pages. When you need to add a new pop-up to the site, simply create a new page from the pop-up template.


  5. The Open Browser Window dialog box in Figure 17-7 appears. Click the Browse button to the right of the URL To Display field, and navigate to the page that should open in the pop up.

    Figure 17-7. Defining the pop-up window

    TECHTALK

    A self-referential link links to its own page. In other words, it goes nowhere.


    HOTKEY

    Press Shift-F4 to toggle the Behaviors panel.


  6. Specify a width and height for the pop-up window in the appropriate fields. Both values are in pixels.

  7. Under Attributes, check the features that you want to add to your pop up. You don't need to check any of them, although at a minimum the option for scrollbars is a wise choice.

  8. In the Window Name field, type a brief but descriptive name for the window. The name popup is as good as any.

  9. Click OK. Dreamweaver adds the necessary JavaScript code to your page.

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


BEHIND THE SCENES

One of the drawbacks of pop-up windows is that many visitors find them annoying, so much so that they might install pop-up blocker software on their computers to minimize the likelihood of their seeing the things.

Generally speaking, your visitors hate automatic pop ups the most. These are the pop ups that appear as soon as a web page loads. Most blocker software screens them out, and for good reason. When your visitors land on a web page, they want the information that they requested, not the information that they requested plus a bunch of pop-up ads. If you value your visitors, avoid automatic pop-ups at all costs.

The pop ups that you're creating in this chapter are elective, in that the visitor manually clicks a link to cause the pop up to appear. The default settings of most pop-up blockers allow elective pop ups to squeak through. Even so, given the association of pop-up windows with advertisements, use elective pop ups very judiciously on your site.

A final word of caution: Pop ups often cause problems for screen readers and other accessibility tools.


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




Dreamweaver 8 Design and Construction
Dreamweaver 8 Design and Construction (OReilly Digital Studio)
ISBN: 0596101635
EAN: 2147483647
Year: N/A
Pages: 154
Authors: Marc Campbell

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