“網(wǎng)頁設(shè)計”課程中DIV+CSS布局技術(shù)的教學(xué)

孟慶軒

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

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

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

0 引言

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

1 DIV+CSS布局簡介

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

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

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

2 教學(xué)難點與重點的化解

2.1 讓學(xué)生熟悉HTMl代碼

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

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

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

2.2 CSS的語法

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

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

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

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

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

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

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

2.3 CSS中框模型的理解

學(xué)生學(xué)習(xí)了HTMl代碼和CSS的語法結(jié)構(gòu)后，即完成了基本知識的學(xué)習(xí)。深入理解CSS中框模型是掌握DIV+CSS布局的關(guān)鍵。

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

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

2.4 CSS中的浮動

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

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

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

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

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

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

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

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

2.6 DIV+CSS布局要點

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

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

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

*{

margin：0；

padding：0；

}

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

#Nav，#Content，#Footer {

margin-left：auto；

margin-right：auto；

}

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

#link{

height：38px；

line-height：38px；

}

3 結(jié)束語

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

參考文獻：

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

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

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

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

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

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

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