一種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法
【專利摘要】本發(fā)明提出了一種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法，通過html表格模板將頁面分成多個(gè)單元格；提交整個(gè)布局頁面的html文本給后臺(tái)，后臺(tái)Servlet接收后進(jìn)行處理，采用Java RegExp提起出各個(gè)方塊參數(shù)再存入數(shù)據(jù)庫中；在編輯模塊中對各個(gè)方塊內(nèi)容采用iframe標(biāo)簽實(shí)行頁面分開編輯；在顯示模塊中將各個(gè)方塊根據(jù)其所設(shè)置的參數(shù)生成內(nèi)容按其布局和順序顯示出來。本發(fā)明能實(shí)現(xiàn)課件的任意分屏布局編輯功能，表格模板可以任意調(diào)換，也可動(dòng)態(tài)添加或刪除表格單元，編輯表格單元屬性；在編輯模塊中對各個(gè)方塊內(nèi)容實(shí)行分開編輯，從而實(shí)現(xiàn)許多復(fù)雜功能。
【專利說明】—種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及網(wǎng)絡(luò)【技術(shù)領(lǐng)域】，特別涉及一種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法。

【背景技術(shù)】
[0002]現(xiàn)有的在線課件制作軟件大都采用單屏富文本編輯器，雖然能插入如文字、圖形、視頻、音頻等元素，但這些元素的屬性簡單，不能作進(jìn)一步的復(fù)雜編輯，而且其位置是固定的，不能自適應(yīng)瀏覽器窗口大小變化。還有一種較好的三分屏制作技術(shù)，也只是把視頻屏，目錄屏以及內(nèi)容顯示屏三屏按照固定格式聯(lián)動(dòng)起來而已，不能作任意變換，也不能編輯考試等其他多媒體內(nèi)容。


【發(fā)明內(nèi)容】

[0003]本發(fā)明提出一種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法，解決了現(xiàn)有在線課件制作無法實(shí)現(xiàn)課件的任意分屏布局編輯的問題。
[0004]本發(fā)明的技術(shù)方案是這樣實(shí)現(xiàn)的:
[0005]一種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法，前臺(tái)使用JSP、html、CSS和JavaScript的DOM模型,后臺(tái)使用Servlet、J2EE和MySQL數(shù)據(jù)庫,包括以下步驟:
[0006]步驟(a),通過html表格模板將頁面分成多個(gè)單元格；
[0007]步驟(b)，待布局完成后，提交含有整個(gè)布局頁面的div標(biāo)簽的innerHTML文本給后臺(tái)，后臺(tái)Servlet接收后進(jìn)行處理,采用Java RegExp分別識(shí)別出各個(gè)方塊,并提起出各個(gè)方塊類型和顯示屬性再存入相應(yīng)的預(yù)先設(shè)計(jì)好的數(shù)據(jù)庫表中；
[0008]步驟(C)，在編輯模塊中對各個(gè)方塊內(nèi)容采用iframe標(biāo)簽實(shí)行頁面分開編輯；
[0009]步驟(d)，在顯示模塊中將各個(gè)方塊根據(jù)其所設(shè)置的參數(shù)生成內(nèi)容按其布局和順序顯示出來。
[0010]可選地，在頁面布局中采用六種方塊:空、文本、考試、圖形、視頻、音頻。
[0011]可選地，空方塊表示內(nèi)容為空，無需編輯；
[0012]文本方塊是富文本編輯器，可以動(dòng)態(tài)插入和編輯各種html標(biāo)簽及其屬性；
[0013]圖形方塊可以上傳圖形文件，設(shè)置圖形屬性，編輯圖形事件、縮放、浮文本等功倉泛;
[0014]視頻方塊可以上傳多個(gè)視頻文件和預(yù)覽圖片，編輯視頻大小等屬性、軟字幕以及時(shí)控文本；
[0015]音頻方塊可以上傳多個(gè)音頻文件，編輯音頻顯示等屬性、腳本以及時(shí)控文本；
[0016]通過編輯考試方塊可以實(shí)現(xiàn)各種題型的測試。
[0017]可選地，所述空、文本、考試、圖形、視頻、音頻方塊分別用html div標(biāo)簽表示。
[0018]可選地，所述html div標(biāo)簽分別為:
[0019]空:〈div id = ’ emp-diV class = //drag//>Empty< ! —type = ' Empty' id="title =" —></div> ；
[0020]文本:<div id = ' txt_div' class = 〃drag〃>Textarea〈 ! —type='Textarea' id =" title =" —></div> ；
[0021]考試:〈div id = ' tst_div' class = 〃drag〃>Test〈 ! —type = ' Test' id="title =" —></div> ；
[0022]圖形:<div id = ' img-diV class = ^(Irag^)Picture< ! —type = ' Picture' id="title = " width = ’ 350’ height = ’ 300’ border = ’ 0’ alt = " —></div> ；
[0023]視頻:〈divid = ’ vid_div，class = 〃drag">Video〈 ! —type = ’Video，id="title = " width = ’ 350’ height = ’ 300’ border = ’ 0’ alt = " —></div> ；
[0024]音步頁:〈div id = ’ aud_div’class = 〃drag〃>Aud1〈 ! —type = ’Aud1’id="title = " width = ’ 350’ height = ’ 300’ border = ’ 0’ alt = " —>〈/div>。
[0025]本發(fā)明的有益效果是:
[0026](I)能實(shí)現(xiàn)課件的任意分屏布局編輯功能；
[0027](2)表格模板可以任意調(diào)換，也可動(dòng)態(tài)添加或刪除表格單元，編輯表格單元屬性；
[0028](3)在編輯模塊中對各個(gè)方塊內(nèi)容實(shí)行分開編輯，從而實(shí)現(xiàn)許多復(fù)雜功能。

【專利附圖】

【附圖說明】
[0029]為了更清楚地說明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實(shí)施例，對于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他的附圖。
[0030]圖1為本發(fā)明一種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法的流程圖。

【具體實(shí)施方式】
[0031]下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例。基于本發(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
[0032]現(xiàn)有的在線課件制作軟件大都采用單屏富文本編輯器，雖然能插入如文字、圖形、視頻、音頻等元素，但這些元素的屬性簡單，不能作進(jìn)一步的復(fù)雜編輯。
[0033]本發(fā)明采用Java Web技術(shù)開發(fā),前臺(tái)使用JSP、html、CSS和JavaScript的DOM模型，后臺(tái)使用Servlet、J2EE和MySQL數(shù)據(jù)庫。本發(fā)明在頁面布局中采用六種方塊:空、文本、考試、圖形、視頻、音頻，分別用html div標(biāo)簽表示，具體如下:
[0034]空:<div id =，emp_div，class = //drag//>Empty< ! —type =，Empty' id="title =" —></div> ；
[0035]文本:<div id = ' txt_div' class = 〃drag〃>Textarea〈 ! —type='Textarea' id =" title =" —></div> ；
[0036]考試:<div id = ' tst_div' class = 〃drag〃>Test〈 ! —type = ' Test' id="title =" —></div> ；
[0037]圖形:<div id = ' img-diV class = ^(Irag^)Picture< ! —type = ' Picture' id="title = " width = ’ 350’ height = ’ 300’ border = ’ 0’ alt = " —></div> ；
[0038]視頻:〈divid = ’ vid_div，class = 〃drag">Video〈 ! —type = ’Video，id="title = " width = ’ 350’ height = ’ 300’ border = ’ 0’ alt = " —></div> ；
[0039]音步頁:〈div id = ’ aud_div’class = 〃drag〃>Aud1〈 ! —type = ’Aud1’id="title = " width = ’ 350’ height = ’ 300’ border = ’ 0’ alt = " —>〈/div>。
[0040]下面結(jié)合附圖對本發(fā)明的基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法進(jìn)行詳細(xì)說明。
[0041]如圖1所示，本發(fā)明的基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法，包括以下步驟:
[0042]步驟(a),通過html表格模板將頁面分成多個(gè)單元格；
[0043]步驟(b)，待布局完成后，提交含有整個(gè)布局頁面的div標(biāo)簽的innerHTML文本給后臺(tái)，后臺(tái)Servlet接收后進(jìn)行處理,采用Java RegExp (正則表達(dá)式)分別識(shí)別出各個(gè)方塊，并提起出各個(gè)方塊類型和顯示屬性再存入相應(yīng)的預(yù)先設(shè)計(jì)好的數(shù)據(jù)庫表中；
[0044]步驟(C)，在編輯模塊中對各個(gè)方塊內(nèi)容采用iframe標(biāo)簽實(shí)行頁面分開編輯；
[0045]步驟(d)，在顯示模塊中將各個(gè)方塊根據(jù)其所設(shè)置的參數(shù)生成內(nèi)容按其布局和順序顯示出來，輕松實(shí)現(xiàn)各種所要的顯示結(jié)果。
[0046]上述步驟(a)中，選用一種適合用戶顯示內(nèi)容的html表格模板將頁面分成幾個(gè)單元格，在此表格上加上contextmenu事件使之單擊鼠標(biāo)右鍵就彈出一列菜單，點(diǎn)擊這些菜單通過調(diào)用html DOM的相應(yīng)表格操作方法就可以動(dòng)態(tài)插入/刪除一行，添加、減少或合并單元格，設(shè)置單元格的屬性，例如:寬、高、顏色、對齊方式等，在每個(gè)單元格上任意插入一個(gè)或多個(gè)上述六種方塊或其組合，并且設(shè)置方塊的屬性，其屬性存于上述方塊的標(biāo)簽中。另外還可以任意移動(dòng)和調(diào)換方塊。當(dāng)調(diào)換表格模板時(shí)，頁面上已有的方塊及內(nèi)容保持不變。所有這些操作均通過Javascript代碼實(shí)現(xiàn)。
[0047]上述步驟(c)中，在編輯模塊中對各個(gè)方塊內(nèi)容采用iframe標(biāo)簽實(shí)行頁面分開編輯，其優(yōu)點(diǎn)是易于對各個(gè)方塊設(shè)置各種參數(shù)、添加內(nèi)容并存儲(chǔ)，從而實(shí)現(xiàn)諸多復(fù)雜的功能要求?？辗綁K表示內(nèi)容為空，無需編輯；文本方塊是富文本編輯器，可以動(dòng)態(tài)插入和編輯各種html標(biāo)簽及其屬性；圖形方塊可以上傳圖形文件，設(shè)置圖形屬性，編輯圖形事件、縮放、浮文本等功能；視頻方塊可以上傳多個(gè)視頻文件和預(yù)覽圖片，編輯視頻大小等屬性、軟字幕以及時(shí)控文本；同樣音頻方塊可以上傳多個(gè)音頻文件，編輯音頻顯示等屬性、腳本以及時(shí)控文本；通過編輯考試方塊可以實(shí)現(xiàn)各種題型的測試。
[0048]本發(fā)明的基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法，能實(shí)現(xiàn)課件的任意分屏布局編輯功能；表格模板可以任意調(diào)換，也可動(dòng)態(tài)添加或刪除表格單元，編輯表格單元屬性；在編輯模塊中對各個(gè)方塊內(nèi)容實(shí)行分開編輯，從而實(shí)現(xiàn)許多復(fù)雜功能。
[0049]以上所述僅為本發(fā)明的較佳實(shí)施例而已，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。
【權(quán)利要求】
1.一種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法，其特征在于，前臺(tái)使用 JSP、html、CSS 和 JavaScript 的 DOM 模型,后臺(tái)使用 Servlet、J2EE 和 MySQL 數(shù)據(jù)庫,包括以下步驟: 步驟(a)，通過html表格模板將頁面分成多個(gè)單元格； 步驟(b),待布局完成后，提交含有整個(gè)布局頁面的div標(biāo)簽的innerHTML文本給后臺(tái)，后臺(tái)Servlet接收后進(jìn)行處理,采用Java RegExp分別識(shí)別出各個(gè)方塊,并提起出各個(gè)方塊類型和顯示屬性再存入相應(yīng)的預(yù)先設(shè)計(jì)好的數(shù)據(jù)庫表中； 步驟(C)，在編輯模塊中對各個(gè)方塊內(nèi)容采用iframe標(biāo)簽實(shí)行頁面分開編輯； 步驟(d)，在顯示模塊中將各個(gè)方塊根據(jù)其所設(shè)置的參數(shù)生成內(nèi)容按其布局和順序顯示出來。
2.如權(quán)利要求1所述的一種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法，其特征在于，在頁面布局中采用六種方塊:空、文本、考試、圖形、視頻、音頻。
3.如權(quán)利要求2所述的一種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法，其特征在于， 空方塊表示內(nèi)容為空，無需編輯； 文本方塊是富文本編輯器，可以動(dòng)態(tài)插入和編輯各種html標(biāo)簽及其屬性； 圖形方塊可以上傳圖形文件，設(shè)置圖形屬性，編輯圖形事件、縮放、浮文本等功能； 視頻方塊可以上傳多個(gè)視頻文件和預(yù)覽圖片，編輯視頻大小等屬性、軟字幕以及時(shí)控文本； 音頻方塊可以上傳多個(gè)音頻文件，編輯音頻顯示等屬性、腳本以及時(shí)控文本； 通過編輯考試方塊可以實(shí)現(xiàn)各種題型的測試。
4.如權(quán)利要求2所述的一種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法，其特征在于，所述空、文本、考試、圖形、視頻、音頻方塊分別用html div標(biāo)簽表示。
5.如權(quán)利要求4所述的一種基于Web的在線課件制作任意個(gè)對象分屏布局編輯方法，其特征在于，所述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> ； 視 M:<div id = ’vicLdiv’class = 〃drag〃>Video〈 ! —type = ' Video'id="title = " width = ’ 350’ height = ’ 300’ border = ’ 0’ alt = " —></div> ； 音 M:<div id = ’aud_div’class = 〃drag〃>Aud1〈 ! —type = ’Aud1’ id="title = " width = ’ 350’ height = ’ 300’ border = ’ 0’ alt = " —>〈/div>。
【文檔編號(hào)】G06F17/24GK104298721SQ201410495643
【公開日】2015年1月21日 申請日期:2014年9月25日 優(yōu)先權(quán)日:2014年9月25日
【發(fā)明者】湯習(xí)儉, 湯浩晨, 湯浩然 申請人:宇威科技發(fā)展（青島）有限公司