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

黃杰

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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