Bert Bos | How to use b6?
To view: switch to full screen
(With Javascript: press A)
September 2012
b6 is
Slide sets based on b6 allow multiple slides in a single HTML file. Each slide starts with an H1 and the b6 style sheet (or the b6 JavaScript, on certain browsers) makes sure that only a single slide is shown at a time.
When the slides are not being projected, i.e., they rendered in screen, print or some other mode, all the slides are shown on a single page.
Include this code before the first slide:
<link href="../Tools/b6/b6.css" media=projection rel=stylesheet> <script src="../Tools/b6/b6.js" type="text/javascript"></script> <p class=letterhead><a href="http://www.w3.org/" ><img alt="W3C" src="../Icons/w3c_home.png"></a>
And mark-up every slide as
<div class=slide> <h1>Title of the slide</h1> ... </div>
As above, but replace projection
with (overflow-block: optional-paged)
<link href="../Tools/b6/b6.css" media="(overflow-block: optional-paged)" rel=stylesheet> ...
('projection' became deprecated in 2017, when Media Queries level 4 replaced it with the 'overflow-block' feature.)
Optionally, you can also
<p class=signature><a href="mailto:bert@w3.org" >Bert Bos</a> | How to use b6?
<style type="text/css" media=projection> html {background-image: url(...) </style>
b6 predefines a few classes:
<div
class=comment><…</div>
after a slide to add
comments that will be visible in screen mode or when printed, but not
during a presentation.
<div class=callout>…</div>
This is a callout!
This is a sidebar
<div class=sidebar>…</div>
<div class=col>…</div> <div class=col>…</div>
Something on the left.
Something on the right.
<p class=veryshort
) or a
bit more (<p class=verylong
).
<pre>... <span class=keyword>...
<pre
class=extensive>
Show a progress bar cum navigation bar:
<!--minitoc--><!--/minitoc-->
just
after every H1
../Tools/mkminitoc Overview.html
If necessary, remove it again with
../Tools/rmminitoc Overview.html
You might want to include Bernard's advertisement. (See also French and Dutch on the next slides):
To Lead the Web to its full potential
To Anticipate the Trends
To Increase your company value
Join W3C
http://www.w3.org/Consortium/join
or contact: Bernard Gidon <bgidon@w3.org>
Pour Développer le potentiel du Web
Pour Anticiper les évolutions technologiques
Pour Augmenter la valeur et visibilité de votre organisation
Rejoigner le W3C
http://www.w3.org/Consortium/join
ou contacter : Bernard Gidon <bgidon@w3.org>
Om het volle potentieel van het Web te ontwikkelen
Om de trends voor te zijn
Om de waarde van uw bedrijf te vergroten
Word lid van W3C
http://www.w3.org/Consortium/join
of neem contact op: Bernard Gidon <bgidon@w3.org>
B6 provides a style sheet for slide presentations based on a style made for some W3C brochures. It also provides a small script in JavaScript to help with presentations on browsers that do not support the projection media type. (Currently, 2012, only Opera's full-screen mode correctly selects the projection style sheets. On other browsers, you can emulate that mode by turning JavaScript on and pressing the A key to start the b6 script.)