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

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

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

　　1DIV+CSS布局簡(jiǎn)介

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

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

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

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

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

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

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

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

　　2.2CSS的語(yǔ)法

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

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

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

　�、菢�(biāo)簽選擇器，針對(duì)某一個(gè)或某一組便簽進(jìn)行設(shè)定。

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

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

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

　　2.3CSS中框模型的理解

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

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

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

　　2.4CSS中的浮動(dòng)

　　浮動(dòng)布局是進(jìn)行DIV+CSS布局的主要方式，采用float屬性的元素可以形成一個(gè)塊級(jí)框向左或向右浮動(dòng)。

　　div標(biāo)簽可以把網(wǎng)頁(yè)頁(yè)面劃分為若干個(gè)獨(dú)立的部分，便于網(wǎng)頁(yè)頁(yè)面的布局和組織。但是采用div標(biāo)簽的默認(rèn)行為往往無(wú)法達(dá)到自己所需要的布局效果。如圖2所示，當(dāng)需要把Content部分劃分為L(zhǎng)eft和Main兩個(gè)獨(dú)立的部分進(jìn)行布局時(shí)，就需要為相應(yīng)的div標(biāo)簽采用浮動(dòng)。當(dāng)然，不管是向左浮動(dòng)還是向右浮動(dòng)，都會(huì)影響div標(biāo)簽的兩邊，從而打破了原有的文檔流，所以對(duì)于后續(xù)的div標(biāo)簽，當(dāng)需要取消浮動(dòng)時(shí)需要采用clear屬性[5]。浮動(dòng)布局是DIV+CSS布局的主要形式，必須讓學(xué)生掌握。教學(xué)實(shí)踐發(fā)現(xiàn)，學(xué)生對(duì)于浮動(dòng)的概念是能夠理解的，但是在使用上存在問(wèn)題。比如：對(duì)于上面的例子而言，有一部分學(xué)生在添加浮動(dòng)屬性的時(shí)候，只給id屬性為L(zhǎng)eft的div標(biāo)簽添加了浮動(dòng)，忽略了id屬性為Main的div標(biāo)簽對(duì)于浮動(dòng)的需要。針對(duì)此問(wèn)題，教師在講解時(shí)需要耐心，并且邊講解邊演示，加深學(xué)生的認(rèn)知。

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

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

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

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

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

　　2.6DIV+CSS布局要點(diǎn)

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

　�、裴槍�(duì)網(wǎng)頁(yè)層次結(jié)構(gòu)，給每個(gè)元素準(zhǔn)確命名：網(wǎng)頁(yè)的布局都是從整體到細(xì)節(jié)，在布局前需要根據(jù)頁(yè)面情況將頁(yè)面劃分為若干了獨(dú)立的部分，并通過(guò)div標(biāo)簽進(jìn)行布局。對(duì)于每個(gè)獨(dú)立部分需要設(shè)定直觀的名字，便于css代碼的書(shū)寫(xiě)和以后的維護(hù)[6]。

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

　　*{

　　margin：0；

　　padding：0；

　　}

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

　　#Nav，#Content，#Footer{

　　margin-left：auto；

　　margin-right：auto；

　　}

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

　　#link{

　　height：38px；

　　line-height：38px；

　　}

　　3結(jié)束語(yǔ)

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

　　參考文獻(xiàn)：

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

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

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

---

轉(zhuǎn)載請(qǐng)注明來(lái)自：http://www.jinnzone.com/jisuanjiyingyonglw/26318.html