基于“Div+CSS盒模式”的分屏式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)
——以電商購(gòu)物網(wǎng)站為例

黃杰

(常德職業(yè)技術(shù)學(xué)院,湖南 常德415000)

信息全球化時(shí)代背景下,互聯(lián)網(wǎng)已經(jīng)融入到社會(huì)各個(gè)領(lǐng)域,深刻影響著人們生活的方方面面。網(wǎng)站作為互聯(lián)網(wǎng)的信息交互窗口,頁(yè)面布局的表現(xiàn)方式對(duì)訪客接收信息具有決定作用。作為當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)主流技術(shù)的“Div+CSS盒模式”,在外觀樣式、網(wǎng)頁(yè)布局、模塊搭建等方面展現(xiàn)了強(qiáng)大的工作特性,通過“Div+CSS盒模式”實(shí)現(xiàn)分屏式網(wǎng)頁(yè)布局,能夠大大提升網(wǎng)頁(yè)設(shè)計(jì)效率,同時(shí)引領(lǐng)了一種新的網(wǎng)頁(yè)布局理念。

1 DIV+CSS技術(shù)概述

“Div+CSS盒模式”作為目前互聯(lián)網(wǎng)市場(chǎng)主流的網(wǎng)頁(yè)布局技術(shù),引領(lǐng)了一股新的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)。打破了以往采用表格、框架、模板等手段進(jìn)行網(wǎng)頁(yè)布局的觀念,將網(wǎng)頁(yè)內(nèi)容和外觀樣式進(jìn)行獨(dú)立編輯。DIV是網(wǎng)頁(yè)編輯語(yǔ)言中的一個(gè)盒標(biāo)簽,具有搭建網(wǎng)頁(yè)模塊的作用,形成一個(gè)獨(dú)立的網(wǎng)頁(yè)容器,存放不同的網(wǎng)頁(yè)內(nèi)容；CSS是層疊樣式標(biāo)簽,能夠改變網(wǎng)頁(yè)元素的基本屬性以及定義元素規(guī)則,通過嵌入代碼、內(nèi)聯(lián)標(biāo)簽、外部鏈接等方式添加網(wǎng)頁(yè)外觀樣式；Div+CSS盒模式融合了二者的功能特性,建立一個(gè)相對(duì)靈活的盒子模型作為頁(yè)面容器,通過在容器中填充網(wǎng)頁(yè)內(nèi)容,確定層級(jí)關(guān)系之后借助CSS層疊樣式表為目標(biāo)元素定義規(guī)則屬性,并實(shí)現(xiàn)網(wǎng)頁(yè)元素準(zhǔn)確定位,能夠有效提升網(wǎng)頁(yè)布局效果。除此之外,“Div+CSS盒模式”更是一種促進(jìn)數(shù)據(jù)交互的手段,對(duì)于分屏式網(wǎng)頁(yè)設(shè)計(jì)具有重要意義。

2 “Div+CSS盒模式”對(duì)于網(wǎng)頁(yè)分屏設(shè)計(jì)的優(yōu)勢(shì)

2.1 減少代碼重復(fù)編寫,簡(jiǎn)化結(jié)構(gòu)體系

網(wǎng)頁(yè)設(shè)計(jì)的繁復(fù)性造成了大量冗長(zhǎng)的代碼結(jié)構(gòu)出現(xiàn),對(duì)于分屏式網(wǎng)頁(yè)來說,無(wú)可避免會(huì)產(chǎn)生重復(fù)性代碼,在技術(shù)要求上必須保證頁(yè)面訪問的流暢性和模塊的獨(dú)立性。運(yùn)用“Div+CSS盒模式”將網(wǎng)頁(yè)源代碼劃歸為塊級(jí)結(jié)構(gòu),一方面,大幅減少了網(wǎng)頁(yè)代碼的重復(fù)編寫,保持代碼結(jié)構(gòu)清晰、工整,有利于提高工作效率；另一方面,便于快速查找編寫錯(cuò)誤,及時(shí)修改代碼,壓縮了后期網(wǎng)頁(yè)運(yùn)維過程中成本消耗。與此同時(shí),結(jié)構(gòu)簡(jiǎn)化后的網(wǎng)頁(yè)界面的運(yùn)載速度增強(qiáng),用戶操作響應(yīng)及時(shí),尤其是圖片、視頻等大存儲(chǔ)文件的緩存無(wú)需用戶長(zhǎng)時(shí)間等待,有利于提升用戶瀏覽體驗(yàn)感。

2.2 分層級(jí)嵌套,統(tǒng)一樣式管理

分屏式網(wǎng)頁(yè)設(shè)計(jì)拓寬了信息傳遞渠道,同時(shí)也加大了網(wǎng)頁(yè)代碼編寫的工作量,造成眾多網(wǎng)頁(yè)元素的管理工作較為復(fù)雜。“Div+CSS盒模式”把同類型或同樣式的網(wǎng)頁(yè)元素劃分為塊級(jí)單位,建立一種CSS樣式表可供多個(gè)塊級(jí)單位同時(shí)調(diào)用,省略了很多不必要的代碼寫入環(huán)節(jié)。在遇到修改問題時(shí),如背景、文字、色彩等參數(shù)設(shè)置,即可在CSS樣式表中進(jìn)行修改,調(diào)用該樣式表的塊級(jí)單位則會(huì)自動(dòng)檢測(cè)新指令并完成網(wǎng)頁(yè)元素的更新。由此可見,“Div+CSS盒模式”將網(wǎng)頁(yè)元素統(tǒng)一規(guī)劃管理,很大程度上促進(jìn)了分屏式網(wǎng)頁(yè)布局的有序性和系統(tǒng)性。

2.3 靈活構(gòu)建模塊,表現(xiàn)形式多樣化

“Div+CSS盒模式”在網(wǎng)頁(yè)布局方面表現(xiàn)出靈活性和多樣性的特點(diǎn),將內(nèi)容和樣式從以往的編寫公式中劃分出來。在分屏式網(wǎng)頁(yè)布局中,頁(yè)面劃分為不同的區(qū)域,每個(gè)區(qū)域顯示不同的界面,界面之間可以同步運(yùn)行瀏覽器窗口。依靠“Div+CSS盒模式”搭建頁(yè)面模塊,模塊中可填充多種形式內(nèi)容,并且可變換多種表現(xiàn)樣式。配合CSS樣式表對(duì)模塊的外觀及位置進(jìn)行參數(shù)設(shè)置,例如自定義大小、顏色、邊框粗細(xì)等屬性,以及自由調(diào)整模塊位置與間距。進(jìn)一步縮小了分屏式網(wǎng)頁(yè)設(shè)計(jì)排版的局限性,網(wǎng)頁(yè)的交互性空間大幅提升。

3 “Div+CSS盒模式”在電子商務(wù)網(wǎng)站的應(yīng)用

3.1 確定網(wǎng)站主題合理布局頁(yè)面

電子商務(wù)網(wǎng)站的定位應(yīng)該是為用戶提供商品銷售服務(wù),那么網(wǎng)頁(yè)設(shè)計(jì)始終圍繞兩個(gè)深層內(nèi)涵,一是讓用戶能夠了解網(wǎng)站銷售的商品,二是讓用戶購(gòu)買商品。如圖1所示,“Div+CSS盒模式”應(yīng)用于在百貨商城網(wǎng)站中,根據(jù)主題需要,商城頁(yè)面由兩個(gè)分屏板塊構(gòu)成,為左右并列布局。左邊為商城主頁(yè),包含導(dǎo)航欄、菜單欄、活動(dòng)banner以及部分商品陳列等基本內(nèi)容；右邊為店鋪?zhàn)禹?yè),主要是商品詳情展示,包含價(jià)格、細(xì)節(jié)圖片、參數(shù)以及評(píng)價(jià)詳情等內(nèi)容。

圖1 百貨商城網(wǎng)站

項(xiàng)目來源:2019年常德職業(yè)技術(shù)學(xué)院重點(diǎn)課題“基于Div+CSS盒模式的分屏式網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)”,課題編號(hào)ZY1905。

作者簡(jiǎn)介:黃杰(1991,1-),男,回族,籍貫:湖南常德,學(xué)歷:研究生,碩士學(xué)位,講師,研究方向:電子商務(wù)。

3.2 DIV+CSS技術(shù)在網(wǎng)站首頁(yè)的框架設(shè)計(jì)

創(chuàng)建商城網(wǎng)站的分屏式網(wǎng)頁(yè)布局,首先應(yīng)對(duì)商城首頁(yè)框架結(jié)構(gòu)設(shè)計(jì),利用“Div+CSS盒模式”能夠快速、有效地建立網(wǎng)站框架體系并進(jìn)行框架結(jié)構(gòu)調(diào)整。以百貨商城網(wǎng)站為例,左右分屏均采用“三”字型布局結(jié)構(gòu)對(duì)頁(yè)面內(nèi)容進(jìn)行