DIV+CSS在中職計(jì)算機(jī)教學(xué)中的運(yùn)用

鄒 錳

（廣東省東莞市大嶺山職業(yè)技術(shù)學(xué)校 廣東 東莞 523820）

DIV+CSS的網(wǎng)頁(yè)布局方法現(xiàn)已成為網(wǎng)頁(yè)設(shè)計(jì)的行業(yè)標(biāo)準(zhǔn)。在計(jì)算機(jī)專業(yè)課教學(xué)中，網(wǎng)頁(yè)設(shè)計(jì)教學(xué)也都是以DIV+CSS布局為中心進(jìn)行的。筆者在實(shí)際教學(xué)中發(fā)現(xiàn)，DIV+CSS布局這一方法不僅適用于網(wǎng)頁(yè)制作，還能夠靈活運(yùn)用到其他計(jì)算機(jī)專業(yè)課教學(xué)中，甚至運(yùn)用到其他專業(yè)課教學(xué)中。

DIV+CSS技術(shù)簡(jiǎn)介

DIV+CSS是當(dāng)前WEB標(biāo)準(zhǔn)中的一種術(shù)語(yǔ)，它是一種網(wǎng)頁(yè)布局方法，這種網(wǎng)頁(yè)布局方法有別于傳統(tǒng)HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格（TABLE）布局方式，可實(shí)現(xiàn)網(wǎng)頁(yè)頁(yè)面內(nèi)容與表現(xiàn)相分離。DIV可比做容器，它用來(lái)進(jìn)行網(wǎng)頁(yè)布局，打好網(wǎng)頁(yè)的框架。CSS是層疊樣式表（Cascading Style Sheets） 的縮寫，用于定義HTML元素的顯示形式，是W3C（The World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟）推出的格式化網(wǎng)頁(yè)內(nèi)容的標(biāo)準(zhǔn)技術(shù)，是網(wǎng)頁(yè)設(shè)計(jì)者必須掌的技術(shù)之一。

如圖1所示，每個(gè)DIV相當(dāng)于一個(gè)盒子，盒子中存放網(wǎng)頁(yè)的具體內(nèi)容，包括圖片、文字、動(dòng)畫等。整個(gè)網(wǎng)頁(yè)由很多個(gè)DIV“盒子”拼成。

圖1 網(wǎng)頁(yè)與DIV關(guān)系示意圖

中職計(jì)算機(jī)教學(xué)存在的問(wèn)題

計(jì)算機(jī)教學(xué)內(nèi)容多而雜 有些計(jì)算機(jī)課在中職每個(gè)專業(yè)都有開(kāi)設(shè)，基本上成為了中職生的必修科目。相對(duì)而言，計(jì)算機(jī)專業(yè)也存在計(jì)算機(jī)教學(xué)內(nèi)容多而雜，課程難度深淺不一，學(xué)生學(xué)習(xí)好似走馬觀花的問(wèn)題。幾乎每一款流行軟件都有涉及，但都停留在入門階段。

計(jì)算機(jī)教學(xué)形式單一 計(jì)算機(jī)學(xué)科操作性強(qiáng)，相對(duì)于其他學(xué)科而言，學(xué)生動(dòng)手機(jī)會(huì)多。但是由于計(jì)算機(jī)軟件的特點(diǎn)，在計(jì)算機(jī)教學(xué)中，一般采用的教學(xué)方法基本是案例教學(xué)法，教師將知識(shí)點(diǎn)通過(guò)案例操作一遍，然后學(xué)生按教師要求也將實(shí)例做出來(lái)，或者反復(fù)練習(xí)。

計(jì)算機(jī)知識(shí)更新快 軟件的更新速度是非?？斓?，學(xué)生在高一學(xué)習(xí)的知識(shí)可能在高中畢業(yè)時(shí)已經(jīng)完全被新的知識(shí)代替。一方面，學(xué)生對(duì)新的計(jì)算機(jī)技術(shù)有興趣；另一方面，教師跟不上計(jì)算機(jī)知識(shí)更新步伐。

學(xué)生綜合運(yùn)用計(jì)算機(jī)的知識(shí)能力差 學(xué)生學(xué)習(xí)完多款軟件后，對(duì)單一軟件的運(yùn)用可能較好，但是很多實(shí)際問(wèn)題不是一款軟件就能解決的。另外，文化基礎(chǔ)差也是中職學(xué)生的一大軟肋，造成學(xué)生的綜合能力低下。例如，很多學(xué)生無(wú)法單獨(dú)做好一個(gè)動(dòng)畫短片，因?yàn)樽鰟?dòng)畫短片除了要掌握好基本的動(dòng)畫制作軟件Flash等，還需要對(duì)音頻進(jìn)行很好的控制；另外，還要自己寫好劇本，需要學(xué)生良好的寫作能力和創(chuàng)作力、想象力的綜合運(yùn)用。

DIV+CSS在計(jì)算機(jī)教學(xué)中的新解

DIV——教學(xué)內(nèi)容結(jié)構(gòu)化DIV+CSS一個(gè)顯著的特點(diǎn)是分離頁(yè)面的表現(xiàn)與結(jié)構(gòu)。如典型DIV布局圖所示，它的結(jié)構(gòu)很清晰，中間有一個(gè)DIV嵌套。在計(jì)算機(jī)教學(xué)內(nèi)容的安排中，也需要結(jié)構(gòu)化、模塊化。每一個(gè)軟件都可以分為幾塊，比如Flash軟件的教學(xué)完全可以分為繪圖塊、Action塊、動(dòng)畫塊等。DIV布局有一個(gè)浮動(dòng)的概念，在同一行并排布局中起到很重要的作用。通過(guò)CSS中改變Float的屬性可以實(shí)現(xiàn)布局的調(diào)整。同理，在教學(xué)中對(duì)于知識(shí)點(diǎn)結(jié)構(gòu)化后，對(duì)同一層次的知識(shí)點(diǎn)完全可以實(shí)現(xiàn)浮動(dòng)操作。例如，前面提到的Flash三個(gè)塊中的動(dòng)畫塊中包含引導(dǎo)線動(dòng)畫、遮罩動(dòng)畫、逐幀動(dòng)畫等，它們是同一層次，完全可以隨意改變它們的學(xué)習(xí)順序。

CSS——教學(xué)形式多樣化 在DIV+CSS技術(shù)實(shí)現(xiàn)的網(wǎng)頁(yè)中，可通過(guò)改變CSS的設(shè)置，實(shí)現(xiàn)網(wǎng)頁(yè)表現(xiàn)的多樣化。在計(jì)算機(jī)教學(xué)中，對(duì)同樣的教學(xué)內(nèi)容除了采用案例教學(xué)，項(xiàng)目教學(xué)方法外，完全可以采用游戲、競(jìng)賽投標(biāo)等方式進(jìn)行。對(duì)不同層次的學(xué)生，同樣的內(nèi)容必須能夠提供適合它們的不同教學(xué)方式。教師在教學(xué)形式上要大膽創(chuàng)新，從其他學(xué)科教學(xué)形式或流行元素上的基礎(chǔ)上開(kāi)發(fā)出多樣化的教學(xué)形式。實(shí)現(xiàn)同樣的內(nèi)容不同的教法、不同的學(xué)生不同的教法。

DIV+CSS字母縮寫新解 （1）D（Develop，發(fā)展）：在教學(xué)內(nèi)容方面，教學(xué)的知識(shí)注重計(jì)算機(jī)知識(shí)更新的速度，力求選取新的技術(shù)知識(shí)，對(duì)同樣的問(wèn)題，新技術(shù)、新方法能解決的就采用新方法。如Flash CS4開(kāi)始的骨骼工具對(duì)制作人物動(dòng)作能夠簡(jiǎn)單化、科學(xué)化，就可以替代逐幀動(dòng)畫中的人物動(dòng)作制作。（2）I（Interesting，有趣）：在教學(xué)內(nèi)容方面，選取的內(nèi)容要讓學(xué)生感興趣，當(dāng)然計(jì)算機(jī)學(xué)科中的大部分內(nèi)容是枯燥的，也是不可不學(xué)的，這就需要教師在教學(xué)形式上下大功夫，將教學(xué)內(nèi)容由復(fù)雜變?yōu)楹?jiǎn)明，由無(wú)趣變?yōu)橛腥ぁ?（3）V（Video，視頻）：在視頻方面包括各種對(duì)教學(xué)有利的動(dòng)畫資源和各種格式的音視頻集合，著重注意對(duì)教學(xué)形式有利的視頻。另外，計(jì)算機(jī)學(xué)科注重操作性，教師每節(jié)課在教師機(jī)上對(duì)案例的演示都可以用錄屏軟件錄制下來(lái)，便于不同層次的學(xué)生復(fù)習(xí)。教師自己錄制的視頻非常重要，因?yàn)檫@是教師根據(jù)學(xué)生的特點(diǎn)自己選取出來(lái)的教學(xué)內(nèi)容，有針對(duì)性，比網(wǎng)絡(luò)上的相關(guān)教學(xué)視頻更能得到學(xué)生認(rèn)同。 （4）C（Center，中心）：所有的教學(xué)內(nèi)容和教學(xué)形式都要圍繞一個(gè)中心——以學(xué)生為中心。所有的教學(xué)手段都是以學(xué)生學(xué)會(huì)知識(shí)、學(xué)會(huì)學(xué)習(xí)為目標(biāo)。對(duì)計(jì)算機(jī)教學(xué)來(lái)說(shuō)，教師教學(xué)的最終目標(biāo)是讓學(xué)生掌握對(duì)計(jì)算機(jī)各門學(xué)科學(xué)習(xí)特別是自學(xué)的能力，以及綜合運(yùn)用多款軟件解決實(shí)際問(wèn)題的能力。（5）S（Solve，解決）：對(duì)于中職學(xué)校來(lái)說(shuō)，開(kāi)設(shè)的專業(yè)科目都是以技能為主，計(jì)算機(jī)學(xué)科也更注重實(shí)用性。因此，教學(xué)上要注重聯(lián)系實(shí)際，著重對(duì)學(xué)生解決問(wèn)題能力的培養(yǎng)，真正做到學(xué)以致用。（6）S（Sweat，出汗）：在計(jì)算機(jī)學(xué)科中，軟件的學(xué)習(xí)是一個(gè)長(zhǎng)期的過(guò)程，對(duì)實(shí)際問(wèn)題的解決往往需要靈活綜合運(yùn)用幾類軟件，也是挑戰(zhàn)耐心的過(guò)程。就算只用到一款軟件的學(xué)科，要很好地解決實(shí)際問(wèn)題也需要一個(gè) “流汗”的過(guò)程。例如，設(shè)計(jì)一個(gè)動(dòng)畫，人物設(shè)計(jì)、場(chǎng)景設(shè)計(jì)、鏡頭的運(yùn)用、音樂(lè)的處理、后期的制作，每一個(gè)步驟都不能馬虎。一個(gè)好的作品制作出來(lái)是需要流汗的。學(xué)生也只有經(jīng)過(guò)這樣的過(guò)程，才能學(xué)會(huì)知識(shí)、運(yùn)用知識(shí)并體會(huì)到學(xué)習(xí)的樂(lè)趣，從而更好地學(xué)習(xí)。

DIV+CSS在計(jì)算機(jī)教學(xué)中的應(yīng)用

在計(jì)算機(jī)教學(xué)中的運(yùn)用 在全國(guó)等級(jí)考試計(jì)算機(jī)一級(jí)教程中有一節(jié)關(guān)于進(jìn)制的知識(shí)，大多數(shù)時(shí)候教師是跳過(guò)不講，因?yàn)橹新殞W(xué)生數(shù)學(xué)基礎(chǔ)不太好，很難學(xué)明白，并且在正式等級(jí)考試時(shí)，學(xué)生能調(diào)用Windows系統(tǒng)自帶的計(jì)算機(jī)直接得出結(jié)果。進(jìn)制這個(gè)知識(shí)點(diǎn)確實(shí)很枯燥，所以學(xué)生沒(méi)興趣學(xué)。沒(méi)興趣就肯定學(xué)不好。按DIV+CSS的原理，首先要讓進(jìn)制這個(gè)知識(shí)點(diǎn)變得有趣，另外，它必須能夠解決實(shí)際問(wèn)題，同時(shí)，要以學(xué)生為中心，使教學(xué)形式圍繞學(xué)生轉(zhuǎn)。教師在講解這節(jié)時(shí)可以安排一個(gè)魔術(shù)環(huán)節(jié)，自己或者讓班上一名學(xué)生表演一個(gè)猜出生月份的魔術(shù)（當(dāng)然先教會(huì)這個(gè)學(xué)生這個(gè)魔術(shù)的演法）。情節(jié)很簡(jiǎn)單，表演者先后展示給學(xué)生A、B、C、D四張卡片，每一次學(xué)生只需要仔細(xì)看一看，自己的出生月份有沒(méi)有位列其中。如圖2所示。舉個(gè)例子，如果學(xué)生出生月份是9月，學(xué)生的出生月份只有在卡片A和D中才可以看到，在卡片B、C中都看不到。把這個(gè)結(jié)果告訴魔術(shù)表演者，表演者經(jīng)過(guò)“心靈感應(yīng)”后，就可以確定學(xué)生的出生月份是9月。實(shí)際原理就是運(yùn)用了二進(jìn)制，卡片A權(quán)為1，卡片B權(quán)為2，卡片C權(quán)為4，卡片D權(quán)為8。這樣卡片A權(quán)+卡片D權(quán)=9就得出了結(jié)果。如圖3所示。實(shí)際上12個(gè)月份用了二進(jìn)制表示成了四位，四張卡片分別代表了四位的權(quán)，這個(gè)魔術(shù)融入了二進(jìn)制以及十進(jìn)制和二進(jìn)制轉(zhuǎn)換的知識(shí)。通過(guò)這樣的魔術(shù)方式，提起學(xué)生學(xué)習(xí)進(jìn)制的興趣。學(xué)生學(xué)習(xí)完，教師可以進(jìn)一步安排學(xué)生分組利用進(jìn)制知識(shí)自己創(chuàng)作此類游戲，如猜星座、猜生肖、甚至猜出生日等變成一個(gè)小型魔術(shù)表演活動(dòng)。還可以利用撲克牌和二進(jìn)制知識(shí)創(chuàng)作更復(fù)雜的魔術(shù)游戲。這樣，就能使學(xué)生將書本的知識(shí)融合自己感興趣的實(shí)際問(wèn)題，并通過(guò)自身的努力學(xué)會(huì)解決實(shí)際問(wèn)題。

圖2 卡片內(nèi)容示意圖

圖3 卡片模式二進(jìn)制原理示意圖

在課后作業(yè)中的運(yùn)用 計(jì)算機(jī)學(xué)科的作業(yè)基本上以做項(xiàng)目和任務(wù)為主。在布置每一個(gè)任務(wù)或項(xiàng)目時(shí)，按DIV+CSS的新解，要注意任務(wù)首先應(yīng)與學(xué)生相關(guān)，學(xué)生一定要感興趣；另外，任務(wù)應(yīng)能夠聯(lián)系實(shí)際，應(yīng)能解決實(shí)際問(wèn)題。例如，在學(xué)完網(wǎng)頁(yè)設(shè)計(jì)科目中美工設(shè)計(jì)和靜態(tài)網(wǎng)頁(yè)制作大部分知識(shí)后，就可以讓學(xué)生動(dòng)手自己設(shè)計(jì)自己的主頁(yè)，可以參考QQ空間，技術(shù)方面能用新的就不用舊的，方法上能用簡(jiǎn)單的就不用復(fù)雜的，最后交上來(lái)的任務(wù)成果要求包括設(shè)計(jì)草圖、美工圖、網(wǎng)頁(yè)切片圖、最后的網(wǎng)頁(yè)效果等幾部分。這樣，能讓學(xué)生不僅重視最后的結(jié)果，也注重規(guī)范網(wǎng)頁(yè)制作的流程。在制作過(guò)程中，學(xué)生肯定會(huì)遇到大量的技術(shù)問(wèn)題，這時(shí)，教師在上課時(shí)自己錄制的視頻就能起到很重要的作用，學(xué)生可用之隨時(shí)復(fù)習(xí)教師上課的要點(diǎn)。對(duì)教師沒(méi)提到的技術(shù)要點(diǎn)，一方面，學(xué)生可以分組討論，向同學(xué)和教師請(qǐng)教；另一方面，可以自己上網(wǎng)找參考資料。對(duì)學(xué)生完成任務(wù)的過(guò)程，教師要全程關(guān)注，對(duì)隨時(shí)出現(xiàn)的技術(shù)問(wèn)題引導(dǎo)學(xué)生盡量自己解決，如網(wǎng)頁(yè)切片的分段式切片方法，網(wǎng)頁(yè)DIV布局中出現(xiàn)的浮動(dòng)問(wèn)題等。

在計(jì)算機(jī)技能比賽中的運(yùn)用 中職學(xué)校對(duì)技能教學(xué)很重視，各個(gè)層次的技能比賽有很多，每年幾乎都會(huì)有技能節(jié)等活動(dòng)。這些比賽和活動(dòng)大大提高了學(xué)生學(xué)習(xí)技能的熱情。在這些比賽和活動(dòng)中，按DIV+CSS的原理可以讓CSS形式多樣化。在組織形式上，注重借鑒流行元素，同時(shí)緊密聯(lián)系實(shí)際。比如，對(duì)網(wǎng)頁(yè)、動(dòng)畫作品、電子報(bào)刊競(jìng)賽的評(píng)選可以參照達(dá)人秀的模式，讓作者現(xiàn)場(chǎng)展示他的作品，下面的評(píng)委提問(wèn)評(píng)選，注意評(píng)委不能都是計(jì)算機(jī)教師，要有兩三個(gè)音樂(lè)美術(shù)教師參與。同時(shí)，選手可以采用各種方式表現(xiàn)自己的設(shè)計(jì)能力、創(chuàng)新能力等來(lái)進(jìn)行現(xiàn)場(chǎng)拉票?，F(xiàn)場(chǎng)活動(dòng)要注意以解決實(shí)際問(wèn)題和提高學(xué)生興趣為目標(biāo)。比如，可以舉行現(xiàn)場(chǎng)處理照片、打印相片為內(nèi)容的活動(dòng)，或者通過(guò)照片現(xiàn)場(chǎng)設(shè)計(jì)動(dòng)漫造型并輸出到手機(jī)的動(dòng)漫設(shè)計(jì)活動(dòng)。

在不同層次學(xué)生中運(yùn)用 中職學(xué)生文化基礎(chǔ)雖然普遍較差，但每個(gè)學(xué)生的愛(ài)好都比較廣泛，都特別有個(gè)性。教師在教學(xué)中只采用一種模式無(wú)疑是不可取的。參照DIV的浮動(dòng)方式及結(jié)構(gòu)化的特點(diǎn)，完全可以讓不同層次的學(xué)生根據(jù)自身特點(diǎn)選取自己最感興趣的模塊來(lái)學(xué)習(xí)。比如，動(dòng)畫的制作包含劇本、人物設(shè)計(jì)、場(chǎng)景設(shè)計(jì)、鏡頭運(yùn)用、音樂(lè)處理等，對(duì)音樂(lè)感興趣的學(xué)生可以側(cè)重對(duì)音樂(lè)處理學(xué)習(xí)，想象力、寫作力強(qiáng)的可以側(cè)重劇本創(chuàng)作，然后以小組合作的方式制作出動(dòng)畫。對(duì)于每個(gè)學(xué)生必須掌握的內(nèi)容，對(duì)不同層次的學(xué)生，也可以采取不同的形式和方法。對(duì)領(lǐng)悟能力較弱的學(xué)生要提供視頻并多次指導(dǎo)；對(duì)領(lǐng)悟能力較強(qiáng)的學(xué)生可直接分配任務(wù)，甚至教師沒(méi)教過(guò)的知識(shí)也可要學(xué)生自己融入任務(wù)中來(lái)。比如，F(xiàn)lashCS4后續(xù)的版本多加了BONES骨骼系統(tǒng)和3D控制工具等新特性，教師沒(méi)教，但可提供一個(gè)教師自創(chuàng)的教學(xué)課件，要求學(xué)生用到其中的新特性完成任務(wù)。另外，一些輔助軟件，教師只提供軟件名即可，怎么用完全可讓學(xué)生自己去摸索，自己去學(xué)習(xí)，最終完成布置的任務(wù)。

總之，DIV+CSS的理論方法完全可以應(yīng)用到計(jì)算機(jī)教學(xué)中來(lái)。借助這個(gè)理論，計(jì)算機(jī)教學(xué)始終圍繞以學(xué)生為中心，以激發(fā)學(xué)生的學(xué)習(xí)興趣為前提，解決實(shí)際問(wèn)題和通過(guò)學(xué)習(xí)過(guò)程讓學(xué)生學(xué)會(huì)學(xué)習(xí)。在具體運(yùn)用中，教師必須全方位了解學(xué)生的特點(diǎn)，把流行元素綜合運(yùn)用到教學(xué)中來(lái)。另外，還需要教師自身能夠綜合各種軟件解決實(shí)際問(wèn)題，這些要求對(duì)教師是一種挑戰(zhàn)，需要教師不斷提高自身技能水平以及教學(xué)水平。

[1] 曾順.精通CSS+DIV網(wǎng)頁(yè)樣式與布局[M].北京：人民郵電出版社，2007：449.

[2] 溫謙.HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與布局從入門到精通[M].北京：人民郵電出版社，2008：424.

[3] 袁潤(rùn)非.DIV+CSS網(wǎng)站布局案例精粹[M].北京：清華大學(xué)出版社，2011：397.

[4] 溫謙.CSS設(shè)計(jì)徹底研究[M].北京：人民郵電出版社，2008：456.

[5] 黃愛(ài)娟，雷喜.中文版Dreamweaver CS5完全自學(xué)一本通[M].北京：電子工業(yè)出版社，2010：629.

[6] （美）莫里.CSS禪意花園[M].陳黎夫，等譯.北京：人民郵電出版社，2007：276.

[7] 教育部考試中心.全國(guó)計(jì)算機(jī)等級(jí)考試（一級(jí)MS Office教程）[Z].天津：南開(kāi)大學(xué)出版社，2007：331.