Html內(nèi)容可視化編輯方法及系統(tǒng)的制作方法
【專(zhuān)利摘要】本發(fā)明提供了一種HTML內(nèi)容可視化編輯方法及系統(tǒng)，其中，所述方法包括：獲取所要編輯的HTML內(nèi)容碎片；對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層；對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎片；通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤。所述系統(tǒng)包括：獲取模塊、定位標(biāo)記模塊、編輯模塊和判斷模塊。本發(fā)明用于解決現(xiàn)有技術(shù)中若不熟悉HTML代碼等網(wǎng)頁(yè)編輯語(yǔ)言而無(wú)法對(duì)網(wǎng)頁(yè)進(jìn)行編輯的問(wèn)題。
【專(zhuān)利說(shuō)明】HTML內(nèi)容可視化編輯方法及系統(tǒng)
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及可視化編輯方法及系統(tǒng)，尤其涉及一種HTML內(nèi)容可視化編輯方法及系統(tǒng)。
【背景技術(shù)】
[0002]隨著計(jì)算機(jī)的日益普及，互聯(lián)網(wǎng)的蓬勃發(fā)展，使得計(jì)算機(jī)使用者能夠通過(guò)訪問(wèn)各種網(wǎng)站中的網(wǎng)頁(yè)來(lái)獲取所需要的訊息。而網(wǎng)站中的各個(gè)網(wǎng)頁(yè)通常是網(wǎng)站編輯者通過(guò)HTML語(yǔ)言(HyperText Markup Language,超文本標(biāo)記語(yǔ)言)設(shè)計(jì)出來(lái)的。
[0003]目前，需要通過(guò)HTML代碼來(lái)設(shè)計(jì)網(wǎng)站必須熟悉專(zhuān)業(yè)的HTML代碼。
[0004]發(fā)明人在實(shí)現(xiàn)本發(fā)明的過(guò)程中發(fā)現(xiàn)，現(xiàn)有技術(shù)至少存在以下的缺點(diǎn)和不足:
HTML代碼較為復(fù)雜，若不熟悉HTML代碼等網(wǎng)頁(yè)編輯語(yǔ)言而無(wú)法對(duì)網(wǎng)頁(yè)進(jìn)行編輯。

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

[0005]本發(fā)明所要解決的技術(shù)問(wèn)題是提供一種HTML內(nèi)容可視化編輯方法和系統(tǒng)，以解決現(xiàn)有技術(shù)中若不熟悉HTML代碼等網(wǎng)頁(yè)編輯語(yǔ)言而無(wú)法對(duì)網(wǎng)頁(yè)進(jìn)行編輯的問(wèn)題。
[0006]本發(fā)明公開(kāi)的具體技術(shù)方案如下:
獲取所要編輯的HTML內(nèi)容碎片；
對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層；
對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎片；
通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤。
[0007]優(yōu)選的，所述對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層的步驟包括:
發(fā)布引擎，以及輸出所述HTML內(nèi)容碎片；
查找所述HTML內(nèi)容碎片的碎片標(biāo)記；
依據(jù)所述碎片標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層。
[0008]優(yōu)選的，所述HTML內(nèi)容碎片的頁(yè)面浮層的顯示方式為全頁(yè)預(yù)覽或局部預(yù)覽的方式。
[0009]本發(fā)明還提供了一種HTML內(nèi)容可視化編輯系統(tǒng)，包括:
獲取模塊，用于獲取所要編輯的HTML內(nèi)容碎片；
定位標(biāo)記模塊,用于對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)
面浮層；
編輯模塊，用于對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎片；判斷模塊，用于通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤。
[0010]優(yōu)選的，所述定位標(biāo)記模塊具體用于:
發(fā)布引擎，以及輸出所述HTML內(nèi)容碎片；
查找所述HTML內(nèi)容碎片的碎片標(biāo)記；
依據(jù)所述碎片標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層。
[0011]優(yōu)選的，所述系統(tǒng)還包括:
顯示模塊，用于顯示所述HTML內(nèi)容碎片的頁(yè)面，所述HTML內(nèi)容碎片的頁(yè)面浮層的顯示方式為全頁(yè)預(yù)覽或局部預(yù)覽的方式。
[0012]與現(xiàn)有技術(shù)相比，本發(fā)明具有以下優(yōu)點(diǎn):
O讓編輯人員在零接觸HTML代碼的情況下完成內(nèi)容更新。
[0013]2)簡(jiǎn)化操作步驟，將模板創(chuàng)建和碎片創(chuàng)建最大程度自動(dòng)化完成；
3)擺脫HTML代碼，在可視化的界面中通過(guò)鼠標(biāo)點(diǎn)擊的方式實(shí)現(xiàn)模板制作和碎片創(chuàng)建的自動(dòng)化；
4)在可視化的界面中通過(guò)鼠標(biāo)點(diǎn)擊的方式直接進(jìn)入碎片編輯界面；
5)實(shí)現(xiàn)碎片編輯或模板制作都能在同一個(gè)界面中完成，避免畫(huà)面頻繁切換。
【專(zhuān)利附圖】

【附圖說(shuō)明】
[0014]圖1是現(xiàn)有技術(shù)中網(wǎng)頁(yè)內(nèi)容維護(hù)的流程圖；
圖2是本發(fā)明實(shí)施例一種HTML內(nèi)容可視化編輯方法的流程圖；
圖3是本發(fā)明又一實(shí)施例一種HTML內(nèi)容可視化編輯方法的流程圖；
圖4是本發(fā)明一種HTML內(nèi)容可視化編輯方法的具體實(shí)例的示意圖；
圖5是本發(fā)明實(shí)施例一種HTML內(nèi)容可視化編輯系統(tǒng)的結(jié)構(gòu)圖；
圖6是本發(fā)明又一實(shí)施例一種HTML內(nèi)容可視化編輯系統(tǒng)的結(jié)構(gòu)圖。
【具體實(shí)施方式】
[0015]為使本發(fā)明的上述目的、特征和優(yōu)點(diǎn)能夠更加明顯易懂，下面結(jié)合附圖和【具體實(shí)施方式】對(duì)本發(fā)明作進(jìn)一步詳細(xì)的說(shuō)明。
[0016]參見(jiàn)圖1，是現(xiàn)有技術(shù)中網(wǎng)頁(yè)內(nèi)容維護(hù)的流程圖。
[0017]從圖1中，可以獲知現(xiàn)有技術(shù)中，網(wǎng)站內(nèi)容的更新和維護(hù)通常依賴(lài)于CMS(ContentManagement System,網(wǎng)站內(nèi)容管理系統(tǒng))，做法是:網(wǎng)站技術(shù)支持人員和內(nèi)容管理人員共同約定，為了便于內(nèi)容更新，將網(wǎng)頁(yè)劃分為一個(gè)個(gè)區(qū)塊，技術(shù)支持人員將這些區(qū)塊制作成碎片，在CMS系統(tǒng)中錄入碎片信息，并在|吳板中添加碎片標(biāo)識(shí)。這樣就完成了|吳板制作和創(chuàng)建碎片的整個(gè)過(guò)程。網(wǎng)站編輯人員需要對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行不定期更新，通常的做法是進(jìn)入CMS系統(tǒng)的碎片列表，從眾多碎片目錄中找到需要更新內(nèi)容的碎片，進(jìn)入碎片編輯頁(yè)面修改碎片內(nèi)容，提交并發(fā)布。
[0018]從圖1中可以看出:現(xiàn)有HTML內(nèi)容可視化編輯方法的缺陷是:網(wǎng)頁(yè)內(nèi)容維護(hù)人員即內(nèi)容編輯人員在在需要更新頁(yè)面某一個(gè)區(qū)塊的內(nèi)容時(shí)，首先得了解這個(gè)區(qū)塊所對(duì)應(yīng)的是哪個(gè)碎片，再進(jìn)入CMS系統(tǒng)中從一層一層碎片目錄中找到這個(gè)碎片才能進(jìn)行能容更新，最后回到網(wǎng)頁(yè)刷新網(wǎng)頁(yè)檢查內(nèi)容顯示是否正常；這個(gè)過(guò)程存在兩個(gè)問(wèn)題:需要在多個(gè)窗口來(lái)回切換、新的內(nèi)容編輯人員需要完全掌握各個(gè)區(qū)塊和碎片的對(duì)應(yīng)情況；很顯然這增加了人力成本，提高了內(nèi)容編輯人員的操作門(mén)檻；無(wú)法實(shí)現(xiàn)局部預(yù)覽；雖然可實(shí)現(xiàn)全頁(yè)預(yù)覽，但是速度慢，影響工作效率；編輯人員直接面對(duì)HTML代碼，直接編輯HTML代碼，這對(duì)編輯人員的技術(shù)要求有較高要求，而且容易出錯(cuò)。
[0019]綜上所述，傳統(tǒng)做法的缺點(diǎn)歸納為:操作繁瑣，操作界面切換頻繁，技術(shù)門(mén)檻高，易出錯(cuò)，不直觀。
[0020]參見(jiàn)圖2，是本發(fā)明實(shí)施例一種HTML內(nèi)容可視化編輯方法的流程圖。
[0021]S201、獲取所要編輯的HTML內(nèi)容碎片；
5202、對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層；
5203、對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎片；
5204、通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤。
[0022]內(nèi)容可視化編輯:一個(gè)網(wǎng)頁(yè)根據(jù)功能結(jié)合標(biāo)簽可劃分為一個(gè)個(gè)矩形區(qū)塊，每個(gè)矩形區(qū)塊被稱(chēng)為“碎片”，每個(gè)碎片的內(nèi)容都需要編輯人員單獨(dú)來(lái)維護(hù)，包括錄入和更新；對(duì)這些碎片的維護(hù)稱(chēng)之為“編輯碎片”。傳統(tǒng)的編輯碎片的方式是在內(nèi)容管理系統(tǒng)的碎片列表中找到想要編輯的碎片，然后進(jìn)行內(nèi)容更新，這種對(duì)網(wǎng)站內(nèi)容維護(hù)的方式屬于非可視化編輯?？梢暬庉嬀褪蔷庉嬋藛T能在網(wǎng)頁(yè)中看到一個(gè)個(gè)碎片區(qū)塊，點(diǎn)擊這些區(qū)塊就可以進(jìn)入該區(qū)塊的內(nèi)容管理界面，實(shí)現(xiàn)對(duì)內(nèi)容的更新。
[0023]本實(shí)施例通過(guò)獲取所要編輯的HTML內(nèi)容碎片；對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層；對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎片；通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤；實(shí)現(xiàn)了編輯人員在零接觸HTML代碼的情況下完成內(nèi)容更新。
[0024]參見(jiàn)圖3，是本發(fā)明又一實(shí)施例一種HTML內(nèi)容可視化編輯方法的流程圖。
[0025]S301、獲取所要編輯的HTML內(nèi)容碎片；
S302、對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層；其中，所述S302、對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層的步驟具體可以包括:
53021、發(fā)布引擎，以及輸出所述HTML內(nèi)容碎片；
53022、查找所述HTML內(nèi)容碎片的碎片標(biāo)記；
53023、依據(jù)所述碎片標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層。
[0026]S303、對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎片；
S304、通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述
相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤。
[0027]其中，所述HTML內(nèi)容碎片的頁(yè)面浮層的顯示方式為全頁(yè)預(yù)覽或局部預(yù)覽的方式。
[0028]本實(shí)施例通過(guò)獲取所要編輯的HTML內(nèi)容碎片；對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層；對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎片；通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤；不僅實(shí)現(xiàn)了編輯人員在零接觸HTML代碼的情況下完成內(nèi)容更新；還實(shí)現(xiàn)了在可視化的界面中通過(guò)鼠標(biāo)點(diǎn)擊的方式實(shí)現(xiàn)模板制作和碎片創(chuàng)建的自動(dòng)化。
[0029]參見(jiàn)圖4，是本發(fā)明一種HTML內(nèi)容可視化編輯方法的具體實(shí)例的示意圖。
[0030]首先，在進(jìn)行HTML內(nèi)容可視化編輯之前，需要先實(shí)現(xiàn)對(duì)HTML模板的可視化制作及編輯過(guò)程，具體過(guò)程如下所述:
網(wǎng)站編輯提出制作頁(yè)面的需求后提交給美工設(shè)計(jì)制作，制作好的只是最原始的HTML，最終需要更新內(nèi)容后發(fā)布到服務(wù)器。為了便于日后的內(nèi)容更新，需要技術(shù)支持人員根據(jù)一定的邏輯把網(wǎng)頁(yè)劃分為若干區(qū)塊，并將這些區(qū)塊制作碎片存儲(chǔ)到后臺(tái)。這樣就形成了模板和碎片，模板和碎片結(jié)合編輯人員錄入的數(shù)據(jù)通過(guò)發(fā)布引擎發(fā)布到前端服務(wù)器。
[0031]網(wǎng)頁(yè)中通過(guò)javascript腳本能跟蹤鼠標(biāo)經(jīng)過(guò)或點(diǎn)擊的位置查找到該位置的頁(yè)面元素節(jié)點(diǎn)，并列出該節(jié)點(diǎn)的所有父節(jié)點(diǎn)。
[0032]列出所有父節(jié)點(diǎn)是為了方便修正選取的節(jié)點(diǎn)，鼠標(biāo)移動(dòng)到節(jié)點(diǎn)列表中的任何一級(jí)節(jié)點(diǎn)，在頁(yè)面上都會(huì)高亮顯示該節(jié)點(diǎn)所覆蓋的區(qū)域，這樣可幫助模板制作人員準(zhǔn)確定位到需要制作成碎片的區(qū)塊。
[0033]選取的高亮區(qū)域就是需要制作成碎片的區(qū)域，點(diǎn)擊“生成碎片”按鈕前端javascript腳本程序就會(huì)讀取到該區(qū)域的html代碼段發(fā)送到后臺(tái)CMS，根據(jù)之前選擇的碎片配置信息，存儲(chǔ)到后臺(tái)數(shù)據(jù)庫(kù)，返回該碎片的標(biāo)識(shí)信息，同時(shí)腳本程序會(huì)自動(dòng)替換模板里的那一段HTML代碼為碎片標(biāo)識(shí)；在可視化編輯視圖中該HTML代碼的根節(jié)點(diǎn)上將會(huì)增加自定義屬性“cmpp_params”,該屬性標(biāo)記的作用就是標(biāo)識(shí)該節(jié)點(diǎn)已經(jīng)被創(chuàng)建為碎片了 ；這樣就實(shí)現(xiàn)了制作碎片和在模板中標(biāo)識(shí)碎片一次性自動(dòng)完成。
[0034]標(biāo)識(shí)了碎片的區(qū)域表面漂浮一個(gè)半透明的div浮層，該浮層高亮顯示，并綁定鼠標(biāo)點(diǎn)擊事件，點(diǎn)擊該浮層可進(jìn)入碎片配置窗口。當(dāng)需要修改模板、增加碎片、修改碎片配置、刪除碎片時(shí)可在模板編輯視圖中進(jìn)行。模板編輯視圖的初始化原理是:模板在可視化編輯初始化時(shí)，腳本程序會(huì)便利網(wǎng)頁(yè)中所有包含碎片標(biāo)記“ cmpp_params”的節(jié)點(diǎn),給這些節(jié)點(diǎn)的元素添加半透明浮層，并高亮顯示。模板制作人員可點(diǎn)擊這些浮層對(duì)碎片進(jìn)行再配置。
[0035]制作模板創(chuàng)建碎片是同步進(jìn)行的，而且無(wú)需接觸html代碼，只需要用鼠標(biāo)在網(wǎng)頁(yè)中點(diǎn)取就可自動(dòng)生成碎片存儲(chǔ)到后臺(tái)CMS系統(tǒng)，這正是“可視化編輯”的展現(xiàn)。
[0036]模板可視化制作和編輯中，不僅實(shí)現(xiàn)了鼠標(biāo)在網(wǎng)頁(yè)移動(dòng)時(shí)，前端腳本能準(zhǔn)確查找到鼠標(biāo)經(jīng)過(guò)的HTML節(jié)點(diǎn)，通過(guò)點(diǎn)擊鼠標(biāo)能準(zhǔn)確選取到節(jié)點(diǎn)；還實(shí)現(xiàn)了給節(jié)點(diǎn)添加碎片標(biāo)記，碎片標(biāo)記決定了網(wǎng)頁(yè)中已經(jīng)制作成碎片的區(qū)塊；其中，高亮飄浮的半透明浮層就是其對(duì)應(yīng)碎片的配置入口。
[0037]然后，對(duì)HTML內(nèi)容進(jìn)行可視化編輯，具體過(guò)程如下所述:
制作好的模板包含了所有碎片的標(biāo)識(shí)信息，可借助發(fā)布頁(yè)面引擎將模板結(jié)合碎片和數(shù)據(jù)發(fā)布成和真實(shí)網(wǎng)頁(yè)一模一樣的HTML代碼輸出到碎片編輯視圖中，并在碎片節(jié)點(diǎn)上附上碎片標(biāo)記；通過(guò)前端腳本遍歷所有節(jié)點(diǎn)，查找出帶有碎片編輯的節(jié)點(diǎn)，并在節(jié)點(diǎn)元素表面添加高亮顯示的半透明浮層，點(diǎn)擊浮層可在本頁(yè)彈出碎片編輯窗口，內(nèi)容編輯人員就可以在碎片編輯窗口中更新內(nèi)容、預(yù)覽內(nèi)容。
[0038]碎片可視化編輯中，不僅實(shí)現(xiàn)了給頁(yè)面HTML節(jié)點(diǎn)添加自定義碎片標(biāo)識(shí)；這些標(biāo)識(shí)決定了在可視化界面中碎片的位置，即編輯入口 ；標(biāo)識(shí)信息中的各項(xiàng)參數(shù)決定了碎片的編輯地址；還實(shí)現(xiàn)了前端腳本對(duì)碎片標(biāo)記的掃描，并計(jì)算出有碎片標(biāo)記的節(jié)點(diǎn)在瀏覽器中的坐標(biāo)位置，位置決定了半透明浮層是否正確完整覆蓋在碎片內(nèi)容之上。
[0039]模板制作:對(duì)網(wǎng)頁(yè)劃分區(qū)塊，并制作成一個(gè)個(gè)方便內(nèi)容更新的碎片的過(guò)程。把一個(gè)html網(wǎng)頁(yè)制作成一個(gè)個(gè)碎片有兩種方式，一種是通過(guò)HTML中的預(yù)定義的碎片標(biāo)簽，由系統(tǒng)自動(dòng)識(shí)別并創(chuàng)建碎片，然后由二次開(kāi)發(fā)人員完成最后的碎片配置工作。另一種就是通過(guò)鼠標(biāo)在頁(yè)面上選取元素來(lái)生成碎片并完成碎片配置。
[0040]模板可視化編輯:每個(gè)矩形區(qū)塊被稱(chēng)為“碎片”，把一個(gè)網(wǎng)頁(yè)劃分為若干區(qū)塊，并對(duì)每個(gè)區(qū)塊給予碎片代碼標(biāo)識(shí)，這些碎片代碼標(biāo)識(shí)的集合以及沒(méi)有劃分為碎片的原始HTML稱(chēng)之為“模板”，發(fā)布引擎將模板和內(nèi)容數(shù)據(jù)按照既定的發(fā)布邏輯即可生成網(wǎng)頁(yè)。傳統(tǒng)的模板編輯方法是面對(duì)網(wǎng)頁(yè)HTML代碼，用手工填寫(xiě)的方式劃分和標(biāo)識(shí)碎片標(biāo)記。而模板的可視化編輯則面對(duì)的是在瀏覽器中打開(kāi)的網(wǎng)頁(yè)，通過(guò)鼠標(biāo)點(diǎn)擊選取的方式自動(dòng)完成碎片標(biāo)識(shí)和碎片存儲(chǔ)工作。
[0041]參見(jiàn)圖5，是本發(fā)明實(shí)施例一種HTML內(nèi)容可視化編輯系統(tǒng)的結(jié)構(gòu)圖。
[0042]所述系統(tǒng)主要包括:
獲取模塊51，用于獲取所要編輯的HTML內(nèi)容碎片；
定位標(biāo)記模塊52，用于對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層；
編輯模塊53，用于對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎
片;
判斷模塊54，用于通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤。
[0043]本實(shí)施例通過(guò)獲取模塊，用于獲取所要編輯的HTML內(nèi)容碎片；定位標(biāo)記模塊，用于對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層；編輯模塊，用于對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎片；判斷模塊，用于通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤；實(shí)現(xiàn)了編輯人員在零接觸HTML代碼的情況下完成內(nèi)容更新。
[0044]參見(jiàn)圖6,是本發(fā)明又一實(shí)施例一種HTML內(nèi)容可視化編輯系統(tǒng)的結(jié)構(gòu)圖。
[0045]所述定位標(biāo)記模塊52具體用于:
發(fā)布引擎，以及輸出所述HTML內(nèi)容碎片；
查找所述HTML內(nèi)容碎片的碎片標(biāo)記；
依據(jù)所述碎片標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層。
[0046]所述系統(tǒng)還包括:
顯示模塊61，用于顯示所述HTML內(nèi)容碎片的頁(yè)面，所述HTML內(nèi)容碎片的頁(yè)面浮層的顯示方式為全頁(yè)預(yù)覽或局部預(yù)覽的方式。
[0047]本實(shí)施例通過(guò)獲取模塊，用于獲取所要編輯的HTML內(nèi)容碎片；定位標(biāo)記模塊，用于對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層；編輯模塊，用于對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎片；判斷模塊，用于通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤；不僅實(shí)現(xiàn)了編輯人員在零接觸HTML代碼的情況下完成內(nèi)容更新；還實(shí)現(xiàn)了在可視化的界面中通過(guò)鼠標(biāo)點(diǎn)擊的方式實(shí)現(xiàn)模板制作和碎片創(chuàng)建的自動(dòng)化。
[0048]本說(shuō)明書(shū)中的各個(gè)實(shí)施例均采用遞進(jìn)的方式描述，每個(gè)實(shí)施例重點(diǎn)說(shuō)明的都是與其他實(shí)施例的不同之處，各個(gè)實(shí)施例之間相同相似的部分互相參見(jiàn)即可。對(duì)于系統(tǒng)或裝置實(shí)施例而言，由于其與方法實(shí)施例基本相似，所以描述的比較簡(jiǎn)單，相關(guān)之處參見(jiàn)方法實(shí)施例的部分說(shuō)明即可。
[0049]以上對(duì)本發(fā)明所提供的一種HTML內(nèi)容可視化編輯方法及系統(tǒng)，進(jìn)行了詳細(xì)介紹，本文中應(yīng)用了具體個(gè)例對(duì)本發(fā)明的原理及實(shí)施方式進(jìn)行了闡述，以上實(shí)施例的說(shuō)明只是用于幫助理解本發(fā)明的方法及其核心思想；同時(shí)，以上所述僅為本發(fā)明的較佳實(shí)施例而已，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)所做的任何修改、等同替換和改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。
【權(quán)利要求】
1.一種HTML內(nèi)容可視化編輯方法，其特征在于，包括: 獲取所要編輯的HTML內(nèi)容碎片； 對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層； 對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎片； 通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤。
2.根據(jù)權(quán)利要求1所述的方法，其特征在于，所述對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層的步驟包括: 發(fā)布引擎，以及輸出所述HTML內(nèi)容碎片； 查找所述HTML內(nèi)容碎片的碎片標(biāo)記； 依據(jù)所述碎片標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層。
3.根據(jù)權(quán)利要求1或2所述的方法，其特征在于，所述HTML內(nèi)容碎片的頁(yè)面浮層的顯示方式為全頁(yè)預(yù)覽或局部預(yù)覽的方式。
4.一種HTML內(nèi)容可視化編輯系統(tǒng)，其特征在于，包括: 獲取模塊，用于獲取所要編輯的HTML內(nèi)容碎片； 定位標(biāo)記模塊,用于對(duì)所述HTML內(nèi)容碎片進(jìn)行定位標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層； 編輯模塊，用于對(duì)所述HTML內(nèi)容碎片的頁(yè)面浮層進(jìn)行碎片編輯，以生成相應(yīng)的碎片；判斷模塊，用于通過(guò)判斷所述相應(yīng)的碎片是否成功入庫(kù)，以執(zhí)行相應(yīng)的操作；若判斷結(jié)果為所述相應(yīng)的碎片成功入庫(kù)，則觸發(fā)相應(yīng)的碎片內(nèi)容發(fā)布；若判斷結(jié)果為所述相應(yīng)的碎片入庫(kù)失敗，則輸出判斷結(jié)果為錯(cuò)誤。
5.根據(jù)權(quán)利要求4所述的系統(tǒng)，其特征在于，所述定位標(biāo)記模塊具體用于: 發(fā)布引擎，以及輸出所述HTML內(nèi)容碎片； 查找所述HTML內(nèi)容碎片的碎片標(biāo)記； 依據(jù)所述碎片標(biāo)記，生成所述HTML內(nèi)容碎片的頁(yè)面浮層。
6.根據(jù)權(quán)利要求4或5所述的系統(tǒng)，其特征在于，所述系統(tǒng)還包括: 顯示模塊，用于顯示所述HTML內(nèi)容碎片的頁(yè)面，所述HTML內(nèi)容碎片的頁(yè)面浮層的顯示方式為全頁(yè)預(yù)覽或局部預(yù)覽的方式。
【文檔編號(hào)】G06F17/30GK103853737SQ201210500823
【公開(kāi)日】2014年6月11日 申請(qǐng)日期:2012年11月29日 優(yōu)先權(quán)日:2012年11月29日
【發(fā)明者】嚴(yán)偉鋒, 程鄧時(shí), 楊俊杰, 胡偉琪 申請(qǐng)人:怡豐聯(lián)合（北京）科技有限責(zé)任公司