DIV+CSS技術在網頁設計布局中的應用研究

李彥

摘 要：信息科學技術的進步使得互聯網信息技術的發展突飛猛進，其中網頁設計作為互聯網技術中的重要部分，應用先進技術提高工作效率與工作質量對網頁設計具有重要意義。DIV+CSS 技術在網頁布局中的優勢作用使得其在網頁設計與開發中應用越來越廣泛。基于此，首先對 DIV+CSS 技術進行概述，然后對其在網頁布局中的優勢與應用原理進行分析。

關鍵詞：DIV; CSS; 網頁布局; 應用

中圖分類號： TP393.092

文獻標志碼： 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 引言

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

1 DIV+CSS技術概述

1.1 DIV技術

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

1.2 CSS技術

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

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

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

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

1.2.1 標簽選擇器

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

1.2.2 類選擇器

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

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

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

1.2.3 ID選擇器

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

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

1.3 DIV+CSS技術

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

2 DIV+CSS技術在網頁布局中應用的原理

2.1 盒子模型

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

2.2 定位和浮動

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

3 DIV+CSS技術在網頁布局中的優勢

在制作網頁的過程中使用DIV+CSS頁面布局技術不僅僅是設計方式的轉變，更是設計思想的轉變，這一轉變為網頁制作者或是初學者設計網頁都帶來了許多的便利。采用DIV+CSS在網頁布局的方式優點有很多，主要有以下幾點。

3.1 內容與樣式分離，精簡代碼

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

3.2 網站頁面瀏覽速度大大提高

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

3.3 提高搜索引擎對網頁的索引效率

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

3.4 網頁的維護變得方便快捷

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

3.5 統一頁面元素格式，保持視覺的一致性

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

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

4 DIV+CSS布局技術在某微課視頻資源網站中的簡單應用

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

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

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

5 總結

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

參考文獻

[1] 武海麗，李彩玲. DIV+CSS技術在網頁制作與設計中的應用研究[J].無線互聯科技，2016（3）： 69-70.

[2] 鄒壽春. 基于DIV+CSS技術的網頁設計研究[J].綏化學院學報， 2015（9）： 147-151.

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

[4] 王微. DIV+CSS技術在網頁設計中的應用研究[J]. 電腦編程技巧與維護.2017.08： 73-75.

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

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

（收稿日期： 2019.11.07）