May 24, 2005
Bert Bos <bert@w3.org>
During a presentation:
Include these two links:
<link href="../Tools/b5/b5.css"> rel=stylesheet media=projection <script src="../Tools/b5/b5.js" type="text/javascript"></script>
h1
{page-break-before: always}
The old w3ctalk-proj.css style can be used instead of b5.css (but looks rather more boring…)
Each slide starts with:
<h1>Title of this slide</h1>
Recommended: add an ID attribute
<h1 id=this-slide>Title of this slide</h1>
Put these on the first slide
<p class=letterhead><a href="http://www.w3.org/"><img alt=W3C src="../Icons/w3c_home.png"></a> <p class=signature><a href="mailto:..."> Your Name</a> <p class=frame><img src="../Tools/b5/pageframe.png" alt="" style="width:1px; height:1px">
There are also “pageframe2.png” & “pageframe3.png” →
The pageframe image is a work-around. When browsers improve, this will be done automatically by the style sheet.
The slides will work without the logo (letterhead) and signature, but they are required by our house style.
pageframe2.png
pageframe3.png
em (<em>
) looks emphasized
strong (<strong>
) looks
strong
em (<em>
) looks emphasized
strong (<strong>
) looks
strong
To make a 2-column slide, use
<div class=col>... left...</div> <div class=col>... right...</div>
Use <div class=callout>...</div>
to make a
box with a shadow.
This is a DIV.callout
Use
<div class=sidebar> ... </div>
to make a dark blue box on the right side of the slide.
Use <pre class=extensive>...</pre>
to make a
PRE with slightly smaller fonts, for long code examples.
if (a > b) { c = d; a = compute(a, b); } else { d = c; b = compute(b, a); }
The children will be displayed one at a time with every press of the space bar (Javascript only)
<ul class=incremental> <li>The first item <li>The second item <li>The third item </ul>
Overlays the images, display images one at a time with every press of the Space bar (Javascript only)
<div class=overlay> <img src=... class=first> <img src=...> <img src=...> </div>
(class=first only necessary for MSIE)
“Takahashi style” means ultra-short slides with large fonts
<p class=veryshort>Yes! <p class=short>Clear message
Yes!
In CODE and PRE, use SPAN for colors
A keyword has <span class=keyword> A comment has <span class=comment> A string has <span class=string> A dim has <span class=dim>
CSS3 Presentation Levels can do the incremental rendering better, but it isn't ready yet…
Comments go inside a DIV with class “comment” like this one.