W3C Blue2 Style I - Document Structure

To get the W3C Blue2 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 /2005/Talks/your-slide-dir and should be modified as needed, or you can use absolute links, as generated by comma slidy.

<?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 W3C Meetings</title>
<meta name="copyright" content="Copyright &#169; 2005 W3C (MIT, ERCIM, Keio)" />
<link rel="stylesheet" href="../Slidy/w3c-blue2.css" type="text/css"
media="screen, projection, print" />
<script src="../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>

W3C Blue2 Style II - Background and Cover

To get the slide background and cover page:

The body element's content should start with the following markup, but please modify the heading and contact details as appropriate:

<div class="background">
  <div class="header"> </div>
  <img src="../Slidy/bullet.png" alt="hidden bullet" />
  <div class="footer">
    <object id="w3c-logo"
    data="../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="../Slidy/w3c-logo-blue.gif" /></a></object>
    <!-- modify the following text as appropriate -->
    Presentation Name<br />
    Event, Location, Month Year
  </div>
</div>

<div class="slide cover">
  <div class="header">
    <h1>Slidy template for W3C Blue2 Style</h1>
    <p><a href="http://www.w3.org/People/Raggett/">Dave Raggett</a>,
    &lt;<a href="mailto:dsr@w3.org">dsr@w3.org</a>&gt;</p>
  </div>
  <img src="../Slidy/keys.jpg" class="cover"
  alt="W3C as letters on 3 plastic buttons from a keyboard" />
</div>

Further information

Avoid placing too much content on each slide, no one will remember it all, and it will overflow the slide design.
For further guidance on slide markup see the Slidy pages
If you want to print all the slides, press the "A" key to toggle to the "all slides view" then use the browser's print function in the normal way.
The comma slidy tool can be used with all.htm files in the old W3C slide format, for example:
```
http://www.w3.org/2005/Talks/0605-sb-acintroduction/all.htm,slidy
```
You are advised to save the output from the tool to a different location and make it available Public, Members only or Team restricted as appropriate.
If you want to view slides offline, be careful to save the slides with all of the content (see browser's Save As function, and "Web Page, complete" for the save as type).
Firefox users may want the autohide extension to hide the toolbars when entering full screen with F11
If you get stuck then Dave Raggett should be able to help.

Using SVG for great looking graphics

If you want to include graphics in SVG, you should stick to SVG Tiny to increase the chance of people seeing it on whatever browser they are using. Always, provide a fallback as a JPEG, PNG or GIF.
The use of SVG may result in users being prompted to install a plugin. The Adobe SVG plugin is reasonably effective, but an alternative may be to switch to a browser with native SVG support.
Some versions of browsers implement SVG in a brittle way that may cause the browser to crash. If this happens to you, please consider switching to a different version. Alternatively, you could strip out the object tag and just use the img element
The W3C logo in the footer uses SVG for jaggy free scaling via the markup for the slide background, see slide 3
Firefox users on Windows should install the Adobe SVG Viewer 6.0, or install Firefox 1.5 which has native SVG support.