lost and found ( for me ? )

make presentation materials with html5 ( S5 template )

Reference

Here is how to make presentation materials with S5 template.
very easy!

# unzip s5-blank.zip

# ls s5-blank
s5-blank.html  ui

backup the original file and edit my-s5-blank.html
# cd s5-blank/

# cp s5-blank.html my-s5-blank.html

[ title ]

     4 <html xmlns="http://www.w3.org/1999/xhtml">
     5
     6 <head>
     7 <title>Test title hello</title>
     8 <!-- metadata -->
     9 <meta name="generator" content="S5" />
    10 <meta name="version" content="S5 1.1" />


    30 <div id="header"></div>
    31 <div id="footer">
    32 <h1>Date 2014/1/1</h1>
    33 <h2>main title</h2>
    34 </div>


   39 <div class="presentation">
    40
    41 <div class="slide">
    42 <h1>main title</h1>
    43 <h2>sub title</h2>
    44 <h3>my name</h3>
    45 </div>

[ slide ]

add three slides

   39 <div class="presentation">
    40
    41 <div class="slide">
    42 <h1>main title</h1>
    43 <h2>sub title</h2>
    44 <h3>my name</h3>
    45 </div>
    46
    47
    48 <div class="slide">
    49 <h1>hello world slide1</h1>
    50 <ul>
    51 <li>point 1</li>
    52 <li>point 2</li>
    53 <li>point 3</li>
    54 </ul>
    55 <div class="handout">
    56 [any material that should appear in print but not on the slide]
    57 </div>
    58 </div>
    59
    60
    61 <div class="slide">
    62 <h1>hello world slide2</h1>
    63 <ul>
    64 <li>point 1</li>
    65 <li>point 2</li>
    66 <li>point 3</li>
    67 </ul>
    68 <div class="handout">
    69 [any material that should appear in print but not on the slide]
    70 </div>
    71 </div>
    72
    73
    74 <div class="slide">
    75 <h1>hello world slide3</h1>
    76 <ul>
    77 <li>point 1</li>
    78 <li>point 2</li>
    79 <li>point 3</li>
    80 </ul>
    81 <div class="handout">
    82 [any material that should appear in print but not on the slide]
    83 </div>
    84 </div>
    85
    86
    87
    88 </div>
    89
    90 </body>

after editing the file, open this file with browser

# firefox my-s5-blank.html

great!


change background

edit pretty.css file under s5-blank/ui/default.
I changed gif to blank.gif
# grep gif pretty.css
body {background: #FFF url(blank.gif) -16px 0 no-repeat; color: #000; font-size: 2em;}
div#header {background: #005 url(blank.gif) -16px 0 no-repeat;

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.