彭珊珊 王菁

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

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

中圖分類號(hào)：G642 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）23-5470-02

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

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

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

2 DIV+CSS布局的原理

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

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

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

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

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

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

1）結(jié)構(gòu)標(biāo)準(zhǔn)化，布局更靈活

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

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

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

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

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

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

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

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

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

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

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

5 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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