本發(fā)明涉及計算機技術(shù)領(lǐng)域，特別涉及一種網(wǎng)頁制作方法及系統(tǒng)。

背景技術(shù)：

近年來，隨著計算機的普及與因特網(wǎng)的蓬勃發(fā)展，各種應(yīng)用服務(wù)紛紛與因特網(wǎng)進行結(jié)合，例如：網(wǎng)絡(luò)購物、網(wǎng)絡(luò)論壇等。而這些應(yīng)用服務(wù)皆是以網(wǎng)頁的方式進行呈現(xiàn)，因此，如何快速且方便的開發(fā)網(wǎng)頁已成為亟待解決的問題。

現(xiàn)有的網(wǎng)頁制作時，一般通過網(wǎng)頁開發(fā)人員通過手動敲入邏輯代碼生成網(wǎng)頁對應(yīng)的網(wǎng)頁源代碼以完成網(wǎng)頁的制作。制作一個網(wǎng)頁需要學(xué)習(xí)HTML、CSS、JavaScript等專業(yè)技術(shù)，制作一張適用于移動端的H5網(wǎng)頁更需要制作人員具備自適應(yīng)頁面的排版布局經(jīng)驗，并學(xué)習(xí)HTML5、CSS3等新技術(shù)。而網(wǎng)頁制作完成后還要經(jīng)由專業(yè)的系統(tǒng)運維人員發(fā)布到線上服務(wù)器。另一種，為了解決第一種網(wǎng)頁制作方案中，完全通過手動敲入的代碼的方式非常繁瑣的問題，網(wǎng)頁開發(fā)人員將相同的功能以模塊化的方式撰寫成程序?qū)ο螅@樣，在需要此功能時，直接引用相應(yīng)程序?qū)ο蠹纯?，以減少人工輸入代碼。從整體上來說，現(xiàn)有的這兩網(wǎng)頁制作方案，都僅限于是具有編寫代碼能力的網(wǎng)頁開發(fā)人員對網(wǎng)頁進行制作，而不適合普通的無編寫代碼能力的網(wǎng)頁制作者，因此，不具有普適性。

而現(xiàn)有的第一種網(wǎng)頁制作方案，不僅需要耗費大量的人力物力，由于完全依靠開發(fā)人員手動敲入代碼，編寫出的網(wǎng)頁源代碼易出現(xiàn)錯誤，無法制作出理想中的網(wǎng)頁。而現(xiàn)有的第二種網(wǎng)頁制作方案，雖然可以減少開發(fā)人員的工作量，但是這種引入相應(yīng)程序?qū)ο蟮姆绞綗o法任意選擇欲使用的程序?qū)ο?，并且還可能存在沒有需要的程序?qū)ο蟮膯栴}，依然無法改善網(wǎng)頁設(shè)計不方便的問題，難以滿足多樣化的網(wǎng)頁制作需求。

總體來講，現(xiàn)有的網(wǎng)頁制作的整個流程的啟動成本較高，網(wǎng)頁制作完成后還要經(jīng)由專業(yè)的系統(tǒng)運維人員發(fā)布到線上服務(wù)器，后續(xù)每次的頁面維護都要啟動整個流程，網(wǎng)頁制作成本高，效率低下。

技術(shù)實現(xiàn)要素：

為了克服現(xiàn)有的網(wǎng)頁制作方法的不足，本發(fā)明提供了一種網(wǎng)頁制作方法及系統(tǒng)，通過對網(wǎng)頁的制作上線和后續(xù)維護流程進行優(yōu)化，使得非專業(yè)開發(fā)人員亦可參與或獨立完成網(wǎng)頁的制作工作，高效且成本低。

本發(fā)明提供的網(wǎng)頁制作方法，包括以下步驟：

響應(yīng)于編輯界面中的網(wǎng)頁制作和編輯操作，生成描述網(wǎng)頁內(nèi)容和樣式的huar格式的網(wǎng)頁數(shù)據(jù)并進行存儲；

在發(fā)布網(wǎng)頁時，讀取存儲的所述huar格式的網(wǎng)頁數(shù)據(jù)進行解析和輪轉(zhuǎn)分析，生成網(wǎng)頁數(shù)據(jù)文件；

將所述網(wǎng)頁數(shù)據(jù)文件通過文件傳輸協(xié)議或數(shù)據(jù)傳輸協(xié)議傳送到目標線上服務(wù)器進行發(fā)布。

作為一種可實施方式，所述響應(yīng)于編輯界面中的網(wǎng)頁制作和編輯操作，生成描述網(wǎng)頁內(nèi)容和樣式的huar格式的網(wǎng)頁數(shù)據(jù)并進行存儲，包括以下步驟：

提供編輯界面；

響應(yīng)于所述編輯界面中的網(wǎng)頁制作和編輯操作，檢測用戶創(chuàng)建網(wǎng)頁的內(nèi)容以及樣式的操作信息；

基于所述操作信息，生成描述網(wǎng)頁內(nèi)容和樣式的所述huar格式的網(wǎng)頁數(shù)據(jù)；

存儲所述huar格式的網(wǎng)頁數(shù)據(jù)。

作為一種可實施方式，在基于所述操作信息，生成描述網(wǎng)頁內(nèi)容和樣式的所述huar格式的網(wǎng)頁數(shù)據(jù)之后，還包括以下步驟：

對生成的所述huar格式的網(wǎng)頁數(shù)據(jù)進行解析，根據(jù)解析后的數(shù)據(jù)生成對應(yīng)的網(wǎng)頁，實時顯示在所述編輯界面上。

作為一種可實施方式，所述在發(fā)布網(wǎng)頁時，讀取存儲的所述huar格式的網(wǎng)頁數(shù)據(jù)進行解析和輪轉(zhuǎn)分析，生成網(wǎng)頁數(shù)據(jù)文件，包括以下步驟：

響應(yīng)于發(fā)布網(wǎng)頁操作，讀取存儲的所述huar格式的網(wǎng)頁數(shù)據(jù)；

對所述huar格式的網(wǎng)頁數(shù)據(jù)中的描述內(nèi)容元素的信息按照排版順序進行抽取、重組，生成按照文檔流結(jié)構(gòu)組成的HTML數(shù)據(jù)；

對所述huar格式的網(wǎng)頁數(shù)據(jù)中的描述樣式的信息進行公用提取和格式轉(zhuǎn)換，生成低冗余度的CSS數(shù)據(jù)；

對所述huar格式的網(wǎng)頁數(shù)據(jù)中的描述行為和腳本的信息進行抽取并轉(zhuǎn)換成JavaScript腳本數(shù)據(jù)。

本發(fā)明提供的網(wǎng)頁制作方法，還包括以下步驟：

獲取用戶身份信息，將所述用戶身份信息與生成的所述huar格式的網(wǎng)頁數(shù)據(jù)對應(yīng)存儲；

在發(fā)布網(wǎng)頁時，響應(yīng)于用戶的登錄操作，獲取當(dāng)前登錄用戶的所述用戶身份信息；

根據(jù)所述用戶身份信息，讀取存儲的與所述用戶身份信息對應(yīng)的所述huar格式的網(wǎng)頁數(shù)據(jù)，進行解析和輪轉(zhuǎn)分析，生成網(wǎng)頁數(shù)據(jù)文件。

相應(yīng)地，本發(fā)明還提供一種網(wǎng)頁制作系統(tǒng)，包括網(wǎng)頁數(shù)據(jù)存儲模塊、網(wǎng)頁數(shù)據(jù)讀取模塊以及網(wǎng)頁發(fā)布模塊；

所述網(wǎng)頁數(shù)據(jù)存儲模塊，用于響應(yīng)于編輯界面中的網(wǎng)頁制作和編輯操作，生成描述網(wǎng)頁內(nèi)容和樣式的huar格式的網(wǎng)頁數(shù)據(jù)并進行存儲；

所述網(wǎng)頁數(shù)據(jù)讀取模塊，用于在發(fā)布網(wǎng)頁時，讀取所述網(wǎng)頁數(shù)據(jù)存儲模塊存儲的所述huar格式的網(wǎng)頁數(shù)據(jù)進行解析和輪轉(zhuǎn)分析，生成網(wǎng)頁數(shù)據(jù)文件；

所述網(wǎng)頁發(fā)布模塊，用于將所述網(wǎng)頁數(shù)據(jù)讀取模塊生成的所述網(wǎng)頁數(shù)據(jù)文件通過文件傳輸協(xié)議或數(shù)據(jù)傳輸協(xié)議傳送到目標線上服務(wù)器進行發(fā)布。

作為一種可實施方式，所述網(wǎng)頁數(shù)據(jù)存儲模塊包括界面編輯單元、操作信息檢測單元、網(wǎng)頁數(shù)據(jù)生成單元以及存儲單元；

所述界面編輯單元，用于提供編輯界面；

所述操作信息檢測單元，用于響應(yīng)于所述界面編輯單元提供的編輯界面中的網(wǎng)頁制作和編輯操作，檢測用戶創(chuàng)建網(wǎng)頁的內(nèi)容以及樣式的操作信息；

所述網(wǎng)頁數(shù)據(jù)生成單元，用于基于所述操作信息檢測單元檢測到的所述操作信息，生成描述網(wǎng)頁內(nèi)容和樣式的所述huar格式的網(wǎng)頁數(shù)據(jù)；

所述存儲單元，用于存儲所述網(wǎng)頁數(shù)據(jù)生成單元生成的所述huar格式的網(wǎng)頁數(shù)據(jù)。

本發(fā)明提供的網(wǎng)頁制作系統(tǒng)，還包括顯示模塊；

所述顯示模塊，用于對所述網(wǎng)頁數(shù)據(jù)生成單元生成的所述huar格式的網(wǎng)頁數(shù)據(jù)進行解析，根據(jù)解析后的數(shù)據(jù)生成對應(yīng)的網(wǎng)頁，實時顯示在所述編輯界面上。

作為一種可實施方式，所述網(wǎng)頁數(shù)據(jù)讀取模塊包括數(shù)據(jù)讀取單元、HTML數(shù)據(jù)生成單元、CSS數(shù)據(jù)生成單元以及JavaScript腳本數(shù)據(jù)生成單元；

所述數(shù)據(jù)讀取單元，用于響應(yīng)于發(fā)布網(wǎng)頁操作，讀取存儲的所述huar格式的網(wǎng)頁數(shù)據(jù)；

HTML數(shù)據(jù)生成單元，用于對所述數(shù)據(jù)讀取單元讀取的所述huar格式的網(wǎng)頁數(shù)據(jù)中的描述內(nèi)容元素的信息按照排版順序進行抽取、重組，生成按照文檔流結(jié)構(gòu)組成的HTML數(shù)據(jù)；

所述CSS數(shù)據(jù)生成單元，用于對所述數(shù)據(jù)讀取單元讀取的所述huar格式的網(wǎng)頁數(shù)據(jù)中的描述樣式的信息進行公用提取和格式轉(zhuǎn)換，生成低冗余度的CSS數(shù)據(jù)；

所述JavaScript腳本數(shù)據(jù)生成單元，用于對所述數(shù)據(jù)讀取單元讀取的所述huar格式的網(wǎng)頁數(shù)據(jù)中的描述行為和腳本的信息進行抽取并轉(zhuǎn)換成JavaScript腳本數(shù)據(jù)。

相應(yīng)地，本發(fā)明還提供一種網(wǎng)頁制作系統(tǒng)，包括用戶管理子系統(tǒng)、前端編輯引擎、網(wǎng)頁描述數(shù)據(jù)生成器、網(wǎng)頁存儲管理子系統(tǒng)、網(wǎng)頁數(shù)據(jù)文件生成器以及發(fā)布上線子系統(tǒng)；

所述用戶管理子系統(tǒng)，用于提供用戶登錄界面，獲取用戶身份信息；

所述前端編輯引擎，連接所述用戶管理子系統(tǒng)，用于向已登陸用戶提供編輯界面，并響應(yīng)于編輯界面中的網(wǎng)頁制作和編輯操作，檢測用戶創(chuàng)建網(wǎng)頁的內(nèi)容以及樣式的操作信息；

所述網(wǎng)頁描述數(shù)據(jù)生成器，連接所述前端編輯引擎，用于根據(jù)所述操作信息生成描述網(wǎng)頁內(nèi)容和樣式的huar格式的網(wǎng)頁數(shù)據(jù)，并將其發(fā)送至所述網(wǎng)頁存儲管理子系統(tǒng)；

網(wǎng)頁存儲管理子系統(tǒng)，連接所述用戶管理子系統(tǒng)和所述網(wǎng)頁描述數(shù)據(jù)生成器，用于將所述用戶身份信息與生成的所述huar格式的網(wǎng)頁數(shù)據(jù)對應(yīng)存儲；

網(wǎng)頁數(shù)據(jù)文件生成器，連接所述網(wǎng)頁存儲管理子系統(tǒng)，用于在發(fā)布網(wǎng)頁時，從所述網(wǎng)頁存儲管理子系統(tǒng)中讀取所述網(wǎng)頁數(shù)據(jù)存儲模塊存儲的所述huar格式的網(wǎng)頁數(shù)據(jù)進行解析和輪轉(zhuǎn)分析，生成網(wǎng)頁數(shù)據(jù)文件；

發(fā)布上線子系統(tǒng)，連接所述網(wǎng)頁數(shù)據(jù)文件生成器，用于從所述網(wǎng)頁數(shù)據(jù)文件生成器中獲取所述網(wǎng)頁數(shù)據(jù)文件，并通過文件傳輸協(xié)議或數(shù)據(jù)傳輸協(xié)議傳送到目標線上服務(wù)器進行發(fā)布。

本發(fā)明相比于現(xiàn)有技術(shù)的有益效果在于：

本發(fā)明提供的網(wǎng)頁制作方法及系統(tǒng)，在用戶進行網(wǎng)頁制作的時候，將用戶進行每一步網(wǎng)頁制作和編輯的具體操作數(shù)據(jù)記錄下來，在需要發(fā)布網(wǎng)頁的時候，通過將操作數(shù)據(jù)讀取并復(fù)現(xiàn)，從而實現(xiàn)在新的瀏覽器中即時制作出一個新的網(wǎng)頁。本發(fā)明通過整合制作和發(fā)布流程，優(yōu)化了網(wǎng)頁的制作上線和后續(xù)維護流程，從而降低了網(wǎng)頁的制作門檻，使得非計算機軟件開發(fā)專業(yè)人員亦可參與或獨立完成網(wǎng)頁的制作，降低了網(wǎng)頁制作成本，而且提升了網(wǎng)頁制作效率。

附圖說明

圖1為本發(fā)明實施例一提供網(wǎng)頁制作方法的流程示意圖；

圖2為本發(fā)明實施例二提供的網(wǎng)頁制作系統(tǒng)的結(jié)構(gòu)示意圖；

圖3為本發(fā)明實施例三提供的網(wǎng)頁制作系統(tǒng)的結(jié)構(gòu)示意圖。

具體實施方式

以下結(jié)合附圖，對本發(fā)明上述的和另外的技術(shù)特征和優(yōu)點進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明的部分實施例，而不是全部實施例。

請參閱圖1，本發(fā)明實施例一提供的網(wǎng)頁制作方法，包括以下步驟：

S100、響應(yīng)于編輯界面中的網(wǎng)頁制作和編輯操作，生成描述網(wǎng)頁內(nèi)容和樣式的huar格式的網(wǎng)頁數(shù)據(jù)并進行存儲；

S200、在發(fā)布網(wǎng)頁時，讀取存儲的huar格式的網(wǎng)頁數(shù)據(jù)進行解析和輪轉(zhuǎn)分析，生成網(wǎng)頁數(shù)據(jù)文件；

S300、將網(wǎng)頁數(shù)據(jù)文件通過文件傳輸協(xié)議或數(shù)據(jù)傳輸協(xié)議傳送到目標線上服務(wù)器進行發(fā)布。

上述實施例中，huar格式的網(wǎng)頁數(shù)據(jù)采用JSON數(shù)據(jù)格式，可用于描述網(wǎng)頁中包含的文本、圖像、音視頻等內(nèi)容，并描述各種內(nèi)容的寬高定位等布局信息和顏色、陰影、變形等樣式信息(包含編輯界面中所能創(chuàng)作的所有布局和樣式)，還可以存儲網(wǎng)頁運行所需引用的外部腳本(JavaScript)數(shù)據(jù)。

本發(fā)明實施例提供的網(wǎng)頁制作方法，在用戶進行網(wǎng)頁制作的時候，將用戶進行每一步網(wǎng)頁制作和編輯的具體操作數(shù)據(jù)記錄下來，在需要發(fā)布網(wǎng)頁的時候，通過將操作數(shù)據(jù)讀取并復(fù)現(xiàn)，從而實現(xiàn)在新的瀏覽器中即時制作出一個新的網(wǎng)頁。本發(fā)明通過整合制作和發(fā)布流程，大幅優(yōu)化了網(wǎng)頁的制作上線和后續(xù)維護流程，而且降低了網(wǎng)頁的制作門檻，使得非計算機軟件開發(fā)專業(yè)人員亦可參與或獨立完成網(wǎng)頁的制作工作。

本發(fā)明提供的網(wǎng)頁制作方法的運行和用戶操作在瀏覽器中的網(wǎng)頁上即可實現(xiàn)，其基于Web平臺，無論用戶使用Windows、OSX或Linux操作系統(tǒng)，都可使用本方法。無需安裝客戶端，不受系統(tǒng)兼容性影響，實現(xiàn)了真正的跨操作系統(tǒng)平臺運行，成本低且高效。

上述步驟S100具體可通過以下步驟實現(xiàn)：

S110、提供編輯界面；

S120、響應(yīng)于編輯界面中的網(wǎng)頁制作和編輯操作，檢測用戶創(chuàng)建網(wǎng)頁的內(nèi)容以及樣式的操作信息；

S130、基于操作信息，生成描述網(wǎng)頁內(nèi)容和樣式的huar格式的網(wǎng)頁數(shù)據(jù)；

S140、存儲huar格式的網(wǎng)頁數(shù)據(jù)。

首先，本方法需要給用戶提供一個編輯界面，用戶可通過該編輯界面來創(chuàng)建網(wǎng)頁的內(nèi)容和樣式，其中，樣式中包括了網(wǎng)頁的排版布局。接下來，在用戶進行網(wǎng)頁制作和編輯操作的同時，根據(jù)用戶操作實時生成用來描述網(wǎng)頁內(nèi)容和樣式的huar格式的數(shù)據(jù)并進行存儲。

進一步地，在步驟S130之后，還包括以下步驟：

S131、對生成的huar格式的網(wǎng)頁數(shù)據(jù)進行解析，根據(jù)解析后的數(shù)據(jù)生成對應(yīng)的網(wǎng)頁，實時顯示在編輯界面上。

對生成的huar格式的網(wǎng)頁數(shù)據(jù)進行解析后實時在編輯界面上展現(xiàn)為網(wǎng)頁作品，這樣用戶每進行一步編輯操作，都能即時看到在網(wǎng)頁上改動后的效果。如果效果不滿意，可以及時進行編輯修改，使得網(wǎng)頁編輯更加高效。

上述步驟S200具體可通過以下步驟實現(xiàn)：

S210、響應(yīng)于發(fā)布網(wǎng)頁操作，讀取存儲的huar格式的網(wǎng)頁數(shù)據(jù)；

S220、對huar格式的網(wǎng)頁數(shù)據(jù)中的描述內(nèi)容元素的信息按照排版順序進行抽取、重組，生成按照文檔流結(jié)構(gòu)組成的HTML數(shù)據(jù)；

S230、對huar格式的網(wǎng)頁數(shù)據(jù)中的描述樣式的信息進行公用提取和格式轉(zhuǎn)換，生成低冗余度的CSS數(shù)據(jù)；

S240、對huar格式的網(wǎng)頁數(shù)據(jù)中的描述行為和腳本的信息進行抽取并轉(zhuǎn)換成JavaScript腳本數(shù)據(jù)。

最終生成的HTML數(shù)據(jù)、CSS數(shù)據(jù)、JavaScript腳本數(shù)據(jù)及圖片和音視頻等均為網(wǎng)頁數(shù)據(jù)文件。上述解析轉(zhuǎn)換操作的原則是盡量模擬和趨近于網(wǎng)頁制作人員手動工作時生成的網(wǎng)頁數(shù)據(jù)文件的范式及慣例。

更進一步地，本發(fā)明實施例提供的網(wǎng)頁制作方法，還可以實現(xiàn)網(wǎng)頁定向管理。通過給每個用戶設(shè)立一個賬戶，每個賬戶有獨立的id，即使用戶從不同的客戶端登錄，也可根據(jù)其賬戶id查看、編輯、下載之前儲存的網(wǎng)頁編輯數(shù)據(jù)。

具體地實現(xiàn)過程如下：

在執(zhí)行步驟S100的過程中，獲取用戶身份信息，將用戶身份信息與生成的huar格式的網(wǎng)頁數(shù)據(jù)對應(yīng)存儲；

在執(zhí)行步驟S200的過程中，響應(yīng)于用戶的登錄操作，獲取當(dāng)前登錄用戶的用戶身份信息，然后根據(jù)用戶身份信息，讀取存儲的與用戶身份信息對應(yīng)的huar格式的網(wǎng)頁數(shù)據(jù)，進行解析和輪轉(zhuǎn)分析，生成網(wǎng)頁數(shù)據(jù)文件。

最后，執(zhí)行發(fā)布操作時，獲取生成的網(wǎng)頁數(shù)據(jù)文件，將其通過文件傳輸協(xié)議或數(shù)據(jù)傳輸協(xié)議(如FTP、SCP、HTTP等，多種可選)等方式傳送到目標線上服務(wù)器，實現(xiàn)發(fā)布。

基于同一發(fā)明構(gòu)思，本發(fā)明實施例二還提供了一種網(wǎng)頁制作系統(tǒng)，該系統(tǒng)與前述方法的原理相同，其實施可參照前述方法實現(xiàn)，重復(fù)之處不再冗述。

參見圖2，本發(fā)明實施例二提供的網(wǎng)頁制作系統(tǒng)包括網(wǎng)頁數(shù)據(jù)存儲模塊100、網(wǎng)頁數(shù)據(jù)讀取模塊200以及網(wǎng)頁發(fā)布模塊300。其中，網(wǎng)頁數(shù)據(jù)存儲模塊100用于響應(yīng)于編輯界面中的網(wǎng)頁制作和編輯操作，生成描述網(wǎng)頁內(nèi)容和樣式的huar格式的網(wǎng)頁數(shù)據(jù)并進行存儲；網(wǎng)頁數(shù)據(jù)讀取模塊200用于在發(fā)布網(wǎng)頁時，讀取網(wǎng)頁數(shù)據(jù)存儲模塊100存儲的huar格式的網(wǎng)頁數(shù)據(jù)進行解析和輪轉(zhuǎn)分析，生成網(wǎng)頁數(shù)據(jù)文件；網(wǎng)頁發(fā)布模塊300用于將網(wǎng)頁數(shù)據(jù)讀取模塊200生成的網(wǎng)頁數(shù)據(jù)文件通過文件傳輸協(xié)議或數(shù)據(jù)傳輸協(xié)議傳送到目標線上服務(wù)器進行發(fā)布。

網(wǎng)頁數(shù)據(jù)存儲模塊包括界面編輯單元、操作信息檢測單元、網(wǎng)頁數(shù)據(jù)生成單元以及存儲單元。界面編輯單元用于提供編輯界面；操作信息檢測單元用于響應(yīng)于界面編輯單元提供的編輯界面中的網(wǎng)頁制作和編輯操作，檢測用戶創(chuàng)建網(wǎng)頁的內(nèi)容以及樣式的操作信息；網(wǎng)頁數(shù)據(jù)生成單元用于基于操作信息檢測單元檢測到的操作信息，生成描述網(wǎng)頁內(nèi)容和樣式的huar格式的網(wǎng)頁數(shù)據(jù)；存儲單元用于存儲網(wǎng)頁數(shù)據(jù)生成單元生成的huar格式的網(wǎng)頁數(shù)據(jù)。

進一步地，本發(fā)明實施例二提供的網(wǎng)頁制作系統(tǒng)，還包括顯示模塊。顯示模塊用于對網(wǎng)頁數(shù)據(jù)生成單元生成的huar格式的網(wǎng)頁數(shù)據(jù)進行解析，根據(jù)解析后的數(shù)據(jù)生成對應(yīng)的網(wǎng)頁，實時顯示在編輯界面上。

網(wǎng)頁數(shù)據(jù)讀取模塊包括數(shù)據(jù)讀取單元、HTML數(shù)據(jù)生成單元、CSS數(shù)據(jù)生成單元以及JavaScript腳本數(shù)據(jù)生成單元。其中，數(shù)據(jù)讀取單元用于響應(yīng)于發(fā)布網(wǎng)頁操作，讀取存儲的huar格式的網(wǎng)頁數(shù)據(jù)；HTML數(shù)據(jù)生成單元用于對數(shù)據(jù)讀取單元讀取的huar格式的網(wǎng)頁數(shù)據(jù)中的描述內(nèi)容元素的信息按照排版順序進行抽取、重組，生成按照文檔流結(jié)構(gòu)組成的HTML數(shù)據(jù)；CSS數(shù)據(jù)生成單元用于對數(shù)據(jù)讀取單元讀取的huar格式的網(wǎng)頁數(shù)據(jù)中的描述樣式的信息進行公用提取和格式轉(zhuǎn)換，生成低冗余度的CSS數(shù)據(jù)；JavaScript腳本數(shù)據(jù)生成單元，用于對數(shù)據(jù)讀取單元讀取的huar格式的網(wǎng)頁數(shù)據(jù)中的描述行為和腳本的信息進行抽取并轉(zhuǎn)換成JavaScript腳本數(shù)據(jù)。

上述網(wǎng)頁數(shù)據(jù)存儲模塊，還用于獲取用戶身份信息，并將用戶身份信息與生成的huar格式的網(wǎng)頁數(shù)據(jù)對應(yīng)存儲。

上述網(wǎng)頁數(shù)據(jù)讀取模塊，還用于在發(fā)布網(wǎng)頁時，響應(yīng)于用戶的登錄操作，獲取當(dāng)前登錄用戶的用戶身份信息，并根據(jù)用戶身份信息，讀取存儲的與用戶身份信息對應(yīng)的huar格式的網(wǎng)頁數(shù)據(jù)，進行解析和輪轉(zhuǎn)分析，生成網(wǎng)頁數(shù)據(jù)文件。

參見圖3，本發(fā)明實施例三提供的網(wǎng)頁制作系統(tǒng)，包括用戶管理子系統(tǒng)10、前端編輯引擎20、網(wǎng)頁描述數(shù)據(jù)生成器30、網(wǎng)頁存儲管理子系統(tǒng)40、網(wǎng)頁數(shù)據(jù)文件生成器50以及發(fā)布上線子系統(tǒng)60。

用戶管理子系統(tǒng)10用于提供用戶登錄界面，獲取用戶身份信息，并將其發(fā)送至前端編輯引擎20。用戶可通過用戶管理子系統(tǒng)來注冊并登錄進入本系統(tǒng)的前端編輯引擎20。進一步地，每一個用戶可以通過用戶管理子系統(tǒng)注冊自己的賬戶，每個賬戶有獨立的id，即使從不同的客戶端登錄，用戶也可根據(jù)賬戶id查看、編輯、下載之前儲存的網(wǎng)頁編輯數(shù)據(jù)。

前端編輯引擎20給用戶提供編輯界面，用戶可通過前端編輯引擎20來創(chuàng)建網(wǎng)頁的內(nèi)容和樣式。

用戶在和前端編輯引擎20交互的同時，前端編輯引擎20會和網(wǎng)頁描述數(shù)據(jù)生成器30不斷交互，網(wǎng)頁描述數(shù)據(jù)生成器30根據(jù)用戶操作信息實時生成用來描述網(wǎng)頁內(nèi)容和樣式的huar格式的網(wǎng)頁數(shù)據(jù)。

網(wǎng)頁描述數(shù)據(jù)生成器30生成的huar格式的網(wǎng)頁數(shù)據(jù)可以實時回傳給前端編輯引擎20，經(jīng)前端編輯引擎20解析后實時在編輯界面上展現(xiàn)為網(wǎng)頁。這樣，用戶每進行一步編輯操作，都能即時在前端編輯引擎20中看到在網(wǎng)頁上改動后的效果。

網(wǎng)頁存儲管理子系統(tǒng)40用于儲存記錄用戶的操作數(shù)據(jù)、創(chuàng)建和維護其修改記錄、發(fā)布記錄等信息，并負責(zé)維護其與用戶的關(guān)系等數(shù)據(jù)。用戶執(zhí)行保存操作時，網(wǎng)頁描述數(shù)據(jù)生成器30將huar格式的網(wǎng)頁數(shù)據(jù)傳給網(wǎng)頁存儲管理子系統(tǒng)40，網(wǎng)頁存儲管理子系統(tǒng)40將huar格式的網(wǎng)頁數(shù)據(jù)與在用戶管理子系統(tǒng)10登錄的賬號id匹配后存儲到后臺數(shù)據(jù)庫。

網(wǎng)頁數(shù)據(jù)文件生成器50從網(wǎng)頁存儲管理子系統(tǒng)40中取得對應(yīng)的huar格式的網(wǎng)頁數(shù)據(jù)，對其進行解析和輪轉(zhuǎn)分析：將其中描述內(nèi)容元素的信息按照排版順序進行抽取、重組、輸出一種按照文檔流結(jié)構(gòu)組成的HTML數(shù)據(jù)；將其中描述樣式的信息進行公用提取和格式轉(zhuǎn)換，輸出一種低冗余度的CSS數(shù)據(jù)；將其中描述行為和腳本的信息抽取轉(zhuǎn)換為JavaScript腳本數(shù)據(jù)；最終生成HTML、CSS、JS及圖片(png/jpg/gif)和音、視頻等網(wǎng)頁數(shù)據(jù)文件。

上述解析轉(zhuǎn)換操作的原則是盡量模擬和趨近于網(wǎng)頁制作人員手工工作時產(chǎn)出的HTML網(wǎng)頁數(shù)據(jù)的范式及慣例。

用戶執(zhí)行發(fā)布操作時，發(fā)布上線子系統(tǒng)60取得網(wǎng)頁數(shù)據(jù)文件生成器50生成的網(wǎng)頁數(shù)據(jù)文件，將其通過文件傳輸協(xié)議或數(shù)據(jù)傳輸協(xié)議(如FTP、SCP、HTTP等，多種可選)等方式傳送到目標線上服務(wù)器。

本系統(tǒng)基于Web平臺，無論用戶使用Windows、OSX或Linux操作系統(tǒng)，都可使用本軟件，無需安裝，只要用現(xiàn)代瀏覽器(Chrome、Safari、Firefox或Edge)打開網(wǎng)址便可，實現(xiàn)真正的跨操作系統(tǒng)平臺運行。該系統(tǒng)降低了網(wǎng)頁的制作門檻，使得非計算機軟件開發(fā)專業(yè)人員亦可參與或獨立完成網(wǎng)頁的制作工作，降低了人工成本，大幅優(yōu)化了網(wǎng)頁的制作上線和后續(xù)維護流程，提升了網(wǎng)頁制作和維護效率。

進一步地，在上述實施例中，為了實現(xiàn)網(wǎng)頁編輯，前端編輯引擎還可以提供如下功能供用戶進行操作處理：

1.前端編輯引擎包含工具欄、舞臺、調(diào)板和拾色器等板塊或組件；

2.結(jié)合工具欄和調(diào)板，可在舞臺中創(chuàng)建文本、矩形、圓形、直線、圖案、表格、音視頻等基本元素；

3.鼠標點擊基本元素，可在元素上創(chuàng)建選中腳手架，通過拖移腳手架可修改元素在頁面中的位置，通過拖移腳手架的控制點可以修改元素的寬高；

4.同時，調(diào)板會根據(jù)選中元素類型自動切換到對應(yīng)的調(diào)板類型，在調(diào)板中可修改當(dāng)前選中元素的位置、寬度、高度、顏色、透明度、旋轉(zhuǎn)角度、字體樣式、背景顏色、背景透明度、邊框樣式、邊框粗細、圓角弧度、陰影樣式、陰影角度、陰影顏色、陰影透明度、陰影模糊度、陰影偏移度、對齊方式等等；

5.通過調(diào)板可在調(diào)手架中調(diào)出更多控制點，然后可用拖移控制點的感性的方式來修改弧度、角度等；

6.針對表格元素，通過調(diào)板還可修改其行數(shù)或列數(shù)；

7.如上所述樣式的修改均會在舞臺中對應(yīng)元素上產(chǎn)生實時的樣式變動或視覺反饋；

8.結(jié)合Ctrl/Command和Shift鍵的鼠標點擊可在舞臺上選中多個元素，此時可通過調(diào)板批量修改顏色、字體等樣式，可對多個元素進行左右對齊、上下對齊、平均間距等排版操作；

9.選中元素后，Ctrl/Command+C可復(fù)制元素，然后粘貼到其他位置，或其他頁面；

10.用鼠標右鍵單擊元素，可調(diào)出右鍵菜單，可修改元素的Z軸順序(z-index)，針對表格，可對其執(zhí)行合并單元格操作；

11.在拾色器中，可通過HSB或RGB方式取色，也可通過鼠標點擊在色調(diào)條和飽和度與亮度板中取色，可設(shè)置顏色的半透明度，或選取全透明色；

12.另外，前端編輯引擎還支持撤銷和重做操作，無論是編輯文本、修改位置或樣式，均可通過工具欄按鈕或鍵盤快捷鍵Ctrl/Cmd+Z來撤銷，支持多次撤銷，撤銷后還可通過工具欄按鈕或鍵盤快捷鍵Ctrl/Cmd+Shift+Z重做回來，支持多次重做。

以上所述的具體實施例，對本發(fā)明的目的、技術(shù)方案和有益效果進行了進一步的詳細說明，應(yīng)當(dāng)理解，以上所述僅為本發(fā)明的具體實施例而已，并不用于限定本發(fā)明的保護范圍。特別指出，對于本領(lǐng)域技術(shù)人員來說，凡在本發(fā)明的精神和原則之內(nèi)，所做的任何修改、等同替換、改進等，均應(yīng)包含在本發(fā)明的保護范圍之內(nèi)。