Mercurial > hg > Members > nobuyasu > master-presen > presen20140114

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>[your_title_here]</title>

<!--
   Notes on CSS media types used:

   1) projection -> slideshow mode (display one slide at-a-time; hide all others)
   2) screen     -> outline mode (display all slides-at-once on screen)
   3) print      -> print (and print preview)

   Note: toggle between projection/screen (that is, slideshow/outline) mode using t-key

   Questions, comments?
   - send them along to the mailinglist/forum online @ http://groups.google.com/group/webslideshow
-->

<!-- style sheet links -->
<link rel="stylesheet/less" href="themes/blank/projection.css.less"  media="screen,projection">
<link rel="stylesheet/less" href="themes/blank/screen.css.less"      media="screen">
<link rel="stylesheet/less" href="themes/blank/print.css.less"       media="print">

<link rel="stylesheet/less" href="blank.css.less"    media="screen,projection">

<!-- Notes about less css support
     - all less stylesheets (*.css.less) need to get listed/loaded first (before the less.js script)
     - find more info about less.js online @ http://lesscss.org

    ***** NOTE:
   less.js browser script currently won’t work if you’re using Google Chrome
    and the path to your page starts with "file:///" due to a known Chrome issue.
   (In the developer/js console you will see:
     XMLHttpRequest cannot load file:///../s6/shared/projection.css.less.
     Cross origin requests are only supported for HTTP.)
  -->

<!-- add js libs (less, jquery) -->
<script src="js/less-1.1.4.min.js"></script>
<script src="js/jquery-1.7.min.js"></script>

<!-- S6 JS -->
<script src="js/jquery.slideshow.js"></script>
<script src="js/jquery.slideshow.counter.js"></script>
<script src="js/jquery.slideshow.controls.js"></script>
<script src="js/jquery.slideshow.footer.js"></script>
<script src="js/jquery.slideshow.autoplay.js"></script>
<script>
  $(document).ready( function() {
    Slideshow.init();

    // Example 2: Start Off in Outline Mode
    // Slideshow.init( { mode: 'outline' } );

    // Example 3: Use Custom Transition
    // Slideshow.transition = transitionScrollUp;
    // Slideshow.init();

    // Example 4: Start Off in Autoplay Mode with Custom Transition
    // Slideshow.transition = transitionScrollUp;
    // Slideshow.init( { mode: 'autoplay' } );
  } );
</script>

<!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
<!--[if IE]>
<script src="js/jquery.microsoft.js"></script>
<![endif]-->

</head>
<body>

<div class="layout">
  <div id="header"></div>
  <div id="footer">
    <h1>[your_footer_here]</h1>
    <h2>[your_subfooter_here]</h2>
  </div>
</div>

<div class="presentation">

  <!-- add slides here; example -->

  <div class='slide cover'>
    <h1>Your Slide Title Here</h1>
    <ul>
      <li>Item One Here</li>
      <li>Item Two Here</li>
    </ul>
  </div>

  <div class='slide'>
    <h1>Steps Demos</h1>

    <!-- mark list with class step to mark all items at once -->
    <ul class='step'>
      <li>Item 1.1 Here</li>
      <li>Item 1.2 Here</li>
    </ul>

    <!-- or mark individual list items -->
    <ul>
      <li class='step'>Item 2.1 Here</li>
      <li class='step'>Item 2.2 Here</li>
    </ul>

    <!-- or mark paragraphs, div blocks or whatever -->
    <p class='step'>Another Step</p>

  </div>

  <div class='slide'>
    <h1>Another Slide Title Here</h1>
    <p>yada yada yada</p>
  </div>

  <!-- h1.fullscreen => use only centered heading with no content/body -->
  <div class='slide'>
    <h1 class='fullscreen'>Another Slide - Using Fullscreen Heading</h1>
  </div>

  <!-- h1.hidden => use heading just for table of contents (toc) -->
  <div class='slide'>
    <h1 class='hidden'>Another Slide - Using Hidden Heading</h1>
    <p>Add Your Centered Image Here or Whatever</p>
   </div>

</div> <!-- presentation -->
</body>
</html>
author	Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date	Mon, 03 Feb 2014 05:46:23 +0900
parents	ff237e0f2e40
children