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

2009-12-31 00:00:00崔琦

商場現(xiàn)代化 2009年19期

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

一、基本概念

1.DIV

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

層中的內(nèi)容

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

2.CSS

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

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

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

其中帶下劃線的部分就是CSS樣式表的內(nèi)容，該代碼的作用是用紅色10pt字體顯示文本“CSS樣式表”。這種方法盡管使用簡單、顯示直觀，但不怎么常用，因為這樣添加無法完全發(fā)揮樣式表的優(yōu)勢，即“內(nèi)容結(jié)構(gò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是單獨保存的樣式表文件，其內(nèi)容包含了各種樣式的定義，如:

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

.waring{color:red;}

3.選擇符

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

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

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

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

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

padding_right+border_right+margin_right

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

padding_bottom+border_bottom+margin_bottom

二、應用實例

1.Web標準導航條

導航條