For handouts, its often useful to include extra notes using a div element with class="handout" following each slide, as in:
<div class="slide"> ... your slide content ... </div> <div class="handout"> ... stuff that only appears in the handouts ... </div>
<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 © 2005 your copyright notice" /> <link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.w3.org/Talks/Tools/Slidy/show.css" /> <script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js" type="text/javascript"></script> <style type="text/css"> <!-- your custom style rules --> </style> <link rel="stylesheet" type="text/css" media="print" href="http://www.w3.org/Talks/Tools/Slidy/print.css" /> </head>
The head element should include the following link to the style sheet:
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.w3.org/Talks/Tools/Slidy/w3c-blue.css" />
The body element's content should start with the following markup:
<div class="background"> <img id="head-icon" alt="graphic with four colored squares" src="http://www.w3.org/Talks/Tools/Slidy/icon-blue.png" align="left" /> <object id="head-logo" title="W3C logo" type="image/svg+xml" data="http://www.w3.org/Talks/Tools/Slidy/w3c-logo.svg"><img alt="W3C logo" id="head-logo-fallback" src="http://www.w3.org/Talks/Tools/Slidy/w3c-logo-blue.gif" align="right"/></object> </div>
This adds the logos on the top left and right corners of the slide.
You are of course welcome to create your own slide designs.
The following files must be copied on your local machine in a
folder/directory .../Slidy
of your own choice:
The simplest thing is to use cvs to check out the whole directory, but remember to periodically check for updates
You then have two choices:
http://localhost/Talks/Tools/Slidy
and use the URIs of the form "/Talks/Tools/Slidy/show.css",
"/Talks/Tools/Slidy/slidy.js".In both cases you can then publish your files on the W3C server unchanged.
If you want a separate title page, the first slide should be as follows:
<div class="slide cover"> <img src="http://www.w3.org/Talks/Tools/Slidy/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 style sheet looks for the class "cover" on div and img elements
For incremental display, use class="incremental", for instance:
which is marked up as follows:
<ul class="incremental"> <li>First bullet point</li> <li>Second bullet point</li> <li>Third bullet point</li> </ul> <p class="incremental">which is marked up as follows:</p> <pre class="incremental"> ... </pre>
You can use class="incremental" on the following elements
For adaptive layout, use percentage widths on images, together with CSS positioning:
<div class="slide"> <h1>Analysts - "Open standards programming will become mainstream, focused around VoiceXML"</h1> <!-- use CSS positioning and scaling for adaptive layout --> <img src="trends.png" width="50%" style="float:left" alt="projected growth of VoiceXML" /> <blockquote style="float:right;width: 35%"> VoiceXML will dominate the voice environment, due to its flexibility and eventual multimodal capabilities </blockquote><br clear="all" /> <p style="text-align:center">Source Data Monitor, March 2004</p> </div>
These can be marked up using CSS relative positioning, e.g.
<div class="incremental" style="margin-left: 4em; position: relative"> <img src="face1.gif" alt="face" style="position: static; vertical-align: bottom"/> <img src="face2.gif" alt="eyes" style="position: absolute; left: 0; top: 0" /> <img src="face3.gif" alt="nose" style="position: absolute; left: 0; top: 0" /> <img src="face4.gif" alt="mouth" style="position: absolute; left: 0; top: 0" /> </div>
You should also use transparent GIF images to avoid the IE/Win bug for alpha channel in PNG. A fix is expected in IE 7. A work around is available on skyzyx.com. My thanks to ACID2 for the graphics.
Inclusion of SVG content can be done using the object element, for example:
has been achieved by:
<object data="example.svg" type="image/svg+xml" width="50%" height="10%" title="Indian Office logo"> <img src="example.png" width="50%" alt="Indian Office logo" /> </object>
This ensures that the enclosed png is displayed when the browser has no plugin installed or can't display SVG directly.
However, there are caveats, see the next slide!
There is a serious bug in IE6+Adobe Plugin that can create problems. Namely:
On Windows, the Adobe SVG plugin doesn't respect the CSS z-index property, and if used on backgrounds will always show through other content.
Some browsers (e.g. Opera 8) only support SVG Tiny, which doesn't support external style sheets or style elements within SVG. The work around is to set the properties via style attributes on the corresponding elements. In principle, browsers should honor the version attribute and fall back to the alternative within the object element if they don't support the version used by a given SVG file.
Are there any tools for downgrading SVG to SVG Tiny?
<meta name="copyright" content="Copyright © 2005 W3C (MIT, ERCIM, Keio)" />
Copyright © 2005 W3C ® (MIT, ERCIM, Keio), All Rights Reserved.