2022年《网页制作工具》参考教案 .pdf

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