Navigating in the Document Outline Window

While you are editing an HTML page in either Design View or HTML View, the Document Outline window displays a nested, hierarchical view of the elements and scripts on your page. You can scroll through the outline, collapse and expand entries, and double-click items to navigate quickly to their location in your document.

Note   To open the Document Outline window, select Other Windows from the View menu and choose Document Outline. Click the plus (+) sign next to a node to list all the items within the node. A minus (-) indicates that a node is already fully expanded. Click the minus (-) sign to collapse the node.

To open the Document Outline window in HTML Outline view

  1. Open your Web page in the HTML Designer, and select Design view.
  2. From the View menu, select Other Windows and choose Document Outline.

    The Document Outline window opens in HTML Outline view. The <BODY> outline is available.

  3. Click the <BODY> outline to display all the elements on your HTML page.

To select an element in Design view

  1. Open the Document Outline window in HTML Outline view.
  2. Double-click any element listed in the expanded <BODY> outline.

    In the HTML Designer, that element is highlighted in Design view.

To jump to the markup for an element in HTML view

  1. Open the Document Outline window in HTML Outline view.
  2. In the HTML Designer, switch to HTML view.
  3. In the Document Outline window, double-click any element listed in the expanded <BODY> outline.

    In the HTML Designer, the insertion point in HTML view jumps to the markup for that element.

To open the Document Outline window in Script Outline view.

  1. Open your Web page in the HTML Designer and select the HTML tab.
  2. From the View menu, select Show Script Only, then select Other Windows and choose Document Outline.

    The Document Outline window opens in Script Outline view. The available outlines displayed include Client Objects and Events and Client Scripts.

To jump to an event handler call in the <BODY> of your page

  1. Open the Document Outline window in Script Outline view.
  2. Expand the Client Scripts outline.
  3. Double-click any object.event item listed.

    In HTML view of the HTML Designer, the insertion point jumps to the markup for the element named, at the event handler call for this event.

To jump to an existing handler function in a <SCRIPT>

  1. Open the Document Outline window in Script Outline view.
  2. Expand the Client Scripts outline.
  3. Click the desired script to expand its list of functions.

    Scripts included in the Client Scripts outline are named for their scripting language.

  4. Double-click any function.

    In HTML view of the HTML Designer, the insertion point jumps to that function.

To insert a new blank handler function into a <SCRIPT>

  1. Open the Document Outline window in Script Outline view.
  2. Expand the Client Objects & Events outline.
  3. Double-click an object to expand the list of its available events.

    Events for which you already have a handler function display in bold type.

  4. Double-click an event not in bold type.

    A new blank function that will handle the event is inserted.

    Note   This new handler function is added to a script in the <HEAD> of your page whose ID property includes "clientEventHandlers." 

    <SCRIPT ID=clientEventHandlersJS language=javascript>

    If such a script does not already exist, one will be created.

  5. Complete the new event handler function you've just added.