Cover page images (keyboard)

Computer Science I for Majors: HTML Slidy Template

Wesley Griffin <griffin5@cs.umbc.edu>

Adapted from the HTML Slidy Overview by Dave Raggett <dsr@w3.org>


Hit the space bar for next slide

Slide Shows in XHTML

Slidy is Copyright © 2005-2006 W3C ® (MIT, ERCIM, Keio), All Rights Reserved.

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>

What you need to do

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
  <title>Computer Science I for Majors</title> 
  <link rel="stylesheet" type="text/css" media="screen, projection, print" 
   href="slidy.css" /> 
  <link rel="stylesheet" type="text/css" media="screen, projection, print" 
   href="cs201-blue.css" /> 
  <script src="slidy.js" 
   charset="utf-8" type="text/javascript"></script> 
  <style type="text/css"> 
    <!-- your custom style rules --> 
  </style> 
</head>
<body>
   ... your slides marked up in XHTML ...
</body>
</html>

Additional instructions

Generate a Title Page

If you want a separate title page with the UMBC CS201 blue style, the first slide should be as follows:

<div class="slide cover"> 
 <img src="keyboard2.jpg" 
  alt="Cover page images (keyboard2)" class="cover" /> 
 <br clear="all" />            
 <h1>Computer Science I for Majors: HTML Slidy Template</h1> 
 <p><a href="http://www.cs.umbc.edu/~griffin5/">Wesley Griffin</a> 
 <a href="mailto:griffin5@cs.umbc.edu">griffin5@cs.umbc.edu</a></p> 
</div>

The cs201-blue.css style sheet looks for the classes "slide" and "cover" on div and img elements using the CSS selector div.slide.cover

This technique can be used to assign your slides to different classes with a different appearence for each such class.

Slidy also allows you to use different background markup for different slides, based upon shared class names, as in "foo" below. Backgrounds without additional class names are always shown except when the slide isn't transparent. You may need to tweak your custom style sheet.

<div class="background foo">
   ... background content ...
<div>

...

<div class="slide foo">
   ... slide content ...
<div>

Incremental display of slide contents

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>

An element is incrementally revealed if its parent element has class="incremental" or if itself has that attribute. Text nodes are not elements and are revealed when their parent element is revealed. You can use class="incremental" on any element except for <br />. Use class="non-incremental" to override the effect of setting the parent element's class to incremental.

Note: you will see a red asterisk on the left of the toolbar when there is still something more to reveal.

Create outline lists with hidden content

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>

Make your images scale with the browser window size

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>

To work around a CSS rendering bug in IE relating to margins, you can set display:inline on floated elements.

How to center content vertically and horizontally

Within the div element for your slide:

<div class="vbox"></div>
<div class="hbox">
Place the content here
</div>

and style it with the following:

div.vbox {
  float: left;
  height: 40%; width: 50%;
  margin-top: -220px;
}
div.hbox {
  width:60%;  margin-top: 0;
  margin-left:auto; margin-right:auto;
  height: 60%;
  border:1px solid silver;
  background:#F0F0F0;
  overflow:auto;
  text-align:left;
  clear:both;
}

The above styling is included in cs201-blue.css, which is designed to be used with slidy.css, but you are encouraged to develop your own style sheet with your own look and feel.

Additional Remarks