Using Collapsible Outlines

Collapsible outlines are a client-side JavaScript effect that lets you shrink bulleted or numbered lists to just the low level at the initial viewing of the page. Clicking the low level with your mouse will result in the subitems being shown. This is a great effect for organizing a considerable amount of information on the same page as can be seen in Figures 21.1 and 21.2.

Figure 21.1. The Web page shows only the low level bullets. Compare with Figure 21.2 and 21.3.

graphics/21fig01.gif

Figure 21.2. Compare with Figure 21.1. The first item in the list was clicked with the mouse, and the information below it is now shown.

graphics/21fig02.jpg

For more information on scripting in Web design, see "Client-side Scripting," p. 475.


NOTE

All collapsible outline content for the page is loaded to the client when the page is first viewed. Browsers that can't support JavaScript will usually show the entire outline.


TIP

There is no indication that the outline content can be expanded, such as a hyperlink. Make sure that you let the user know the option is available or he won't know it is there.


graphics/troubleshooting_icon.jpg

If FrontPage has your collapsible outline options grayed out and you want to use them, see "Collapsible Outline Problems" in the "Troubleshooting" section at the end of this chapter.


Bulleted Lists

To use this effect on a bulleted list, simply create a multi-leveled bulleted list such as the one shown in Figure 21.3.

Figure 21.3. This bulleted list was created with the collapsible outline shown in Figures 21.1 and 21.2.

graphics/21fig03.jpg

Once the list is created, select the list content and choose List Properties from the context menu. Select any tab from the List Properties dialog box, shown in Figure 21.4. Check the Enable Collapsible Outline box and, if desired, the Initially Collapsed option.

Figure 21.4. Any tab in the List Properties dialog box lets you toggle the Collapsible Outline option on and off. The Other tab is shown in this option.

graphics/21fig04.gif

FrontPage then writes the appropriate JavaScript code to your page, requiring no additional action on your side. If you edit list content, FrontPage will update the script accordingly.

TIP

Take a look at the script behind a collapsible outline it's pretty impressive and can teach you a lot about good script design.


Numbered Lists

Numbered lists work, and are created, the same way as a bulleted list. Collapsible outlines only work on these two kinds of lists and can't be utilized on a Definition, Directory, Menu, or Normal List.

For more information on FrontPage's list features, see "Developing the Basic Page: Page Properties, Text, Lists, and Hyperlinks," p. 77.


Collapsible Outline Use

The collapsible outline is a great tool for many kinds of data presentation options. Not only can it clean up a considerable amount of data, but it also becomes automatically "backward compatible" with other browsers so that you don't need to worry about multiple presentations of your data.

Frequently Asked Questions (FAQs), user documentation, personnel contact information, and definition lists all present well through the use of collapsible outlines.

If you have a considerable amount of data on your site that needs to be presented but can be presented in list form, consider using this technology.




Special Edition Using Microsoft Office FrontPage 2003
Special Edition Using Microsoft Office FrontPage 2003
ISBN: 0789729547
EAN: 2147483647
Year: 2003
Pages: 443

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net