基于Html5智能模板设计小论文

基于Html5智能模板设计小论文
基于Html5智能模板设计小论文

基于HTML5的PPT智能模板设计

刘沧生,管希东,刘立辉,雷志飞,王保龙

指导教师:李淑芝,兰红

(江西理工大学 信息工程学院,江西省 赣州市 341000)摘要: 随着宽带网络的发展和Web技术的不断升级,构建网页的主要语言HTML也在不断的完善和丰富,HTML5规范成为下一代Web应用开发的新标准。文章阐述了HTML5拥有的新增元素和新增API接口所带来的强大开发能力,并在此基础上设计实现了PPT智能模板系统。实验表明,该系统可以通过脚本语言来便捷的演示文稿,为制作幻灯片引入了一种全新的方式。

关键词:HTML5;PPT智能模板;Web应用开发

Smart PPT template design based on HTML5

Liu Cang Sheng,Guan Xi Dong

Tutor:LI Shu Zhi,Lan Hong

(Information Engineering College, Jiangxi University of Technology,

Ganzhou 341000)

Abstract: In recent years, with the development of broadband networks and the escalating web technologies to build the main language HTML pages are constantly improving and enriching the version escalating. In support of the growing needs of users and major browser vendors under, HTML5 specification as a new standard for the next generation of web application development. As the new web standard HTML5 to bring a new world of change, the new elements in its possession and the new API interface for developers to bring a more powerful development momentum. On this basis, the intelligent design of the PPT template can be used to presentation slides for the production brings a whole new way.

Key words: HTML5; PPT; template design; web application

一、引言

HTML5是超文本标记语言(Hyper Text Mark-up

Language,HTML )下一个主要的修订版本,现在仍处于发展阶段。其目标是取代1999年制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到当代的网络需求。它希望能够减少浏览器对于需要插件的富因特网应用程序(Rich Internet Applications,RIA),如Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。HTML5有广义和狭义之分,狭义的HTML5是指HTML语言的新标准,而广义的HTML5是指包括层叠样式表CSS、脚本语言JavaScript接口和HTML语言在内的功能集。

本文利用HTML5拥有的诸多新技术设计并实现了类似PPT演示文稿的播放功能,使用户有新的方式播放和切换幻灯片。

二、系统总体结构设计

HTML5智能模板的系统功能实现是利用了目前最新的HTML5技术,通过对PowerPoint办公软件的模拟,实现了幻灯片的正常切换功能和演示功能。同时,利用JavaScript全屏API接口能够实现全屏功能。

系统是采用Web应用的形式、以HTML5标准为基础、辅以jQuery工具包在浏览器平台上运行的Web应用,通过脚本语言JavaScript实现幻灯片的切换和演示操作。该系统结合云存储技术,具有可以在任一终端打开并演示系统的功能。本文提供了一种可以使用键盘快捷键和鼠标控制的方式操作幻灯片的演示,其中快捷键的控制方式如表1所示。

表1 快捷键对应幻灯片的切换

按键动作按键动作

→下一页Home开始页

←上一页End末页

↓下个动画Ctrl+G跳转

↑上个动画F5全屏

HTML5是一种适应性很广的技术,拥有显著的优越性,那就是可以跨平台操作使用。它不需要考虑操作系统的兼容性,只需考虑浏览器的兼容性,可移植性强,能够移植到多个平台上。HTML5拥有的基本运行架构如图1所示。

图1 HTML5基本运行架构

三、系统的设计思想

使用HTML5新特性演示幻灯片的设计原则是尽量使结构清晰、简洁,并尽量沿用PowerPoint的结构。具体设计思路如下:

(一)HTML5结构设计

1.使用

元素作为一个页面区块,当前显示的页面即一个
区块的属性为不透明,其他
区块为透明,这样只能看到
区块(即当前页面),其他页面处于隐藏状态。当切换页面时,使用JavaScript更改当前
区块的不透明属性和即将显示的
区块的不透明属性,这样即可保持每次都只有一个页面显示。

2.每一个

区块都确定一个对应的id值,id的命名规律为:

#slideX,其中X是指第几个页面。该id值对应于location.hash值,当切换页面时,浏览器的地址栏会发生改变,即location.hash值发生改变。

3.每个页面都可以由标题(h1)、次标题(h2)、正文段落、图片等固定标签组合而成,和PowerPoint中的元素对应。

4.提供统一的设计模板类型,和PowerPoint中的模板相对应。(二)实现JS接口和完成CSS样式

1.将基本样式初始化。

2.通过jQuery.reszie()函数更改当前显示页面的大小,确定每个div元素的id值及为当前页面加上伪类:target属性,并确定幻灯片的页面总数。

3.通过更改:target伪类属性来实现决定显示哪一张幻灯片。

4.使用JavaScript实现翻页功能函数。

5.对相应的鼠标事件和键盘事件进行事件监听。

(三)特殊元素处理

幻灯片页面内部的动画可通过特殊的class进行生成,设置成未显示和显示后两者样式,这样用户可以通过切换动画观察到页内的动画效果。

(四)兼容方面的考虑

因为HTML5是不断发展的标准,而现在的浏览器包括

Chrome、Opera、IE、Firefox等往往支持部分HTML5标准,IE低版本的浏览器甚至不支持HTML5,因此需要考虑CSS Hack技术对浏览器实现兼容,尽量使多版本浏览器显示效果一致。

(五)扩展设想

1.幻灯片之间的切换动画,可以考虑用独立模块进行实现。

2.能够在当前页面编辑修改幻灯片,无需通过后台代码进行修改。

3.能够制作幻灯片生成程序,生成HTML5格式的幻灯片页面。

4.能够将PPT文件转换为HTML5格式,能在浏览器下浏览。

5.能够将网页在正常网页和幻灯片模式下切换。

四、系统的技术实现

本文提出了一种利用HTML5新特性来实现幻灯片播放的方式,通过使用快捷键的方式操作幻灯片,实现对幻灯片的正常切换。

(一)HTML5的功能新特性和新元素

1.HTML5的新元素

HTML5一方面删除了一部分落后的标签,另一方面添加了新元素,包括