Skip to content

sample.md

Latest commit

 

History

History
123 lines (99 loc) · 4.75 KB

sample.md

File metadata and controls

123 lines (99 loc) · 4.75 KB

title: HTML Slidy: Slide Shows in HTML and XHTML author: Dave Raggett copyright: Copyright © 2005-2010 W3C (MIT, ERCIM, Keio)

Slide Shows in HTML and XHTML

  • You can now create accessible slide shows with ease
  • Works across browsers and is operated like PowerPoint
    • Advance to next slide with mouse click, space bar or swipe right
    • Move forward/backward between slides with Cursor Left, Cursor Right, Pg Up and Pg Dn keys, or swipe right or left
    • Home key for first slide, End key for last slide
    • "C" key for an automatically generated table of contents, or click on "contents" on the toolbar or swipe up or down
    • Function F11 to go full screen and back
    • The "F" key toggles the display of the footer
    • The "A" key toggles display of current vs all slides
      • Try it now to see how to include notes for handouts (this is explained in the notes following this slide)
    • Font sizes automatically adapt to browser window size
      • S and B keys for manual control (or < and >, or the - and + keys on the number pad
      • Use CSS to set a relative font size on a given slide to make the content bigger or smaller than on other slides
    • Switching off JavaScript reveals all slides
  • Now move to next slide to see how it works

What you need to do

Example:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Slide Shows in XHTML</title>
  <meta name="copyright"
   content="Copyright &#169; 2005 your copyright notice" />
  <link rel="stylesheet" type="text/css" media="screen, projection, print"
   href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" />
  <script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js"
   charset="utf-8" type="text/javascript"></script>
  <style type="text/css">
    <!-- your custom style rules -->
  </style>
</head>

Timing Your Presentation

  • Sometimes it is handy to know just how much time you have to left to finish your presentation
  • To get this feature, add the following markup to the content of the head element, replacing 5 by the duration of your presentation in minutes
  • The time left in minutes and seconds is shown in the footer next to the slide number
  • The clock starts to run when you move away from the first slide
  • Moving back to the first slide pauses the clock

Generate a Title Page

If you want a separate title page with the W3C blue style, the first slide should be as follows:

<div class="slide cover">
 <img src="http://www.w3.org/Talks/Tools/Slidy2/graphics/keys.jpg"
  alt="Cover page images (keys)" class="cover" />
 <br clear="all" />
 <h1>HTML Slidy: Slide Shows in XHTML</h1>
 <p><a href="http://www.w3.org/People/Raggett/">Dave Raggett,</a>
 <a href="mailto:dsr@w3.org">dsr@w3.org</a></p>
</div>

The w3c-blue.css style sheet looks for the classes "slide" and "cover" on div and img elements using the CSS selector div.slide.cover

This technique can be used to assign your slides to different classes with a different appearence for each such class.

Slidy also allows you to use different background markup for different slides, based upon shared class names, as in "foo" below. Backgrounds without additional class names are always shown except when the slide isn't transparent. You may need to tweak your custom style sheet.

<div class="background foo">
   ... background content ...
<div>

...

<div class="slide foo">
   ... slide content ...
<div>

Continued...

To be done