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.
+
