CN104298721B - 一种基于Web的在线课件制作任意个对象分屏布局编辑方法 - Google Patents

一种基于Web的在线课件制作任意个对象分屏布局编辑方法 Download PDF

Info

Publication number
CN104298721B
CN104298721B CN201410495643.8A CN201410495643A CN104298721B CN 104298721 B CN104298721 B CN 104298721B CN 201410495643 A CN201410495643 A CN 201410495643A CN 104298721 B CN104298721 B CN 104298721B
Authority
CN
China
Prior art keywords
div
square
arbitrarily
video
audio
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Expired - Fee Related
Application number
CN201410495643.8A
Other languages
English (en)
Other versions
CN104298721A (zh
Inventor
汤习俭
汤浩晨
汤浩然
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tang Xijian
Original Assignee
Individual
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Individual filed Critical Individual
Priority to CN201410495643.8A priority Critical patent/CN104298721B/zh
Publication of CN104298721A publication Critical patent/CN104298721A/zh
Application granted granted Critical
Publication of CN104298721B publication Critical patent/CN104298721B/zh
Expired - Fee Related legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提出了一种基于Web的在线课件制作任意个对象分屏布局编辑方法，通过html表格模板将页面分成多个单元格；提交整个布局页面的html文本给后台，后台Servlet接收后进行处理，采用Java RegExp提起出各个方块参数再存入数据库中；在编辑模块中对各个方块内容采用iframe标签实行页面分开编辑；在显示模块中将各个方块根据其所设置的参数生成内容按其布局和顺序显示出来。本发明能实现课件的任意分屏布局编辑功能，表格模板可以任意调换，也可动态添加或删除表格单元，编辑表格单元属性；在编辑模块中对各个方块内容实行分开编辑，从而实现许多复杂功能。

Description

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

Claims (5)

1.一种基于Web的在线课件制作任意个对象分屏布局编辑方法，其特征在于，前台使用JSP、html、CSS和JavaScript的DOM模型，后台使用Servlet、J2EE和MySQL数据库，包括以下步骤：
步骤(a)，通过html表格模板将页面分成多个单元格；选用一种适合用户显示内容的html表格模板将页面分成几个单元格，在此表格上加上contextmenu事件使之单击鼠标右键就弹出一列菜单，点击这些菜单通过调用html DOM的相应表格操作方法动态***/删除一行，添加、减少或合并单元格，设置单元格的属性，在每个单元格上任意***一个或多个空、文本、考试、图形、视频、音频方块或其组合，并且设置方块的属性，其属性存于上述方块的标签中；当调换表格模板时，页面上已有的方块及内容保持不变，所有操作均通过Javascript代码实现；
步骤(b)，待布局完成后，提交含有整个布局页面的div标签的innerHTML文本给后台，后台Servlet接收后进行处理，采用Java RegExp分别识别出各个方块，并提起出各个方块类型和显示属性再存入相应的预先设计好的数据库表中；
步骤(c)，在编辑模块中对各个方块内容采用iframe标签实行页面分开编辑；
步骤(d)，在显示模块中将各个方块根据其所设置的参数生成内容按其布局和顺序显示出来。
2.如权利要求1所述的一种基于Web的在线课件制作任意个对象分屏布局编辑方法，其特征在于，在页面布局中采用六种方块：空、文本、考试、图形、视频、音频。
3.如权利要求2所述的一种基于Web的在线课件制作任意个对象分屏布局编辑方法，其特征在于，
空方块表示内容为空，无需编辑；
文本方块是富文本编辑器，可以动态***和编辑各种html标签及其属性；
图形方块可以上传图形文件，设置图形属性，编辑图形事件、缩放、浮文本等功能；
视频方块可以上传多个视频文件和预览图片，编辑视频大小等属性、软字幕以及时控文本；
音频方块可以上传多个音频文件，编辑音频显示等属性、脚本以及时控文本；
通过编辑考试方块可以实现各种题型的测试。
4.如权利要求2所述的一种基于Web的在线课件制作任意个对象分屏布局编辑方法，其特征在于，所述空、文本、考试、图形、视频、音频方块分别用html div标签表示。
5.如权利要求4所述的一种基于Web的在线课件制作任意个对象分屏布局编辑方法，其特征在于，所述html div标签分别为：
空：<div id＝'emp_div'class＝"drag">Empty<！--type＝'Empty'id＝”title＝”--></div>；
文本：<div id＝'txt_div'class＝"drag">Textarea<！--type＝'Textarea'id＝”title＝”--></div>；
考试：<div id＝'tst_div'class＝"drag">Test<！--type＝'Test'id＝”title＝”--></div>；
图形：<div id＝'img_div'class＝"drag">Picture<！--type＝'Picture'id＝”title＝”width＝'350'height＝'300'border＝'0'alt＝”--></div>；
视频：<div id＝'vid_div'class＝"drag">Video<！--type＝'Video'id＝”title＝”width＝'350'height＝'300'border＝'0'alt＝”--></div>；
音频：<div id＝'aud_div'class＝"drag">Audio<！--type＝'Audio'id＝”title＝”width＝'350'height＝'300'border＝'0'alt＝”--></div>。
CN201410495643.8A 2014-09-25 2014-09-25 一种基于Web的在线课件制作任意个对象分屏布局编辑方法 Expired - Fee Related CN104298721B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410495643.8A CN104298721B (zh) 2014-09-25 2014-09-25 一种基于Web的在线课件制作任意个对象分屏布局编辑方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410495643.8A CN104298721B (zh) 2014-09-25 2014-09-25 一种基于Web的在线课件制作任意个对象分屏布局编辑方法

Publications (2)

Publication Number Publication Date
CN104298721A CN104298721A (zh) 2015-01-21
CN104298721B true CN104298721B (zh) 2018-09-28

Family

ID=52318446

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410495643.8A Expired - Fee Related CN104298721B (zh) 2014-09-25 2014-09-25 一种基于Web的在线课件制作任意个对象分屏布局编辑方法

Country Status (1)

Country Link
CN (1) CN104298721B (zh)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105719515A (zh) * 2016-01-21 2016-06-29 北京师科阳光信息技术有限公司 在线显示方法
CN107229626A (zh) * 2016-03-23 2017-10-03 阿里巴巴集团控股有限公司 一种***和查看动态内容的方法及***
CN109508187A (zh) * 2018-10-10 2019-03-22 国网新疆电力有限公司信息通信公司 基于html的微信公众号图文编辑器构建方法及其编辑器
CN109614424B (zh) * 2018-11-28 2020-12-29 南京赛克蓝德网络科技有限公司 页面布局生成方法、装置、计算设备和介质
CN109408764B (zh) * 2018-11-28 2021-03-02 南京赛克蓝德网络科技有限公司 页面区域划分方法、装置、计算设备和介质
CN109597954A (zh) * 2018-11-28 2019-04-09 南京赛克蓝德网络科技有限公司 数据项展示方法、装置、计算设备和介质
CN109948102B (zh) * 2019-03-27 2021-05-25 维沃移动通信有限公司 页面内容编辑方法及终端
CN110083295A (zh) * 2019-05-10 2019-08-02 苏州云学时代科技有限公司 基于教学课件的线上编辑过程提取音频编辑数据的方法
CN112437148B (zh) * 2020-11-20 2023-03-07 北京奇艺世纪科技有限公司 业务请求的处理方法、装置、业务服务器及***

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP5039903B2 (ja) * 2008-02-18 2012-10-03 インターナショナル・ビジネス・マシーンズ・コーポレーション アプリケーションを実行するシステム、方法およびプログラム
CN102043621A (zh) * 2010-12-01 2011-05-04 北京迅捷英翔网络科技有限公司 基于Javascript标签库的页面开发方法
CN102999511B (zh) * 2011-09-13 2016-04-13 阿里巴巴集团控股有限公司 一种页面快速转换方法、装置和***
CN103049557A (zh) * 2012-12-31 2013-04-17 百度在线网络技术（北京）有限公司 一种站点资源管理方法及装置

Also Published As

Publication number Publication date
CN104298721A (zh) 2015-01-21

Similar Documents

Publication Publication Date Title
CN104298721B (zh) 一种基于Web的在线课件制作任意个对象分屏布局编辑方法
US10976888B2 (en) Automatically generating column layouts in electronic documents
CN104298725B (zh) 在线课件开发***一次性编辑输入多版本输出的方法
US10229094B2 (en) Dynamic simulation of a responsive web page
US10565296B2 (en) Designing interactive web templates
US10452747B2 (en) Dynamically formatting scalable vector graphics
US10210142B1 (en) Inserting linked text fragments in a document
CN101908044A (zh) 一种动态可调的模板及其使用方法
WO2017028611A1 (zh) 一种表单实现方法及装置
DE202011110867U1 (de) Rich-Text- und browserbasiertes Textverarbeitungsprogramm
US9046982B2 (en) Representing a graphical user interface using a topic tree structure
CN102663126A (zh) 一种在移动终端中显示网页的方法及装置
DE202011110886U1 (de) Synthetische Navigationselemente für elektronische Dokumente
WO2006107529A2 (en) Method and system for aggregating rules for a property associated with a document element
CN106610826B (zh) 在线场景应用的制作方法及装置
CN104915186B (zh) 一种制作页面的方法和装置
CN111597489B (zh) 一种基于移动端可拖拽自定义表单组件的实现方法及装置
CN107169007A (zh) 一种移动终端的显示界面设置方法及装置
CN105867820A (zh) 用于触摸屏的文本编辑方法和装置
US20130262987A1 (en) Document processing method, apparatus and editor
CN103518195A (zh) 用于基于矢量的表格字段文档的设备、***和方法
CN110019037A (zh) 一种pdf文件展示方法、装置、设备及存储介质
CN113655999A (zh) 一种页面控件的渲染方法、装置、设备及存储介质
US20180181269A1 (en) Systems and methods for online-content and print-content assembly
CN110399232B (zh) 粘贴处理方法、装置、设备及计算机可读存储介质

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
ASS Succession or assignment of patent right

Owner name: TANG XIJIAN

Free format text: FORMER OWNER: ASTROWAY TECHNOLOGY DEVELOPMENT (QINGDAO) CO., LTD.

Effective date: 20150605

C41 Transfer of patent application or patent right or utility model
TA01 Transfer of patent application right

Effective date of registration: 20150605

Address after: 266000, room 217, 302 Chongqing Road, Licang District, Shandong, Qingdao, China

Applicant after: Tang Xijian

Address before: 266000, room 217, 302 Chongqing Road, Licang District, Shandong, Qingdao, China

Applicant before: Yu Wei Technology Development (Qingdao) Co., Ltd.

GR01 Patent grant
GR01 Patent grant
CF01 Termination of patent right due to non-payment of annual fee
CF01 Termination of patent right due to non-payment of annual fee

Granted publication date: 20180928

Termination date: 20200925