About the Slide Template (Version 1.1, Updated  )

Quick Start if You're Too Busy to Read This

  1. Open index.htm in presentation directory
  2. Click the far right edge of the page to go forward; click the far left edge to go back
  3. To make your own presentation, create new pages by copying and renaming template files from the template directory; give your files the .htm filename extension
  4. Add the names of your new pages into the slide list by editing the slide.js file

Contents of the Directory

read_me.htm  This file. Explains usage. 
index.htm  Open this page to start presentation. This is the frameset page with frames to hold the presentation's HTML pages and Javascript-enabled images (left and right of page) to turn them. Don't edit this file. 
notes.htm  Open this page to start presentation when you want to view the speaker notes. (Be sure to get into speaker note mode first by swapping style.js with the version in directory notestyl; see the section "Using the Speaker Notes Feature" for details.) This alternate frameset page will show scroll bars in the center frame when necessary to view lengthy speaker notes. Don't edit this file. 
logopage.htm  Graphical logo page used as first and last page of presentation. Automatically shown first. Do not change file name. 
title.htm  Title page. 
slide.js  JavaScript file. Determines order of slides. Edit this to add/remove/reorder slides. (You don't need to know JavaScript; just add/remove/reorder AddSlide commands in the list.) 
style.css CSS1 style sheet. If you want to change the format of the presentation using W3C Cascading Style Sheet, level 1 rules you can put those rules in this file and all presentation pages will be updated. Do not delete or change file name.
style.js JavaScript file which checks screen resolution and sets style of all slides using JavaScript and the Document Object Model. Do not delete or change file name. (Used by Version 1.1 of the slide template.)
style.jss JavaScript file which checks screen resolution and sets style of all slides using JavaScript and the Document Object Model. Do not delete or change file name. (Obsolete. Used by Version 1.0 of the slide template only. Retained to preserve backward compatibility with slide pages created with Version 1.0.)
s_*.htm files Sample presentation slides. Each one has a similarly-named blank template slide in template directory. 
template  Directory that holds template slides for your use. These template slides contain filler text showing what text goes in which element. Good for novice users. 
template/*.htm files  Template slides. 
blanktmp  Directory that holds template slides for your use. These template slides are completely blank and contain no filler text. Good for power users who prefer to edit HTML markup using a text editor. 
blanktmp/*.htm files  Template slides. 
demo  Directory to put demo files and sample applications into. 
basefile  Directory which holds graphical logo and other images displayed in presentation. During normal use, presentation authors should not touch any of the files in this directory. Only change/replace the files in this directory if you wish to change the look and feel of the presentation itself (e.g. by substituting in your own graphical logo image files).
notestyl Directory which holds the alternate style.js and style.css files that allows you to view the presentation in speaker notes mode.
notestyl/style.js Alternate style.js file that allows you to view the presentation in speaker notes mode.
presstyl Empty directory. Put the default style.js file in here when you switch to speaker note mode.

Contents of the template directory (and of the blanktmp directory)

Many of the template files have been provided with four versions:
 
Filename  Example  Meaning of filename 
<base filename>  code.htm  default, largest text size (e.g.36pt <P> on 17" monitor) 
<base filename>_l  code_l.htm  large text size, but a bit smaller than default (e.g.27pt <P> on 17" monitor) 
<base filename>_m  code_m.htm  medium text size (e.g.24pt <P> on 17" monitor) 
<base filename>_s  code_s.htm  small text size (e.g.16pt <P> on 17" monitor) 
The _l, _m, and _s files use progressively smaller font sizes. Warning: these small font sizes may make your presentation unreadable in front of large audiences. They will still be readable by those people who view the presentation online. If you absolutely have to use smaller point sizes than the defaults, use these. (How does this work? In the HTML, the elements in these have CLASS attributes set to CLASS="large", CLASS="medium", and CLASS="small". The style.js JavaScript file defines smaller point sizes for these classes, but you don't need to know that to use it. You can apply these classes to any element which contains text by setting the CLASS attribute in the element's start tag. For example: <PRE CLASS="small"> creates a preformatted text element with very small text.)

Here's a list of the files in the template directory and their meanings:
 
Filename  Meaning 
title  Title slide. 
agenda  Agenda slide. "Agenda" at top of page followed by bullets. 
bullet  Bullet point slide. 
code  Slide with <PRE> element to display source code. (_l, _m, _s show in smaller size.) 
markup  Slide with <PRE> element to display HTML markup. (_l, _m, _s show in smaller size.) 
tagsyn  Slide to display an HTML tag's syntax.  (_l, _m, _s show in smaller size.) 
method  A method table.   (_l, _m, _s show in smaller size.) 
prop  A property list. (_l, _m, _s show in smaller size.) 

Contents of the basefile directory

Normally, users who are authoring or viewing a presentation do not modify the contents of the basefile directory. However, developers or graphic artists who wish to customize the presentation template's look and feel (or develop their own advanced version) will find its contents useful. Here's a list of the files in the basefile directory and their purposes:
 
Filename  Purpose 
logo.jpg Logo graphic that appears in center of first page. The link to this graphic is in logopage.htm in the main directory.
sidebar.jpg Graphic that appears in left sidebar of every page. Clicking on this graphic takes you to the previous page. The link to this graphic is in prev.htm.
prev.htm HTML document opened in left sidebar frame by frameset document index.htm.
spacer.gif Transparent spacer GIF that appears in right sidebar of every page. Clicking on this graphic takes you to the next page. The link to this graphic is in next.htm.
goto.gif Graphic image of word "GOTO." Clicking on this takes you to page number which user has entered.
next.htm HTML document opened in right sidebar frame by frameset document index.htm. Contains spacer.gif, goto.gif, and input field for entering page to jump to.
navbar.js JavaScript file which defines navigation functions to move and jump from page to page.

What to Use Each HTML Element For

Element  Purpose 
<P>paragraph</P>  text paragraphs 
<UL> <LI>item a</LI> <LI>item b</LI> </UL>  unnumbered lists (LI = list item) 
<OL> <LI>item a</LI> <LI>item b</LI> </OL>  numbered lists (LI = list item) 
<PRE>source code or markup</PRE>  source code or markup (PRE = preformatted) 
<H1>header at top of page</H1>  header at top of page 

How to Make Your Own Presentation

  1. Delete sample slide pages (with titles s_*.htm)
  2. Create your own pages by copying template files from the template directory, pasting them in the main directory, editing them, and renaming them as you wish; give your files the .htm filename extension
  3. Order your pages by editing slide.js file

Using the Speaker Notes Feature

This template supports the use of "speaker notes," text on each page which is hidden when giving the presentation but displayed when the speaker is studying it.

Dos

Don'ts

Point Sizes of the Standard Elements (as automatically set by style.js file)

typical screen physical size: 
screen pixel resolution: 
aspect ratio (pixel width / pixel height): 
multiplier when compared to 800x600:
speaker 
notes 
mode
smallest 
640x480 
1.3 
0.8
11.2", 12.1" 
800x600 
1.3 
1.0
14", 15", 17" 
1024x768 
1.3 
1.28
20" 
1280x1024 
1.25 
1.7
21" 
1600x1200 
1.33 
2.0
H1  18 27  34 44 58 68
H1.titlepage  18 27  34 44 58 68
default P, LI, PRE, TD, TH 16 22  28 36 48 56
"large" class (P, LI, PRE, TD, TH)  12 17  21 27 36 42
"medium" class (P, LI, PRE, TD, TH)  12 14  18 23 31 36
"small" class (P, LI, PRE, TD, TH)  12 10  12 16 21 24

Feature Summary

Advantages 
  • Cross-platform (unlike many proprietary presentation packages)--key for Web-based authoring and distribution
  • Slides can be made immediately available to all customers on all platforms on the Web
  • Open standard file format rather than proprietary
  • Seamless integration with HTML/JavaScript/Java; if you are writing a presentation about these technologies you can build links, demo buttons, applets, etc. right into the pages; no more flipping back and forth between proprietary presentation software for slides and the browser for demos
  • Ability to leverage style sheet technology to rapidly reformat and repurpose content
  • Automatically adjusts text size to display on small or large screens and preserve page layout
  • Pages can be edited using Composer, text editors, or other HTML file editors of your choice
  • Pages can be viewed in normal "presentation mode" (hiding text of speaker notes) or "speaker notes mode" (showing both bullet points and speaker notes). 
Features not currently offered 
  • No standard feature which allows you to say "print all the pages of this presentation." Workaround: pages can be opened and printed one at a time if desired. This process could be automated with JavaScript 1.2's support for printing.
  • No standard feature for printing a miniaturized "notes" handout. Workaround: when done writing presentation, copy the HTML markup from BODY of each slide into a single combined file and print that file. This process could be automated with a Perl script or a signed JavaScript script with Java.

Frequently Asked Questions

How is Version 1.1 of the presentation template different than Version 1.0?
Do I need to know JavaScript, the Document Object Model, or Cascading Style Sheets to use this?
What's the easiest way to edit these HTML files?
How do I create graphics?
I have an existing presentation in a legacy, proprietary, platform-dependent format. How can I reuse its contents?
The text is way too big. I can't fit everything I need on one page.
I don't care if the audience can read my presentation. I still want to use a smaller font size.
I want to print out one page. How can I do this?
I want to print out the entire presentation. How can I do this?
How can I tell what my current screen resolution in pixels is?
Does it ever matter which screen resolution I author or display at?
Why are there no scroll bars for the center (content) frame?
When I'm displaying my presentation, how can I hide the Communicator tool bars?
How can I do nested lists of bullets?
How can I make nested inner bullets have smaller text than the outer level?
There are some elements like INPUT for which the presentation template doesn't specify a size, so a default value like 12 points is used, and those elements look really small on the page. Can I set the sizes of those elements so they're automatically sized like the others?
Can I set or change the style of an element on a single page only?
When I edit pages for the presentation using Composer, editing isn't WYSYWIG. Composer doesn't display the fonts in the right sizes, and I can put far more characters on the line than will actually fit on the presentation page. Why is this?
I changed my screen resolution, but it didn't seem to have any effect.
How can I center an HTML element or image (IMG) horizontally on the page?
How can I center an HTML element or image (IMG) vertically on the page?
When I select "Back" from the center frame's popup menu, it goes back to the previous page, but when I click on the right side of the page to go forward, it jumps forward two pages. Why?
I want to create a link in a page to an external HTML demo file. What's the best way to do this?
How do I change the graphic displayed on the left side of the screen in the sidebar?
How do I change the logo graphic displayed in the center of the screen on the logo page?
By default, the template shows logopage.htm when you first open the presentation. I would like to show a different page upon opening. How do I do this?
Can I modify the presentation's format using both Cascading Style Sheets and the JavaScript Document Object Model (a.k.a. JavaScript Style Sheets)?
How can I create a text style which I will reuse on many pages?
Suppose I have created two presentations with this template and wish to create a third presentation that combines them. What's the easiest way to do this?
How can I minimize the size of a finished presentation?
Can these presentations be viewed with Navigator 3.x?
I wish to reuse presentation pages that were created with Version 1.0 of the presentation template. How can I do this?

Known Bugs as of 7 July 1997