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