榮姍珊 周　琢

（安徽師范大學(xué)皖江學(xué)院　安徽·蕪湖　241008）

?

基于需求分析的《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程內(nèi)容模塊化設(shè)計(jì)
——以安徽師范大學(xué)皖江學(xué)院數(shù)字媒體技術(shù)專(zhuān)業(yè)為例

榮姍珊 周琢

（安徽師范大學(xué)皖江學(xué)院安徽·蕪湖241008）

摘要：web新技術(shù)的不斷注入，傳統(tǒng)互聯(lián)網(wǎng)的迅速發(fā)展、移動(dòng)互聯(lián)網(wǎng)的蓄勢(shì)待發(fā)都對(duì)該課程的內(nèi)容結(jié)構(gòu)提出了新的要求。通過(guò)對(duì)安徽師范大學(xué)皖江學(xué)院數(shù)字媒體技術(shù)專(zhuān)業(yè)的在校生進(jìn)行調(diào)研及需求分析，并反思了原有《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程內(nèi)容設(shè)置中存在的問(wèn)題，提出了建立課程內(nèi)容模塊化的方案設(shè)計(jì)。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)與制作；需求分析；課程內(nèi)容模塊化

周琢，安徽師范大學(xué)皖江學(xué)院，碩士研究生，講師。

一、引言

一份最新的研究報(bào)告顯示，截至2014年6月，我國(guó)網(wǎng)民規(guī)模達(dá)6.32億，半年共計(jì)新增網(wǎng)民1442萬(wàn)人，各類(lèi)網(wǎng)站273萬(wàn)個(gè)。互聯(lián)網(wǎng)行業(yè)需要大量從事網(wǎng)站設(shè)計(jì)、開(kāi)發(fā)與運(yùn)維的web前端開(kāi)發(fā)人才。目前，網(wǎng)頁(yè)設(shè)計(jì)與制作課程是很多高等院校計(jì)算機(jī)專(zhuān)業(yè)的專(zhuān)業(yè)基礎(chǔ)課、數(shù)字媒體技術(shù)專(zhuān)業(yè)、電子商務(wù)專(zhuān)業(yè)、教育技術(shù)學(xué)專(zhuān)業(yè)、新聞傳播類(lèi)專(zhuān)業(yè)的專(zhuān)業(yè)課以及一些培訓(xùn)機(jī)構(gòu)和高職院校的主干課程之一。這一切都說(shuō)明了該課程的重要性。web新技術(shù)的不斷注入，傳統(tǒng)互聯(lián)網(wǎng)的迅速發(fā)展、移動(dòng)互聯(lián)網(wǎng)的蓄勢(shì)待發(fā)都對(duì)該課程的內(nèi)容結(jié)構(gòu)提出了新的要求。為了滿足學(xué)生的學(xué)習(xí)需求和市場(chǎng)的人才需求，對(duì)該課程的傳統(tǒng)內(nèi)容進(jìn)行增刪重構(gòu)已刻不容緩。

二、需求分析內(nèi)涵

需求分析（needs analysis）是指在課程設(shè)計(jì)和實(shí)施的過(guò)程中，設(shè)計(jì)人員和教師通過(guò)內(nèi)省、訪談、觀察和問(wèn)卷等對(duì)學(xué)生的主觀與客觀需求進(jìn)行調(diào)查分析，從而確定學(xué)生學(xué)什么和如何學(xué)。Hutchinson和Waters（2002）將需求分為兩大類(lèi)別：目標(biāo)需求（target needs）和學(xué)習(xí)需求（learning needs）。目標(biāo)需求指的是學(xué)習(xí)者在將來(lái)目標(biāo)場(chǎng)景里所需要做的事情。學(xué)習(xí)需求指的是為了達(dá)到目標(biāo)場(chǎng)景的需求，學(xué)習(xí)者所需要具備的知識(shí)和能力。由此可見(jiàn)，需求分析的關(guān)鍵是找出學(xué)生現(xiàn)有的網(wǎng)頁(yè)設(shè)計(jì)能力與預(yù)期應(yīng)達(dá)到的能力之間的差距，從而指導(dǎo)教師科學(xué)合理地構(gòu)建課程內(nèi)容。

三、需求調(diào)查分析

課題組通過(guò)對(duì)前程無(wú)憂和智聯(lián)招聘兩個(gè)大型招聘網(wǎng)站中對(duì)網(wǎng)頁(yè)設(shè)計(jì)師的崗位要求，整理分析出目標(biāo)需求，再對(duì)我校數(shù)字媒體技術(shù)專(zhuān)業(yè)的學(xué)生就《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程的學(xué)習(xí)效果和需求展開(kāi)網(wǎng)絡(luò)問(wèn)卷調(diào)查，分析學(xué)生的學(xué)習(xí)需求。

（一）市場(chǎng)的人才需求

課題組分別以“web前端開(kāi)發(fā)”、“網(wǎng)頁(yè)設(shè)計(jì)師”、“網(wǎng)頁(yè)制作”為職位關(guān)鍵字，篩選出對(duì)無(wú)經(jīng)驗(yàn)“應(yīng)屆畢業(yè)生”的崗位要求，分析后發(fā)現(xiàn)，這些職位需求普遍涵蓋以下技術(shù)：①運(yùn)用Photoshop設(shè)計(jì)網(wǎng)頁(yè)；②利用HTML+CSS布局頁(yè)面；③掌握J(rèn)avascript技術(shù)；④HTML5+CSS3技術(shù)。不同的關(guān)鍵字對(duì)崗位要求的側(cè)重又有所不同，比如“web前端開(kāi)發(fā)“對(duì)②③的要求都是”精通“的級(jí)別，不僅要掌握J(rèn)avascript技術(shù)，而且必須至少會(huì)熟練使用一種框架。”網(wǎng)頁(yè)設(shè)計(jì)師“則側(cè)重對(duì)①的要求。隨著移動(dòng)互聯(lián)網(wǎng)的不斷滲透，對(duì)④的要求也被提上日程。因此，本課程的內(nèi)容應(yīng)該針對(duì)以上4種技術(shù)進(jìn)行設(shè)置，不同的專(zhuān)業(yè)，課程核心內(nèi)容的設(shè)置應(yīng)該略有不同。

（二）學(xué)生的學(xué)習(xí)需求

課題組就我校數(shù)字媒體技術(shù)專(zhuān)業(yè)的學(xué)生對(duì)《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程的教學(xué)效果和學(xué)習(xí)需求開(kāi)展了調(diào)查。本次調(diào)查受訪人數(shù)為86人，回收有效問(wèn)卷86份。調(diào)查結(jié)果統(tǒng)計(jì)如下表1：

表1　調(diào)查結(jié)果統(tǒng)計(jì)表

課題組進(jìn)一步對(duì)Q3和Q4兩個(gè)問(wèn)題進(jìn)行了交叉分析（見(jiàn)表2），結(jié)果顯示對(duì)Photoshop感興趣的學(xué)生完成本課程希望能夠精通Photoshop設(shè)計(jì)網(wǎng)頁(yè)這項(xiàng)技能的高達(dá)61.9％，對(duì)HTML+ CSS感興趣的學(xué)生完成本課程希望能夠精通頁(yè)面布局技術(shù)的高達(dá)70.21％，而對(duì)Javascript感興趣的學(xué)生完成本課程希望能夠精通Javascript腳本的卻只有56％，希望能夠精通頁(yè)面布局技術(shù)的卻高達(dá)72％，對(duì)HTML5+CSS3感興趣的學(xué)生完成本課程希望能夠精通HTML5+CSS3的只有54.17％，希望能夠精通頁(yè)面布局技術(shù)的卻高達(dá)62.5％。通過(guò)對(duì)學(xué)生的訪談了解到，感興趣卻不給自己定高目標(biāo)的原因是：怕自己底子薄，學(xué)不好。

表2 Q3與Q4的交叉表

綜上需求分析的調(diào)查結(jié)果說(shuō)明以下幾點(diǎn)：

1.課程內(nèi)容的設(shè)置應(yīng)以崗位需求為導(dǎo)向，涵蓋Photoshop、頁(yè)面布局、Javascript和HTML5+CSS3技術(shù)。

2.結(jié)合專(zhuān)業(yè)特點(diǎn)和學(xué)生的學(xué)習(xí)需求將Photoshop和頁(yè)面布局技術(shù)作為核心模塊，Javascript技術(shù)和HTML5+CSS3則注重基礎(chǔ)，消除學(xué)生的學(xué)習(xí)顧慮，真正實(shí)現(xiàn)藝術(shù)與技術(shù)這兩個(gè)要素的結(jié)合。

四、原有課程內(nèi)容存在的問(wèn)題

（一）結(jié)構(gòu)不合理、內(nèi)容陳舊。

原來(lái)的課程內(nèi)容僅包含Photoshop和HTML+CSS這兩塊教學(xué)內(nèi)容，忽略了Javascript技術(shù)。沒(méi)有及時(shí)在陳舊的、目前使用較少的內(nèi)容上縮減課時(shí)，突出重點(diǎn)，提高授課效率，比如表格布局、框架等。只有將陳舊的知識(shí)縮減剔除，才能將Javascript技術(shù)、移動(dòng)互聯(lián)網(wǎng)時(shí)代的技術(shù)熱點(diǎn)HTML5+CSS3引入進(jìn)課程，以確保課程內(nèi)容與市場(chǎng)需求、學(xué)生需求保持匹配。

（二）偏代碼輕設(shè)計(jì)

課題組在與學(xué)生的訪談中發(fā)現(xiàn)，我校數(shù)字媒體技術(shù)專(zhuān)業(yè)的學(xué)生有扎實(shí)的Photoshop軟件使用基礎(chǔ)，因此他們?cè)谥暗恼{(diào)查中希望能夠精通Photoshop設(shè)計(jì)網(wǎng)頁(yè)這項(xiàng)技能的高達(dá)61.9％。相反，教師正因?yàn)榭紤]到他們有很好的Photoshop使用基礎(chǔ)，原來(lái)課程內(nèi)容設(shè)置中雖然包含Photoshop，但并未把如何設(shè)計(jì)網(wǎng)頁(yè)當(dāng)成核心來(lái)處理，沒(méi)有把他們的優(yōu)勢(shì)當(dāng)成著力點(diǎn)加以訓(xùn)練。鑒于目前響應(yīng)式網(wǎng)頁(yè)技術(shù)和HTML5+CSS3等新技術(shù)的引入，可以將Photoshop、網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)打包成一個(gè)模塊作為重點(diǎn)知識(shí)。

五、課程內(nèi)容模塊化方案設(shè)計(jì)

通過(guò)對(duì)安徽師范大學(xué)皖江學(xué)院數(shù)字媒體技術(shù)專(zhuān)業(yè)的在校生進(jìn)行調(diào)研及需求分析，并反思了原有《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程內(nèi)容設(shè)置中存在的問(wèn)題，提出了建立課程內(nèi)容模塊化的方案設(shè)計(jì)。如圖1所示，該課程主要包括以下四個(gè)模塊，即網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)模塊、網(wǎng)頁(yè)布局技術(shù)模塊、Javascript模塊和響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)模塊，下面詳細(xì)介紹各模塊。

網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)模塊包含網(wǎng)頁(yè)版式設(shè)計(jì)、色彩搭配、文字設(shè)計(jì)、Banner設(shè)計(jì)、頁(yè)面設(shè)計(jì)和切圖技術(shù)這幾部分內(nèi)容，詳見(jiàn)圖2。其中網(wǎng)頁(yè)版式設(shè)計(jì)、色彩搭配、頁(yè)面設(shè)計(jì)和切圖技術(shù)為必講內(nèi)容，目的是讓學(xué)生了解網(wǎng)頁(yè)美工設(shè)計(jì)的一般流程，引導(dǎo)學(xué)生如何高效制作專(zhuān)業(yè)美觀的網(wǎng)站界面。

圖1　

圖2　網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)模塊

圖3　網(wǎng)頁(yè)布局技術(shù)模塊

網(wǎng)頁(yè)布局技術(shù)模塊包含HTML和CSS兩部分內(nèi)容，基于Dreamweaver軟件展開(kāi)，詳見(jiàn)圖3。此塊內(nèi)容是本課程的基礎(chǔ)，也是核心。通過(guò)實(shí)例講解了CSS各個(gè)屬性的使用方法和怎樣使用CSS進(jìn)行頁(yè)面布局，從語(yǔ)法到應(yīng)用逐步遞進(jìn)，強(qiáng)化學(xué)生利用布局技術(shù)解決實(shí)際問(wèn)題的能力。利用表格布局網(wǎng)頁(yè)和利用框架制作網(wǎng)頁(yè)為選講內(nèi)容，因?yàn)樵谀壳熬W(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域，CSS作為替代表格布局的方法已經(jīng)廣泛使用。

Javascript技術(shù)模塊包含Javascript語(yǔ)法、AJAX基礎(chǔ)和Jquery應(yīng)用三部分內(nèi)容，詳見(jiàn)圖4。其中Javascript語(yǔ)法為必講內(nèi)容，AJAX基礎(chǔ)和Jquery應(yīng)用為選講內(nèi)容。從初學(xué)者角度出發(fā)，通過(guò)豐富多彩的實(shí)例，詳細(xì)介紹使用JavaScript語(yǔ)言進(jìn)行程序開(kāi)發(fā)應(yīng)該掌握的各方面技術(shù)。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)模塊包含HTML5和CSS3兩個(gè)部分的內(nèi)容，詳見(jiàn)圖5。此模塊作為網(wǎng)頁(yè)布局技術(shù)模塊的一個(gè)延伸，可根據(jù)實(shí)際課時(shí)決定教學(xué)內(nèi)容。

六、結(jié)語(yǔ)

傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)與制作課程必須與時(shí)俱進(jìn)。筆者從事本門(mén)課程教學(xué)的八年時(shí)間里，已有意識(shí)地進(jìn)行過(guò)一些教學(xué)內(nèi)容的改革和教學(xué)方法的創(chuàng)新，但一直沒(méi)有形成規(guī)范的課程模塊方案，希望本文提到的課程內(nèi)容模塊化設(shè)計(jì)可以給從事該課程教學(xué)的教師提供參考。

參考文獻(xiàn)：

［1］符雪青.基于“需求分析”的大學(xué)英語(yǔ)后續(xù)選修課程的調(diào)查研究與思考［J］.外語(yǔ)電化教學(xué)，2014（3）

［2］張偉娜.《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教學(xué)的探討與實(shí)踐［J］.中國(guó)教育信息化，2008（3）

［3］呂英莉，范玲.基于需求分析的商務(wù)英語(yǔ)模塊化課程體系研究［J］.北京城市學(xué)院學(xué)報(bào)，2012（6）

中圖分類(lèi)號(hào)：G642

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-8534（2016）03-155-02

基金項(xiàng)目：本文系安徽省質(zhì)量工程項(xiàng)目（項(xiàng)目批號(hào)：2014gxk145）：《網(wǎng)頁(yè)設(shè)計(jì)與制作》精品資源共享課程的成果之一。

作者簡(jiǎn)介：榮姍珊，安徽師范大學(xué)皖江學(xué)院，碩士研究生，講師；