Share via

Navigating in the Document Outline Window

  • Article

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.

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. On 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. On 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 and Events outline.

  3. Double-click an object to expand its list of its available events.

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

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

    A new blank event handler function is inserted into the <SCRIPT> block that is the default location for such event-handlers. If such a <SCRIPT> does not exist already, one is created.

  5. Add arguments to the new event handler function you have just created. For more information, see Creating Scripts and Editing Event Handlers in HTML Designer.

See Also

Document Outline Window | Design View, HTML Designer | HTML View, HTML Designer | Switching to Design View