123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456 |
- <!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>Slides with Org-Mode and JavaScript</title>
- <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
- <meta name="generator" content="Org-mode"/>
- <meta name="generated" content="2008-08-28 00:06:02 CEST"/>
- <meta name="author" content="Sebastian Rose"/>
- <style type="text/css">
- html { font-family: Times, serif; font-size: 12pt; }
- .title { text-align: center; }
- .todo { color: red; }
- .done { color: green; }
- .tag { background-color:lightblue; font-weight:normal }
- .target { }
- .timestamp { color: grey }
- .timestamp-kwd { color: CadetBlue }
- p.verse { margin-left: 3% }
- pre {
- border: 1pt solid #AEBDCC;
- background-color: #F3F5F7;
- padding: 5pt;
- font-family: courier, monospace;
- font-size: 90%;
- overflow:auto;
- }
- table { border-collapse: collapse; }
- td, th { vertical-align: top; }
- dt { font-weight: bold; }
- .org-info-js_info-navigation { border-style:none; }
- #org-info-js_console-label { font-size:10px; font-weight:bold;
- white-space:nowrap; }
- .org-info-js_search-highlight {background-color:#ffff00; color:#000000;
- font-weight:bold; }
- </style><link rel="stylesheet" type="text/css" href="slides.css" />
- <script type="text/javascript" language="JavaScript" src="org-info.js"></script>
- <script type="text/javascript" language="JavaScript">
- /* <![CDATA[ */
- org_html_manager.set("TOC_DEPTH", "3");
- org_html_manager.set("LINK_HOME", "http://orgmode.org");
- org_html_manager.set("LINK_UP", "http://orgmode.org/worg/");
- org_html_manager.set("LOCAL_TOC", "0");
- org_html_manager.set("VIEW_BUTTONS", "0");
- org_html_manager.set("MOUSE_HINT", "underline");
- org_html_manager.set("FIXED_TOC", "0");
- org_html_manager.set("TOC", "0");
- org_html_manager.set("VIEW", "slide");
- org_html_manager.setup(); // activate after the parameterd are set
- /* ]]> */
- </script>
- </head><body>
- <h1 id="title">Slides with Org-Mode and JavaScript</h1>
- <div id="table-of-contents">
- <h2>Table of Contents</h2>
- <div id="text-table-of-contents">
- <ul>
- <li><a href="#sec-1">Welcome to Org-mode and Slides</a></li>
- <li><a href="#sec-2">Overview</a></li>
- <li><a href="#sec-3">Overview</a></li>
- <li><a href="#sec-4">Overview</a></li>
- <li><a href="#sec-5">Create the Org-mode file</a></li>
- <li><a href="#sec-6">Export the Org-mode file to XHTML</a></li>
- <li><a href="#sec-7">Create a stylesheet for slides</a></li>
- <li><a href="#sec-8">Create a stylesheet for slides</a></li>
- <li><a href="#sec-9">Create a stylesheet for slides</a></li>
- <li><a href="#sec-10">Create a stylesheet for slides</a></li>
- <li><a href="#sec-11">Create a stylesheet for slides</a>
- <ul>
- <li><a href="#sec-11.1">CSS - body</a></li>
- <li><a href="#sec-11.2">CSS - headlines</a></li>
- <li><a href="#sec-11.3">CSS - org-info-js</a></li>
- </ul>
- </li>
- <li><a href="#sec-12">TODOS</a></li>
- <li><a href="#sec-13">TODOS</a></li>
- <li><a href="#sec-14">TODOS</a></li>
- </ul>
- </div>
- </div>
- <div id="outline-container-1" class="outline-2">
- <h2 id="sec-1">Welcome to Org-mode and Slides</h2>
- <div id="text-1">
- <ul>
- <li>
- Navigate back and and forth on doubleclick and click.
- </li>
- <li>
- Turn around from last to first section.
- </li>
- <li>
- Turn around from first to last section.
- </li>
- </ul>
- </div>
- </div>
- <div id="outline-container-2" class="outline-2">
- <h2 id="sec-2">Overview</h2>
- <div id="text-2">
- <ul>
- <li>
- Create the Org-mode file
- </li>
- </ul>
- </div>
- </div>
- <div id="outline-container-3" class="outline-2">
- <h2 id="sec-3">Overview</h2>
- <div id="text-3">
- <ul>
- <li>
- Create the Org-mode file
- </li>
- <li>
- Export the Org-mode file to XHTML
- </li>
- </ul>
- </div>
- </div>
- <div id="outline-container-4" class="outline-2">
- <h2 id="sec-4">Overview</h2>
- <div id="text-4">
- <ul>
- <li>
- Create the Org-mode file
- </li>
- <li>
- Export the Org-mode file to XHTML
- </li>
- <li>
- Create a stylesheet for slides
- </li>
- </ul>
- </div>
- </div>
- <div id="outline-container-5" class="outline-2">
- <h2 id="sec-5">Create the Org-mode file</h2>
- <div id="text-5">
- <p>
- <b>Structure for slides</b>
- </p>
- <p>
- <pre class="example">
- * Overview
- + Create the Org-mode file
- * Overview
- + Create the Org-mode file
- + Export the Org-mode file to XHTML
- </pre>
- </p>
- </div>
- </div>
- <div id="outline-container-6" class="outline-2">
- <h2 id="sec-6">Export the Org-mode file to XHTML</h2>
- <div id="text-6">
- <p>
- <code>view:slide</code>
- </p>
- <p>
- <pre class="example">
- #+INFOJS_OPT: toc:nil ltoc:nil view:slide mouse:underline
- * COMMENT html style specifications
- # Local Variables:
- # org-export-html-style: "<link rel=\"stylesheet\" \
- # type=\"text/css\" href=\"slides.css\" />"
- # End:
- </pre>
- </p>
- </div>
- </div>
- <div id="outline-container-7" class="outline-2">
- <h2 id="sec-7">Create a stylesheet for slides</h2>
- <div id="text-7">
- <ul>
- <li>
- Stylesheets for slides are different.
- </li>
- </ul>
- </div>
- </div>
- <div id="outline-container-8" class="outline-2">
- <h2 id="sec-8">Create a stylesheet for slides</h2>
- <div id="text-8">
- <ul>
- <li>
- Stylesheets for slides are different.
- </li>
- <li>
- The body uses the whole width.
- </li>
- </ul>
- </div>
- </div>
- <div id="outline-container-9" class="outline-2">
- <h2 id="sec-9">Create a stylesheet for slides</h2>
- <div id="text-9">
- <ul>
- <li>
- Stylesheets for slides are different.
- </li>
- <li>
- The body uses the whole width.
- </li>
- <li>
- Use the same style for all headlines.
- </li>
- </ul>
- </div>
- </div>
- <div id="outline-container-10" class="outline-2">
- <h2 id="sec-10">Create a stylesheet for slides</h2>
- <div id="text-10">
- <ul>
- <li>
- Stylesheets for slides are different.
- </li>
- <li>
- The body uses the whole width.
- </li>
- <li>
- Use the same style for all headlines.
- </li>
- <li>
- The postamble will be hidden automatically.
- </li>
- </ul>
- </div>
- </div>
- <div id="outline-container-11" class="outline-2">
- <h2 id="sec-11">Create a stylesheet for slides</h2>
- <div id="text-11">
- <ul>
- <li>
- Stylesheets for slides are different.
- </li>
- <li>
- The body uses the whole width.
- </li>
- <li>
- Use the same style for all headlines.
- </li>
- <li>
- The postamble will be hidden automatically.
- </li>
- <li>
- Position org-info.js's window.
- </li>
- </ul>
- </div>
- <div id="outline-container-11.1" class="outline-3">
- <h3 id="sec-11.1">CSS - body</h3>
- <div id="text-11.1">
- <p>
- Choose a big font!
- </p>
- <p>
- <pre class="example">
- body
- {
- width:100%;
- padding:0px 0px 0px 0px;
- margin:0px 0px 0px 0px;
- background-image:url(img/bg.gif);
- background-attachment:fixed;
- background-repeat:repeat-x;
- /* ... etc. */
- }
- </pre>
- </p>
- </div>
- </div>
- <div id="outline-container-11.2" class="outline-3">
- <h3 id="sec-11.2">CSS - headlines</h3>
- <div id="text-11.2">
- <p>
- Set all headlines to the same size:
- </p>
- <p>
- <pre class="example">
- h1,h2,h3,h4,h5,h6
- {
- font-size: 18pt;
- font-weight:bold;
- color:#104d8c;
- /* ... etc. */
- }
- </pre>
- </p>
- </div>
- </div>
- <div id="outline-container-11.3" class="outline-3">
- <h3 id="sec-11.3">CSS - org-info-js</h3>
- <div id="text-11.3">
- <p>
- Position the org-info.js window.
- </p>
- <p>
- <pre class="example">
- #org-info-js-window
- {
- position:absolute;
- top:140px;
- left:20%;
- }
- </pre>
- </p>
- </div>
- </div>
- </div>
- <div id="outline-container-12" class="outline-2">
- <h2 id="sec-12">TODOS</h2>
- <div id="text-12">
- <ul>
- <li id="sec-12.1"><span class="todo">TODO</span> Load stylsheets dynamically.<br/>
- </li>
- </ul>
- </div>
- </div>
- <div id="outline-container-13" class="outline-2">
- <h2 id="sec-13">TODOS</h2>
- <div id="text-13">
- <ul>
- <li id="sec-13.1"><span class="todo">TODO</span> Load stylsheets dynamically.<br/>
- </li>
- <li id="sec-13.2"><span class="todo">TODO</span> Drop lot's of mails with bugs and wishes.<br/>
- </li>
- </ul>
- </div>
- </div>
- <div id="outline-container-14" class="outline-2">
- <h2 id="sec-14">TODOS</h2>
- <div id="text-14">
- <ul>
- <li id="sec-14.1"><span class="todo">TODO</span> Load stylsheets dynamically.<br/>
- </li>
- <li id="sec-14.2"><span class="todo">TODO</span> Drop lot's of mails with bugs and wishes.<br/>
- <p>
- <hr/>
- </p>
- </li>
- <li id="sec-14.3"><span class="todo">TODO</span> Have Fun with Org-mode and all the tools around.<br/>
- </li>
- </ul>
- </div>
- </div>
- <div id="postamble"><p class="author"> Author: Sebastian Rose
- <a href="mailto:sebastian_rose@gmx.de"><sebastian_rose@gmx.de></a>
- </p>
- <p class="date"> Date: 2008-08-28 00:06:02 CEST</p>
- <p>HTML generated by org-mode 6.06b in emacs 23<p>
- </div></body>
- </html>
|