如何让学生“乐”学网页制作
2018-01-15吴少琴
吴少琴
摘 要：本文为笔者在《Dreamweaver网页制作》这门课的一线教学中，根据技校学生的性格特点和知识背景，在教学实践中不断探索、不断改进教学方法和技巧而潜心积累总结出来的教学心得。本文主要阐述在实例教学法的基础上，如何渗透进其他各种教学技巧，促使学生“乐”学这门课，学好这门课。
关键词：技校 Dreamweaver 网页制作 教学方法 教学技巧
对于性格比较不安定、基础知识相对薄弱的技校学生，在课堂上有效地吸引他们的注意力，帮助他们克服学习上的困难，从而使他们有兴趣、有信心轻松学好这门课，是笔者一直探索的问题。下面阐述在实例教学法的基础上，如何渗透进其他各种教学技巧。
一、留下“美好”的第一印象
要重视第一次课的作用，就像一个人去应聘工作一样，应聘者留给招聘单位的第一印象是很重要的。那么，如何才能给学生留下这门课“美好”的第一印象呢？
可以选择一些趣味性高、有动感或有实用意义的实例在第一次课中演示，让学生欣赏。例如，利用“时间轴”制作的“飘落的花儿”，花儿飘落的过程就很能吸引学生的注意力。又如，在“世界地图”中制作中国区域的“热点链接”，点击 “热点”可链接到“中国地图”。依此类推，可依次链接到“广东省地图”“汕头市地图”，最后链接到本校的网站，这样，学生就有了学习兴趣。
生动的第一次课，能起到“先入为主”的效应，让学生一开始就“爱”上这门课，这将有利于今后教学的开展。
二、借助示意图，帮助学生直观理解
例如，图像使用模糊滤镜，教材对 “Fliter”属性设置如下：
blurbig {filter： Blur（Add=true， Direction=270， Strength=80）；}
其中第二个参数“Direction”用来设置模糊的方向，学生不容易理解。可借助示意图（形状像圆形的时钟）和表格来加以分析和讲解。模糊效果是按照顺时针方向进行的，每45°为一个单位。其中0°代表垂直向上，45°代表向上偏右，90°代表水平向右，依次类推。默认值是270°，代表水平向左。
三、运用比喻，使学生轻易领会
什么是锚记链接？可先显示书签的图片，再将锚记比喻为书签。什么是模板？可先显示粿模的图片，再将模板比喻为潮汕的粿模。学生看到图片时，几乎不用教师解释就能猜出锚记链接和模板是怎么回事。恰当的比喻，往往能达到事半功倍的效果。
四、水到渠成，引入新知识
在制作了一个网站的多个网页之后，如“花草园地”网站的“公司简介”网页和“产品介绍”网页，学生通过观察就会发现：这两个网页的头部、导航栏和版权区是相同的，只有主要内容区不同，存在大量的重复操作。他们必定会想：有没有什么方法可以免除这些重复的操作？这时教师就可以自然而然地引入“模板”的概念。
五、对症下药，缺啥补啥
对于英文基础普遍较差的技校学生，适当给他们讲解一些属性的英文名称是很有必要的。例如，“背景颜色”是“bgcolor”，其中的“bg”是 “background”（背景）的缩写；“活动链接”是“alink”，其中的“a”代表“active”（活动的）；“垂直翻转”是“flipv”，其中的“v”代表“vertical”（垂直的）等。
六、让学生知其所以然
例如，使用“Div+CSS”实现在网页文档内并排摆放3个Div标签，它们高度相同顶部对齐。
按照教材的步骤操作完成后，却出现第一个Div标签的右边与第二个Div标签的左边有小部分重叠。为什么会这样？这是因为系统默认的Left值为10像素，即第一个Div标签是从10像素开始，至110像素结束，而第二个Div标签的Left值用户定义为100像素，所以在第100～110像素处就出现了重叠区域（教材中并没有对此作解释）。修正的方法是在“.left的CSS规则定义”对话框的“定位”分类中，将第一个Div标签的Left值设置为“0”。
七、让“事实”来给出答案
例如，文本换行，可以通过按< Enter >键或按
< Shift + Enter>组合键来实现，那么两者的结果有区别吗？
可在第一段后面按
俗话说：“百闻不如一见”，让学生自己观察结果，远比教师给他们讲区别印象要深刻得多。
八、理论知识用到才讲
例如，HTML的标签类型，有不带属性的双标签（如
），带属性的单标签（如
）。这些知识如果脱离实例来讲，学生会听得云里雾里。可以将它们渗透到实例中，予以具体化。
以文本“欢迎光临我的博客”为例，使用“拆分”视图，在上面的“代码”窗口中每添加一对标签或一个属性，就停下来观察下面“设计”窗口中效果的变化，操作步骤如下。
第一步为设置文本为“h1”标题格式（加大、加粗）；第二步为设置文本对齐方式为“居中”（align=“center”）；第三步为设置文本字体为“华文行楷”（）；第四步为设置文本颜色为绿色（color=“#00FF66”）。
经过这样的边设置边观察效果变化，学生就能弄清楚某种效果是怎么产生的。学生经过反复使用这些标签，从陌生到熟悉，到最后能自如使用，这就是“熟读唐诗三百首，不会作诗也会吟”的道理。
九、先预览，后分析讲解
就像Word中的打印预览，在每个实例讲解之前，先让学生预览效果。这样做的好处是：让学生目标明确，清楚实例最终应达到什么样的效果。留出一定的时间让学生思考和讨论。再由教师分步显示中间效果，进行分步讲解和分步操作演示，最后由学生分步实操。要求学生将分步操作结果显示在各自的显示器上，可以相互比照，而教师只要巡查一遍，就能了解学生做得怎样。
要让学生学好《Dreamweaver网页制作》这门课，作为任課教师，一定得在备课上下足功夫。首先，精选或编制的实例必须是学生喜欢的或能引起他们注意的，他们才有兴趣学。其次，要能预见学生在学习上可能碰到的困难，设计出能为学生排忧解难的好方法、好技巧来讲解。学习障碍排除了，学生自然就有信心学。授课时以实例教学法为基础，再根据实例的具体情况灵活渗透进各种教学技巧。技巧运用得当，学生就容易领会，学得轻松。
参考文献：
[1]何福贵，张梅.Dreamweaver CS4网页设计与制作[M].北京：机械工业出版社，2010.
[2]王正成.Dreamweaver 8中文版网页制作[M].北京：人民邮电出版社，2009.
[3]祝珏.网页制作技术[M].广州：世界图书出版广东有限公司，2011.
（作者单位：汕头技师学院）
