Site Logo

The right side of the webWriter navigation bar is reserved for site branding. The recommended procedure is to create a site logo in the form of a gif (up to 120 pixels wide by 50 pixels high) in the content folder and set the siteLogo variable in constants.js to the name of the image file. Authors can optionally provide more information in the form of a tooltip which will come up when the mouse hovers over the logo. Set your tooltip by setiing the siteTooltip variable to it.

Alternatively, branding can be done by using two lines of text. Set the organization variable to the first line and the course variable to the second line. In order for these to be used, the siteLogo variable must be set to the null string ("").

WebWriter Buttons

Navigation Bar Buttons

   Generates dynamically a table of contents for the whole site using the map hard-coded in nav-map.js as well as properly marked anchors

   go to the previous topic as defined in nav-map.js

   go to the parent topic as defined in nav-map.js

  go to the next topic as defined in nav-map.js

note button  Switch to notes mode which is designed for studying the website at a computer. At the moment switches style sheets.

lecture button  Alternate to  note button   Switch to lecture mode which is designed for projection to a class. At the moment switches style sheets and turns off hidden notes

shade button   Turns on the window shade used in lecture mode to cover up part of the screen. Not available in notes mode.

print button  Invokes a frameless print window, copies only the contents frame document to it, turns the hidden container allExamples on, and attaches the print stylesheet so users can see what the printed version will look like. See printing.

home button  Return to the home site for the teaching pages, usually a course administration site, as defined by the homeUrl variable in the noteConstants.js file..

help button  Bring up the help system. Still a twinkle in my eye.

Page Buttons

These appear in the middle of content pages

hitten note button   Displays auxiliary, hidden notes, often associated with Teaching Machine examples.

There are also simple html buttons for displaying hidden answers.

Navigation Map

The hard-coded map of site navigation found in site_resources/javascripts/nav-map.js. Here is a partial map for this site:

var root = new Node("pages/coverPage.htm");
var treeWalker = new Walker(root);
var siteTitle = "WebWriter++ Manual";

// Site Navigation map 

// define the directories for convenience
var pages = "pages/";

// Now define the navigation map
root.addChild(new Node(pages + "introduction.htm"));
root.addChild(new Node(pages + "structure.htm"));
root.addChild(new Node(pages + "navigation.htm")); 
root
is the root document for the whole site. A present limitation is it can have no siblings, that is, there is one and only one root node for the site.
treeWalker
the iterator object used by the automatic table of contents generator to walk the navigation map.
siteTitle
the title used when the site is first loaded. This will be displayed in the navigation bar while applets are loaded so it it probably best to use the same title as on your root page to prevent ugly title switching during slow loads.
pages
a convenience variable for the pages directory, of marginal utility in this example. More useful if directories get deeply nested.
addChild
a method of the node class for adding a child to any node, here used to add the page nodes to the root node.

Note that this example is for a flat hierarchy. In a deeper hierarchy, if you want to add nodes to an internal node , you can do the following:

root.addChild(new Node(pages + "introduction.htm"));
var structNode = new Node(pages + "structure.htm");
root.addChild(structNode);
structNode.addChild(new Node(pages + "navigation.htm"));

Which has the effect of adding the navigation page in under the structure page.

Printing Notes

The standard browers print command won't do a very good job of printing. Instead use the print button which creates a frameless print window. It copies only the contents frame document to it and attaches the notesPrint stylesheet so users can see what the printed version will look like. Some considerations:

Table of Content Entries

The tocGenerator walks the navigation map generating an entry for every node in the map. The entry is the title of the document.

In addition, it automatically picks up anchors from inside pages to make sub-entries for each page. Only named anchors with text between the <a> and </a> tags are picked up. The name is used to qualify the url to take the user directly to the anchor. The text between the opening and closing tags is used as the TOC entry.

If an anchor is needed on a page that is not to be included in the table of contents, simply mark the anchor as a point. For example here is how to include a second level heading—

<h2><a name="tocEntries">Table of Content Entries</a></h2>

and how to leave it out—

<h2><a name="tocEntries"></a>Table of Content Entries</h2>

The second form is perfectly legal since an anchor merely marks a point in a document.

If it is included, the url generated will be pages/navigation#tocEntries while the sub-entry under Navigation & Controls (the title for this page) will be Table of Content Entries

The tocGenerator pays no attention to heading levels.