引導文教學法在網頁布局與CSS中的應用

鄭慧君 彭勇 周芹

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

關鍵詞： 引導文； 教學法； 網頁布局； 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 引言

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

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

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

1 相關工作

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

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

2.1 教學背景

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

2.2 課程能力目標

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

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

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

⑶ 社會能力：進行團隊協作和分工的能力；具有嚴謹的工作態度，有較強的競爭意識。

2.3 教學設計

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

表1教學過程設計

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

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

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

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

2.4 教學實施

2.4.1 提出引導問題

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

⑴ 如何確定網站的主題；

⑵ 如何根據主題確定網站的主色調；

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

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

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

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

⑺ 如何統一設置整個網頁文字的屬性；

⑻ 如何設置網頁的背景顏色或背景圖片。

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

2.4.2 工作計劃

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

任務一：確定網站主題并搜索整理相關的內容；主題由討論確定，內容由1人完成（時間不限）。

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

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

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

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

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

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

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

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

任務五：網頁內容部分各欄目的內容填充和樣式設置；

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

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

2.4.3 決策

決策是前一步工作的延續，同樣是各由小組討論（團隊合作）來完成，但指導老師會參與其中。教師與學生以談話的方式一起進行交流討論，聽取討論結果，幫助選擇可行的工作計劃或對目前的工作計劃作出修訂或者重新制定工作計劃。因為各個學生的能力與水平會有差異，工作計劃安排要視各個學生的情況進行調整。工作計劃中還要考慮的一個主要的問題是如何把網頁設計的任務分工、合并，以及各部分任務的先后順序。

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

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

2.4.4 實施

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

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

2.4.5 檢查

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

表2檢查表

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

2.4.6 評估

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

3 結束語

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

參考文獻：

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

[2] [德]Ernst Nausch.德國雙元制職業技術教育[Z].同濟大學職業技術教

育學院譯,2006.

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

導論[Z].同濟大學職業技術教育學院譯,2007.

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

職業技術教育,2008.20:48~50

[5] 姜雪.引導文教學法在高職創業教育課程中的運用[J].職業教育研

究,2010.2:131~132