中小型网站建设与管理教案 实作三：动态网页制作

实作三：动态网页制作
教学目标：
1、知识目标
掌握横幅广告管理器的插入方法；
掌握悬停按钮的插入方法；
掌握滚动字幕的插入方法；
2、能力目标：能自主探究动态网页的制作；
3、情感和态度：主动参与和协作学习的态度；
学会表达对他人的关爱
教学重点：
横幅广告管理器、滚动字幕、悬停按钮插入方法
教学难点：
横幅广告管理器大小、悬停按钮中的链接、滚动字幕格式
教具准备：计算机机房及教学软件
新课讲授：
师：同学们，前一阶段，我们学习了网页的相关知识，到今天为止，我们已经能够制作简单的网页。

接下来就请同学看这样一些网页。

[看作品]请大家认真观察，并提出一些合理性的建议。

生：(可以群答，得出总的结论——动感不足、不活泼)
师：那么我们怎样才能让这些网页生动活泼起来呢？
生：可以采用flash动画、gif动画、横幅广告管理器、滚动字幕、悬停按钮、动态HTML等；（注：可以采用学生到黑板上板书的形式来展开教学）
师：今天我们就一起学习在网页中插入横幅广告管理器、滚动字幕、悬停按钮的方法。

为了更好地完成今天的任务，我们相邻的同学可以结合成一个小组，每个小组只要选择其中一个组件，把该组件添加到网页中。

师：要求：
1、打开“D:/练习”站点；
2、掌握在网页插入组件的方法；
2、操作中遇到困难可以相互讨论，可以查看书本或请教老师。

[学生根据要求完成练习]
师：好，大家都已经完成自己的任务了，现在我们来看看大家是如何完成的。

[请3-4个同学在教师机上进行操作，讲解]（给第一个讲评的同学以热烈的掌声，同学演示讲解的顺序可以任意，此时要考虑到学生不能完成的情况）
<横幅广告管理器>的插入方法：
1、（建立或打开网页；）
file:///D:/DOCUME~1/hare1/LOCALS~1/Temp/msoclip1/01/clip_image001.png ">
2、依次点击“插入（I）”菜单中的“组件（O）”“横幅广告管理器（N）”命令，打开“横幅广告管理器属性”对话框，如图（屏幕）所示；
3、单击“添加”按钮，依次将zi2.jpg、zi4.jpg两幅图片添加到“显示图片”编辑框中；
4、设定宽度为380像素，高度为90像素。

（注：如果所添加的图片大小不一，那么，要确保此处输入的是所有图片中最大的一幅图片的尺寸，其余图片将在这个区域中居中对齐；如果学生没有提及，老师应在注意点中提到）
6、设定变化效果为“分解”，每幅图片的显示时间为“5秒”，再单击“确定”按钮。

注意点：（可由老师提出）
1、如果所添加的图片大小不一，那么，要确保此处输入的是所有图片中最大的一幅图片的尺寸，其余图片将在这个区域中居中对齐；
2、可以利用拖动或属性对话框的办法改变横幅广告管理器的大小使之与图片大小一致；
3、需要保存后才能看到效果。

<悬停按钮>的插入方法：
1、（建立或打开网页；）
2、依次点击“插入（I）”菜单中的“组件（O）”“悬停按钮（H）”命令，打开“悬停按钮”对话框，如图所示；
3、在“按钮文本（U）：”文本框中输入“环保组织”，单击“字体（F）”按钮，设置好字体、字号、字型和颜色后，单击“确定”按钮；
4、在“链接到（L）：”文本框中输入目标网页文件名organization.htm。

5、设置按钮颜色为蓝色，背景颜色为紫色；
6、单击“效果”右侧的向下箭头，打开下拉列表，从中选择效果“发光”，如果想在该效果起作用时，使按钮的颜色发生改变，可以打开“效果颜色”下拉列表，选择一种颜色如“绿色”；
7、设置按钮的高度和宽度，然后“确定”；
8、用同样的方法定义其余两个按钮。

注意点：（注：可由老师提出）
1、对应的链接设置要正确；
2、效果与整体保持一致；
3、需要保存后才能看到效果。

<字幕>的插入方法：
1、（建立或打开网页）；
file:///D:/DOCUME~1/hare1/LOCALS~1/Temp/msoclip1/01/clip_image005.png ">
2、依次单击“插入（I）”菜单中的“组件（O）”“字幕（M）”命令，打开“字幕属性”对话框，如图所示；
3、输入文字，设置方向、速度、表现方式和对齐方式
4、设置宽度和高度；
5、点击“样式”“格式”“字体”设置字体；
6、选择“背景颜色”，然后按确定。

也可以：把（3）改为：（注：可由老师提出）
file:///D:/DOCUME~1/hare1/LOCALS~1/Temp/msoclip1/01/clip_image007.jpg ">
先选中文字，然后依次单击“插入（I）”菜单中的“组件（O）”“字幕（M）”命令，打开“字幕属性”对话框，如图所示；
注意点：（注：可由老师提出）
1、滚动字幕字体在“样式”、“格式”、“字体”中设置；
2、滚动字幕的背景在“背景颜色”中设置；
3、滚动字幕区域的大小设置需选中宽度和高度复选框，并指定像素值或百分比。

师：很好，同学们已经学会“横幅广告管理器、滚动字幕、悬停按钮”在网页制作中的应用方法，我们就利用这些知识，来完善我们的作品。

师：大家还记得5月9日这一天是什么日子。

生：母亲节。

师：在我们的生活、学习中，还有一位时常伴随左右的人，他是谁呢？
生：爸爸（父亲）。

师：那么父亲节是什么时间？
生：6月20日（或提示）
师：为了很好地宣传即将到来的节日，我们来完善一份网站的首页。

（师生活动）
1、了解素材；
2、要求：
a、使用所学的动态网页技术，完成父亲节网站（“D:/综合实践★”或“D:/综合实践★★”或“D:/综合实践★★★”）的首页；
b、根据自己的实际选择适当的难度；
c、制作过程中相互之间可以协作、共同完成。

[学生完成作品、老师巡视辅导]
[展示、点评作品]
师：同学们的作品已经基本完成，现在就请大家起来在机房里走一走，看一看，找出你认为最好的作品。

[学生走动，欣赏作品]
师：请问大家，你们认为哪位同学的作品最好？
生：某某同学的网页最有特色，最漂亮。

（找出有代表性的发言者和有代表性的作品1~2个，然后提问学生1）
师：请问你看到哪位同学的网页最好？
生1：生2的网页最好。

师：生2的网页好在哪里呢？
生1：（……）（列举网页制作的特色）
师：很好，你非常有眼光，发现了生2同学的很多优点，谢谢！（掌声）
师：我们现在掌声有请学2，请他说说他是如何来构思、创作自己的作品的。

生2：（……）（浅谈网页制作中的想法）
师：（补充点评、肯定学生在制作中的成绩）
师：请问还有哪位同学认为自己的作品制作的也很好？（鼓励学生自我肯定）生3：（……）（老师给予肯定和鼓励，并根据实际情况点评）
师：还有哪位同学的作品还没有制作完成。

（可以根据情况点一位同学）
生4：（……）
师：请你说说你在制作中遇到了哪些困难，让大家一起来帮你解决问题。

生4：（……）
师：（补充点评）你通过你的努力，已经完成了一定的作品，同时你也了解自己的问题所在，只要做到良好的合作和加倍的努力，你一定会完成的更好。

[总体评价和小结]
师：通过大家的共同努力，我们掌握了“横幅广告管理器、滚动字幕、悬停按钮”在网页中的应用，并且能够合理的使用网页色彩美化我们的网页，使我们的网页更具特色，更能展示我们的风采。

同时，我们还能够和同学进行很好的协作，对他人提出很高的评价，或许这是我们这节课最大的收获。

当然，大家还有很多其他的收获，希望大家和我交流。

[作业]
爱，更多时候需要表达，父亲节快到了，我们不仅仅需要宣传，我们更需要表达，我希望大家以实际行动去表达我们对父亲的爱。