About the Slide Template (Version 2.0, Updated
)
Quick Start if You're Too Busy to Read This
-
Open index.htm in presentation directory
-
Click the far right edge of the page to go forward; click the far left
edge to go back
-
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
-
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. |
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
-
Delete sample slide pages (with titles s_*.htm)
-
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
-
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.
To View the Speaker Notes
-
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)
-
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
-
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)
-
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 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.
To Run in Visual Tutorial Mode
-
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)
-
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
-
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)
-
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 may wish to create "long" and "short" versions of a presentation
-
you may wish to add extra slides (or skip some) if you post your presentation
on the World Wide Web for self-guided browsing
-
if you create a visual tutorial, you may wish to add extra pages (displayed
only in visual tutorial mode) with extra explanatory text
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) { AddSlide("titletut"); }
if (!tutorialMode) { AddSlide("title"); }
Syntax notes on the JavaScript if statement:
-
enclose the variable name in parentheses (so if (tutorialMode) means
"if we're in tutorial mode")
-
! means "not" (so if (!tutorialMode) means "if we're not
in tutorial mode")
-
enclose the AddSlide commands in brackets
-
follow each AddSlide command with a semicolon; this allows you
to put multiple AddSlide commands in a single set of brackets
if you wish
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
-
Use 8.3 filenames so these presentations can be downloaded and viewed on
Windows 3.1.
-
Add the .htm extension to file names if you are editing the files using
a text editor. (Composer does this automatically.)
-
Open your files in Navigator (using this presentation application) and
check how they look after you edit them. Composer is not aware of the style
sheet settings and won't show text in its final, displayed size.
-
Always use the files in the template directory (or the blanktmp) directory
to create a new file. Do not create slide pages from scratch! The
template files contain the necessary links to style sheets in their headers.
If you create an HTML page from scratch, it won't have the necessary links,
the page won't be controlled by the style sheets, and your presentation
won't display correctly (so you'll have to fix the pages by adding the
links!).
-
Close your HTML tags (if manually editing the HTML markup). For example,
make sure that every <P> is matched by a </P>. This is not absolutely
necessary, but if you make a mistake when editing the markup, this often
makes it easier to find the problem.
Don'ts
-
During normal presentation authoring, don't open the basefile directory
or change its contents. Presentation authors don't need to. You should
only open this directory if you wish to change the graphic logos shown
by the presentation.
-
During normal presentation authoring, don't edit the style.js or style.css
files. You should only edit these files if you want to change the style
or font size of all the pages in your presentation.
-
During normal presentation authoring, don't edit the index.htm file. You
should only edit this file if you wish to change the design of the presentation
page (e.g. the size of the left and right margins, etc.).
-
Don't hardcode point sizes using <FONT SIZE="16pt">, etc. The style.js
style sheet automatically scales HTML text sizes so that the pages will
be viewable on screens as small as 640x480 or as large as 1600x1200. (Note:
currently, graphic images are not scaled, so make sure that the size of
your image in pixels is smaller than the smallest screen resolution you
plan to use.) Also, from the standpoint of long-term reusability, this
separates format and content and makes it easy to change your format later
without editing each HTML file individually.
Keyboard Control
When viewing a presentation in Navigator 4.x, you can use the keyboard
to page forward and backward.
-
keys which page forward: n and N (for "next") and the spacebar (for ease
of use in dark rooms)
-
keys which page backward: p and P (for "previous")
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 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?
-
No. Generally, presentation authors shouldn't touch the JavaScript and
CSS files (except for slide.js, which determines slide order). Just edit
the HTML and let the application take care of the rest.
What's the easiest way to edit these HTML files?
-
Any of the following:
-
Composer
-
text editor of your choice (for a good freeware text editor for Win32,
download Programmer's
File Editor; UltraEdit
is an even better shareware text editor for Win32)
-
other HTML editing software of your choice
How do I create graphics?
-
If you want to create GIF files or JPEGs yourself, two possibilities are
PaintShop Pro (shareware downloadable from http://www.shareware.com/)
or Adobe Photoshop.
I have an existing presentation in a legacy, proprietary, platform-dependent
format. How can I reuse its contents?
-
Some presentation packages now allow you to save presentation pages as
HTML. Otherwise, save text slides as text files and change them into HTML
manually or with the conversion/filtering software of your choice, and
capture graphics as screen shots with a shareware utility like Lview (available
at http://www.shareware.com/
) and save them as GIFs or JPEGs.
The text is way too big. I can't fit everything I need on one page.
Remember, there may be many people in a large room for your presentation.
The text must be large enough for them to see it from a distance. As a
rule of thumb, you should be able to read your presentation on a 17" monitor
from 10' away. Use few words and many slides.
I don't care if the audience can read my presentation. I still want to
use a smaller font size.
OK. Use the _l, _m, and _s templates in the template directory. These
use progressively smaller font sizes.
I want to print out one page. How can I do this?
Open the HTML file for that page in Navigator and Print it.
I want to print out the entire presentation. How can I do this?
Options:
-
print the pages one at a time
-
paste the contents of each file's <BODY> into a single file and print
that
How can I tell what my current screen resolution in pixels is?
To check your screen width in pixels, type this in the Location Bar
(URL field) of Communicator:
javascript: screen.width
To check your screen height in pixels, type:
javascript: screen.height
Does it ever matter which screen resolution I author or display at?
Images aren't scaled, so make sure that the image size you choose will
fit on both your editing screen and your final display screen.
To fit the maximum number of characters on the screen, it is best to
edit and display the presentation on screens which have the same aspect
ratio (ratio of screen pixel width to screen pixel height). Most screens
have an aspect ratio of 4:3 (e.g. 640x480, 800x600, 1024x768, 1600x1200,
etc.) but a few do not (e.g. 1280x1024, which is 5:4). The presentation
template has been designed so that no matter what platform you edit on,
the text will scale up or down to fit within an 800x600 display screen.
This means that space is used a bit less efficiently on screens with an
aspect ratio other than 4:3. In other words, if you edit on a 1280x1024
screen, you'll find that you can fit slightly less text on the screen that
when editing on 800x600, and when a presentation edited on 1280x1024 is
displayed on 800x600, you'll find there's a bit of extra unused space.
Users have been satisfied with the way scaling words across different
screen resolutions, but if you are able to edit at the same resolution
you will display the presentation at, it's not a bad idea. To be safe,
always test your presentation at the intended display resolution before
putting it up on the screen in front of hundreds of people!
Why are there no scroll bars for the center (content) frame?
Presentation authors should design their content so it fits in the
center frame without the need to scroll it. If your content doesn't fit
on a single page, it's probably too much text for a single slide anyway,
so split it up into two pages. By default, scroll bars are hidden for aesthetic
reasons and to save screen space. Developers who wish to change this could
change the SCROLLING attribute in the index.htm frameset document.
When I'm displaying my presentation, how can I hide the Communicator tool
bars?
Hide the toolbar, location bar, and personal bar by clicking the down-arrow
button on the far left side of each. The bars will collapse, and you'll
have more screen space to use. Do this before you open the index.htm
start page to avoid the need to reload or resize the window. (This too
can be automated via JavaScript.)
How can I do nested lists of bullets?
Use nested ordered or unordered lists. For example, this HTML:
<UL>
<LI>This is the first list item in an Unordered List</LI>
<LI>2nd unordered list item
<OL>
<LI>1st nested ordered list item</LI>
<LI>2nd nested ordered list item</LI>
</OL>
</LI><!--this closes the 2nd unordered list item-->
<LI>3rd unordered list item</LI>
</UL>
... would display like this in the browser:
-
This is the first list item in an Unordered List
-
2nd unordered list item
-
1st nested ordered list item
-
2nd nested ordered list item
-
3rd unordered list item
How can I make nested inner bullets have smaller text than the outer level?
By default, the presentation template shows all bullet or numbered
items at all levels at the same size. This assures the best possible readability
for viewers in the audience. You can change this default behavior in two
ways.
First way: set CLASS="small" or CLASS="medium" or CLASS="large" on
the inner bullet list's UL or OL start tag; the inner list will then have
the smaller point sizes specified for the small/medium/large classes in
the style sheet. This approach allows you to achieve that visual effect
without altering the style.js style sheet file.
Second way: if you feel comfortable editing a little JavaScript, you
can edit the style.js file and define a contextual selector which says
that all OL's within OL's will be displayed in a smaller point size. For
example, adding this line within the setFontSizes function body would have
that effect on all nested unordered list items on all pages in the presentation:
document.tags.contextual(document.tags.OL, document.tags.OL).fontSize = medium;
This approach uses the power of style sheets to let you modify the format
for all pages of the presentation by editing a single style sheet.
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?
Yes. Do the following steps:
To Set An Element's Style Globally for All Pages of the Presentation:
-
Save a backup copy of the style.js file in the template directory.
-
Find another element in the presentation whose size you would like to match.
For example, if you want to make INPUT elements (by default, size is not
set) be the same size as P elements (by default, size is set) this would
be P.
-
Open the style.js file in a text editor like Notepad. (NOT COMPOSER!)
-
Find the line in function setFontSizes which sets the other element's size.
In this case it would be
document.tags.P.fontSize = p
-
Copy the line.
-
Paste it on the next line.
-
Change the first tagname in the pasted line to the new element's name.
In this example, we change the first P to INPUT, leaving the second p unchanged:
document.tags.INPUT.fontSize = p
-
Save the file and close it.
-
Reopen the presentation and make sure the size is now set.
Can I set or change the style of an element on a single page only?
Yes. Do the following steps:
To Set an Element Style Locally for A Single Page:
-
Save a backup copy of the page.
-
Open the page's HTML file in a text editor like Notepad.
-
Inside the <HEAD>, find this markup:
<!-- * If you want to add a JavaScript style sheet
specific to this page,
* uncomment the next line
and add your formatting commands. * -->
<!-- <STYLE TYPE="text/javascript"></STYLE>
-->
-
Delete the <!-- before <STYLE and the --> after </STYLE>.
-
Insert some returns between <STYLE TYPE="text/javascript"> and </STYLE>.
-
Find another element in the presentation whose size you would like to match.
For example, if you want to make INPUT elements (by default, size is not
set) be the same size as P elements (by default, size is set) this would
be P.
-
Open the style.js file in a text editor like Notepad. (NOT COMPOSER!)
-
Find the line in function setFontSizes which sets the other element's size.
In this case it would be
document.tags.P.fontSize = p
-
Copy the line and close style.js.
-
Paste the line into your HTML page between <STYLE TYPE="text/javascript">
and </STYLE>.
-
Change the first tagname in the pasted line to the new element's name.
In this example, we change the first P to INPUT, leaving the second p unchanged:
document.tags.INPUT.fontSize = p
-
Cut the "document." (at the front of the line) which gives us:
tags.INPUT.fontSize = p
-
After the equal sign and space, just before the element name, insert the
name of the global variable fontSizeOf and a period:
tags.INPUT.fontSize = fontSizeOf.p
-
Save the HTML page and close it.
-
Reopen the presentation and make sure the size is now set.
For another example, look at how the sample page s_color.htm sets the font
size of H1, H2, and P elements to a different value than the other pages.
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?
Composer is not currently style sheet aware. It doesn't have the ability
to read in the style.js stylesheet which controls font size when the pages
are displayed. Therefore, when you edit presentation pages with Composer,
the text will be displayed in the default font size. Just make sure you
display the pages in Communicator while/after editing to make sure your
text fits on the page.
I changed my screen resolution, but it didn't seem to have any effect.
If you change your display resolution, make sure to reboot your machine
before you continue working.
How can I center an HTML element or image (IMG) horizontally on the page?
Enclose it in <CENTER> and </CENTER> tags.
How can I center an HTML element or image (IMG) vertically on the page?
Enclose it in a table which has a single cell that is vertically aligned.
Look how the logopage.htm file in the template uses these techniques together
to both vertically and horizontally center the logo graphic on the page:
<CENTER><TABLE WIDTH="95%" HEIGHT="93%" >
<TR VALIGN=CENTER>
<TD ALIGN=CENTER><CENTER>
<IMG SRC="basefile/dclogo.jpg" NOSAVE
HEIGHT=85 WIDTH=420> </CENTER>
</TD>
</TR>
</TABLE></CENTER>
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?
If you want to go back to the previous page, don't use the "Back"
option on the center frame's popup menu. Instead, click on the left side
of the page (in the blue ribbon). "Back" will take you back to the previous
page, but it won't update the template's internal page counter. So when
you click on the right side of the page to go forward, you will seem to
jump forward two pages.
Example:
Joe Mozilla is on page 5. He selects "Back" from the popup to go back
one page. Page 4 is displayed. But when he clicks on the right side of
page 4 to go forward, page 6 is displayed, and he's confused.
I want to create a link in a page to an external HTML demo file. What's
the best way to do this?
If you want a link on your presentation page to a demo HTML file, create
a link which will automatically open a new window when clicked. When you
are done with the demo, you can close the demo window, and the presentation
window is undisturbed, ready to go to the next page.
It is best not to open a demo page within the presentation window (unless
the demo page itself is one of the pages of the presentation, in which
case it's fine). It is possible to click on a link, open a demo
page in the center frame, and use the popup menu's Back option to return,
but this is risky; if you make a mistake in your navigation, you may have
to reopen your presentation, start over at the first page, and go to the
page you were on.
To create a link that will always open a new window, in the link's anchor
element, set the TARGET attribute (which determines what window the page
opens in) to a name ("foo", "baz", "flowerdemo", etc.) which is not currently
in use by any window or frame. (Don't use the names "prev",
"slide", or "next", which are used by the three frames of the slide
template.) Communicator will automatically create a new window, open the
page in that window, and assign the name to that window.
Example: Look at the links on this HTML page:
<BODY>
<H1>Demos</H1>
<P>hiding and showing layers<BR>
<A HREF="demo/flower/Flower.htm" TARGET="flower">Flower Catalog</A>
<P>changing z-order<BR>
<A HREF="demo/fish1/fish1.htm" TARGET="fish">Fish and Poles</A>
</BODY>
How do I change the graphic displayed on the left side of the screen in
the sidebar?
In the basefile directory, replace the sidebar.jpg file with the graphic
of your choice. If you use a graphic filename other than sidebar.jpg, make
sure to update the link path to it in basefile/prev.htm.
How do I change the logo graphic displayed in the center of the screen
on the logo page?
In the basefile directory, replace the logo.jpg file with the graphic
of your choice. If you use a graphic filename other than logo.jpg, make
sure to update the link path to it in logopage.htm.
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?
In slide.js, change the line AddSlide("logopage") to add the
filename of your choice.
Can I modify the presentation's format using both Cascading Style Sheets
and the JavaScript Document Object Model (a.k.a. JavaScript Style Sheets)?
Yes. A Cascading Style Sheets file called style.css has been provided
in the main directory. All of the sample pages and template pages load
it automatically. Any CSS1 rules you put in style.css will automatically
be loaded and used by the presentation's pages.
In this way, you can flexibly control the presentation's format by combining
the static formatting of Cascading Style Sheets with the dynamic formatting
made possible by the JavaScript Document Object Model.
How can I create a text style which I will reuse on many pages?
In style.js (using JavaScript syntax) or style.css (using CSS1 syntax)
define a class which has the text style you desire. Then, you can set the
CLASS= attribute of any element in any page to that class name, and the
element will inherit the style. For an example, look how style.js creates
a class "agendahilite" (red text on yellow background) which is used in
pages s_agenda.htm, s_agend1.htm, and s_agend2.htm.
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?
Suppose that you have one presentation about Java in a directory called
"java", a second presentation about JavaScript in a directory called "js",
and you want to create a new presentation that combines the two. The simplest
method is to create a new presentation directory (let's call it "combo"),
copy into it all the HTML files and demo files you wish to reuse, and copy
into its slide.js file the slide page lists from java/slide.js and js/slide.js.
However, that approach has three drawbacks: it wastes disk space, because
you make a new copy of every file; it is hard to maintain, because the
two copies must be kept up to date; and if the two presentations by coincidence
had HTML files with the same name, the filenames collide.
A cleverer approach is to paste the java and js directories inside the
new combo directory, and have combo get its files from the subdirectories.
You can do this by specifying in the AddSlide function calls the relative
path to the HTML files in the subdirectories; separate the directory names
from the filenames using a forward slash, which works in JavaScript on
all platforms. For example, the slide.js file in combo might look like:
AddSlide("java/intro")
AddSlide("java/demo")
AddSlide("java/summary")
AddSlide("js/trends")
AddSlide("js/demo")
AddSlide("js/future")
If you have many modular presentations which you like to mix and match
for different audiences, you can put them all in a single directory (let's
call it "presos") and then create "meta presentations" in the same directory
which load their pages from the other presentation directories using relative
pathnames. In the previous example, directory "presos" would include the
two presentation directories "java" and "js". To create a third presentation
which combined the two, you would create a third presentation directory
in "presos" called "javajs"; the slide.js file in javajs would look like:
AddSlide("../java/intro")
AddSlide("../java/demo")
AddSlide("../java/summary")
AddSlide("../js/trends")
AddSlide("../js/demo")
AddSlide("../js/future")
In a relative pathname, two dots (the "../") mean "go up one directory
level."
How can I minimize the size on disk of a finished presentation?
Delete all of these files and directories: read_me.htm, template, blanktmp,
demo/fish1, and all of the sample presentation pages like s_bullet.htm.
If you aren't using any HTML slide pages created with Version 1.0 of
the presentation template, you can delete all of the style.jss files (in
the main directory and the notestyl, presstyl, and tutstyl directories).
In Version 2.0, the style.jss files have been replaced by the style.js
files; the style.jss files are only retained to provide backward
compatibility.
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 30 September 1997
-
If you do a resize after opening the index.htm page, you may get a javascript
error the next time you click the "next" button. Workaround: Shift-Reload
will reload and take you back to the first page. Use the Goto button to
go back to the page you were on. (HINT: to avoid this problem, fullscreen
Navigator before opening the index.htm page.)
-
Do not click through the pages faster than Communicator is able to repaint
the screen; this may cause Communicator to crash. Instead, use the Goto
button to jump to the page you wish to display.
What's New in Version 2.0
Version 2.0 of the template offers these new features:
-
ability to view text of presentations in Navigator
3.x
-
ability to page forward and backward using the keyboard
(when using Navigator 4.x)
-
tutorial mode for making visual tutorials
with accompanying explanatory text
-
ability to scale presentation font size up or down
by any amount
-
logopage.htm is no longer hardcoded to be the default first page in the
"slide" frame of index.htm; if you want a different page to come up first,
just edit slide.js; it's no longer necessary to change the filename in
logopage.htm
-
backward compatibility with slides created
using Version 1.0 of the template
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:
-
pages will be viewable using Navigator 3.x
-
all pages will be under the control of the Version 2.0 style sheet files
style.js, ensuring a unified style
-
you will be able to add tutorial mode text to the pages
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:
<SCRIPT LANGUAGE="JavaScript1.2" SRC="style.jss"></SCRIPT>
... to match this line in the Version 2.0 pages:
<SCRIPT LANGUAGE="JavaScript1.2" SRC="style.js"></SCRIPT>
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:
-
In style.js, set the variable v1CompatibilityMode to true.
This is the easiest way to fix the problem.
-
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).