鄒 錳

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

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

DIV+CSS技術(shù)簡介

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

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

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

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

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

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

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

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

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

DIV——教學(xué)內(nèi)容結(jié)構(gòu)化DIV+CSS一個(gè)顯著的特點(diǎn)是分離頁面的表現(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)的概念，在同一行并排布局中起到很重要的作用。通過CSS中改變Float的屬性可以實(shí)現(xiàn)布局的調(diào)整。同理，在教學(xué)中對于知識點(diǎn)結(jié)構(gòu)化后，對同一層次的知識點(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)頁中，可通過改變CSS的設(shè)置，實(shí)現(xiàn)網(wǎng)頁表現(xiàn)的多樣化。在計(jì)算機(jī)教學(xué)中，對同樣的教學(xué)內(nèi)容除了采用案例教學(xué)，項(xiàng)目教學(xué)方法外，完全可以采用游戲、競賽投標(biāo)等方式進(jìn)行。對不同層次的學(xué)生，同樣的內(nèi)容必須能夠提供適合它們的不同教學(xué)方式。教師在教學(xué)形式上要大膽創(chuàng)新，從其他學(xué)科教學(xué)形式或流行元素上的基礎(chǔ)上開發(fā)出多樣化的教學(xué)形式。實(shí)現(xiàn)同樣的內(nèi)容不同的教法、不同的學(xué)生不同的教法。

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

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

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

圖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í)際問題。例如，在學(xué)完網(wǎng)頁設(shè)計(jì)科目中美工設(shè)計(jì)和靜態(tài)網(wǎng)頁制作大部分知識后，就可以讓學(xué)生動(dòng)手自己設(shè)計(jì)自己的主頁，可以參考QQ空間，技術(shù)方面能用新的就不用舊的，方法上能用簡單的就不用復(fù)雜的，最后交上來的任務(wù)成果要求包括設(shè)計(jì)草圖、美工圖、網(wǎng)頁切片圖、最后的網(wǎng)頁效果等幾部分。這樣，能讓學(xué)生不僅重視最后的結(jié)果，也注重規(guī)范網(wǎng)頁制作的流程。在制作過程中，學(xué)生肯定會遇到大量的技術(shù)問題，這時(shí)，教師在上課時(shí)自己錄制的視頻就能起到很重要的作用，學(xué)生可用之隨時(shí)復(fù)習(xí)教師上課的要點(diǎn)。對教師沒提到的技術(shù)要點(diǎn)，一方面，學(xué)生可以分組討論，向同學(xué)和教師請教；另一方面，可以自己上網(wǎng)找參考資料。對學(xué)生完成任務(wù)的過程，教師要全程關(guān)注，對隨時(shí)出現(xiàn)的技術(shù)問題引導(dǎo)學(xué)生盡量自己解決，如網(wǎng)頁切片的分段式切片方法，網(wǎng)頁DIV布局中出現(xiàn)的浮動(dòng)問題等。

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

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

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

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

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

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

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

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

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

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