DIV+CSS技術(shù)在網(wǎng)頁設(shè)計布局中的應(yīng)用研究

李彥

摘 要：信息科學(xué)技術(shù)的進步使得互聯(lián)網(wǎng)信息技術(shù)的發(fā)展突飛猛進，其中網(wǎng)頁設(shè)計作為互聯(lián)網(wǎng)技術(shù)中的重要部分，應(yīng)用先進技術(shù)提高工作效率與工作質(zhì)量對網(wǎng)頁設(shè)計具有重要意義。DIV+CSS 技術(shù)在網(wǎng)頁布局中的優(yōu)勢作用使得其在網(wǎng)頁設(shè)計與開發(fā)中應(yīng)用越來越廣泛?；诖耍紫葘?DIV+CSS 技術(shù)進行概述，然后對其在網(wǎng)頁布局中的優(yōu)勢與應(yīng)用原理進行分析。

關(guān)鍵詞：DIV; CSS; 網(wǎng)頁布局; 應(yīng)用

中圖分類號： TP393.092

文獻標(biāo)志碼： A

Abstract：The advancement of information science and technology has made development of the Internet information technology leaps and bounds. Web design is an important part of the Internet technology industry. It is of great significance to apply advanced technology to improve its work efficiency and work quality. The advantages of DIV+CSS technology in Web page layout make it more and more widely used in Web design and development. Based on this， this paper summarizes the DIV+CSS technology and analyzes its advantages and application principles in Web page layout.

Key words：DIV; CSS; Web page layout; Application

0 引言

我國信息技術(shù)及互聯(lián)網(wǎng)技術(shù)在當(dāng)下得到了卓越的發(fā)展，可以說已經(jīng)完全地滲透到人們的工作與生活中，隨之，網(wǎng)頁的開發(fā)與設(shè)計功能也日益強大。在網(wǎng)頁制作工具中使用傳統(tǒng)的表格布局技術(shù)會暴露許多問題，一種受到互聯(lián)網(wǎng)行業(yè)的廣泛青睞的技術(shù)應(yīng)用就逐漸凸顯出來了，這就是DIV+CSS的布局技術(shù)，它就像WORD中的文本框一樣，能夠讓任何對象準(zhǔn)確地定位在網(wǎng)頁中的任何位置，同時也降低了網(wǎng)頁維護的難度，提高了網(wǎng)頁的下載與傳輸速率。

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

1.1 DIV技術(shù)

DIV技術(shù)是網(wǎng)頁設(shè)計、開發(fā)過程中的標(biāo)記元素及應(yīng)用語言，為文檔提供布局結(jié)構(gòu)，是DIV+CSS技術(shù)中不可缺少的一部分。由于DIV是“區(qū)分、劃分”的意思，所以〈DIV〉標(biāo)簽是一個塊級元素，它能夠為網(wǎng)頁文檔內(nèi)大塊的內(nèi)容提供布局結(jié)構(gòu)。在這些塊級元素中，可以插入的對象有文字、圖像和表格等各種網(wǎng)頁元素，方便對網(wǎng)頁進行設(shè)計。HTML文檔中的塊級元素由對應(yīng)的一組起始標(biāo)簽〈DIV〉和結(jié)束標(biāo)簽〈/DIV〉構(gòu)成，其定位及其格式一般是由引用 CSS樣式或〈DIV〉標(biāo)簽屬性來實現(xiàn)的。[1]如果要定位或是布局復(fù)雜的網(wǎng)頁，則可以使用嵌套DIV標(biāo)簽定義的塊，這就為網(wǎng)頁布局提供了更加有利的技術(shù)支持。

1.2 CSS技術(shù)

HTML標(biāo)記只是能在網(wǎng)頁某處需要設(shè)置格式的時候具體定義，如果說一個網(wǎng)頁中的多處標(biāo)題都需要設(shè)置成一種格式，或者說是不同網(wǎng)頁中的某些地方要進行同樣的格式設(shè)置就十分麻煩了，而且之后要修改的時候工作量也繁瑣。CSS即層疊樣式表，它是一種能夠為了很好地完成網(wǎng)頁板式設(shè)計的需求而制定的一種設(shè)計標(biāo)準(zhǔn)，是為了在 HTML樣式的編輯上對它的功能進行更好地補充，同時也是國際 W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟）標(biāo)準(zhǔn)化組織制定的一套完整的擴展樣式標(biāo)準(zhǔn)。[1]在設(shè)計網(wǎng)頁時，CSS層疊樣式表可以以各種形式來豐富頁面效果，如對頁面的布局、顏色、格式與背景等進行各種設(shè)置，所以說CSS能夠?qū)?HTML 的標(biāo)記屬性的設(shè)定進行擴充，以此來達到對網(wǎng)頁的整體的布局設(shè)計和外觀樣式設(shè)計進行有效控制的目的，讓網(wǎng)頁可以在格式設(shè)計上具有更加美觀的表現(xiàn)形式。

CSS層疊樣式表技術(shù)可以把網(wǎng)頁本身的主體內(nèi)容和網(wǎng)頁設(shè)計的樣式格式進行有效的分開，即CSS樣式的信息作為獨立的一個文件進行存放，以便設(shè)計者對網(wǎng)頁文檔進行有效集中的統(tǒng)一管理。在網(wǎng)頁設(shè)計中，CSS樣式文件建立完之后由于是一個獨立的文件就可以被其他的HTML文件進行共享使用，這樣設(shè)計者就不用對網(wǎng)頁中的文件格式進行重復(fù)性的操作設(shè)計，把主要精力和時間放到對網(wǎng)頁的主要內(nèi)容和功能上來了，大大節(jié)省了不必要的設(shè)計工作和時間。

CSS層疊樣式表的語法定義包括3個部分：選擇器名、屬性名、屬性值。

選擇器名：是指對樣式編碼所用針對的某個網(wǎng)頁操作對象，可以是由“.”（類）或“#”（標(biāo)簽）加任意字母組成的類或ID選擇器;也可以是一個HTML標(biāo)簽，如 body，h1，td。屬性：是CSS樣式控制的核心，對于每個選擇器，CSS都提供了豐富多樣的樣式屬性，如基本的格式設(shè)置顏色、大小、定位和浮動方式等。屬性值：對于不同的屬性名，其屬性值有不同的表達方式。

1.2.1 標(biāo)簽選擇器

選擇器類型主要分為三種，第一種是標(biāo)簽選擇器。一個完整的網(wǎng)頁是由許多不同的標(biāo)簽組成的，而每一個標(biāo)簽選擇器則決定了此標(biāo)簽采用什么樣的CSS樣式。在整個網(wǎng)頁中如果給段落設(shè)置一個格式之后，網(wǎng)頁文檔中的所有段落均會采用該格式。例如：在樣式文件中對段落〈p〉標(biāo)簽樣式的聲明如下，那頁面中的所有段落都是隸書、14號字，綠色了。

1.2.2 類選擇器

第二種是類選擇期。標(biāo)簽選擇器是針對網(wǎng)頁中所有同類標(biāo)簽，只要設(shè)置了〈p〉標(biāo)簽的樣式為綠色，則網(wǎng)頁中所有〈p〉標(biāo)簽的樣式均為綠色樣式。假設(shè)現(xiàn)在需要將其中的某幾個〈p〉標(biāo)簽的樣式定義為紅色，就需要使用類選擇器來實現(xiàn)。

類選擇器根據(jù)類名來選擇，前面以“.”來標(biāo)志，后面的名稱由用戶自定義，如：

類選擇器可以應(yīng)用于網(wǎng)頁中的任何對象，只須在定義選擇器后，在所需要修改的標(biāo)簽中用class屬性進行聲明。例如，將某幾個〈p〉標(biāo)簽的樣式定義為紅色，則在相應(yīng)得〈p〉標(biāo)簽中添加如下代碼。

1.2.3 ID選擇器

ID選擇器是第三種選擇器，它的使用方法同類選擇器基本相同，不同之處在于ID選擇器只能在一個網(wǎng)頁中使用一次，也就是只能應(yīng)用于一個HTML標(biāo)簽中，其針對性強。在定義ID選擇器的時候，是根據(jù)頁面中插入的元素ID來選擇的，所以一個ID對應(yīng)一個ID選擇器。前面以“#”號來標(biāo)志，在樣式里面的定義如下格式：

這里代表ID名稱為“ab”的網(wǎng)頁元素的設(shè)置它的字體顏色為黃色。而我們在頁面上定義一個元素把它的ID定義為ab，相應(yīng)的代碼如下：

1.3 DIV+CSS技術(shù)

在進行網(wǎng)頁排版布局時，需要將頁面整體上進行DIV分塊;DIV是一個區(qū)塊容器，用來封閉區(qū)塊內(nèi)的數(shù)據(jù)區(qū)域，這些數(shù)據(jù)可以是文字、圖片、視頻、表格等各種網(wǎng)頁元素;CSS是層疊樣式表，這種技術(shù)可以精確的控制網(wǎng)頁的背景、布局和其他可視效果。而DIV和CSS結(jié)合起來的布局技術(shù)就能夠進一步的規(guī)范網(wǎng)頁設(shè)計中的各種數(shù)據(jù)元素，規(guī)整整個頁面的結(jié)構(gòu)，使網(wǎng)頁的主要內(nèi)容與網(wǎng)頁樣式分離開來，成為單獨的個體。此外，在DIV與CSS進行合并的過程中，既能使網(wǎng)頁操作更加方便，也能夠提高操作的靈活性。

2 DIV+CSS技術(shù)在網(wǎng)頁布局中應(yīng)用的原理

2.1 盒子模型

網(wǎng)頁頁面上的每個數(shù)據(jù)元素都可以被瀏覽器看成是一個個矩形的盒子，每個盒子又都是由數(shù)據(jù)元素的主要內(nèi)容、盒子的填充、盒子邊框和盒子與盒子的邊界間距組成。每一個盒子都有四個邊：上、下、左、右，可以對其中的一個邊進行單獨修改，也可以同時修改四個邊。每一個網(wǎng)頁就是由許多個這樣的盒子通過上下排列、并列排列、甚至是嵌套排列等形式堆積而成的。所以說DIV+CSS布局技術(shù)的核心即為 CSS 盒子模型，它指定網(wǎng)頁中的數(shù)據(jù)元素是如何顯示的以及各個盒子之間又是在某種程度上如何相互交互排列的。[2]

2.2 定位和浮動

通常情況下盒子模型包括三種定位的形式：標(biāo)準(zhǔn)流、浮動和定位。標(biāo)準(zhǔn)流，是指數(shù)據(jù)元素的盒子位置由該元素所在HTML代碼中的位置決定的。在浮動屬性下的定位即是利用CSS中方框面板中的float屬性實現(xiàn)浮動定位。如果頁面中的一個盒子被設(shè)置成浮動定位，浮動就會刪除掉原先占位符中的數(shù)據(jù)元素，使數(shù)據(jù)元素可以左右移動進行微調(diào)，直到這個數(shù)據(jù)元素的外邊框邊緣碰到另一個浮動的元素邊緣。[4]在定位屬性下的定位是利用CSS中定位面板進行設(shè)置。這里需要注意的是：除非給盒子專門設(shè)置浮動屬性或定位屬性，否則所有盒子都默認(rèn)是在標(biāo)準(zhǔn)流中定位的。

3 DIV+CSS技術(shù)在網(wǎng)頁布局中的優(yōu)勢

在制作網(wǎng)頁的過程中使用DIV+CSS頁面布局技術(shù)不僅僅是設(shè)計方式的轉(zhuǎn)變，更是設(shè)計思想的轉(zhuǎn)變，這一轉(zhuǎn)變?yōu)榫W(wǎng)頁制作者或是初學(xué)者設(shè)計網(wǎng)頁都帶來了許多的便利。采用DIV+CSS在網(wǎng)頁布局的方式優(yōu)點有很多，主要有以下幾點。

3.1 內(nèi)容與樣式分離，精簡代碼

由于網(wǎng)頁頁面采用了DIV+CSS的技術(shù)來進行布局，更能體現(xiàn)出其網(wǎng)頁主要內(nèi)容和網(wǎng)頁樣式的相分離，使網(wǎng)頁的結(jié)構(gòu)重組性也會更強。使網(wǎng)頁CSS樣式表文件獨立存儲，HTML文件只是存儲網(wǎng)頁中的內(nèi)容，這樣的存儲方式網(wǎng)頁前臺只需顯示內(nèi)容，CSS來處理形式上的美工。通過修改外部樣式表文件里CSS樣式的屬性，就能改變整個網(wǎng)站的外觀版式。通過對未應(yīng)用CSS技術(shù)與已經(jīng)應(yīng)用了CSS技術(shù)的HTML代碼進行對比分析，可以發(fā)現(xiàn)應(yīng)用了CSS樣式的代碼都在頭部文件中存儲一次，需要應(yīng)用格式的時候只需調(diào)用樣式的名稱即可代入，所以說生成的HTML文件代碼更加精簡，使網(wǎng)頁頁面打開的速度也會更快。

3.2 網(wǎng)站頁面瀏覽速度大大提高

雖然之前在網(wǎng)頁設(shè)計中會使用表格來進行布局，其中也會使用到DIV和CSS技術(shù)，但是他們卻沒有被用頁面的布局中。這是為什么呢？如果說網(wǎng)站頁面的視覺效果是同樣的，那么用表格編碼設(shè)計網(wǎng)頁的頁面的大小是用DIV+CSS建立的網(wǎng)頁頁面大小的2倍多。用DIV+CSS布局技術(shù)的網(wǎng)頁頁面會將一個頁面劃分獨立成多個的DIV區(qū)域，在瀏覽者瀏覽頁面的時候，會一個區(qū)域一個區(qū)域逐層逐個的加載，就大大的提高了頁面瀏覽的速度;但是頁面布局如果使用的是表格嵌套的話，就會將整個頁面的內(nèi)容套在一個大大的表格里，會使得頁面加載的速度很慢。[3]所以說在頁面制作的時候有效的使用DIV+CSS技術(shù)，加快了頁面加載的速度，瀏覽者瀏覽頁面時等待的時間減少了，就能增強他們的體驗感，瀏覽者會再次回訪網(wǎng)頁的幾率也就加大了。

3.3 提高搜索引擎對網(wǎng)頁的索引效率

網(wǎng)站的設(shè)計要以萬維網(wǎng)聯(lián)盟為指定的標(biāo)準(zhǔn)，這是在各類搜索引擎中關(guān)于網(wǎng)頁排列名次一個決定性的非常重要的標(biāo)準(zhǔn)，所以采用 DIV+CSS架構(gòu)的網(wǎng)站更符合該國際化標(biāo)準(zhǔn)。在設(shè)計網(wǎng)頁的時候如使用DIV+CSS布局技術(shù)，會生成一個寫入大量HTML代碼的獨立存儲的CSS樣式表文件，這就會讓網(wǎng)頁中的正文主體部分變得更加明顯突出，搜索引擎也會將用戶所需的內(nèi)容更有效更快的搜索到并呈現(xiàn)到用戶面前。

3.4 網(wǎng)頁的維護變得方便快捷

在傳統(tǒng)以表格布局的網(wǎng)頁布局結(jié)構(gòu)中，如果要對頁面的布局進行修改是非常麻煩的，需要修改大量的HTML代碼，工作量巨大，甚至可能要對整個網(wǎng)頁進行重新設(shè)計的。但是采用DIV+CSS布局技術(shù)進行設(shè)計的網(wǎng)頁，之后的日常維護工作就會變得很容易操作。由于它的樣式文件是分離于內(nèi)容的，所以在修改頁面格式的時候，只需到CSS樣式表文件里找到相應(yīng)的標(biāo)簽去修改調(diào)整，修改一次就可將之前應(yīng)用該樣式的許多內(nèi)容的風(fēng)格格式同時更新修改，而且也不會破壞頁面其他部分的布局樣式，使得修改頁面變得既省時又省事，大大降低了網(wǎng)頁維護的難度。[3]所以說在網(wǎng)頁中應(yīng)用DIV+CSS布局的技術(shù)，不僅能夠使網(wǎng)頁制作的效率得到提高，還能有效地精簡頁面的HTML代碼，同時也降低了網(wǎng)頁維護的成本。

3.5 統(tǒng)一頁面元素格式，保持視覺的一致性

傳統(tǒng)的表格布局的網(wǎng)站中會經(jīng)常出現(xiàn)各個頁面元素格式的不統(tǒng)一，如頁面與頁面，或者區(qū)域與區(qū)域之間的顯示效果有偏差，因為網(wǎng)頁中的數(shù)據(jù)信息集成了多種多樣的數(shù)據(jù)元素，如若要逐一修改其設(shè)置則工作量巨大。而在頁面中使用DIV+CSS布局的技術(shù)，就可將同一頁面的所有區(qū)域甚至是網(wǎng)站內(nèi)的所有頁面都統(tǒng)一都用CSS樣式文件來控制其格式，這樣就有效地避免了同一頁面的不同區(qū)域或是網(wǎng)站內(nèi)不同頁面之間所體現(xiàn)出的效果偏差。[5]由于CSS樣式具有強大的文字格式排版的能力，設(shè)計者就能夠更好地使用樣式來控制頁面布局，可有效的將同一頁面元素甚至是不同頁面的元素都設(shè)置成統(tǒng)一的格式顯示。

由此可見，DIV+CSS的布局方式有著顯而易見的優(yōu)勢，它實現(xiàn)了網(wǎng)頁內(nèi)容與其樣式格式的分離;精簡了代碼，減小了網(wǎng)頁的體積;它結(jié)構(gòu)清晰，提高了搜索引擎對網(wǎng)頁的索引效率;當(dāng)在對頁面進行更新維護的時候，只需要修改外部樣式表的屬性，就可將之前應(yīng)用該樣式的許多頁面的風(fēng)格格式同時自動更新。[6]DIV+CSS技術(shù)雖然結(jié)構(gòu)精簡清晰明了，但是這不代表除了頭部〈head〉標(biāo)簽和主體〈body〉標(biāo)簽之外，網(wǎng)頁頁面的HTML代碼就全是〈div〉標(biāo)簽了，因為想要完成整個網(wǎng)頁頁面的設(shè)計光靠DIV+CSS布局技術(shù)也是不能的。

4 DIV+CSS布局技術(shù)在某微課視頻資源網(wǎng)站中的簡單應(yīng)用

首先根據(jù)某微課視頻資源網(wǎng)站的需要，其網(wǎng)站的首頁頁面設(shè)計需一目了然，是簡潔大方的風(fēng)格，要能使用戶快速地找到需要進入的子頁面。要完成一個網(wǎng)站，首先是首頁的設(shè)計，而制作出首頁的效果圖是基礎(chǔ)，這不僅僅需要達到網(wǎng)站建設(shè)方的需求，還一定要能滿足用戶訪問的視頻網(wǎng)站的需要。效果圖可以應(yīng)用圖形圖像處理軟件Photoshop來設(shè)計，網(wǎng)站的logo、網(wǎng)站的介紹、導(dǎo)航條的設(shè)計、版權(quán)信息等是主要的設(shè)計內(nèi)容。下面以首頁的版式和導(dǎo)航菜單為例做簡要說明。

網(wǎng)站首頁：將Photoshop制作的設(shè)計效果圖轉(zhuǎn)化成網(wǎng)站首頁的平面圖之后，再根據(jù)該圖應(yīng)用DIV+CSS布局技術(shù)設(shè)計網(wǎng)站首頁的整體結(jié)構(gòu)。對微課視頻資源網(wǎng)站的主頁頁面的結(jié)構(gòu)進行劃分的理念依據(jù)就是應(yīng)用 DIV+CSS 技術(shù)對網(wǎng)頁進行布局。以此可將網(wǎng)站首頁利用DIV技術(shù)劃分成“頭部”、“主要部分”、“底部”上中下3個部分，這3個部分的頁面樣式由CSS樣式來控制。其中網(wǎng)站的logo、主導(dǎo)航條部分在布局的時候應(yīng)用 DIV技術(shù)，采用左右浮動來進行精準(zhǔn)定位。該網(wǎng)站首頁的底部存放版權(quán)方面的信息，也使用DIV標(biāo)簽實現(xiàn)布局。之后通過CSS樣式的設(shè)置，可以改變各區(qū)域信息的字體、字號、顏色、背景圖片等格式，也能通過它來控制每個DIV標(biāo)簽的寬度、高度和位置等屬性。

導(dǎo)航條下拉菜單：因為該微課視頻資源庫網(wǎng)站要展示的內(nèi)容繁多，應(yīng)用DIV+CSS布局技術(shù)僅僅只完成網(wǎng)站首頁的頁面制作與設(shè)計是不夠的，清晰明了地通過導(dǎo)航顯示各項視頻資源才能使瀏覽者輕松的瀏覽網(wǎng)站，這就需要設(shè)置二級菜單甚至是三級菜單來完成。可在網(wǎng)頁的相應(yīng)位置插入Spry菜單來實現(xiàn)快速菜單的插入，當(dāng)鼠標(biāo)經(jīng)過主菜單項時顯示相應(yīng)的二級菜單項，鼠標(biāo)離開時相應(yīng)的二級菜單項則會即時隱藏。默認(rèn)格式下的菜單文字字體和背景等勢必會與網(wǎng)站主題格格不入，這就需要再使用CSS樣式技術(shù)對制作的菜單給予默認(rèn)背景及鼠標(biāo)經(jīng)過時背景格式的設(shè)置了。

5 總結(jié)

以往傳統(tǒng)使用的表格的布局技術(shù)便于初學(xué)者學(xué)習(xí)使用，網(wǎng)頁制作的比較快，操作的難度也低，針對網(wǎng)頁設(shè)計剛?cè)腴T的學(xué)者而言較為合適。但是隨著網(wǎng)頁制作技術(shù)的不斷發(fā)展與創(chuàng)新，使得以表格作為主要布局方式的網(wǎng)頁，其后期對頁面的維護將會變得繁瑣異常，雖然說在制作網(wǎng)頁的時候使用DIV+CSS布局技術(shù)會比表格的布局技術(shù)難度大大加大，但是在網(wǎng)站設(shè)計中對于該項技術(shù)的開發(fā)與重構(gòu)是具有廣闊的應(yīng)用前景的。本文通過某微課視頻資源庫網(wǎng)站對該種DIV+CSS布局技術(shù)的實踐應(yīng)用進行淺顯的探討，以顯示出DIV+CSS技術(shù)應(yīng)用在網(wǎng)頁布局中的絕對優(yōu)勢。

參考文獻

[1] 武海麗，李彩玲. DIV+CSS技術(shù)在網(wǎng)頁制作與設(shè)計中的應(yīng)用研究[J].無線互聯(lián)科技，2016（3）： 69-70.

[2] 鄒壽春. 基于DIV+CSS技術(shù)的網(wǎng)頁設(shè)計研究[J].綏化學(xué)院學(xué)報， 2015（9）： 147-151.

[3] 鐘艷華，毛敏莉. CSS+DIV布局方法用于網(wǎng)頁制作的實踐探究[J].電腦迷， 2016（6）：51-53.

[4] 王微. DIV+CSS技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用研究[J]. 電腦編程技巧與維護.2017.08： 73-75.

[5] 楊瑞梅. 淺談DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計與制作中的應(yīng)用 [J]. 信息記錄材料， 2017（7）：118-120.

[6] 王海榕. DIV+CSS技術(shù)在網(wǎng)頁布局中的應(yīng)用[J]. 電子技術(shù)與軟件工程，2017（4）：14-15.

（收稿日期： 2019.11.07）