Understanding document locations and paths



Understanding document locations and paths

Understanding the file path between the document you’re linking from and the document you’re linking to is essential to creating links.

Each web page has a unique address, called a Uniform Resource Locator (URL). For more information on URLs, see the World Wide Web Consortium website on naming and addressing at Addressing/.

However, when you create a local link (a link from one document to another on the same site), you generally don’t specify the entire URL of the document you’re linking to; instead, you specify a relative path from the current document or from the site’s root folder.

There are three types of link paths:

• Absolute paths (such as ). For more information, see Absolute paths.

• Document-relative paths (such as dreamweaver/contents.html). For more information, see Document-relative paths.

• Site root-relative paths (such as /support/dreamweaver/contents.html). For more information, see Site root-relative paths.

Using Dreamweaver, you can easily select the type of document path to create for your links (see Linking files and documents).

Note: It is best to use the type of linking you prefer and are most comfortable with--either site or document relative. Browsing to links, as opposed to typing in the paths, ensures that you always enter the right path.

Absolute paths

Absolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for web pages). For example, is an absolute path.

You must use an absolute path to link to a document on another server. While you can also use absolute-path links for local links (to documents in the same site), that approach is discouraged--if you move the site to another domain, all of your local absolute-path links will break. Using relative paths for local links also provides greater flexibility if you need to move files within your site.

Note: When inserting images (not links): if you use an absolute path to an image that resides on a remote server and is not available on the local hard drive, you will not be able to view the image in your document window. Instead, you must preview the document in a browser to see it. If possible, use document or site root-relative paths for images. For more information, see Inserting an image.

Document-relative paths

Document-relative paths are the most appropriate paths to use for local links in most websites. They’re particularly useful when the current document and the linked document are in the same folder and are likely to remain together. You can also use a document-relative path to link to a document in another folder by specifying the path through the folder hierarchy from the current document to the linked document.

The basic idea of document-relative paths is to omit the part of the absolute URL that is the same for both the current document and the linked document, providing only the portion of the path that differs.

For example, suppose you have a site with the following structure:

[pic]

You create links from contents.html to other files as follows:

• To link from contents.html to hours.html (both files are in the same folder), the filename is the relative path: hours.html.

• To link to tips.html (in the subfolder named resources), use the relative path resources/tips.html.

Each forward slash (/) represents moving down one level in the folder hierarchy.

• To link to index.html (in the parent folder, one level above contents.html), use the relative path ../index.html.

Each ../ represents moving up one level the folder hierarchy.

• To link to catalog.html (in a different subfolder of the parent folder), use the relative path ../products/catalog.html.

The ../ moves up to the parent folder; the products/ moves down into the products subfolder.

When you move a group of files as a group--for example, when you move an entire folder, so that all the files inside that folder retain the same relative paths to each other--you don’t need to update document-relative links between those files. However, when you move an individual file that contains document-relative links, or an individual file that’s linked to by a document-relative link, you do need to update those links. (If you move or rename files using the Files panel, Dreamweaver updates all relevant links automatically.)

Site root-relative paths

Site root-relative paths provide the path from the site’s root folder to a document. You may want to use these types of paths if you are working on a large website that uses several servers, or one server that hosts several different sites. However, if you are not familiar with this type of path, you may want to stick to document-relative paths.

A site root-relative path begins with a leading forward slash, which stands for the site root folder. For example, /support/tips.html is a site root-relative path to a file (tips.html) in the support subfolder of the site’s root folder.

A site root-relative path often provides the best way to specify links in a website in which you need to frequently move HTML files from one folder to another. When you move a document that contains root-relative links, you don’t need to change the links; for example, if your HTML files use root-relative links for dependent files (such as images), then if you move an HTML file, its dependent-file links are still valid.

However, when you move or rename the documents linked to with root-relative links, you do need to update those links, even if the documents’ paths relative to each other haven’t changed. For example, if you move a folder, all root-relative links to files within that folder must be updated. (If you move or rename files using the Files panel, Dreamweaver updates all relevant links automatically.)

Jump menus

A jump menu is a pop-up menu in a document, visible to your site visitors, listing options that link to documents or files. You can create links to documents in your website, links to documents on other websites, e-mail links, links to graphics, or links to any file type that can be opened in a browser.

A jump menu can contain three basic components:

• (Optional) A menu selection prompt, such as a category description for the menu items, or instructions, such as "Choose one:"

• (Required) A list of linked menu items: a user selects an option and a linked document or file opens.

• (Optional) A Go button.

Related topics

• Inserting jump menus (copied into this document)

Inserting jump menus

Jump menus let you associate URLs with options in a pop-up menu list. By choosing an item from the list, the user is redirected (or "jumps") to the specified URL. Jump menus are inserted within the Jump Menu form object.

To insert a jump menu:

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

2. Do one of the following:

o Select Insert > Form > Jump Menu.

o In the Form category of the Insert bar, click the Jump Menu button.

The Insert Jump Menu dialog box appears.

[pic]

3. Complete the dialog box.

For more information, see Setting Insert Jump Menu options.

4. Click OK.

The jump menu appears in your document.

Related topics

• Jump menus

• Editing jump menu items

• Troubleshooting jump menus

Editing jump menu items

To edit jump menu items, you can change the list order or the file an item links to, or you can add, delete, or rename an item.

To change the location in which a linked file opens, or to add or change a menu selection prompt, you must use the Behaviors panel (see Jump Menu).

To edit a jump menu item using the Property inspector:

1. Select Window > Properties to open the Property inspector, if it isn’t open.

2. In the Document window’s Design view, click the jump menu object to select it.

The List/Menu icon appears in the Property inspector.

3. In the Property inspector, click the List Values button.

The List Values dialog box appears.

[pic]

4. Make changes to the menu items as necessary, and then click OK.

Related topics

• Jump menus

• Inserting jump menus

• Troubleshooting jump menus

Troubleshooting jump menus

After a user selects a jump menu item, there is no way to reselect that menu item if the user navigates back to that page, or if the Open URL In text box specifies a frame. There are two ways to work around this problem:

• Use a menu selection prompt, such as a category, or a user instruction, such as "Choose one:". The menu selection prompt is reselected automatically after each menu selection.

• Use a Go button, which allows a user to revisit the currently chosen link.

Note: Select only one of these options per jump menu, in the Insert Jump Menu dialog box, because they apply to an entire jump menu.

Related topics

• Jump menus

• Inserting jump menus

• Editing jump menu items

(end of copy include)

Navigation bars

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.

[pic]

A navigation bar element can have four states:

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

[pic]

• 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) to let users know they can interact with it.

[pic]

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

• Over While Down: the image that appears when the pointer is rolled over the Down image after the element has been clicked.

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.

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.

Related topics

• Using navigation bars

Using navigation bars

A navigation bar consists of an image (or set of images) whose display changes based on the actions of a user.

Before using the Insert Navigation Bar command, you must 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.)

Once you create a navigation bar for a document, you can add or remove images them from the navigation bar using the Modify Navigation Bar command. Use this command to change an image or set of images, to change which file opens when an element is clicked, to select a different window or frame in which to open a file, and to reorder the images.

This section covers the following topics:

• Inserting a navigation bar

• Modifying a navigation bar

Related topics

• Navigation bars (begin copy include)

Inserting a navigation bar

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

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

To create a navigation bar:

1. Do one of the following:

o Select Insert > Image Objects > Navigation Bar.

o In the Common category of the Insert bar, click the Images menu and select the Insert Navigation Bar button.

The Insert Navigation Bar dialog box appears.

[pic]

2. Complete the dialog box.

For more information, see Setting Navigation Bar options.

3. Click OK.

Related topics

• Navigation bars

• Modifying a navigation bar

Modifying a navigation bar

Once you create a navigation bar for a document, you can add images to or remove them from the navigation bar by using the Modify Navigation Bar command.

To modify a navigation bar:

1. Select the navigation bar in the active page.

2. Select Modify > Navigation Bar.

The Modify Navigation Bar dialog box appears.

[pic]

3. In the Nav Bar Elements list, select the element you want to edit.

4. Make changes as necessary.

For more information, see Setting Navigation Bar options.

5. Click OK.

Related topics

• Navigation bars

• Inserting a navigation bar

(end copy include)

Using image maps

An image map is an image that has been divided into regions, or "hotspots"; when a user clicks a hotspot, an action occurs (for example, a new file opens).

This section covers the following topics:

• Inserting client-side image maps

• Modifying an image map

Related topics

• About image maps

Inserting client-side image maps

When you insert a client-side image map, you create a hotspot area, and then define a link that opens when a user clicks the hotspot area.

Note: You can create multiple hotspot areas, but they are part of the same image map.

To create a client-side image map:

1. In the Document window, select the image.

2. In the Property inspector, click the expander arrow in the lower right corner to see all properties.

3. In the Map Name text box, enter a unique name for the image map.

Note: If you are using multiple image maps in the same document, make sure each map has a unique name.

4. To define the image map areas, do one of the following:

o Select the circle tool and drag the pointer over the image to create a circular hotspot.

o Select the rectangle tool and drag the pointer over the image to create a rectangular hotspot.

o Select the polygon tool and define an irregularly shaped hotspot by clicking once for each corner point. Click the arrow tool to close the shape.

After you create the hotspot, the hotspot Property inspector appears.

5. Complete the hotspot Property inspector.

For more information, see Setting the Hotspot Property inspector options.

6. When you finish mapping the image, click a blank area in the document to change the Property inspector.

Related topics

• About image maps

• Modifying an image map

Modifying an image map

You can easily edit the hotspots you create in an image map. You can move a hotspot area, resize hotspots, or move a hotspot forward or back in layer.

You can also copy an image with hotspots from one document to another, or copy one or more hotspots from an image and paste them on another image; hotspots associated with the image are also copied to the new document.

To select multiple hotspots in an image map:

1. Use the pointer hotspot tool to select a hotspot.

2. Do one of the following:

o Shift-click the other hotspots you want to select.

o Press Control+A (Windows) or Command+A (Macintosh) to select all of the hotspots.

To move a hotspot:

1. Use the pointer hotspot tool to select the hotspot you want to move.

2. Do one of the following:

o Drag the hotspot to a new area.

o Use the Shift + arrow keys to move a hotspot by 10 pixels in the selected direction.

o Use the arrow keys to move a hotspot by 1 pixel in the selected direction.

To resize a hotspot:

1. Use the pointer hotspot tool to select the hotspot you want to resize.

2. Drag a hotspot selector handle to change the size or shape of the hotspot.

Related topics

• About image maps

• Inserting client-side image maps

Attaching JavaScript behaviors to links

You can attach a behavior to any link in a document (see Applying a behavior). Consider using the following behaviors when you insert linked elements into documents:

Set Text of Status Bar determines the text of a message and displays it in the status bar at the bottom left of the browser window. For example, you can use this action to describe the destination of a link in the status bar instead of showing the URL associated with it. (See Set Text of Status Bar.)

Open Browser Window opens a URL in a new window. You can specify the properties of the new window, including its size, attributes (whether it is resizable, has a menu bar, and so on), and name. (See Open Browser Window.)

Jump Menu edits a jump menu. You can change the menu list, specify a different linked file, or change the browser location in which the linked document opens. (See Jump Menu.)

Set Nav Bar Image changes how a navigation bar behaves. Use this behavior to customize how the images in a navigation bar display. For example, when the pointer is over part of the navigation bar, the display of other images in the navigation bar or in the document change. (See Set Nav Bar Image.)

Checking for broken, external, and orphaned links

Use the Check Links feature to search for broken links and unreferenced--also known as orphaned--files (files that still exist in the site but no other files in the site link to) in an open file, a portion of a local site, or an entire local site.

The only links that Dreamweaver verifies are links to documents within the site; Dreamweaver compiles a list of external links that appear in the selected document or documents, but does not verify them.

To check links within the current document:

1. Save the file to a location within your local Dreamweaver site.

2. Select File > Check Page > Check Links.

The Broken Links report appears in the Link Checker panel (in the Results panel group).

3. In the Link Checker panel, select External Links from the Show pop-up menu to view another report.

The External Links report appears in the Link Checker panel (in the Results panel group).

Tip: You can check for orphaned files when you check links across an entire site.

4. To save the report, click the Save Report button in the Link Checker panel.

Note: The target browser report is a temporary file--it will be lost if you don’t save it.

To check links within a portion of a local site:

1. In the Files panel, select a site from the Current Sites pop-up menu.

2. In Local view, select the files or folders to check.

3. Initiate the check by doing one of the following:

o Right-click (Windows) or Control-click (Macintosh) one of the selected files, and then select Check Links > Selected Files/Folders from the context menu.

o Select File > Check Page > Check Links.

The Broken Links report appears in the Link Checker panel (in the Results panel group).

4. In the Link Checker panel, select External Links from the Show pop-up menu to view another report.

The External Links report appears in the Link Checker panel (in the Results panel group).

Tip: You can check for orphaned files when you check links across an entire site (see the next procedure).

5. To save a report, click the Save Report button in the Link Checker panel.

To check links in the entire site:

1. In the Files panel, select a site from the Current Sites pop-up menu.

2. Select Site > Check Links Sitewide.

The Broken Links report appears in the Link Checker panel (in the Results panel group).

3. In the Link Checker panel, select External Links or Orphaned Files from the Show pop-up menu to view another report.

A list of files that fit the report type you selected appears in the Link Checker panel.

Note: If you select Orphaned Files as your report type, you can delete orphaned files from the Link Checker panel directly by selecting a file from the list and pressing the Delete key.

4. To save a report, click the Save Report button in the Link Checker panel.

Fixing broken links

After you run a links reports, you can fix broken links and image references directly in the Link Checker panel, or you can open files from the list and fix links in the Property inspector.

To fix links in the Link Checker panel:

1. Run a link check report (see Checking for broken, external, and orphaned links).

2. In the Broken Links column (not the Files column) of the Link Checker panel (in the Results panel group), select the broken link.

A folder icon appears next to the broken link.

3. Click the folder icon to browse to the correct file to link to, or type the correct path and filename.

4. Press Tab or Enter (Windows) or Return (Macintosh).

If there are other broken references to this same file, a dialog box appears prompting you to fix the references in the other files as well. Click Yes to have Dreamweaver update all the documents on the list that reference this file. Click No to have Dreamweaver update the current reference only.

Note: If Enable File Check In and Check Out is turned on for the site, Dreamweaver attempts to check out files that require changes. If it cannot check out a file, Dreamweaver displays a warning dialog box and leaves broken references unchanged. See Checking in and checking out files.

To fix links in the Property inspector:

1. Run a link check report (see Checking for broken, external, and orphaned links).

2. In the Link Checker panel (in the Results panel group), double-click an entry in the File column.

Dreamweaver opens the document, selects the offending image or link, and highlights the path and filename in the Property inspector. (If the Property inspector is not visible, select Window > Properties to open it.)

3. To set a new path and filename in the Property inspector, click the folder icon to browse to the correct file, or type over the highlighted text.

If you are updating an image reference and the new image appears at the incorrect size, click the W and H labels in the Property inspector or click the Refresh button to reset the height and width values. The W and H labels change from bold to normal type.

4. Save the file.

As links are fixed, their entries disappear from the Link Checker list. If an entry still appears in the list after you enter a new path or filename in the Link Checker (or after you save changes in the Property inspector), it means that Dreamweaver cannot find the new file and still considers the link broken.

Opening linked documents in Dreamweaver

Links are not active within Dreamweaver; that is, you cannot open a linked document by clicking the link in the Document window.

To open linked documents in Dreamweaver, do one of the following:

• Select the link and select Modify > Open Linked Page.

• Press Control (Windows) or Command (Macintosh) and double-click the link.

Note: The linked document must reside on your local disk.

Related topics

• Previewing and testing pages in browsers

• Checking for broken, external, and orphaned links

• Fixing broken links

Begin copy of reference section for this topic:

Setting the Named Anchor option

The purpose of this dialog box is to provide a name for a named anchor.

To specify the name for a named anchor:

1. Enter a name for the named anchor.

Anchor names cannot contain spaces and should not be placed inside a layer.

2. Press OK.

Related topics

• Linking to a specific place in a document

Setting hyperlink options

The purpose of this dialog box is to create a hyperlink.

To set the options for a hyperlink:

1. In the Text text box, enter the text to appear as a hyperlink in the document.

2. In the Link text box, enter the name of the file to link to, or click the folder icon to browse to and select the file.

3. In the Target pop-up menu, select the window in which the file should open in the Target text box.

The names of all the frames you’ve named in the current document appear in the pop-up list. If you specify a frame that doesn’t exist, when the document opens in a browser, the linked page loads into a new window that has the name you specified.

You can also select from the following reserved target names:

o _blank loads the linked file into a new, unnamed browser window.

o _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.

o _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.

o _top loads the linked file into the full browser window, thereby removing all frames.

4. In the Tab Index text box, enter a number for the tab order.

5. In the Title text box, enter a title for the hyperlink.

6. In the Access Key text box, enter a keyboard equivalent (one letter) to select the hyperlink in the browser.

Related topics

• Creating an e-mail link

Setting E-mail Link options

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

To set the options for an e-mail link:

1. In the Text text box, type or edit the text to appear in the document as an e-mail link.

2. In the E-Mail text box, type the e-mail address that the mail should be addressed to.

3. Click OK.

Related topics

• Creating an e-mail link

Setting Insert Jump Menu options

The purpose of this dialog box is to set up a jump menu.

To set the options for jump menus:

1. Click the Plus (+) button to add a menu item.

Click the button again to add additional menu items. Select a menu item and click the Minus (-) button to remove an item.

2. Select a menu item, and then use the arrow keys to move it up or down in the list.

3. In the Text text box, type the text you want to appear in the menu list for a menu item.

To use a menu selection prompt, such as "Choose One," enter your selection text in the Text text box for the first menu item.

4. In the When Selected Go To URL text box, click the folder icon to browse to the file to open, or type the file path in the text box.

5. In the Open URLs In pop-up menu, select a location in which to open the file:

o Main Window opens the file in the same window.

o Frame opens the file in the frame you select.

Note: If the frame you want to target doesn’t appear on the Open URLs In pop-up menu, close the Insert Jump Menu dialog box, and name the frame in your document. For information about naming a frame, see Viewing and setting frame properties and attributes.

6. In the Menu Name text box, type a name for the menu item.

7. Under Options, select Insert Go Button After Menu to add a Go button instead of a menu selection prompt.

8. Under Options, select Select First Item After URL Change if you use a menu selection prompt (such as Choose One).

9. Click OK.

Related topics

• Inserting jump menus

• Troubleshooting jump menus

Setting Insert Jump Menu options

The purpose of this dialog box is to set up a jump menu.

To set the options for jump menus:

1. Click the Plus (+) button to add a menu item.

Click the button again to add additional menu items. Select a menu item and click the Minus (-) button to remove an item.

2. Select a menu item, and then use the arrow keys to move it up or down in the list.

3. In the Text text box, type the text you want to appear in the menu list for a menu item.

To use a menu selection prompt, such as "Choose One," enter your selection text in the Text text box for the first menu item.

4. In the When Selected Go To URL text box, click the folder icon to browse to the file to open, or type the file path in the text box.

5. In the Open URLs In pop-up menu, select a location in which to open the file:

o Main Window opens the file in the same window.

o Frame opens the file in the frame you select.

Note: If the frame you want to target doesn’t appear on the Open URLs In pop-up menu, close the Insert Jump Menu dialog box, and name the frame in your document. For information about naming a frame, see Viewing and setting frame properties and attributes.

6. In the Menu Name text box, type a name for the menu item.

7. Under Options, select Insert Go Button After Menu to add a Go button instead of a menu selection prompt.

8. Under Options, select Select First Item After URL Change if you use a menu selection prompt (such as Choose One).

9. Click OK.

Related topics

• Inserting jump menus

• Troubleshooting jump menus

Setting Insert Jump Menu options

The purpose of this dialog box is to set up a jump menu.

To set the options for jump menus:

1. Click the Plus (+) button to add a menu item.

Click the button again to add additional menu items. Select a menu item and click the Minus (-) button to remove an item.

2. Select a menu item, and then use the arrow keys to move it up or down in the list.

3. In the Text text box, type the text you want to appear in the menu list for a menu item.

To use a menu selection prompt, such as "Choose One," enter your selection text in the Text text box for the first menu item.

4. In the When Selected Go To URL text box, click the folder icon to browse to the file to open, or type the file path in the text box.

5. In the Open URLs In pop-up menu, select a location in which to open the file:

o Main Window opens the file in the same window.

o Frame opens the file in the frame you select.

Note: If the frame you want to target doesn’t appear on the Open URLs In pop-up menu, close the Insert Jump Menu dialog box, and name the frame in your document. For information about naming a frame, see Viewing and setting frame properties and attributes.

6. In the Menu Name text box, type a name for the menu item.

7. Under Options, select Insert Go Button After Menu to add a Go button instead of a menu selection prompt.

8. Under Options, select Select First Item After URL Change if you use a menu selection prompt (such as Choose One).

9. Click OK.

Related topics

• Inserting jump menus

• Troubleshooting jump menus

Setting Insert Jump Menu options

The purpose of this dialog box is to set up a jump menu.

To set the options for jump menus:

1. Click the Plus (+) button to add a menu item.

Click the button again to add additional menu items. Select a menu item and click the Minus (-) button to remove an item.

2. Select a menu item, and then use the arrow keys to move it up or down in the list.

3. In the Text text box, type the text you want to appear in the menu list for a menu item.

To use a menu selection prompt, such as "Choose One," enter your selection text in the Text text box for the first menu item.

4. In the When Selected Go To URL text box, click the folder icon to browse to the file to open, or type the file path in the text box.

5. In the Open URLs In pop-up menu, select a location in which to open the file:

o Main Window opens the file in the same window.

o Frame opens the file in the frame you select.

Note: If the frame you want to target doesn’t appear on the Open URLs In pop-up menu, close the Insert Jump Menu dialog box, and name the frame in your document. For information about naming a frame, see Viewing and setting frame properties and attributes.

6. In the Menu Name text box, type a name for the menu item.

7. Under Options, select Insert Go Button After Menu to add a Go button instead of a menu selection prompt.

8. Under Options, select Select First Item After URL Change if you use a menu selection prompt (such as Choose One).

9. Click OK.

Related topics

• Inserting jump menus

• Troubleshooting jump menus

|[pic] |

|  |[pic][pic][pic] |

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download