changeset 57:59c5bf04e8c4

change background color & add March25.html
author Masataka Kohagura <e085726@ie.u-ryukyu.ac.jp>
date Fri, 21 Mar 2014 10:09:53 +0900
parents 9c020c214dff
children 626c52694901
files 14/slides/March25th.html 14/slides/minimalistic.html 14/slides/template.html
diffstat 3 files changed, 264 insertions(+), 130 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/14/slides/March25th.html	Fri Mar 21 10:09:53 2014 +0900
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
+  <title>25th,March,2014</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    
+-->
+
+<!-- styles  -->
+<style media="screen,projection">
+
+html,
+body,
+.presentation { margin: 0; padding: 0; }
+
+.slide { display: none;
+         position: absolute;
+         top: 0; left: 0; 
+         margin: 0;
+         border: none;
+         padding: 2% 4% 0% 4%;         /* css note: order is => top right bottom left  */
+         -moz-box-sizing: border-box;
+         -webkit-box-sizing: border-box;
+         box-sizing: border-box;
+         width: 100%; height: 100%;    /* css note: lets use border-box; no need to add padding+border to get to 100% */
+         overflow-x: hidden; overflow-y: auto;
+         z-index: 2;
+       }
+
+.slide.current { display: block; }  /* only display current slide in projection mode */
+
+.slide .stepcurrent { color: black; }
+.slide .step        { color: silver; } /* or hide next steps e.g. .step { visibility: hidden; } */
+
+.slide {
+/*
+  background-image: -webkit-linear-gradient(top, blue, aqua, blue, aqua);
+  background-image: -moz-linear-gradient(top, blue, aqua, blue, aqua);
+*/
+}
+</style>
+
+<style media="screen">
+.slide             { border-top: 1px solid #888; }
+.slide:first-child { border: none;  }
+</style>
+
+<style media="print">
+.slide    { page-break-inside: avoid; }
+.slide h1 { page-break-after:  avoid; }
+.slide ul { page-break-inside: avoid; }
+</style>
+
+
+<!-- add js lib (jquery) -->
+<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>
+  $(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>
+
+</head>
+<body>
+
+<div class="presentation">
+
+  <!-- add slides here; example -->
+  
+  <div class='cover'>
+    <h1>Your Slide Title Here</h1>
+    <ul>
+      <li>Item One Here</li>
+      <li>Item Two Here</li>
+    </ul>
+  </div>
+
+  <div>
+    <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>
+    <h1>Another Slide Title Here</h1>
+    <p>yada yada yada</p>
+  </div>
+
+</div> <!-- presentation -->
+</body>
+</html>
--- a/14/slides/minimalistic.html	Fri Mar 21 09:54:19 2014 +0900
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,130 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta http-equiv="content-type" content="text/html;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    
--->
-
-<!-- styles  -->
-<style media="screen,projection">
-
-html,
-body,
-.presentation { margin: 0; padding: 0; }
-
-.slide { display: none;
-         position: absolute;
-         top: 0; left: 0; 
-         margin: 0;
-         border: none;
-         padding: 2% 4% 0% 4%;         /* css note: order is => top right bottom left  */
-         -moz-box-sizing: border-box;
-         -webkit-box-sizing: border-box;
-         box-sizing: border-box;
-         width: 100%; height: 100%;    /* css note: lets use border-box; no need to add padding+border to get to 100% */
-         overflow-x: hidden; overflow-y: auto;
-         z-index: 2;
-       }
-       
-.slide.current { display: block; }  /* only display current slide in projection mode */
-       
-.slide .stepcurrent { color: black; }
-.slide .step        { color: silver; } /* or hide next steps e.g. .step { visibility: hidden; } */
-
-.slide {
-  background-image: -webkit-linear-gradient(top, blue, aqua, blue, aqua);
-  background-image: -moz-linear-gradient(top, blue, aqua, blue, aqua);
-}
-</style>
-
-<style media="screen">
-.slide             { border-top: 1px solid #888; }
-.slide:first-child { border: none;  }
-</style>
-
-<style media="print">
-.slide    { page-break-inside: avoid; }
-.slide h1 { page-break-after:  avoid; }
-.slide ul { page-break-inside: avoid; }
-</style>
-
-
-<!-- add js lib (jquery) -->
-<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>
-  $(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>
-
-</head>
-<body>
-
-<div class="presentation">
-
-  <!-- add slides here; example -->
-  
-  <div class='cover'>
-    <h1>Your Slide Title Here</h1>
-    <ul>
-      <li>Item One Here</li>
-      <li>Item Two Here</li>
-    </ul>
-  </div>
-
-  <div>
-    <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>
-    <h1>Another Slide Title Here</h1>
-    <p>yada yada yada</p>
-  </div>
-
-</div> <!-- presentation -->
-</body>
-</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/14/slides/template.html	Fri Mar 21 10:09:53 2014 +0900
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
+  <title>25th,March,2014</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    
+-->
+
+<!-- styles  -->
+<style media="screen,projection">
+
+html,
+body,
+.presentation { margin: 0; padding: 0; }
+
+.slide { display: none;
+         position: absolute;
+         top: 0; left: 0; 
+         margin: 0;
+         border: none;
+         padding: 2% 4% 0% 4%;         /* css note: order is => top right bottom left  */
+         -moz-box-sizing: border-box;
+         -webkit-box-sizing: border-box;
+         box-sizing: border-box;
+         width: 100%; height: 100%;    /* css note: lets use border-box; no need to add padding+border to get to 100% */
+         overflow-x: hidden; overflow-y: auto;
+         z-index: 2;
+       }
+
+.slide.current { display: block; }  /* only display current slide in projection mode */
+
+.slide .stepcurrent { color: black; }
+.slide .step        { color: silver; } /* or hide next steps e.g. .step { visibility: hidden; } */
+
+.slide {
+/*
+  background-image: -webkit-linear-gradient(top, blue, aqua, blue, aqua);
+  background-image: -moz-linear-gradient(top, blue, aqua, blue, aqua);
+*/
+}
+</style>
+
+<style media="screen">
+.slide             { border-top: 1px solid #888; }
+.slide:first-child { border: none;  }
+</style>
+
+<style media="print">
+.slide    { page-break-inside: avoid; }
+.slide h1 { page-break-after:  avoid; }
+.slide ul { page-break-inside: avoid; }
+</style>
+
+
+<!-- add js lib (jquery) -->
+<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>
+  $(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>
+
+</head>
+<body>
+
+<div class="presentation">
+
+  <!-- add slides here; example -->
+  
+  <div class='cover'>
+    <h1>Your Slide Title Here</h1>
+    <ul>
+      <li>Item One Here</li>
+      <li>Item Two Here</li>
+    </ul>
+  </div>
+
+  <div>
+    <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>
+    <h1>Another Slide Title Here</h1>
+    <p>yada yada yada</p>
+  </div>
+
+</div> <!-- presentation -->
+</body>
+</html>