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

鄭慧君 彭勇 周芹

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

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

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

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

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

2.1 教學(xué)背景

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

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

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

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

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

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

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

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

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

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

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

能力&10分鐘&確定主題后制定工作計(jì)劃&教師指導(dǎo)&各組學(xué)生共同討論制定工作計(jì)劃&培養(yǎng)學(xué)生制定工作計(jì)劃的能力&15分鐘&作出決策&教師指導(dǎo)&各組學(xué)生共同討論做出正確可行的決策&學(xué)生圍繞主題確定網(wǎng)頁的主色調(diào)、網(wǎng)頁布局&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ú)立的評價(jià)

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

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

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

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

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

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

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

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

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

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

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

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

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

2.4.2 工作計(jì)劃

工作計(jì)劃就是工作前的思考，要考慮所有的相關(guān)工作和步驟，考慮網(wǎng)頁所必須的主題和內(nèi)容、菜單設(shè)計(jì)、FLASH的插入、內(nèi)容部分的分欄、頁腳部分的設(shè)計(jì)，還要考慮到分工與協(xié)作，各任務(wù)的先后順序和時(shí)間的安排。學(xué)生(以小組為單位)各自寫好網(wǎng)頁設(shè)計(jì)步驟和分工，然后以組為單位進(jìn)行討論。在引導(dǎo)文教學(xué)中，沒有對與錯(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)頁總體布局的劃分，由3人共同完成，完成時(shí)間為20分鐘。

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

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

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

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

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

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

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

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

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

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

2.4.3 決策

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

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

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

2.4.4 實(shí)施

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

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

2.4.5 檢查

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

表2檢查表

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

2.4.6 評估

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

3 結(jié)束語

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

參考文獻(xiàn)：

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

[2] [德]Ernst Nausch.德國雙元制職業(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