鄭慧君 彭勇 周芹

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

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

中圖分類號(hào)：G642文獻(xiàn)標(biāo)志碼：A文章編號(hào)：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)教學(xué)法相比，引導(dǎo)文教學(xué)法充分尊重學(xué)生主體地位，借助引導(dǎo)文教學(xué)文件，引導(dǎo)學(xué)生掌握獨(dú)立學(xué)習(xí)和工作的方法，能對(duì)一些復(fù)雜的工作流程進(jìn)行策劃和操作，可以獨(dú)自制定計(jì)劃，執(zhí)行工作計(jì)劃并對(duì)成果進(jìn)行檢查。這種教學(xué)方法的實(shí)質(zhì)是，老師把原來(lái)要講的內(nèi)容用引導(dǎo)課文的形式編寫出來(lái)，讓學(xué)生學(xué)習(xí)使用，引導(dǎo)學(xué)生自行控制學(xué)習(xí)和工作。

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

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

1 相關(guān)工作

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

2 引導(dǎo)文教學(xué)法在網(wǎng)頁(yè)布局與CSS課程中的應(yīng)用

2.1 教學(xué)背景

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

2.2 課程能力目標(biāo)

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

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

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

⑶ 社會(huì)能力：進(jìn)行團(tuán)隊(duì)協(xié)作和分工的能力；具有嚴(yán)謹(jǐn)?shù)墓ぷ鲬B(tài)度，有較強(qiáng)的競(jìng)爭(zhēng)意識(shí)。

2.3 教學(xué)設(shè)計(jì)

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

表1教學(xué)過(guò)程設(shè)計(jì)

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

問(wèn)題&各組學(xué)生討論、確定主題&鍛煉學(xué)生的快速?zèng)Q策

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

能力&15分鐘&評(píng)估&教師點(diǎn)評(píng)&學(xué)生接受老師提出的意見(jiàn)&使學(xué)生總結(jié)工作過(guò)程中的不足&10分鐘&]]

2.4 教學(xué)實(shí)施

2.4.1 提出引導(dǎo)問(wèn)題

引導(dǎo)問(wèn)題包含了為解決任務(wù)所需的所有信息。它引導(dǎo)學(xué)生獨(dú)立獲取所需信息，并對(duì)整個(gè)工作過(guò)程的執(zhí)行提供幫助。本實(shí)例的引導(dǎo)問(wèn)題如下：

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

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

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

⑷ 如何通過(guò)設(shè)置UL和LI的樣式來(lái)完成滑動(dòng)門菜單的制作；

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

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

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

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

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

2.4.2 工作計(jì)劃

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

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

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

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

步驟 2.在html頁(yè)面上寫好div框架；

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

任務(wù)三：設(shè)置頂部滑動(dòng)門菜單，由2人共同完成（20分鐘）。

步驟 1. 利用UL和LI寫好頁(yè)面框架，使用超鏈接設(shè)置主菜單，寫好菜單項(xiàng)的名稱；

步驟 2. 利用CSS設(shè)置超鏈接和UL、LI的屬性，達(dá)到預(yù)期的效果。

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

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

任務(wù)六：進(jìn)行頁(yè)面底部的設(shè)置，由2人完成（20分鐘）；

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

2.4.3 決策

決策是前一步工作的延續(xù)，同樣是各由小組討論（團(tuán)隊(duì)合作）來(lái)完成，但指導(dǎo)老師會(huì)參與其中。教師與學(xué)生以談話的方式一起進(jìn)行交流討論，聽(tīng)取討論結(jié)果，幫助選擇可行的工作計(jì)劃或?qū)δ壳暗墓ぷ饔?jì)劃作出修訂或者重新制定工作計(jì)劃。因?yàn)楦鱾€(gè)學(xué)生的能力與水平會(huì)有差異，工作計(jì)劃安排要視各個(gè)學(xué)生的情況進(jìn)行調(diào)整。工作計(jì)劃中還要考慮的一個(gè)主要的問(wèn)題是如何把網(wǎng)頁(yè)設(shè)計(jì)的任務(wù)分工、合并，以及各部分任務(wù)的先后順序。

與學(xué)生的專業(yè)談話中教師要對(duì)學(xué)生比較迷惑的問(wèn)題加以引導(dǎo)，說(shuō)明問(wèn)題的難點(diǎn)。討論作為一個(gè)學(xué)習(xí)的機(jī)會(huì)，其質(zhì)量直接受到學(xué)生的熱情程度、投入程度以及參與意愿的影響，要讓每個(gè)學(xué)生都投入到項(xiàng)目的學(xué)習(xí)和實(shí)施當(dāng)中。

這一過(guò)程中，應(yīng)該要求每個(gè)人都對(duì)工作計(jì)劃提出自己的意見(jiàn)和見(jiàn)解，充分發(fā)揮每個(gè)人的作用，每個(gè)人都安排一定的任務(wù)，避免總是由“較好”的學(xué)生完成任務(wù)的情況。

2.4.4 實(shí)施

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

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

2.4.5 檢查

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

表2檢查表

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

2.4.6 評(píng)估

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

3 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

育學(xué)院譯,2006.

[3] [德]Frank Bünning 職業(yè)技術(shù)教育培訓(xùn)(TVET)中的行動(dòng)導(dǎo)向教學(xué)法

導(dǎo)論[Z].同濟(jì)大學(xué)職業(yè)技術(shù)教育學(xué)院譯,2007.

[4] 邊穎.行動(dòng)導(dǎo)向教學(xué)法在《AutoCAD輔助設(shè)計(jì)》課程改革中的應(yīng)用[J].

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

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

究,2010.2:131~132