Information Resources & Technology (IRT)–

Add Main Links to Left Navigation (Basic)

This set of exercises is dependent on completion of the New Topic Subdirectory tutorial. It 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 change a link every page that uses the include changes.

Step 1: View and get full URL of target page

  1. View the page you will link to in your browser, e.g. the "my_project" home page, as described in Create a New Topic Subdirectory
  2. Keep this window available to save the absolute URL of the new topic home page
  3. Open a separate window with your practice site Home page showing
Watch Demo

Step 2: Find the home page's left navigation include

  1. Switch to Dreamweaver
  2. Find and open the main home page file (index.html, at root)
  3. Click on the left navigation links; look at the Properties Inspector
  4. Click the Edit button to open the attached navigation include file
    • Includes files typically live in a nearby folder named "includes," but are sometimes in a higher-level includes folder
    • NOTE: Many Stanford Medicine sites utilize "expanding navigation," covered in the next tutorial

Step 3: Create a new main link

left links

Main links are aligned left, and represent the major topics of your site. 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. The links are now very easy to edit

  1. To create a new link, simply create a new list item in the appropriate position
  2. Place your cursor at the end of the item you want your new link to follow; if using one of the practice sites, add your link in the section marked by the heading "Additinal Links: Add Your Practice Links Here" (see illustration)
  3. Type the Enter key once to create a new line and list item
  4. Type your new link text, e.g. "[your name]'s Project"
  5. Switch to your browser, select the full URL of the new topic home page you saved in Step 1, from the address bar, and Copy
  6. Back in Dreamweaver, select the link text you typed in step 4
  7. Paste the URL you copied from the browser into the Link field in the Properties Inspector
  8. Click anywhere else to set the link

Step 4: Save, put, validate in browser

  1. Save the navigation include file
  2. Put the file to the server, using the document's Manage Files button
  3. Switch to the browser window showing the Home page, reload and click the new link to test it.

When you are done

You can close the navigation include file and the home page (index.html) file.

« Previous | Home | Next »

Stanford Medicine Resources:

Footer Links: