網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作課程的教學(xué)改革研究與實(shí)踐

張 琰

東南大學(xué)成賢學(xué)院 江蘇南京 210088

網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作課程的教學(xué)改革研究與實(shí)踐

張 琰

東南大學(xué)成賢學(xué)院 江蘇南京 210088

網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作是電子商務(wù)專(zhuān)業(yè)必修的一門(mén)基礎(chǔ)課程。該課程仍舊停留在動(dòng)態(tài)ASP網(wǎng)站的理論與實(shí)踐教學(xué)階段，與當(dāng)今最新的網(wǎng)站開(kāi)發(fā)技術(shù)嚴(yán)重脫節(jié)。針對(duì)以上問(wèn)題提出了利用Dreamweaver，Photoshop，F(xiàn)lash及PHP開(kāi)發(fā)網(wǎng)站的教學(xué)內(nèi)容改革研究與實(shí)踐方案。

網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作；Photoshop；Flash；PHP；教學(xué)改革

如今，電子商務(wù)的應(yīng)用已遍及人們生活的方方面面，網(wǎng)上購(gòu)物、手機(jī)上網(wǎng)、網(wǎng)絡(luò)通訊、搜索引擎基本成為人們生活的一部分。世界各國(guó)也都非常重視電子商務(wù)技術(shù)、電子商務(wù)模式的發(fā)展。為了順應(yīng)電子商務(wù)發(fā)展的趨勢(shì)，保證對(duì)每年不斷增加的電子商務(wù)人才需求的供給，我國(guó)各類(lèi)高等院校競(jìng)相開(kāi)設(shè)電子商務(wù)專(zhuān)業(yè)。其中網(wǎng)站設(shè)計(jì)網(wǎng)頁(yè)制作課程是該專(zhuān)業(yè)的重點(diǎn)專(zhuān)業(yè)基礎(chǔ)課。

筆者在分析學(xué)術(shù)教研文獻(xiàn)的基礎(chǔ)上[1-3]，結(jié)合自身的教學(xué)經(jīng)驗(yàn)，發(fā)現(xiàn)目前網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作課程仍舊以Dreamweaver+IIS+Access為技術(shù)平臺(tái)構(gòu)建ASP動(dòng)態(tài)網(wǎng)頁(yè)。學(xué)生通過(guò)學(xué)習(xí)雖然能夠掌握基本的網(wǎng)站設(shè)計(jì)，但與當(dāng)今網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐相去甚遠(yuǎn)，使得電子商務(wù)學(xué)生畢業(yè)后不能很快適應(yīng)網(wǎng)站設(shè)計(jì)工作。因此，筆者結(jié)合最新的網(wǎng)站網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，即對(duì)前臺(tái)網(wǎng)頁(yè)制作采用Dreamweaver+Flash+Photoshop，對(duì)后臺(tái)網(wǎng)站開(kāi)發(fā)采用PHP+SQL數(shù)據(jù)庫(kù)的技術(shù)平臺(tái)，對(duì)原有的教學(xué)內(nèi)容進(jìn)行改革。在教學(xué)方法上采用項(xiàng)目教學(xué)法，培養(yǎng)學(xué)生的實(shí)際動(dòng)手能力。

1 教學(xué)內(nèi)容改革

網(wǎng)站設(shè)計(jì)網(wǎng)頁(yè)制作課程不僅要求學(xué)生掌握網(wǎng)站框架搭建的方法，而且對(duì)網(wǎng)頁(yè)界面的藝術(shù)性設(shè)計(jì)也提出了要求。網(wǎng)頁(yè)界面藝術(shù)性設(shè)計(jì)的要素包括色彩、布局、構(gòu)圖等，這些要素設(shè)計(jì)是否合理在很大程度上決定了網(wǎng)站是否能夠吸引并留住用戶(hù)。因此有必要加強(qiáng)電子商務(wù)專(zhuān)業(yè)學(xué)生在網(wǎng)頁(yè)界面藝術(shù)性設(shè)計(jì)方面的能力，改革原有的教學(xué)內(nèi)容，包括以下幾點(diǎn)：

(1)使用Photoshop編輯網(wǎng)頁(yè)圖像。Adobe公司開(kāi)發(fā)的Photoshop軟件是目前圖像處理領(lǐng)域使用最多的一款軟件，是集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意，圖像輸入與輸出于一體的圖形圖像處理軟件。Photoshop的版本由最初的僅能實(shí)現(xiàn)色彩平衡、飽和度調(diào)整等簡(jiǎn)單功能的1.0升級(jí)為可以創(chuàng)建和編輯3D動(dòng)畫(huà)的CS5。將Photoshop應(yīng)用到網(wǎng)頁(yè)界面設(shè)計(jì)中已是行業(yè)里最常見(jiàn)的手段和方法。對(duì)電子商務(wù)專(zhuān)業(yè)的本科生來(lái)說(shuō)需要掌握的理論與實(shí)踐知識(shí)有：

①Photoshop的基本知識(shí)，包括常用菜單命令、圖層、通道、路徑、文件模式等概念。②Photoshop工具使用方法，如工作區(qū)的操作、圖像分區(qū)、繪圖工具、文字設(shè)計(jì)器、圖層面板、圖像修補(bǔ)工具等。③使用Photoshop制作網(wǎng)頁(yè)實(shí)例，如制作電子商務(wù)交易網(wǎng)站、企業(yè)信息發(fā)布網(wǎng)站或者社交網(wǎng)站等。

(2)使用Flash創(chuàng)建動(dòng)態(tài)交互式網(wǎng)站。Flash原是Macromedia公司旗下產(chǎn)品，現(xiàn)被Adobe公司收購(gòu)，是一款制作二維矢量動(dòng)畫(huà)的軟件。最新版本為Adobe Flash Professional CS5.5。Flash被大量應(yīng)用于網(wǎng)頁(yè)的矢量動(dòng)畫(huà)設(shè)計(jì)，因?yàn)槭褂孟蛄窟\(yùn)算方式，產(chǎn)生出來(lái)的Flash影片占用存儲(chǔ)空間較小。目前，使用Flash建立全Flash站點(diǎn)成為業(yè)內(nèi)流行的網(wǎng)站創(chuàng)建方法。本課程采用項(xiàng)目教學(xué)法，即以完成多種不同主題風(fēng)格網(wǎng)站項(xiàng)目為主線，學(xué)習(xí)使用Flash工具創(chuàng)建網(wǎng)站，其中包括以下內(nèi)容：

①網(wǎng)站項(xiàng)目的策劃與制作；②社區(qū)網(wǎng)站項(xiàng)目；③廣告網(wǎng)站項(xiàng)目；④信息網(wǎng)站項(xiàng)目；⑤購(gòu)物網(wǎng)站項(xiàng)目；⑥旅行網(wǎng)站項(xiàng)目。

使學(xué)生掌握使用Flash制作HTML文件，應(yīng)用CSS，制作導(dǎo)航欄、彈出式菜單，動(dòng)畫(huà)、文本、圖像切片以及多種動(dòng)畫(huà)效果制作等能力。

(3)使用Dreamweaver+PHP+SQL構(gòu)建網(wǎng)站后臺(tái)。Dreamweaver的操作有建立PHP站點(diǎn)、數(shù)據(jù)庫(kù)的連接、使用服務(wù)器行為等；PHP平臺(tái)搭建包括Apache，PHP，MySQL的安裝；PHPAdmin的安裝與使用；MySQL數(shù)據(jù)庫(kù)的創(chuàng)建、修改、刪除等操作。

2 教學(xué)方法改革

改革原有的“教師講，學(xué)生聽(tīng)”教學(xué)方式，采用“以學(xué)生為主導(dǎo)，教師為輔導(dǎo)”，圍繞項(xiàng)目開(kāi)展網(wǎng)站設(shè)計(jì)學(xué)習(xí)的方式，即采用項(xiàng)目教學(xué)法。所謂項(xiàng)目教學(xué)法是指將整個(gè)學(xué)習(xí)過(guò)程分解為一個(gè)個(gè)具體的項(xiàng)目或事件，設(shè)計(jì)出項(xiàng)目教學(xué)方案，不僅傳授給學(xué)生理論知識(shí)和操作技能，更重要的是培養(yǎng)他們的專(zhuān)業(yè)能力。將該方法應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)課程的教學(xué)中，主要是指結(jié)合教學(xué)要點(diǎn)，給定學(xué)生網(wǎng)站設(shè)計(jì)的要求，讓學(xué)生獨(dú)立完成網(wǎng)站設(shè)計(jì)與制作的任務(wù)，具體體現(xiàn)在以下幾個(gè)方面：

(1)介紹網(wǎng)站設(shè)計(jì)成功案例。為了使學(xué)生形成一定的網(wǎng)站設(shè)計(jì)構(gòu)想，有必要將目前國(guó)內(nèi)外在設(shè)計(jì)方面有創(chuàng)意的網(wǎng)站展示給學(xué)生，如匡威、立頓茶飲、開(kāi)心網(wǎng)等。通過(guò)這些網(wǎng)站使學(xué)生了解現(xiàn)在較流行的網(wǎng)站設(shè)計(jì)風(fēng)格、設(shè)計(jì)思路及設(shè)計(jì)手段。

(2)理論教學(xué)圍繞項(xiàng)目展開(kāi)。每節(jié)課設(shè)定一個(gè)網(wǎng)站制作項(xiàng)目，如Dreamweaver站點(diǎn)建立、Photoshop圖層的使用、Flash與ASP技術(shù)的結(jié)合等，并給學(xué)生講解每個(gè)項(xiàng)目的設(shè)計(jì)目標(biāo)、預(yù)達(dá)到的效果、設(shè)計(jì)思路和制作的具體步驟。以課堂演示操作為手段，邊講解邊操作演示，進(jìn)而使學(xué)生有感性上的認(rèn)識(shí)與體會(huì)。

(3)上機(jī)實(shí)驗(yàn)課要求學(xué)生模擬完成課堂講解的項(xiàng)目。該課程有1/3的學(xué)時(shí)是安排學(xué)生上機(jī)操作，這是實(shí)現(xiàn)項(xiàng)目教學(xué)法的必備條件，即在理論學(xué)習(xí)的同時(shí)安排學(xué)生上機(jī)操作，將課堂上教師完成的項(xiàng)目由學(xué)生自己上機(jī)實(shí)現(xiàn)，由易到難，引起學(xué)生的興趣并鍛煉其制作網(wǎng)站的動(dòng)手能力。

(4)課程考核以大作業(yè)形式實(shí)現(xiàn)。改變?cè)瓉?lái)閉卷筆試的考核形式，要求學(xué)生在課程結(jié)束后獨(dú)立形成一個(gè)完整的網(wǎng)站，主題自擬，使用Dreamweaver，Photoshop和Flash等網(wǎng)站制作工具實(shí)現(xiàn)至少80%課上講解的項(xiàng)目功能。對(duì)使用課外的工具和手段使得網(wǎng)站更生動(dòng)的學(xué)生可加分，即鼓勵(lì)學(xué)生自己摸索和創(chuàng)新網(wǎng)站制作方法。最終成績(jī)的評(píng)定依據(jù)網(wǎng)站使用工具先進(jìn)性、主題的新穎性、界面設(shè)計(jì)的藝術(shù)性和實(shí)現(xiàn)功能的完善性四個(gè)方面來(lái)評(píng)分。本課程最后的綜合成績(jī)?cè)u(píng)定除了依據(jù)上述大作業(yè)完成情況，還依據(jù)平時(shí)上課情況和上機(jī)實(shí)驗(yàn)完成情況，其比例分別為60%，10%和30%。

(5)利用學(xué)生業(yè)余時(shí)間創(chuàng)辦網(wǎng)站設(shè)計(jì)大賽。組織學(xué)生組成團(tuán)隊(duì)共同設(shè)計(jì)制作網(wǎng)站，在條件允許的情況下將網(wǎng)站發(fā)布于互聯(lián)網(wǎng)上，發(fā)動(dòng)全校師生上網(wǎng)訪問(wèn)參賽作品并評(píng)分。根據(jù)訪問(wèn)者的評(píng)分得出大賽一、二、三等獎(jiǎng)，并給予獎(jiǎng)勵(lì)。

3 結(jié)束語(yǔ)

綜上所述，電子商務(wù)專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)與網(wǎng)頁(yè)制作課程必須與時(shí)俱進(jìn)，使用先進(jìn)的設(shè)計(jì)制作工具，使學(xué)生接觸最新的網(wǎng)站設(shè)計(jì)方法，即采用Dramweaver+Flash+Photoshop的組合，使學(xué)生學(xué)習(xí)制作的網(wǎng)站能跟上時(shí)代發(fā)展步伐。

在教學(xué)方式上采用項(xiàng)目教學(xué)法，圍繞具體的網(wǎng)站設(shè)計(jì)與制作項(xiàng)目展開(kāi)教學(xué)與實(shí)踐，鍛煉了學(xué)生的動(dòng)手能力而且也讓其了解了制作網(wǎng)站的流程與步驟，從而大大提高了學(xué)生的專(zhuān)業(yè)素質(zhì)和就業(yè)能力。

[1] 賈珺.網(wǎng)頁(yè)設(shè)計(jì)與制作課程體系建設(shè)與教學(xué)實(shí)踐改革[J].現(xiàn)代計(jì)算機(jī),2010,6:72-75.

[2] 紀(jì)明明.淺談“項(xiàng)目教學(xué)法”在網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)課程教學(xué)中的應(yīng)用[J].中國(guó)新技術(shù)新產(chǎn)品,2010,24:239.

[3] 盧新建.試談ASP動(dòng)態(tài)網(wǎng)頁(yè)課程的教學(xué)探索[J].計(jì)算機(jī)應(yīng)用教學(xué)研究,2010,10:147-159.

Research on teaching reformation of Web site design and Web page making

Zhang Yan
Southeast university, Nanjing, 210088, China

Web site design and Web page making is one of the fundamental courses for the major electronic commerce. But the teaching content and method of this course still stay in ASP Web site design and making which means the content and method of teaching are out of style. So we need to teach new content such as using Dreamweaver, Photoshop, Flash and PHP to make web site.

Web site design and Web page making; Photoshop; Flash; PHP; teaching reformation

2011-09-22

張琰，碩士，講師。