摘要:“網(wǎng)頁設(shè)計(jì)與制作”課程教學(xué)改革的出發(fā)點(diǎn)是提高學(xué)生的網(wǎng)站實(shí)戰(zhàn)技能。本文提出課程應(yīng)以典型的網(wǎng)站項(xiàng)目為核心，按照實(shí)際開發(fā)的工作過程將項(xiàng)目分解為若干個(gè)任務(wù)，并按照任務(wù)實(shí)施的需要來進(jìn)行相關(guān)知識(shí)和技能的培養(yǎng)和訓(xùn)練。

關(guān)鍵詞:工作過程;教學(xué)改革;網(wǎng)頁制作;教學(xué)方案

工作過程導(dǎo)向的教學(xué)思想和方法是在學(xué)習(xí)與借鑒德國“雙元制”職業(yè)教育經(jīng)驗(yàn)、改革我國職業(yè)教育的過程中，逐步在我國教育界受到重視。所謂“工作過程”，是指在企業(yè)里為完成一件工作任務(wù)并獲得工作成果而進(jìn)行的一個(gè)完整工序[1]。工作過程的核心是行動(dòng)導(dǎo)向，強(qiáng)調(diào)學(xué)生是學(xué)習(xí)過程的中心，教師是學(xué)習(xí)過程的組織者與協(xié)調(diào)人，教師采取“資訊、計(jì)劃、決策、實(shí)施、檢查、評(píng)估”的整體行動(dòng)，在教學(xué)中與學(xué)生互動(dòng)，讓學(xué)生通過“獨(dú)立地獲取信息、獨(dú)立地制定計(jì)劃、獨(dú)立地實(shí)施計(jì)劃、獨(dú)立地評(píng)估計(jì)劃”，使學(xué)生在實(shí)踐中掌握職業(yè)技能、習(xí)得專業(yè)知識(shí)，從而構(gòu)建屬于自己的經(jīng)驗(yàn)、知識(shí)或能力體系[2]。

以工作過程為導(dǎo)向構(gòu)建教學(xué)內(nèi)容和教學(xué)方法的具體思路是:根據(jù)確定的職業(yè)崗位，先分析其典型工作過程與工作任務(wù)，得出完成工作任務(wù)對應(yīng)的職業(yè)要求，按照職業(yè)要求設(shè)計(jì)專業(yè)知識(shí)模塊和項(xiàng)目案例，分解工作任務(wù)，形成教學(xué)情境。從而實(shí)現(xiàn)按照職業(yè)成長規(guī)律與學(xué)習(xí)規(guī)律將職業(yè)能力從簡單到復(fù)雜，從單一到綜合進(jìn)行整合，歸納出相應(yīng)的行動(dòng)領(lǐng)域，再轉(zhuǎn)換為學(xué)習(xí)領(lǐng)域。

1典型工作任務(wù)與職業(yè)能力分析

根據(jù)計(jì)算機(jī)類專業(yè)畢業(yè)生的就業(yè)調(diào)查情況，大多

數(shù)學(xué)生在中小型軟件公司從事網(wǎng)站開發(fā)工作，其典型工作過程如圖1所示:

圖1Web網(wǎng)站開發(fā)工作過程

針對該工作過程進(jìn)行分析，可以得出Web網(wǎng)站開發(fā)工程師崗位對應(yīng)的典型工作任務(wù)有:網(wǎng)站的規(guī)劃與策劃、網(wǎng)頁界面設(shè)計(jì)，網(wǎng)頁布局，動(dòng)畫設(shè)計(jì)，Web后臺(tái)與前臺(tái)的整合，項(xiàng)目程序開發(fā)等。典型工作任務(wù)及其對應(yīng)的職業(yè)能力如表1所示:

作者簡介:劉萬輝(1978-)，男，河南鞏義人，講師，工程師，碩士，研究方向?yàn)橛?jì)算機(jī)網(wǎng)絡(luò)、多媒體與網(wǎng)頁設(shè)計(jì)。獲江蘇省多媒體課件一等獎(jiǎng)1項(xiàng)、二等獎(jiǎng)1項(xiàng)，主編教材2部，參編教材2部，制作橫向企、事業(yè)單位網(wǎng)站200余項(xiàng)。

表1典型工作任務(wù)與職業(yè)能力分析表

工作任務(wù)職業(yè)能力

網(wǎng)站的規(guī)劃與策劃網(wǎng)站的規(guī)劃與策劃能力

網(wǎng)頁界面設(shè)計(jì)網(wǎng)頁色彩搭配與網(wǎng)站布局能力

利用Photoshop進(jìn)行網(wǎng)站效果圖的設(shè)計(jì)能力

利用Flash進(jìn)行動(dòng)畫制作的能力

網(wǎng)頁布局與編輯符合Web2.0標(biāo)準(zhǔn)的XHTML代碼編輯能力

利用DIV+CSS實(shí)現(xiàn)網(wǎng)頁布局能力

利用JavaScript實(shí)現(xiàn)DOM操作的能力

表格與框架的布局能力

CSS樣式表的運(yùn)用能力

Web前臺(tái)與后臺(tái)的代碼融合CMS系統(tǒng)地搜索能力

CMS系統(tǒng)的使用能力

項(xiàng)目程序開發(fā)使用ADO訪問數(shù)據(jù)庫的能力

利用Session、Cookie等實(shí)現(xiàn)頁面間傳值、身份驗(yàn)證、權(quán)限管理的能力

利用Web控件實(shí)現(xiàn)業(yè)務(wù)邏輯的能力

利用Asp實(shí)現(xiàn)簡單的MIS系統(tǒng)地的能力

以上這些能力目標(biāo)，在教學(xué)領(lǐng)域中主要對應(yīng)的是網(wǎng)頁設(shè)計(jì)與制作中應(yīng)完成的教學(xué)任務(wù)。但目前高職院校的網(wǎng)頁設(shè)計(jì)與制作教學(xué)中均存在很多問題，制約和影響了能力目標(biāo)的實(shí)現(xiàn)。問題之一:雙師師資不足，教師能夠正常講授課程但是沒有項(xiàng)目開發(fā)的工程經(jīng)驗(yàn);問題之二:教師選用的案例過于簡單，脫離實(shí)際工作過程。問題三:教學(xué)過程中無法體現(xiàn)關(guān)鍵知識(shí)點(diǎn)的前后連續(xù)性，這樣的案例無法滿足實(shí)際工作要求，也無法激發(fā)學(xué)生的學(xué)習(xí)興趣。

2將項(xiàng)目資源轉(zhuǎn)化為教學(xué)資源的教學(xué)情境

設(shè)計(jì)

要解決教學(xué)中存在的一系列問題，順利實(shí)現(xiàn)“網(wǎng)頁制作與網(wǎng)站設(shè)計(jì)”課程的教學(xué)目標(biāo)，首要解決的問題就是如何將項(xiàng)目資源轉(zhuǎn)化為教學(xué)資源。在目前高職院校中，每年都有一定的數(shù)字化建設(shè)項(xiàng)目，各處室網(wǎng)站改版，例如專題學(xué)習(xí)網(wǎng)站，同時(shí)在網(wǎng)絡(luò)上也很容易找到一些網(wǎng)站外包項(xiàng)目，在社會(huì)上也很容易找到一些

橫向的網(wǎng)站項(xiàng)目。從中可見，并不缺乏真實(shí)的網(wǎng)站項(xiàng)目，但是，如何將這些項(xiàng)目資源轉(zhuǎn)化為教學(xué)資源，是一個(gè)需要反復(fù)實(shí)踐的課題。本人從2004年開始，以我院創(chuàng)新實(shí)驗(yàn)室的近200多名學(xué)生作為試點(diǎn)，先后開發(fā)了企事業(yè)單位網(wǎng)站近200個(gè)，開發(fā)教學(xué)專題網(wǎng)站30多個(gè)，幾年來，這些項(xiàng)目都以不同程度的在向教學(xué)資源的轉(zhuǎn)化，從而對教學(xué)形成了良性的循環(huán)，每屆畢業(yè)的學(xué)生都能夠從中受益。為了更好的指導(dǎo)教學(xué)，將項(xiàng)目資源轉(zhuǎn)化為教學(xué)資源，我們構(gòu)造了以網(wǎng)站欣賞、網(wǎng)站規(guī)劃規(guī)范、網(wǎng)站效果圖設(shè)計(jì)、網(wǎng)頁色彩與布局設(shè)計(jì)、網(wǎng)頁動(dòng)畫設(shè)計(jì)、HTML語言基礎(chǔ)、網(wǎng)頁布局與編輯、模板與庫的應(yīng)用、層疊樣式表CSS、DIV+CSS網(wǎng)頁布局、靜態(tài)網(wǎng)站動(dòng)態(tài)化、動(dòng)態(tài)程序開發(fā)、綜合教學(xué)案例、項(xiàng)目開發(fā)實(shí)訓(xùn)14個(gè)模塊為主教學(xué)單元，然后將教學(xué)內(nèi)容進(jìn)行了重構(gòu)，整理成5個(gè)典型的工作情境，編寫了基于工作過程的《網(wǎng)頁設(shè)計(jì)與制作教程》，教材內(nèi)容體系清晰，教學(xué)模塊符合崗位需求。表2是結(jié)合我院實(shí)際情況，制定的關(guān)于網(wǎng)頁設(shè)計(jì)與制作的整體教學(xué)情境。

表2“網(wǎng)頁設(shè)計(jì)與制作”教學(xué)情境設(shè)計(jì)

學(xué)習(xí)情境子情境設(shè)計(jì)

情境1:教學(xué)成果申報(bào)網(wǎng)站建設(shè)項(xiàng)目基礎(chǔ)與流程設(shè)計(jì)、效果圖設(shè)計(jì)與切片、網(wǎng)站的后期編輯、網(wǎng)站的發(fā)布與測試

情境2:書法家莊輝個(gè)人網(wǎng)站建設(shè)網(wǎng)站項(xiàng)目策劃、主頁效果圖設(shè)計(jì)與制作、模板頁效果圖的設(shè)計(jì)與制作、網(wǎng)站切片與導(dǎo)出、網(wǎng)站動(dòng)畫的設(shè)計(jì)、網(wǎng)站的后期編輯、HTML學(xué)習(xí)、CSS樣式表的應(yīng)用、項(xiàng)目完善

情境3:英語等級(jí)考試專題學(xué)習(xí)網(wǎng)站建設(shè)項(xiàng)目前期組織工作、效果圖的設(shè)計(jì)與切片與動(dòng)畫設(shè)計(jì)、網(wǎng)頁的后期編輯、代碼融合

情境4:軟件項(xiàng)目化綜合實(shí)訓(xùn)精品課程網(wǎng)站項(xiàng)目前期策劃、效果圖的設(shè)計(jì)與切片與動(dòng)畫設(shè)計(jì)、DIV+CSS布局網(wǎng)站、使用模板與庫完善網(wǎng)站

情境5:班級(jí)通訊錄管理系統(tǒng)的實(shí)現(xiàn)前期策劃與效果圖的設(shè)計(jì)、框架布局圖形網(wǎng)站、登錄系統(tǒng)的實(shí)現(xiàn)、通用查詢系統(tǒng)的實(shí)現(xiàn)、通訊錄管理系統(tǒng)的實(shí)現(xiàn)

學(xué)習(xí)情境是學(xué)習(xí)領(lǐng)域教學(xué)內(nèi)容的具體化。表2中學(xué)習(xí)情境的設(shè)計(jì)思路是:按照Web網(wǎng)站項(xiàng)目開發(fā)實(shí)際工作過程，將典型的工作任務(wù)融入到為這5個(gè)工作情境中，這些工作情境從個(gè)體上看，都代表了某一類網(wǎng)站;從整體上看，則是難度逐步加深，推動(dòng)了工作進(jìn)度，最終完成5種類型的網(wǎng)站項(xiàng)目、網(wǎng)頁設(shè)計(jì)與制作的理論知識(shí)點(diǎn)技能要求，分布在這些工作情境之中，它和傳統(tǒng)教學(xué)順序完全不同，教學(xué)內(nèi)容設(shè)計(jì)完全取決于實(shí)際開發(fā)需要，從而大大激發(fā)了學(xué)生的興趣，達(dá)到了“學(xué)中做、做中學(xué)”的效果，學(xué)生的學(xué)習(xí)主觀能動(dòng)性得到了發(fā)揮。

3教學(xué)模式與教學(xué)過程的設(shè)計(jì)

教學(xué)模式采用工作流程模塊化，模塊內(nèi)容案例

化，課程考核過程化，理論實(shí)踐一體化的教學(xué)模式，充分實(shí)現(xiàn)教學(xué)做一體化的教學(xué)體系。

工作流程模塊化:根據(jù)課程培養(yǎng)目標(biāo)，遵循基于工作過程的課程開發(fā)與設(shè)計(jì)理論，聽取IT專家以及歷屆畢業(yè)生的意見，重組教學(xué)內(nèi)容。

模塊內(nèi)容案例化:每一模塊下都設(shè)立了相應(yīng)實(shí)踐教學(xué)的教學(xué)案例，供學(xué)生學(xué)習(xí)參考。

課程考核過程化:采用形成性過程考核的方式，形成了以能力培養(yǎng)為目的的考核方式。

理論實(shí)踐一體化:通過理論實(shí)踐一體化的教學(xué)模式，使理論與實(shí)踐有機(jī)融合，教學(xué)做合一，不但培養(yǎng)了學(xué)生的專業(yè)能力，還充分培養(yǎng)了學(xué)生的方法能力、社會(huì)能力和職業(yè)素養(yǎng)。

以項(xiàng)目驅(qū)動(dòng)為主線，遵循教育教學(xué)規(guī)律，由簡單到復(fù)雜，實(shí)現(xiàn)教學(xué)目標(biāo)。如圖2所示:

完善的、科學(xué)的、規(guī)范的、立體化的課程資源

圖2教學(xué)模式的設(shè)計(jì)

教學(xué)內(nèi)容與教學(xué)模式確定后，教學(xué)過程的實(shí)施，首先進(jìn)行項(xiàng)目分組，然后給各組下發(fā)任務(wù)單，采用項(xiàng)目資訊、計(jì)劃與決策、項(xiàng)目實(shí)施、項(xiàng)目檢查與評(píng)價(jià)四

步教學(xué)法。整個(gè)教學(xué)過程采用過程考核。

4教學(xué)的考核方式

考核方式如表3所示。

表3“網(wǎng)頁設(shè)計(jì)與制作”教學(xué)考核方法

考評(píng)

方式過程考評(píng)(項(xiàng)目考評(píng))期末考評(píng)

(項(xiàng)目考評(píng))

素質(zhì)考評(píng)工單考評(píng)實(shí)操考評(píng)

10分20分30分40分

考評(píng)

實(shí)施由指導(dǎo)教師根據(jù)學(xué)生表現(xiàn)集中考評(píng)由主講教師根據(jù)學(xué)生完成的工單情況考評(píng)有指導(dǎo)教師對學(xué)生進(jìn)行項(xiàng)目操作考評(píng)按照教考分離的原則，由學(xué)校教務(wù)處組織考評(píng)

考評(píng)

標(biāo)準(zhǔn)根據(jù)遵循實(shí)驗(yàn)室規(guī)則，能夠團(tuán)結(jié)同學(xué)，配合小組工作任務(wù)等情況打分(10分)預(yù)習(xí)內(nèi)容(10分)

項(xiàng)目操作過程有計(jì)劃與實(shí)施記錄(10分)任務(wù)方案正確(10分)

操作過程正確(10分)

任務(wù)完成良好(10分)建議采用項(xiàng)目考試，已完成真實(shí)項(xiàng)目的能力來考核

注:1.造成設(shè)備損壞的項(xiàng)目計(jì)0分。

2.課程結(jié)合學(xué)習(xí)過程可以采用以項(xiàng)目代考、以獎(jiǎng)代考、以認(rèn)證代考。

5對教師的要求

要實(shí)施上述教學(xué)模式，對教師的能力有以下幾點(diǎn)要求:

(1) 具有獨(dú)立開發(fā)中型商業(yè)網(wǎng)站的的水平和能力;

(2) 具備一定的項(xiàng)目設(shè)計(jì)能力和項(xiàng)目組織經(jīng)驗(yàn);

(3) 課內(nèi)實(shí)踐部分指導(dǎo)教師必須具備現(xiàn)場實(shí)際工作經(jīng)歷2年以上;

(4) 具備設(shè)計(jì)基于行動(dòng)導(dǎo)向的教學(xué)法的設(shè)計(jì)應(yīng)用能力;

(5) 能采用先進(jìn)的教學(xué)方法，具有比較強(qiáng)的駕馭課堂的能力;

(6) 具有良好的職業(yè)道德和責(zé)任心。

6教學(xué)效果和體會(huì)

在經(jīng)過2006級(jí)學(xué)生小班化試點(diǎn)后，我們在2007級(jí)計(jì)算機(jī)軟件技術(shù)專業(yè)學(xué)生中應(yīng)用了基于工作過程導(dǎo)向的，將真實(shí)項(xiàng)目資源轉(zhuǎn)化為教學(xué)資源的任務(wù)驅(qū)動(dòng)教學(xué)方法，實(shí)踐證明，在實(shí)際教學(xué)過程中，學(xué)生能夠主動(dòng)發(fā)現(xiàn)問題，并積極主動(dòng)去解決問題，特別是由于所有的情境都基于同一項(xiàng)目，學(xué)生在做后面的實(shí)訓(xùn)時(shí)，經(jīng)常能發(fā)現(xiàn)以前作業(yè)的不足之處，從而主動(dòng)將業(yè)

余時(shí)間用來做網(wǎng)站項(xiàng)目，部分同學(xué)甚至在學(xué)期末將本學(xué)期20個(gè)工作任務(wù)全部重做了一遍，大多數(shù)學(xué)生具備了學(xué)習(xí)的主動(dòng)性和能動(dòng)性，明確了知識(shí)模塊的聯(lián)系和課程的學(xué)習(xí)目標(biāo)，為后繼課程的學(xué)習(xí)打下了堅(jiān)實(shí)的基礎(chǔ)。

當(dāng)然，衡量教學(xué)效果最重要的是學(xué)生的就業(yè)質(zhì)量和可持續(xù)發(fā)展能力。目前，2006級(jí)小班化試點(diǎn)的學(xué)生已經(jīng)走上工作崗位，截至到2009年6月底，兩個(gè)班級(jí)就業(yè)率達(dá)到95%以上，對口就業(yè)率達(dá)到70%以上。其中上海壹擇軟件公司分3批招收了4名學(xué)生，南京樂天堂科技有限公司分2批招收了5名學(xué)生，蘇州電信軟件開發(fā)中心也分2批招收了4名學(xué)生，蘇州宏拓科技有限公司也分2批招收了5名同學(xué)，學(xué)生質(zhì)量得到了用人單位的肯定。

在實(shí)踐過程中，發(fā)現(xiàn)存在如下問題與不足:由于整個(gè)教學(xué)情境在邏輯上前后聯(lián)系，對于動(dòng)手慢的同學(xué)前一個(gè)任務(wù)沒有完成，就失去了實(shí)現(xiàn)當(dāng)前任務(wù)的基礎(chǔ)。針對這一問題，在下一步工作中，需加強(qiáng)過程管理和課余輔導(dǎo)，鼓勵(lì)同學(xué)間相互幫助與溝通，先進(jìn)帶動(dòng)后進(jìn);另外，需強(qiáng)化基礎(chǔ)圖象處理訓(xùn)練與審美訓(xùn)練，培養(yǎng)良好的界面設(shè)計(jì)能力，提高網(wǎng)站設(shè)計(jì)能力。

作為江蘇省首批示范性高等職業(yè)建設(shè)院校之一，我院積極學(xué)習(xí)國內(nèi)外先進(jìn)的教學(xué)模式和教育思想，根據(jù)專業(yè)和課程的具體情況，努力探索適合自己的教學(xué)改革之路。以工作過程為導(dǎo)向，將真實(shí)項(xiàng)目資源轉(zhuǎn)化為教學(xué)資源，調(diào)動(dòng)學(xué)生的主觀能動(dòng)性，在教師引導(dǎo)下來實(shí)施教學(xué)進(jìn)程，是培養(yǎng)學(xué)生理論知識(shí)、實(shí)踐技能和學(xué)習(xí)能力的重要手段，是能力本位教學(xué)模式的體現(xiàn)。而這種教育模式也對教師的教學(xué)水平、責(zé)任意識(shí)、實(shí)踐經(jīng)驗(yàn)等提出了更高的要求。開發(fā)多種類型的課程模式，不斷深化高職教學(xué)改革，提高教學(xué)質(zhì)量和就業(yè)質(zhì)量，是一線教師義不容辭和長期艱巨的任務(wù)。

參考文獻(xiàn):

[1] 馬英. 工作過程導(dǎo)向的高職機(jī)械制圖教學(xué)探索[J]. 工程圖學(xué)學(xué)報(bào)，2008，29(4):137-141.

[2] 姜大源. “行為”、“活動(dòng)”、與“行動(dòng)”辯——“行動(dòng)導(dǎo)向”教學(xué)管見[J]. 職教通訊，2003(1):42-43.

[3] 趙志群. 職業(yè)教育與培訓(xùn)新概念[M]. 北京:科學(xué)出版社，2003:97.

Teaching Research and Practice on Webpage Design and Making Course Based on Working Process

LIU Wan-hui， SONG Gui-ling

(Huaian College of Information Technology， Huaian 223003， China)

Abstract: The point of departure of the teaching reform of the item course Webpage Design and Making is to raise students actual making skills of website. The course takes the typical website item as the core， resolves the item into some tasks according to the work process of the actual development， and carries on the development and training of the related knowledge and skills according to the demand that tasks carry out.

Key words:working process; teaching reform; webpage making; teaching plan

(編輯:彭遠(yuǎn)紅)