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

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

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

中圖分類號：TP393.092 文獻標識碼：A 文章編號：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 引 言

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

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

1.1 HTML與CSS的分工

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

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

1.2 盒子模型（Box Model）

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

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

1.3 CSS的使用方式

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

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

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

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

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

2.1 高度的可維護性

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

2.2 較好的可擴展性

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

2.3 靈活的可定制性

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

3 “DIV+CSS”盒子模型頁面布局過程

3.1 盒子式頁面布局設(shè)計簡圖

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

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

添加模塊前代碼：

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

添加模塊后代碼：

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

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

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

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

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

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

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

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

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

4 結(jié) 論

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

參考文獻：

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

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

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