孫乾雨

【摘 要】基于模塊化的網(wǎng)頁設(shè)計能夠幫助網(wǎng)頁使用者更快速地瀏覽網(wǎng)頁并尋找自己所需的資料，還能通過模塊化的設(shè)計快捷地實現(xiàn)網(wǎng)頁維護工作，本文介紹了模塊化網(wǎng)頁設(shè)計技術(shù)的概念，并對模塊化網(wǎng)頁的設(shè)計與管理方式加以分析，旨在提升網(wǎng)頁設(shè)計的便捷性，提升其維護效率并延長其時效性。

【關(guān)鍵詞】模塊化；網(wǎng)頁設(shè)計；技術(shù)分析

模塊化是將某一種功能以單一一個模塊的形式設(shè)計出后，將各個模塊進行拼接進而得出設(shè)計者想要的功能的一種設(shè)計方式。隨著網(wǎng)絡(luò)發(fā)展的速度不斷加快，若無法提升網(wǎng)頁設(shè)計的速度和質(zhì)量，則會使網(wǎng)頁設(shè)計的質(zhì)量跟不上網(wǎng)絡(luò)的發(fā)展速度，為此，如何利用模塊化技術(shù)優(yōu)化網(wǎng)頁設(shè)計技術(shù)，是當(dāng)前需要解決的問題。

一、模塊化網(wǎng)頁設(shè)計技術(shù)簡介

模塊化網(wǎng)頁技術(shù)的本質(zhì)與模塊化程序設(shè)計相似，都是在以web模塊為基礎(chǔ)的設(shè)計單位進行組織和拼接的方式設(shè)計網(wǎng)頁功能的一種設(shè)計技術(shù)。通常一個網(wǎng)頁由一個主模塊和數(shù)個子模塊構(gòu)成主模塊構(gòu)成了整個網(wǎng)頁的基礎(chǔ)框架。主模塊的作用是作為存放子模塊的“容器”，使子模塊能夠穩(wěn)定地銜接在一起并起到共同運行的作用。主模塊不僅能存儲子模塊，還能儲存各種屬于主模塊自身的元素和注釋。

子模塊則是起到網(wǎng)頁各個作用的主要元素，其能夠儲存和組織戴亮的基本頁面元素，通常把一些功能相似的內(nèi)容整合成一個單獨的子模塊文件，并將其像圖像或是文字元素等直接插入到主模塊之中，在有必要的前提下還能運用嵌套的方式讓數(shù)個子模塊互相嵌套以達到多層嵌套豐富模塊作用的目的。

模塊化設(shè)計的實現(xiàn)得益于HTML5的簡化和優(yōu)化設(shè)計。一般的網(wǎng)頁模塊可以分為三種，其分別是“頭部模塊”、“主體模塊”和“底部模塊”?！邦^部模塊”主要負責(zé)網(wǎng)站logo以及各種導(dǎo)航鏈接的設(shè)置；“主體模塊”主要包括banner圖片、部門導(dǎo)航、視頻內(nèi)容和各種基礎(chǔ)鏈接入口等基本網(wǎng)站構(gòu)成元素；“底部模塊”則包含了各種合作網(wǎng)站鏈接、網(wǎng)站備案號和各類相關(guān)信息等。而HTML5的出現(xiàn)使得網(wǎng)頁能夠支持在移動設(shè)備上播放多媒體內(nèi)容的功能同時提供了更多地新元素和屬性，不僅大幅提升了搜索引擎的索引整理的效率，還能提升網(wǎng)頁維護的速度和質(zhì)量[1]。

二、模塊化網(wǎng)頁設(shè)計技術(shù)實現(xiàn)方式

（一）擴充HTML語言

在進行HTML語言擴充時，要能夠熟練運用模塊化標識符