淺談如何進行“DIV+CSS”教學

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

一、基本概念

1.DIV

DIV全稱division，在網頁設計中將其稱為層，使用DIV的方法跟使用其他HTML標記的方法一樣，其基本語法是:

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

2.CSS

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

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

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

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

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

< head>

< style type=”text/css”>

.waring{color:red;}

< /style>

< /head>

CSS樣式表

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

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

< head>

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

< /head>

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

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

.waring{color:red;}

3.選擇符

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

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

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

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

CSS中的width屬性指盒子中的內容的寬度，而整個盒子的實際寬度為:盒子寬度=padding_left+border_left+margin_eft+width+

padding_right+border_right+margin_right

相應地，CSS的height屬性指盒子內容的高度，而整個盒子的實際高度為:盒子高度margin_top+border_top+padding_top+height+

padding_bottom+border_bottom+margin_bottom

二、應用實例

1.Web標準導航條

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

2.頁面水平居中

正文內容

3.頁面布局

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

頁面布局是網頁設計的重點，同時頁面的布局樣式有很多，在此不一一列舉，在教學中，只要讓學生充分理解CSS的盒子模型，并掌握應用CSS控制頁面元素的方法就能用DIV輕松布局。

參考文獻:

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