DIV+CSS布局在《網(wǎng)頁(yè)制作》課程中的教學(xué)改革探究

王愛(ài)菊　楊金川

摘要：在《網(wǎng)頁(yè)制作》課程中，布局方法—直是學(xué)習(xí)本門課程的重點(diǎn)與難點(diǎn)，DIV+CSS的網(wǎng)頁(yè)布局方法越來(lái)越廣泛地應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)中，表現(xiàn)與內(nèi)容的分離不僅精減了大量Table標(biāo)簽所產(chǎn)生的冗余代碼，而且大大提高了頁(yè)面的瀏覽速度。針對(duì)學(xué)生學(xué)習(xí)DIV+CSS教學(xué)環(huán)節(jié)的特點(diǎn)，從教學(xué)內(nèi)容和教學(xué)手段等方面對(duì)該環(huán)節(jié)進(jìn)行改革。

關(guān)鍵詞：DIV+CSS；網(wǎng)頁(yè)布局；web標(biāo)準(zhǔn)

隨著計(jì)算機(jī)互聯(lián)網(wǎng)的飛速發(fā)展，通過(guò)網(wǎng)頁(yè)獲取信息、交流信息是不可缺少的一個(gè)重要途徑。網(wǎng)站制作應(yīng)用的技術(shù)和顯示頁(yè)面效果的好壞直接影響到使用者的數(shù)量，因DIW+CSS布局方式使網(wǎng)頁(yè)加載速度快、便于維護(hù)、便于更新，采用這種布局方式已成為網(wǎng)頁(yè)制作中的主要潮流。那么從教學(xué)過(guò)程中如何加強(qiáng)這方面的改進(jìn)，培養(yǎng)出更適合網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)的人才，是我們研究的主題。

1 課程中DIV+CSS教學(xué)環(huán)節(jié)現(xiàn)狀

DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)中常用的術(shù)語(yǔ)之一，通常以此說(shuō)明與html網(wǎng)頁(yè)設(shè)計(jì)中表格定位方式的區(qū)別，因在XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)了，早期網(wǎng)頁(yè)設(shè)計(jì)中使用table進(jìn)行布局，但是由于table布局非常不靈活，后期維護(hù)困難，且不利于網(wǎng)頁(yè)瀏覽。因此現(xiàn)在很多的網(wǎng)站多采用DIV+CSS布局頁(yè)面的方式進(jìn)行各種定位。

DIV是用來(lái)為HTML文檔內(nèi)大塊內(nèi)容提供結(jié)構(gòu)和背景的一個(gè)元素。DIV的開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其所包含元素的特性一部分是由DIV標(biāo)簽的屬性進(jìn)行控制，一部分通過(guò)使用樣式表格式化這個(gè)塊進(jìn)行控制。

采用CSS+DIV布局頁(yè)面與傳統(tǒng)的表格布局頁(yè)面有以下幾個(gè)優(yōu)勢(shì)。

1.1 表現(xiàn)和內(nèi)容相分離

它使得頁(yè)面格式設(shè)置與頁(yè)面內(nèi)容獨(dú)立開(kāi)來(lái)，可以單獨(dú)設(shè)置樣式然后應(yīng)用到頁(yè)面中，使網(wǎng)頁(yè)設(shè)計(jì)和管理維護(hù)的效率大為提高。

1.2 提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率

用只包含結(jié)構(gòu)化內(nèi)容的HTML代替了嵌套的標(biāo)簽，搜索引擎將會(huì)更有效地搜索到網(wǎng)頁(yè)內(nèi)容，并給出一個(gè)比較高的評(píng)價(jià)。

1.3 使頁(yè)面載入得更快

因?qū)⒋蟛糠值捻?yè)面代碼寫到CSS中，使頁(yè)面體積容量相對(duì)變得較小。相對(duì)于表格嵌套布局的方式，DIV+CSS布局將頁(yè)面獨(dú)立分成了更多的區(qū)域，當(dāng)打開(kāi)頁(yè)面時(shí)，是逐層加載的，這不像表格嵌套那樣將整個(gè)頁(yè)面套在一個(gè)大表格中，使頁(yè)面加載速度相對(duì)較慢。

1.4 方便修改與維護(hù)

使用了DIV+CSS布局方式，后期的維護(hù)和修改變得更加容易，省時(shí)省力。根據(jù)區(qū)域內(nèi)容標(biāo)記，找到CSS里對(duì)應(yīng)的ID，修改頁(yè)面很方便，也不會(huì)破壞到頁(yè)面中其他部分的布局樣式。如果一個(gè)站點(diǎn)中很多html頁(yè)面都應(yīng)用了同一個(gè)CSS文件，那么可以通過(guò)修改CSS文件，同時(shí)更新應(yīng)用這個(gè)CSS文件的所有網(wǎng)頁(yè)風(fēng)格的格式，不需要再一個(gè)一個(gè)的頁(yè)面進(jìn)行更新了，并且風(fēng)格容易統(tǒng)一化。也可將站點(diǎn)所有的網(wǎng)頁(yè)風(fēng)格都使用同一個(gè)CSS文件控制，修改頁(yè)面風(fēng)格時(shí)，只需要修改這個(gè)CSS文件相應(yīng)的行，則整個(gè)站點(diǎn)的所有頁(yè)面都會(huì)隨之發(fā)生變化。也可以在一個(gè)文檔中應(yīng)用一個(gè)格式的CSS樣式，那么只要應(yīng)用這個(gè)格式的文檔中的部分也實(shí)現(xiàn)了統(tǒng)一的管理。

1.5 提高易用性

用CSS可以結(jié)構(gòu)化html語(yǔ)言，如：p標(biāo)簽用來(lái)控制段落，h1標(biāo)簽用來(lái)控制文檔標(biāo)題，a：link用來(lái)控制鏈接等?？稍黾雍芏嗟挠脩簦⑶也恍枰ⅹ?dú)立的版本。

DIV+CSS教學(xué)通常是采用兩種模式，其一教師僅根據(jù)教材敘述進(jìn)行簡(jiǎn)單的理論講解。其二教師在講授DreamWeaver網(wǎng)頁(yè)制作工具時(shí)，

向?qū)W生介紹如何通過(guò)相應(yīng)的菜單和對(duì)話框創(chuàng)建和使用的，這樣做的好處是學(xué)生可以很快的入手使用這門技術(shù)，但是同樣的學(xué)生只知其然不知所以然，無(wú)法了解該技術(shù)的本質(zhì)與應(yīng)用，在實(shí)際應(yīng)用中往往無(wú)從下手。因此在這方面教學(xué)中做如下改進(jìn)。

2 教學(xué)內(nèi)容改革

（1）了解網(wǎng)頁(yè)結(jié)構(gòu)原理。網(wǎng)頁(yè)本質(zhì)上來(lái)講主要由三部分組成：結(jié)構(gòu)、表現(xiàn)和行為。對(duì)應(yīng)的web標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對(duì)象模型、ECMAScript等。這些標(biāo)準(zhǔn)大部分是由W3C起草和發(fā)布的，也有一部分是由其他標(biāo)準(zhǔn)組織制訂的，比如ECMA的ECMAScript標(biāo)準(zhǔn)。準(zhǔn)確的說(shuō)DIV+CSS應(yīng)叫做xHTML+CSS，即結(jié)構(gòu)+表現(xiàn)。

（2）根據(jù)原理在講授《網(wǎng)頁(yè)制作》課程中的DIV+CSS時(shí)，應(yīng)先建立網(wǎng)頁(yè)整體的結(jié)構(gòu)，使學(xué)生明白這種技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的定位。其次分成三步走的方式來(lái)講述：第一步講述div在網(wǎng)頁(yè)中排版定位的方式，采用盒模型方式，第二步講述CSS控制網(wǎng)頁(yè)樣式的方式，三種主要的選擇器類型：標(biāo)簽選擇器、ID選擇器、類選擇，四種調(diào)用方式：行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式、導(dǎo)入樣式。第三步將DIV與CSS結(jié)合，詳細(xì)講述CSS控制頁(yè)面中的細(xì)節(jié)。

3 教學(xué)方法改革

3.1 貫徹模塊化教學(xué)方法，加強(qiáng)理論課程體系教學(xué)與實(shí)踐性環(huán)節(jié)教學(xué)的有機(jī)統(tǒng)一

在網(wǎng)頁(yè)設(shè)計(jì)教學(xué)過(guò)程中，一直采用將每個(gè)環(huán)節(jié)的課程體系劃分多個(gè)模塊。對(duì)于DIV+CSS教學(xué)環(huán)節(jié)，劃分如下幾個(gè)模塊：其一為CSS講解過(guò)程，以學(xué)校網(wǎng)站為例，將學(xué)校網(wǎng)站源碼分解，分離出CSS部門講解，分為CSS選擇器模塊、CSS應(yīng)用方法模塊、CSS修改和維護(hù)模塊。其二講解DIV部分，將DIV分為手寫代碼方式模塊展示及Dreamweaver制作方法應(yīng)用模塊；其三講解DIV+CSS部分。將Div盒模型方式用自制實(shí)例化為三個(gè)模塊，Photoshop制作效果圖模塊，草圖劃分區(qū)塊模塊及實(shí)施CSS引用模塊。每個(gè)模塊講解后讓學(xué)生在實(shí)踐環(huán)節(jié)充分練習(xí)，鞏固學(xué)習(xí)效果，做到理論與實(shí)際的有機(jī)統(tǒng)一。

3.2 基于工作過(guò)程的案例教程

在每個(gè)模塊實(shí)施過(guò)程中，搜集并選用多個(gè)網(wǎng)站和本環(huán)節(jié)相關(guān)的案例，應(yīng)用不同的實(shí)際案例作為范本，讓學(xué)生在模擬的同時(shí)能夠開(kāi)闊眼界，了解技術(shù)現(xiàn)狀。學(xué)生可以通過(guò)模仿，來(lái)實(shí)現(xiàn)所展示的網(wǎng)站，掌握相應(yīng)的知識(shí)點(diǎn)。與此同時(shí)，讓學(xué)生以大作業(yè)的給出若干題目，或者自選題目，建立網(wǎng)站。多個(gè)網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用DIV+CSS技術(shù)，然后風(fēng)格一致，以及后期實(shí)現(xiàn)一處修改多處使用的優(yōu)勢(shì)。

3.3 分組創(chuàng)作討論法

以問(wèn)題為導(dǎo)向，以學(xué)生為主體，培養(yǎng)學(xué)生自主學(xué)習(xí)的能力。在布置的教學(xué)情境中，依照實(shí)際的工作過(guò)程，結(jié)合相應(yīng)的任務(wù)為分發(fā)教學(xué)任務(wù)書(shū)，接著對(duì)學(xué)生進(jìn)行分組，然后按照任務(wù)書(shū)的具體要求再進(jìn)行“咨詢——決策——計(jì)劃——實(shí)施——檢查——評(píng)估”。讓各小組成員利用業(yè)余時(shí)間完成任務(wù)，每組的組長(zhǎng)組織任務(wù)的實(shí)施，記錄小組各個(gè)成員的完成情況，最后由組長(zhǎng)給出小組各成員的成績(jī)。各組之間根據(jù)任務(wù)的完成情況給出等級(jí)。通過(guò)這種方式能增強(qiáng)小組成員間的合作意識(shí)、溝通能力，并能充分發(fā)揮出創(chuàng)新精神，提高他們的整體素質(zhì)。

3.4 學(xué)生參與講課法

在傳統(tǒng)課堂均以教師為主，學(xué)生為輔的講課模式。為了激發(fā)學(xué)生主動(dòng)學(xué)習(xí)的意識(shí)，鼓勵(lì)學(xué)生在部分章節(jié)，部分任務(wù)中將查閱資料及自身體會(huì)在課堂上講解給其他同學(xué)，教師和學(xué)生做點(diǎn)評(píng)和討論。有效的提高的學(xué)生自主學(xué)習(xí)的積極性和學(xué)習(xí)能力。

3.5 開(kāi)展課外活動(dòng)法

除了課堂講述外，課外積極組織學(xué)生開(kāi)展課外活動(dòng)，引導(dǎo)學(xué)生通過(guò)互聯(lián)網(wǎng)了解課程前沿動(dòng)態(tài)，積極參與學(xué)術(shù)活動(dòng)和科學(xué)實(shí)驗(yàn)。并且聽(tīng)一些相關(guān)內(nèi)容的講座知識(shí)，從網(wǎng)上下載一些學(xué)習(xí)資源，看一些賞心悅目的網(wǎng)站，也提高他們對(duì)這個(gè)課學(xué)習(xí)的積極性。

3.6 去公司參觀和學(xué)習(xí)法

如果有相應(yīng)合作的單位或企業(yè)做相關(guān)網(wǎng)站建設(shè)方面的項(xiàng)目，可以讓學(xué)生去參與和鍛煉，并且讓相關(guān)的設(shè)計(jì)師給他們講一講需要的基礎(chǔ)知識(shí)和主要技術(shù)，做項(xiàng)目整個(gè)架構(gòu)到細(xì)節(jié)的一個(gè)過(guò)程，他們切身體會(huì)到做這個(gè)的流程，也給他們將來(lái)學(xué)習(xí)指引方向。

4 教學(xué)效果

通過(guò)對(duì)教學(xué)內(nèi)容及教學(xué)方法的改革，提高了學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)課程及DIV+CSS的興趣及認(rèn)識(shí)，學(xué)生通過(guò)實(shí)驗(yàn)，能夠基本掌握DIV+CSS的技能，可以做出對(duì)應(yīng)的項(xiàng)目，使學(xué)生思維更加活躍，提高了個(gè)人能力和團(tuán)隊(duì)協(xié)作精神，個(gè)人操作能力也有了明顯的提高。但是如何更好的運(yùn)用這個(gè)技術(shù)設(shè)計(jì)網(wǎng)頁(yè)，還需要更進(jìn)一步的學(xué)習(xí)和研究。