湖南龙网

  1. 首页 > 生活百科 > >

基于HTML5的PPT智能模板设计

小知识生活百科

针对传统PPT在制作和播放中依赖于Office软件、不能很好的解决跨操作系统和终端设备、需要专门配置翻页激光笔无线遥控播放等问题，提出了一个基于HTML5新特性和WIFI无线通信技术相结合的手机无线遥控PPT智能模板的解决方案 。通过实现HTML5中的JS接口和CSS样式设计，构建了基于浏览器模式的PPT通用智能模板;利用模板设计的PPT存放于云端，PPT播放采用Socket无线通信技术，通过WIFI访问云端，基于C/S模式设置服务器和客户端的通讯地址，其中手机扮演客户端发送控制指令，存储PPT或PPT智能模板的电脑终端作为服务器端执行指令，实现手机无线遥控幻灯片的播放 。
1、引言(Introduction)
目前广泛使用的PPT模板都是利用微软公司的Office中包含的PowerPoint软件制作的，但当前这种教学PPT的使用还存在以下问题：(1)老师只能在讲台前面手动或者专门配置投影仪无线遥控翻页激光笔来实现翻页，或影响教学效果，或增加学校开支 。(2)老师需要携带存储了制作好PPT的笔记本电脑，没有很好的解决跨终端设备播放的问题 。(3)可能由于PPT播放环境与制作环境不同从而无法很好的展现想要的播放效果 。
造成以上问题的原因主要有以下两点：(1)没有很好的解决“低成本”无线遥控PPT的播放;(2)局限于微软的PPT，从而限制于操作系统和终端设备等 。然而Web技术的发展，为幻灯片的制作方式提供了另外的可能，使用HTML5技术能够满足制作PPT模板的要求 。HTML5因其跨平台、支持多设备、及时更新等优点，可以很好地解决上述问题;同时由于目前智能手机的普及，也为很好的实现“低成本”无线遥控提供了可能 。经研究发现可以设计一个基于HTML5的智能模板和采用智能手机来实现无线遥控的系统 。
2、系统总体设计(The overall design of the system)
2.1、总体设计思想
HTML5具有丰富的API，支持2D或3D绘图，能够播放音频和视频，能够产生超强的视觉效果，智能手机的无线上网功能不仅可以应用于通讯和娱乐，还可以应用于生活实践中 。因而系统设计的基本思想是将两种新技术相结合，解决传统依赖于微软操作系统的PPT制作和应用问题 。系统设计的总体运行架构 。
图1 系统基本运行架构
图1展示了基于HTML5的PPT智能模板设计的基本思想：首先利用HTML5新特性在电脑端设计PPT的通用智能模板;然后利用PPT智能模板设计制作符合个人需求的幻灯片，完成之后将其上传到云端;当需要使用幻灯片时在电脑端使用浏览器打开;最后将智能手机与电脑进行互联，这样即可使用智能手机控制幻灯片的播放 。
2.2、HTML5智能模板设计
2.2.1、幻灯片智能模板结构设计
使用HTML5新特性制作幻灯片模板的设计原则是：尽量使结构清晰、简洁，并尽可能的参照传统幻灯片的结构 。HTML5智能模板的结构设计为：
(1)PPT到html的转换：因为使用HTML5制作的PPT智能模板为html格式，意味着一个网页对应于一个完整的幻灯片，则每一页幻灯片的页面对应一个<div>元素 。考虑到html格式的幻灯片页面是同时显示的，则必须将要显示的幻灯片区块设置为透明，其余的幻灯片区块显示设置为不透明，这样即可保持每次都只有一个页面显示 。
(2)页面标签设计：每一页幻灯片区块都要确定一个对应的id值，id的命名规律为：#slideX,其中X是指第几个页面 。该id值对应于幻灯片页面的标签值，当切换页面时，浏览器的地址栏会发生改变，即幻灯片页面的标签值发生改变 。
(3)页面内容设计：幻灯片的每页内容必须和传统的幻灯片中的元素进行对应，常见的固定元素有标题(h1)、次标题(h2)、正文段落、图片等 。另外可以考虑设计一些常用的页面内容， 。

推荐阅读


上一篇：怎么在PPT中设计一个渐变色的圆环表达？

下一篇：PowerPoint2010新增功能分析