To get the W3C Cambridge 2010 Style:
The xhtml file should match the following template, but please modify the content of the title element as appropriate for your presentation. The relative links below assume that your presentation is in a directory like /2010/Talks/your-slide-dir/ and should be modified as needed.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Slidy template for Cambridge 2010</title> <meta name="copyright" content="Copyright © 2010 W3C (MIT, ERCIM, Keio)" /> <link rel="stylesheet" href="../Cambridge/template.css" type="text/css" media="screen, projection, print" /> <script src="../../../Talks/Tools/Slidy/slidy.js" type="text/javascript"></script> </head> <body> ... background, cover slide ... <div class="slide"> <h1>Introduction</h1> ... slide content ... </div> ... other slides ... </body> </html>
To get the slide background, the body element's content should start with the following markup:
<div class="background"> <div class="header"> </div> <img src="../Cambridge/bullet.gif" alt="" /> <img src="../Cambridge/fold.gif" alt="" /> <img src="../Cambridge/fold-dim.gif" alt="" /> <img src="../Cambridge/nofold-dim.gif" alt="" /> <img src="../Cambridge/unfold-dim.gif" alt="" /> <img src="../Cambridge/bullet-fold.gif" alt="" /> <img src="../Cambridge/bullet-unfold.gif" alt="" /> <img src="../Cambridge/bullet-fold-dim.gif" alt="" /> <img src="../Cambridge/bullet-nofold-dim.gif" alt="" /> <img src="../Cambridge/bullet-unfold-dim.gif" alt="" /> <div class="footer"> <object id="w3c-logo" data="../../../Talks/Tools/Slidy/w3c-logo-blue.svg" type="image/svg+xml" title="W3C logo"><a href="http://www.w3.org/"><img alt="W3C logo" id="w3c-logo-fallback" src="../../../Talks/Tools/Slidy/w3c-logo-blue.gif" /></a></object> Presentation Name<br /> W3C AC Meeting, March 2010 </div> </div>
Most browsers don't save images referenced from style sheets. This template uses a work around that includes such images in the markup along with a style rule to hide that markup. Note change "Presentation Name" to that of your presentation!
To get the cover page:
Please include the following after the background div, and remember to modify the heading and contact details to match your presentation along with the title element.
<div class="slide cover title"> <div class="header"> <!-- modify the following text as appropriate --> <h1>Slidy template for Cambridge 2010</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> <!-- modify the image src/alt as appropriate --> <img id="cover-photo" src="../Cambridge/stata.jpg" alt="Stata building by See-ming Lee, http://bit.ly/cbqTL7" /></div>
Some people insist on have busy slides with lots of content, while some other people are at the other extreme. Slidy allows you to adjust for this with a meta element.
To reduce the font size:
<meta name="font-size-adjustment" content="-1" />
Alternatively to boost the font size:
<meta name="font-size-adjustment" content="+2" />
Slidy computes the font size property for the body element based upon the window width. The above metadata is used to offset this computed value. Note that you can manually alter the font size during your presentation with the S (smaller) and B (bigger) keys. Another solution is to define a percentage font size on div.slide in a style element in your document.
<-- use a really large font size for slide content where the corresponding div looks like <div class="slide big"> --> <style type="text/css"> div.slide.big ul { font-size: 300% } div.slide.big p { font-size: 300% } </style>
You can make your bullet points or numbered list items into outlines that you can expand or collapse
<ol class='outline'> <!-- topic 1 starts collapsed --> <li>Topic 1 <ol> <li>subtopic a</li> <li>subtopic b</li> </ol> </li> <!-- topic 2 starts expanded --> <li class="expand">Topic 2 <ol> <li>subtopic c</li> <li>subtopic d</li> </ol> </li> </ol>