University Identity

Navigation

The right navigation area, located in the span_normal.dwt and span_extrawide.dwt templates, helps guide users through your site by providing links to the main sections of your site. The right navigation menu is contained in the library rightnav.lbi library item.

Creating Your Menu

Use the following instructions whether you are editing the right navigation menu. In order to create your own menu text, first delete the sample text provided. To ensure that your menu items appear correctly on your website, use only the following elements:

  • Menu headers
  • First-level links
  • Sub-level indented links
  • Third-level indented links (use sparingly)

The following diagram shows how the library item provides text for the navigation, and how the text is styled automatically when viewed in the template.

Left Navigation Menu Text

Menu Header

To create a menu header, choose Heading 2 from the Format drop-down menu located in the Properties toolbar. Type out your menu header, and apply a link if needed.

Screenshot of the properties window showing the location of the Format pulldown menu and the selection of the Heading 1 options in Dreamweaver

First-Level Link

To create a list of main navigation items that will link your users to your main pages, click the Unordered List icon in the Properties toolbar and type out your items as a bulleted list. Apply links to all main navigation items. Your navigation menu must be an Unordered List and a link for it to style correctly.

Screenshot of the properties window showing the location of the Unordered list and Ordered list buttons

Sub-Level Indented Link

If you want to create sub-level indented items in your main navigation, create an Unordered List within one of your main navigation items. This can be done by pressing Return/Enter after a list item, and then pressing the Tab key. Apply links to all sub-level navigation list items. To return to your main navigation item level, press the Return/Enter key twice. To return to the menu header level, press the Return/Enter key once more.

Third-Level Indented Link

Third level indented links can be created using the process similar to creating sub-level indented items described above. Use these links sparingly as they create a more complex navigation and tend to be confusing to users.

The navigation content areas are regions found below the left and right menus, and are intended to provide additional content for your Web site. These areas are limited to the following elements:

  • Section Headings (Heading 2)
  • Sub-Section Headings (Heading 3)
  • Paragraphs
  • Unordered Lists
  • Images

To use these content areas, simply click inside the navcontent1or navcontent2 editable region and type out your text. If you find that the text does not display properly, make sure it is marked up with one of the elements mentioned above. If you want to add graphics to the navcontent1 div, make them no wider than 157 pixels. If you want to add graphics to the navcontent2 div, make them no wider than 180 pixels. Graphics any wider than these dimensions will break the layout of the page.

Horizontal Navigation

The horizontal navigation is a global navigation for your site, and is implemented through the master template. Use this option sparingly. It is not meant for more than a few menu items.

Screenshot of the horizontal navigation

The horizontal navigation is located in area of the header with the gold background, and takes the place of the text "California Polytechnic State University." To create a horizontal navigation, follow these steps:

  1. Open master.dwt and delete the text "California Polytechnic State University."
  2. Type out the navigation items as an unordered list <ul>.
  3. Apply links to all of the navigation items.
  4. Save the file and allow the updates to be made.

Note: you cannot have a horizontal menu and the university name simultaneously. This is intentional. For this reason, there is no example of this feature included as sample content in the template.

If you decide to create any other menu/navigation system on the template, ensure that it is Web Accessible. If you need help planning out the structure of your Web site, visit the Planning section in the Web Authoring Resource Center (WARC).

back to top