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

陳俊斌

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

【關鍵字】 行動導向課程設計網(wǎng)頁

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

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

二、了解工作崗位，制定課程的培養(yǎng)目標

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

2.1知識目標

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

（1）了解網(wǎng)站開發(fā)的工作過程；

（2）掌握網(wǎng)站地圖及網(wǎng)頁結構相關知識；

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

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

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

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

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

2.2能力目標

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

（1）能夠設計網(wǎng)站地圖及網(wǎng)頁結構；

（2）能夠通過HTML、CSS及JS等代碼實現(xiàn)網(wǎng)頁。

2.3情感目標

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

（1）培養(yǎng)學生獨立進行系統(tǒng)分析、設計、實施、評估的能力；

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

（3）培養(yǎng)學生自學能力、理解能力與表達能力；

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

（5）培養(yǎng)學生計劃組織能力和團隊協(xié)作能力；

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

三、傳統(tǒng)講授與行動導向相結合的教學模式

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

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

（1）網(wǎng)站及網(wǎng)頁概述與開發(fā)步驟；

（2）網(wǎng)站地圖及網(wǎng)頁結構；

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

（4）Javascript、JQuery基礎。

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

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

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

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

四、細心地設計各小案例

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

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

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

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

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

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

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

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

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

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

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

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

①有哪些功能尚未實現(xiàn)？應該怎么辦？

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

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

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

…

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

（4）采用兩種難度的任務習題，在較難的習題中，要求學生先用前期學習的列表標簽及浮動屬性制作靜態(tài)導航條，并在適當?shù)牡胤郊尤搿埃篽over選擇器”與“display屬性”就可完成本堂課任務，在較易的習題中，已經將列表標簽及浮動屬性的代碼編寫好，只需在適當?shù)牡胤郊尤搿埃篽over選擇器”與“display屬性”就可完成本堂課任務。學生可根據(jù)自身的情況選擇用何種難度完成本次任務

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

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

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

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

參 考 文 獻

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

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

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

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