About the Slide Template (Version 2.0, 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

Table of Contents

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 and style.css with the versions 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. 
title.htm  Title page. 
titletut.htm Alternate title page used when running in Tutorial Mode.
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 2.0 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 if you need to use slides created with Version 1.0 of the template. (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 allow you to view the presentation in speaker notes mode.
notestyl/style.js Alternate style.js JavaScript file that allows you to view the presentation in
speaker notes mode. Required.
notestyl/style.css Alternate style.css Cascading Style Sheet file that allows you to view the presentation in
speaker notes mode. Required.
notestyl/slide.js Alternate slide.js JavaScript file that defines order of slides in speaker notes mode. Optional; needed only if different slides (or a different order) are used in speaker notes mode.
tutstyl Directory which holds the alternate style.js and style.css files that allow you to view the presentation in tutorial mode.
tutstyl/style.js Alternate style.js JavaScript file that allows you to view the presentation in
tutorial mode. Required.
tutstyl/style.css Alternate style.css Cascading Style Sheet file that allows you to view the presentation in
tutorial mode. Required.
tutstyl/slide.js Alternate slide.js JavaScript file that defines order of slides in speaker notes mode. Optional; needed only if different slides (or a different order) are used in tutorial mode.
presstyl Empty directory. Put the default style.js, style.css, and (if necessary) slide.js file in here when you switch to speaker notes mode or tutorial 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. The sample presentation included in the Version 2.0 template includes speaker notes text which you can display as explained below to see how this feature works.

Using the Tutorial Mode Feature

This template supports the creation of "visual tutorials," which are an easy way to repurpose an existing presentation for use as a self-guided online tutorial. Each page can have optional visual tutorial text which is hidden when in presentation mode and speaker notes mode but displayed when in visual tutorial mode.

The sample presentation included in the Version 2.0 template includes tutorial text which you can display as explained below to see how this feature works. For more practical examples of visual tutorials, go to the DevEdge Online DHTML Technology Pod at http://developer.netscape.com/one/dynhtml/index.html and look under the "Tutorials" section.

Selecting Slides to be Included or Skipped in Different Versions of a Presentation

If you create a long presentation with many pages, you may wish to create multiple versions of it by selecting different sets of pages to display in each version. For example: You can do this by editing slide.js. Declare a JavaScript variable for each version (or "mode") and set it to true when you are running in that mode, false when you are not. Then, in slide.js's list of AddSlide commands, check whether the variable is true before you add a slide to the list.

For example, the sample presentation included with the template has one title to display when running as a presentation or in speaker notes mode and a different title to use when running as a visual tutorial. To do this, it first declares a variable tutorialMode:

... and then checks this variable when adding the title slide to the list: Syntax notes on the JavaScript if statement: You can save typing if you wish by using the else statement; the next code sample does the same thing as the previous one: To switch from one mode to the other before delivering a presentation, either edit the variable declaration in slide.js to be true or false, or create multiple slide.js files (one each in the presstyl, notestyl, and tutstyl directories) which you can swap back and forth with the style.js and style.css files for the various versions.

If you would like to learn more about the syntax of the JavaScript if statement, see Conditional statement in the  JavaScript Guide.

Dos

Don'ts

Keyboard Control

When viewing a presentation in Navigator 4.x, you can use the keyboard to page forward and backward.

Point Sizes of the Standard Elements When Running in Presentation Mode
(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
 

Scaling Point Sizes Up or Down

When running in speaker notes mode, the point sizes will be 55% of the point sizes in the above table; when running in tutorial mode, the point sizes will be 79% of the point sizes in the above table. These percentages are called "scaling factors" because they scale the display font size down from the default size. By default, no element is ever scaled to a font size smaller than 12 points, the "minimum font size." Both the scaling factors and the minimum font size can be changed by editing these lines in style.js: By default, sizeMultiplier is 1.0 when running in presentation mode, so elements are shown at 100% of the point sizes in the above table. In tutorial mode, sizeMultiplier is 0.79, so elements are shown at 79% of the point sizes in the above table. In speaker notes mode, sizeMultiplier is 0.55, so elements are shown at 55% of the point sizes in the above table. By changing the value of sizeMultiplier, you can increase or decrease the scaling factor. You could also define other modes, such as a disabledAccessibilityMode with sizeMultiplier set to 2.00 so that all text is shown in twice the normal font size for ease of reading by the visually impaired.

To preserve legibility, no element is ever scaled to be smaller than minFontSize points (by default, 12 points). By changing variable minFontSize, you can increase or decrease this minimum font size.

Viewing Presentations in Navigator 3.x

Presentations created using Version 2.0 of this template can be viewed using Navigator 3.x. Page forward and backward using the mouse; keyboard control will not work in Navigator 3.x.

Keep in mind that the visual quality of presentations will be reduced when viewed in Navigator 3.x because Navigator 3.x does not support style sheets. Element styles will not be set and fonts will not be scaled; all elements will appear in the default format and size of HTML in Navigator 3.x. Likewise, the hiding and showing of text for "speaker notes mode" and "tutorial mode" will not work; all HTML text in each slide will be shown at all times.

Note: Presentations created using Version 1.0 of this template cannot be viewed using Navigator 3.x. Instead of the HTML page's text, the contents of the Version 1.0 style sheet file style.jss will be displayed. To upgrade presentation pages created using Version 1.0 of this template to be viewable in Navigator 3.x as well as Navigator 4.x, see the section entitled  Upgrading Pages Created with Version 1.0 to Version 2.0.

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), "speaker notes mode" (showing both bullet points and speaker notes), and "visual tutorial mode" (repurposing content as online tutorial)
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, a signed JavaScript script with Java, or a Java application.

Frequently Asked Questions

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 on disk of a finished presentation?
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


 

What's New in Version 2.0

Version 2.0 of the template offers these new features:

Backward Compatibility with Version 1.0 of this Template

Presentation pages created using Version 1.0 of this template can be viewed as-is in Version 2.0 of this template. To ensure this backward compatibility, Version 2.0 of the template includes style.jss, the style sheet file used by Version 1.0.

Note: if you include a Version 1.0 HTML page as-is in a Version 2.0 presentation, the format of the V1.0 page will be controlled by V1.0 style sheet file style.jss, whereas the format of the V2.0 page will be controlled by the V2.0 style sheet file style.js. As a result, any formatting changes made to style.js will not affect the older pages. If you are mixing V1.0 pages and V2.0 pages in the same presentation and want to achieve a unified format, either duplicate your formatting commands in style.jss and style.js, or see the section entitled Upgrading Pages Created with Version 1.0 to Version 2.0 to upgrade your V1.0 pages to be identical with V2.0 pages and use the same V2.0 style sheet file style.js.

Similarly, because the format of the V1.0 pages is controlled by the V1.0 style sheet file style.jss, you will not be able to add tutorial mode text to a V1.0 page. If you want to add tutorial mode text to a V1.0 page, see the section entitled Upgrading Pages Created with Version 1.0 to Version 2.0 to upgrade your V1.0 pages to be identical with V2.0 pages and use the same V2.0 style sheet file style.js.

Viewing a Version 1.0 Presentation within the Version 2.0 Template

If you have a presentation created with Version 1.0 of the template and you wish to view it within Version 2.0 of the template (in order to take of Version 2.0's support for keyboard control, for example) simply paste the Version 1.0 HTML files and slide.js file into the Version 2.0 directory. Because Version 2.0 maintains backward compatibility with Version 1.0, they will display correctly. (They will not be viewable in Navigator 3.x, however. If you want the Version 1.0 presentation to be viewable in Navigator 3.x, upgrade the pages to Version 2.0.)

Upgrading Presentation Pages Created with Version 1.0 to Version 2.0

Presentation pages created using Version 1.0 of this template can be viewed as-is in Version 2.0 of this template. However, upgrading those older pages to be identical to Version 2.0 pages will have these benefits: Usually, upgrading a Version 1.0 page to Version 2.0 is simple; all you have to do is change the link to style.jss to point at style.js instead. In other words, change this line in the Version 1.0 page: ... to match this line in the Version 2.0 pages: Normally, this single change will upgrade a Version 1.0 page to be a Version 2.0 page.

There is only one exception. If the Version 1.0 page has an embedded JavaScript Style Sheet which uses the Version 1.0 font size data structure theFontSizes, you will get a JavaScript error when you load that page. There are two ways to fix this problem:

  1. In style.js, set the variable v1CompatibilityMode to true. This is the easiest way to fix the problem.
  2. Solution (1) causes twice as much data to be initialized on every page load. For improved performance, instead change any references in the HTML pages' embedded style sheets from theFontSizes[currentScreen] (the data structure used in Version 1.0) to fontSizeOf (the data structure used in Version 2.0).