An overview of webhelp page structure.
DocBook WebHelp page structure is fully built on css-based design abandoning frameset structure. Overall page structure can be divided in to three main sections
- Header: Header is a separate Div which include company logo, navigation button(prev, next etc.), page title and heading of parent topic. 
- Content: This includes the content of the documentation. The processing of this part is done by DocBook XSL Chunking customization. Few further css-styling applied from - positioning.css.
- Left Navigation: This includes the table of contents and search tab. This is customized using jquery-ui styling. - Tabbed Navigation: The navigation pane is organized in to two tabs. Contents tab, and Search tab. Tabbed output is achieved using JQuery Tabs plugin. 
- Table of Contents (TOC) tree: When building the chunked html from the docbook file, Table of Contents is generated as an Unordered List (a list made from - <ul> <li>tags). When page loads in the browser, we apply styling to it to achieve the nice look that you see. Styling for TOC tree is done by a JQuery UI plugin called TreeView. We can generate the tree easily by following javascript code:- //Generate the tree $("#tree").treeview({ collapsed: true, animated: "medium", control: "#sidetreecontrol", persist: "cookie" });
- Search Tab: This includes the search feature. 
 


