高職“網頁設計與制作”課程教學改革探索

楊穎

高職“網頁設計與制作”課程教學改革探索

楊穎

隨著各種智能化的移動終端日益普及，傳統的PC端網頁設計布局方式越來越不能滿足用戶的需求，如何讓網頁兼容多個終端，成為網頁設計師們亟待解決的問題。同時，移動互聯網技術也促進了教育資源的共享，學生在學習觀念和學習模式上有了巨大的轉變，線上學習、碎片化學習、移動學習和社交學習將是未來的學習趨勢。“網頁設計與制作”課程本身與互聯網技術緊密相關，更應該發揮課程自身的特點，緊跟行業最新技術，將移動互聯網融入到課堂內外，激發學生學習的主動性和創造性，從而有效提高教學質量，培養更多符合社會崗位需求的技能型人才。

高職教育;網頁設計與制作;課程改革;移動互聯

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

一、緊跟行業最新技術，靈活組織教學內容

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

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

圖1 傳統的PC端網頁界面

圖2 手機端網站頁面

二、轉變傳統教學觀念，促進教學方式創新

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

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

三、改進課程考核方式，合理評價教學效果

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

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

除了常規的課程考核以外，組織學生在課余成立興趣小組、社團、工作室、虛擬公司，承接實際的網頁設計業務，同時，鼓勵學生參加各種網頁設計大賽及相關的網頁設計認證考試，使學生通過不同層次的實際訓練，鍛煉其自主學習能力與創新思維能力，并促進他們對所學的知識進行總結與提高，從而形成比較系統的課程知識體系，最終提高學生的實戰能力，學以致用服務社會。

四、加強教學團隊建設，提高教學質量

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

在移動互聯網日益普及的今天，人們可以非?？旖莸孬@得大量的網頁設計與制作相關的學習資源，任課教師要想獲得學生的積極參與和普遍認同，就需要緊跟最新的網頁設計技術，在知識和技能方面不斷充實自我，以學生就業為導向，將教學與社會應用相結合，不斷對課程的教學方法、教學手段進行改革和創新，以充實的教學內容吸引學生自主學習，引導學生不斷創新，使學生在學習過程中收獲更多的成就感。只有緊緊把握互聯網技術飛速發展的新機遇，立足于滿足社會崗位對人才的需求，努力提高學生的創新思維與實踐動手能力，才能培養出更多符合時代要求的高素質專業人才，真正實現教學與就業的無縫對接。

［1］梅倩．移動互聯網時代下的網頁設計［J］．科技創新導報，2010(4):19－20．

［2］王愉，潘明明．響應式網頁設計初探［J］．北京印刷學院學報，2014(3):13－15．

［3］吳葳葳．高職高?！毒W頁設計》課程教學改革研究［J］．科技信息(學術研究)，2007(34):171－172．

［4］陸遠蓉，李曉婷．基于工作過程系統化的《移動互聯網站設計》學習情境設計［J］．當代職業教育，2014(6): 24－26．

［責任編輯 陳國平］

楊穎，女，廣東農工商職業技術學院講師，碩士，主要研究方向為計算機應用技術。

G712

A

1674－7747(2015)18－0025－03