基于“DIV+CSS”盒子模型的網(wǎng)頁(yè)布局初探

摘 要：為了滿(mǎn)足新時(shí)代人們對(duì)信息獲取和對(duì)外展示的需求，網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越受人關(guān)注。從表格布局到框架設(shè)計(jì)，再到如今流行的“DIV+CSS”盒子模型設(shè)計(jì)，網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的發(fā)展日新月異。本文以一個(gè)簡(jiǎn)單的實(shí)例，探究“DIV+CSS”網(wǎng)頁(yè)布局方式的技術(shù)特點(diǎn)和優(yōu)勢(shì)，以期為廣大網(wǎng)頁(yè)設(shè)計(jì)技術(shù)愛(ài)好者和從業(yè)人員提供參考。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)；DIV+CSS；盒子模型實(shí)例

中圖分類(lèi)號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2019）03-0088-03

Preliminary Study on Web Page Layout Based on “DIV+CSS” Box Model

ZHONG Jincheng

（Maoming Transport Senior Technical School，Maoming 525000，China）

Abstract：In order to meet people’s demand for information acquisition and external display in the new era，web design has attracted more and more attention. From table layout to frame design to the popular “DIV + CSS” box model design nowadays，the development of web page design technology is changing with each passing day. With a simple example，this paper explores the technical characteristics and advantages of “DIV + CSS” web page layout，in order to provide reference for the vast number of web page design technology enthusiasts and practitioners.

Keywords：web design；DIV+CSS；box model instance

0 引 言

信息時(shí)代，互聯(lián)網(wǎng)作為信息傳播的重要載體，憑借快速、高效、便捷、成本低廉等特點(diǎn)，對(duì)人們的生活產(chǎn)生了重要的影響，已成為人們生活中不可或缺的一部分。網(wǎng)頁(yè)成為人們獲取信息、查找資源、發(fā)布消息的重要工具?，F(xiàn)代社會(huì)，無(wú)論是個(gè)人、團(tuán)體、政府機(jī)構(gòu)、企業(yè)單位，都可以利用自己的主頁(yè)進(jìn)行對(duì)外溝通、交流。越來(lái)越多的人，甚至是非計(jì)算機(jī)相關(guān)專(zhuān)業(yè)或者沒(méi)有接受高等教育的人，也在努力掌握網(wǎng)頁(yè)設(shè)計(jì)技能。本文正是基于這種背景，對(duì)網(wǎng)頁(yè)設(shè)計(jì)方法展開(kāi)探索，結(jié)合網(wǎng)頁(yè)設(shè)計(jì)新模式和方式尋求一種易于人們接受、學(xué)習(xí)的網(wǎng)頁(yè)設(shè)計(jì)方法。

1 相關(guān)技術(shù)簡(jiǎn)析

1.1 HTML與CSS的分工

超文本標(biāo)記語(yǔ)言（Hyper Text Mark-up Language，簡(jiǎn)寫(xiě)HTML）是網(wǎng)頁(yè)設(shè)計(jì)使用的標(biāo)準(zhǔn)語(yǔ)言，其可以把文本、圖片、多媒體等內(nèi)容通過(guò)客戶(hù)端瀏覽器呈現(xiàn)出來(lái)。一個(gè)好的網(wǎng)頁(yè)不是對(duì)內(nèi)容的無(wú)序堆砌，而是對(duì)內(nèi)容的有序呈現(xiàn)，從而使用戶(hù)擁有良好體驗(yàn)。在實(shí)際應(yīng)用中，將HTML與CSS相結(jié)合可以實(shí)現(xiàn)此目標(biāo)。HTML標(biāo)簽負(fù)責(zé)呈現(xiàn)內(nèi)容，CSS作為層疊樣式表（Cascading Style Sheets），負(fù)責(zé)格式化、標(biāo)準(zhǔn)化HTML呈現(xiàn)的內(nèi)容以及維護(hù)樣式的統(tǒng)一性，使其更加清晰、美觀。例如，若把一段文字或者一張圖片呈現(xiàn)在網(wǎng)頁(yè)上，則需要用到HTML中相應(yīng)的標(biāo)簽（文本的標(biāo)簽為“

”，圖片的標(biāo)簽為“”），那么，我需要設(shè)置文本的相關(guān)格式，比如字體、字號(hào)或者顏色等，或者給圖片加一個(gè)邊框、設(shè)置大小等，又或者給網(wǎng)頁(yè)中所有的文本和圖片設(shè)置統(tǒng)一格式，那么則會(huì)用到CSS。這就是HTML和CSS的根本區(qū)別。

1.2 盒子模型（Box Model）

在設(shè)計(jì)網(wǎng)頁(yè)之前，我們先要對(duì)該頁(yè)面進(jìn)行內(nèi)容空間分配，即頁(yè)面的布局。頁(yè)面布局比較常用的方式有三種：一是傳統(tǒng)的表格布局（Table Layout），二是具有特殊用途的框架布局（Frame Layout），三是現(xiàn)在最流行的盒子模型布局，這種布局在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用最為廣泛。

為什么稱(chēng)之為“盒子模型”？在網(wǎng)頁(yè)設(shè)計(jì)中，每一個(gè)塊級(jí)元素基本都有內(nèi)容（content）、邊框（border）、內(nèi)邊距（padding）和外邊距（margin）等屬性，這些屬性可以用日常生活中的常見(jiàn)物體——盒子作比喻來(lái)理解，所以叫它盒子模型。理解盒子模型網(wǎng)頁(yè)設(shè)計(jì)常用的思維模型，對(duì)于開(kāi)發(fā)拓展性強(qiáng)、可維護(hù)性高的頁(yè)面相當(dāng)重要，同時(shí)其也是網(wǎng)頁(yè)前端布局開(kāi)發(fā)的基礎(chǔ)。以元素的邊框（border）為界定，邊框自身有一定的寬度（例如設(shè)置邊框?qū)挾葹?px）；邊框以外為外邊距（margin），即元素與元素之間的距離；邊框與元素內(nèi)容（content）之間的距離成為內(nèi)邊距（padding）。每個(gè)屬性都可分為上（top）、右（right）、下（bottom）、左（left），以方便在實(shí)際操作中設(shè)置。

1.3 CSS的使用方式

CSS作為一種輔助HTML樣式的格式化語(yǔ)言，與HTML的使用需要遵循一定的規(guī)則，當(dāng)然也可以靈活運(yùn)用。在HTML中使用CSS的方法有三種，分別是行內(nèi)樣式、內(nèi)嵌樣式和外部樣式。這三種不同的方法有不一樣的表達(dá)方式和寫(xiě)法，也可以對(duì)代碼產(chǎn)生一些影響。

（1）行內(nèi)樣式。行內(nèi)樣式主要寫(xiě)法是把CSS代碼直接內(nèi)嵌到HTML的具體元素中，該寫(xiě)法的優(yōu)點(diǎn)是可以一步到位，清晰地呈現(xiàn)設(shè)置的目標(biāo)元素；缺點(diǎn)則是會(huì)使得代碼顯得雜亂無(wú)章，可讀性下降，因此不推薦使用該寫(xiě)法?！皊tyle”的CSS行內(nèi)樣式代碼寫(xiě)法如下：

（2）內(nèi)嵌樣式。內(nèi)嵌樣式的寫(xiě)法依然把是HTML代碼和CSS代碼放在同一個(gè)文件中，與行內(nèi)樣式不同，內(nèi)嵌樣式寫(xiě)法不把CSS代碼直接寫(xiě)在HTML元素中，而是統(tǒng)一把CSS代碼寫(xiě)在一個(gè)“”元素中，然后把整個(gè)“style”代碼放在中，該寫(xiě)法可以實(shí)現(xiàn)HTML和CSS代碼的分離，可讀性提高，但該CSS代碼只能為它所在文件所用，其他HTML文件不能引用。

（3）外部樣式。外部樣式實(shí)現(xiàn)了HTML文件和CSS文件的分離，它把CSS代碼獨(dú)立成一個(gè)“*.css”，既提高了可讀性，又能實(shí)現(xiàn)CSS文件的重用性，能同時(shí)被多個(gè)HTML文件加載使用。

2 “DIV+CSS”盒子模型網(wǎng)頁(yè)布局的優(yōu)勢(shì)

2.1 高度的可維護(hù)性

可維護(hù)性是衡量一個(gè)網(wǎng)站好與壞的標(biāo)準(zhǔn)之一。高度的可維護(hù)性需要代碼具有高度可讀性，且代碼結(jié)構(gòu)清晰、合理，當(dāng)頁(yè)面出現(xiàn)問(wèn)題（例如瀏覽器兼容出錯(cuò)、頁(yè)面校對(duì)出現(xiàn)偏差等）時(shí)，可以快速地檢索代碼，分析其原因，找出癥結(jié)，使得修改代碼更加容易。

2.2 較好的可擴(kuò)展性

頁(yè)面的可擴(kuò)展性表現(xiàn)在兩個(gè)方面：一是模塊的可擴(kuò)展性，即可快速、方便地增、減頁(yè)面模塊或者變動(dòng)模塊位置，保持頁(yè)面結(jié)構(gòu)的靈活性；二是頁(yè)面內(nèi)容的可擴(kuò)展性，對(duì)頁(yè)面內(nèi)容進(jìn)行調(diào)整也相當(dāng)方便、快捷。

2.3 靈活的可定制性

商業(yè)網(wǎng)站對(duì)是否可定制有著極高的要求，其需要面對(duì)喜好不同、審美不同，甚至語(yǔ)言不同的客戶(hù)，且需要給客戶(hù)一定的選擇空間，由客戶(hù)決定網(wǎng)站的樣式、顏色、語(yǔ)言等。基于“DIV+CSS”盒子模型建造的網(wǎng)站可以在一定程度上滿(mǎn)足以上要求，結(jié)合JavaScript，并在網(wǎng)頁(yè)上進(jìn)行相應(yīng)的設(shè)置，就可以達(dá)到此效果。

3 “DIV+CSS”盒子模型頁(yè)面布局過(guò)程

3.1 盒子式頁(yè)面布局設(shè)計(jì)簡(jiǎn)圖

盒子式頁(yè)面布局設(shè)計(jì)相當(dāng)于建立一個(gè)完整的頁(yè)面分模塊，并為每一個(gè)模塊分配特定的內(nèi)容。在頁(yè)面設(shè)計(jì)開(kāi)始階段，我們可以根據(jù)內(nèi)容的重要程度、內(nèi)容的量度、內(nèi)容的性質(zhì)等因素設(shè)計(jì)頁(yè)面布局及尺寸，即為頁(yè)面內(nèi)容確定一個(gè)大體的位置。

頁(yè)面的初始設(shè)計(jì)圖可以靈活變動(dòng)，無(wú)論是尺寸還是位置皆可視情況而定，內(nèi)容部分可根據(jù)實(shí)際情況增添模塊，在代碼上可以簡(jiǎn)單地用一組DIV塊來(lái)實(shí)現(xiàn)，可操作性高。代碼如下：

添加模塊前代碼：

<！--con_left模塊內(nèi)容-->

添加模塊后代碼：

<！--con_left模塊內(nèi)容-->

<！--con_right模塊內(nèi)容-->

根據(jù)代碼所示，在container模塊中原本只有con_left模塊，如果需要添加另外一個(gè)模塊，則可以利用DIV標(biāo)簽輕松添加一個(gè)con_right模塊。

3.2 實(shí)現(xiàn)盒子式“占位圖”

在盒子式網(wǎng)頁(yè)設(shè)計(jì)實(shí)現(xiàn)的過(guò)程中，我們可以采取“先占位后定位”的原則，即可以根據(jù)盒子式頁(yè)面設(shè)計(jì)簡(jiǎn)圖，用不同顏色的版塊為各模塊占位，使用代碼實(shí)現(xiàn)由簡(jiǎn)圖到“占位圖”。在本例中，我們?cè)O(shè)計(jì)了一個(gè)“占位圖”，紅色表示頁(yè)面頭部，黃色表示頁(yè)面底部，頁(yè)面主題內(nèi)容分為兩大部分，分別用藍(lán)色和綠色占位，效果如圖1所示。

在代碼編寫(xiě)方面，HTML關(guān)鍵代碼如下，其中header模塊為頁(yè)面頭部部分，main模塊為主體內(nèi)容部分（內(nèi)分為main_left模塊和main_right模塊），footer模塊為頁(yè)面底部部分，另外，nav部分為各模塊之間的間隙而設(shè)。

HTML代碼中只是利用DIV元素創(chuàng)建了一個(gè)空白的框架，在沒(méi)有添加任何樣式的設(shè)置之前，你會(huì)發(fā)現(xiàn)什么都看不見(jiàn)，為了完成如圖1所示的“占位圖”，需要在HTML代碼中加入相應(yīng)的CSS樣式設(shè)置，CSS代碼也相對(duì)應(yīng)地對(duì)HTML代碼中相應(yīng)模塊進(jìn)行樣式設(shè)置。

3.3 以“占位圖”為基礎(chǔ)填充內(nèi)容

“占位圖”的頁(yè)面布局方法能起到為內(nèi)容“占位”，確定內(nèi)容模塊區(qū)域的作用。這種做法具有諸多優(yōu)勢(shì)，一是邏輯上非常清晰，一目了然；二是代碼的運(yùn)用相對(duì)簡(jiǎn)單，是網(wǎng)頁(yè)設(shè)計(jì)中頁(yè)面布局的經(jīng)典做法；三是設(shè)計(jì)模板化，擴(kuò)展性強(qiáng)，可重復(fù)使用，可以提高網(wǎng)頁(yè)開(kāi)發(fā)的效率，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者來(lái)說(shuō)尤其受用。在此“占位圖”的基礎(chǔ)上，我們把內(nèi)容添加在合適的位置，并對(duì)其進(jìn)行調(diào)整使其美化，一個(gè)網(wǎng)頁(yè)設(shè)計(jì)即完成。

4 結(jié) 論

將HTML標(biāo)簽和CSS樣式結(jié)合，是網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)，如本文中所述實(shí)例所示，通過(guò)使用HTML設(shè)定內(nèi)容，用DIV標(biāo)簽限定內(nèi)容的區(qū)域（即建立一個(gè)“塊”），用CSS中的顏色、大小標(biāo)識(shí)“塊”，建立一個(gè)以顏色為標(biāo)識(shí)的“占位圖”，再在每一“塊”中填入相應(yīng)內(nèi)容，就是簡(jiǎn)單網(wǎng)頁(yè)設(shè)計(jì)的整個(gè)流程?！癉IV+CSS”盒子模型網(wǎng)頁(yè)布局方法，相對(duì)來(lái)講邏輯更清晰，入門(mén)門(mén)檻更低，對(duì)初學(xué)者來(lái)說(shuō)相當(dāng)受用。而要建造一個(gè)好看而又受歡迎的網(wǎng)頁(yè)，涉及到的因素會(huì)很多，例如內(nèi)容要具有有足夠的吸引力、網(wǎng)頁(yè)特效夠豐富等，這就對(duì)網(wǎng)頁(yè)設(shè)計(jì)者提出了更高的技術(shù)要求。

參考文獻(xiàn)：

[1] [美]邁耶著.CSS權(quán)威指南（第3版） [M].尹志忠，侯妍，譯.北京：中國(guó)電力出版社，2010.

[2] 喻浩.CSS+DIV網(wǎng)頁(yè)樣式與布局從入門(mén)到精通 [M].北京：清華大學(xué)出版社，2013.

作者簡(jiǎn)介：鐘金成（1990.05-），男，漢族，廣東高州人，計(jì)算機(jī)教師，初級(jí)職稱(chēng)，本科，研究方向：計(jì)算機(jī)程序設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)。