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

王愛菊　楊金川

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

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

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

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

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

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

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

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

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

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

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

1.3 使頁面載入得更快

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

1.4 方便修改與維護

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

1.5 提高易用性

用CSS可以結構化html語言，如：p標簽用來控制段落，h1標簽用來控制文檔標題，a：link用來控制鏈接等。可增加很多的用戶，并且不需要建立獨立的版本。

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

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

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

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

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

3 教學方法改革

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

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

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

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

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

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

3.4 學生參與講課法

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

3.5 開展課外活動法

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

3.6 去公司參觀和學習法

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

4 教學效果

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