鄭水祥

（南京城市職業(yè)學(xué)院，江蘇 南京 211200）

1 研究背景

網(wǎng)絡(luò)信息技術(shù)不斷推陳出新，為視覺設(shè)計(jì)帶來了新的表現(xiàn)形式，也推動(dòng)了藝術(shù)表現(xiàn)內(nèi)容與形式上的創(chuàng)新與變革。 隨著新媒體技術(shù)的不斷發(fā)展，網(wǎng)頁設(shè)計(jì)中的不同類別元素也是更新變化，網(wǎng)頁前端界面經(jīng)歷了從文字型頁面到圖形化頁面的轉(zhuǎn)變，再到現(xiàn)在新媒體技術(shù)普及應(yīng)用，豐富了網(wǎng)頁端前的界面。

該項(xiàng)目以對南京城市職業(yè)學(xué)院2019 年畢業(yè)生數(shù)據(jù)為例，對其下屬某二級(jí)學(xué)院畢業(yè)生崗位跟蹤、回訪調(diào)查，視覺傳播設(shè)計(jì)、藝術(shù)設(shè)計(jì)兩專業(yè)畢業(yè)生應(yīng)聘網(wǎng)站設(shè)計(jì)制作崗位主要有： 網(wǎng)店裝修與美化、Web 前端界面交互設(shè)計(jì)、網(wǎng)站編輯與維護(hù)等。

網(wǎng)店裝修與美化、Web 前端界面交互設(shè)計(jì)： 精通Photoshop、Html、DW 等網(wǎng)頁設(shè)計(jì)編輯工具。

網(wǎng)站編輯與維護(hù)：除了具備對Photoshop、Html 靜態(tài)語言、DW/FLASH/AE 軟件使用外，還能對網(wǎng)站色彩搭配、CSS、JSP/ASP 語言工具有二次編輯能力，對具有網(wǎng)站的DOM 樹形結(jié)構(gòu)優(yōu)化及SEO 經(jīng)驗(yàn)優(yōu)先考慮。

2 以職場崗位需求為中心，明確課程目標(biāo)

2.1 根據(jù)具體工作職責(zé)，全面了解課程需求

網(wǎng)店裝修與美化、Web 前端界面交互設(shè)計(jì)崗位的職責(zé)：（1）能夠根據(jù)公司產(chǎn)品類別需求，獨(dú)立完成公司的店鋪裝修督導(dǎo)及跟進(jìn)工作；（2） 負(fù)責(zé)店鋪促銷活動(dòng)專題頁面的設(shè)計(jì)制作，網(wǎng)站頁面美化工作。

網(wǎng)站編輯與維護(hù)崗位的職責(zé)：（1） 熟練使用PS/DM/CSS/JSP/ASP 軟件具備一定的創(chuàng)新能力，對色彩把握度強(qiáng)；有豐富的想象力；（2）具有扎實(shí)文案功底、策劃專題的能力，根據(jù)要求調(diào)整網(wǎng)站內(nèi)容方向，使網(wǎng)站流量得到最大化提升；（3） 具有較寬的知識(shí)面， 了解SEO 搜索引擎方面知識(shí)優(yōu)先；（4） 有一年以上的網(wǎng)站建設(shè)、版面欄目改版、維護(hù)等經(jīng)驗(yàn)。

2.2 營造職場環(huán)境，全面培養(yǎng)準(zhǔn)職業(yè)人的素養(yǎng)與能力

在課程教學(xué)前期，教師將現(xiàn)實(shí)工作環(huán)境中高價(jià)值項(xiàng)目模擬引入課堂，安排學(xué)生具體任務(wù)，調(diào)動(dòng)學(xué)習(xí)興趣，以此激發(fā)準(zhǔn)職業(yè)人的情懷與榮譽(yù)感。 將職場環(huán)境直接轉(zhuǎn)移進(jìn)課堂不僅能培養(yǎng)學(xué)生執(zhí)著態(tài)度，更能以準(zhǔn)職業(yè)人體驗(yàn)來激勵(lì)學(xué)生在未來工作崗位中對項(xiàng)目計(jì)劃、落實(shí)與安排不斷探索與創(chuàng)新。

考慮到網(wǎng)頁設(shè)計(jì)與制作課程對學(xué)生的創(chuàng)意能力及制作能力要求較高，在教學(xué)過程中，教師可以根據(jù)工作實(shí)際需求使用Table、Div/CSS 或框架集， 在項(xiàng)目具體實(shí)施過程中，引導(dǎo)學(xué)生通過不同工具、方法、環(huán)境參數(shù)設(shè)計(jì)制作對比，對項(xiàng)目任務(wù)中出現(xiàn)的短時(shí)間無法解決的問題采取分組討論交流溝通方式。

3 根據(jù)具體任務(wù)，合理化安排課程內(nèi)容

高職院校的專業(yè)人才培養(yǎng)目標(biāo)中開設(shè)的課程要符合市場對崗位人才的需求，培養(yǎng)具有實(shí)踐能力的職業(yè)技能型人才。 為了將知識(shí)目標(biāo)、能力目標(biāo)和素質(zhì)目標(biāo)有效地統(tǒng)一明確，根據(jù)專業(yè)的素質(zhì)能力目標(biāo)，教育實(shí)施者必須對課程內(nèi)容進(jìn)行知識(shí)點(diǎn)重組與優(yōu)化調(diào)整，增設(shè)與實(shí)際工作崗位相關(guān)的必備內(nèi)容，減少或取消與實(shí)踐操作關(guān)聯(lián)性較小的內(nèi)容。

將網(wǎng)頁設(shè)計(jì)與制作課程項(xiàng)目教學(xué)內(nèi)容，分為如下幾部分：

網(wǎng)頁設(shè)計(jì)工具軟件介紹，同時(shí)分享優(yōu)秀企業(yè)網(wǎng)站案例作品；網(wǎng)站網(wǎng)頁布局設(shè)計(jì)中Table 的應(yīng)用、導(dǎo)航欄的制作；網(wǎng)頁文本、圖像圖形、超鏈接、視頻與音效的編輯使用；Div 結(jié)構(gòu)的使用及經(jīng)典案例中Div/CSS 的應(yīng)用；Div/CSS 中CSS 的應(yīng)用及表單元素的應(yīng)用；網(wǎng)站測試與維護(hù)、網(wǎng)站優(yōu)化；

調(diào)整后的課程內(nèi)容進(jìn)一步提升了課程的實(shí)用性與通用性。 通過學(xué)習(xí)，學(xué)生可以熟悉網(wǎng)站設(shè)計(jì)的全流程并能熟練設(shè)計(jì)制做出一套完整的小型網(wǎng)站。

接著以主要講述Div 結(jié)構(gòu)的使用及經(jīng)典案例中Div/CSS 的應(yīng)用，詳細(xì)講述基于具體任務(wù)，進(jìn)行合理化安排課程內(nèi)容。 該部分內(nèi)容選擇了ABC 培訓(xùn)機(jī)構(gòu)網(wǎng)站規(guī)劃項(xiàng)目為載體進(jìn)行教學(xué)場景的設(shè)計(jì)。

規(guī)劃要求：

（1）網(wǎng)站主頁的布局設(shè)計(jì)、色彩搭配能反應(yīng)該類網(wǎng)頁的特征，要能考慮客戶需求，達(dá)到宣傳效應(yīng)。

（2）網(wǎng)頁整體布局設(shè)計(jì)、色調(diào)規(guī)格的統(tǒng)一性，確保不同終端的兼容性。

（3）分清首頁主次結(jié)構(gòu)，根據(jù)版面布局逐一確定主次頁面，預(yù)留擴(kuò)展性功能。

4 基于工作環(huán)境要素，深耕校企合作

學(xué)院可根據(jù)專業(yè)建設(shè)發(fā)展情況，定期安排校企單位資深Web 設(shè)計(jì)師、已入職的優(yōu)秀校友代表來校進(jìn)行交流傳幫帶，在交流過程中，教師與學(xué)生可以獲悉當(dāng)前最新、最熱門的軟件平臺(tái)為依據(jù)，結(jié)合實(shí)際崗位及時(shí)更新課程內(nèi)容，學(xué)校還可考慮直接試崗體驗(yàn)讓學(xué)生熟悉并感受企業(yè)工作環(huán)境。 拓展學(xué)生的專業(yè)視野，為學(xué)生頂崗實(shí)踐做準(zhǔn)備。

4.1 專業(yè)教師當(dāng)先行積極為學(xué)生創(chuàng)設(shè)實(shí)踐條件

學(xué)?？砂才欧蠗l件的骨干教師先一步進(jìn)入企業(yè)跟崗交流，在企業(yè)跟崗交流中能直接了解企業(yè)網(wǎng)站開發(fā)的業(yè)務(wù)流程、行業(yè)設(shè)計(jì)軟件的更新。 同時(shí)，也可讓教師將參與項(xiàng)目的經(jīng)歷、行業(yè)交流直接引入課程實(shí)訓(xùn)環(huán)節(jié)、為教材編寫提供幫助指導(dǎo)，為專業(yè)建設(shè)提供保駕護(hù)航。

4.2 采用 “教、學(xué)、做”項(xiàng)目一體化聯(lián)動(dòng)模式

在實(shí)際教學(xué)過程中，將項(xiàng)目任務(wù)中重要指標(biāo)轉(zhuǎn)化為課程教學(xué)的知識(shí)目標(biāo)、能力目標(biāo)和素質(zhì)目標(biāo)。

在課程導(dǎo)學(xué)階段，教師將知識(shí)點(diǎn)結(jié)構(gòu)，學(xué)生模仿能力的培養(yǎng)融合為一體構(gòu)建學(xué)生的知識(shí)體系。 以“ABC 培訓(xùn)機(jī)構(gòu)網(wǎng)站規(guī)劃設(shè)計(jì)”為例，該項(xiàng)目的教學(xué)安排如下：

項(xiàng)目任務(wù)：ABC 培訓(xùn)機(jī)構(gòu)首頁布局設(shè)計(jì)。

項(xiàng)目目標(biāo)： 要求學(xué)生能熟練掌握使用Div/CSS 工具對網(wǎng)站布局設(shè)計(jì)。

教學(xué)內(nèi)容：（1）了解不同類型網(wǎng)站的風(fēng)格，提出對培訓(xùn)類網(wǎng)站布局的理解、創(chuàng)意思考、草圖設(shè)想；（2）深度分解成熟網(wǎng)站項(xiàng)目設(shè)計(jì)使用的相關(guān)規(guī)范、技術(shù)參數(shù)與工具；（3） 通過效果實(shí)現(xiàn)分析Table 工具與Div/CSS布局兩者區(qū)別與優(yōu)劣勢；（4）對網(wǎng)站布局使用Div/CSS設(shè)計(jì)。

教學(xué)方法：教師安排學(xué)生進(jìn)行分組自主學(xué)習(xí)，教、學(xué)、做一體化。 授課教師在項(xiàng)目任務(wù)的詳述過程中，須分步驟分知識(shí)點(diǎn)逐條講解，還要關(guān)注學(xué)生實(shí)踐與思考的時(shí)間與空間，保證每個(gè)項(xiàng)目實(shí)施和學(xué)生的練習(xí)張弛有度。

5 教學(xué)考核和總結(jié)評(píng)價(jià)

考慮到課程實(shí)踐操作性很強(qiáng)，課程的教學(xué)內(nèi)容也是從任務(wù)陳述、項(xiàng)目實(shí)訓(xùn)、任務(wù)拓展等依次遞進(jìn)，課程設(shè)計(jì)的深入淺出，實(shí)現(xiàn)了基礎(chǔ)知識(shí)、專業(yè)技能、素質(zhì)涵養(yǎng)的同步培養(yǎng)與鍛煉。

6 結(jié)語

采用基于頂崗實(shí)踐的項(xiàng)目教學(xué)法進(jìn)行課程教學(xué)，能將煩瑣理論變成逐個(gè)項(xiàng)目任務(wù)。 調(diào)查數(shù)據(jù)普遍反映該課程的教學(xué)改革創(chuàng)新培養(yǎng)了其崗位實(shí)際工作過程中的分析、思考與解決問題的綜合能力。

圖1 設(shè)計(jì)項(xiàng)目：ABC 培訓(xùn)機(jī)構(gòu)網(wǎng)站首頁設(shè)計(jì)