动态网页教学设计

动态网页教学设计《动态HTML的制作》一、教学内容分析本节课要求学生认识动态HTML，掌握简单的网页动态效果。对于动态HTML效果方法的掌握，本节课选取了横幅广告管理器、悬停按钮、滚动字幕以及DHTML效果四种效果，对于学有余力的学生，可以通过资源网站进一步深入学习。l

教学重点掌握实现简单的动态HTML效果的方法；l

教学难点知道根据需要适当加入动态HTML效果的方法；l

课时安排1课时二、教学对象分析通过前阶段的学习，学生掌握了静态网页的制作方法，并运用Dreamwaver8制作了以“校园生活”为主题的专题网站。学生对Dreamwaver8网页制作工具比较熟悉，他们已经掌握了在Dreamwaver8中输入文字、插入图片、表格等操作，为本节课的学习奠定一定基础。他们对在因特网看到的网页动态效果非常感兴趣，希望把他们运用到自己制作的网页中，使自己的网页更具有个性，他们对本节内容的学习很感兴趣。动态网页教学设计全文共9页，当前为第1页。三、教学目标分析动态网页教学设计全文共9页，当前为第1页。三维目标分解知识与技能1、知道动态HTML的概念2、掌握实现简单的动态HTML效果的方法：滚动字幕和页面浮动广告制作方法过程与方法

1、通过在学案的学习培养自主学习的能力。2、通过师生交流和点评，掌握网页制作的方法，提高网页加工与制作的水平。3、通过作品点评，知道根据需要适当加入动态HTML效果的方法。情感态度与价值观1、学会欣赏和评价他人作品，客观表达观点。2、通过评价他人的作品培养正确的审美观。四、教学策略1、以“任务驱动式”为主要教学组织方式教师通过任务把各教学目标和内容有机地结合在一起，使学生置身于提出问题、思考问题、解决问题的动态学习过程中。学生完成任务的同时，也完成了需要达到的学习目标的学习。在设置任务时，教师应体现分层次，并给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学。2、开展以教师为主导，学生为主体的自主探究学习模式本节课教师应给学生留有足够的思维空间，不需面面俱到。学生已经掌握了在Dreamwaver8中输入文字、插入图片、表格等操作，对Dreamwaver8网页制作工具比较熟悉。因此，本节课，教师可以在提出具体学习任务情况下，引导学生不断发现问题，解决问题。学生通过在线资源网站对学习任务进行探索、分析、研究，在实践操作中培养创新精神和创造能力。对于一部分同学习惯于依赖老师与教材进行学习的学生，教师应加强指导和引导。3、通过评价来促进学生的学习。为了提高学生网页制作水平和审美能力，本节课师生共同对小组推荐的优秀作品评价和分析，表扬优秀作品，指出其特点，提高学生的学习兴趣，通过评价来促进学生的学习。动态网页教学设计全文共9页，当前为第2页。五、教学媒体选择动态网页教学设计全文共9页，当前为第2页。1、多媒体网络电脑室；2、多媒体网络教学软件系统；3、web服务器（支持ASP）；4、《信息技术课程网络评价系统》；动态网页教学设计全文共9页，当前为第3页。六、教学过程动态网页教学设计全文共9页，当前为第3页。教学环节教师活动学生活动设计意图

引入

在前几节课中我们学习了如何建立站点，并在站点中围绕“班级生活”为主题制作了主题网站，建立几个网页。在网页中我们插入了相关图片，进行了排版，建立了超链接，网页表格等内容。但我们还是感觉自己制作的网站与平时我们在因特网中浏览的网页还是有区别，感觉不够生动。请同学们欣赏这个网页，你们发现这个网页和我们以前学习制作的网页有什么不同？

教师展示一个动态网页。如何制作动态网页呢？这就是我们今天要学习的内容。欣赏自己同学制作的网页作品。

思考回答：网页中有很多动态效果，有了这些效果，整个网页显得生动和活泼。激发学生学习兴趣，初步认识动态网页。动态HTML提问：网页中有什么动态效果，你们可以找出来吗？教师归纳学生的回答情况，提出动态HTML的概念：即使在脱离网络环境的情况下，网页下载到浏览器以后仍能够随时变换更新的HTML。动态HTML应用程序大多数都在客户端浏览器上进行，也可在需要时向服务器发出请求。如何制作动态HTML呢？实现动态效果有三种方法：组件、DHTML工具和插入HTML语句，前二种方法操作都比较容易和直观，我们这节课主要利用前两种方法掌握动态HTML的方法。学生思考回答：移动的文本、变化的图片通过例子加深学生对动态HTML的了解。动态网页教学设计全文共9页，当前为第4页。页面浮动广告效果制作动态网页教学设计全文共9页，当前为第4页。【讲解演示学习内容】有意引导学生观察网页中利用横幅广告管理器制作的广告。同学们在浏览网页时经常会看到网页中加入了像老师所演示的起到广告效果的图片，这些图片不断变化，还加入了超链接。一般来说这些图片并不是一段动画，而是由“横幅广告管理器”管理的多幅图片组成的。请大家打开学习学案，在这里你可以仔细阅览学习任务一及其制作过程。【巡视辅导】教师巡回指导并观察，发现学生制作中存在的问题。问题1：图片没有显示完全，为什么？问题2：如何使图片切换的速度变快？【学生任务一】为你的班级生活主题网站中的主页制作一个页面浮动广告。打开学案，浏览页面浮动广告的制作过程,并打Dreamweaver制作。

尝试探究问题1，并提出解决方法：页面浮动广告的大小与图片大小一致，导致图片没有显示完全。解决方法：通过属性对话框，修改宽度和高度。尝试探究问题2，解决办法：通过横幅广告器的属性对话框，修改每幅图片显示（秒）变小。通过学案，学生可以自主探索掌握横幅广告管理器效果制作方法。教师不断引导学生不断发现问题，解决问题，并在实践中得到提高。动态网页教学设计全文共9页，当前为第5页。悬停按钮动态网页教学设计全文共9页，当前为第5页。【讲解演示学习内容】有意引导学生观察网页中制作的悬停按钮。所谓悬停按钮，是指当鼠标指针指向某按钮时，该按钮改变颜色和形状，甚至发出声音。

请大家打开学习资源网站，在这里你可以仔细阅览学习任务二及其制作过程。【巡视辅导】教师巡回指导并观察，发现学生制作中存在的问题。问题3：如何设置当点击悬停按钮时链接到网页？【学生任务二】为你的校园生活主题网站中的主页制作悬停按钮。打开学习学案，浏览悬停按钮的制作过程，并利用Dreamweaver制作。

尝试探究问题3，解决办法：在按钮属性的链接到栏内设置相应链接的网址。滚动字幕【讲解演示学习内容】有意引导学生观察网页中制作的滚动字幕。在页面中创建水平滚动的文字幕，可以使静止的页面活动起来。

请大家打开学习资源网站，在这里你可以仔细阅览学习任务三及其制作过程。【巡视辅导】教师巡回指导并观察，发现学生制作中存在的问题。问题4：应该在哪里插入字幕？动态网页教学设计全文共9页，当前为第6页。问题5：如何让字幕移动的速度变快？

总结字幕修改属性：动态网页教学设计全文共9页，当前为第6页。

“延迟”:字幕每次移动的时间间隔，参数小，移动快。

“数量”：字幕每次移动的距离，参数大，移动快。【学生任务三】为你的校园生活主题网站中的主页制作滚动字幕。打开学习资源网站，浏览滚动字幕的制作过程并利用FrontPage制作。

学生讨论回答问题4，提出在网页中适合插入滚动字幕的位置。思考探索问题5，提出问题解决方法：通过修改字幕的

“延迟”或者“数量”属性。通过5个思考问题的解决，学生可以体会到通过修改对象属性使对象表现形式更加生动的方法，并应用到以后学习应用软件过程中，培养学生举一反三的能力和知识迁移能力。动态HTML效果【讲解演示学习内容】有意引导学生观察网页中制作的动态HTML效果。

动态html是指创建出如逐字移出网页的文本、当指针移到文字上时，文字变色和网页间旋转变换等各种动态效果。【学生任务四】选取校园生活主题网站中主页的一段文字，制作动态HTML效果。打开学习资源网站，浏览动态HTML的制作过程，并利用FrontPage制作。小组交流

自我评价指导学生进行小组交流与自我评价。1、按小组交流作品；2、每小组评选一个较有特色的作品在全班展示；3、根据老师提供的量规表进行自我评价。通过小组讨论和自我反思，学生不断发现自己的优缺点，提升自我。动态网页教学设计全文共9页，当前为第7页。师生交流动态网页教学设计全文共9页，当前为第7页。教师评价各小组推荐的作品，对网页中的优点和不足作点评，对具有创新意识的设计给予表扬，并结合作品与学生讨论如何根据需要适当加入动态HTML效果的方法，提醒学生不能滥用，否则可能会适得其反，产生令人烦躁的感觉。通过师生点评，体验如何根据需要适当加入动态HTML效果的方法。

通过师生交流和点评，不断提高学生网页制作水平。总结引入动态网页

动态网页不仅局限于动态HTML，还包括一些能够提供个性化信息服务的页面，例如搜索引擎，我们将在下节课继续探讨。初步了解动态网页。为下节课作铺垫。七、教学评价设计动态网页教学设计全文共9页，当前为第8页。动态网页制作自我评价表动态网页教学设计全文共9页，当前为第8页。编号评

价

标

准等级分优秀（5分）良好（4分）一般（3分）较差（2分）1知道动态HTML的概念

2掌握横幅广告管理器的制作方法。

3掌握悬停按钮的制作方法。

4掌握滚动字幕的制作方法。

5掌握DHTML效果的制作方法。

6知道