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

鄭慧君 彭勇 周芹

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

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

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

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

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ò))中獨立獲取所需要的專業(yè)信息，獨立制定完成工作任務(wù)的計劃，從而獲得解決新的、未知問題的能力；系統(tǒng)地培養(yǎng)學(xué)生的“完整行為模式”，著重培養(yǎng)學(xué)生獨立學(xué)習和工作的能力。在教學(xué)活動中，教師將需要解決的問題或需要完成的任務(wù)以引導(dǎo)文的形式交給學(xué)生，學(xué)生在引導(dǎo)實踐過程中，理解和把握課程要求的知識和技能，體驗創(chuàng)新的艱辛與樂趣，培養(yǎng)分析問題和解決問題的能力及團隊合作能力等[2,3]。引導(dǎo)文教學(xué)法雖然未被我國推廣采用，但還是有不少的應(yīng)用案例。例如，邊穎研究了行動導(dǎo)向教學(xué)法在AutoCAD輔助設(shè)計課程改革中的應(yīng)用,按照引導(dǎo)文的方法和步驟進行了AutoCAD的課堂設(shè)計[4]；姜雪等研究了引導(dǎo)文教學(xué)法在高職創(chuàng)業(yè)教育課程中的運用[5]。

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

2.1 教學(xué)背景

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

2.2 課程能力目標

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

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

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

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

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

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

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

[[教學(xué)環(huán)節(jié)&教師活動&學(xué)生活動&設(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è)計一個完整的網(wǎng)站首頁&教師給出引導(dǎo)性

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

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

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

2.4 教學(xué)實施

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

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

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

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

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

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

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

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

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

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

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

2.4.2 工作計劃

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

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

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

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

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

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

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

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

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

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

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

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

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

2.4.3 決策

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

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

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

2.4.4 實施

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

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

2.4.5 檢查

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

表2檢查表

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

2.4.6 評估

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

3 結(jié)束語

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

參考文獻：

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

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

育學(xué)院譯,2006.

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

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

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

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

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

究,2010.2:131~132