摘要：本文針對(duì)傳統(tǒng)的高職《CSS+DIV網(wǎng)頁樣式與布局》課程教學(xué)中存在的問題進(jìn)行了教學(xué)改革研究，探索了比較實(shí)用的“任務(wù)驅(qū)動(dòng)、項(xiàng)目導(dǎo)向”的教學(xué)方法，以期培養(yǎng)具有勞模精神、工匠精神、敬業(yè)精神的“知識(shí)型、技能型、創(chuàng)新型”的高素質(zhì)人才，提升學(xué)生就業(yè)的核心競爭力。

關(guān)鍵詞：任務(wù)驅(qū)動(dòng);項(xiàng)目導(dǎo)向;理實(shí)一體化;教學(xué)改革

中圖分類號(hào)：TP311? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2019）22-0115-02

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

1 《CSS+DIV網(wǎng)頁樣式與布局》課程教學(xué)改革的重要性

隨著社會(huì)的進(jìn)步與發(fā)展，傳統(tǒng)的教學(xué)模式、教學(xué)方法已經(jīng)很難滿足畢業(yè)生就業(yè)的崗位需要。一方面大量的畢業(yè)生無法找到滿意的工作，另一方面，用人單位無法招聘到符合崗位需求的應(yīng)用型、技能型職業(yè)人才，人才供需兩方無法匹配?！禖SS+DIV網(wǎng)頁樣式與布局》課程是應(yīng)用性極強(qiáng)的課程，也是高職電子商務(wù)專業(yè)、網(wǎng)絡(luò)營銷專業(yè)、計(jì)算機(jī)應(yīng)用專業(yè)、網(wǎng)頁設(shè)計(jì)專業(yè)的核心課程。目前，符合Web標(biāo)準(zhǔn)的“HTML+CSS”網(wǎng)頁設(shè)計(jì)方式已經(jīng)取代了傳統(tǒng)的網(wǎng)頁設(shè)計(jì)方式，其中“CSS+DIV”的網(wǎng)頁布局方法是每個(gè)網(wǎng)頁設(shè)計(jì)人員必須掌握的核心技能。為了能使《CSS+DIV網(wǎng)頁樣式與布局》課程從傳統(tǒng)的偏重理論教學(xué)轉(zhuǎn)向注重職業(yè)能力培養(yǎng)，讓學(xué)生興趣學(xué)習(xí)、學(xué)以致用，提高學(xué)生的實(shí)際操作能力，必須對(duì)《CSS+DIV網(wǎng)頁樣式與布局》課程進(jìn)行教學(xué)改革。

2 傳統(tǒng)《CSS+DIV網(wǎng)頁樣式與布局》課程教學(xué)中存在的問題

2.1忽視了學(xué)生的主體作用

課堂教學(xué)的主體是學(xué)生，學(xué)生只有學(xué)習(xí)到能用、夠用的知識(shí)和技能，才能說是有效教學(xué)。而傳統(tǒng)《CSS+DIV網(wǎng)頁樣式與布局》課程教學(xué)過度的強(qiáng)調(diào)理論教學(xué)，任課教師花費(fèi)了大量的時(shí)間、精力介紹網(wǎng)頁制作的知識(shí)點(diǎn)、難點(diǎn)、模型及理論概念，甚至變成了單一的理論教學(xué)，忽視了學(xué)生的主體作用，忽視了學(xué)生的參與性。

2.2忽視了實(shí)踐的重要性

在傳統(tǒng)的《CSS+DIV網(wǎng)頁樣式與布局》課程教學(xué)中，重點(diǎn)在基礎(chǔ)知識(shí)和原理的灌輸，沒有更多的時(shí)間讓學(xué)生實(shí)踐，課下的學(xué)生幾乎也不會(huì)自覺地去實(shí)際操作或?qū)崙?zhàn)。這種重理論輕實(shí)踐的傳統(tǒng)教學(xué)方式，就會(huì)導(dǎo)致“啞巴英語”的現(xiàn)象，培養(yǎng)出的學(xué)生“高分低能”、不能設(shè)計(jì)網(wǎng)頁，無法滿足企業(yè)崗位技能的需求。

2.3忽視了核心技能的培養(yǎng)

在傳統(tǒng)的《CSS+DIV網(wǎng)頁樣式與布局》課程教學(xué)中，任課教師沒有把學(xué)生的必備的核心技能通過實(shí)踐鍛煉、理實(shí)一體化、反復(fù)實(shí)訓(xùn)的方式灌輸?shù)綄W(xué)生的綜合技能中。培養(yǎng)出來的畢業(yè)生幾乎不具備本專業(yè)的核心技能，無法實(shí)現(xiàn)零距離上崗。

2.4忽視了學(xué)生綜合素質(zhì)的提升

當(dāng)今，社會(huì)急需要具有勞模精神、工匠精神、敬業(yè)精神的“知識(shí)型、技能型、創(chuàng)新型”的高素質(zhì)人才。在傳統(tǒng)的《CSS+DIV網(wǎng)頁樣式與布局》課程教學(xué)中，沒有把學(xué)生的勞模精神、工匠精神、敬業(yè)精神、團(tuán)隊(duì)精神、集思廣益的分析方法貫穿到課程中，致使學(xué)生畢業(yè)時(shí)單打獨(dú)斗、思維局限，不利于學(xué)生的素質(zhì)教育，也不利于學(xué)生的就業(yè)與創(chuàng)業(yè)。

2.5課程考核方式不科學(xué)

傳統(tǒng)的《CSS+DIV網(wǎng)頁樣式與布局》課程考核內(nèi)容主要是紙質(zhì)試卷，以理論考核為主，弱化了學(xué)生的技能考核、淡化了學(xué)生的實(shí)際操作能力。而這一點(diǎn)恰恰就是企業(yè)所急需的，應(yīng)用型技能也是零距離上崗的必備條件。

3 基于“任務(wù)驅(qū)動(dòng)、項(xiàng)目導(dǎo)向”的《CSS+DIV網(wǎng)頁樣式與布局》課程教學(xué)改革

3.1強(qiáng)調(diào)學(xué)生的主體性、參與性

《CSS+DIV網(wǎng)頁樣式與布局》使用最新的以任務(wù)為驅(qū)動(dòng)為主的項(xiàng)目教學(xué)方式，將每個(gè)項(xiàng)目分解為多個(gè)任務(wù)，每個(gè)任務(wù)都要包括“任務(wù)說明”“任務(wù)實(shí)施”“支撐知識(shí)點(diǎn)”和“第二課堂”?！叭蝿?wù)說明”可以使學(xué)生自覺的了解本任務(wù)需要制作的項(xiàng)目效果;“任務(wù)實(shí)施”是項(xiàng)目制作具體實(shí)施過程;“支撐知識(shí)”對(duì)學(xué)生動(dòng)手實(shí)操中相關(guān)的要點(diǎn)和技能進(jìn)行系統(tǒng)講解;“第二課堂”是關(guān)聯(lián)本任務(wù)的拓展，有利于學(xué)生的發(fā)散性思維和創(chuàng)新創(chuàng)意創(chuàng)業(yè)技能的培養(yǎng)。大多數(shù)任務(wù)實(shí)施都分為構(gòu)建網(wǎng)頁HTML結(jié)構(gòu)和構(gòu)建CSS+DIV樣式兩個(gè)部分，學(xué)生在完成項(xiàng)目實(shí)施過程中掌握了HTML結(jié)構(gòu)和CSS+DIV樣式的相關(guān)技能。這就調(diào)動(dòng)了學(xué)生學(xué)習(xí)《CSS+DIV網(wǎng)頁樣式與布局》課程的積極性和參與性。

3.2增強(qiáng)了應(yīng)用實(shí)踐的過程

高職《CSS+DIV網(wǎng)頁樣式與布局》課程是高職電子商務(wù)專業(yè)、網(wǎng)絡(luò)營銷專業(yè)、計(jì)算機(jī)應(yīng)用專業(yè)、網(wǎng)頁設(shè)計(jì)專業(yè)的核心課程，對(duì)學(xué)生的理論知識(shí)、實(shí)踐實(shí)訓(xùn)都有嚴(yán)格的要求。以“任務(wù)驅(qū)動(dòng)、項(xiàng)目導(dǎo)向”的《CSS+DIV網(wǎng)頁樣式與布局》課程教學(xué)改革的核心點(diǎn)在于提高學(xué)生的應(yīng)用實(shí)踐性，打破傳統(tǒng)的理論教學(xué)體系，重構(gòu)新的符合學(xué)生學(xué)情的教學(xué)內(nèi)容;系統(tǒng)地將知識(shí)點(diǎn)、技能點(diǎn)，通過任務(wù)驅(qū)動(dòng)、項(xiàng)目導(dǎo)向整合起來，強(qiáng)化“職業(yè)技能”“理實(shí)一體化”，在“學(xué)中做、做中學(xué)，學(xué)中練、練中學(xué)”的環(huán)節(jié)中實(shí)現(xiàn)零距離上崗的要求，系統(tǒng)提升學(xué)生的技能素養(yǎng)。

3.3重視學(xué)生核心技能的培養(yǎng)

通過任務(wù)驅(qū)動(dòng)、項(xiàng)目導(dǎo)向，可以把高職《CSS+DIV網(wǎng)頁樣式與布局》課程進(jìn)行項(xiàng)目化改革，將教材分為十三個(gè)項(xiàng)目，根據(jù)每個(gè)項(xiàng)目的不同分為3到8個(gè)任務(wù)。打破傳統(tǒng)教學(xué)體系，構(gòu)建十三個(gè)系統(tǒng)系項(xiàng)目，如：項(xiàng)目一——網(wǎng)站開發(fā)入門（項(xiàng)目導(dǎo)讀;學(xué)習(xí)目標(biāo);任務(wù)一：了解網(wǎng)站開發(fā)流程，任務(wù)二：動(dòng)手創(chuàng)建Dreamweaver站點(diǎn)，任務(wù)三：動(dòng)手制作簡單的HTML+CSS頁面）。項(xiàng)目二——HTML標(biāo)簽與CSS樣式基礎(chǔ);項(xiàng)目三——使用CSS設(shè)置文字效果;項(xiàng)目四——使用CSS設(shè)置圖片效果與網(wǎng)頁背景;項(xiàng)目五——使用CSS設(shè)置導(dǎo)航欄;項(xiàng)目六——制作表格并使用CSS美化;項(xiàng)目七——制作表單并使用CSS美化;項(xiàng)目八——CSS與瀏覽器兼容問題;項(xiàng)目九——CSS標(biāo)準(zhǔn)流布局;項(xiàng)目十——CSS浮動(dòng)布局;項(xiàng)目十一——CSS定位布局;項(xiàng)目十二——綜合應(yīng)用1;項(xiàng)目十三——綜合應(yīng)用2。

以項(xiàng)目一的任務(wù)三“動(dòng)手制作簡單的HTML+CSS頁面”為列，就包括了任務(wù)說明、任務(wù)實(shí)施（構(gòu)建HTML結(jié)構(gòu)、構(gòu)建CSS樣式）、支撐知識(shí)點(diǎn)（HTML與CSS簡介、HTML基礎(chǔ)語法、網(wǎng)頁的基本結(jié)構(gòu)、靜態(tài)頁面與動(dòng)態(tài)頁面、網(wǎng)頁的Web標(biāo)準(zhǔn)）等培養(yǎng)學(xué)生核心技能的要點(diǎn)。

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

再以項(xiàng)目十三——綜合應(yīng)用2“制作本區(qū)域的旅游網(wǎng)頁首頁”項(xiàng)目中任務(wù)為列，包括了項(xiàng)目導(dǎo)讀、案例分析，六個(gè)子任務(wù)（任務(wù)一——搭建頁面整體框架，任務(wù)二——制作網(wǎng)頁頭部;任務(wù)三——制作主體內(nèi)容的上面部分;任務(wù)四——制作主體內(nèi)容的下面部分）;任務(wù)五——制作友情鏈接欄目;任務(wù)六——制作頁面底部）。這極大地提高了學(xué)生的動(dòng)手能力，激發(fā)了學(xué)生學(xué)習(xí)的積極性。

3.4提升學(xué)生的綜合素質(zhì)和核心競爭力

通過打破傳統(tǒng)的教學(xué)體系，形成十三個(gè)項(xiàng)目，每個(gè)項(xiàng)目由任務(wù)支撐，這就會(huì)給班級(jí)學(xué)生劃分為若干個(gè)實(shí)訓(xùn)小組。每個(gè)實(shí)訓(xùn)小組就會(huì)圍繞任務(wù)驅(qū)動(dòng)，一起做任務(wù)、一起討論、一起創(chuàng)新。這樣，偏重理工科的計(jì)算機(jī)學(xué)生就會(huì)在集思廣益中提升自身的交際能力、溝通能力、團(tuán)隊(duì)精神、指揮能力、發(fā)散思維，進(jìn)而提升學(xué)生的應(yīng)用技能、綜合素質(zhì)和核心競爭力。

3.5建立科學(xué)的考評(píng)體系

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

4? 結(jié)語

《CSS+DIV網(wǎng)頁樣式與布局》課程是一門應(yīng)用性、實(shí)操性極強(qiáng)的重要課程，根據(jù)課程的性質(zhì)、特點(diǎn)，在學(xué)情調(diào)查、教材處理、教學(xué)模式、教學(xué)方法、理實(shí)一體化、考核方式等環(huán)節(jié)進(jìn)行了教學(xué)改革。要積極培養(yǎng)企業(yè)所渴望的具有勞模精神、工匠精神、敬業(yè)精神的“知識(shí)型、技能型、創(chuàng)新型”的高素質(zhì)人才，就要切實(shí)提高學(xué)生的參與性、積極性、創(chuàng)新性?；凇叭蝿?wù)驅(qū)動(dòng)、項(xiàng)目導(dǎo)向”的《CSS+DIV網(wǎng)頁樣式與布局》課程教學(xué)改革使得學(xué)生能系統(tǒng)地掌握課程內(nèi)容、項(xiàng)目實(shí)訓(xùn)、任務(wù)實(shí)施和崗位技能。通過任務(wù)驅(qū)動(dòng)，提高了學(xué)生分析問題、解決問題的能力，提高了學(xué)生的團(tuán)隊(duì)合作精神和創(chuàng)新意識(shí)，有利于提高其綜合素質(zhì)和核心競爭力。

參考文獻(xiàn)：

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

[2] 歐陽芳.項(xiàng)目教學(xué)法在《HTML網(wǎng)頁設(shè)計(jì)》教學(xué)中的探討[J].電腦知識(shí)與技術(shù)，2010（11）.

[3] 柳永念.基于項(xiàng)目教學(xué)法的非計(jì)算機(jī)專業(yè)計(jì)算機(jī)教學(xué)改革探討[J].教育與職業(yè)，2011（24）.

[4] 高慧.基于項(xiàng)目教學(xué)法《網(wǎng)頁設(shè)計(jì)與制作》課程開發(fā)與教學(xué)設(shè)計(jì)[J].價(jià)值工程，2011（33）.

[5] 周溢輝，田源.“任務(wù)驅(qū)動(dòng)法”在VFP教學(xué)中的應(yīng)用[J].科技信息（科學(xué)教研），2008（2） .

[6] 田振坤.非計(jì)算機(jī)專業(yè)學(xué)生學(xué)習(xí)數(shù)據(jù)庫課程的特點(diǎn)探析與對(duì)策[J].中國勞動(dòng)關(guān)系學(xué)院學(xué)報(bào)，2013（4）.

[7] 韓秀枝，曹源.基于現(xiàn)代信息技術(shù)ASP.NET開發(fā)工具的高職教務(wù)管理信息系統(tǒng)的設(shè)計(jì)及應(yīng)用研究[J].廣西輕工業(yè)，2010（10）.

【通聯(lián)編輯：唐一東】