Broadly speaking the scaffold refers to the structure (or layout ) of the site. Some effort has gone into reducing the scaffolding restrictions.

Here is an images of the site layout for this manual as it appears in WindowsXP. (The .svn folders as well as the special icons overlaying the folders are artifacts of the subversion control system we use for all software development projects.)

Although the layout has designed to be quite flexible there are some basics which authors must respect. Fundamentally, the site is designed as a tree. The root node can be any directory on your web site but the rest of the tree must branch down from that node. There are three webWriter subdirectories under the root—webWriter, style and content.

The Templates folder contains Dreamweaver templates and has been left in as a convenience for Dreamweaver authors that use templates. Others may delete it. The TMSetup contains instructions for setting up FireFox or InternetExplorer for use with WebWriter++ and the Teaching Machine. It is not part of the site, per se, but again has been included for convenience (although it is not likely to age gracefully). The help folder contains the (very limited) help files for the TM itself.

Site Root Node
This node contains a few files to help define the basic structure of the sites pages, as follows:
default.htm
The frameset for the site. This should not normally need to be edited.
navBar.htm
the navigation bar (also often referred to as the WebWriter bar) containing control buttons for the site. Its appearance is governed by its own style sheet in the style folder
tocGenerator.htm
The base page for the dynamically generated table of contents. See manual entry.
printForm.htm
A base page for setting up a printed version of any site pages in the root folder. printForm must be included in every folder which contains pages a student may want to print.
tm.jar
the java jar file containing the Teaching Machine.
webWriter Folder
this directory contains the rest of webWriter (the files in the root node are also considered part of webWriter). It includes some special pages plus the JavaScripts that make up WebWriter as well as graphical resources.
buttonClass.js
A class for buttons used on webWriter navigation bar.
header.js
A tool to write the bulk of the ‹head› section for content pages.
inputForm.htm
An html form used when the edit button is pushed on examples in the Teaching Machine container.
navBarheader.js
A tool to write the bulk of the ‹head› section for the navigation bar which tops most pages.
parser.js
A tool for parsing tags in the insertCode snippet used to insert code into webWriter++ code containers.
printForm.htm
An html template used for creating print versions of content web pages. As of this writing, must be copied into any content folder containing pages on which the print button is to be used.
printHeader.js
A tool to write the bulk of the ‹head› section for printed pages.
slider.htm
the slider for the window shade that covers up part of the document in lecture mode.
tocNavigator.js
A toolset for navigation, linked by both the navigation bar and the toc generator.
standardButtons.js
Standard buttons for the navigation bar which tops most pages.
wait_for_applets.htm
The page loaded in place of contents while the site frameset (which contains all the applets) loads.
web_writer.js
The bulk of the main toolset. It is designed to be linked into (and thus part of) every content page.
ww_one_time.js
The rest of the main toolset loaded only once with the navigation bar. Works hand-in-hand with web_writer.js.
images folder
common gifs and jpegs, for example buttons. For your convenience you will find most of the gifs used in the Teaching Machine here as well.
style folder
stylesheets for the site. Currently these include
lectureScreen.css
The sheet used for lecturing, designed for projection. Almost all content pages use this (or one of its alternates). Sheet used in lecture mode.
notesScreen.css
an alternate content page style sheet, used for looking at the site on an individual screen. Sheet used in notes mode.
notesPrint.css
The sheet used for printing notes
navBar.css
the style sheet for the navigation bar which is implemented as a frame containing a separate document
slider.css
the style sheet used for the window shade slider that covers up part of the document in lecture mode.
toc.css
a style sheet used to control the appearance of the auto generated Table of Contents page. Barely argued at all at the moment.
configurations folder
Contains the default TM configuration file as well as any other configuration files desired by authors. Which configuration file to use is specified in the insertCode command. TM configuration files control such things as the overall size and layout of TM windows, as well as which ones will appear, the font sizes and the title of the windows.
content folder
This is the root for all content pages. WebWriter expects a number of files in the root of the content folder. These are designed to be edited by authors to fit the needs of their own project. It is suggested that actual site content be organized in a set of folders located in the content folder.
dictionary.htm
A site-wide dictionary. See manual entry.
nav-map.js
A hard-coded map laying out the site navigation. Every page which is to be included in the table of contents must be defined as a node in this file.
noteConstants.js
A set of constants used by the webWriter javaScripts. Some are editable while others should be left alone. The non-editable ones are clearly delineated in the file.
videos folder
Videos linked to the Teaching Machine are stored here. This organization is not mandatory (it can be changed using editable constants in the constants.js file). It is used to allow the very large video files to be grouped together making them easier to manage.

This much of the layout should be respected. A WebWriter++ skeleton in the form of a zip file is contained in the root of this site.

The schema was suggested by Theo Norvell and is designed to isolate content, style and tools from each other.

  1. It allows a new version of webWriter to be dropped in relatively painlessly. Only the root files and the WebWriter folder have to be replaced.
  2. Content pages are isolated in their own directory, making it easier to create multiple sites.
  3. Style pages (stylesheets and TM configurations) are also isolated as they affect the entire site and are managed separaely from content.

Content Pages Head

This is the head for this page and should be used as a template for each content page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/sgml/dtd.html"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>The Site Scaffold</title>
<script language="JavaScript">
nestingDepth = "../../";
</script>
<script language="JavaScript" src="../noteConstants.js"></script>
<script language="JavaScript" src="../../webWriter/header.js"></script> <script language="JavaScript" src="../../webWriter/buttonClass.js"></script>
<script language="JavaScript" src="../../webWriter/parser.js"></script>
<script language="JavaScript" src="../../webWriter/web_writer.js"></script>
</head>

The header.js javaScript writes most of the standard head information including generator, author(s) and copyright meta tags, using variables set in contants.js (in the content folder root). It also automatically links in the stylesheets (whose names must be preserved but which may be otherwise edited).

The crucial issue is the nestingDepth which defines the path of the page relative to the root as well as the the leading part of the three javaScript references. This must be correct. Those to web_writer.js and header.js use the same string as the nestingDepth because the webWriter folder is located in the root. The noteConstants.js, however, backs up one less because the noteConstants.js javascript, which is designed to be author-editable, is located in the root of the content folder.

The title tag should always be present as it will be used to generate the title that appears in the tool bar.

Pages at different depths from the root will have to change all relative references in this head including nestingDepth

Dreamweaver Template

Authors using Dreamweaver may use a Dreamweaver template as an alternative to propagating the above head to every page in the site by hand. All references in the Dreamweaver template are relative to the template. Dreamweaver will automatically adjust them when creating template based pages. However, nestingDepth is a JavaScript variable and will not be altered by Dreamweaver so must be adjusted by hand. Thus it has been included with title in an editable section of the template.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/sgml/dtd.html"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Unnamed Page</title>
<script language="JavaScript">
nestingDepth = "../../";
</script>
<!-- TemplateEndEditable -->
<!-- these are relative to template -->
<script language="JavaScript" src="../content/noteConstants.js"></script>
<script language="JavaScript" src="../webWriter/header.js"></script> <script language="JavaScript" src="../webWriter/buttonClass.js"></script>
<script language="JavaScript" src="../webWriter/parser.js"></script>
<script language="JavaScript" src="../webWriter/web_writer.js"></script>
</head>
<body id="bodyRef">
<div id="content">
<!-- TemplateBeginEditable name="contents" -->
&nbsp;
<!-- TemplateEndEditable -->
<div id="allExamples">
<!-- TemplateBeginEditable name="allExamples" -->
<h1>Examples Shown in Full </h1>
<!-- TemplateEndEditable --></div>
<p>
<script language="JavaScript">
bottomStamp(true, true);
</script>
</p>
</div>
</body>
</html>