高職“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程教學(xué)改革探索

楊穎

高職“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程教學(xué)改革探索

楊穎

隨著各種智能化的移動(dòng)終端日益普及，傳統(tǒng)的PC端網(wǎng)頁(yè)設(shè)計(jì)布局方式越來(lái)越不能滿足用戶的需求，如何讓網(wǎng)頁(yè)兼容多個(gè)終端，成為網(wǎng)頁(yè)設(shè)計(jì)師們亟待解決的問(wèn)題。同時(shí)，移動(dòng)互聯(lián)網(wǎng)技術(shù)也促進(jìn)了教育資源的共享，學(xué)生在學(xué)習(xí)觀念和學(xué)習(xí)模式上有了巨大的轉(zhuǎn)變，線上學(xué)習(xí)、碎片化學(xué)習(xí)、移動(dòng)學(xué)習(xí)和社交學(xué)習(xí)將是未來(lái)的學(xué)習(xí)趨勢(shì)?！熬W(wǎng)頁(yè)設(shè)計(jì)與制作”課程本身與互聯(lián)網(wǎng)技術(shù)緊密相關(guān)，更應(yīng)該發(fā)揮課程自身的特點(diǎn)，緊跟行業(yè)最新技術(shù)，將移動(dòng)互聯(lián)網(wǎng)融入到課堂內(nèi)外，激發(fā)學(xué)生學(xué)習(xí)的主動(dòng)性和創(chuàng)造性，從而有效提高教學(xué)質(zhì)量，培養(yǎng)更多符合社會(huì)崗位需求的技能型人才。

高職教育;網(wǎng)頁(yè)設(shè)計(jì)與制作;課程改革;移動(dòng)互聯(lián)

近年來(lái)，隨著智能移動(dòng)終端產(chǎn)品的不斷發(fā)展，特別是4G時(shí)代的開(kāi)啟，網(wǎng)速和帶寬的增加，數(shù)據(jù)網(wǎng)絡(luò)成本和流量資費(fèi)的下降，更加豐富的互聯(lián)網(wǎng)信息應(yīng)用，云計(jì)算、大數(shù)據(jù)等新興技術(shù)開(kāi)始廣泛普及，這都意味著移動(dòng)互聯(lián)網(wǎng)時(shí)代的真正來(lái)臨。中國(guó)互聯(lián)網(wǎng)信息中心CNNIC發(fā)布的《第34次中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示，截至2014年6月，中國(guó)網(wǎng)民規(guī)模達(dá)6．32億，其中，手機(jī)網(wǎng)民規(guī)模5．27億，互聯(lián)網(wǎng)普及率達(dá)到46．9%。網(wǎng)民上網(wǎng)設(shè)備中，手機(jī)使用率達(dá)83．4%，相比2013年底上升2．4個(gè)百分點(diǎn)，首次超越傳統(tǒng)PC整體80．9%的使用率，手機(jī)作為第一大上網(wǎng)終端的地位更加鞏固，用戶的注意力已經(jīng)不可逆轉(zhuǎn)地從PC端網(wǎng)站向移動(dòng)端APP轉(zhuǎn)移。因此，“網(wǎng)頁(yè)設(shè)計(jì)技術(shù)”課程也應(yīng)順應(yīng)新時(shí)代的發(fā)展，將最新的知識(shí)和技術(shù)融入到課程的教學(xué)過(guò)程中，從以前的側(cè)重于PC端網(wǎng)頁(yè)界面設(shè)計(jì)過(guò)渡到今后兼顧移動(dòng)端設(shè)備網(wǎng)頁(yè)設(shè)計(jì)，不斷改進(jìn)教學(xué)內(nèi)容以及教學(xué)手段，才能保證良好的教學(xué)效果，提高學(xué)生的就業(yè)競(jìng)爭(zhēng)能力。

一、緊跟行業(yè)最新技術(shù)，靈活組織教學(xué)內(nèi)容

目前，高職“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程的教學(xué)內(nèi)容主要包括:網(wǎng)頁(yè)設(shè)計(jì)與制作的基本概念;HTML標(biāo)記語(yǔ)言;網(wǎng)頁(yè)編輯軟件Dreamweaver的使用方法;在網(wǎng)頁(yè)中添加文字、圖像、超鏈接、表格等基本元素;使用CSS樣式表;Div+CSS網(wǎng)頁(yè)布局;制作框架網(wǎng)頁(yè);創(chuàng)建表單網(wǎng)頁(yè);模板與庫(kù);Javascript網(wǎng)頁(yè)特效;使用Flash制作網(wǎng)頁(yè)動(dòng)畫;使用Photoshop處理網(wǎng)頁(yè)圖像等，選用的網(wǎng)頁(yè)案例也都側(cè)重于傳統(tǒng)的PC端網(wǎng)站界面設(shè)計(jì)。例如在講解網(wǎng)頁(yè)布局技術(shù)時(shí)，為了頁(yè)面的美觀性，我們往往將頁(yè)面固定寬度并居中，一般頁(yè)面寬度采用950～1200像素左右，如圖1所示。而為了實(shí)現(xiàn)圖1的左中右3欄并排的版式，需要采用Div+CSS浮動(dòng)布局來(lái)進(jìn)行定位。

而這種傳統(tǒng)的網(wǎng)頁(yè)界面并不適合在手機(jī)、平板等移動(dòng)終端設(shè)備中顯示，這是因?yàn)橐苿?dòng)設(shè)備相比臺(tái)式電腦而言，屏幕范圍都比較有限，從而使得用戶很難看清楚依賴于標(biāo)準(zhǔn)尺寸的PC端屏幕上的文字和圖形。因此，手機(jī)端網(wǎng)頁(yè)在排版時(shí)一般采取流式布局，頁(yè)面寬度盡量采用以百分比為單位的彈性寬度，根據(jù)設(shè)備屏幕的大小能夠自適應(yīng)調(diào)節(jié)，按比例縮放。另外，考慮到用戶在移動(dòng)設(shè)備操作方面的一些特點(diǎn)，頁(yè)面在圖形、導(dǎo)航按鈕的設(shè)計(jì)方面應(yīng)盡量簡(jiǎn)潔易用，如圖2所示，用最小的成本呈現(xiàn)最有價(jià)值的內(nèi)容，盡量減少用戶進(jìn)行信息訪問(wèn)時(shí)所采取的步驟，從而達(dá)到高效良好的用戶體驗(yàn)。［1］這些面向不同終端的網(wǎng)頁(yè)設(shè)計(jì)原則，應(yīng)該在教學(xué)過(guò)程中清晰地傳遞給學(xué)生。同時(shí)，在教學(xué)中，應(yīng)及時(shí)引入先進(jìn)的Web技術(shù)，如 HTML5、CSS3、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)［2］、媒體查詢、流式布局、自適應(yīng)圖片等內(nèi)容。除了介紹前端界面設(shè)計(jì)以外，可以適當(dāng)介紹一些動(dòng)態(tài)網(wǎng)站后臺(tái)開(kāi)發(fā)的流程，使學(xué)生在整體上對(duì)網(wǎng)站建設(shè)具有更加明確的認(rèn)識(shí)，為后續(xù)網(wǎng)頁(yè)編程技術(shù) JavaScript/AJAX、Web程序設(shè)計(jì)(I)——ASP．NET技術(shù)、Web程序設(shè)計(jì)(II)——PHP+MySQL技術(shù)、網(wǎng)絡(luò)數(shù)據(jù)庫(kù)等專業(yè)課程的學(xué)習(xí)打下良好的基礎(chǔ)。

圖1 傳統(tǒng)的PC端網(wǎng)頁(yè)界面

圖2 手機(jī)端網(wǎng)站頁(yè)面

二、轉(zhuǎn)變傳統(tǒng)教學(xué)觀念，促進(jìn)教學(xué)方式創(chuàng)新

在移動(dòng)互聯(lián)時(shí)代，信息的傳播速度更快，傳播的內(nèi)容也更具有沖擊力和震撼力，傳播的扁平化趨勢(shì)也更加明顯。信息的傳播早已不再是自上而下的單向式傳播，而是呈現(xiàn)信息傳播的網(wǎng)狀結(jié)構(gòu)、雙向結(jié)構(gòu)，每一個(gè)手持移動(dòng)終端的個(gè)體都是一個(gè)傳播節(jié)點(diǎn)，人人都可以成為傳播活動(dòng)的主體。微博、微信、微課等新鮮事物已經(jīng)在社會(huì)上日益普及，學(xué)生通過(guò)手機(jī)、IM軟件等各種途徑，互相分享交流可以快速獲取最先進(jìn)的知識(shí)技術(shù)。教師不再是知識(shí)的權(quán)威，教師作為課堂上知識(shí)傳授者的傳統(tǒng)地位被動(dòng)搖了，未來(lái)課堂知識(shí)將由三方面組成:教科書及參考書提供的知識(shí);教師個(gè)人知識(shí);師生互動(dòng)產(chǎn)生的知識(shí)。這表明教師的身份應(yīng)該從課堂的管理者轉(zhuǎn)變?yōu)閷W(xué)生學(xué)習(xí)知識(shí)的合作者，課程的教學(xué)方法也需要隨之發(fā)生改變。

除了在課堂上采用傳統(tǒng)的案例教學(xué)、項(xiàng)目式教學(xué)、任務(wù)驅(qū)動(dòng)法教學(xué)以外，“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程應(yīng)該結(jié)合自身特點(diǎn)，在教學(xué)手段上多運(yùn)用現(xiàn)代教育技術(shù)和虛擬現(xiàn)實(shí)技術(shù)，以直觀的形式使抽象問(wèn)題簡(jiǎn)單化，以高效的授課手段、形象的動(dòng)畫演示、巧妙的環(huán)節(jié)設(shè)計(jì)保證授課質(zhì)量。充分利用網(wǎng)絡(luò)課程教學(xué)平臺(tái)，優(yōu)化教學(xué)過(guò)程，提高教學(xué)質(zhì)量和效率。［3］教學(xué)資源應(yīng)全部可在網(wǎng)上瀏覽和下載，包括教學(xué)大綱、教學(xué)課件、教學(xué)案例、實(shí)訓(xùn)實(shí)踐、例題習(xí)題、授課視頻、優(yōu)秀網(wǎng)頁(yè)作品庫(kù)與素材庫(kù)等。精心設(shè)計(jì)出知識(shí)點(diǎn)合理、內(nèi)容短小精悍的微課程以及其他適合在移動(dòng)終端上展現(xiàn)的優(yōu)質(zhì)的移動(dòng)學(xué)習(xí)資源，從而使任何學(xué)生在任何時(shí)候、任何地方都能輕松地獲取知識(shí)以及訓(xùn)練技能，保證學(xué)生按需學(xué)習(xí)和主動(dòng)學(xué)習(xí)。此外，通過(guò)短信、電子郵件、QQ群、論壇、微博、微信、朋友圈等師生互動(dòng)環(huán)節(jié)加強(qiáng)教師與學(xué)生之間的聯(lián)系與了解，既幫助教師及時(shí)了解學(xué)生的學(xué)習(xí)情況以便掌握課程的進(jìn)度和方向，又能夠促進(jìn)學(xué)生學(xué)習(xí)的自主性和積極性。

三、改進(jìn)課程考核方式，合理評(píng)價(jià)教學(xué)效果

“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程的考核應(yīng)注重實(shí)踐性、創(chuàng)造性和實(shí)際技能培養(yǎng)的要求，以學(xué)生綜合實(shí)踐能力考核為主線，改變傳統(tǒng)的對(duì)課程單一片面的考核方式，建立促進(jìn)學(xué)生動(dòng)手能力和創(chuàng)新能力的考評(píng)體系，實(shí)行過(guò)程考核與結(jié)果考核相結(jié)合。過(guò)程考核包括學(xué)生課堂練習(xí)、課后作業(yè)完成情況、考勤情況等，結(jié)果考核包括期末課程設(shè)計(jì)情況。課程設(shè)計(jì)可以由授課老師結(jié)合學(xué)校需求或者企業(yè)需求、市場(chǎng)需求，引入若干項(xiàng)目，由學(xué)生選擇獨(dú)立或分組完成。分組時(shí)同組人數(shù)不超過(guò)3人，并明確劃分各人分工情況，比如界面設(shè)計(jì)、文案編輯、內(nèi)容校正、資料收集、后臺(tái)程序等。分組合作不僅能增強(qiáng)學(xué)生的團(tuán)隊(duì)精神，同時(shí)也有助于相互之間的幫助，使學(xué)生更快地掌握應(yīng)用技能。在設(shè)計(jì)過(guò)程中，要求學(xué)生填寫標(biāo)準(zhǔn)的設(shè)計(jì)任務(wù)書，嚴(yán)格按照網(wǎng)頁(yè)設(shè)計(jì)流程進(jìn)行，完成和上交所有設(shè)計(jì)文檔和報(bào)告，這樣可以增強(qiáng)學(xué)生的實(shí)踐能力和崗位能力。

在驗(yàn)收網(wǎng)頁(yè)設(shè)計(jì)作品的過(guò)程中，由學(xué)生在多媒體教室或機(jī)房把自己的網(wǎng)頁(yè)設(shè)計(jì)作品展示出來(lái)，并且講解整個(gè)構(gòu)思、設(shè)計(jì)以及實(shí)現(xiàn)過(guò)程，讓學(xué)生成為網(wǎng)站的運(yùn)作人，由指導(dǎo)教師最終進(jìn)行點(diǎn)評(píng)總結(jié)，并對(duì)每個(gè)作品從創(chuàng)意、排版、內(nèi)容、美工、技術(shù)等各方面進(jìn)行綜合評(píng)分。同時(shí)，還要將學(xué)生的相互評(píng)價(jià)和自我評(píng)價(jià)作為考核評(píng)價(jià)的重要指標(biāo)。學(xué)生還可以把自己的網(wǎng)頁(yè)作品放上網(wǎng)，發(fā)揮社交網(wǎng)絡(luò)和移動(dòng)互聯(lián)網(wǎng)優(yōu)勢(shì)，通過(guò)調(diào)查、評(píng)論、專題、互動(dòng)、網(wǎng)民投票等手段，客觀了解作品的各方面優(yōu)勢(shì)劣勢(shì)，從而做出進(jìn)一步的改進(jìn)和提高。期末考核不但是檢驗(yàn)學(xué)習(xí)效果的手段，而且還成為學(xué)生繼續(xù)學(xué)習(xí)與實(shí)踐訓(xùn)練的組成部分，培養(yǎng)了學(xué)生實(shí)際動(dòng)手能力和基本專業(yè)素質(zhì)，這樣的考核方式將會(huì)取得比單獨(dú)進(jìn)行理論考試更好的教學(xué)效果。

除了常規(guī)的課程考核以外，組織學(xué)生在課余成立興趣小組、社團(tuán)、工作室、虛擬公司，承接實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)業(yè)務(wù)，同時(shí)，鼓勵(lì)學(xué)生參加各種網(wǎng)頁(yè)設(shè)計(jì)大賽及相關(guān)的網(wǎng)頁(yè)設(shè)計(jì)認(rèn)證考試，使學(xué)生通過(guò)不同層次的實(shí)際訓(xùn)練，鍛煉其自主學(xué)習(xí)能力與創(chuàng)新思維能力，并促進(jìn)他們對(duì)所學(xué)的知識(shí)進(jìn)行總結(jié)與提高，從而形成比較系統(tǒng)的課程知識(shí)體系，最終提高學(xué)生的實(shí)戰(zhàn)能力，學(xué)以致用服務(wù)社會(huì)。

四、加強(qiáng)教學(xué)團(tuán)隊(duì)建設(shè)，提高教學(xué)質(zhì)量

在“網(wǎng)頁(yè)設(shè)計(jì)與制作”的課程教學(xué)中，教師的業(yè)務(wù)水平和綜合素質(zhì)直接影響學(xué)生的學(xué)習(xí)質(zhì)量。所以建設(shè)一支高素質(zhì)的專業(yè)教學(xué)團(tuán)隊(duì)是課程教學(xué)改革中至關(guān)重要的一環(huán)。［4］教學(xué)團(tuán)隊(duì)的所有成員應(yīng)具備豐富的教學(xué)經(jīng)驗(yàn)，專兼聘相結(jié)合，形成合理的年齡與知識(shí)結(jié)構(gòu)梯隊(duì)。邀請(qǐng)高職稱高學(xué)歷高技能的人才特別是企業(yè)專家來(lái)承擔(dān)學(xué)生實(shí)踐環(huán)節(jié)，定期為學(xué)生開(kāi)設(shè)網(wǎng)頁(yè)設(shè)計(jì)方面的新技術(shù)講座。重視教師之間的合作交流與資源共享，充分利用移動(dòng)互聯(lián)網(wǎng)的優(yōu)勢(shì)，建立教師備課聯(lián)盟，通過(guò)共同備課的機(jī)制，討論課程教學(xué)方法、教學(xué)項(xiàng)目以及更新教學(xué)內(nèi)容。此外，由于這門課程涉及的專業(yè)知識(shí)很多，它包含平面設(shè)計(jì)、動(dòng)畫設(shè)計(jì)、圖像處理、網(wǎng)頁(yè)編程、數(shù)據(jù)庫(kù)、Web程序開(kāi)發(fā)、網(wǎng)站建設(shè)與維護(hù)管理等領(lǐng)域，必須緊跟新技術(shù)的發(fā)展才能保證所學(xué)知識(shí)不被淘汰。這對(duì)授課教師本身的知識(shí)結(jié)構(gòu)和專業(yè)技能水平的要求更高。因此，學(xué)校也應(yīng)積極鼓勵(lì)教師不斷更新和拓展專業(yè)知識(shí)結(jié)構(gòu)，同時(shí)多方面支持專業(yè)教師定期參加各種設(shè)計(jì)競(jìng)賽、交流培訓(xùn)及科研項(xiàng)目，增加教師的進(jìn)修和學(xué)習(xí)機(jī)會(huì)，加大師資培訓(xùn)力度，使教師積極主動(dòng)地參與到企業(yè)或公司實(shí)際的設(shè)計(jì)項(xiàng)目中去，從而提高教師的整體素質(zhì)和業(yè)務(wù)水平。作為教師本身，也要樹(shù)立先進(jìn)的現(xiàn)代教育理念，主動(dòng)提升自我，勇于嘗試新媒體，接觸新事物，利用業(yè)余碎片時(shí)間不斷研究學(xué)習(xí)新知識(shí)，享受移動(dòng)學(xué)習(xí)帶來(lái)的新體驗(yàn)。

在移動(dòng)互聯(lián)網(wǎng)日益普及的今天，人們可以非常快捷地獲得大量的網(wǎng)頁(yè)設(shè)計(jì)與制作相關(guān)的學(xué)習(xí)資源，任課教師要想獲得學(xué)生的積極參與和普遍認(rèn)同，就需要緊跟最新的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，在知識(shí)和技能方面不斷充實(shí)自我，以學(xué)生就業(yè)為導(dǎo)向，將教學(xué)與社會(huì)應(yīng)用相結(jié)合，不斷對(duì)課程的教學(xué)方法、教學(xué)手段進(jìn)行改革和創(chuàng)新，以充實(shí)的教學(xué)內(nèi)容吸引學(xué)生自主學(xué)習(xí)，引導(dǎo)學(xué)生不斷創(chuàng)新，使學(xué)生在學(xué)習(xí)過(guò)程中收獲更多的成就感。只有緊緊把握互聯(lián)網(wǎng)技術(shù)飛速發(fā)展的新機(jī)遇，立足于滿足社會(huì)崗位對(duì)人才的需求，努力提高學(xué)生的創(chuàng)新思維與實(shí)踐動(dòng)手能力，才能培養(yǎng)出更多符合時(shí)代要求的高素質(zhì)專業(yè)人才，真正實(shí)現(xiàn)教學(xué)與就業(yè)的無(wú)縫對(duì)接。

［1］梅倩．移動(dòng)互聯(lián)網(wǎng)時(shí)代下的網(wǎng)頁(yè)設(shè)計(jì)［J］．科技創(chuàng)新導(dǎo)報(bào)，2010(4):19－20．

［2］王愉，潘明明．響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)初探［J］．北京印刷學(xué)院學(xué)報(bào)，2014(3):13－15．

［3］吳葳葳．高職高?！毒W(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)改革研究［J］．科技信息(學(xué)術(shù)研究)，2007(34):171－172．

［4］陸遠(yuǎn)蓉，李曉婷．基于工作過(guò)程系統(tǒng)化的《移動(dòng)互聯(lián)網(wǎng)站設(shè)計(jì)》學(xué)習(xí)情境設(shè)計(jì)［J］．當(dāng)代職業(yè)教育，2014(6): 24－26．

［責(zé)任編輯 陳國(guó)平］

楊穎，女，廣東農(nóng)工商職業(yè)技術(shù)學(xué)院講師，碩士，主要研究方向?yàn)橛?jì)算機(jī)應(yīng)用技術(shù)。

G712

A

1674－7747(2015)18－0025－03