Information Resources & Technology (IRT)–

Work With Left Navigation

In this tutorial we will cover more advanced methods of working with the left navigation, including an expanding link effect, and adding subnavigation and subsubnavigation links. You should have completed the Create a New Topic Subdirectory tutorial, and aready know how to Add Main Links to Left Navigation.

Watch Demo

Step 1: View My Project in a browser

  1. In your browser, find the home page for the new topic named "My Project"

Step 2: Copy Home Left Navigation Include to My Project

  1. In Dreamweaver, find and open the main Home page index.html
  2. Select and open the left navigation server-side include
  3. Use the Code or Split buttons to reveal the code
  4. Select All in the Code window and Copy
  5. Close the include
  6. Find and open the my_project/index.html file
  7. Select and open the left navigation include
  8. Reveal the Code if needed; Select All and Paste
  9. Click the Design button to hide the code

Step 3: Create subtopic links

Let's create subtopic links for the pages in our project.

  1. Place your cursor at the end of the My Project link and press the Enter key to create a new line and list item
  2. Type the text of your subtopic link; if you can't think of anything else, type "New Page Stationery"
  3. Indent links to make them subtopics of another link; place your cursor anywhere in the link, then click the Text Indent button in the Properties Inspector to indent; only 3 levels of indentation are shown in the browser
  4. Select the new text to be linked
  5. Switch to your browser; while viewing your My Project home page, type or paste "2col_stationery.html" at the end of the URL, after the trailing slash, and type enter to view the stationery page
  6. Copy the full "absolute" URL from the address bar
  7. Switch to Dreamweaver and Paste the absolute URL into the Link field in the Properties Inspector; click anywhere else to set the link
  8. Save, Put and reload the My Project home page or stationery in your browser to validate your work
  9. Back in Dreamweaver, try adding additional subtopic links; if you keep all of the link URLs the same, they will all be highlighted
    • Add a # to the end of links with duplicate URLs that you DON'T want to highlight
  10. Save, Put and reload your browser to see the link changes and arrow highlights; you should see the new expanded link section

Step 4: Optional: Create a new link section

  1. Place your cursor anywere in the text of an existing section heading, such as "Additinal Links: Add Your Practice Links Here;" find and click the <h4> item in the Tag Selector at the bottom of the document window; if desired, hold the shift key and add some or all of the links to your selection
  2. Copy
  3. Place your cursor where you want the new section
  4. Paste
  5. Edit as needed

Optional Exercises on Your Own

Attach a different left navigation include: Pages can use a left navigation include from any level of the site.

  1. You may want to create a new page within my_project for this exercise
  2. With the include selected on this page, use the Code or Split button to view the page code
  3. Change the include code from this:
    <!--#include virtual="includes/navigation.htm" -->
    to this:
    <!--#include virtual="../includes/navigation.htm" -->
  4. This attaches the top-level, Home left navigation links include; you can use any similar document-relative URL to attach the include you want
  5. Beware the Select File folder icon in the Properties Inspector
    • A bug changes the include link to a root-relative URL, which can break
    • Instead:
      1. Find a page with the include you want to attach
      2. Save As and put it in the target folder, clicking "Yes" on the "Update Links?" prompt
      3. Select the include on the page and Edit > Copy
      4. Switch to the target page, select the include, and Edit > Paste

« Previous | Home | Next »

Stanford Medicine Resources:

Footer Links: