DIV+CSS在中職計算機教學中的運用

鄒 錳

（廣東省東莞市大嶺山職業技術學校 廣東 東莞 523820）

DIV+CSS的網頁布局方法現已成為網頁設計的行業標準。在計算機專業課教學中，網頁設計教學也都是以DIV+CSS布局為中心進行的。筆者在實際教學中發現，DIV+CSS布局這一方法不僅適用于網頁制作，還能夠靈活運用到其他計算機專業課教學中，甚至運用到其他專業課教學中。

DIV+CSS技術簡介

DIV+CSS是當前WEB標準中的一種術語，它是一種網頁布局方法，這種網頁布局方法有別于傳統HTML網頁設計語言中的表格（TABLE）布局方式，可實現網頁頁面內容與表現相分離。DIV可比做容器，它用來進行網頁布局，打好網頁的框架。CSS是層疊樣式表（Cascading Style Sheets） 的縮寫，用于定義HTML元素的顯示形式，是W3C（The World Wide Web Consortium，萬維網聯盟）推出的格式化網頁內容的標準技術，是網頁設計者必須掌的技術之一。

如圖1所示，每個DIV相當于一個盒子，盒子中存放網頁的具體內容，包括圖片、文字、動畫等。整個網頁由很多個DIV“盒子”拼成。

圖1 網頁與DIV關系示意圖

中職計算機教學存在的問題

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

計算機教學形式單一 計算機學科操作性強，相對于其他學科而言，學生動手機會多。但是由于計算機軟件的特點，在計算機教學中，一般采用的教學方法基本是案例教學法，教師將知識點通過案例操作一遍，然后學生按教師要求也將實例做出來，或者反復練習。

計算機知識更新快 軟件的更新速度是非常快的，學生在高一學習的知識可能在高中畢業時已經完全被新的知識代替。一方面，學生對新的計算機技術有興趣；另一方面，教師跟不上計算機知識更新步伐。

學生綜合運用計算機的知識能力差 學生學習完多款軟件后，對單一軟件的運用可能較好，但是很多實際問題不是一款軟件就能解決的。另外，文化基礎差也是中職學生的一大軟肋，造成學生的綜合能力低下。例如，很多學生無法單獨做好一個動畫短片，因為做動畫短片除了要掌握好基本的動畫制作軟件Flash等，還需要對音頻進行很好的控制；另外，還要自己寫好劇本，需要學生良好的寫作能力和創作力、想象力的綜合運用。

DIV+CSS在計算機教學中的新解

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

CSS——教學形式多樣化 在DIV+CSS技術實現的網頁中，可通過改變CSS的設置，實現網頁表現的多樣化。在計算機教學中，對同樣的教學內容除了采用案例教學，項目教學方法外，完全可以采用游戲、競賽投標等方式進行。對不同層次的學生，同樣的內容必須能夠提供適合它們的不同教學方式。教師在教學形式上要大膽創新，從其他學科教學形式或流行元素上的基礎上開發出多樣化的教學形式。實現同樣的內容不同的教法、不同的學生不同的教法。

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

DIV+CSS在計算機教學中的應用

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

圖2 卡片內容示意圖

圖3 卡片模式二進制原理示意圖

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

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

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

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

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

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

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

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

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

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

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