《网页制作工具》参考教案
东营人事-中国民航大学迎新网
名师精编 优秀教案
《网页制作工具》参考教案
教学主题
适用年级
教
概述：通过网页设计，了解并熟悉网页设计软件的基本使用方法，掌握常用工具的使用方法
材
重点：初步了解网页设计软件Dreamweaver中层和时间轴的设置，体会动态网页设
计
分
难点：层和时间轴的设置
析
学
习
目
标
所需资源和环境
网络资源
使用搜索引擎查找网页设计相关的信息（包括图片、文字、视频等）
1、浙江教育出版社2004版《信息技术基础》第五章5.3.1节配套光盘
常规资源
2、教材配套教师用书
3、小组合作学习任务单
教学支撑环境
教学设计
问题
你知道网页上面文字的滚动效果是怎么制作
教学
出来的吗？
引导
你知道如何让网页中的一幅图片动起来？
问题
你知道有哪些网页动态效果？
设计
你知道用Dreamweaver
软件如何预览你设计
体会动态网页的效果，进一步完善网页设计
的动态网页？
教学教师活动 学生活动
为学生的课后探究学习做铺垫
引导学生设计动态网页中图片运动的效果
激发学生的好奇心
目的
计算机网络教室、所有计算机能够上网、多媒体网络教室软件或者投影仪
1、掌握网页制作软件Dreamweaver的基本使用方法
2、学会设计和制作简单的动态网页
网页制作工具（1）（Frontpage和Dreamweaver的使用）
高二年级
教案设计
教学课时
赵志 教案编号
1课时
13
名师精编 优秀教案
过程
设计
1、新课导入
展示全国中小学电脑制作活动中的优秀的网页制作《母亲河》， 激发学生
制作网页的兴趣。“
工欲善其事，必先利其器”从而引出制作网页需要掌握必
要的制作工具。只有掌握了必要的网页制作工具
软件才能做出动感十足、耳目
一新、独具体色的网页。
2、教学内容
随着因特网技
术的不断发展，网页制作工具越来越多，选择一种得心应手
的工具软件，能够收到事半功倍的效果。
⑴ 设问：面对那么诱人的网页，要想学习网页制作，我们应该选择什么
样的网页制作工具，首
先同学们需要先了解有哪些软件，它们各有什么样的特
点？
布置任务：请同学们完成任务单中的第一个任务。
教师点拨：网页工具软件大体上分为两类：一种着眼于网页、网站整体规
借助我们的因特网完成任务一
各小组总结不同的网页制作工具软
件的特点、主要功能。
划使用的基本工具；另一类是着眼于网页上面的某些元素（如：漂亮的按钮、
栩栩如生的动画、逼真的三维图像），使用到的辅助工具。
通常网页设计需要考虑整体思想。先全局规划网页的思想或整体风格，然
后对局部的图像处理、颜色搭配、动画图片设置的优化工作。先大后小的思想。
本节课先来学习基本工具Frontpage和Dreamweaver。
⑵
网页设计工具Frontpage：
Frontpage是微软公司开发的一款网页设计软件，其软件
界面和文字编辑
功能与Word软件相似，熟悉Word的人很容易学会。同时提供的模板可以令
初学者很容易的制作相当美观的网页。
布置任务：
请同学们完成任务单中的第二个任务：
利用教师提供的素材（图片，文字
内容），制作一个网页。（教师提供一个已设计的简单网页）
教师评价：
⑶ 网页制作Dreamweaver
Dreamweaver是Macromedia公司的一款专业的网页设计软件，提供了很
学生回忆必修教材使用Frontpage设
计“故宫”主题网页的过程
学生小组合作完成任务二
填写“任务二”评价表格
多方便操作和使用的工具栏，如：对象工具栏、站点管理窗口、快速工具栏。
名师精编 优秀教案
并且该公司还有一系列的配套产品可用，比如图形编
辑软件Fireworks、动画
制作软件Flash。运用他特有的“行为”、“层”等功能可以容易
的生成网页的
动态效果。
下面让我们来体验Dreamweaver软件的动态网页制作
布置任务：
请同学们完成任务单中的第三个任务：
运用Dreamweaver中的层、时间轴制作动态网页——图像移动
设问1、为什么要调整“层”与“背景图像”的大小，使其等大？
设问2、时间轴上面的“关键帧”有什么特点？
设问3、操作过程中感到最难的一个环节是什么？
设问4、对自己设计的作品的评价是什么？
结尾：同学们观察到，我们设计的作品和本节课一开始展示的作品有很大的差
距，原因在于，仅
仅使用我们学习的Frontpage和Dreamweaver是不能制作出
那么美丽的网页的，我们
还需要掌握一些制作网页的辅助工具。也就是我们下
节课需要讲解的“辅助工具”
最后给同学们留下了一个课后任务。
小组合作完成任务三
并填写“任务三”评价表格
名师精编 优秀教案
网页工具学习任务单
一、借助因特网，组内成员分工查询制作网页常用到的工具软件，最后汇总完成下面的表格。
常用工具
<
br>二、打开网页制作软件FrontPage，利用老师提供的一些素材（素材放在D盘的“网页素材”文件
夹内），制作
一个网页，并保存。
评价表
评价指标
合
组长评价
作
精
神
主动合作
较为合作
能够合作
需要鼓励
4
3
2
1
4
3
2
1
主要功能（总结每个软件的主要功能）
完成人员
用Frontpage制作网页，熟练有创意
用Frontpage制作网页，比较熟练
组员评价
用Frontpage制作网页，制作成功
用Frontpage制作网页，还需多加练习
三、打开网页制作软
件Dreamweaver，利用老师提供的素材（素材位置），制作一个动态网页，并仔细观察、琢
磨
其动态效果。
步骤提示：（提醒：每一步都需要注意观察有没有多种方法实现同一个操作）
1、打开软件，新建一个“基本页”。（可参考课本具体步骤）
2、修改网页的标题为“我的第一个动态网页”；
3、插入“图层”，选择“描绘层”插入，找到并观察“层属性面板”，修改“背景图像”；
4、调整层的大小，使其与图像等大；
5、找到“时间轴”，将层拖入“时间轴”的第一帧内；
6、按住第15帧上的空心圆点，向右拖动到第60帧；
7、在30帧处右键点击，弹出菜单，选择“增加关键帧”；
名师精编
优秀教案
8、对“时间轴”上的每处“关键帧”进行设置，从而产生层的运动效果；
9、在浏览器中观看这一动态网页的效果。
<学习小窍门>：具体操作，观察课本，共同讨论
，集体研究，会者演示，伴随讲解，自己上机，再练一遍。
评价指标
合
组长评价
作
精
神
主动合作
较为合作
能够合作
需要鼓励
4
3
2
1
4
3
2
1
用Dreamweaver层的功能制作动态网页，熟练有创意
用Dreamweaver层的功能制作动态网页，比较熟练
组员评价
用Dreamweaver层的功能制作动态网页，制作成功
用Dreamweaver层的功能制作动态网页，还需多加练习
四、请同学们课
下讨论，如果要想做出漂亮的网页，还需要学习哪些方面的知识，需要掌握哪些网页制作工具？
欠缺知识
待学软件
名师精编
优秀教案
《网页制作工具》参考教案
教学主题
适用年级
教
概述：通过网页设计，了解并熟悉网页设计软件的基本使用方法，掌握常用工具的使用方法
材
重点：初步了解网页设计软件Dreamweaver中层和时间轴的设置，体会动态网页设
计
分
难点：层和时间轴的设置
析
学
习
目
标
所需资源和环境
网络资源
使用搜索引擎查找网页设计相关的信息（包括图片、文字、视频等）
1、浙江教育出版社2004版《信息技术基础》第五章5.3.1节配套光盘
常规资源
2、教材配套教师用书
3、小组合作学习任务单
教学支撑环境
教学设计
问题
你知道网页上面文字的滚动效果是怎么制作
教学
出来的吗？
引导
你知道如何让网页中的一幅图片动起来？
问题
你知道有哪些网页动态效果？
设计
你知道用Dreamweaver
软件如何预览你设计
体会动态网页的效果，进一步完善网页设计
的动态网页？
教学教师活动 学生活动
为学生的课后探究学习做铺垫
引导学生设计动态网页中图片运动的效果
激发学生的好奇心
目的
计算机网络教室、所有计算机能够上网、多媒体网络教室软件或者投影仪
1、掌握网页制作软件Dreamweaver的基本使用方法
2、学会设计和制作简单的动态网页
网页制作工具（1）（Frontpage和Dreamweaver的使用）
高二年级
教案设计
教学课时
赵志 教案编号
1课时
13
名师精编 优秀教案
过程
设计
1、新课导入
展示全国中小学电脑制作活动中的优秀的网页制作《母亲河》， 激发学生
制作网页的兴趣。“
工欲善其事，必先利其器”从而引出制作网页需要掌握必
要的制作工具。只有掌握了必要的网页制作工具
软件才能做出动感十足、耳目
一新、独具体色的网页。
2、教学内容
随着因特网技
术的不断发展，网页制作工具越来越多，选择一种得心应手
的工具软件，能够收到事半功倍的效果。
⑴ 设问：面对那么诱人的网页，要想学习网页制作，我们应该选择什么
样的网页制作工具，首
先同学们需要先了解有哪些软件，它们各有什么样的特
点？
布置任务：请同学们完成任务单中的第一个任务。
教师点拨：网页工具软件大体上分为两类：一种着眼于网页、网站整体规
借助我们的因特网完成任务一
各小组总结不同的网页制作工具软
件的特点、主要功能。
划使用的基本工具；另一类是着眼于网页上面的某些元素（如：漂亮的按钮、
栩栩如生的动画、逼真的三维图像），使用到的辅助工具。
通常网页设计需要考虑整体思想。先全局规划网页的思想或整体风格，然
后对局部的图像处理、颜色搭配、动画图片设置的优化工作。先大后小的思想。
本节课先来学习基本工具Frontpage和Dreamweaver。
⑵
网页设计工具Frontpage：
Frontpage是微软公司开发的一款网页设计软件，其软件
界面和文字编辑
功能与Word软件相似，熟悉Word的人很容易学会。同时提供的模板可以令
初学者很容易的制作相当美观的网页。
布置任务：
请同学们完成任务单中的第二个任务：
利用教师提供的素材（图片，文字
内容），制作一个网页。（教师提供一个已设计的简单网页）
教师评价：
⑶ 网页制作Dreamweaver
Dreamweaver是Macromedia公司的一款专业的网页设计软件，提供了很
学生回忆必修教材使用Frontpage设
计“故宫”主题网页的过程
学生小组合作完成任务二
填写“任务二”评价表格
多方便操作和使用的工具栏，如：对象工具栏、站点管理窗口、快速工具栏。
名师精编 优秀教案
并且该公司还有一系列的配套产品可用，比如图形编
辑软件Fireworks、动画
制作软件Flash。运用他特有的“行为”、“层”等功能可以容易
的生成网页的
动态效果。
下面让我们来体验Dreamweaver软件的动态网页制作
布置任务：
请同学们完成任务单中的第三个任务：
运用Dreamweaver中的层、时间轴制作动态网页——图像移动
设问1、为什么要调整“层”与“背景图像”的大小，使其等大？
设问2、时间轴上面的“关键帧”有什么特点？
设问3、操作过程中感到最难的一个环节是什么？
设问4、对自己设计的作品的评价是什么？
结尾：同学们观察到，我们设计的作品和本节课一开始展示的作品有很大的差
距，原因在于，仅
仅使用我们学习的Frontpage和Dreamweaver是不能制作出
那么美丽的网页的，我们
还需要掌握一些制作网页的辅助工具。也就是我们下
节课需要讲解的“辅助工具”
最后给同学们留下了一个课后任务。
小组合作完成任务三
并填写“任务三”评价表格
名师精编 优秀教案
网页工具学习任务单
一、借助因特网，组内成员分工查询制作网页常用到的工具软件，最后汇总完成下面的表格。
常用工具
<
br>二、打开网页制作软件FrontPage，利用老师提供的一些素材（素材放在D盘的“网页素材”文件
夹内），制作
一个网页，并保存。
评价表
评价指标
合
组长评价
作
精
神
主动合作
较为合作
能够合作
需要鼓励
4
3
2
1
4
3
2
1
主要功能（总结每个软件的主要功能）
完成人员
用Frontpage制作网页，熟练有创意
用Frontpage制作网页，比较熟练
组员评价
用Frontpage制作网页，制作成功
用Frontpage制作网页，还需多加练习
三、打开网页制作软
件Dreamweaver，利用老师提供的素材（素材位置），制作一个动态网页，并仔细观察、琢
磨
其动态效果。
步骤提示：（提醒：每一步都需要注意观察有没有多种方法实现同一个操作）
1、打开软件，新建一个“基本页”。（可参考课本具体步骤）
2、修改网页的标题为“我的第一个动态网页”；
3、插入“图层”，选择“描绘层”插入，找到并观察“层属性面板”，修改“背景图像”；
4、调整层的大小，使其与图像等大；
5、找到“时间轴”，将层拖入“时间轴”的第一帧内；
6、按住第15帧上的空心圆点，向右拖动到第60帧；
7、在30帧处右键点击，弹出菜单，选择“增加关键帧”；
名师精编
优秀教案
8、对“时间轴”上的每处“关键帧”进行设置，从而产生层的运动效果；
9、在浏览器中观看这一动态网页的效果。
<学习小窍门>：具体操作，观察课本，共同讨论
，集体研究，会者演示，伴随讲解，自己上机，再练一遍。
评价指标
合
组长评价
作
精
神
主动合作
较为合作
能够合作
需要鼓励
4
3
2
1
4
3
2
1
用Dreamweaver层的功能制作动态网页，熟练有创意
用Dreamweaver层的功能制作动态网页，比较熟练
组员评价
用Dreamweaver层的功能制作动态网页，制作成功
用Dreamweaver层的功能制作动态网页，还需多加练习
四、请同学们课
下讨论，如果要想做出漂亮的网页，还需要学习哪些方面的知识，需要掌握哪些网页制作工具？
欠缺知识
待学软件