User Guide Cancel

About linking and navigation

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Learn about linking and navigation in Dreamweaver and absolute, document-relative, and site root-relative paths.

After you’ve set up a Dreamweaver site to store your website documents and have created HTML pages, you’ll want to create connections from your documents to other documents.

Dreamweaver provides several ways to create links to documents, images, multimedia files, or downloadable software. You can establish links to any text or image anywhere within a document, including text or images in a heading, list, table, absolutely-positioned element (AP element), or frame.

There are several different ways of creating and managing links. Some web designers prefer to create links to nonexistent pages or files as they work, while others prefer to create all the files and pages first and then add the links. Another way to manage links is to create placeholder pages, in which you add and test links before completing all your site pages.

Absolute, document-relative, and site root-relative paths

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

Each web page has a unique address, called a Uniform Resource Locator (URL). 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 http://www.adobe.com/support/dreamweaver/contents.html).

  • Document-relative paths (such as dreamweaver/contents.html).

  • Site root–relative paths (such as /support/dreamweaver/contents.html).

    Using Dreamweaver, you can easily select the type of document path to create for your links.

Note:

It is best to use the type of linking you prefer and are most comfortable with—either site root- 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, http://www.adobe.com/support/dreamweaver/contents.html. For an image asset, the complete URL might be something like http://www.adobe.com/support/dreamweaver/images/image1.jpg.

You must use an absolute path to link to a document or asset on another server. You can also use absolute paths for local links (to documents in the same site), but 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), you can use an absolute path to an image on a remote server (that is, an image that is not available on the local hard drive).

Document-relative paths

Document-relative paths are usually best for local links in most websites. They’re particularly useful when the current document and the linked document or asset are in the same folder and are likely to remain together. You can also use a document-relative path to link to a document or asset 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 path that is the same for both the current document and the linked document or asset, providing only the portion of the path that differs.

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

  • To link from contents.html to hours.html (both in the same folder), use the relative path hours.html.

  • To link from contents.html to tips.html (in the resources subfolder), use the relative path resources/tips.html. At each slash (/), you move down one level in the folder hierarchy.

  • To link from contents.html to index.html (in the parent folder, one level above contents.html), use the relative path ../index.html. Two dots and a slash (../) moves you up one level in the folder hierarchy.

  • To link from contents.html to catalog.html (in a different subfolder of the parent folder), use the relative path ../products/catalog.html. Here, ../ moves you up to the parent folder, and products/ moves you down to the products subfolder.

    When you move 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 targeted 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 describe the path from the site’s root folder to a document. You may want to use these paths if you are working on a large website that uses several servers, or one server that hosts several 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 root folder of the site. 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 is often the best way to specify links if you frequently move HTML files from one folder to another in your website. When you move a document that contains site root–relative links, you don’t need to change the links since the links are relative to the site root, and not to the document itself; for example, if your HTML files use site 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 targeted by site root–relative links, you must update those links, even if the documents’ paths relative to each other haven’t changed. For example, if you move a folder, you must update all site root–relative links to files in that folder. (If you move or rename files using the Files panel, Dreamweaver updates all relevant links automatically.)

 Adobe

Dapatkan bantuan lebih cepat dan lebih mudah

Pengguna baru?

Adobe MAX 2024

Adobe MAX
Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX

Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX 2024

Adobe MAX
Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX

Konferensi Kreativitas

14–16 Oktober Miami Beach dan online