王愛菊　楊金川

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

關(guān)鍵詞：DIV+CSS；網(wǎng)頁布局；web標準

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

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

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

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

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

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

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

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

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

1.3 使頁面載入得更快

因?qū)⒋蟛糠值捻撁娲a寫到CSS中，使頁面體積容量相對變得較小。相對于表格嵌套布局的方式，DIV+CSS布局將頁面獨立分成了更多的區(qū)域，當打開頁面時，是逐層加載的，這不像表格嵌套那樣將整個頁面套在一個大表格中，使頁面加載速度相對較慢。

1.4 方便修改與維護

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

1.5 提高易用性

用CSS可以結(jié)構(gòu)化html語言，如：p標簽用來控制段落，h1標簽用來控制文檔標題，a：link用來控制鏈接等?？稍黾雍芏嗟挠脩?，并且不需要建立獨立的版本。

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

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

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

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

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

3 教學方法改革

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

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

3.2 基于工作過程的案例教程

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

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

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

3.4 學生參與講課法

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

3.5 開展課外活動法

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

3.6 去公司參觀和學習法

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

4 教學效果

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