孟慶軒

摘 要： DIV+CSS布局技術已經(jīng)成為當下流行的網(wǎng)頁布局技術，文章探討了在“網(wǎng)頁設計”課程的教學方法，該方法能夠讓學生利用HTML和CSS（層疊樣式表）代碼書寫進行網(wǎng)頁布局。

關鍵詞： DIV+CSS布局； 網(wǎng)頁設計； HTML； CSS

中圖分類號：G642 文獻標志碼：A 文章編號：1006-8228（2013）09-59-02

0 引言

網(wǎng)頁設計是高職計算機專業(yè)的一門專業(yè)基礎課程，該課程重點講解網(wǎng)頁的布局技術?，F(xiàn)階段主流的網(wǎng)站都采用了DIV+CSS布局技術，如何開展這方面的教學是需要網(wǎng)頁設計課程工作者進行研究與實踐的。本文對此進行了探討。

1 DIV+CSS布局簡介

在以前的網(wǎng)頁布局中大都采取表格布局，此種布局方法采用Dreamweaver軟件的設計視圖進行操作，在操作上雖然簡單、直觀，但是卻存在諸多缺點：源代碼存在大量的冗余代碼、頁面結構與表現(xiàn)混雜在一起不利于信息的檢索、不利于網(wǎng)站的維護與修改[1]。

為了解決上述問題，DIV+CSS布局技術應運而生。DIV+CSS布局技術采用HTML中的div進行整體布局，之后采用CSS（Cascading Style Sheets）即層疊樣式表進行網(wǎng)頁的表現(xiàn)設定。這樣的好處是：網(wǎng)站的內容與表現(xiàn)完全分離，網(wǎng)站的維護與修改更加容易，便于搜索引擎檢索到自己的網(wǎng)站[2]。

但是DIV+CSS布局技術相對于表格布局而言也存在布局方法不直觀，不容易掌握的缺點，學生會因此在學習的過程中困難重重，本文針對這些問題進行了探討。

2 教學難點與重點的化解

2.1 讓學生熟悉HTMl代碼

進行DIV+CSS布局的前提是熟悉HTML代碼的使用。對于高職院校的學生而言，軟件的直觀操作是他們容易接受的，而代碼的書寫是他們不容易接受的。所以在進行網(wǎng)頁設計教學的過程中，我們利用課程前期的若干課時講解Dreamweaver軟件的使用，采用的布局方法是表格布局。此時主要采取Dreamweaver軟件的設計視圖進行操作，學生易于接受。不過在講解的時候，不僅要講解軟件的使用，還要講解相應自動生成的HTML代碼，讓學生通過界面操作建立的網(wǎng)頁元素和相應的HTML代碼建立起初步的對應關系。

例如：對于鏈接的使用，在設計視圖中只需要選擇網(wǎng)頁上的圖片或文字，之后在屬性面板中的“鏈接（L）”中設置即可。在講解的時候還需要把Dreamweaver切換到代碼視圖，講解HTML代碼中標簽的語法結構。在學生自己做練習的時候，鼓勵學生結合HTML代碼進行操作，讓他們對HTML代碼有個初步的認知。

接下來對HTML代碼進行綜合的講解與練習，讓學生掌握基本HTML標簽的使用。此時，可以特別提出div標簽在以后布局中的作用，讓學生初步認識DIV+CSS布局。

2.2 CSS的語法

之后講解CSS的基本語法，重點是CSS選擇器的使用。主要是讓學生掌握以下四種選擇器[3]：

⑴ id選擇器，id選擇器可以為標有特定id的HTML元素指定特定的樣式。id選擇器以"#"來定義。并且，id屬性只能在每個HTML文檔中出現(xiàn)一次。

⑵ 類選擇器，類選擇器以一個點號顯示，使用了html標簽的class屬性。class屬性可以在每個HTML文檔中出現(xiàn)多次。

⑶ 標簽選擇器，針對某一個或某一組便簽進行設定。

⑷ 通用選擇器，用“*”表示，用來定義所有元素對象的樣式。

對于以上知識的學習，不能停留在老師講學生聽的模式，而是要采取講、練結合的方式。

此外對于層疊次序要讓學生理解，當同一個HTML元素被不止一個樣式定義時，究竟哪個樣式起作用。優(yōu)先級由高到低分別為：內聯(lián)樣式、內部樣式表、外部樣式表、瀏覽器缺省設置。其中，外部樣式表使用頻率最高；瀏覽器缺省設置對于沒有設置樣式表的元素起作用，每個瀏覽器的默認設置并不完全相同，要讓學生注意。

2.3 CSS中框模型的理解

學生學習了HTMl代碼和CSS的語法結構后，即完成了基本知識的學習。深入理解CSS中框模型是掌握DIV+CSS布局的關鍵。

框模型如圖1所示。元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現(xiàn)了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。所以，一個元素的背景顏色，應用于由內容和內邊距、邊框組成的區(qū)域。在CSS中，width和 height 指的是內容區(qū)域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區(qū)域的尺寸，但是會增加元素框的總尺寸[4]。

要理解框模型對于內邊距和外邊距的理解至關重要，但是學生往往在內、外邊距的理解上存在困難。教師在講解的時候，可以在頁面中輸入一個div標簽，在這個div標簽里輸入一些文字，并添加背景顏色。先將它的內邊距和外邊距都設為0，寬和高都設為40px，讓學生觀察相應的結果。將它的內邊距設為20px，讓學生看看發(fā)生了什么；之后將這個div標簽的外邊距設為20px，看看發(fā)生了什么。通過以上的講解，學生對于框模型會有一個清晰的認識。

2.4 CSS中的浮動

浮動布局是進行DIV+CSS布局的主要方式，采用float屬性的元素可以形成一個塊級框向左或向右浮動。

div標簽可以把網(wǎng)頁頁面劃分為若干個獨立的部分，便于網(wǎng)頁頁面的布局和組織。但是采用div標簽的默認行為往往無法達到自己所需要的布局效果。如圖2所示，當需要把Content部分劃分為Left和Main兩個獨立的部分進行布局時，就需要為相應的div標簽采用浮動。當然，不管是向左浮動還是向右浮動，都會影響div標簽的兩邊，從而打破了原有的文檔流，所以對于后續(xù)的div標簽，當需要取消浮動時需要采用clear屬性[5]。

浮動布局是DIV+CSS布局的主要形式，必須讓學生掌握。教學實踐發(fā)現(xiàn)，學生對于浮動的概念是能夠理解的，但是在使用上存在問題。比如：對于上面的例子而言，有一部分學生在添加浮動屬性的時候，只給id屬性為Left的div標簽添加了浮動，忽略了id屬性為Main的div標簽對于浮動的需要。針對此問題，教師在講解時需要耐心，并且邊講解邊演示，加深學生的認知。

2.5 塊狀元素與內聯(lián)元素

塊級元素：一般是其他元素的容器，可容納內聯(lián)元素和其他塊狀元素，塊狀元素排斥其他元素與其位于同一行，寬度（width）高度（height）起作用。常見塊狀元素為div和p。

內聯(lián)元素：內聯(lián)元素只能容納文本或者其他內聯(lián)元素，它允許其他內聯(lián)元素與其位于同一行，但寬度（width）和高度（height）不起作用。常見內聯(lián)元素為“a”。

塊級元素和內聯(lián)元素的轉化通過display屬性來完成。

塊級元素和內聯(lián)元素是DIV+CSS布局中的重要概念，對于它們的理解，學生只要掌握了框模型就很容易理解。所以，在講解塊級元素和內聯(lián)元素時，重點是關注它們的不同，并復習一下框模型即可。

2.6 DIV+CSS布局要點

學習完以上部分，即完成了DIV+CSS布局的主要知識的學習，之后學生就可以進行布局練習了。對于初學者而言，一些布局要點還是需要教師指出的，本人總結了如下兩點。

⑴ 針對網(wǎng)頁層次結構，給每個元素準確命名：網(wǎng)頁的布局都是從整體到細節(jié)，在布局前需要根據(jù)頁面情況將頁面劃分為若干了獨立的部分，并通過div標簽進行布局。對于每個獨立部分需要設定直觀的名字，便于css代碼的書寫和以后的維護[6]。

⑵ 對于不同瀏覽器而言，對于相同的HTML標簽設置了不同內邊距和外邊距數(shù)值，為了保證在不同的瀏覽器中取得同樣的布局效果，需要清除瀏覽器默認的內邊距與外邊距。

*{

margin：0；

padding：0；

}

對于div、圖片等元素的水平居中，css沒有設定單獨的屬性，需要利用左外邊距和右外邊距的設定來達到水平居中的效果。不過在使用前，需要將內聯(lián)元素轉化為塊狀元素：

#Nav，#Content，#Footer {

margin-left：auto；

margin-right：auto；

}

對于文字的定位而言，css提供了文字水平居中的text-align屬性，而對于文字的垂直居中并沒有提供相應的屬性。文字的垂直居中可以通過line-height屬性來完成。當文字所在的元素的高與行間的距離一樣時，可以達到文字水平居中的效果：

#link{

height：38px；

line-height：38px；

}

3 結束語

如上所述，我們采用循序漸進的教學方法先讓學生熟悉HTML代碼，為進行DIV+CSS布局教學打下基礎；之后講解CSS基本語法、框模型、浮動、塊狀元素與內聯(lián)元素，其中框模型的理解最為重要。此外，本文還總結了學生所遇到的布局要點。本文給出的方法為學生盡快掌握DIV+CSS布局提供了幫助。

參考文獻：

[1] 郭軍軍，常用網(wǎng)頁布局對比研究[J].信息技術，2012.11：108-110

[2] 鄭寧寧.淺析DIV+CSS網(wǎng)頁設計技術[J].山東省農業(yè)管理干部學院學報，2008.6：169-170

[3] 袁紅霞.運用DIV+CSS設計網(wǎng)站布局[J].科技咨詢，2012.33：22

[4] 梁靜琳.DIV+CSS布局技術在網(wǎng)頁設計中的應用[J].武漢工程職業(yè)技術學院學報，2009.3：42-43

[5] 梁小芳.網(wǎng)頁布局中的浮動與定位應用研究[J].廣東教育學院學報，2010.6：80-81

[6] 林婷婷.以Div+CSS思想引導學生學習編寫網(wǎng)頁的新教法[J].科技信息，2009.11：460

[7] w3school在線教程，http：//www.w3school.com.cn/index.html.