前言：尋找寫作靈感？中文期刊網(wǎng)用心挑選的Web模塊化下網(wǎng)頁設(shè)計分析，希望能為您的閱讀和創(chuàng)作帶來靈感，歡迎大家閱讀并分享。
摘要：就當(dāng)下web在網(wǎng)頁設(shè)計開發(fā)的現(xiàn)狀進(jìn)行分析，在組織信息的過程中參考的基本單位即為網(wǎng)頁，在傳統(tǒng)設(shè)計方式之下，會導(dǎo)致Web應(yīng)用開發(fā)效率不高，增大后期維護(hù)任務(wù)量。本研究主要結(jié)合Web在網(wǎng)頁設(shè)計開發(fā)過程中出現(xiàn)的問題，構(gòu)建出模塊化網(wǎng)頁設(shè)計方式，并進(jìn)行模塊化網(wǎng)頁瀏覽，從而使開發(fā)效率得到提升，減輕維護(hù)任務(wù)。
關(guān)鍵詞：Web；模塊化；網(wǎng)頁設(shè)計；瀏覽技術(shù)
借助Web的模塊化網(wǎng)頁設(shè)計技術(shù)，能夠有效維護(hù)、組織信息，明顯優(yōu)于傳統(tǒng)設(shè)計方式，大大改善了Web應(yīng)用設(shè)計開發(fā)效率。而且在這種網(wǎng)頁設(shè)計技術(shù)的支持下，能夠?yàn)樵L問者的瀏覽提供便利，可以將關(guān)鍵信息呈現(xiàn)出來，全面提高了網(wǎng)頁瀏覽性能。
1Web模塊化的網(wǎng)頁設(shè)計
在開展程序設(shè)計工作時，一般都會將反復(fù)利用的程序制作為子模塊。在對程序段進(jìn)行運(yùn)用的過程中，僅需借助語句對子模塊進(jìn)行調(diào)用即可，這種設(shè)計方式應(yīng)用的就是模塊化程序設(shè)計理念。利用Web模塊化的設(shè)計方式，能夠確保開發(fā)程序的設(shè)計任務(wù)不會過于繁重，也有效降低了程序錯誤問題的發(fā)生。如果需要改動程序功能，僅需對相關(guān)子模塊進(jìn)行修改，不必要完全修改程序，由此減輕了維護(hù)、修改網(wǎng)頁程序的任務(wù)量。在不斷研究和分析眾多網(wǎng)頁之后，能夠得知網(wǎng)站內(nèi)的頁面中包括多種信息，而且相同信息的量也較多，包括：廣告、版權(quán)信息以及標(biāo)頭等。參考程序設(shè)計過程中所運(yùn)用的模塊化設(shè)計理念，將其運(yùn)用到網(wǎng)頁設(shè)計方面，由此形成了模塊化網(wǎng)頁設(shè)計基礎(chǔ)[1]。針對網(wǎng)頁開展模塊化設(shè)計，能夠使網(wǎng)頁開發(fā)設(shè)計任務(wù)量得到明顯的減輕，同時也容易對網(wǎng)站開展后期修改、維護(hù)等操作，從而更加高效化的組織信息，最終能夠達(dá)到使Web性能得到全面改善的效果。Web模塊化網(wǎng)頁設(shè)計的核心理念即為：基于Web，將基本單位設(shè)定為模塊，完成組織信息的操作。主模塊、多個子模塊共同組成了網(wǎng)頁，其中主模塊與程序主函數(shù)作用相同，可以將其視作網(wǎng)頁主干。程序必須具備主函數(shù)，同樣網(wǎng)站頁面也應(yīng)擁有其主模塊。從本質(zhì)上看，網(wǎng)頁主模塊像容器一樣，能夠?qū)ψ幽K進(jìn)行存放，也能夠?qū)Χ喾N頁面元素進(jìn)行存放，例如：圖片和文本等。而網(wǎng)頁子模塊的主要功能就是基本頁面元素進(jìn)行組織、存放，一般會將應(yīng)用率較高的元素制作為子模塊，會借助獨(dú)立模塊文件的方式來對子模塊進(jìn)行存放處理。對頁面進(jìn)行制作的過程中，利用子模塊能夠針對頁面元素開展相關(guān)操作，例如：刪除或插入等[2]。結(jié)合實(shí)際需求，還可以將其余子模塊嵌入到子模塊內(nèi)，進(jìn)行多層嵌套處理。通常認(rèn)為網(wǎng)頁包括腳注模塊、左/右導(dǎo)航模塊、主內(nèi)容模塊以及標(biāo)頭模塊五大子模塊，在這種網(wǎng)頁結(jié)構(gòu)下開展相關(guān)設(shè)計工作。網(wǎng)頁模塊結(jié)構(gòu)示意圖詳見下圖：在網(wǎng)站的網(wǎng)頁中，上腳注模塊、標(biāo)頭模塊均固定不變，而且左/右導(dǎo)航兩大模塊基本上也相類似，不會出現(xiàn)較大的變動。網(wǎng)頁存在的差異主要在于不同的主內(nèi)容模塊，但是在主內(nèi)容模塊內(nèi)所含有的詳細(xì)內(nèi)容，不同網(wǎng)頁中也會出現(xiàn)重復(fù)的現(xiàn)象，在這種情況下就需要將子模塊嵌套到網(wǎng)頁主內(nèi)容模塊內(nèi)，從而達(dá)到重用信息的目的。
2Web模塊化網(wǎng)頁的瀏覽
在對應(yīng)用模塊化網(wǎng)頁設(shè)計技術(shù)時，可以將網(wǎng)頁劃分為五個不同的子模塊，從邏輯層面來看各個子模塊彼此獨(dú)立。網(wǎng)頁中的左導(dǎo)航模塊、右導(dǎo)航模塊的主要作用就是對站內(nèi)、外訪問頻率較高的鏈接進(jìn)行供應(yīng)，包括站點(diǎn)鏈接、網(wǎng)頁鏈接兩大類。網(wǎng)站、公司的版權(quán)信息以及商標(biāo)信息都能夠存放在腳注模塊內(nèi)，網(wǎng)頁關(guān)鍵在于主內(nèi)容模塊，主內(nèi)容模塊的差異才形成了不同的網(wǎng)頁。借助傳統(tǒng)方式對模塊化網(wǎng)頁進(jìn)行瀏覽的過程中，Web服務(wù)器能夠收到由客戶端瀏覽器所發(fā)出的HTTP請求。在請求送達(dá)之后，Web服務(wù)器會向客戶端瀏覽器傳送頁面主模塊內(nèi)容[3]。對于主模塊內(nèi)容，瀏覽器能夠依據(jù)前后順序開展解讀處理，若頁面涵蓋的元素有子模塊、圖片等，則瀏覽器會將元素HTTP請求傳輸至Web服務(wù)器。當(dāng)子模塊、圖片等元素被瀏覽器所接收時，即可在網(wǎng)頁主模塊內(nèi)進(jìn)行插入，在接收全部元素之后，即可構(gòu)成整體頁面。借助該瀏覽技術(shù)對網(wǎng)頁進(jìn)行瀏覽的過程中，面向訪問者所呈現(xiàn)的是由上至下的頁面內(nèi)容。若網(wǎng)絡(luò)帶寬良好，即僅需較短時間就能夠打開頁面，這種情況下借助傳統(tǒng)頁面瀏覽技術(shù)即可。使用者在對網(wǎng)頁進(jìn)行瀏覽的過程中，關(guān)注點(diǎn)主要放在頁面信息上，之后才會注意到網(wǎng)頁結(jié)構(gòu)設(shè)計美觀性、合理性等內(nèi)容。這就表示玩野主內(nèi)容模塊下的信息才是使用者所關(guān)注的要點(diǎn)。但是若網(wǎng)絡(luò)帶寬相對較窄的情況下，需要耗費(fèi)長時間打開頁面，使用者會不自主在等待過程中觀察網(wǎng)頁其他模塊，包括有導(dǎo)航模塊、表模塊等模塊所涵蓋的信息，主內(nèi)容模塊之后才會呈現(xiàn)出來。若在打開頁面的過程中，最先呈現(xiàn)的是網(wǎng)頁主內(nèi)容模塊信息，則算是理想狀況，然而在等待時通常會因?yàn)闃?biāo)頭模塊較大，Web服務(wù)器會顯示瀏覽器連接超時，并未對主內(nèi)容模塊進(jìn)行呈現(xiàn)，頁面剩下內(nèi)容也同樣無法呈現(xiàn)出來。這樣就會讓使用者不能對網(wǎng)頁內(nèi)容進(jìn)行查看，再次對頁面進(jìn)行刷新也無法呈現(xiàn)。在處理這一問題的過程中，就需要找到在寬帶、時間有限的情況下，有效呈現(xiàn)頁面主要內(nèi)容的方式，而且要做到在向訪問者呈現(xiàn)信息的過程中，要按照主內(nèi)容模塊、其他模塊的順序來進(jìn)行。為了達(dá)成這種特殊順序頁面瀏覽目的，對網(wǎng)頁設(shè)計提出了更高的要求，設(shè)計人員需要對也頁面不同模塊賦予權(quán)值，進(jìn)行頁面瀏覽的操作時，瀏覽器也要依據(jù)模塊權(quán)值大小的排序來對頁面各個模塊進(jìn)行呈現(xiàn)[4]。頁面設(shè)計人員可以借助對不同頁面模塊權(quán)值大小調(diào)整的方式，即針對最先呈現(xiàn)的關(guān)鍵模塊賦予的權(quán)值較大，這樣就實(shí)現(xiàn)了對模塊呈現(xiàn)順序的合理安排。
3技術(shù)實(shí)現(xiàn)
Web模塊化網(wǎng)頁技術(shù)明顯優(yōu)于傳統(tǒng)Web技術(shù)，但是后者無法起到直接支持的作用，所以不僅需要擴(kuò)充HTML語言，同時還應(yīng)合力擴(kuò)充瀏覽器、Web服務(wù)器。
3.1擴(kuò)充HTML語言
要想發(fā)揮Web模塊化網(wǎng)頁技術(shù)的作用，需要應(yīng)用到HTML語言，并對此進(jìn)行適當(dāng)?shù)臄U(kuò)充處理。首先，可以將模塊標(biāo)示符增添到HTML語言內(nèi)。可以將標(biāo)示模塊的標(biāo)示符〈mod〉增添到HTML標(biāo)示符集內(nèi)。標(biāo)示符〈mod〉同包括〈img〉在內(nèi)的多種頁面元素相比，均具備不同屬性，〈mod〉的核心屬性意義主要為：1）name屬性。其主要作用就是命名不同模塊；2）src屬性。該屬性主要是對模塊文件的來源進(jìn)行標(biāo)注，以src="./head.mod'為例，其主要體現(xiàn)的就是模塊下同級目錄head.mod文件是模塊文件的來源；3）bgcolor屬性。該模塊可以對模塊背景顏色進(jìn)行顯示；4）weight屬性。該屬性能夠呈現(xiàn)出使用者對于模塊內(nèi)容的關(guān)注性，在對頁面進(jìn)行瀏覽時，瀏覽器會最先將擁有較大權(quán)值的模塊進(jìn)行呈現(xiàn)；5）height屬性。該屬性表示頁面中模塊顯示高度；6）width屬性。該屬性表示頁面中模塊顯示寬度。其次，主模塊文檔。對模塊化網(wǎng)頁技術(shù)進(jìn)行運(yùn)用的過程中，網(wǎng)頁文檔、現(xiàn)存網(wǎng)頁文檔具有兼容性，非顯示頁面元素同樣涵蓋在主模塊文檔內(nèi)，例如：〈HEAD〉〈/HEAD〉、〈HTML〉〈/HT⁃ML〉以及〈BODY〉〈/BODY〉等，在對文件進(jìn)行存放的過程中，還是需要應(yīng)用htm、html的后綴[5]。最后，子模塊文檔。在存放過程中各子模塊形式均為單獨(dú)文件，采用mod的后綴。子模塊文檔內(nèi)涵蓋的頁面元素僅限于頁面主體呈現(xiàn)信息的勻速，并不包括呈現(xiàn)全部頁面信息的元素。開展網(wǎng)站設(shè)計開發(fā)工作的過程中，能夠針對不同頁面均會運(yùn)用的共同內(nèi)容構(gòu)成子模塊，包括：廣告、版權(quán)信息、標(biāo)頭等等。根據(jù)需求，也可以針對子模塊開展刪除、添加或修改等處理。因?yàn)樽幽K位置并非固定的，所以能夠?qū)⑵湓陧撁嫒我膺M(jìn)行放置，比如在頁面中放置廣告子模塊時，可以選擇右下角、左上角或右側(cè)中間等多個位置。頁面設(shè)計時，也要考慮到實(shí)際狀況，將下一級子模塊填入到子模塊中，這種嵌入層次沒有限制，然而考慮到網(wǎng)站結(jié)構(gòu)煩瑣性，最理想嵌入層次應(yīng)≤2層。完成修改模塊的操作之后，會對全部運(yùn)用到子模塊的頁面產(chǎn)生影響。
3.2擴(kuò)充客戶端瀏覽器
擴(kuò)充HTML語言之后，要想實(shí)現(xiàn)對語言的有效支持，從而根據(jù)子模塊權(quán)值分布來按照一定排序?qū)ψ幽K內(nèi)容進(jìn)行呈現(xiàn)，還應(yīng)適當(dāng)擴(kuò)充瀏覽器。在對瀏覽器進(jìn)行擴(kuò)充之后，也要兼容多種功能，并允許繼續(xù)瀏覽非結(jié)構(gòu)化頁面。瀏覽器在完成擴(kuò)充之后，對頁面進(jìn)行瀏覽時的步驟具體為：首先，Web服務(wù)器接收由瀏覽器所發(fā)出的相關(guān)頁面URL請求；其次，向?yàn)g覽器傳輸Web服務(wù)器請求頁面相關(guān)主模塊文檔；然后，基于傳統(tǒng)方法下，瀏覽器解讀文檔，針對全部〈mod〉標(biāo)示符，對最大weight屬性值進(jìn)行選取，同時結(jié)合src屬性值，將有關(guān)子模塊文檔URL請求傳輸給Web服務(wù)器；之后，面向?yàn)g覽器，Web服務(wù)器對子模塊文檔進(jìn)行發(fā)送；最后，瀏覽器能夠基于主文檔內(nèi)，嵌入子模塊文檔，并對文檔進(jìn)行組織和呈現(xiàn)。在對瀏覽器進(jìn)行擴(kuò)充處理后能夠借助網(wǎng)絡(luò)有線寬帶資源進(jìn)行有效運(yùn)用，應(yīng)面向訪問者最先呈現(xiàn)頁面主內(nèi)容，逐次呈現(xiàn)整個頁面。網(wǎng)站設(shè)計人員借助對特定子模塊賦予取值的途徑、在頁面主模塊放置特定子模塊的不同方式，最先對選定內(nèi)容進(jìn)行呈現(xiàn)。
3.3擴(kuò)充Web服務(wù)器
在對Web服務(wù)器進(jìn)行擴(kuò)充時，也要保證能夠兼容之前的功能。在擴(kuò)充過程中，可以對mod后綴文件進(jìn)行識別。瀏覽器在對該類文件進(jìn)行請求后，無須進(jìn)一步處理，僅向?yàn)g覽器傳輸文本文件即可。
4結(jié)語
在信息技術(shù)和資源快速發(fā)展的過程中，當(dāng)前首要任務(wù)就是有效維護(hù)、組織Web中的信息，提升Web頁面的瀏覽性能。Web的模塊化網(wǎng)頁設(shè)計技術(shù)建立在模塊化程序設(shè)計理念的基礎(chǔ)之上，該技術(shù)在信息瀏覽、維護(hù)數(shù)據(jù)以及快速制作網(wǎng)頁等上的應(yīng)用均具有較高的應(yīng)用價值和參考意義。
作者:湯孝云 徐明偉 單位:合肥濱湖職業(yè)技術(shù)學(xué)院教務(wù)處