使用HTML5创建引人入胜的演示文稿

最新推荐文章于 2024-05-14 20:08:50 发布

cukeoumuqian0413

最新推荐文章于 2024-05-14 20:08:50 发布

阅读量196

点赞数

文章标签： html python java vue js ViewUI

原文链接：https://www.script-tutorials.com/creating-an-attractive-presentation-with-html5/

版权

Attractive Presentation with HTML5. Today we will prepare something new – presentation. And we will using all interesting what can give us HTML5. Presentation itself will contain 5 easy slides. We will able to use navigation arrow keys for sliding, spacebar, display notes, sidebar with some custom content. Here are new html5 tags which we going to use: nav, menu, section, aside, header and hgroup. Sure, that now is time to check our demo.

HTML5的引人入胜的演示。今天，我们将准备一些新内容–演示文稿。我们将使用所有有趣的东西给我们HTML5。演示文稿本身将包含5张简单的幻灯片。我们将能够使用导航箭头键进行滑动，空格键，显示注释，带有一些自定义内容的侧边栏。这是我们将要使用的新的html5标记：导航，菜单，部分，旁边，标题和hgroup。当然，现在该检查我们的演示了。

Here are links to demo and downloadable package:

以下是演示和可下载软件包的链接：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

So, download the example files and lets start coding !

因此，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

index.html (index.html)

All layout consist of 4 main sections: header, floating help navigation, main slides area and sidebar. Here are code for header area:

所有布局均由4个主要部分组成：标题，浮动帮助导航，主幻灯片区域和侧边栏。以下是标头区域的代码：


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Presentation demo | Script tutorials</title>
    <!-- Linking styles -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Presentation demo | Script tutorials</title>
    <!-- Linking styles -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>

Next – floating help navigation (in document body)

下一步–浮动帮助导航(在文档正文中)


    <nav id="helpers"><!-- Defining the floating helpers of the page -->
      <button title="Previous" id="nav-prev" class="nav-prev">&lt;-</button>
      <button title="Jump to slide" id="slide-no">3</button>
      <button title="Next" id="nav-next" class="nav-next">-&gt;</button>
      <menu>
        <button type="checkbox" data-command="notes" title="View Notes">Notes</button>
        <button type="checkbox" data-command="help" title="View Help">Help</button>
        <button type="checkbox" data-command="back" title="Back to tutorial">Back</button>
      </menu>
    </nav>


    <nav id="helpers"><!-- Defining the floating helpers of the page -->
      <button title="Previous" id="nav-prev" class="nav-prev">&lt;-</button>
      <button title="Jump to slide" id="slide-no">3</button>
      <button title="Next" id="nav-next" class="nav-next">-&gt;</button>
      <menu>
        <button type="checkbox" data-command="notes" title="View Notes">Notes</button>
        <button type="checkbox" data-command="help" title="View Help">Help</button>
        <button type="checkbox" data-command="back" title="Back to tutorial">Back</button>
      </menu>
    </nav>

Here, we predefined several action buttons for future. Now, here are code for presentation slides:

在这里，我们为将来预定义了几个操作按钮。现在，这是演示幻灯片的代码：


    <div class="presentation"><!-- Defining the main presentation -->
      <div id="presentation-counter">Loading...</div>
      <div class="slides"><!-- Defining slides -->
        <div class="slide" id="slide1"><!-- Defining single slide -->
          <section class="middle">
            <p>HTML5 Presentation demo</p>
            <p>Press <span id="left-init-key" class="key">&rarr;</span> key to continue.</p>
          </section>
          <aside class="note"><!-- hidden notes of slide -->
            <section>
              Notes for first slide
            </section>
          </aside>
        </div>
        <div class="slide" id="slide2">
          <header>Slides controls</header>
          <section>
            <ul>
              <li><span class="key">&larr;</span> and <span class="key">&rarr;</span> to move forward/back.</li>
              <li><span class="key">spacebar</span> to move forward.</li>
              <li><span class="key">N</span> to toggle hidden notes.</li>
              <li><span class="key">H</span> to toggle help.</li>
            </ul>
          </section>
          <aside class="note">
            <section>
              Notes for second slide
            </section>
          </aside>
        </div>
        <div class="slide" id="slide3">
          <section class="middle">
            <hgroup>
              <h1>
                Slide3
              </h1>
              <h2>
                Slide Title #3
              </h2>
            </hgroup>
            <p>text of slide, text of slide, text of slide, text of slide</p>
          </section>
        </div>
        <div class="slide" id="slide4">
          ... code for slide 4 ..
        </div>
        <div class="slide" id="slide5">
          ... code for slide 5 ..
        </div>
      </div>


    <div class="presentation"><!-- Defining the main presentation -->
      <div id="presentation-counter">Loading...</div>
      <div class="slides"><!-- Defining slides -->
        <div class="slide" id="slide1"><!-- Defining single slide -->
          <section class="middle">
            <p>HTML5 Presentation demo</p>
            <p>Press <span id="left-init-key" class="key">&rarr;</span> key to continue.</p>
          </section>
          <aside class="note"><!-- hidden notes of slide -->
            <section>
              Notes for first slide
            </section>
          </aside>
        </div>
        <div class="slide" id="slide2">
          <header>Slides controls</header>
          <section>
            <ul>
              <li><span class="key">&larr;</span> and <span class="key">&rarr;</span> to move forward/back.</li>
              <li><span class="key">spacebar</span> to move forward.</li>
              <li><span class="key">N</span> to toggle hidden notes.</li>
              <li><span class="key">H</span> to toggle help.</li>
            </ul>
          </section>
          <aside class="note">
            <section>
              Notes for second slide
            </section>
          </aside>
        </div>
        <div class="slide" id="slide3">
          <section class="middle">
            <hgroup>
              <h1>
                Slide3
              </h1>
              <h2>
                Slide Title #3
              </h2>
            </hgroup>
            <p>text of slide, text of slide, text of slide, text of slide</p>
          </section>
        </div>
        <div class="slide" id="slide4">
          ... code for slide 4 ..
        </div>
        <div class="slide" id="slide5">
          ... code for slide 5 ..
        </div>
      </div>

You can add more and more slides in end by same rules. And now – code for sidebar:

您可以按照相同的规则在末尾添加越来越多的幻灯片。现在–侧边栏代码：


      <div id="hidden-note" class="invisible" style="display: none;">
      </div> <!-- hidden note -->
      <aside id="help" class="sidebar invisible" style="display: hidden;"><!-- Defining sidebar help -->
        <table>
          <caption>Help</caption>
            <tr>
              <th>Move forward/back</th>
              <td>&larr;&nbsp;&rarr;</td>
            </tr>
            <tr>
              <th>Move forward</th>
              <td>spacebar</td>
            </tr>
            <tr>
              <th>Hidden Notes</th>
              <td>N</td>
            </tr>
            <tr>
              <th>Help</th>
              <td>H</td>
            </tr>
        </table>
      </aside>


      <div id="hidden-note" class="invisible" style="display: none;">
      </div> <!-- hidden note -->
      <aside id="help" class="sidebar invisible" style="display: hidden;"><!-- Defining sidebar help -->
        <table>
          <caption>Help</caption>
            <tr>
              <th>Move forward/back</th>
              <td>&larr;&nbsp;&rarr;</td>
            </tr>
            <tr>
              <th>Move forward</th>
              <td>spacebar</td>
            </tr>
            <tr>
              <th>Hidden Notes</th>
              <td>N</td>
            </tr>
            <tr>
              <th>Help</th>
              <td>H</td>
            </tr>
        </table>
      </aside>

Thats all

就这样

步骤2. CSS (Step 2. CSS)

css / style.css (css/style.css)

Resulting file of our demo is pretty big. So I decided not publish all this code here. But you always can download this in our package.

我们的演示结果文件很大。因此，我决定不在此处发布所有这些代码。但是您始终可以在我们的程序包中下载它。

步骤3. JS (Step 3. JS)

js / script.js (js/script.js)

This file big enough too (330 lines). Hope that this is ok if it will available in package too.

该文件也足够大(330行)。希望也可以在软件包中使用。

现场演示

结论 (Conclusion)

I hope that today you were impressed and you like presentation. As you can see – all pretty customizable. I wish you luck in creating own presentations!

我希望今天您印象深刻并且喜欢介绍。如您所见-所有这些都非常可定制。祝您创建自己的演示文稿好运！

翻译自: https://www.script-tutorials.com/creating-an-attractive-presentation-with-html5/

cukeoumuqian0413

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用HTML5创建引人入胜的演示文稿

Attractive Presentation with HTML5. Today we will prepare something new – presentation. And we will using all interesting what can give us HTML5. Presentation itself will contain 5 easy slides. We wil...
复制链接

扫一扫