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