下载文档原格式
基于HTML5的PPT智能模板设计刘沧生，管希东，刘立辉，雷志飞，王保龙指导教师：李淑芝，兰红(江西理工大学信息工程学院，江西赣州 341000)摘要: 针对目前PPT模板都是利用微软公司的PowerPoint软件制作，制作方式单一。
于此同时播放通常利用鼠标实现上下页翻页控制，操作手段单一。
本文提出了一种利用HTML5技术制作PPT智能模板，并使用智能手机进行控制的方案。
本文通过利用最新的HTML5技术设计实现了PPT智能模板。
并且本文还阐述借助Socket无线通信技术,设计实现一种基于C/S模式的无线遥控系统，手机扮演客户端发送控制指令，存储PPT或PPT智能模板的电脑终端作为服务器端执行指令，实现幻灯片的播放。
实验表明，该方案能很好的满足制作PPT智能模板和无线遥控幻灯片播放的需求。
关键词：HTML5；PPT智能模板；Socket；Android手机；智能遥控Smart PPT template design based on HTML5Liu Cang Sheng, Guan Xi Dong, Liu Li hui, Lei zhi Fei, Wang Bao longTutor：LI Shu Zhi，Lan Hong(Information Engineering College, Jiangxi University of Technology, Ganzhou 341000) Abstract: PPT Templates are for the current use of Microsoft's PowerPoint software production, production single way. Meanwhile usually played using the mouse to achieve top and bottom flip control means of a single operation. This paper presents a smart use of HTML5 technology to produce PPT template, and the use of smart phone program control. In this paper, using the latest HTML5 technology Smart PPT template is designed and implemented. This paper also describes the aid Socket and wireless communication technology, design and implementation of a wireless remote control system based on C / S mode, the phone plays the client sends control commands, computer terminals or store PPT PPT smart templates as a server-side execution of instructions to achieve slide playback. Experiments show that the scheme can well meet the production Smart PPT slideshow templates and wireless remote control needs.1 引言PPT是一个由Microsoft公司开发的演示文稿程序，现在泛指幻灯片。
Html5最近在IT领域有些热，在Google、Adobe与Microsoft等大公司间掀起了一些风波。
关于HTML5之热，有可能只是噱头，但也有可能真是一次Web的技术革命。
它或许真的能让网页回归到桌面应用程序，而浏览器是平台。
对于将来的互联网，不知道大家有没有这种设想：网页好比现在桌面上的应用程序，浏览器就像windows等操作系统，那么将来的PC机制需要浏览器和存储设备等基础应用程序和设备，PC用户可以通过网页像服务器请求下载相应的应用程序甚至直接在服务器端运行再返回结果到客户端。
本人最近需要做一个presentation,关于HTML5的新特性和应用前景的。
本来打算用Powerpoint，但是为了展现HTML5实际的图形界面能力，我们组决定直接用HTML5写一个应用程序在浏览器中运行，实现PPT的效果，由于制作的时间只有三天，总共也有五六百行代码，所以做的比较粗超了，虽然不如Powerpoint专业和强大，但是作为自己团队的第一次尝试还是小有成就感的，也希望大家指正。
以下可以粗略的讲解一下。
这是程序的主界面。
演示时基本与PPT一致，通过按方向键控制内容的显示。
其中左边用于显示文本内容，右边Frame用于显示图片、游戏、超链接等辅助性内容，其中演示过程也包括一些特效，如逐渐显示、文字阴影、颜色渐变等等。
对于每个即将显示的内容，可以创建一个对象：这样为每个对象创建一个对象之后需要事先赋值和初始化，例如这是脚本，演示区域需要一个<canvas>标签创建一个画布：通过ID获得这个画布就比较简单不重复了。
以下介绍几个特效，第一个是阴影文字：可以看到HTML对颜色处理的能力与SVG有的一拼的，具体的代码如下,包括两种文字显示的类型其次关于矩形的动画，有几种动画：其中形状的出现都是动画，只是图片不好显示：最后是事件处理函数了，由于时间仓促，开始的时候没有设计好：最后，由于制作时间只有三天，整个程序比较粗糙，设计等方面还不完善，但是整体效果还挺好，老师和同学的评价还不错。
通过JavaScript创建一个动态的图像幻灯片在日常生活中，我们经常会看到各种各样的图像幻灯片，它们以其生动活泼的形式给我们带来了许多快乐和惊喜。
那么，你有没有想过如何通过JavaScript来创建一个动态的图像幻灯片呢？在本文中，我们将一起学习如何使用JavaScript来实现这一目标。
在开始之前，我们需要明确一下，JavaScript是一种脚本语言，主要用于在网页中添加交互性和动态性。
同时，为了实现一个动态的图像幻灯片，我们还需要掌握一些HTML和CSS的基础知识。
首先，我们需要创建一个基本的HTML结构来容纳我们的动态图像幻灯片。
我们可以使用`<div>`元素来作为容器，并给它一个唯一的id以方便后续的JavaScript操作。
代码如下：```html<div id="slideshow"></div>```接下来，我们需要在CSS中定义一些样式以使我们的幻灯片呈现出漂亮的外观。
我们可以设置容器的宽度和高度，并为幻灯片添加一些过渡效果以增加动态感。
代码如下：```css#slideshow {width: 600px;height: 400px;overflow: hidden;position: relative;}#slideshow img {width: 100%;height: auto;position: absolute;top: 0;left: 0;opacity: 0;transition: opacity 1s ease-in-out;}#slideshow img.active {opacity: 1;}```在上面的代码中，我们使用了`#slideshow`和`#slideshow img`来选择对应的元素，并为它们分别添加了一些样式。
其中，`position: absolute;`和`top: 0; left: 0;`可以使幻灯片的图片覆盖在容器上，并且`opacity`属性可以实现透明度的变化。
<!DOCTYPE html><!--Google HTML5 slide templateAuthors: Luke Mahé (code)Marcin Wichary (code and design)Dominic Mazzoni (browser compatibility)Charles Chen (ChromeV ox support)URL: /p/html5slides/--><html><head><title>Presentation</title><meta charset='utf-8'><scriptsrc='/svn/trunk/slides.js'></script> </head><style>/* Your individual styles here, or just use inline styles if that’s what you want. */</style><body style='display: none'><section class='slides layout-regular template-default'><!-- Your slides (<article>s) go here. Delete or comment out the slides below. --><article class='biglogo'></article><article><h1>Title Goes Here Up<br>To Two Lines<p>Sergey Brin<br>May 10, 2011</p></article><article><p>This is a slide with just text. This is a slide with just text.This is a slide with just text. This is a slide with just text.This is a slide with just text. This is a slide with just text.</p><p>There is more text just underneath.</p></article><article><h3>Simple slide with header and text</h3><p>This is a slide with just text. This is a slide with just text.This is a slide with just text. This is a slide with just text.This is a slide with just text. This is a slide with just text.</p><p>There is more text just underneath with a <code>code sample: 5px</code>. </p></article><article class='smaller'><h3>Simple slide with header and text (small font)</h3><p>This is a slide with just text. This is a slide with just text.This is a slide with just text. This is a slide with just text.This is a slide with just text. This is a slide with just text.</p><p>There is more text just underneath with a <code>code sample: 5px</code>.</article><article><h3>Slide with bullet points and a longer title, just because wecan make it longer</h3><ul><li>Use this template to create your presentation</li><li>Use the provided color palette, box and arrow graphics, andchart styles</li><li>Instructions are provided to assist you in using thispresentation template effectively</li><li>At all times strive to maintain Google's corporate look and feel </li></ul></article><article><h3>Slide with bullet points that builds</h3><ul class="build"><li>This is an example of a list</li><li>The list items fade in</li><li>Last one!</li></ul><div class="build"><p>Any element with child nodes can build.</p><p>It doesn't have to be a list.</p></div></article><article class='smaller'><h3>Slide with bullet points (small font)</h3><ul><li>Use this template to create your presentation<li>Use the provided color palette, box and arrow graphics, andchart styles<li>Instructions are provided to assist you in using thispresentation template effectively<li>At all times strive to maintain Google's corporate look and feel </ul></article><article><h3>Slide with a table</h3><table><tr><th>Name<th>Occupation<tr><td>Luke Mahé<td>V.P. of Keepin’ It Real<tr><td>Marcin Wichary<td>The Michael Bay of Doodles</table></article><article class='smaller'><h3>Slide with a table (smaller text)</h3><table><tr><th>Name<th>Occupation<tr><td>Luke Mahé<td>V.P. of Keepin’ It Real<tr><td>Marcin Wichary<td>The Michael Bay of Doodles</table></article><article><h3>Styles</h3><ul><li><span class='red'>class="red"</span><li><span class='blue'>class="blue"</span><li><span class='green'>class="green"</span><li><span class='yellow'>class="yellow"</span> <li><span class='black'>class="black"</span><li><span class='white'>class="white"</span><li><b>bold</b> and <i>italic</i></ul></article><article><h2>Segue slide</h2></article><article><h3>Slide with an image</h3><p><img style='height: 500px' src='images/example-graph.png'></p><div class='source'>Source: Sergey Brin</div></article><article><h3>Slide with an image (centered)</h3><p><img class='centered' style='height: 500px' src='images/example-graph.png'> </p><div class='source'>Source: Larry Page</div></article><article class='fill'><h3>Image filling the slide (with optional header)</h3><p><img src='images/example-cat.jpg'></p><div class='source white'>Source: Eric Schmidt</div></article><article><h3>This slide has some code</h3><section><pre><script type='text/javascript'>// Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) {for (var i = 42; --i >= 0;) {alert('Hello ' + String(world));}}</script><style>p { color: pink }b { color: blue }u { color: 'umber' }</style></pre></section></article><article class='smaller'><h3>This slide has some code (small font)</h3><section><pre><script type='text/javascript'>// Say hello world until the user starts questioning // the meaningfulness of their existence. function helloWorld(world) {for (var i = 42; --i >= 0;) {alert('Hello ' + String(world));}}</script><style>p { color: pink }b { color: blue }u { color: 'umber' }</style></pre></section></article><article><q>The best way to predict the future is to invent it.</q><div class='author'>Alan Kay</div></article><article class='smaller'><q>A distributed system is one in which the failure of a computeryou didn’t even know existed can render your own computer unusable.</q><div class='author'>Leslie Lamport</div></article><article class='nobackground'><h3>A slide with an embed + title</h3><iframe src='/doodle4google/history.html'></iframe> </article><article class='nobackground'><iframe src='/doodle4google/history.html'></iframe> </article><article class='fill'><h3>Full-slide embed with (optional) slide title on top</h3><iframe src='/doodle4google/history.html'></iframe> </article><article><h3>Thank you!</h3><ul><li><a href=''></a></ul></article></section></body></html>。
Html5最近在IT领域有些热，在Google、Adobe与Microsoft等大公司间掀起了一些风波。
关于HTML5之热，有可能只是噱头，但也有可能真是一次Web的技术革命。
它或许真的能让网页回归到桌面应用程序，而浏览器是平台。
对于将来的互联网，不知道大家有没有这种设想：网页好比现在桌面上的应用程序，浏览器就像windows等操作系统，那么将来的PC机制需要浏览器和存储设备等基础应用程序和设备，PC用户可以通过网页像服务器请求下载相应的应用程序甚至直接在服务器端运行再返回结果到客户端。
本人最近需要做一个presentation,关于HTML5的新特性和应用前景的。
本来打算用Powerpoint，但是为了展现HTML5实际的图形界面能力，我们组决定直接用HTML5写一个应用程序在浏览器中运行，实现PPT的效果，由于制作的时间只有三天，总共也有五六百行代码，所以做的比较粗超了，虽然不如Powerpoint专业和强大，但是作为自己团队的第一次尝试还是小有成就感的，也希望大家指正。
以下可以粗略的讲解一下。
这是程序的主界面。
演示时基本与PPT一致，通过按方向键控制内容的显示。
其中左边用于显示文本内容，右边Frame用于显示图片、游戏、超链接等辅助性内容，其中演示过程也包括一些特效，如逐渐显示、文字阴影、颜色渐变等等。
对于每个即将显示的内容，可以创建一个对象：
文字：
最后是事件处理函数了，由于时间仓促，开始的时候没有设计好：
最后，由于制作时间只有三天，整个程序比较粗糙，设计等方面还不完善，但是整体效果还挺好，老师和同学的评价还不错。
有兴趣的同学可以与我讨论一下。
