如何讓學(xué)生“樂”學(xué)網(wǎng)頁制作

吳少琴

摘 要：本文為筆者在《Dreamweaver網(wǎng)頁制作》這門課的一線教學(xué)中，根據(jù)技校學(xué)生的性格特點和知識背景，在教學(xué)實踐中不斷探索、不斷改進(jìn)教學(xué)方法和技巧而潛心積累總結(jié)出來的教學(xué)心得。本文主要闡述在實例教學(xué)法的基礎(chǔ)上，如何滲透進(jìn)其他各種教學(xué)技巧，促使學(xué)生“樂”學(xué)這門課，學(xué)好這門課。

關(guān)鍵詞：技校 Dreamweaver 網(wǎng)頁制作 教學(xué)方法 教學(xué)技巧

對于性格比較不安定、基礎(chǔ)知識相對薄弱的技校學(xué)生，在課堂上有效地吸引他們的注意力，幫助他們克服學(xué)習(xí)上的困難，從而使他們有興趣、有信心輕松學(xué)好這門課，是筆者一直探索的問題。下面闡述在實例教學(xué)法的基礎(chǔ)上，如何滲透進(jìn)其他各種教學(xué)技巧。

一、留下“美好”的第一印象

要重視第一次課的作用，就像一個人去應(yīng)聘工作一樣，應(yīng)聘者留給招聘單位的第一印象是很重要的。那么，如何才能給學(xué)生留下這門課“美好”的第一印象呢？

可以選擇一些趣味性高、有動感或有實用意義的實例在第一次課中演示，讓學(xué)生欣賞。例如，利用“時間軸”制作的“飄落的花兒”，花兒飄落的過程就很能吸引學(xué)生的注意力。又如，在“世界地圖”中制作中國區(qū)域的“熱點鏈接”，點擊 “熱點”可鏈接到“中國地圖”。依此類推，可依次鏈接到“廣東省地圖”“汕頭市地圖”，最后鏈接到本校的網(wǎng)站，這樣，學(xué)生就有了學(xué)習(xí)興趣。

生動的第一次課，能起到“先入為主”的效應(yīng)，讓學(xué)生一開始就“愛”上這門課，這將有利于今后教學(xué)的開展。

二、借助示意圖，幫助學(xué)生直觀理解

例如，圖像使用模糊濾鏡，教材對 “Fliter”屬性設(shè)置如下：

blurbig {filter： Blur（Add=true， Direction=270， Strength=80）；}

其中第二個參數(shù)“Direction”用來設(shè)置模糊的方向，學(xué)生不容易理解。可借助示意圖（形狀像圓形的時鐘）和表格來加以分析和講解。模糊效果是按照順時針方向進(jìn)行的，每45°為一個單位。其中0°代表垂直向上，45°代表向上偏右，90°代表水平向右，依次類推。默認(rèn)值是270°，代表水平向左。

三、運(yùn)用比喻，使學(xué)生輕易領(lǐng)會

什么是錨記鏈接？可先顯示書簽的圖片，再將錨記比喻為書簽。什么是模板？可先顯示粿模的圖片，再將模板比喻為潮汕的粿模。學(xué)生看到圖片時，幾乎不用教師解釋就能猜出錨記鏈接和模板是怎么回事。恰當(dāng)?shù)谋扔鳎苓_(dá)到事半功倍的效果。

四、水到渠成，引入新知識

在制作了一個網(wǎng)站的多個網(wǎng)頁之后，如“花草園地”網(wǎng)站的“公司簡介”網(wǎng)頁和“產(chǎn)品介紹”網(wǎng)頁，學(xué)生通過觀察就會發(fā)現(xiàn)：這兩個網(wǎng)頁的頭部、導(dǎo)航欄和版權(quán)區(qū)是相同的，只有主要內(nèi)容區(qū)不同，存在大量的重復(fù)操作。他們必定會想：有沒有什么方法可以免除這些重復(fù)的操作？這時教師就可以自然而然地引入“模板”的概念。

五、對癥下藥，缺啥補(bǔ)啥

對于英文基礎(chǔ)普遍較差的技校學(xué)生，適當(dāng)給他們講解一些屬性的英文名稱是很有必要的。例如，“背景顏色”是“bgcolor”，其中的“bg”是 “background”（背景）的縮寫；“活動鏈接”是“alink”，其中的“a”代表“active”（活動的）；“垂直翻轉(zhuǎn)”是“flipv”，其中的“v”代表“vertical”（垂直的）等。

六、讓學(xué)生知其所以然

例如，使用“Div+CSS”實現(xiàn)在網(wǎng)頁文檔內(nèi)并排擺放3個Div標(biāo)簽，它們高度相同頂部對齊。

按照教材的步驟操作完成后，卻出現(xiàn)第一個Div標(biāo)簽的右邊與第二個Div標(biāo)簽的左邊有小部分重疊。為什么會這樣？這是因為系統(tǒng)默認(rèn)的Left值為10像素，即第一個Div標(biāo)簽是從10像素開始，至110像素結(jié)束，而第二個Div標(biāo)簽的Left值用戶定義為100像素，所以在第100～110像素處就出現(xiàn)了重疊區(qū)域（教材中并沒有對此作解釋）。修正的方法是在“.left的CSS規(guī)則定義”對話框的“定位”分類中，將第一個Div標(biāo)簽的Left值設(shè)置為“0”。

七、讓“事實”來給出答案

例如，文本換行，可以通過按< Enter >鍵或按

< Shift + Enter>組合鍵來實現(xiàn)，那么兩者的結(jié)果有區(qū)別嗎？

可在第一段后面按組合鍵，在第二段后面按< Enter>鍵，然后按鍵。結(jié)果一目了然：按組合鍵換行的行距較小（第一段與第二段之間），按< Enter >鍵換行的行距較大（第二段與第三段之間）。

俗話說：“百聞不如一見”，讓學(xué)生自己觀察結(jié)果，遠(yuǎn)比教師給他們講區(qū)別印象要深刻得多。

八、理論知識用到才講

例如，HTML的標(biāo)簽類型，有不帶屬性的雙標(biāo)簽（如），帶屬性的雙標(biāo)簽（如光陰的故事> ）；不帶屬性的單標(biāo)簽（如

），帶屬性的單標(biāo)簽（如

以文本“歡迎光臨我的博客”為例，使用“拆分”視圖，在上面的“代碼”窗口中每添加一對標(biāo)簽或一個屬性，就停下來觀察下面“設(shè)計”窗口中效果的變化，操作步驟如下。

第一步為設(shè)置文本為“h1”標(biāo)題格式（加大、加粗）；第二步為設(shè)置文本對齊方式為“居中”（align=“center”）；第三步為設(shè)置文本字體為“華文行楷”（）；第四步為設(shè)置文本顏色為綠色（color=“#00FF66”）。

經(jīng)過這樣的邊設(shè)置邊觀察效果變化，學(xué)生就能弄清楚某種效果是怎么產(chǎn)生的。學(xué)生經(jīng)過反復(fù)使用這些標(biāo)簽，從陌生到熟悉，到最后能自如使用，這就是“熟讀唐詩三百首，不會作詩也會吟”的道理。

九、先預(yù)覽，后分析講解

就像Word中的打印預(yù)覽，在每個實例講解之前，先讓學(xué)生預(yù)覽效果。這樣做的好處是：讓學(xué)生目標(biāo)明確，清楚實例最終應(yīng)達(dá)到什么樣的效果。留出一定的時間讓學(xué)生思考和討論。再由教師分步顯示中間效果，進(jìn)行分步講解和分步操作演示，最后由學(xué)生分步實操。要求學(xué)生將分步操作結(jié)果顯示在各自的顯示器上，可以相互比照，而教師只要巡查一遍，就能了解學(xué)生做得怎樣。

要讓學(xué)生學(xué)好《Dreamweaver網(wǎng)頁制作》這門課，作為任課教師，一定得在備課上下足功夫。首先，精選或編制的實例必須是學(xué)生喜歡的或能引起他們注意的，他們才有興趣學(xué)。其次，要能預(yù)見學(xué)生在學(xué)習(xí)上可能碰到的困難，設(shè)計出能為學(xué)生排憂解難的好方法、好技巧來講解。學(xué)習(xí)障礙排除了，學(xué)生自然就有信心學(xué)。授課時以實例教學(xué)法為基礎(chǔ)，再根據(jù)實例的具體情況靈活滲透進(jìn)各種教學(xué)技巧。技巧運(yùn)用得當(dāng)，學(xué)生就容易領(lǐng)會，學(xué)得輕松。

參考文獻(xiàn)：

[1]何福貴，張梅.Dreamweaver CS4網(wǎng)頁設(shè)計與制作[M].北京：機(jī)械工業(yè)出版社，2010.

[2]王正成.Dreamweaver 8中文版網(wǎng)頁制作[M].北京：人民郵電出版社，2009.

[3]祝玨.網(wǎng)頁制作技術(shù)[M].廣州：世界圖書出版廣東有限公司，2011.

（作者單位：汕頭技師學(xué)院）