□雒 虹

一、引言

隨著時(shí)代的發(fā)展進(jìn)步，網(wǎng)絡(luò)計(jì)算機(jī)技術(shù)的飛速發(fā)展進(jìn)步，網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域也有了極其廣泛的發(fā)展空間，各個(gè)院校都開(kāi)設(shè)了網(wǎng)頁(yè)設(shè)計(jì)這一學(xué)科的教學(xué)，為培養(yǎng)這方面更多的人才對(duì)推動(dòng)我國(guó)網(wǎng)頁(yè)設(shè)計(jì)專業(yè)的發(fā)展進(jìn)程作出重要的貢獻(xiàn)。目前，在我國(guó)網(wǎng)頁(yè)設(shè)計(jì)這一學(xué)科的教學(xué)過(guò)程中，教學(xué)使用的軟件一般都是Dreamweaver，這一軟件在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，網(wǎng)頁(yè)布局法最常用的就是Table 頁(yè)面布局以及DIV+CSS 頁(yè)面布局這兩種，本文就深入了解分析DIV+CSS 頁(yè)面布局法這一頁(yè)面布局法解決傳統(tǒng)表格布局法的不足之處，利于后期的網(wǎng)頁(yè)維護(hù)和修改工作的進(jìn)行，簡(jiǎn)化了代碼，從而減少了網(wǎng)絡(luò)資源的浪費(fèi)。由于DIV +CSS 布局在當(dāng)今社會(huì)的應(yīng)用中受到廣泛的歡迎，因此，我國(guó)各院校也應(yīng)重視這一布局法在網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中的應(yīng)用，改變傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)教學(xué)課堂的教學(xué)氛圍，提高教學(xué)質(zhì)量，從而對(duì)提高學(xué)生的能力起到深遠(yuǎn)的作用。

二、DIV+CSS 布局

(一)傳統(tǒng)的網(wǎng)頁(yè)頁(yè)面布局法。在傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)教學(xué)過(guò)程中，使用的頁(yè)面布局法主要是表格頁(yè)面布局和框架布局。表格布局法的優(yōu)勢(shì)在于可以隨意設(shè)置單元格的高度和寬度，還可以實(shí)現(xiàn)嵌套，能讓網(wǎng)頁(yè)中的各元素都擺放在預(yù)期的地方;它的操作簡(jiǎn)單易行，可以完成各種版式的布局。但是它也存在很多缺點(diǎn)，比如說(shuō)在設(shè)計(jì)復(fù)雜的網(wǎng)頁(yè)時(shí)候，HTML 文檔內(nèi)容將會(huì)特別多，這樣瀏覽器在加載完表格再顯示頁(yè)面的過(guò)程中，要消耗很長(zhǎng)的時(shí)間，此外，表格布局法還可能使HTML 文檔的內(nèi)部結(jié)構(gòu)混亂，其頁(yè)面的維修和修改工作也特別困難。

(二)含義。DIV 是一種容器性質(zhì)的元素，它的存在是為HTML 文檔內(nèi)容提供結(jié)構(gòu)和背景，它是由起始標(biāo)簽＜div ＞和結(jié)束標(biāo)簽＜/div ＞之間的內(nèi)容構(gòu)成的。CSS 就是層疊樣式表，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的排版和風(fēng)格的，使網(wǎng)頁(yè)變得更加豐富。CSS 由兩個(gè)主要部分組成:選擇器和聲明，其中選擇器的使用需要改變樣式的元素;聲明則是由一個(gè)屬性一個(gè)值組合成的，屬性和值需要用冒號(hào)來(lái)隔開(kāi)，聲明和聲明之間需要用分號(hào)來(lái)隔開(kāi)。如果要將網(wǎng)頁(yè)頁(yè)面上的元素實(shí)現(xiàn)一對(duì)一的控制，就需要使用CSS 選擇器，常用的有標(biāo)簽選擇器、類選擇器、id 選擇器、群組選擇器以及后代選擇器這幾種，它們都有著各自的優(yōu)點(diǎn)和缺點(diǎn)。

(三)布局原理。DIV +CSS 頁(yè)面布局法是WEB 設(shè)計(jì)的標(biāo)準(zhǔn)，它和以往的表格頁(yè)面布局法有著明顯的不同之處，可以實(shí)現(xiàn)網(wǎng)頁(yè)頁(yè)面內(nèi)容和表現(xiàn)分離，其中DIV 是用來(lái)完成網(wǎng)頁(yè)的框架結(jié)構(gòu)，CSS 是用來(lái)美化網(wǎng)站的樣式，它們的共同使用可以將網(wǎng)站進(jìn)行重構(gòu)，使網(wǎng)站進(jìn)一步實(shí)現(xiàn)標(biāo)準(zhǔn)化，簡(jiǎn)化HTML 文檔內(nèi)容的代碼，有利于網(wǎng)站結(jié)構(gòu)的搭建。

三、網(wǎng)頁(yè)設(shè)計(jì)教學(xué)過(guò)程中DIV+CSS 布局法的應(yīng)用路徑

(一)DIV+CSS 布局法的優(yōu)點(diǎn)。

1．使網(wǎng)頁(yè)結(jié)構(gòu)實(shí)現(xiàn)標(biāo)準(zhǔn)化。由于傳統(tǒng)的表格頁(yè)面布局法使用過(guò)程中，網(wǎng)頁(yè)垃圾代碼過(guò)多，用于裝飾的樣式和頁(yè)面布局代碼的混合導(dǎo)致頁(yè)面結(jié)構(gòu)不美觀，此外，表格頁(yè)面布局中的多層嵌套、單元格的合并與拆分這些對(duì)一個(gè)單元格的調(diào)整工作，都會(huì)影響到其余單元格的表現(xiàn)效果。但是DIV+CSS 頁(yè)面布局法很好地解決了這一問(wèn)題，在頁(yè)面布局設(shè)計(jì)的時(shí)候，使用DIV 盒子來(lái)確定大小，其邊框局、間距等多種屬性都可以進(jìn)行數(shù)值上的調(diào)整，這就使網(wǎng)頁(yè)頁(yè)面的結(jié)構(gòu)塑造性極強(qiáng)。

2．使網(wǎng)頁(yè)內(nèi)容和樣式相分離。DIV +CSS 頁(yè)面布局法的使用，解決了以往網(wǎng)頁(yè)風(fēng)格不統(tǒng)一的問(wèn)題，有利于更新和網(wǎng)頁(yè)維修修護(hù)工作的進(jìn)行。DIV(網(wǎng)頁(yè)內(nèi)容)和CSS(樣式)的相互分離，一般是通過(guò)將頁(yè)面內(nèi)容放到HTML 文檔文件中而樣式則放在單獨(dú)的CSS 文件里，當(dāng)需要進(jìn)行網(wǎng)頁(yè)內(nèi)容修改時(shí)候，只需要對(duì)HTML文件改動(dòng)，對(duì)網(wǎng)頁(yè)頁(yè)面效果修改時(shí)候，則只需要對(duì)CSS 文件中的內(nèi)容進(jìn)行修改即可，大大節(jié)省了工作的時(shí)間和人力的消耗。DIV+CSS 頁(yè)面布局法將網(wǎng)頁(yè)內(nèi)容和樣式的分離，對(duì)網(wǎng)頁(yè)的更新工作帶來(lái)極大的便利，此外，還可以實(shí)現(xiàn)網(wǎng)頁(yè)風(fēng)格的相互統(tǒng)一。

3．優(yōu)化搜索引擎。網(wǎng)頁(yè)設(shè)計(jì)中的搜索引擎主要是針對(duì)網(wǎng)頁(yè)內(nèi)容也就是文字、代碼完成的，而傳統(tǒng)的表格頁(yè)面布局法中使用的頁(yè)面代碼過(guò)多，搜索引擎工作很難完成。但是DIV +CSS 頁(yè)面布局法中的網(wǎng)頁(yè)代碼簡(jiǎn)潔，在進(jìn)行搜索引擎工作的時(shí)候，只需要將被搜索的內(nèi)容從HTML 文檔中的代碼進(jìn)行搜索即可，搜索引擎只需要輸入搜索內(nèi)容的關(guān)鍵詞，減少了繁復(fù)的搜索內(nèi)容，提高了搜索引擎工作的效率，減少了大量的工作時(shí)間。

(二)DIV+CSS 布局在網(wǎng)頁(yè)設(shè)計(jì)中的具體應(yīng)用路徑。DIV+CSS 這一布局法在網(wǎng)頁(yè)設(shè)計(jì)學(xué)科的教學(xué)過(guò)程中有著重要的作用，但是其技術(shù)性較高，操作困難，這就需要老師在教學(xué)過(guò)程中通過(guò)以下路徑提高教學(xué)質(zhì)量。

1．教學(xué)內(nèi)容。目前，我國(guó)多數(shù)網(wǎng)頁(yè)設(shè)計(jì)課程采用的教材在DIV+CSS 布局這方面的講解都是從含義講起再分析字體、表格、圖像等屬性，內(nèi)容散亂無(wú)章，學(xué)生學(xué)起來(lái)也顯得十分困難。因此，應(yīng)該從教學(xué)內(nèi)容的制定上實(shí)現(xiàn)創(chuàng)新，教學(xué)內(nèi)容由簡(jiǎn)單到困難，不斷深入了解其具體含義。教學(xué)內(nèi)容困難度的由淺及深，可以使學(xué)生在輕松愉悅的氛圍中學(xué)習(xí)，激發(fā)學(xué)生的學(xué)習(xí)興趣，這樣網(wǎng)頁(yè)設(shè)計(jì)這一學(xué)科的教學(xué)質(zhì)量才能得到進(jìn)一步的提高，學(xué)生自身的知識(shí)能力水平也將得到大幅度的進(jìn)步。

2．教學(xué)方法。隨著社會(huì)的發(fā)展進(jìn)步，我國(guó)教學(xué)事業(yè)也得到了飛速的進(jìn)步，教學(xué)理念都發(fā)生了巨大的改變，在當(dāng)今教學(xué)活動(dòng)中，應(yīng)該彰顯學(xué)生在課堂中的主體地位。這就需要從教學(xué)方法開(kāi)始作出改變。傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)課程都是通過(guò)老師控制學(xué)生電腦演示設(shè)計(jì)過(guò)程來(lái)完成的，這種講課方法學(xué)生無(wú)法親自動(dòng)手參與到課堂教學(xué)中，老師講完后讓學(xué)生自己輸入代碼，學(xué)生就被動(dòng)輸入代碼，這樣學(xué)生的思維得不到培養(yǎng)，教學(xué)質(zhì)量也將受到限制。因此，老師應(yīng)該創(chuàng)新教學(xué)方法，充分利用先進(jìn)的多媒體技術(shù)，不再操作學(xué)生的電腦，讓學(xué)生自己動(dòng)手，自主思考問(wèn)題，這樣教學(xué)質(zhì)量才能得到提高。

3．教學(xué)評(píng)價(jià)。傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)教學(xué)考核主要是通過(guò)試卷完成的，這不符合這一學(xué)科的特征，因此，老師要在教學(xué)評(píng)價(jià)上實(shí)現(xiàn)創(chuàng)新，可以通過(guò)綜合課程設(shè)計(jì)以及期末機(jī)房考試這兩部分實(shí)現(xiàn)對(duì)學(xué)生的考核，既可以檢查學(xué)生平常上課中綜合案例的掌握情況，又可以檢測(cè)學(xué)生的網(wǎng)頁(yè)設(shè)計(jì)情況，教學(xué)評(píng)價(jià)體系的創(chuàng)新對(duì)推動(dòng)學(xué)生的學(xué)習(xí)有著重要的作用。

四、結(jié)語(yǔ)

總體說(shuō)來(lái)，在當(dāng)今社會(huì)形勢(shì)下，各院校都要綜合考慮社會(huì)市場(chǎng)對(duì)網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域人才的需求以及這一學(xué)科自身的特點(diǎn)，制定合理的教學(xué)內(nèi)容、教學(xué)方法，提高學(xué)生的綜合素質(zhì)，重視DIV +CSS 布局在網(wǎng)頁(yè)設(shè)計(jì)教學(xué)過(guò)程中的應(yīng)用，使學(xué)生充分掌握這一技術(shù)。

［1］黃玉春，陳霞．DIV +CSS 布局在網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中的應(yīng)用研究［J］．電腦知識(shí)與技術(shù)，2013，10

［2］王愛(ài)菊，楊金川．DIV +CSS 布局在《網(wǎng)頁(yè)制作》課程中的教學(xué)改革探究［J］．無(wú)線互聯(lián)科技，2015，5