網(wǎng)頁制作方法及其系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及網(wǎng)絡(luò)技術(shù)領(lǐng)域，尤其涉及一種能夠靈活、快速地自定義編輯網(wǎng)頁元素的網(wǎng)頁制作方法及其系統(tǒng)。
【背景技術(shù)】
[0002]近年來，隨著計算機的普及和互聯(lián)網(wǎng)的蓬勃發(fā)展，各種應(yīng)用服務(wù)紛紛與互聯(lián)網(wǎng)進行結(jié)合，例如:網(wǎng)絡(luò)購物、網(wǎng)絡(luò)論壇、網(wǎng)絡(luò)應(yīng)用軟件、在線管理系統(tǒng)等等。而這些應(yīng)用服務(wù)都是以網(wǎng)頁的方式進行呈現(xiàn)。網(wǎng)頁是由多種網(wǎng)頁元素組成，例如:文字、圖片、音頻、動畫、視頻、文字等。實質(zhì)上，網(wǎng)頁是一種超級文本標(biāo)記語言(HTML)，通過結(jié)合其它網(wǎng)絡(luò)技術(shù)(例如:JavaScript腳本語言、公共網(wǎng)關(guān)接口、組件等)來生成功能強大的網(wǎng)頁。
[0003]目前，主要有兩種網(wǎng)頁制作方案:直接編碼和定制模板。直接編碼是指網(wǎng)頁開發(fā)人員通過手動敲入邏輯代碼生成網(wǎng)頁對應(yīng)的網(wǎng)頁源代碼來完成網(wǎng)頁的制作;定制模板是指網(wǎng)頁開發(fā)人員將相同的功能以模塊化的方式撰寫成程序?qū)ο?，之后在需要此功能時，直接引用相應(yīng)程序?qū)ο髞頊p少人工輸入代碼。然而，這兩種網(wǎng)頁制作方案都僅限于具有編寫代碼能力的網(wǎng)頁開發(fā)人員對網(wǎng)頁進行制作，而不適合普通的無編寫代碼能力的網(wǎng)頁制作者，因此不具有普適性。特別地，第一種網(wǎng)頁制作方案不僅需要耗費大量的人力物力，由于完全依靠開發(fā)人員手動敲入代碼，因此編寫出的網(wǎng)頁源代碼易出現(xiàn)錯誤而無法制作出理想的網(wǎng)頁；而第二種網(wǎng)頁制作方案雖然可以減少網(wǎng)頁開發(fā)人員的工作量，但是這種引入相應(yīng)程序?qū)ο蟮姆绞綗o法任意選擇欲使用的程序?qū)ο螅⑶疫€可能存在沒有所需的程序?qū)ο蟮膯栴}，因此仍然無法改善網(wǎng)頁設(shè)計不方便的問題。
[0004]在現(xiàn)有技術(shù)中也有不少對于網(wǎng)頁制作方法的改進嘗試。例如，在專利申請“網(wǎng)頁制作支持系統(tǒng)、設(shè)備、方法、計算機程序和記錄介質(zhì)”(申請?zhí)?CN01804071.3)中記載的，網(wǎng)頁制作支持服務(wù)器理與模板信息相關(guān)的、并存儲于客戶終端裝置中的網(wǎng)頁信息，和使得制作人終端裝置響應(yīng)于來自客戶終端裝置的制作請求，根據(jù)模板信息去制作網(wǎng)頁信息，由此提供其中在網(wǎng)絡(luò)上能夠容易地實現(xiàn)網(wǎng)頁制作的一種環(huán)境。然而，這種技術(shù)方案依賴網(wǎng)頁模板，必須有上網(wǎng)條件，而且其最后的網(wǎng)絡(luò)制作環(huán)境的好壞也依賴于網(wǎng)絡(luò)帶寬的影響。
[0005 ]此外，例如在專利申請“網(wǎng)頁制作的方法和系統(tǒng)，客戶端、服務(wù)端”(申請?zhí)?CN201010151678.1)中記載的，通過預(yù)設(shè)具有可視化效果并且采用腳本語言進行標(biāo)準(zhǔn)化封裝的組件，使得在網(wǎng)頁制作的過程中，能夠利用統(tǒng)一的接口對組件進行參數(shù)配置，減少了模板代碼編寫過程中非標(biāo)準(zhǔn)代碼的產(chǎn)生，便于提高代碼的重復(fù)利用率和正確率。然而，這種技術(shù)方案是針對網(wǎng)頁組件，需要修改對網(wǎng)頁組件的配置參數(shù)，對于沒有網(wǎng)頁制作基礎(chǔ)的用戶來說不好使用。
[0006]由此可見，如何快速并且方便地開發(fā)網(wǎng)頁已成為亟待解決的問題。因此，需要一種改進的網(wǎng)頁制作方法及其系統(tǒng)。

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

[0007]本發(fā)明的主要目的在于提供一種改進的網(wǎng)頁制作方法及其系統(tǒng)，以便快速并且方便地開發(fā)網(wǎng)頁。
[0008]為實現(xiàn)上述目的，本發(fā)明提供一種網(wǎng)頁制作方法，包括:加載網(wǎng)頁制作系統(tǒng)的界面窗口，其中所述界面窗口中包括對網(wǎng)頁進行設(shè)置的多個選項;通過對所述界面窗口中的所述多個選項的配置，選擇并且顯示網(wǎng)頁元素和對應(yīng)的代碼;根據(jù)所述對應(yīng)的代碼的幫助信息，自定義編輯代碼；以及顯示對應(yīng)于所述自定義編輯代碼的網(wǎng)頁元素的網(wǎng)頁效果。
[0009]進一步地，通過對所述界面窗口中的所述多個選項的配置，選擇并且顯示網(wǎng)頁元素和對應(yīng)的代碼的所述步驟包括:通過對所述界面窗口中的所述多個選項的配置，選擇所述網(wǎng)頁元素并且顯示對應(yīng)于所述網(wǎng)頁元素的網(wǎng)頁效果；以及顯示對應(yīng)于所述網(wǎng)頁元素的代碼。
[0010]進一步地，根據(jù)所述對應(yīng)的代碼的幫助信息，自定義編輯代碼的所述步驟包括:顯示所述對應(yīng)的代碼的幫助信息;根據(jù)所述對應(yīng)的代碼的幫助信息，自定義編輯代碼；以及生成對應(yīng)于所述自定義編輯代碼的網(wǎng)頁元素。
[0011]進一步地，所述網(wǎng)頁制作方法還包括:將所述對應(yīng)的代碼復(fù)制到暫存器。
[0012]進一步地，所述幫助信息包括所述代碼的使用方法和定義說明。
[0013]本發(fā)明還提供一種網(wǎng)頁制作系統(tǒng)，包括:界面窗口加載模塊，配置為加載所述網(wǎng)頁制作系統(tǒng)的界面窗口，其中所述界面窗口中包括對網(wǎng)頁進行設(shè)置的多個選項；網(wǎng)頁元素選擇與顯示模塊，配置為通過對所述界面窗口中的所述多個選項的配置，選擇并且顯示網(wǎng)頁元素和對應(yīng)的代碼;幫助模塊，配置為顯示所述對應(yīng)的代碼的幫助信息；以及代碼自定義模塊，耦合于所述幫助模塊以及所述網(wǎng)頁元素選擇與顯示模塊，配置為根據(jù)所述幫助信息來自定義編輯代碼，其中所述網(wǎng)頁元素選擇與顯示模塊還配置為顯示對應(yīng)于所述自定義編輯代碼的網(wǎng)頁元素的網(wǎng)頁效果。
[0014]進一步地，所述網(wǎng)頁元素選擇與顯示模塊配置為:通過對所述界面窗口中的所述多個選項的配置，選擇所述網(wǎng)頁元素并且顯示對應(yīng)于所述網(wǎng)頁元素的網(wǎng)頁效果；以及顯示對應(yīng)于所述網(wǎng)頁元素的代碼。
[0015]進一步地，所述代碼自定義模塊配置為:根據(jù)所述對應(yīng)的代碼的幫助信息，自定義編輯代碼；以及生成對應(yīng)于所述自定義編輯代碼的網(wǎng)頁元素。
[0016]進一步地，所述網(wǎng)頁制作系統(tǒng)還包括:代碼暫存模塊，耦合于所述網(wǎng)頁元素選擇與顯示模塊，配置為復(fù)制并且暫存所述對應(yīng)的代碼。
[0017]進一步地，所述幫助信息包括所述代碼的使用方法和定義說明。
[0018]本發(fā)明所提供的網(wǎng)頁制作方法及其系統(tǒng)能夠靈活、快速地自定義編輯網(wǎng)頁元素。對于沒有任何網(wǎng)頁制作基礎(chǔ)的人員來說能夠滿足其快速使用網(wǎng)頁元素的需要，減少學(xué)習(xí)的時間及成本。對于有一定基礎(chǔ)的人員來說可以減少編碼量和開發(fā)時間，提高代碼的重復(fù)利用率進而提高開發(fā)效率。對于有網(wǎng)頁制作基礎(chǔ)的團隊來說，可以通過擴展提供網(wǎng)頁組件或模板式的支持，便于提高代碼的重復(fù)利用率和正確率，形成統(tǒng)一的開發(fā)風(fēng)格。
【附圖說明】
[0019]圖1為本發(fā)明實施例提供的一種網(wǎng)頁制作方法的流程示意圖；
[0020]圖2為本發(fā)明實施例提供的另一種網(wǎng)頁制作方法的流程示意圖；
[0021]圖3為本發(fā)明實施例提供的一種網(wǎng)頁制作系統(tǒng)的結(jié)構(gòu)示意圖；
[0022]圖4為本發(fā)明實施例提供的另一種網(wǎng)頁制作系統(tǒng)的結(jié)構(gòu)示意圖；
[0023]圖5為本發(fā)明實施例提供的一種網(wǎng)頁制作系統(tǒng)的主界面示意圖；以及
[0024]圖6為本發(fā)明實施例提供的一種用于自定義編輯代碼的界面示意圖。
[0025]本發(fā)明的實現(xiàn)、功能特點及優(yōu)點將結(jié)合實施例，參照附圖作進一步說明。
【具體實施方式】
[0026]以下結(jié)合說明書附圖對本發(fā)明的優(yōu)選實施例進行說明，應(yīng)當(dāng)理解，此處所描述的優(yōu)選實施例僅用于說明和解釋本發(fā)明，并不用于限定本發(fā)明，并且在不沖突的情況下，本發(fā)明中的實施例及實施例中的特征可以相互組合。
[0027]圖1為本發(fā)明實施例提供的一種網(wǎng)頁制作方法100的流程示意圖。如圖1所示，網(wǎng)頁制作方法100包括以下步驟:
[0028]在步驟102中，加載網(wǎng)頁制作系統(tǒng)的界面窗口，其中界面窗口中包括對網(wǎng)頁進行設(shè)置的多個選項。圖5為本發(fā)明實施例提供的一種網(wǎng)頁制作系統(tǒng)的主界面示意圖。如圖5所示，主界面內(nèi)可包含文本(text)、文本區(qū)域(text area)、按鈕(button)、超鏈接(hyperlink)、復(fù)選框(checkbox)、下拉框(select)、多選下拉框(multiple select)、圖像(image)、音頻(aud1)、視頻(video)、顯示效果、代碼、復(fù)制到剪貼板、幫助、自定義等多個選項，以便網(wǎng)頁開發(fā)者進行合適的配置。請注意，圖5中的選項數(shù)量、類別和布局設(shè)置僅為示例性而非本發(fā)明的限制。相反地，本領(lǐng)域技術(shù)人員在閱讀本申請之后可容易改用其它合適的選項數(shù)量、類別和布局設(shè)置。
[0029]在步驟104中，通過對界面窗口中的多個選項的配置，選擇并且顯示網(wǎng)頁元素和對應(yīng)的代碼。再次結(jié)合圖5來看，網(wǎng)頁開發(fā)者可在主界面的網(wǎng)頁元素選擇區(qū)域用鼠標(biāo)等設(shè)備來配置各選項從而選擇所需的網(wǎng)頁元素，并且在主界面內(nèi)(例如，右側(cè))顯示該網(wǎng)頁元素的效果和對應(yīng)的代碼。在一個實施例中，顯示網(wǎng)頁元素的效果是通過以下方法來實現(xiàn):當(dāng)網(wǎng)頁開發(fā)者長按鼠標(biāo)(例如，左鍵)并且拖動鼠標(biāo)時，通過JavaScript腳本復(fù)制一個所選中網(wǎng)頁元素，該網(wǎng)頁元素會跟著鼠標(biāo)的移動而移動。當(dāng)判斷出該復(fù)制的網(wǎng)頁元素跨過主界面左邊的網(wǎng)頁元素配置區(qū)域來到主界面右側(cè)的顯示效果區(qū)域時，顯示該網(wǎng)頁元素的效果。在一個實施例中，顯示該網(wǎng)頁元素的對應(yīng)代碼是通過以下方法來實現(xiàn):通過JavaScript腳本將所復(fù)制的網(wǎng)頁元素對應(yīng)的HTML代碼(例如:〈input type= “text”name= “text”value= ‘°’/>)顯示在主界面右側(cè)的顯示代碼區(qū)域。
[0030]在步驟106中，根據(jù)對應(yīng)的代碼的幫助信息，自定義編輯代碼。例如，當(dāng)網(wǎng)頁開發(fā)者點擊主界面中的“幫助”按鈕時，可通過JavaScript腳本彈出與所顯示代碼對應(yīng)的代碼的使用方法和定義說明(即，對應(yīng)的代碼的幫助信息)。隨后，網(wǎng)頁開發(fā)者可點擊主界面中的“自定義”按鈕，進入自定義編輯代碼的界面(可參考圖6)。如圖6所示，自定義編輯代碼的界面分為左右兩部分，左側(cè)為網(wǎng)頁開發(fā)者嘗試自定義編輯代碼的區(qū)域，右側(cè)為顯示自定義編輯結(jié)果的區(qū)域。網(wǎng)頁開發(fā)者可根據(jù)該幫助信息來輸入自定義網(wǎng)頁元素的代碼，確認提交后在右側(cè)顯示自定義編輯結(jié)果。即，在步驟108，顯示對應(yīng)于自定義編輯代碼的網(wǎng)頁元素的網(wǎng)頁效果。在一個實施例中，在網(wǎng)頁開發(fā)者點擊提交按鈕之前，自定義編輯區(qū)域的代碼內(nèi)容會被自動傳到后臺數(shù)據(jù)庫進行保存，以便后續(xù)重新加載。當(dāng)后續(xù)重新加載頁面時，從后臺獲取之前保存的代碼并用來替換自定義編輯代碼的界面中所顯示生成自定義網(wǎng)頁元素的innerHTML內(nèi)容，從而顯示自定義網(wǎng)頁元素及其樣式。如果網(wǎng)頁開發(fā)者不滿意該效果，可繼續(xù)重復(fù)自定義編輯代碼和提交顯示結(jié)果的操作，直至網(wǎng)頁開發(fā)者滿意為止。
[0031]請注意，圖5和圖6中的界面樣式僅為示例性而非本發(fā)明的限制。相反地，本領(lǐng)域技術(shù)人員在閱讀本申請之后可容易改用其它合適的界面樣式。例如，圖5中的選項數(shù)量、類別和布局設(shè)置可改變。圖6中的“試一試”窗口可拆分為HTML編輯區(qū)域、CSS編輯區(qū)域、JS編輯區(qū)域等。HTML編輯區(qū)域可用于編輯網(wǎng)頁元素的結(jié)構(gòu)，CSS編輯區(qū)域可用于編輯網(wǎng)頁元素的樣式，JS編輯區(qū)域可用于編輯網(wǎng)頁元素的交互動作。
[