彭珊珊 王菁

摘要：針對很多高校都開設(shè)了《網(wǎng)頁設(shè)計》這門專業(yè)課的情況，該文以目前非常流行的網(wǎng)頁設(shè)計技術(shù)DIV+CSS為研究對象，闡述了網(wǎng)頁設(shè)計教學(xué)現(xiàn)狀，介紹了DIV+CSS布局的原理，分析了其優(yōu)勢，并在此基礎(chǔ)上提出了該技術(shù)在教學(xué)中的具體實施辦法。

關(guān)鍵詞：DIV；CSS；網(wǎng)頁設(shè)計

中圖分類號：G642 文獻標識碼：A 文章編號：1009-3044（2014）23-5470-02

近年來，隨著互聯(lián)網(wǎng)的飛速發(fā)展，網(wǎng)頁設(shè)計已成為現(xiàn)代社會中最吸引人的技術(shù)之一。各高校計算機、電子商務(wù)專業(yè)等都將《網(wǎng)頁設(shè)計》課程列為專業(yè)必修課程，而網(wǎng)頁制作的相關(guān)知識和技能也成為計算機類人才知識結(jié)構(gòu)不可或缺的一個重要組成部分。

1 網(wǎng)頁設(shè)計課程教學(xué)現(xiàn)狀

在網(wǎng)頁設(shè)計課程的教學(xué)中，通常是介紹網(wǎng)頁設(shè)計軟件（例如Dreamweaver、Flash、Fireworks）的用法，以此介紹網(wǎng)頁設(shè)計的一些概念和方法，在網(wǎng)頁布局上使用表格或?qū)觼韺崿F(xiàn)，對DIV和CSS的介紹比較少，而用DIV+CSS布局的網(wǎng)頁案例就更少了。但在培養(yǎng)應(yīng)用型人才的目標下，我們必須讓學(xué)生掌握當(dāng)前主流的網(wǎng)頁布局技術(shù)，現(xiàn)在各公司在網(wǎng)頁設(shè)計人才的需求上，對掌握DIV+CSS網(wǎng)頁布局技術(shù)也是一個基本要求了，因此在網(wǎng)頁設(shè)計課程教學(xué)中加入DIV+CSS布局的內(nèi)容就顯得十分必要。

2 DIV+CSS布局的原理

DIV+CSS是WEB設(shè)計標準，它是一種網(wǎng)頁的布局方法。與傳統(tǒng)中通過表格布局定位的方式不同，它可以實現(xiàn)網(wǎng)頁頁面內(nèi)容與表現(xiàn)相分離。

DIV元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標簽和結(jié)束標簽之間的所有內(nèi)容都是用來構(gòu)成這個塊的。

CSS是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn) HTML 或 XML 等文件式樣的計算機語言。

簡單地說，DIV用于搭建網(wǎng)站結(jié)構(gòu)（框架）、CSS用于創(chuàng)建網(wǎng)站表現(xiàn)（樣式/美化），實質(zhì)是使用XHTML對網(wǎng)站進行標準化重構(gòu)，使用CSS將表現(xiàn)與內(nèi)容分離，便于網(wǎng)站維護，簡化HTML頁面代碼，可以獲得一個較優(yōu)秀的網(wǎng)站結(jié)構(gòu)。

3 DIV+CSS在網(wǎng)頁設(shè)計中的優(yōu)勢

掌握DIV+CSS的網(wǎng)頁布局方式，是實現(xiàn)Web標準的基礎(chǔ)。

1）結(jié)構(gòu)標準化，布局更靈活

在使用表格布局時，垃圾代碼很多，一些修飾的樣式和布局的代碼混合在一起，很不美觀，而且頁面布局采用表格的多層嵌套、單元格的拆分、合并來實現(xiàn)，通常對一個單元格的調(diào)整會影響到其余單元格的顯示效果。而利用DIV+CSS進行頁面布局時，網(wǎng)頁中的一個模塊可以用一個DIV盒子來定義，盒子的大小、邊框邊距及間距等屬性可以任意設(shè)置，彼此之間的關(guān)聯(lián)也可以靈活設(shè)置，結(jié)構(gòu)的重構(gòu)性強。

2）內(nèi)容和樣式相分離，便于更新和統(tǒng)一網(wǎng)頁風(fēng)格

網(wǎng)頁內(nèi)容DIV和樣式CSS相分離，通常是將網(wǎng)頁內(nèi)容放在HTML文件中，樣式放在一個獨立的CSS文件中，當(dāng)需要修改網(wǎng)頁的效果時，只需要修改這個CSS文件中相應(yīng)的屬性就可以了。另外如果整個站點中有多個網(wǎng)頁使用了同一個CSS文件，那么也只需要修改這一個文件，多個頁面能同時更新。

3）利于搜索引擎優(yōu)化

搜索引擎要的是網(wǎng)頁實質(zhì)的內(nèi)容，即文字，用表格布局的頁面代碼較多，而DIV+CSS網(wǎng)頁的代碼簡潔，在被搜索時搜索引擎只需要從HTML代碼中搜索關(guān)鍵詞即可，減少了搜索內(nèi)容，提高了搜索效率。

4 DIV+CSS的教學(xué)實施

DIV+CSS是網(wǎng)頁設(shè)計中非常重要的一個內(nèi)容，但技術(shù)復(fù)雜度高，相比表格而言，DIV+CSS比較難以上手，尤其是那些對網(wǎng)頁設(shè)計代碼一無所知的設(shè)計者，他們已經(jīng)習(xí)慣于那種所見即所得的設(shè)計方式，對于這種先定義后使用的CSS樣式難以理解。因此教師在教學(xué)中可以從以下幾方面開展教學(xué)：

1）從設(shè)計視圖到代碼視圖的轉(zhuǎn)化：對大多數(shù)剛接觸網(wǎng)頁設(shè)計的學(xué)生尤其是電子商務(wù)的學(xué)生來說，HTML和CSS是如同C#、JAVA等編程語言一樣，都是些看不懂的符號。如果一開始就從代碼視圖講這些代碼的話，學(xué)生會很難接受。所以頭兩周的課教師可以在拆分視圖下利用菜單、屬性面板和CSS面板來講解網(wǎng)頁設(shè)計，讓學(xué)生掌握網(wǎng)頁設(shè)計的基本方法，并了解自動生成的網(wǎng)頁代碼。經(jīng)過兩周的練習(xí)，他們明白了HTML和CSS的作用并有了一定的基礎(chǔ)后，教師就可以開始在代碼視圖下講解用代碼去設(shè)計網(wǎng)頁，這時學(xué)生就不會太排斥這些代碼了；接著教師逐步增加代碼的數(shù)量和難度，網(wǎng)頁的效果越來越生動，他們的學(xué)習(xí)勁頭更足了，自己動手寫代碼以后也漸漸體會到用代碼設(shè)計網(wǎng)頁的效率更高，自然就放棄了菜單和面板的方式，從而實現(xiàn)了網(wǎng)頁設(shè)計從低級到高級的一個轉(zhuǎn)化。

2）教學(xué)內(nèi)容的安排：很多網(wǎng)頁設(shè)計的書籍在DIV+CSS部分都是從概述、盒子模型開始，再逐一介紹字體、表格、表單、圖像、背景邊框設(shè)置的，內(nèi)容很散，缺乏一個完整的案例講解，所以學(xué)過以后，留給學(xué)生的都是一些零散的知識點。筆者覺得DIV+CSS部分內(nèi)容的安排應(yīng)遵循從簡單到復(fù)雜、從零散到整體的原則。首先從利用DIV實現(xiàn)一個小的簡單模塊開始，了解DIV的含義、各參數(shù)的作用、注意事項及與CSS之間的關(guān)系。當(dāng)學(xué)會了各種樣式的小模塊編寫之后，再從DIV標簽的簡單嵌套到整個網(wǎng)頁的布局。例如筆者是這么安排教學(xué)內(nèi)容的：前部分從盒子模型、頁面布局開始CSS的教學(xué)，，然后通過設(shè)計橫向和縱向?qū)Ш綏l讓學(xué)生體會到CSS的神奇魅力，最后再詳細講述一個完整的企業(yè)網(wǎng)站首頁的設(shè)計。這樣學(xué)生在學(xué)習(xí)的過程中會很輕松，學(xué)習(xí)效果較好。在進行案例選擇的時候，應(yīng)充分考慮到這個網(wǎng)頁的代表性，以此希望學(xué)生在獨立設(shè)計網(wǎng)頁時能有所啟發(fā)，并能舉一反三。

3）授課方式的改進：以往的網(wǎng)頁設(shè)計課程授課方式是計算機聯(lián)網(wǎng)授課，即教師通過一個教學(xué)軟件控制所有的學(xué)生電腦，以廣播教學(xué)的方式將自己的電腦界面顯示在學(xué)生電腦上，學(xué)生不能操作電腦，須等教師講授完一個知識點后，解除控制，學(xué)生才能進行操作。這種授課方式對于講授應(yīng)用型軟件如PHOTOSHOP而言是比較合適的。但使用DIV+CSS制作網(wǎng)頁時需要涉及大量的代碼，以往學(xué)生為了記住教師的講課內(nèi)容，都是用手機將教師完成的代碼拍照，然后再逐個字母敲進電腦以完成最終的效果。在操作過程中，他們基本都沒有思考為什么要這樣寫代碼，只是單純地打字練習(xí)，下次再遇到類似的網(wǎng)頁效果需要設(shè)計時，仍然不知所措?；谶@種情況，教師需要及時改進授課方式，借助投影儀來授課，解除對學(xué)生電腦的控制，一定要讓學(xué)生和教師的操作同步進行。例如教師在講浮動float的設(shè)置時，學(xué)生同步操作，既可以模仿，也可以多做一些修改嘗試，在遇到問題時，及時咨詢教師，以加深對知識點的掌握程度，教學(xué)質(zhì)量也提高了。在這個過程中，教師與學(xué)生的感情也能更進一步，學(xué)生對課程的喜愛程度和學(xué)習(xí)積極性也能得到了提高。

4）加強對學(xué)生的考核力度：傳統(tǒng)的考核方式是試卷考核，但針對本課程的特點，筆者采用期末機房考試和綜合課程設(shè)計兩種方式。期末機房考試主要是考查學(xué)生對課堂講授的綜合案例的掌握程度，因為只有完全掌握好了這個綜合案例的網(wǎng)頁設(shè)計技巧，才可以輕松應(yīng)對后面的綜合課程設(shè)計。綜合課程設(shè)計則是安排在學(xué)期末的最后兩周，要求學(xué)生在最后兩周的時間內(nèi)獨立完成一個網(wǎng)站的設(shè)計，采用DIV+CSS布局，必須添加網(wǎng)頁特效，至少使用一個網(wǎng)頁模板，必須有自己設(shè)計的動畫LOGO，網(wǎng)站必須發(fā)布成功，最后完成課程設(shè)計報告。這個課程設(shè)計階段是學(xué)生真正獨立去實現(xiàn)一個網(wǎng)站的過程，教師要鼓勵學(xué)生自主學(xué)習(xí)，不斷發(fā)現(xiàn)問題、解決問題，讓學(xué)生體會到學(xué)習(xí)的樂趣和成功的喜悅，這比老師按部就班的課堂教學(xué)效果更好。實際證明，學(xué)生在經(jīng)過這兩次嚴格的考核后，完全可以設(shè)計出實用、美觀的網(wǎng)頁，也為他們從事電子商務(wù)創(chuàng)業(yè)奠定了基礎(chǔ)。

5 結(jié)束語

總之，經(jīng)過多年的嘗試、總結(jié)經(jīng)驗和努力，為培養(yǎng)適應(yīng)社會要求的網(wǎng)頁設(shè)計人才，本人在講授DIV+CSS進行網(wǎng)頁設(shè)計方面取得了一定的效果，學(xué)生普遍反映學(xué)得輕松，也真正學(xué)到了東西，當(dāng)然但要想學(xué)生更好地掌握這個技術(shù)， 還需要不斷地學(xué)習(xí)和探索。

參考文獻：

[1] 李雙遠，馬勘. DIV+CSS在網(wǎng)頁設(shè)計中的應(yīng)用方法[J].吉林化工學(xué)院學(xué)報，2013（9）.

[2] 張英. DIV+CSS網(wǎng)站設(shè)計的研究和探討[J].電子技術(shù)與軟件工程，2013（24）.

[3] 李念. 網(wǎng)頁設(shè)計中的DIV+CSS技術(shù)應(yīng)用研究[J].軟件導(dǎo)刊，2013，12（3）.

[4] 張偉娜，王海波. DIV+CSS網(wǎng)頁設(shè)計初探[J].電腦知識與技術(shù)，2013，9（3）.