# Design
Chapter 3. Developer Docs

. |  | Prev | Up | Next

## Design

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.

Prev | Up | Next
| Home |

- Contents
- Search

- Introduction
- Using the package
  - Generating webhelp output
  - Using and customizing the output
    - Recommended Apache configurations
  - Building the indexer
  - Adding support for other (non-CJKV) languages
- Developer Docs
  - Design
  - Search
    - New Stemmers

Search