Information Resources & Technology (IRT)–

Add Links to Left Navigation

This tutorial discusses placing and editing links in your LeftColumn navigation area. Links in Breadcrumbs and Page Body are discussed elsewhere. Left navigation links are different from body links in two related ways:

  1. They are kept in special, separate files called server-side includes and
  2. The links must always use the full or "absolute" URL of the linked page, beginning "http://" or "https://"

Includes are snippets of HTML saved in separate file. Special coding in the page file causes the server to parse, or pull the code, into the flow of HTML delivered to the browser. The effect is that when updating the include, to add a link for example, every page that uses the include is updated.

NOTE: One of the limitations of Contribute is that one can edit the include, but cannot change the attachment of the include to a page. To create new page/include relationships, use Dreamweaver or contact Web Help.

Editing rules

Watch Demo

Step 1: View page and get full URL

  1. We need to view the page we want to link to and copy it's full, absolute URL
  2. If you are training in the MedWebTraining practice site, browse to the New Page (“My Page”) created in the previous exercise; we should still have this page in our browser; if you closed that window, you can find the page in Contribute, even if it’s not yet linked:
    1. Use the Choose button, browse to and view the page you want to link to
    2. Select the page's URL from the Contribute Address bar
    3. Switch to your regular Web browser (IE, Safari, Firefox, etc)
    4. Paste the URL into the browser's address bar and hit enter to view it
  3. Leave this window open on this page to save the URL; we will come back for it later
Watch Demo

Step 2: Find the include file for left navigation

  1. In Contribute, click on the "Choose" button and browse to the left navigation include attached to the page you want to link to
  2. Most site directories have their own "includes" folder
    1. However, a page in that subdirectory can also reference a left navigation file NOT in that subdirectory, typically using a higher-level includes file, such as the main Home page left navigation
    2. Look for a file with a name beginning "navigation," i.e. "navigation.htm" or possibly "navigation-something.htm"
    3. Some sites use the "expanding navigation trick," where there are multiple copies of the left navigation include, with individual link sections expanded. Our practice sites are set up this way. Any new top-level link should be added to all the copies of the left navigation file in sites using this technique
  3. We are looking for education/includes/navigation.htm

Demo not yet available;
Please follow this text instead

Step 3: Create a new link

Main links are aligned left, and represent the major topics of your site. In our example, the Education link is a main link. We will add our new link as a subpage of the Education topic. All links are list items styled by CSS in the browser. Because no CSS stylesheet is attached to the navigation links include file, it appears without styling when you edit it.

  1. While viewing the correct include in Contribute, click the Edit Page button
  2. To create a new link, begin by creating a new list item
  3. Place your cursor at the end of the link "Links are List Items" under the heading "Add Your Practice Links Here" and press the Enter key to create a new line and list item
  4. Type your linking text, title style (caps and lower case), using a consistent link label for the target page; if following the previous tutorials, use "My New Page"
  5. Select the link text
  6. Click the Insert Link button
  7. Select "Browse to Web Page" to access the Link Properties dialog box
  8. The text you selected to link from is greyed out and not editable in this window
  9. IMPORTANT: Do not click into the "Web address (URL)" field and skip the two buttons, "Browse" and "Choose;" make sure the "Advanced" panel is open at the bottom
  10. Put your cursor into the "HREF" field
  11. Paste the absolute URL you copied from the browser address bar; right-click (Win) or Ctrl-click (Mac) to find the Paste command
  12. Click the OK button to insert the link
  13. Click Publish to make the changes live
  14. View the page in your browser, reload and test the link by clicking around
Demo not yet available;
Please follow this text instead

Step 4: Structuring links

Subnavigation links are indented, and represent the child pages of major topics of your site. One generally has only one subnavigation section per include. To create a new subnavigation link:

  1. Create a new link exactly as directed in step 3
  2. With your cursor anywhere in the new link item, use the Indent button to indent the line; NOTE: only two levels of indentation are visible in the browser
  3. Click Publish to make the changes live
  4. View the page in your browser, reload and test the links by clicking around

Controlling the link highlight

Two links at the same level, with the same URL will both highlight when the page is viewed. This should not occur, because links should not generally be duplicated at the same level. If you have some compelling reason to have duplicate links, add a "#" to the end of one to remove the highlight.

Duplicate links with different levels of indentation should not both highlight. One or the other should automatically take the highlight.

Demo not yet available;
Please follow this text instead

Step 5: Add a new link section

Link sections are marked off by section headings provided simply by adding a Heading 4 heading and a new list of links. Headings have some text, "Navigation for This Section" that is hidden in the browser, but which shows in Contribute. This text is provided for accessibility by the disabled. Let's create a new section.

If you have any trouble adding a new section, request help via the Web Help form.

« Previous | Home | Next »

Stanford Medicine Resources:

Footer Links: