About the Slide Template (Version 3.0, Updated June 22, 1998)

htmlpres.zip Presentation (example) Presentation (other sidebar)

QUICK START IF YOU'RE TOO BUSY TO READ THIS

  1. Open index.htm in presentation directory using Navigator 3.x, Navigator 4.x, Internet Explorer 4.x, or later.
  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. 
basefile/help.htm Quick help page brought up by clicking "Help" link on right side of  page. Required file. Do not delete.
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. 
index2.htm Alternate frameset page to index.htm. This one includes clickable "next page" and "previous page"  arrows. 
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. 
notes2.htm Alternate frameset page to notes.htm. This one includes clickable "next page" and "previous page"  arrows.
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 includes speaker notes text which you can display as explained below to see how this feature works.

To View the Speaker Notes

  1. Move style.js and style.css into directory presstyl and move the alternate style.js and style.css from directory notestyl to the main directory (if you are using the Slide Selection feature, you may need to swap slide.js files in the same way)
  2. Open the presentation using frameset document notes.htm, which will display a scrollbar in the center frame when needed to view long notes.

To Hide the Speaker Notes

  1. Move the alternate style.js and style.css back into directory notestyl and move style.js and style.css from presstyl to the main directory (if you are using the Slide Selection feature, you may need to swap slide.js files in the same way)
  2. Open the presentation using frameset document index.htm, which does not display a scrollbar in the center frame.

To Create Speaker Notes Text in Your Slides

Place speaker notes text just before the </BODY> tag, inside a DIV element with ID speakernotessection. The HTML markup looks like this:

<DIV ID="speakernotessection"> <H1>Speaker Notes</H1> <P>a note</P> <P>another note</P> </DIV>

Note: You must place the speaker notes section below the tutorial section, if one exists. If you have both on the same page, the HTML markup will look like this:

<DIV ID="tutorialsection"> <P>This is some explanatory text.</P> <P>This is some more explanatory text.</P> </DIV> <DIV ID="speakernotessection"> <H1>Speaker Notes</H1> <P>a note</P> <P>another note</P> </DIV>


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 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 Presentations Page of the DevEdge Online DHTML Technology Pod at http://developer.netscape.com/docs/presentations/dynhtml.html.

To Run in Visual Tutorial Mode

  1. Move style.js and style.css into directory presstyl and move the alternate style.js and style.css from directory tutstyl to the main directory (if you are using the Slide Selection feature, you may need to swap slide.js files in the same way)
  2. Open the presentation using frameset document notes.htm, which will display a scrollbar in the center frame when needed to view long explanatory text.

To Return to Presentation Mode

  1. Move the alternate style.js and style.css back into directory tutstyl and move style.js and style.css from presstyl to the main directory (if you are using the Slide Selection feature, you may need to swap slide.js files in the same way)
  2. Open the presentation using frameset document index.htm, which does not display a scrollbar in the center frame.

To Create Visual Tutorial Text in Your Slides

Place speaker notes text below the slide's bullet points, just before the /<DIV ID="speakernotessection"> tag (or before the </BODY> tag if there are no speaker notes) inside a DIV element with ID tutorialsection. The HTML markup looks like this:

<DIV ID="tutorialsection"> <P>This is some explanatory text.</P> <P>This is some more explanatory text.</P> </DIV>

Note: You must place the tutorial section above the speaker notes section, if one exists. If you have both on the same page, the HTML markup will look like this:

<DIV ID="tutorialsection"> <P>This is some explanatory text.</P> <P>This is some more explanatory text.</P> </DIV> <DIV ID="speakernotessection"> <H1>Speaker Notes</H1> <P>a note</P> <P>another note</P> </DIV>


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:

// Running online as Visual Tutorial with explanatory text. var tutorialMode = false // now false; set to true to run as tutorial

... and then checks this variable when adding the title slide to the list:

// Add *either* the tutorial title page or the presentation // title page, depending on whether we're running in tutorialMode. if (tutorialMode)&nbsp; { AddSlide("titletut"); } if (!tutorialMode) { AddSlide("title"); }

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:

// Add *either* the tutorial title page or the presentation // title page, depending on whether we're running in tutorialMode. if (tutorialMode) { AddSlide("titletut"); } else { AddSlide("title"); }

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 AND DON'Ts

Dos

Don'ts


KEYBOARD CONTROL

When viewing a presentation in Navigator 4.x or Internet Explorer 4.x or later, 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 18 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:

// Adjust font sizes downward in speakerNotes and tutorial modes. var sizeMultiplier = 1.0 // default if (tutorialMode) sizeMultiplier = 0.79 // online viewing if (speakerNotesMode) sizeMultiplier = 0.55 // speaker preparation with notes var minFontSize = 12 // smallest ever displayed

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 or later 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.


VIEWING PRESENTATIONS IN INTERNET EXPLORER 4.X

Presentations created using Version 3.0 or later of this template can be viewed using Internet Explorer 4.x. All presentation template features are fully functional in Internet Explorer 4.x including scaling of text; hiding, showing, and positioning of "speaker note mode" and "tutorial mode" text; and keyboard navigation.

Note: Presentations created using Version 2.0 or earlier of this template cannot be viewed using Internet Explorer 4.x. A JavaScript error will occur because a STYLE tag is missing from the HTML pages. To upgrade presentation pages created using Version 2.0 of this template to be viewable in Internet Explorer 4.x, see the section entitled  Upgrading Pages Created with Version 2.0 to Version 3.0.


FEATURE SUMMARY

Advantages 
  • Cross-platform (unlike many proprietary presentation packages) and cross-browser--key for Web-based authoring and distribution
  • Slides can be made immediately available to all customers on all platforms on the Web in both browsers
  • 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.
  • No integrated tool for editing text and graphics or conditionally choosing which slides to display.


CREATING A BUTTON TO OPEN THE PRESENTATION IN A NEW FULL SCREEN WINDOW

These presentations should always be viewed in a full screen window (a window which is sized to fill the entire display area) because the text is scaled so that each slide's text will fit in the window's slide area if the window is full size.

If a user views the presentation in a window which is smaller than full screen size, not all of the text may fit in the presentation window's slide area. Moreover, since the index.htm and index2.htm frameset documents have scrollbars turned off in the slide area, the user will not be able to scroll down to see the text.

If you are concerned about the risk that users may open the presentation in a window smaller than full screen size and thus not be able to see all of the text on some slides, there are three ways to avoid this problem:

  1. On the page which has the link, you can include text which reminds users to fullscreen the window and hide the Communicator tool bars. Drawback: experience indicates that busy users who are pressed for time often fail to read the text on a page before they click its links.
  2. Instead of linking to index.htm and index2.htm (which have scrollbars turned off in the slide area), you can link to notes.htm and notes2.htm, which have scrollbars turned on in the slide area. Drawback: when you are running in presentation mode, on pages which have hidden speaker notes or tutorial text, the scrollbars may display (and, by taking up space, change the layout of your HTML text) even though when the user scrolls down, there is nothing but whitespace to see. This solution is easy and it guarantees that the users will be able to see all of the text of every page, but it is a bit ugly because the layout of some HTML text will be changed and users will scroll down and see nothing but whitespace.
  3. The best solution is to use a JavaScript button to open the presentation window, and have that button's code automatically open the window at full screen size and (on Communicator and Internet Explorer 4.0) hide the tool bars. To see how to do this, read the rest of this section.

As an example, here are buttons which each open the presentation at full screen size (and hide the toolbars on Navigator 4.0 and Internet Explorer 4.0):

Demo:
Default button

Button that displays default alert to user first

Button that displays custom alert to user first

The presentation window is placed at the upper left corner of the screen on Navigator 4.0 and Internet Explorer 4.0. On Navigator 3 this isn't possible because JavaScript 1.1 doesn't support the positioning of windows, so the user will usually have to move the window so that all of its contents can be seen.

Here is the cross-browser JavaScript code that was used to open the window:

<SCRIPT LANGUAGE="JavaScript"> <!-- // Client-sniff code from: // http://developer.netscape.com/docs/examples/javascript/browser_type.html function Is () { // convert all characters to lowercase to simplify testing var agt=navigator.userAgent.toLowerCase() // *** BROWSER VERSION *** this.major = parseInt(navigator.appVersion) this.minor = parseFloat(navigator.appVersion) this.nav = ((agt.indexOf('mozilla')!=-1) && ((agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1))) this.nav2 = (this.nav && (this.major == 2)) this.nav3 = (this.nav && (this.major == 3)) this.nav4 = (this.nav && (this.major == 4)) this.nav4up = this.nav && (this.major >= 4) this.navonly = (this.nav && (agt.indexOf(";nav") != -1)) this.ie = (agt.indexOf("msie") != -1) this.ie3 = (this.ie && (this.major == 2)) this.ie4 = (this.ie && (this.major == 4)) this.ie4up = this.ie && (this.major >= 4) this.opera = (agt.indexOf("opera") != -1) } var is = new Is() // Open presentation at URL theURL in new, full screen window. // Arguments (first two are required; last two are optional): // theURL STRING: URL of presentation to open // (index.htm, index2.htm, notes.htm, or notes2.htm) // winName STRING: JavaScript name given to new window object. // altNav3URL STRING or false: Alternate URL of different frameset // (usually notes.htm or notes2.htm) to use when on Nav3 // instead of default that's used on Nav4+, IE4+. // If false, ignored. // showAlert false or true or STRING. If false, do nothing. // If true, show default alert telling user that a new // window is being opened without closing the old one. // If STRING, show STRING (custom message) in alert. function openPresoWin (theURL, winName, altNav3URL, showAlert) { var presoWin; var winOptions = "location=no,menubar=yes,resizable=no," + "status=yes,titlebar=yes,toolbar=no,scrollbars=no"; if ( (is.nav3 || is.nav4up || is.ie4up) && (openPresoWin.arguments.length > 3) && showAlert ) { if (typeof showAlert == "string") alert (showAlert); else alert ("The presentation will be opened in a new, full screen window.\nYou can close the presentation window by choosing File-->Close from the pulldown menu.\nWhen you close the presentation window, you will return to the window you were in before."); } var nav3ScreenHeight, nav3ScreenWidth; if (is.nav3) { var tool = java.awt.Toolkit; var size = new java.awt.Dimension(tool.getDefaultToolkit().getScreenSize()); var width = size.width.toString(); var height = size.height.toString(); nav3ScreenWidth=eval(width); nav3ScreenHeight=eval(height); } if (is.nav4up) winOptions += ",screenX=0,screenY=0,outerHeight=" + screen.height + ",outerWidth=" + screen.width; if (is.ie4up) winOptions += ",left=0,top=0,height=" + screen.height + ",width=" + screen.width; if (is.nav3) winOptions += ",height=" + nav3ScreenHeight + ",width=" + nav3ScreenWidth; if ((is.nav3) && (openPresoWin.arguments.length > 2) && altNav3URL && (altNav3URL !="")) theURL = altNav3URL; if ((is.major >= 4) || (is.nav3)) { presoWin = window.open(theURL, winName, winOptions); // doing this on ie4 causes JavaScript error 'Access is denied' if (is.nav) presoWin.focus(); } else if (is.nav2) { alert ("Sorry, to view this presentation, you need an up-to-date copy " + "of Netscape Navigator! Please go to http://home.netscape.com/download/" + " (or click the Netscape 'N' logo) and download the latest version! It's free!"); } else { alert ("Sorry, to view this presentation, you need an up-to-date copy " + "of Netscape Navigator! Please go to http://home.netscape.com/download/" + " and download the latest version! It's free!"); } return false; } //--> </SCRIPT>

Here is the HTML for the buttons which call that JavaScript code:

<H3>Default button</H3> <FORM NAME="openButton"> <INPUT type=button value="Click This Button!" onClick="return openPresoWin('index2.htm', 'presoWin', 'notes2.htm');"> <FORM> <H3>Button which displays default alert to user first</H3> <FORM NAME="openButton"> <INPUT type=button value="Click This Button!" onClick="return openPresoWin('index2.htm', 'presoWin', 'notes2.htm', true);"> </FORM> <H3>Button which displays custom alert to user first</H3> <FORM NAME="openButton"> <INPUT type=button value="Click This Button!" onClick="return openPresoWin('index2.htm', 'presoWin', 'notes2.htm', 'Your custom opening alert message here.');"> </FORM>


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 22 May 1998


WHAT'S NEW IN VERSION 3.0

Version 3.0 of the template offers only two new features, which are support for the viewing of presentations in Internet Explorer 4.x, and the Help page available from a link on the right side of the page. Version 3.0 also provides backward compatibility for slides created using Version 2.0 of the template.


BACKWARD COMPATIBILITY WITH VERSION 2.0 OF THIS TEMPLATE

Presentation pages created using Version 2.0 of this template can be viewed as-is in Version 3.0 of this template. However, they will not be viewable in Internet Explorer 4.x. If you want to upgrade an existing presentation to make it viewable in Internet Explorer 4.x, see the section entitled Upgrading Pages Created with Version 2.0 to Version 3.0 to upgrade your V2.0 pages to be identical with V3.0 pages and include the extra STYLE element needed to support Internet Explorer 4.x.


VIEWING A VERSION 2.0 PRESENTATION WITHIN THE VERSION 3.0 TEMPLATE

If you have a presentation created with Version 2.0 of the template and you wish to view it within Version 3.0 of the template, simply paste the Version 2.0 HTML files and slide.js files into the Version 3.0 directory. Because Version 3.0 maintains backward compatibility with Version 2.0, they will display correctly. (They will not be viewable in Internet Explorer 4.x. If you want to upgrade an existing presentation to make it viewable in Internet Explorer 4.x, see the section entitled Upgrading Pages Created with Version 2.0 to Version 3.0 to upgrade your V2.0 pages to be identical with V3.0 pages and include the extra STYLE element needed to support Internet Explorer 4.x.


UPGRADING PRESENTATION PAGES CREATED WITH VERSION 2.0 TO VERSION 3.0

Presentation pages created using Version 2.0 of this template can be viewed as-is in Version 3.0 of this template in Navigator 3.x and above. However, to make the pages viewable in Internet Explorer 4.x, you must upgrade those older pages to be identical to Version 3.0 pages, and paste the pages into a Version 3.0 presentation template directory.

Usually, upgrading a Version 2.0 page to Version 3.0 is simple; all you have to do is paste this STYLE tag into the HTML page for each slide. The STYLE tag should be placed into the HEAD, immediately before the SCRIPT element which links to style.js:

Normally, this single change will upgrade a Version 2.0 page to be a Version 3.0 page.


EXCEPTION: UPGRADING VERSION 2.0 PAGES THAT HAVE EMBEDDED PAGE-SPECIFIC NETSCAPE JAVASCRIPT STYLE SHEETS

Normally, adding the <STYLE ID="ietssxyz" TYPE="text/css"></STYLE> tag will convert Version 2.0 slide pages to be viewable in Internet Explorer 4.0 using Version 3.0 of the presentation template. However, if the Version 2.0 page has an embedded Netscape JavaScript Style Sheet (STYLE element in the HTML markup's HEAD which looks like <STYLE TYPE="text/javascript"></STYLE> and is neither empty nor commented out), you will get a JavaScript error when you load that page in Internet Explorer 4.x because Internet Explorer has a different JavaScript API for setting style sheet properties from JavaScript. To fix this problem, you must convert the Netscape-specific JavaScript code into cross-browser JavaScript code. To do that, use the automatic JavaScript code generator found at http://developer.netscape.com/docs/technote/dynhtml/css1tojs/css1tojs.html.

For example, on a particular page you might wish to set the font size of H2 elements to be equal to the font size of P elements. To do that, you would (1) find the name of the variable which holds the predetermined font size of P elements, (2) use the automatic JavaScript code generator found at http://developer.netscape.com/docs/technote/dynhtml/css1tojs/css1tojs.html to generate cross-browser JavaScript code which sets the font size of H2 elements to that variable, (3) paste that code into a new  element in the page's HEAD, and (4) delete or comment out the original <STYLE TYPE="text/javascript"></STYLE> tag.

Step 1: Finding the name of the variable which holds the font size of the target element for the current display size

Inspecting the cross-browser JavaScript style sheet file style.js, you can see that the font size of the P element is set to the value of the variable fontSizeOf.p. (Look at the line document.tags.P.fontSize = fontSizeOf.p in the style.js source code.)

Step 2: Use the code generator to create cross-browser JavaScript which sets the size of H2 elements

a) Open http://developer.netscape.com/docs/technote/dynhtml/css1tojs/css1tojs.html.
b) Click Erase All Fields.
c) Since we want to set the font size of H2 elements, type H2 into the CSS1 Selector field.
d) Since we want to set the CSS1 font-size property, type font-size into the CSS1 Property Name field.
e) Since we want to set H2's font-size to the variable fontSizeOf.p, type fontSizeOf.p into the CSS1 Value field.
f) Since fontSizeOf.p is a variable rather than a hard-coded value like 14pt, check the Value is Variable? field.
g) If there are any other page-specific rules you need to create, define them in the same way.
h) Click Generate Code to create the cross-browser JavaScript code to set the H2 element's font-size property.
i) Copy all of the generated code from the
<SCRIPT LANGUAGE="JavaScript1.2"> tag to the </SCRIPT> tag, making sure to include the SCRIPT tags themselves. Do not copy the <STYLE ID="ietssxyz" TYPE="text/css"></STYLE> element, since you should have added that to the HTML page's HEAD already.

Step 3: Paste the cross-browser JavaScript code into the HTML page's HEAD

Paste the SCRIPT element (and its enclosed JavaScript code) into the HTML page's HEAD. You should add it at the end of the HEAD, just before the </HEAD> tag, to make sure these page-specific rules come after the generic rules and are therefore given a higher priority.

Step 4: Delete the old <STYLE TYPE="text/javascript"></STYLE> tag

Now that you have added cross-browser JavaScript code to set the element's style, you no longer need the original Netscape-specific JavaScript code which was causing the errors on Internet Explorer 4.0, so delete it.


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).