本发明涉及网络技术领域，特别涉及一种基于web的在线课件制作任意个对象分屏布局编辑方法。
背景技术：
现有的在线课件制作软件大都采用单屏富文本编辑器，虽然能插入如文字、图形、视频、音频等元素，但这些元素的属性简单，不能作进一步的复杂编辑，而且其位置是固定的，不能自适应浏览器窗口大小变化。还有一种较好的三分屏制作技术，也只是把视频屏，目录屏以及内容显示屏三屏按照固定格式联动起来而已，不能作任意变换，也不能编辑考试等其他多媒体内容。
技术实现要素：
本发明提出基于web的在线课件制作编辑对象分屏布局的方法，解决了现有在线课件制作无法实现课件的任意分屏布局编辑的问题。
本发明的技术方案是这样实现的：
基于web的在线课件制作编辑对象分屏布局的方法，前台使用jsp、html、css和javascript的dom模型，后台使用servlet、j2ee和mysql数据库，包括以下步骤：
步骤(a)，通过html表格模板将页面分成多个单元格；
步骤(b)，待布局完成后，提交含有整个布局页面的div标签的innerhtml文本给后台，后台servlet接收后进行处理，采用javaregexp分别识别出各个方块，并提起出各个方块类型和显示属性再存入相应的预先设计好的数据库表中；
步骤(c)，在编辑模块中对各个方块内容采用iframe标签实行页面分开编辑；
步骤(d)，在显示模块中将各个方块根据其所设置的参数生成内容按其布局和顺序显示出来。
可选地，在页面布局中采用六种方块：空、文本、考试、图形、视频、音频。
可选地，空方块表示内容为空，无需编辑；
文本方块是富文本编辑器，可以动态插入和编辑各种html标签及其属性；
图形方块可以上传图形文件，设置图形属性，编辑图形事件、缩放、浮文本等功能；
视频方块可以上传多个视频文件和预览图片，编辑视频大小等属性、软字幕以及时控文本；
音频方块可以上传多个音频文件，编辑音频显示等属性、脚本以及时控文本；
通过编辑考试方块可以实现各种题型的测试。
可选地，所述空、文本、考试、图形、视频、音频方块分别用htmldiv标签表示。
可选地，所述htmldiv标签分别为：
空：<divid＝'emp_div'class＝"drag">empty<！--type＝'empty'id＝″title＝″--></div>；
文本：<divid＝'txt_div'class＝"drag">textarea<！--type＝'textarea'id＝″title＝″--></div>；
考试：<divid＝'tst_div'class＝"drag">test<！--type＝'test'id＝″title＝″--></div>；
图形：<divid＝'img_div'class＝"drag">picture<！--type＝'picture'id＝″title＝″width＝'350'height＝'300'border＝'0'alt＝″--></div>；
视频：<divid＝'vid_div'class＝"drag">video<！--type＝'video'id＝″title＝″width＝'350'height＝'300'border＝'0'alt＝″--></div>；
音频：<divid＝'aud_div'class＝"drag">audio<！--type＝'audio'id＝″title＝″width＝'350'height＝'300'border＝'0'alt＝″--></div>。
本发明的有益效果是：
(1)能实现课件的任意分屏布局编辑功能；
(2)表格模板可以任意调换，也可动态添加或删除表格单元，编辑表格单元属性；
(3)在编辑模块中对各个方块内容实行分开编辑，从而实现许多复杂功能。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明基于web的在线课件制作编辑对象分屏布局的方法的流程图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
现有的在线课件制作软件大都采用单屏富文本编辑器，虽然能插入如文字、图形、视频、音频等元素，但这些元素的属性简单，不能作进一步的复杂编辑。
本发明采用javaweb技术开发，前台使用jsp、html、css和javascript的dom模型，后台使用servlet、j2ee和mysql数据库。本发明在页面布局中采用六种方块：空、文本、考试、图形、视频、音频，分别用htmldiv标签表示，具体如下：
空：<divid＝'emp_div'class＝"drag">empty<！--type＝'empty'id＝″title＝″--></div>；
文本：<divid＝'txt_div'class＝"drag">textarea<！--type＝'textarea'id＝″title＝″--></div>；
考试：<divid＝'tst_div'class＝"drag">test<！--type＝'test'id＝″title＝″--></div>；
图形：<divid＝'img_div'class＝"drag">picture<！--type＝'picture'id＝″title＝″width＝'350'height＝'300'border＝'0'alt＝″--></div>；
视频：<divid＝'vid_div'class＝"drag">video<！--type＝'video'id＝″title＝″width＝'350'height＝'300'border＝'0'alt＝″--></div>；
音频：<divid＝'aud_div'class＝"drag">audio<！--type＝'audio'id＝″title＝″width＝'350'height＝'300'border＝'0'alt＝″--></div>。
下面结合附图对本发明的基于web的在线课件制作任意个对象分屏布局编辑方法进行详细说明。
如图1所示，本发明的基于web的在线课件制作任意个对象分屏布局编辑方法，包括以下步骤：
步骤(a)，通过html表格模板将页面分成多个单元格；
步骤(b)，待布局完成后，提交含有整个布局页面的div标签的innerhtml文本给后台，后台servlet接收后进行处理，采用javaregexp(正则表达式)分别识别出各个方块，并提起出各个方块类型和显示属性再存入相应的预先设计好的数据库表中；
步骤(c)，在编辑模块中对各个方块内容采用iframe标签实行页面分开编辑；
步骤(d)，在显示模块中将各个方块根据其所设置的参数生成内容按其布局和顺序显示出来，轻松实现各种所要的显示结果。
上述步骤(a)中，选用一种适合用户显示内容的html表格模板将页面分成几个单元格，在此表格上加上contextmenu事件使之单击鼠标右键就弹出一列菜单，点击这些菜单通过调用htmldom的相应表格操作方法就可以动态插入/删除一行，添加、减少或合并单元格，设置单元格的属性，例如：宽、高、颜色、对齐方式等，在每个单元格上任意插入一个或多个上述六种方块或其组合，并且设置方块的属性，其属性存于上述方块的标签中。另外还可以任意移动和调换方块。当调换表格模板时，页面上已有的方块及内容保持不变。所有这些操作均通过javascript代码实现。
上述步骤(c)中，在编辑模块中对各个方块内容采用iframe标签实行页面分开编辑，其优点是易于对各个方块设置各种参数、添加内容并存储，从而实现诸多复杂的功能要求。空方块表示内容为空，无需编辑；文本方块是富文本编辑器，可以动态插入和编辑各种html标签及其属性；图形方块可以上传图形文件，设置图形属性，编辑图形事件、缩放、浮文本等功能；视频方块可以上传多个视频文件和预览图片，编辑视频大小等属性、软字幕以及时控文本；同样音频方块可以上传多个音频文件，编辑音频显示等属性、脚本以及时控文本；通过编辑考试方块可以实现各种题型的测试。
本发明的基于web的在线课件制作任意个对象分屏布局编辑方法，能实现课件的任意分屏布局编辑功能；表格模板可以任意调换，也可动态添加或删除表格单元，编辑表格单元属性；在编辑模块中对各个方块内容实行分开编辑，从而实现许多复杂功能。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。