[發(fā)明專利]一種基于Web的在線課件制作任意個對象分屏布局編輯方法

有效

• 申請?zhí)枺?/td>: 201410495643.8
• 申請日: 2014-09-25
• 公開（公告）號: CN104298721B
• 公開（公告）日: 2018-09-28
• 發(fā)明（設(shè)計(jì)）人: 湯習(xí)儉;湯浩晨;湯浩然
• 申請（專利權(quán)）人: 湯習(xí)儉
• 主分類號: G06F17/30
• 分類號: G06F17/30;G06F17/22;G06F17/24
• 代理公司: 北京科億知識產(chǎn)權(quán)代理事務(wù)所(普通合伙) 11350
• 代理人: 蘇雪雪

1.一種基于Web的在線課件制作任意個對象分屏布局編輯方法，其特征在于，前臺使用JSP、html、CSS和JavaScript的DOM模型，后臺使用Servlet、J2EE和MySQL數(shù)據(jù)庫，包括以下步驟：

步驟(a)，通過html表格模板將頁面分成多個單元格；選用一種適合用戶顯示內(nèi)容的html表格模板將頁面分成幾個單元格，在此表格上加上contextmenu事件使之單擊鼠標(biāo)右鍵就彈出一列菜單，點(diǎn)擊這些菜單通過調(diào)用html DOM的相應(yīng)表格操作方法動態(tài)插入/刪除一行，添加、減少或合并單元格，設(shè)置單元格的屬性，在每個單元格上任意插入一個或多個空、文本、考試、圖形、視頻、音頻方塊或其組合，并且設(shè)置方塊的屬性，其屬性存于上述方塊的標(biāo)簽中；當(dāng)調(diào)換表格模板時(shí)，頁面上已有的方塊及內(nèi)容保持不變，所有操作均通過Javascript代碼實(shí)現(xiàn)；

步驟(b)，待布局完成后，提交含有整個布局頁面的div標(biāo)簽的innerHTML文本給后臺，后臺Servlet接收后進(jìn)行處理，采用Java RegExp分別識別出各個方塊，并提起出各個方塊類型和顯示屬性再存入相應(yīng)的預(yù)先設(shè)計(jì)好的數(shù)據(jù)庫表中；

步驟(c)，在編輯模塊中對各個方塊內(nèi)容采用iframe標(biāo)簽實(shí)行頁面分開編輯；

步驟(d)，在顯示模塊中將各個方塊根據(jù)其所設(shè)置的參數(shù)生成內(nèi)容按其布局和順序顯示出來。

2.如權(quán)利要求1所述的一種基于Web的在線課件制作任意個對象分屏布局編輯方法，其特征在于，在頁面布局中采用六種方塊：空、文本、考試、圖形、視頻、音頻。

3.如權(quán)利要求2所述的一種基于Web的在線課件制作任意個對象分屏布局編輯方法，其特征在于，

空方塊表示內(nèi)容為空，無需編輯；

文本方塊是富文本編輯器，可以動態(tài)插入和編輯各種html標(biāo)簽及其屬性；

圖形方塊可以上傳圖形文件，設(shè)置圖形屬性，編輯圖形事件、縮放、浮文本等功能；

視頻方塊可以上傳多個視頻文件和預(yù)覽圖片，編輯視頻大小等屬性、軟字幕以及時(shí)控文本；

音頻方塊可以上傳多個音頻文件，編輯音頻顯示等屬性、腳本以及時(shí)控文本；

通過編輯考試方塊可以實(shí)現(xiàn)各種題型的測試。

4.如權(quán)利要求2所述的一種基于Web的在線課件制作任意個對象分屏布局編輯方法，其特征在于，所述空、文本、考試、圖形、視頻、音頻方塊分別用html div標(biāo)簽表示。

5.如權(quán)利要求4所述的一種基于Web的在線課件制作任意個對象分屏布局編輯方法，其特征在于，所述html div標(biāo)簽分別為：

空：<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>。