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

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

　　關鍵詞：DIV+CSS布局,網頁設計,HTML,CSS

　　1DIV+CSS布局簡介

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

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

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

　　2教學難點與重點的化解

　　2.1讓學生熟悉HTMl代碼

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

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

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

　　2.2CSS的語法

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

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

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

　�、菢撕炦x擇器，針對某一個或某一組便簽進行設定。

　�、韧ㄓ眠x擇器，用“*”表示，用來定義所有元素對象的樣式。

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

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

　　2.3CSS中框模型的理解

　　學生學習了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.4CSS中的浮動

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

　　div標簽可以把網頁頁面劃分為若干個獨立的部分，便于網頁頁面的布局和組織。但是采用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.6DIV+CSS布局要點

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

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

　�、茖τ诓煌瑸g覽器而言，對于相同的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]郭軍軍，常用網頁布局對比研究[J].信息技術，2012.11：108-110

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

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

---

轉載請注明來自：http://www.jinnzone.com/jisuanjiyingyonglw/26318.html