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

吳少琴

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

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

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

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

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

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

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

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

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

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

其中第二個(gè)參數(shù)“Direction”用來(lái)設(shè)置模糊的方向，學(xué)生不容易理解?？山柚疽鈭D（形狀像圓形的時(shí)鐘）和表格來(lái)加以分析和講解。模糊效果是按照順時(shí)針?lè)较蜻M(jìn)行的，每45°為一個(gè)單位。其中0°代表垂直向上，45°代表向上偏右，90°代表水平向右，依次類推。默認(rèn)值是270°，代表水平向左。

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

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

四、水到渠成，引入新知識(shí)

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

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

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

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

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

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

七、讓“事實(shí)”來(lái)給出答案

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

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

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

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

八、理論知識(shí)用到才講

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

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

---

）。這些知識(shí)如果脫離實(shí)例來(lái)講，學(xué)生會(huì)聽(tīng)得云里霧里?？梢詫⑺鼈儩B透到實(shí)例中，予以具體化。

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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