目前，網(wǎng)頁(yè)設(shè)計(jì)界內(nèi)越來(lái)越關(guān)注“DIV+CSS”的標(biāo)準(zhǔn)化設(shè)計(jì)，大到各大門戶網(wǎng)站，小到不計(jì)其數(shù)的個(gè)人網(wǎng)站，都在使用“DIV+CSS”這一新的技術(shù)開發(fā)或重構(gòu)自己的網(wǎng)站，因此，在網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中也必須將這一部分整合到課堂教學(xué)中去，才能使學(xué)生掌握網(wǎng)頁(yè)設(shè)計(jì)的新技術(shù)，從而更快更好地勝任今后的工作。然而，實(shí)際的教學(xué)中又存在很多制約因素，例如，目前大部分教材中對(duì)于CSS只是進(jìn)行概念的表述及屬性設(shè)定的介紹，真正如何使用CSS談得很少，而對(duì)于DIV更是幾乎不談，網(wǎng)頁(yè)布局仍然是以表格為主，教學(xué)內(nèi)容相對(duì)滯后顯然不利于學(xué)生的發(fā)展，因此，必須將“DIV+CSS”納入教學(xué)?？墒恰癉IV+CSS”所涵蓋的內(nèi)容豐富，使用又非常靈活多樣，如何在有限的課時(shí)中讓學(xué)生掌握這部分的內(nèi)容成為了教學(xué)的難點(diǎn)，為了解決這個(gè)問(wèn)題，必須在教學(xué)內(nèi)容的組織和安排上下功夫，選擇最具代表性、實(shí)用性的內(nèi)容作為教學(xué)的重點(diǎn)。下面就對(duì)“DIV+CSS”的教學(xué)內(nèi)容進(jìn)行簡(jiǎn)要介紹。

一、基本概念

1.DIV

DIV全稱division，在網(wǎng)頁(yè)設(shè)計(jì)中將其稱為層，使用DIV的方法跟使用其他HTML標(biāo)記的方法一樣，其基本語(yǔ)法是:

但它不像表格或標(biāo)題等內(nèi)容具有實(shí)際的意義，DIV只是一個(gè)“容器”，用來(lái)在其中放置頁(yè)面中的其他元素，然后再利用CSS樣式在頁(yè)面中布置這個(gè)容器的擺放位置，以實(shí)現(xiàn)頁(yè)面的布局。

2.CSS

(1)CSS的概念。CSS(Cascading Stylesheets，層疊樣式表)是一種制作網(wǎng)頁(yè)的新技術(shù)，現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持，成為網(wǎng)頁(yè)設(shè)計(jì)必不可少的工具之一。樣式表首先要做的將網(wǎng)頁(yè)上的元素精確地定位，其次它實(shí)現(xiàn)了網(wǎng)頁(yè)上的內(nèi)容結(jié)構(gòu)和格式控制相分離。

(2)添加層疊樣式表的方法。①行內(nèi)樣式表。這是一種最簡(jiǎn)單的方法，就是將樣式表直接添加在HTML的標(biāo)記里，如:

< p style=”color: red; font-size: 10pt”>CSS樣式表< /p>

其中帶下劃線的部分就是CSS樣式表的內(nèi)容，該代碼的作用是用紅色10pt字體顯示文本“CSS樣式表”。這種方法盡管使用簡(jiǎn)單、顯示直觀，但不怎么常用，因?yàn)檫@樣添加無(wú)法完全發(fā)揮樣式表的優(yōu)勢(shì)，即“內(nèi)容結(jié)構(gòu)和格式控制”相分離，

②嵌入式樣式表。樣式表添加在HTML的< head>標(biāo)記里，如:

< head>

< style type=”text/css”>

.waring{color:red;}

< /style>

< /head>

CSS樣式表

其中，.waring是一個(gè)類樣式，段落“CSS樣式表”應(yīng)用了該樣式，則文本以紅色顯示。

(3)鏈接樣式表。這種樣式表同樣是添加在HTML的< head>標(biāo)記里:

< head>

< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>

< /head>

其中，*.css是單獨(dú)保存的樣式表文件，其內(nèi)容包含了各種樣式的定義，如:

p{font-size:14px;color:blue;}

.waring{color:red;}

3.選擇符

(1)類型選擇符。就是HTML文檔中的元素，如p，a，table等。

(2)類選擇符。以英文“.”開頭，后面的名稱可以自定，如上面的.waring就是一個(gè)類選擇符。

(3)ID選擇符。ID選擇符的定義方法根類基本類似，只是開頭用英文“#”號(hào)。

(4)CSS盒模型。CSS標(biāo)準(zhǔn)中規(guī)定，網(wǎng)頁(yè)元素應(yīng)放在一個(gè)盒子(box)中，而網(wǎng)頁(yè)元素的定位實(shí)際就是這些大大小小的盒子在頁(yè)面中的定位，可以通過(guò)創(chuàng)建定義來(lái)控制這個(gè)盒子的屬性，盒模型主要定義四個(gè)區(qū)域:內(nèi)容(content)、內(nèi)邊距(填充)(padding)、邊框(border)和外邊距(邊界)(margin)。盒模型的示意圖如圖1所示。

CSS中的width屬性指盒子中的內(nèi)容的寬度，而整個(gè)盒子的實(shí)際寬度為:盒子寬度=padding_left+border_left+margin_eft+width+

padding_right+border_right+margin_right

相應(yīng)地，CSS的height屬性指盒子內(nèi)容的高度，而整個(gè)盒子的實(shí)際高度為:盒子高度margin_top+border_top+padding_top+height+

padding_bottom+border_bottom+margin_bottom

二、應(yīng)用實(shí)例

1.Web標(biāo)準(zhǔn)導(dǎo)航條

以上代碼瀏覽效果如圖2所示。

2.頁(yè)面水平居中

正文內(nèi)容

3.頁(yè)面布局

頁(yè)面布局為三欄(帶導(dǎo)航欄及頁(yè)腳)并居中，代碼如下:

頁(yè)面布局是網(wǎng)頁(yè)設(shè)計(jì)的重點(diǎn)，同時(shí)頁(yè)面的布局樣式有很多，在此不一一列舉，在教學(xué)中，只要讓學(xué)生充分理解CSS的盒子模型，并掌握應(yīng)用CSS控制頁(yè)面元素的方法就能用DIV輕松布局。

參考文獻(xiàn):

李 燁:別具光芒DIV+CSS網(wǎng)頁(yè)布局與美化[M].人民郵電出版社，2005.9-11