對(duì)基于模塊的網(wǎng)頁設(shè)計(jì)技術(shù)分析

孫乾雨

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

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

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

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

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

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

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

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

（一）擴(kuò)充HTML語言

在進(jìn)行HTML語言擴(kuò)充時(shí)，要能夠熟練運(yùn)用模塊化標(biāo)識(shí)符