Document Outline Window
Provides a nested, outline view of elements and scripts in the current document. In both Design view and HTML view, you can open the Document Outline window from the Other Windows list in the View menu. This window provides an easy way to find and select elements on your page, and also helps you gain a better understanding of the logical structure of your document. You can expand and collapse entries as you scroll through the outline. Double-click any element listed to find and select it in the editor.
HTML Outline View
Displays a hierarchical outline of the elements within the
<BODY> of the document. When you double-click any element, the insertion point in the HTML View editor jumps to that element in the markup of your page.
Note To open the Document Outline window in HTML Outline view, first open an HTML page in either Design view or HTML view. Then select Other Windows from the View menu and choose Document Outline from the submenu.
If your Web page includes scripts, you will see <SCRIPT> nodes in the HTML Outline. To expand these nodes and list script functions and the objects and events they handle, you must select Show Script Only from the View menu to toggle the Document Outline window to Script Outline view.
Script Outline View
Displays two hierarchical outlines of script-related elements on your Web page, named Client Objects & Events and Client Scripts. Expand the Client Objects & Events outline to list the available objects on your page. Expand the Client Scripts outline to list the scripts included on your page, followed by the objects and events their functions handle.
Note To open the Document Outline window in Script Outline view, first open an HTML page that includes scripts in HTML view. Select Show Script Only from the View menu, select Other Windows from the View menu, and then choose Document Outline.
- Client Objects & Events
- The Client Objects & Events outline lists the available objects on your page. Double-click any object to view a list of its available events. Double-click any event to insert a new blank function that will handle the event selected. This new handler function is added to a clientEventHandlers script in the
<HEAD>of your page. If a script whose
idincludes the string clientEventHandlers does not already exist there, one will be created:
In the Client Objects & Events outline, names of events for which you already have a handler function in your clientEventHandlers script appear in bold. When you double-click a bolded event, the insertion point in the HTML View editor jumps to that handler function in its script.
- Client Scripts
- The Client Scripts outline lists the scripts included on your page. Expand any script node to list its functions. When you double-click any function listed, the insertion point in the HTML editor jumps to that handler function in the
The objects and events handled by your functions are then listed. Their names are given in
object.eventorder. For example, suppose a
<FORM>on your page includes a button named bGet, and that the markup for this particular button includes a call to a function named
goGet()that runs when the button is clicked:
<INPUT type="button" NAME="bGet" ID="bGet" VALUE="GET" onClick="goGet(...)>
In this case, the
bGet.onClickevent will be listed in the Client Scripts outline. When you double-click an
object.eventitem, the insertion point in the HTML Editor jumps to the exact point within the markup for the element named where the handler function for this event is called. In the previous example, when you click the
bget.onClickevent in the Client Scripts outline, the insertion point in the HTML View editor jumps to
<INPUT>element for the bGet button.
Tip Use the Client Scripts outline to locate the markup for function calls quickly in the
<BODY>of your page.
Navigating in the Document Outline Window | Navigating in HTML Designer | Browsing Code and Components | Outlining and Hiding Code | Setting the defaultClientScript Property of an HTML Document | Event Handling in HTML Elements Sample | Design View, HTML Designer | HTML View, HTML Designer | DHTML References