基于“任務驅動、項目導向”的《CSS+DIV網頁樣式與布局》課程教學改革研究

摘要：本文針對傳統的高職《CSS+DIV網頁樣式與布局》課程教學中存在的問題進行了教學改革研究，探索了比較實用的“任務驅動、項目導向”的教學方法，以期培養具有勞模精神、工匠精神、敬業精神的“知識型、技能型、創新型”的高素質人才，提升學生就業的核心競爭力。

關鍵詞：任務驅動;項目導向;理實一體化;教學改革

中圖分類號：TP311? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2019）22-0115-02

開放科學（資源服務）標識碼（OSID）：

1 《CSS+DIV網頁樣式與布局》課程教學改革的重要性

隨著社會的進步與發展，傳統的教學模式、教學方法已經很難滿足畢業生就業的崗位需要。一方面大量的畢業生無法找到滿意的工作，另一方面，用人單位無法招聘到符合崗位需求的應用型、技能型職業人才，人才供需兩方無法匹配。《CSS+DIV網頁樣式與布局》課程是應用性極強的課程，也是高職電子商務專業、網絡營銷專業、計算機應用專業、網頁設計專業的核心課程。目前，符合Web標準的“HTML+CSS”網頁設計方式已經取代了傳統的網頁設計方式，其中“CSS+DIV”的網頁布局方法是每個網頁設計人員必須掌握的核心技能。為了能使《CSS+DIV網頁樣式與布局》課程從傳統的偏重理論教學轉向注重職業能力培養，讓學生興趣學習、學以致用，提高學生的實際操作能力，必須對《CSS+DIV網頁樣式與布局》課程進行教學改革。

2 傳統《CSS+DIV網頁樣式與布局》課程教學中存在的問題

2.1忽視了學生的主體作用

課堂教學的主體是學生，學生只有學習到能用、夠用的知識和技能，才能說是有效教學。而傳統《CSS+DIV網頁樣式與布局》課程教學過度的強調理論教學，任課教師花費了大量的時間、精力介紹網頁制作的知識點、難點、模型及理論概念，甚至變成了單一的理論教學，忽視了學生的主體作用，忽視了學生的參與性。

2.2忽視了實踐的重要性

在傳統的《CSS+DIV網頁樣式與布局》課程教學中，重點在基礎知識和原理的灌輸，沒有更多的時間讓學生實踐，課下的學生幾乎也不會自覺地去實際操作或實戰。這種重理論輕實踐的傳統教學方式，就會導致“啞巴英語”的現象，培養出的學生“高分低能”、不能設計網頁，無法滿足企業崗位技能的需求。

2.3忽視了核心技能的培養

在傳統的《CSS+DIV網頁樣式與布局》課程教學中，任課教師沒有把學生的必備的核心技能通過實踐鍛煉、理實一體化、反復實訓的方式灌輸到學生的綜合技能中。培養出來的畢業生幾乎不具備本專業的核心技能，無法實現零距離上崗。

2.4忽視了學生綜合素質的提升

當今，社會急需要具有勞模精神、工匠精神、敬業精神的“知識型、技能型、創新型”的高素質人才。在傳統的《CSS+DIV網頁樣式與布局》課程教學中，沒有把學生的勞模精神、工匠精神、敬業精神、團隊精神、集思廣益的分析方法貫穿到課程中，致使學生畢業時單打獨斗、思維局限，不利于學生的素質教育，也不利于學生的就業與創業。

2.5課程考核方式不科學

傳統的《CSS+DIV網頁樣式與布局》課程考核內容主要是紙質試卷，以理論考核為主，弱化了學生的技能考核、淡化了學生的實際操作能力。而這一點恰恰就是企業所急需的，應用型技能也是零距離上崗的必備條件。

3 基于“任務驅動、項目導向”的《CSS+DIV網頁樣式與布局》課程教學改革

3.1強調學生的主體性、參與性

《CSS+DIV網頁樣式與布局》使用最新的以任務為驅動為主的項目教學方式，將每個項目分解為多個任務，每個任務都要包括“任務說明”“任務實施”“支撐知識點”和“第二課堂”。“任務說明”可以使學生自覺的了解本任務需要制作的項目效果;“任務實施”是項目制作具體實施過程;“支撐知識”對學生動手實操中相關的要點和技能進行系統講解;“第二課堂”是關聯本任務的拓展，有利于學生的發散性思維和創新創意創業技能的培養。大多數任務實施都分為構建網頁HTML結構和構建CSS+DIV樣式兩個部分，學生在完成項目實施過程中掌握了HTML結構和CSS+DIV樣式的相關技能。這就調動了學生學習《CSS+DIV網頁樣式與布局》課程的積極性和參與性。

3.2增強了應用實踐的過程

高職《CSS+DIV網頁樣式與布局》課程是高職電子商務專業、網絡營銷專業、計算機應用專業、網頁設計專業的核心課程，對學生的理論知識、實踐實訓都有嚴格的要求。以“任務驅動、項目導向”的《CSS+DIV網頁樣式與布局》課程教學改革的核心點在于提高學生的應用實踐性，打破傳統的理論教學體系，重構新的符合學生學情的教學內容;系統地將知識點、技能點，通過任務驅動、項目導向整合起來，強化“職業技能”“理實一體化”，在“學中做、做中學，學中練、練中學”的環節中實現零距離上崗的要求，系統提升學生的技能素養。

3.3重視學生核心技能的培養

通過任務驅動、項目導向，可以把高職《CSS+DIV網頁樣式與布局》課程進行項目化改革，將教材分為十三個項目，根據每個項目的不同分為3到8個任務。打破傳統教學體系，構建十三個系統系項目，如：項目一——網站開發入門（項目導讀;學習目標;任務一：了解網站開發流程，任務二：動手創建Dreamweaver站點，任務三：動手制作簡單的HTML+CSS頁面）。項目二——HTML標簽與CSS樣式基礎;項目三——使用CSS設置文字效果;項目四——使用CSS設置圖片效果與網頁背景;項目五——使用CSS設置導航欄;項目六——制作表格并使用CSS美化;項目七——制作表單并使用CSS美化;項目八——CSS與瀏覽器兼容問題;項目九——CSS標準流布局;項目十——CSS浮動布局;項目十一——CSS定位布局;項目十二——綜合應用1;項目十三——綜合應用2。

以項目一的任務三“動手制作簡單的HTML+CSS頁面”為列，就包括了任務說明、任務實施（構建HTML結構、構建CSS樣式）、支撐知識點（HTML與CSS簡介、HTML基礎語法、網頁的基本結構、靜態頁面與動態頁面、網頁的Web標準）等培養學生核心技能的要點。

以項目八——CSS與瀏覽器兼容問題為列，在項目導讀時就給學生一種探索奧秘的感覺：在制作網頁的過程中，最難的并不是各種各樣的新技術，而是對瀏覽器兼容性的處理，對于W3C標準，各大瀏覽器的解讀并不一致，這就導致對頁面的顯示各自不同，加上瀏覽器對CSS解析時存在各種BUG，使CSS與瀏覽器的兼容問題變得更加復雜，讓我們一起解決這個難以解決的問題，包括：任務一——無序列表的兼容性;任務二——浮動在IE下產生的雙倍距離;任務三在IE6中圖片下方有空隙產生;任務四——3像素問題;任務五——瀏覽器不能自適應高度;任務六——margin值加倍問題。項目總結——瀏覽器兼容性介紹、解決瀏覽器問題的技巧;“第二課堂”——一起動手解決CSS與瀏覽器兼容問題，破解兼容、成為IT高手。

再以項目十三——綜合應用2“制作本區域的旅游網頁首頁”項目中任務為列，包括了項目導讀、案例分析，六個子任務（任務一——搭建頁面整體框架，任務二——制作網頁頭部;任務三——制作主體內容的上面部分;任務四——制作主體內容的下面部分）;任務五——制作友情鏈接欄目;任務六——制作頁面底部）。這極大地提高了學生的動手能力，激發了學生學習的積極性。

3.4提升學生的綜合素質和核心競爭力

通過打破傳統的教學體系，形成十三個項目，每個項目由任務支撐，這就會給班級學生劃分為若干個實訓小組。每個實訓小組就會圍繞任務驅動，一起做任務、一起討論、一起創新。這樣，偏重理工科的計算機學生就會在集思廣益中提升自身的交際能力、溝通能力、團隊精神、指揮能力、發散思維，進而提升學生的應用技能、綜合素質和核心競爭力。

3.5建立科學的考評體系

積極組織網頁設計專業技能應用大賽，探索“以賽代考”的考評體系。職業院校的畢業生最受企業喜歡的就是能零距離上崗的“職業能力”。圍繞學生的就業問題，改革傳統的《CSS+DIV網頁樣式與布局》課程考核體系，推行“過程評價占總成績的30%”“網頁設計專業技能應用大賽占總成績的70%”，根據網頁設計專業技能應用大賽的獎項細分（一等獎70分、二等獎50分、三等獎30分）。這種考評體系強化了學生實際操作能力、動手能力，也將極大地提高學生做任務和參加技能大賽的積極性。

4? 結語

《CSS+DIV網頁樣式與布局》課程是一門應用性、實操性極強的重要課程，根據課程的性質、特點，在學情調查、教材處理、教學模式、教學方法、理實一體化、考核方式等環節進行了教學改革。要積極培養企業所渴望的具有勞模精神、工匠精神、敬業精神的“知識型、技能型、創新型”的高素質人才，就要切實提高學生的參與性、積極性、創新性。基于“任務驅動、項目導向”的《CSS+DIV網頁樣式與布局》課程教學改革使得學生能系統地掌握課程內容、項目實訓、任務實施和崗位技能。通過任務驅動，提高了學生分析問題、解決問題的能力，提高了學生的團隊合作精神和創新意識，有利于提高其綜合素質和核心競爭力。

參考文獻：

[1] 徐琴，張曉穎.CSS+DIV網頁樣式與布局[M].北京：航空工業出版社，2018.

[2] 歐陽芳.項目教學法在《HTML網頁設計》教學中的探討[J].電腦知識與技術，2010（11）.

[3] 柳永念.基于項目教學法的非計算機專業計算機教學改革探討[J].教育與職業，2011（24）.

[4] 高慧.基于項目教學法《網頁設計與制作》課程開發與教學設計[J].價值工程，2011（33）.

[5] 周溢輝，田源.“任務驅動法”在VFP教學中的應用[J].科技信息（科學教研），2008（2） .

[6] 田振坤.非計算機專業學生學習數據庫課程的特點探析與對策[J].中國勞動關系學院學報，2013（4）.

[7] 韓秀枝，曹源.基于現代信息技術ASP.NET開發工具的高職教務管理信息系統的設計及應用研究[J].廣西輕工業，2010（10）.

【通聯編輯：唐一東】