How to navigate through a Presentation

• Advance to next slide with mouse click
• Move forward/backward between slides with space bar, Pg Up and Pg Dn keys
• Home key for first slide, End key for last slide (this depends on how your system is set up and on the platform used)
• Function F11 to go full screen and back (system and platform dependant)
• The "F" key toggles the display of the footer toolbar
• The "A" key toggles display of current vs all slides
  • Use the "A" key when you want to view or print all slides (including handout notes)
• Font sizes automatically adapt to browser window size
  • use < and > keys for additional control (or - and + keys on number pad)
• Switching off JavaScript reveals all slides

How is a presentation set up?

• Each presentation is a single XHTML file.
• The presentation can be sectioned into several XHTML files to keep each file manageable and reasonable in size, thus reducing loading times. This is particularly the case if a presentation contains a lot of images, diagrams, movies etc.
• You can then link from one section to the next XHTML file via normal links on a page.
• At any time a single page or slide can be printed on demand, either from a link on a page or by using "Print this Slide" from the toolbar below.
• Try it: Print this Single Slide
• You can also print a whole presentation (including Handout-Notes) using "Print all Slides" from the toolbar below.
• Printing a whole presentation prints the relevant XHTML file loaded at the moment, so when you move to other sections (other XHTML files) you obviously must print these separately.

Quicktime-Video

Display incremental slide content

"Incremental" means the display of single elements on a page with each Mouse Click or by using the Back/Forward Arrow Keys, revealing content snippets, one after the other.

For incremental display the class="incremental" is used on the following elements:

• ul, ol, dl, div, p, pre, blockquote, li, dt, dd, span
• img, object, address, table, tr, th, td
• and h2 to h6

Using class="incremental" images and movies can be revealed, but also lists, tables and cells, as well as single paragraphs and a host of other things — just like in PowerPoint or Keynote.

As you can see, the possible solutions are really endless and just the same as in PowerPoint or Keynote, except the presentation is online — the user can consume the presentation on his/her own pace.

Images scale as the browser window resizes

For adaptive layout, percentage widths on images are used together with CSS positioning:

• CSS positioning is simpler and more reliable than using tables

Adaptive Layout - Content that adapts to its surroundings and user action, such as reducing or enlarging the size of the browser window.

When the browser window is resized the images on a slide will automatically also resize accordingly when images are used with widths in percentages instead of static values of points, ems or pixels.

This has the advantage of the layout showing consistent, no matter wether the viewport of the browser is large or small — content resizes relative to its surrounding context.

CSSPIXELS.COM 2007

Display of incremental layered GIF images

With CSS relative positioning it is possible to lay images on top of each other to build up diagrams, charts, statistical information or just plain image layers.

Again, class="incremental" is used, not on the images to be layered, but on the container containing the images instead. Code Example:

  <div class="incremental" style="margin-left: 4em; position: relative"> 
    <img src="img/btn-firefox.gif" style="position: absolute; left: 0pt; top: 0pt;"/>
    <img src="img/btn-firefox.gif" style="position: absolute; left: 50pt; top: 5pt;" /> 
    <img src="img/btn-firefox.gif" style="position: absolute; left: 100pt; top: 10pt;" /> 
    <img src="img/btn-firefox.gif" style="position: absolute; left: 150pt; top: 15pt;" /> 
  </div>