Menu Panel Tutorial Layout

page 172 A variety of navigation controls appear on every panel in a tutorial. The navigation bar contains items such as Main menu, Section menu, and Feedback. Although some items are disabled if youre already on the Main menu, the Main menu item isnt active, for example, they appear on every panel of the tutorial. There are also icons for viewing the tutorial in alternate formats, as Figure 9-3 demonstrates. Figure 9-3. Icons for alternate tutorial forms From left to right, these icons allow users to download a zip file that contains all files necessary to run the tutorial, a letter-sized PDF file, an A4-sized PDF file, and email a note to a friend, recommending this tutorial. All icons appear on every panel in the tutorial, and their associated links are generated by the Toot-O-Matic. Each panel has a masthead and footer, which are defined by corporate standards. They are generated by named templates cleverly named masthead and footer . As corporate standards are updated, we simply change those templates to change the look and feel of the tutorial panel.

9.3.2 Individual Panels

Most HTML files that make up a complete tutorial use this format. Notice that the panel contains the text page 1 of 6 ; we generate this text with XPath expressions. The 1 is generated by the position function, and the 6 is generated by the count function. Each panels navigation bar also contains links to the Main menu panel and the Section menu panel. An individual panel looks like Figure 9-4 . Figure 9-4. An individual tutorial panel page 173

9.3.3 Section Menu

If you click on the Section menu item while on any panel in a tutorial, youll see a listing similar to Figure 9-5 . Figure 9-5. A section menu You can click on the title of any panel to go directly to it. We generate the panel titles with a xsl:for-each select=paneltitle element. Well discuss how we generate the links between panels soon.

9.3.4 Feedback Panel

The Toot-O-Matic generates a Feedback panel automatically. The Feedback panel contains an HTML form that lets readers send in their comments on the tutorial. Code on the server takes reader comments and stores them in a database automatically. Figure 9-6 shows what the generated Feedback panel looks like. Figure 9-6. A typical Feedback panel