Navigating Your Site:

Hypertext Links | Linking to Files, Documents | Named Anchors | E-mail Links and Options | Linking Images | Creating Navigation Bar | Modifying Navigation Bar | Navigation Bar Options | Jump Menus

About Hypertext links:

The HTML tag for creating a hypertext link is called an anchor tag or an a tag. Dreamweaver creates an anchor tag for objects, text, or images you create links from. You can create links to other documents and files, and links to specific places in a single document using the a href tag.

For example, if you select the text Home Page in the Document window, then create a link to a file named home.htm, the HTML source code for the link looks like this:

<a href="home.htm">Home Page</a>

If you are creating a link to a specific place in a document, first create a named anchor (for example, a name="MainMenu"). Then create a link within the page that refers to that named anchor (for example, a href="http://www.ezdelta.com/#MainMenu").

Before creating links, make sure you understand how document-relative paths, site root-relative paths, and absolute paths work (see About document locations and paths).

You can create several types of links in a document:

1. A link to another document or to a file, such as a graphic, movie, PDF, or sound file.
2. A named anchor link, which jumps to a specific location within a document.
3. An e-mail link, which creates a new blank e-mail message with the recipient’s address already filled in.
4. Null and script links, which enable you to attach behaviors to an object or to create a link that executes JavaScript code.

Using Dreamweaver, there are several ways to create local links (links between documents in the same site):

• Use the Site map to view, create, change, or delete links.
• In the Document window, select text or a page element, and then use Modify > Make Link to select a file to link to.
• Use the Property inspector, by selecting text or a page element in the document, and then using the Property inspector folder icon or Point-to-File icon to select a file to link to or typing the path of the file.

Note: Typing URLs or paths to a file can lead to incorrect paths and links that don’t work. To ensure that the path is correct, use the folder icon to browse to your link.

• In the Document window, select text or a page element, choose Make Link from the context menu, and then select a file to link to.

To create an external link (to a document on another site), you must type the absolute path (with proper protocol) in the Property inspector. Make sure that you enter the entire path (including http://) when creating external links.

Linking to Files and Documents in your WebSite:

You can use the Property inspector and the Point-to-File icon to create links from an image, an object, or text to another document or file.

To link documents using the Property inspector’s folder icon or link text box:

1. Select text or an image in the Document window’s Design view.

2. Open the Property inspector (Window > Properties), and then do one of the following:

• Click the folder icon to the right of the Link text box to browse to and select a file.

The path to the linked document appears in the URL field. Use the Relative To pop-up menu in the Select HTML File dialog box to indicate whether to make the path document-relative or root-relative, then click Select.

Note: When you change the path type in the Relative To field, Dreamweaver uses your choice as the default path type for any future links until you change the path type again.

• Type the path and filename of the document in the Link text box.

To link to a document in your site, enter a document-relative or site root-relative path. To link to a document outside your site, enter an absolute path including the protocol (such as http://). You can use this approach to enter a link for a file that hasn’t been created yet.

3. From the Target pop-up menu, select a location in which to open the document.

To make the linked document appear somewhere other than in the current window or frame, select an option from the Target pop-up menu on the Property inspector:

• _blank loads the linked document in a new, unnamed browser window.
• _parent loads the linked document in the parent frame or parent window of the frame that contains the link. If the frame containing the link is not nested, then the linked document loads in the full browser window.
• _self loads the linked document in the same frame or window as the link. This target is the default, so you usually don’t have to specify it.
• _top loads the linked document in the full browser window, thereby removing all frames.

Tip: If all the links on your page will be set to the same target, you can specify this target once by choosing Insert > Head Tag > Base and selecting the target information. For information about targeting frames, see Controlling frame content with links.

To link documents using the Point-to-File icon:

1. Select text or an image in the Document window’s Design view.

2. Drag the Point-to-File icon at the right of the Link text box in the Property inspector and point to another open document, a visible anchor in an open document, or a document in the Site panel.
The Link text box updates to show the link.

Note: You can link to an open document only if your documents are not maximized in the Document window. When you point to an open document, that document moves to the foreground of your screen while you are making your selection.

3. Release the mouse button.

To create a link from a selection in an open document:

1. Select text in the Document window.

2. Shift-drag from the selection. The Point-to-File icon appears as you drag.

3. Point to another open document, a visible anchor in an open document, or a document in the Site panel.

Note: You can link to an open document only if your documents are not maximized in the Document window. When you point to an open document, that document moves to the foreground of your screen while you are making your selection.

4. Release the mouse button.

To link documents using the site map and the Point-to-File icon:

1. Expand the Site panel, and then display both the Site Files and the Site Map views by holding down the Site Map icon and choosing Map and Files.

2. Select an HTML file in the site map. The Point-to-File icon appears next to the file.

3. Drag the Point-to-File icon and point to another file in the site map or to a local file in the Site Files view.

4. Release the mouse button.

A hypertext link with the name of the linked file is placed at the bottom of the selected HTML file. This method works well when you are building your site and you want to create links across the site quickly.

Creating and Linking to Named Anchors:

You can use the Property inspector to link to a particular section of a document by first creating named anchors. Named anchors let you set markers in a document, which are often placed at a specific topic or at the top of a document. You can then create links to these named anchors, which quickly take your visitor to the specified position.

Creating a link to a named anchor is a two-step process. First, create a named anchor; then create a link to the named anchor.

To create a named anchor:

In the Document window’s Design view, place the insertion point where you want the named anchor.

Do one of the following:

• Choose Insert > Named Anchor.
• Press Control+Alt+A (Windows) or Command+Option+A (Macintosh).
• Select the Common tab in the Insert bar and click the Named Anchor button.

The Named Anchor dialog box appears.

• In the Anchor Name field, type a name for the anchor.
• The anchor marker appears at the insertion point.

Note: If you do not see the anchor marker, choose View > Visual Aids > Invisible Elements.

To link to a named anchor:

• In the Document window’s Design view, select text or an image to create a link from.
• In the Link text box of the Property inspector, type a number sign (#) and the name of the anchor. For examples:
• 1. To link to an anchor named “top” in the current document, type #top.
• 2. To link to an anchor named “top” in a different document in the same folder, type thefilename.html#top.

Note: Anchor names are case sensitive.

To link to a named anchor using the point-to-file method:

1. Open the document containing the named anchor you want. Note: Choose View > Visual Aids > Invisible Elements to make the anchor visible if you don’t see it.

2. In the Document window’s Design view, select text or an image you want to link from. (If this is another open document, you must switch to it.)

3. Do one of the following:

• Click the Point-to-File icon to the right of the Link text box in the Property inspector and drag it to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.
• Shift-drag in the Document window from the selected text or image to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.

Creating an E-mail Link:

An e-mail link opens a new blank message window (using the mail program associated with the user’s browser) when clicked. In the e-mail message window, the To field is automatically updated with the address specified in the e-mail link.

To create an e-mail link using the Insert E-Mail Link command:

In the Document window’s Design view, position the insertion point where you want the e-mail link to appear, or select the text or image you want to appear as the e-mail link.

Do one of the following to insert the link:

• Choose Insert > E-Mail Link.
• Select the Common tab in the Insert bar, and then click the Insert E-Mail Link button.

The E-Mail Link dialog box appears.

• Complete the dialog box.
• Click OK.

To create an e-mail link using the Property inspector:

Select text or an image in the Document window’s Design view.

• In the Link text box of the Property inspector, type mailto: followed by an e-mail address.

Do not type any spaces between the colon and the e-mail address. For example, type mailto: This e-mail address is being protected from spam bots, you need JavaScript enabled to view it

Setting Email Link options:

The purpose of this dialog box is to create an e-mail link.

Do the following:

• In the Text field, type or edit the text to appear in the document as an e-mail link.
• In the E-Mail field, type the e-mail address that the mail should be addressed to.
  Click OK.

Creating a Navigation Bar:

A navigation bar consists of an image (or set of images) whose display changes based on the actions of a user. Navigation bars often provide an easy way to move between pages and files on a site.

Before using the Insert Navigation Bar command, create a set of images for the display states of each navigation element. (It can be helpful to think of a navigation bar element as a button, because when clicked, it takes the user to another page.)

A navigation bar element can have four states:

1. Up: the image that appears when the user hasn’t yet clicked or interacted with the element.. .

For example, the element in this state looks like it hasn’t been clicked, bright and fresh.

2. Over: the image that appears when the pointer is moved over the Up image. The element’s appearance changes...

For example, it may get lighter or darker) to let users know they can interact with it.

3. Down: the image that appears after the element has been clicked...

For example, when a user clicks an element, a new page loads and the navigation bar is still displayed, but the clicked element is darkened to show that it’s been selected.

4. Over While Down: the image that appears when the pointer is rolled over the Down image after the element has been clicked...a good practice here is to use the same as the Over #2 setting.

For example, the element appears dimmed or gray. You can use this state as a visual clue to users that this element cannot be clicked again while they are in this part of the site.

Note: You don’t have to include navigation bar images for all four of these states; for example, you may just want Up and Down states.

You can create a navigation bar, copy it to other pages in your site, use it with frames, and edit the page behaviors to show different states as pages are accessed.

Inserting a Navigation Bar:

When you insert a navigation bar, you name the navigation bar elements and select images to use for them.

To Insert a navigation bar:

Do one of the following:

• Choose Insert > Interactive Images > Navigation Bar.
• Select the Common tab of the Insert bar, and then click the Insert Navigation Bar button.

The Insert Navigation Bar dialog box appears.

• Complete the dialog box.
• Click OK.

Modifying a Navigation Bar:

To modify a navigation bar:

• Choose Modify > Navigation Bar.

The Modify Navigation Bar dialog box appears.

• In the Nav Bar Elements list, select the element you want to edit.
• Make changes as necessary.
• Click OK.

[back to top]

Setting Navigation Bar Options:

Each element corresponds to a button with a set of up to four state images. Element names appear in the Nav Bar Elements list. Use the arrow buttons to arrange elements in the navigation bar.

2. In the Up Image text box, click Browse to select the image to display initially.

Note: This field is required; the other image state options are optional.

3. In the Over Image text box, click Browse to select the image to display when the user moves the pointer over the element when the Up image is showing.

4. In the Down Image text box, click Browse to select the image to display after the user has clicked the element.

5. In the Over While Down Image text box, click Browse to select the image to display when the user moves the pointer over the Down image.

6. In the Alternate text box, enter a descriptive name for the element.

Alternate text appears in place of images for text-only browsers or for browsers that have been set to download images manually. Screen readers read alternate text, and some browsers display alternate text when the user mouses over the navigation bar element.

7. In the When Clicked, Go To URL text box, click the Browse button to select a linked file to open, and then choose a location from the pop-up menu where the file will open.

Choose one of the following:

• Select Main Window to open the file in the same window.
• Select a frame in which to open the file if the navigation bar is in a frameset.

Note: If the frame you want to target doesn’t appear in the pop-up menu, close the Insert Navigation Bar dialog box and name the frame.

8. Select Preload Images to download the images when the page loads.

If you don’t select this option, there may be a delay when the user moves the pointer over the rollover image.

9. Select Show “Down Image” Initially to display the selected element in its Down state when the page is displayed instead of its default Up state.

For example, when the home page loads, the “Home” element on the navigation bar should be in its Down state.

When this option is selected, an asterisk appears after the element in the Nav Bar Elements list.

10. In the Inserts pop-up menu choose whether to insert the navigation bar elements Vertically or Horizontally in the document.

11. Select the Use Tables checkbox to insert the navigation bar elements as a table.

12. Click the plus (+) button to add another element to the navigation bar, then repeat the previous steps to define the element.

13. Click OK when you finish adding and defining elements to the navigation bar.

Jump Menu:

To create a jump menu:

Open a document, and then place the insertion point in the Document window.

Do one of the following:

• Choose Insert > Form Object > Jump Menu.
• Select the Form tab in the Insert bar, and then click the Jump Menu button.

The Insert Jump Menu dialog box appears.

• Complete the dialog box.
• Click OK.

The jump menu appears in your document.

Inserting a jump menu:

To insert a jump menu in your document, use the Jump Menu form object.

You can edit an existing jump menu in either of two ways:

1. You can edit and rearrange menu items, change the files to jump to, and change the window in which those files open, by double-clicking an existing Jump Menu action in the Behaviors panel.

2. You can edit the items in the menu just as yo u would edit items in any menu, by selecting the menu and using the List Values button in the Property inspector.

To edit a jump menu using the Behaviors panel:

• Create a jump menu object if there isn’t one already in your documen
• Select the jump menu object and open the Behaviors panel.
• Double-click Jump Menu in the Actions column.
• Make changes as desired in the Jump Menu dialog box, then click OK.