基于行動導向教學模式的《網頁設計與制作》課程設計

陳俊斌

【摘要】 在實際工作崗位中對學生的動手能力要求較強，《網頁設計與制作》課程能夠培養學生從事網頁設計與制作的基本技能，是非常適合采用“行動導向”教學模式的一門課程。為了讓行動導向教學模式發揮作用，需要根據工作過程制定課程的主要內容；根據工作崗位制定課程的培養目標；采用傳統講授與行動導向相結合的教學模式；細心地設計各小案例。

【關鍵字】 行動導向課程設計網頁

一、了解工作過程，制定課程主要內容

行運導向課程是基于工作過程的，《網頁設計與制作》相關內容是網站建設的，有必要先了解網站建設的基本工作過程，其過程為：（1）對網站進行需求分析；（2）網站地圖規劃；（3）網頁結構設計；（4）網頁美工設計；（5）網頁素材收集；（6）網頁代碼編寫；（7）網站測試和以及上線；（8）網站運行維護。要完成上述的工作過程需要多門科目的相關知識與技能，比如“網頁美工設計”就需要photoshop知識，“網站上線”需要用到服務器、域名等知識。因為課程時間有限，就必需對工作工過相關知識有所取舍和有所側重，在《網頁設計與制作》課程中，將網站地圖規劃、網頁結構設計、網頁代碼編寫這三個內容作為主要內容，如果學生有一定的photoshop基礎技能，可將網頁美工設計和網頁素材收集這兩個過程納入課程的教學中，如果學生沒這些基礎，則無須花太多時間在本課程中講解和練習，在網頁結構設計中采用草圖，在美工設計中教師可直接給出相關的素材。

二、了解工作崗位，制定課程的培養目標

與本課程相關的常見崗位有：（1）網站設計員；（2）網站美工制作員；（3）網頁前端開發員；（4）網站后臺程序開發員；（5）網站維護員。其中網頁前端開發的工作量是最大的，因此在課程設計中將網頁代碼編寫作為重點知識與技能。根據工作崗位的情況，設置了三個培養目標：知識目標、能力目標和情感目標。

2.1知識目標

知識目標是傳統教學模式中為學生制定的學習目標，它是弊端是學生掌握了基礎知識后卻不會應用在工作中，但學習基礎知識是為了有能力去完成任務，知識目標是基礎，不應被忽視，現將本課程知識目標制定如下：

（1）了解網站開發的工作過程；

（2）掌握網站地圖及網頁結構相關知識；

（3）掌握HTML基本標簽的使用；

（4）掌握表格布局、框架網頁、層的布局等知識；

（5）掌握模板和庫的使用；

（6）掌握CSS的樣式的定義、設置及應用；

（7）掌握Javascript、JQuery腳本語言的使用。

2.2能力目標

基于工作過程的教學方法非常強調動手能力，在學完某一課程后，是否有能力去完成相關的工作，是否有能力去勝任相關的工作崗位，現將本課程能力目標制定如下：

（1）能夠設計網站地圖及網頁結構；

（2）能夠通過HTML、CSS及JS等代碼實現網頁。

2.3情感目標

情感態度指興趣、動機、自信、意志和合作精神等影響學生學習過程和學習效果的相關因素以及在學習過程中逐漸形成的祖國意識和國際視野。制定合理的情感目標，保持積極的學習態度是學習成功的關鍵。

（1）培養學生獨立進行系統分析、設計、實施、評估的能力；

（2）培養學生獲取、分析、歸納、交流、使用信息和新技術的能力；

（3）培養學生自學能力、理解能力與表達能力；

（4）培養學生口頭語書面表達能力、人際溝通能力；

（5）培養學生計劃組織能力和團隊協作能力；

（6）培養良好的心理素質和克服困難的能力。

三、傳統講授與行動導向相結合的教學模式

課程的教學模式主要分為兩大部分：

第一部分為基于教師講授的傳統教學部分，主要內容有：

（1）網站及網頁概述與開發步驟；

（2）網站地圖及網頁結構；

（3）HTML語言與CSS樣式基礎；

（4）Javascript、JQuery基礎。

第二部分為行動導向教學模式，通過已掌握的基礎知識及開發過程中獲取的技能完成案例網站的開發，以網站完整的開發過程為案例，這樣可以讓學生了解一個網站的開發流程，主要內容有：（1）網站地圖的設計；（2）網頁結構的設計；（3）網頁內容的實現。

之所以在本課程中加入教師講授這種傳統的教學方法，是因為在以往的行動導向課程中發現，直接進入案例的行動導向教學，學生在剛開始接觸這門課程時是沒有相關的基礎知識，學生就需要從大量的知識中找到任務所需的知識，這猶如大海撈針，所以一個任務完成，學生不知道要學哪些知識，打擊學生的積極性。

教師以傳統的講授教學模式進行，從而縮小學生自學知識點的范圍，減少學生的迷茫，減輕學生在行動導向過程中的學習負擔，提高匯報知識的準確性，提升學生學習興趣，增加學生的成就感，讓學生快樂地學習。

講授法雖然能讓學生掌握知識，但無法讓學生將所學的知識轉化成技能，無法勝任工作崗位對能力及情感的要求，應用到網頁開發工作過程當中，故因將課程的重點放在案例實施的過程中，以行動導向教學模式為平臺，讓學生掌握完成網頁實現的方法，有能力完成案例中的網頁，并能將技能擴展到其他網頁設計與制作中。但僅僅一個網站的案例無法完整展示該門學科的知識，需要在課堂練習及課后練習補充相應的小案例，以完善課程的知識結構。

四、細心地設計各小案例

教師在每次課前都應細心地設計每個小案例中的教學任務，每個小案例的教學任務應注意以下幾個方面：

（1）在每個小案例中都應體現知識目標、技能目標與情感目標，在不同的案例中運用相關的技能實現網頁的制作，需要讓學生有完成任務的技能，還要讓學生掌握完成任務的方法，因為課堂所學的知識與技能在現實的網頁制作中是不夠用的，學生只有即掌握技能又有方法獲取新的知識，才能勝任網頁設計與開發的崗位。

（2）同一小案例中安排不同層次的任務，對于前期知識與技能掌握較好的學生提出相對復雜的任務，對于掌握較差的學生提出相對較簡單的任務，無論哪種難度的任務都能完成本案例，鼓勵學生完成復雜的任務，實在困難先完成簡單的任務，在課后再完成復雜的任務，這樣即能讓知識較差的學生學習該案例中的知識技能與方法，提升他們的積極性，又不妨礙較好的學生對更高層次知識技能與方法的掌握。

（3）任務相關知識的擴展與提升，比如：某個效果可以用多種方法實現；某個方法可以在不同的效果上實現。行動導向教學強調的是知識與技能的遷移與應用，在設計小案例時應將相關知識與技能的擴展提示給學生，培養學生自學能力與理解能力。

（4）注重學生的自我總結與分享，每個小案例完成后，讓學生分享通過本任務中所學的知識與技能，任務實施過程中所走的彎路，分享能夠培養學生進行總結的良好習慣，提升學生口頭語書面表達能力、人際溝通能力。

（5）教師的教學行為重點放在課程準備教師點評。在傳統的教學方法中，以教師講授為主，學生是被動學習知識，在行動導向教學模式中，學生是主體，學生主動學習，教師從旁輔助。但并不是說教師的工作并不重要，一堂好的課，需要教師在課前精心地準備案例、課堂流程，才能更好地引導學生去掌握知識與技能，教師在點評中即可以表揚學生，增加學生的自信心和成就感，也可以評價學生完成任務時的方式方法的正確性，更主要的是能完善學生學習與總結過程中知識與技能的不足，并提出任務的相關擴展知識與應用。

（6）通過學生工作頁引導學生進行任務實施，在完成相關任務或習題后，達到該次課的教學目的。

以“用CSS制作彈出菜單”課題為例，學生前期已經學習了HTML列表標簽與CSS浮動，學生只需要找開所需的“：hover選擇器”與“display屬性”的使用方法，這個任務學生是可以通過自學完成的。

這個案例的操作技能非常簡單，因此本堂課的重點與難點并不在操作技能的掌握上，而是在培養學生“遇到未掌握知識時如何解決問題”的情感能力上。

（1）制定的學習目標為：知識目標，掌握：hover選擇器與display屬性的使用；能力目標，能夠通過CSS樣式實現菜單顯示與隱藏；情感目標，培養學生“遇到未掌握知識時如何解決問題”的能力。

（2）教學方法采用行動導向教學模式中的任務驅動法，有布置工作任務、任務分析、任務實施、展示與評價、教師講解、教學小結、作業布置七個教學過程，其中任務實施過程由學生通過電腦自己網絡上的相關知識，并應用到本堂課的任務中，以學生自主學習為主，教師引導為輔。

（3）學生工作頁任務流程：

①有哪些功能尚未實現？應該怎么辦？

②請問你查找知識的途徑是？

③本次任務中的關鍵代碼是什么？

④請簡述關鍵代碼的作用。

…

請在電腦上編寫本次任務所需的代碼。

（4）采用兩種難度的任務習題，在較難的習題中，要求學生先用前期學習的列表標簽及浮動屬性制作靜態導航條，并在適當的地方加入“：hover選擇器”與“display屬性”就可完成本堂課任務，在較易的習題中，已經將列表標簽及浮動屬性的代碼編寫好，只需在適當的地方加入“：hover選擇器”與“display屬性”就可完成本堂課任務。學生可根據自身的情況選擇用何種難度完成本次任務

（5）提示學生進行兩個方向的知識展，第一個擴展方向：彈出菜單功能除了可以用CSS樣式制作，還可以用哪些技術制作（擴展知識點：Javascript、JQuery等腳本語言）；第二個擴展方向：“：hover選擇器”與“display屬性”還可以實現哪些效果（鼠標滑過圖片放大顯示的相冊效果等）。

（6）要求學生對本次任務的完成經過進行匯報。

（7）教師點評與總結，表揚完成得較好的學生，鼓勵尚未完成的學生，并重點講解“：hover選擇器”與“display屬性”與“遇到未掌握知識時如何解決問題”的方法。

以行動導向教學模式為主導，通過本課程的學習，學生具有網頁設計和制作工作最基本的知識與技能、具備較高的職業素質，能基本勝任各公司的網頁設計師和網站管理維護等崗位工作。

參 考 文 獻

[1]林姍，劉罡.基于行動導向的課程教學模式改革.[J].計算機教育，2015，16（44-48）

[2]苗樹紅.基于學案導學的行動導向教學探究.[J].中國職業技術教育，2015，05（79-81）

[3]張利國，楊川.行動導向教學法在高職院校電類專業學生創新創業能力培養模式中的應用.[J].當代教育實踐與教學研究，2016，05（205-206）

[4]吳曉嵐.行動導向教學模式在課程教學中的應用.[J].電腦知識與技術，2015，04（117-118）[5]胡昱.基于行動導向的合作式教學法.[J].教育，2015，04（32-33）