【摘 要】網(wǎng)頁(yè)設(shè)計(jì)是高職院校軟件技術(shù)及相關(guān)專業(yè)的一門重要的專業(yè)課程，該課程側(cè)重培養(yǎng)學(xué)生的前端網(wǎng)頁(yè)布局、設(shè)計(jì)和美工的能力和素養(yǎng)。本文從課程的總體定位、教學(xué)內(nèi)容的選取與組織、教學(xué)過(guò)程設(shè)計(jì)、考核過(guò)程設(shè)計(jì)四大方面闡述了對(duì)該課程教學(xué)改革的一些探索和實(shí)踐的基本思路。

【關(guān)鍵詞】網(wǎng)頁(yè)設(shè)計(jì)；教學(xué)改革；教學(xué)過(guò)程設(shè)計(jì)

一、課程教學(xué)的總體定位

《網(wǎng)頁(yè)設(shè)計(jì)》是軟件技術(shù)專業(yè)一門重要的專業(yè)課，但長(zhǎng)期以來(lái)我們的授課方式是以零散的知識(shí)點(diǎn)加小規(guī)模的實(shí)訓(xùn)，而實(shí)訓(xùn)都是以驗(yàn)證性實(shí)驗(yàn)為主，這與企業(yè)的用人需求及工學(xué)結(jié)合的職業(yè)教育模式脫節(jié)，學(xué)生雖然上課時(shí)能夠掌握基礎(chǔ)知識(shí)，并有著極大的學(xué)習(xí)興趣，但由于內(nèi)容過(guò)于分散，學(xué)生很難綜合運(yùn)用并做出一個(gè)實(shí)物。這樣將導(dǎo)致學(xué)生學(xué)習(xí)的成就感缺失，久而久之，就會(huì)對(duì)課程失去興趣。

針對(duì)職業(yè)教育的特點(diǎn)，在我們對(duì)眾多大中型網(wǎng)站開發(fā)企業(yè)進(jìn)行調(diào)研分析、對(duì)專業(yè)畢業(yè)生的崗位進(jìn)行調(diào)查回訪的基礎(chǔ)上，我們對(duì)網(wǎng)站的開發(fā)流程有了清晰的認(rèn)識(shí)和了解。一般大中型網(wǎng)站企業(yè)開發(fā)分前臺(tái)美工人員和后臺(tái)程序人員。前臺(tái)美工人員的任務(wù)是使用photoshop等軟件制作網(wǎng)站效果圖，在用戶確認(rèn)通過(guò)后，根據(jù)效果圖進(jìn)行切片來(lái)生成網(wǎng)頁(yè)中的圖片，然后利用表格或使用DIV+CSS來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行布局，從而完成前臺(tái)靜態(tài)網(wǎng)頁(yè)的制作；而后臺(tái)程序人員則使用各種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)如ASP、JSP、PHP等完成程序的編寫，利用數(shù)據(jù)庫(kù)管理軟件對(duì)數(shù)據(jù)庫(kù)進(jìn)行部署，存儲(chǔ)網(wǎng)站中需要的數(shù)據(jù)。

前臺(tái)美工人員完成的工作正好是我們這門課程所要完成的目標(biāo)?；诖?，我們把課程定位在適應(yīng)企業(yè)用人需求，提高學(xué)生使用photoshop等軟件進(jìn)行網(wǎng)站效果圖制作、使用表格或使用DIV+CSS來(lái)對(duì)網(wǎng)頁(yè)進(jìn)行布局上。

網(wǎng)頁(yè)設(shè)計(jì)面向的工作崗位主要有：前臺(tái)美工、DIV+CSS網(wǎng)頁(yè)布局、使用簡(jiǎn)單JS腳本進(jìn)行客戶端編程等。職業(yè)學(xué)院所培養(yǎng)的網(wǎng)頁(yè)設(shè)計(jì)開發(fā)人才主要從事靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)，基于此思路，

我們依據(jù)崗位需求，應(yīng)以培養(yǎng)網(wǎng)頁(yè)美工、前端代碼設(shè)計(jì)和布局為基本目標(biāo)，通過(guò)完成學(xué)習(xí)性工作項(xiàng)目，培養(yǎng)學(xué)生能夠依據(jù)用戶需求，進(jìn)行網(wǎng)站架構(gòu)設(shè)計(jì)、網(wǎng)頁(yè)布局和美化設(shè)計(jì)、打包發(fā)布的能力，并通過(guò)拓展項(xiàng)目訓(xùn)練，逐步培養(yǎng)學(xué)生具備網(wǎng)站系統(tǒng)分析和網(wǎng)頁(yè)美感、色彩搭配、網(wǎng)頁(yè)布局和設(shè)計(jì)的能力。

二、課程教學(xué)內(nèi)容的選取與組織

在進(jìn)行該課程的設(shè)計(jì)時(shí)遵循以下三個(gè)理念和原則：

（1）以崗位需求為目標(biāo)、以職業(yè)能力培養(yǎng)為主線、以工作過(guò)程為導(dǎo)向建立教學(xué)體系。

（2）根據(jù)一個(gè)完整網(wǎng)站統(tǒng)領(lǐng)全課程，用任務(wù)驅(qū)動(dòng)構(gòu)建網(wǎng)頁(yè)設(shè)計(jì)課程知識(shí)體系。選取企業(yè)網(wǎng)站作為課程載體，將所有知識(shí)點(diǎn)、技能融于六大情境模塊中。

（3）與企業(yè)合作，完全模擬靜態(tài)網(wǎng)頁(yè)真實(shí)開發(fā)過(guò)程進(jìn)行教學(xué)，以技能訓(xùn)練為重點(diǎn)培養(yǎng)學(xué)生解決實(shí)際問題的能力、創(chuàng)新能力、“零距離”就業(yè)能力。實(shí)現(xiàn)三方面培養(yǎng)目標(biāo)。

通過(guò)以下手段重構(gòu)教學(xué)內(nèi)容：

（1）走訪、調(diào)研多家網(wǎng)站開發(fā)企業(yè)、查詢行業(yè)標(biāo)準(zhǔn)，了解熟悉網(wǎng)站開發(fā)的流程。

（2）根據(jù)我所帶班級(jí)學(xué)生特點(diǎn)及目前就業(yè)崗位技術(shù)需求確定教學(xué)內(nèi)容。

（3）以企業(yè)網(wǎng)站設(shè)計(jì)案例為載體重構(gòu)該學(xué)科知識(shí)體系。

（4）參考網(wǎng)頁(yè)設(shè)計(jì)師認(rèn)證考試大綱拓寬知識(shí)面。

具體教學(xué)內(nèi)容分為6個(gè)模塊，列舉如下：

（1）模塊1：著名網(wǎng)頁(yè)效果賞析、網(wǎng)頁(yè)布局結(jié)構(gòu)。該模塊的任務(wù)是對(duì)經(jīng)典的網(wǎng)頁(yè)進(jìn)行效果賞析，并對(duì)網(wǎng)頁(yè)布局結(jié)構(gòu)進(jìn)行學(xué)習(xí)和借鑒。涵蓋主要知識(shí)點(diǎn)：美感培養(yǎng)、色彩搭配、字體應(yīng)用；網(wǎng)頁(yè)LOGO、頭部、菜單欄、版權(quán)欄、各欄目結(jié)構(gòu)。該模塊學(xué)時(shí)分配為9學(xué)時(shí)。

（2）模塊2：HTML基礎(chǔ)知識(shí)。該模塊的任務(wù)是學(xué)習(xí)HTML基本標(biāo)記和HTML基本語(yǔ)法，并對(duì)頁(yè)面美工進(jìn)行學(xué)習(xí)。涵蓋主要知識(shí)點(diǎn)：各標(biāo)記的語(yǔ)法應(yīng)用、屬性設(shè)置；CSS樣式表。學(xué)時(shí)分配為4學(xué)時(shí)。

（3）模塊3：網(wǎng)站效果圖制作。該模塊的任務(wù)是學(xué)習(xí)photoshop軟件的使用、flash軟件的使用、Fireworks、Dreamweaver以及切片操作。涵蓋主要知識(shí)點(diǎn)：選區(qū)、圖像編輯、圖層、通道、蒙版、路徑、濾鏡等；圖形繪制工具、圖形編輯、位圖和視頻、對(duì)象編輯、元件和實(shí)例、動(dòng)畫制作；動(dòng)態(tài)濾鏡、圖層、通道、蒙版；文本與圖像處理、層、框架網(wǎng)頁(yè)等。學(xué)時(shí)分配為30學(xué)時(shí)。

（4）模塊4：HTML表格布局。該模塊的任務(wù)是學(xué)習(xí)表格嵌套和表格屬性設(shè)置。涵蓋主要知識(shí)點(diǎn)：表格布局。學(xué)時(shí)分配為6學(xué)時(shí)。

（5）模塊5：DIV+CSS。該模塊的任務(wù)是學(xué)習(xí)CSS語(yǔ)法格式、各個(gè)CSS屬性用法；并將切片后的頁(yè)面進(jìn)行DIV+CSS布局。涵蓋主要知識(shí)點(diǎn)：表格布局。學(xué)時(shí)分配為9學(xué)時(shí)。

（6）模塊6：站點(diǎn)測(cè)試與發(fā)布。該模塊的任務(wù)是學(xué)習(xí)如何使用Dreamweaver上傳網(wǎng)站，完成發(fā)布。學(xué)時(shí)分配為3學(xué)時(shí)。

三、課程教學(xué)過(guò)程設(shè)計(jì)

我們以主頁(yè)設(shè)計(jì)模塊的任務(wù)5- 2 DIV+CSS布局為例進(jìn)行說(shuō)明。

該任務(wù)為6學(xué)時(shí)，具體任務(wù)包含3個(gè)子任務(wù)： DIV的布局；CSS設(shè)置屬性；浮動(dòng)、絕對(duì)定位。該任務(wù)主要使用DIV布局頁(yè)面，用CSS設(shè)置DIV塊的屬性，將主頁(yè)面分為幾個(gè)部分，對(duì)應(yīng)于相應(yīng)的DIV，并使用浮動(dòng)、定位屬性定位DIV塊。

任務(wù)目標(biāo)包括知識(shí)目標(biāo)和能力目標(biāo)，列舉如下：

知識(shí)目標(biāo)：1、掌握DIV的布局 的方法。2、掌握使用CSS設(shè)置屬性的方法。3、掌握浮動(dòng)、絕對(duì)定位的方法。能力目標(biāo)：1、培養(yǎng)學(xué)生使用DIV的布局 的能力；2、培養(yǎng)學(xué)生使用使用CSS設(shè)置屬性的能力。學(xué)時(shí)分配：二次課（6學(xué)時(shí)）

教學(xué)過(guò)程設(shè)計(jì)如下：

主要教學(xué)方法：多種教學(xué)方法穿插并用，整個(gè)課堂按照”做—學(xué)—教—拓—思”的步驟進(jìn)行。綜合運(yùn)用項(xiàng)目教學(xué)法（引入企業(yè)網(wǎng)站案例）、教—學(xué)—做合一的教學(xué)方法。

主要教學(xué)手段：多媒體課件演示；企業(yè)項(xiàng)目開發(fā)場(chǎng)景的模擬；分組討論，團(tuán)隊(duì)開發(fā)；

視頻錄象的使用。

教學(xué)步驟：（1）做：教師講解、演示：布置任務(wù)，演示DIV+CSS布局的基本操作；并演示任務(wù)的最終完成結(jié)果。學(xué)生：分組，按照實(shí)訓(xùn)指導(dǎo)書的步驟完成任務(wù)，每組學(xué)生要有組長(zhǎng)（負(fù)責(zé)協(xié)調(diào)，帶領(lǐng)全組討論并完成任務(wù)）1、創(chuàng)建DIV塊；2、使用DIV塊嵌套；3、使用CSS設(shè)置屬性；4、浮動(dòng)DIV或絕對(duì)定位。

（2）學(xué)：學(xué)生復(fù)習(xí)并回答以下問題：1、什么是浮動(dòng)？2、什么是絕對(duì)定位，什么是相對(duì)定位？3、怎樣用CSS設(shè)置屬性，有幾種方法？學(xué)生可以查閱書本，或上網(wǎng)查找答案。

（3）教：1、2個(gè)DIV塊并列。2、主要步驟：插入DIV塊，設(shè)置邊框?qū)傩浴⒏叨?、寬度，?nèi)部包含的小DIV塊，然后對(duì)DIV塊絕對(duì)或相對(duì)定位。

（4）拓：1、使用表格布局是否也能達(dá)到同樣的效果？2、嘗試寫CSS樣式表

（5）思：課后練習(xí)：如何進(jìn)行定位？

教學(xué)資源與教學(xué)評(píng)價(jià)如下：

（1）教學(xué)資源包括：網(wǎng)絡(luò)資源（Csdn論壇；微軟官方網(wǎng)站；其他主要技術(shù)論壇）；圖書資源（教材；推薦參考書）；其他資源（教師提供的一些源碼）

（2）教學(xué)評(píng)價(jià)包括：教師評(píng)價(jià)學(xué)生任務(wù)完成情況（程序界面美觀程度；CSS代碼質(zhì)量；可讀性、可維護(hù)性；資料查找能力；調(diào)試能力）；學(xué)生論述、答辯（對(duì)任務(wù)重、難點(diǎn)的認(rèn)識(shí)情況；對(duì)教師問題的回答情況）

四、課程考核過(guò)程設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)課程的考核標(biāo)準(zhǔn)由職業(yè)素質(zhì)、基礎(chǔ)知識(shí)和技能三部分內(nèi)容組成，各部分的考核內(nèi)容如下：

（1）職業(yè)素質(zhì)部分：職業(yè)道德、工作態(tài)度、工作作風(fēng)、團(tuán)隊(duì)精神及競(jìng)爭(zhēng)意識(shí)。

（2）基礎(chǔ)知識(shí)部分：網(wǎng)頁(yè)設(shè)計(jì)規(guī)范、HTML標(biāo)記語(yǔ)言、網(wǎng)絡(luò)圖像處理、動(dòng)畫制作、小型網(wǎng)站建設(shè)及維護(hù)的知識(shí)。

（3）技能部分：網(wǎng)站策劃、網(wǎng)絡(luò)圖像編輯與處理、動(dòng)畫制作、網(wǎng)頁(yè)設(shè)計(jì)與制作、開發(fā)和維護(hù)小型網(wǎng)站的能力。

對(duì)基礎(chǔ)知識(shí)的考核以教學(xué)基本目標(biāo)為基準(zhǔn)；對(duì)能力與技能部分的考核以模擬公司招聘員工和網(wǎng)頁(yè)設(shè)計(jì)工作者的考核標(biāo)準(zhǔn)為本課程的標(biāo)準(zhǔn)。

考核的原則：以考核基礎(chǔ)知識(shí)和職業(yè)技能為重點(diǎn)。對(duì)基礎(chǔ)部分和職業(yè)素質(zhì)在平時(shí)考核中完成，技能部分在期末上機(jī)考試中進(jìn)行考核。在技能部分的考核中，要求在規(guī)定時(shí)間內(nèi)（通常為2小時(shí)）利用給定素材，包括考題所需的圖片、背景和其他輔助圖片、相關(guān)考題內(nèi)容的文字資料、考題要求等，學(xué)生利用授課所學(xué)軟件完成規(guī)定技術(shù)要求的網(wǎng)站創(chuàng)意設(shè)計(jì)與制作。以這種模擬公司招聘員工和網(wǎng)頁(yè)設(shè)計(jì)工作者工作過(guò)程的考核方式，檢測(cè)學(xué)生創(chuàng)意、設(shè)計(jì)、理解題材、圖像加工處理、動(dòng)畫制作、色彩運(yùn)用、布局、站點(diǎn)管理等綜合能力。

這里，我們從課程的總體定位、教學(xué)內(nèi)容的選取與組織、教學(xué)過(guò)程設(shè)計(jì)、考核過(guò)程設(shè)計(jì)四大方面闡述了對(duì)該課程教學(xué)改革的一些探索和實(shí)踐的基本思路，目前，該課程教學(xué)改革正在進(jìn)行中，學(xué)生反饋的結(jié)果良好，學(xué)習(xí)興趣得到了極大的提高。

參考文獻(xiàn)：

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

[2] 張潤(rùn)蓮，張向利，葉進(jìn) . 案例教學(xué)法及其運(yùn)用 [ J] .桂林電子工業(yè)學(xué)院學(xué)報(bào)，2004，24 （4）：102- 105.

[3] 頓祖義 . 項(xiàng)目化課程改革：高職院校教學(xué)工作的重要抓手 [J] .湖北民族學(xué)院學(xué)報(bào)：哲學(xué)社會(huì)科學(xué)版，2008，26（6）：61- 63.

[4] 張建國(guó) . 我國(guó)職教課程開發(fā)模式的演變及啟示 [ J] .職教論壇，2007， （4）：4- 10.

[5] 歐陽(yáng)煒昊，吳振峰，羅卓君 . 基于工作過(guò)程導(dǎo)向的“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程教學(xué)改革研究 [J] .計(jì)算機(jī)教育，2010， （4）：50- 52 .

附：作者簡(jiǎn)介：程冠琦（1978-），湖北襄樊人，碩士研究生，無(wú)錫商業(yè)職業(yè)技術(shù)學(xué)院物聯(lián)網(wǎng)技術(shù)學(xué)院講師，研究方向：軟件技術(shù)。