鄭慧君 彭勇 周芹

摘要： 引導文教學法是德國職業(yè)教育和培訓廣為采用的一種教學方法，強調(diào)培養(yǎng)學生獨立學習、工作計劃制作、實施和評估的能力。作為教學改革的探索，在網(wǎng)頁布局與CSS專業(yè)課中采用了引導文教學法，按照引導文教學法的6個步驟進行教學設計。實踐表明，教學效果良好。

關(guān)鍵詞： 引導文； 教學法； 網(wǎng)頁布局； CSS

中圖分類號：G642文獻標志碼：A文章編號：1006-8228（2012）03-48-03

Application of guidance teaching method in courses of webpage layout and CSS

Zheng Huijun, Peng Yong, Zhou Qin

（Department of Computer Engineering, Dongguan Professional Training College, Dongguan， Guangdong 523808， China）

Abstract： Guidance teaching method is a widely used teaching method in German professional training schools, because it emphasizes developing students' independent learning, planning, implementation and evaluation ability. The authors apply this method to webpage layout and CSS course, and introduce six steps of guidance teaching method for teaching design in this paper. It achieves good teaching effects.

Key words： guidance teaching； teaching method； webpage layout； CSS

0 引言

與傳統(tǒng)教學法相比，引導文教學法充分尊重學生主體地位，借助引導文教學文件，引導學生掌握獨立學習和工作的方法，能對一些復雜的工作流程進行策劃和操作，可以獨自制定計劃，執(zhí)行工作計劃并對成果進行檢查。這種教學方法的實質(zhì)是，老師把原來要講的內(nèi)容用引導課文的形式編寫出來，讓學生學習使用，引導學生自行控制學習和工作。

引導文教學法是一種以學生為主體、教師為主導，以學生自學為主的教學方法， 通過“引導問題、制定計劃、決策、實施計劃、檢查成果、評估”等六個步驟實施教學活動，有利于培養(yǎng)和提高學生的自學能力、分析問題和解決問題的能力，以及對環(huán)境變化的心理承受能力[1]。

CSS作為高等職業(yè)院校計算機專業(yè)的一門基礎課程，在網(wǎng)頁設計中起著至關(guān)重要的作用。本文把引導文教學法運用在網(wǎng)頁布局與CSS的教學中，按照引導文法的實施步驟、教學過程、注意事項進行了教學設計。將工學結(jié)合的教育理念和引導文教學方法引入到該課程改革中, 有利于實現(xiàn)該課程的人才培養(yǎng)目標。

1 相關(guān)工作

引導文教學法是國外采用的教學方法，尤其是在德國職教領(lǐng)域廣泛采用的一種教學法。80年代它與“雙軌制”一同引入，但在我國未被推廣使用。引導文教學法主要的內(nèi)容是：在教學中，讓學生從大量技術(shù)材料(如專業(yè)手冊、軟件的幫助文檔、相關(guān)專業(yè)書籍以及網(wǎng)絡)中獨立獲取所需要的專業(yè)信息，獨立制定完成工作任務的計劃，從而獲得解決新的、未知問題的能力；系統(tǒng)地培養(yǎng)學生的“完整行為模式”，著重培養(yǎng)學生獨立學習和工作的能力。在教學活動中，教師將需要解決的問題或需要完成的任務以引導文的形式交給學生，學生在引導實踐過程中，理解和把握課程要求的知識和技能，體驗創(chuàng)新的艱辛與樂趣，培養(yǎng)分析問題和解決問題的能力及團隊合作能力等[2,3]。引導文教學法雖然未被我國推廣采用，但還是有不少的應用案例。例如，邊穎研究了行動導向教學法在AutoCAD輔助設計課程改革中的應用,按照引導文的方法和步驟進行了AutoCAD的課堂設計[4]；姜雪等研究了引導文教學法在高職創(chuàng)業(yè)教育課程中的運用[5]。

2 引導文教學法在網(wǎng)頁布局與CSS課程中的應用

2.1 教學背景

網(wǎng)頁布局是計算機專業(yè)的一門基礎課程，主要內(nèi)容是控制靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)站的顯示，美化網(wǎng)頁，減少冗余代碼，使網(wǎng)站整體風格一致。學生學習該課程應該有一定的HTML基礎和實際操作能力。之所以在該課程中運用引導文教學法進行教學，旨在使學生利用已學的知識來解決問題，培養(yǎng)其借助媒介獨立自主地獲取信息的能力和自學能力，培養(yǎng)其創(chuàng)新思維能力。因為網(wǎng)頁的設計和美化千變?nèi)f化，不能總是按照一種規(guī)定的方式進行網(wǎng)頁布局。

2.2 課程能力目標

我們對學生畢業(yè)后從事的UI設計師或網(wǎng)頁設計師這一職業(yè)所需要的能力進行了能力目標分析，確定了本課程的能力目標。

⑴ 專業(yè)能力：熟悉最新的CSS版本的基本語法結(jié)構(gòu)；掌握樣式表的幾種寫法；熟練準確掌握和運用CS中的基本屬性；熟練地利用CSS樣式設計表格的樣式；熟練地使用DIV+CSS進行網(wǎng)頁布局，弄清相對定位和絕對定位的區(qū)別；能夠熟練利用CSS制作豐富多樣的菜單。

⑵ 方法能力：在教師教授的基礎上，進行自主學習，學習新技術(shù)，新規(guī)范，新標準的能力；具有敏銳的觀察能力和設計能力；將基礎知識進行融會貫通、舉一反三、發(fā)散思維和創(chuàng)新設計的能力；能夠根據(jù)需求制定完整的實施計劃；對完成的項目進行演講、展示、分析、評估和總結(jié)的能力。

⑶ 社會能力：進行團隊協(xié)作和分工的能力；具有嚴謹?shù)墓ぷ鲬B(tài)度，有較強的競爭意識。

2.3 教學設計

作為現(xiàn)代職業(yè)教育教學的一種方法，引導文是專門的教學文件，借助引導文，教師可就一項實際工作或來自工程實踐的與教學內(nèi)容密切相關(guān)的技術(shù)問題，指導學生的自學過程。以下是網(wǎng)頁布局與CSS教學中的一個應用實例，教學主題為學生利用給定素材自選主題進行網(wǎng)頁的布局。我們按照四節(jié)課的時間進行教學過程設計，過程如表1所示。

表1教學過程設計

[[教學環(huán)節(jié)&教師活動&學生活動&設計意圖&時間&引言&教師講解&學生聽講、討論&引出課堂主題&5分鐘&網(wǎng)頁的一般布局結(jié)構(gòu)&教師提問并總結(jié)&學生合作回答問題&讓學生了解網(wǎng)頁的一般結(jié)構(gòu)&5分鐘&網(wǎng)頁布局中內(nèi)容部分的布局&教師提問并總結(jié)&學生合作回答問題&讓學生了解網(wǎng)頁內(nèi)容部分的分欄方法&4分鐘&講解課程所給素材和課堂任務&教師講解&學生聽講、討論&讓學生弄清楚課堂任務&6分鐘&引導性問題：根據(jù)某一主題設計一個完整的網(wǎng)站首頁&教師給出引導性

問題&各組學生討論、確定主題&鍛煉學生的快速決策

能力&10分鐘&確定主題后制定工作計劃&教師指導&各組學生共同討論制定工作計劃&培養(yǎng)學生制定工作計劃的能力&15分鐘&作出決策&教師指導&各組學生共同討論做出正確可行的決策&學生圍繞主題確定網(wǎng)頁的主色調(diào)、網(wǎng)頁布局&10分鐘&實施&教師指導&各組學生分工協(xié)作完成工作計劃內(nèi)容&鍛煉學生的查找信息的能力和設計能力&100分鐘&檢查&教師講解檢查標準&各組學生按照標準互進行交叉檢查&鍛煉學生獨立的評價

能力&15分鐘&評估&教師點評&學生接受老師提出的意見&使學生總結(jié)工作過程中的不足&10分鐘&]]

2.4 教學實施

2.4.1 提出引導問題

引導問題包含了為解決任務所需的所有信息。它引導學生獨立獲取所需信息，并對整個工作過程的執(zhí)行提供幫助。本實例的引導問題如下：

⑴ 如何確定網(wǎng)站的主題；

⑵ 如何根據(jù)主題確定網(wǎng)站的主色調(diào)；

⑶ 如何進行網(wǎng)站布局的劃分并利用DIV+CSS進行網(wǎng)頁布局；

⑷ 如何通過設置UL和LI的樣式來完成滑動門菜單的制作；

⑸ 如何設置網(wǎng)頁超鏈接的屬性和鼠標移上的效果；

⑹ 如何在頁面中插入FLASH，（這在前面的知識點講解中沒有提到，需要學生自己考慮，自己去查閱相關(guān)參考資料來完成）；

⑺ 如何統(tǒng)一設置整個網(wǎng)頁文字的屬性；

⑻ 如何設置網(wǎng)頁的背景顏色或背景圖片。

設計引導問題要注意的是不要設計簡單的是非性問題，即回答“是”或“不是”的問題；不要設計過于簡單的問題；對于設計出來的問題學生必須借助于之前所學知識的綜合運用或者通過網(wǎng)絡查詢才能解答；設計的問題應該針對相應的工作步驟，同時注意，問題不要過于空泛或者容易產(chǎn)生歧義；不要設計過于復雜或綜合性太強的問題；在要避免問題中出現(xiàn)不容易理解的措辭，引導問題要符合學生的知識理解水平，太過復雜的問題會做學生在規(guī)定的時間內(nèi)無法完成；設計的問題要包含學生所學知識，并在這個基礎上進行加深；引導問題應該引導學生解決實際問題，學生通過解決引導問題來逐步完成教學安排的任務；不要設計跟完成相應工作步驟無關(guān)的，或者關(guān)聯(lián)很少的問題。

2.4.2 工作計劃

工作計劃就是工作前的思考，要考慮所有的相關(guān)工作和步驟，考慮網(wǎng)頁所必須的主題和內(nèi)容、菜單設計、FLASH的插入、內(nèi)容部分的分欄、頁腳部分的設計，還要考慮到分工與協(xié)作，各任務的先后順序和時間的安排。學生(以小組為單位)各自寫好網(wǎng)頁設計步驟和分工，然后以組為單位進行討論。在引導文教學中，沒有對與錯，只有合適與不合適，這樣，可大大提高同學們的團隊合作能力和發(fā)言的積極性。下面是學生自己寫的工作計劃樣本。

任務一：確定網(wǎng)站主題并搜索整理相關(guān)的內(nèi)容；主題由討論確定，內(nèi)容由1人完成（時間不限）。

任務二：利用DIV+CSS進行網(wǎng)頁總體布局的劃分，由3人共同完成，完成時間為20分鐘。

步驟 1.設計好網(wǎng)頁的布局模式，計算好個模塊的寬帶和高度以及各模塊間的間距；

步驟 2.在html頁面上寫好div框架；

步驟 3.利用CSS設置每個div的寬度、高度和背景圖片等屬性。

任務三：設置頂部滑動門菜單，由2人共同完成（20分鐘）。

步驟 1. 利用UL和LI寫好頁面框架，使用超鏈接設置主菜單，寫好菜單項的名稱；

步驟 2. 利用CSS設置超鏈接和UL、LI的屬性，達到預期的效果。

任務四：插入FLASH，網(wǎng)上查詢插入FLASH的方法，由1人完成（10分鐘）；

任務五：網(wǎng)頁內(nèi)容部分各欄目的內(nèi)容填充和樣式設置；

任務六：進行頁面底部的設置，由2人完成（20分鐘）；

任務七：網(wǎng)頁各部分的合并，由2人共同完成（20分鐘）。

2.4.3 決策

決策是前一步工作的延續(xù)，同樣是各由小組討論（團隊合作）來完成，但指導老師會參與其中。教師與學生以談話的方式一起進行交流討論，聽取討論結(jié)果，幫助選擇可行的工作計劃或?qū)δ壳暗墓ぷ饔媱澴鞒鲂抻喕蛘咧匦轮贫üぷ饔媱潯Ｒ驗楦鱾€學生的能力與水平會有差異，工作計劃安排要視各個學生的情況進行調(diào)整。工作計劃中還要考慮的一個主要的問題是如何把網(wǎng)頁設計的任務分工、合并，以及各部分任務的先后順序。

與學生的專業(yè)談話中教師要對學生比較迷惑的問題加以引導，說明問題的難點。討論作為一個學習的機會，其質(zhì)量直接受到學生的熱情程度、投入程度以及參與意愿的影響，要讓每個學生都投入到項目的學習和實施當中。

這一過程中，應該要求每個人都對工作計劃提出自己的意見和見解，充分發(fā)揮每個人的作用，每個人都安排一定的任務，避免總是由“較好”的學生完成任務的情況。

2.4.4 實施

計劃的實施由學生按照工作計劃進行分工協(xié)作的方式進行。整個實施階段，教師不參與具體的實施過程，教師的作用是監(jiān)督，適時地給學生指出工作中的錯誤，對遇到的困難給予幫助。如果遇到新的技能問題，指導教師可另外提供幫助，但不一定采用授課形式。如FLASH的插入、網(wǎng)頁的布局，學生先說出應怎樣設置，指導教師作出糾正和補充，然后演示給學生看。教師指出學生的錯誤，而不是馬上就給出答案，答案應由小組成員共同尋找。當學生的實施發(fā)生嚴重錯誤時，指導教師就必須立即制止。

計劃實施過程中可以檢驗方案的可行性。小組成員選擇的方案可能在實施時遇到了問題(計劃和實際操作的差距)學生將會相互對比，并發(fā)現(xiàn)問題，從而修正、完善計劃，最終得出較為理想的實施計劃。通過切身體會、結(jié)合實際思考得出的結(jié)論，比老師課堂傳授更容易被掌握和應用。

2.4.5 檢查

實施過程中的每個步驟都會檢查表，如表2所示，學生能在表中了解到為了實現(xiàn)學習目標，要付出什么努力。在計劃實施過程中不斷進行檢查和優(yōu)化，可以達到最佳效果。一般情況下，檢查過程是，首先由學生自己檢查他們所完成的作品，然后由教師（或者其他學生）檢查。各組之間也可以交換檢查，這也是他們學習、交流經(jīng)驗和心得的機會。

表2檢查表

[[序號&步驟&檢查項目&學生評估&教師評估&1&1&網(wǎng)頁內(nèi)容（10%）&&&2&2&網(wǎng)頁布局劃分，網(wǎng)頁整體顏色搭配（20%）&&&3&3&頂部滑動門導航菜單設計（20%）&&&4&4&頁面內(nèi)容部分左邊和右邊的設置（40%）&&&5&5&頁腳的設置（10%）&&&]]

2.4.6 評估

最后由教師點評，并與學生一起討論、總結(jié)，并評出名次，對設計好的小組給出獎勵，對設計相對差的給予鼓勵，鼓勵學生不斷探索創(chuàng)造。教師的評價不是單純給出成績，很大程度上是解決出現(xiàn)的問題，提出后繼學習中應該注意的問題；評估也是經(jīng)驗的交流評估的另外一個重要內(nèi)容是，根據(jù)檢查表對學生的網(wǎng)站首頁設計進行質(zhì)量評價。

3 結(jié)束語

總之，引入引導文教學法，不僅能教給學生專業(yè)知識和技能，更能培養(yǎng)他們的專業(yè)能力、方法能力和社會能力。引導文法是培養(yǎng)學生“關(guān)鍵能力”的一種卓有成效的方法。實踐表明，將它應用到網(wǎng)頁布局與CSS教學中，激發(fā)了學生的學習興趣，提高了教學質(zhì)量。

參考文獻：

[1] 姜大源.職業(yè)教育學研究新論[M].教育科學出版社,2007.

[2] [德]Ernst Nausch.德國雙元制職業(yè)技術(shù)教育[Z].同濟大學職業(yè)技術(shù)教

育學院譯,2006.

[3] [德]Frank Bünning 職業(yè)技術(shù)教育培訓(TVET)中的行動導向教學法

導論[Z].同濟大學職業(yè)技術(shù)教育學院譯,2007.

[4] 邊穎.行動導向教學法在《AutoCAD輔助設計》課程改革中的應用[J].

職業(yè)技術(shù)教育,2008.20:48~50

[5] 姜雪.引導文教學法在高職創(chuàng)業(yè)教育課程中的運用[J].職業(yè)教育研

究,2010.2:131~132