第十七讲制作网页特效.
网页的美化与特效制作教案
网页的美化与特效制作【教学目标】（一）知识目标通过学习，使学生了解导航栏和共享边框，给网页设置背景，使网页更加美观。
理解导航栏和共享边框的作用。
（二）能力目标学生能熟练掌握为网站主页设置共享边框，添加主页与下级网页的导航栏；学会为网页设置背景（包括背景图片和背景颜色），增强学生对网页进行合理搭配的观念。
（三）情感目标培养学生的自学能力、操作能力以及分析和解决问题的能力，通过对网页的美化，培养学生审美能力。
【教学重难点】重点：1.理解共享边框和导航栏的好处，学习为网站设置共享边框，添加主页与下级网页的导航栏2.学习给网页添加背景；难点：为网站设置共享边框，添加主页与下级网页的导航栏，给网页添加背景，网页背景与内容的合理搭配。
【教学安排】课时安排：一课时。
【教法、学法】1、教法：以“比较法”和“激趣探知法”引入新课，以强烈鲜明的对比效果激发学生的学习兴趣，推动学生探求新知的强烈欲望，提高学生的学习主动性。
适时给表现好的学生表扬，通过学生看书自主学习，培养学生的创新精神和实践能力。
利用任务驱动，引导学生自主学习、动手实践方式完成本节课的教学目标。
2、学法：教学活动是教和学的双边相互促进活动。
在浓厚的创设欲望和教师布置任务的驱动下，学生积极主动的参与教学活动。
结合课本，自主发现问题、提出问题、解决问题，通过多思考、多交流，学习掌握本节课的重点内容。
通过学生演示作品展示，引导学生相互交流、对作品进行评价，由此增强学生对网页内容和背景图片颜色进行合理搭配的能力。
【活动概述】本次教学活动是在教师的指导下，学生通过观察、探索、讨论、研究进行自主性学习，学会对网页进行美化（包括：设置共享边框和导航栏，设置网页背景）。
【教学准备】1.课件2.上课资料两份内容相同的网页，（一份是经过美化的，一份是没有美化的，事先在每位学生计算机上都拷上没有美化的网页。
）【教学过程】组织教学第一阶段：观察作品，导入新课1、老师演示出示内容相同的网页《我的家乡》，（一份是经过美化的，一份是没有美化的）让学生观察：2、看一看，有哪些不同，哪个网站浏览更方便、更能吸引观众？3、学生活动：观察、思考，发言。
网站特效_精品文档
网站特效随着互联网技术的快速发展和网站设计的不断创新，越来越多的网站开始采用特效来提升用户体验和视觉效果。
网站特效是指通过使用HTML、CSS、JavaScript等技术，为网站添加动态效果、交互效果和视觉效果，以增强用户对网站的吸引力和互动性。
一、动态效果动态效果是指网页中的元素具有动画效果或运动效果。
最常见的动态效果包括渐变过渡、淡入淡出、旋转、缩放等。
这些效果可以通过CSS3的transition和transform属性来实现，使网页看起来更加生动和有趣。
例如，当鼠标悬停在一个按钮上时，可以通过渐变过渡效果让按钮的颜色由浅变深，给用户一种交互的视觉反馈。
二、交互效果交互效果是指网页中的元素具有与用户的交互行为。
通过点击、滑动、拖拽等操作，网站可以展示出不同的效果和结果。
交互效果可以通过JavaScript来实现，通过监听用户的事件，如点击事件或鼠标移动事件，来触发相应的响应动作。
例如，在一个图片展示网站中，用户可以通过点击某个图片进行放大或缩小操作，以便更好地观看细节。
三、视觉效果视觉效果是指以视觉上的美感为目的，通过改变元素的外观和样式来实现。
最常见的视觉效果包括阴影效果、模糊效果、过渡效果等。
这些效果可以通过CSS的box-shadow、filter等属性来实现，使网站的界面更加丰富多样。
例如，在一个购物网站中，当用户将鼠标移到商品图片上时，可以通过添加阴影效果来突出该商品，使用户更加关注。
四、性能优化在使用网站特效的同时，也要注意对网站性能的影响。
过多或过重的特效会导致网页加载速度变慢，甚至出现卡顿现象，影响用户体验。
因此，在设计网站特效时，需要注意以下几点：1. 合理选择特效：根据网站的定位和用户群体，选择适合的特效。
不同的特效对网页性能的影响不同，需要具体情况具体分析。
2. 控制特效数量：避免在一个页面上过多地使用特效，以免影响页面的性能。
特效的使用应该是为了提升用户体验，而不是为了增加特效的数量。
制作网页高级特效 教案
3.制作带有数字导航的横幅广告？
制作层信息提示特效
制作弹出隐藏层特效
制作左侧导航切换特效
制作上方导航切换特效
会使用CSS+DIV层进行页面布局
会使用表格+DIV层进行页面布局
会使用innerText动态改变文本显示
会使用display属性控制层的显示和隐藏
本章重点
制作精美的日历特效
制作倒计时特效
PPT讲解+现场演示
MARQUEE标记不仅可以在网页中时下文字和图片的滚动，还可以实现表格等其他对象的滚动。
setTimeout()方法只执行亦次指定的方法或一段代码，用来制作定时器时，通过设定延时间隔实现页面元素的动态效果。
setInterval()方法在执行玩一次指定的方法或一段代码之后，进过指定的时间间隔之后，它会自动重发执行。
1.请简述MARQUEE标记的语法格式。
2.请解释setInterval()与setTimeout()方法的区别。
3.Date对象有哪像常用的方法？并说明其含义。
4.请回答Array( )数组三种语法形式，并举例加以说明。
制作防拷贝特效。
制作主页收藏特效。
制作动态改变页面风格特效。
制作省市级联效果。
1）案例分析
2）相关理论：setTimeout（）方法的使用
3）操作步骤：如何根据提供的素材页面，编写代码实现
6.制作演示案例5¬——带数字导航的横幅广告
1）案例分析
2）相关理论：clearTimeout（）方法的使用
3）操作步骤：如何根据提供的素材页面，修改代码实现
7.制作演示案例5¬——页面漂浮广告
1）案例分析
计算机网络技术专业《7.1 使用spry构件制作网页特效5》
教学 难点
Spry 构件的编辑与效果 设置。
资料与 课件、工程任务书、视频、动画、图片、 授课 文档、资源平台等。
工具
方式
集中教学
教学内容与教学过程设计
方法与时间
一、插入并编辑 Spry 构件 Spry 框架设计网页是通过 Spry 构件来实现的。 Spry 构件是一个网页中插入一个 Spry 构件 〔1〕菜单栏中“插入/ Spry〞 〔2〕使用“插入面板〞/布局中的 Spry 2、编辑 Spry 构件 将鼠标指针移到构件上单击即可选中该构件，在属性面板编辑 注意：创立的 Spry 构件相关属性都保存在站点 SpryAssets 文件夹 中
二、使用菜单栏和工具提示 Spry 构件 Spry 构件主要是指 spry 菜单栏、Spry 选项卡式面板、Spry 折叠式、 Spry 可折叠面板。 1、使用 Spry 菜单栏构件
三、 spry 构件的应用 1、制作 spry 菜单栏
2、制作 spry 折叠式面板
作业：课后习题 1、2、3 题 课堂小结：
1、掌握面板式 Spry 构件的插入与编辑 2、掌握菜单栏和工具提示 Spry 构件的插入与编辑 教学后记：
编号：
课题
7.1 使用 spry 构件制作网页特效
教学 课型 理实一体课 时间
教学 地点
学时
教学 目标
1、掌握使用 spry 设计网页 2、掌握菜单栏和工具提示 Spry 构件的插入与编辑 3、掌握其他 Spry 构件的插入与编辑
教学 重点
spry 折叠式构件、spry 可折叠面板构 件、spry 选项卡构件、spry 菜单栏构 件的使用
菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停 在其中的某个按钮上时，将显示相应的子菜单。
网页的美化与特效制作教案
网页的美化与特效制作教案一、教学目标1. 让学生了解网页美化的基本原则和方法。
2. 培养学生掌握HTML和CSS的基本语法和用法。
3. 使学生能够使用JavaScript实现网页的基本特效。
二、教学内容1. 网页美化的基本原则和方法：页面布局、色彩搭配、字体与排版、图片处理等。
2. HTML基本语法和用法：标签、属性、注释、文档结构等。
3. CSS基本语法和用法：选择器、属性、注释、样式规则等。
4. JavaScript基本语法和用法：变量、数据类型、条件语句、循环语句、函数等。
5. 网页特效的实现：鼠标悬停效果、下拉菜单、滚动动画等。
三、教学过程1. 讲解网页美化的基本原则和方法，通过实例演示和分析，让学生理解和掌握。
2. 讲解HTML的基本语法和用法，通过实例演示和练习，让学生掌握HTML 的基本标签和属性。
3. 讲解CSS的基本语法和用法，通过实例演示和练习，让学生掌握CSS的选择器和样式规则。
4. 讲解JavaScript的基本语法和用法，通过实例演示和练习，让学生掌握JavaScript的基本语法和函数。
5. 讲解网页特效的实现方法，通过实例演示和练习，让学生掌握如何实现简单的网页特效。
四、教学方法1. 采用“讲解+演示+练习”的教学模式，让学生在听讲的跟随老师一起操作和实践。
2. 使用多媒体教学工具，如PPT、网页演示等，直观地展示和讲解知识点。
3. 鼓励学生提问和参与讨论，解答学生在学习过程中遇到的问题。
4. 布置课后作业，巩固所学知识，提高学生的实际操作能力。
五、教学评价1. 课堂表现：观察学生在课堂上的参与程度、提问和回答问题的情况。
2. 课后作业：检查学生完成作业的质量，评估学生对所学知识的掌握程度。
3. 项目实践：让学生独立完成一个网页美化与特效制作的项目，评估学生的综合运用能力。
教学资源：教材、多媒体教学课件、网络资源、编程工具。
六、教学环境1. 硬件环境：计算机教室，每台计算机配备浏览器、文本编辑器和网页制作相关软件。
浙教版 新教材 八上17编辑网页代码
网页特效
网页特效指网页上的特殊效果，主要通过将 JavaScript程序代码加入到网页中，使网页页 面更加生动、活泼。
一个页面添加 的特效不宜过多， 否则会影响整个页 面的视觉美感。
认识HTML代码
超文本标记语言（Hypertext Markup Language , HTML)，是用于描述网页文档的一 种标记语言，它是万维网上的通用语言。
HTML文件结构如下：
ห้องสมุดไป่ตู้
<html> 标记网页的开始 <head> 标记头部的开始 <title> 显示在浏览器左上方的标题</title> </head> 标记头部结束 <body> 标记页面正文开始 </body> 标记页面正文结束 </html> 标记网页的结束
HMTL 标签是由尖括号包围的关键词，通常成对出现。
制作具有动态特效的网页教学课件
第五章
24
– 或者可以在IIS中创建“虚拟目录”将其指向已经制作 完成的网站文件夹
华东师范大学计算中心
22
计算机技术应用
Internet信息服务2
• 用户在浏览器的地 址栏中输入： 222.204.252.240/my website/index.htm即 可访问mywebsite网 站
– 222.204.252.240是 Web服务器的IP地址
– 页眉 ，通常定义网站标题、网站标志及广告等 – 页脚 ，通常包含网站设计信息、网站开发者信息及版
权等
– 文本 ，文本是网页的主体 – 图片的使用 – Flash动画 ，体积较小、画质清晰等优点，适合于网页 – 其他多媒体的使用
华东师范大学计算中心
15
计算机技术应用
第五章
• 网页布局的常用技术
– 层叠样式表（CSS） ，能精确指定某些标签的外观 等属性，也可以自定义某种样式以供页面元素使用。 借助CSS技术，可以非常方便的统一网站所有页面的 风格。当一个文件包含了所有的样式信息时，样式表 还可以减少下载的时间
– index.htm文件表示 需要访问的网页文 件。
华东师范大学计算中心
第五章
23
计算机技术应用
作业与实验内容
• 作业
– 07版教材P245, 5.5.3习题与思考 – 07版教材P248, 5.6.3习题与思考
• 实验
– 07版教材P371，实验5-3表单的实验 – 07版教材P371
• 实验5-3表单的实验 • 实验5-5、实验5-6、实验5-7、实验5-8
华东师范大学计算中心
第五章
17
计算机技术应用
4. 色彩搭配
《网页制作高级特效》课程教学大纲
《网页制作高级特效》课程教学大纲
一、课程概述
本课程开发工作的重点主要体现在以下几个方面:
第一，坚持以能力为本位，突出职业教育特色。
第二，遵循专业教学规律，合理构建教材体系。
根据计算机信息类专业的教学规律，按照当前职业院校的专业设置情况和发展趋势，合理构建通用的专业基础课教材和各专业方向的专业课教材体系，并做到有机衔接。
第三，兼顾技术发展与教学条件，突出计算机综合应用能力培养。
在教学内容组织上，不局限于软件版本和软件功能的介绍，而更注重相关计算机综合应用能力的培养。
为后续专业课程的学习打下良好的基础。
第四，创新教材编写模式，丰富教材表现形式。
在表现形式上，通过丰富的操作图片和软件截图详尽地指导任务操作步骤和软件使用方法，使教材内容更加直观、形象。
二、教学目标
通过本课程的学习学生能够了解Emmet高效布局网页、使用内嵌框架制作画中画特效、Java Script高级特效的方法；掌握制作表单验证类特效、制作层切换和层提示特效、制作菜单类特效、制作广告类特效、制作UI类特效、制作鼠标类特效、制作时钟类特效、
制作Loading预载特效等。
三、最低课时安排
《JSP动态网站开发》课程最低总计学习课时为144课时。
各章节最低课时安排如下表所示：
四、教学内容
我们对本课程的具体授课内容会提供PPT，并在PPT中标明知识点讲述要点，详细内容请参考PPT。
使用行为创建网页特效
四、恢复交换图像
9
“恢复交换图像”动作，指当鼠标指针移出对象区域后，所有被替换
显示的图像恢复为原始图像。一般在设置替换图像的动作时，会自
动添加替换图像恢复动作。如果在附加“交换图像”时选择了“鼠标滑
开时恢复图像”选项，则不需要手动选择“恢复交换图像”动作。
如果在设置“交换图像”动作时，没有选中“鼠标滑开时恢复图像”复
11
（3）将表格第2行单元格的背景颜色设置为粉红色（#FF6666），如图所示。 （4）在表格第2行单元格中输入导航文字，文字大小为12像素，颜色为白色，如图所示。 （5）执行“插入→表格”菜单命令，插入一个2行5列、宽度为600像素的表格，设置表格的边框粗 细、单元格边距和单元格间距均为0，在“属性”面板中将表格设置为“居中对齐”，如图所示。
URL”对话框。
第3步：在“打开在”列表框中选择打开链接的窗口。
第4步：在URL文本框中输入设置链接的URL地址，或单击
按钮来选择链接文档。
第5步：设置完成后单击
按钮，确认操作。
第6步：在“行为”面板上选择相应的事件。
30
二、打开浏览器窗口 使用“打开浏览器窗口”动作在一个新的窗口中打开URL。可以指定新窗口的属性（包括其大小）、 特性（它是否可以调整大小、是否具有菜单栏等）和名称。例如，可以使用此行为在访问者单击缩略 图时，在一个单独的窗口中打开一个较大的图像；使用此行为，可以使新窗口与该图像恰好一样大。 打开一个页面文档，单击“行为”面板中的 按钮，在弹出的“动作”快捷菜单中选择“打开浏览器窗 口”命令，打开如图所示的对话框，在“要显示的URL”文本框设置打开窗口中要显示网页的URL， 再设置弹出窗口的宽度和高度，在“属性”栏中可选择弹出窗口是否包括某些属性。
义务教育版(2024)七年级上册信息技术第十七课《制作网页展活动》教案
通过小组合作，加强学生组内团结、共同完成任务
四、课堂练习
课程练习书本上的内容
1.回忆之前所学内容，判断以下说法是否正确
2.小组就网站主题、网站结构、页面结构等展开交流与讨论，并记录分配给自己的任务
3.制作个人承担的介绍科技项目的网页
通过课堂的上的随机提问，抽取学生回答，引导学生练习开展习题。
课题
第十七课制作网页展活动
单元
四单元
学科
信息科技
七年级
第一册
学习
目标
1. 了解制作网站的基本流程。
2. 能通过写HTML代码制作简单网页。
3. 体验用人工智能技术制作网页，认识科技创新的意义。
重点
制作网站的基本流程
难点
HTML代码制作简单网页
教学过程
教学环节
教师活动
学生活动
设计意图
一、教学目标
通过本章节的学习，你应该掌握以下内容：
1. 了解制作网站的基本流程。
2. 能ቤተ መጻሕፍቲ ባይዱ过写HTML代码制作简单网页。
3. 体验用人工智能技术制作网页，认识科技创新的意义。
倾听老师开篇介绍
本课程的教学目标了解制作网站的基本流程，能通过写HTML代码制作简单网页
二、新课导入
接下来几课，要分小组制作展示学校“科技节”的网站。每位同学设计制作介绍一个科技项目的子页，然后小组协作完成主页的制作。
六、作业布置
作业布置
1.制作网站的基本流程是怎样的？
2.如何制作一个简单的网页？
以小组为单位，讨论制作网站的基本流程是怎样的？如何制作一个简单的网页？
通过实践的方式，加深对所学知识的理解和应用。
第17课 制作网页展活动 课件(11张PPT)
图片
第17课 学习内容
二、制作一个简单的网页
2．选择一个方法制作介绍科技项目的网页。 方法一：用文本编辑工具编写HTML代码，制作网页。 方法二：选择一个在线人工智能模型，让它根据需求自动生成网页。
请制作一个关于校园 科技节的网页，主要使用 <img><p><h>等标签。
给出要求
AI
第17课 课堂总结
1．网站的制作流程。 2．<img><p>等标签的格式与作用。 3．编写HTML代码，制作有文字和图的简单网页。 4．使用在线人工智能模型自动生成网页。
第17课 拓展与提升
继续使用在线人工智能模型学习网页制作的知识。 1．让模型解答更多关于网页制作的疑问，例如，如何使网页中 的图像保持大小一致。 2．把感兴趣的网页代码提交给人工智能模型，让它解读每段代 码的功能。
第17课 学习内容
学习内容
一 制作网站的基本流程 二 制作一个简单的网页
第17课 学习内容
一、制作网站的基本流程
序号 1
2
3 4 5 6
名称 确定主题
搜集素材
确定结构 制作网页 美化网页 发布网站
说明 简要说明主题是什么，如学校的科技节 围绕主题开始搜集网站所需要的资源，经过挑选、去伪， 作为制作自己网页的素材 确定主页、导航菜单、内容组织、布局和主题风格等 用工具软件制作网页 用适当方法调整网页的显示效果 选择恰当方式展示网站
今年的科技节，各班都为科技节准备了超棒的科技体验项目。老 师们更是号召大家团结合作，一起动手制作展示科技节的网站。每个 小组的同学现在都已经摩拳擦掌，准备先设计制作属于自己的科技项 目子页，然后协作完成网站主页。
全书教学课件：网页制作高级特效
课题 ３ 使用 HTML5 制作验证码特效
３. 画圆 (弧线) 如果要创建一个圆形、半圆或弧线，可以使用 arc ( ) 方法。arc 的中文含义 是 “ 弧线”，arc ( )方法是用一个中心点和半径，为一个画布的当前子路径添 加一条弧线。一个圆的弧线是 360°或 2 π 弧度 (用 Math. PI*2 表示)。 画圆 (弧线) 的语法格式如下：
客户端脚本和服务器端脚本比较
课题 １ JavaScript 语言基础
编写 JavaScript 程序可选择普通的文本编辑器或集成开发环境。 Dreamweaver 集成了JavaScript 开发环境，提供了强大的 JavaScript 支持。
JavaScript 需要嵌入 HTML 中，即 JavaScript 的存在依赖于 HTML 文档。 在 HTML 中，使用 < script > 标记引入 JavaScript ，使用 < / script > 结束 JavaScript ，< script >和 < / script > 之间是 JavaScript 脚本。 < script > < / script > 可以放在 <head > 和 < / head > 之间，也可以放在 <body > 和 < / body> 之间。二者的区别是: １) head 部分的脚本: 需调用才执行的脚本或事件触发执行的脚本放在 HTML 的 head部分。当把脚本放在 head 部分时，可以保证脚本在任何调用之前 被加载。
课题 １ 使用 Emmet 高效布 局网页
一、创建本地站点
１. 使用 Dreamweaver CS3 / CS4 创建本地站点 ２. 使用 Dreamweaver CS5 / CS6 / CC 创建本地站点
网页制作html特效
Html特效1)贴图：<img src="图片地址">2)加入连接：<a href="所要连接的相关地址">写上你想写的字</a>3)在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>消除连接的下划线在新窗口打开连接：<a href="相关地址" style="text-decoration:none" target="_blank">写上你想写的字</a>4)移动字体(走马灯)：<marquee>写上你想写的字</marquee>5)字体加粗：<b>写上你想写的字</b>6)字体斜体：<i>写上你想写的字</i>7)字体下划线: <u>写上你想写的字</u>8)字体删除线: <s>写上你想写的字</s>9)字体加大: <big>写上你想写的字</big>10)字体控制大小：<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大，h5最小)11)更改字体颜色：<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间12)消除连接的下划线：<a href="相关地址" style="text-decoration:none">写上你想写的字</a>13)贴音乐：<embed src=音乐地址width=300 height=45 type=audio/mpeg autostart="false">14)贴flash: <embed src="flash地址" width="宽度" height="高度">15)贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>16)换行：<br>17)段落：<p>段落</p>18)原始文字样式：<pre>正文</pre>19)换帖子背景：<body background="背景图片地址">20)固定帖子背景不随滚动条滚动：<body background="背景图片地址" body bgproperties=fixed>21)定制帖子背景颜色：<body bgcolor="#value">(value值见10)22)帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>23)贴网页：<iframe src="相关地址" width="宽度" height="高度"></iframe>HTML特效代码1。
制作网页特效
网页特效程序应用实例
• JavaScript具有很多优点： • 1.简单性 • 2.动态性 • 3.跨平台性
如何使用网页特效程序？
1、我们是在网页的源文件里编辑制作。 如我们使用Dreamweaver软件，则我们 必须切换到“代码视图”下。
如何使用网页特效程序？
2、根据网页特效代码里的内容是否在网Байду номын сангаас页内显示，我们可以初步确定网页特效 代码放在网页源文件里的何处。
• • • • 分时问候 中文显示系统日期 标题栏跑马灯效果 文字特效
什么是JavaScript?
JavaScript 是一种基于对象和事件驱动并 具有安全性能的脚本语言，有了JavaScript ，可使网页变得生动。使用它的目的是与 HTML超文本标识语言、Java 脚本语言一起实 现在一个网页中链接多个对象，与网络客户 交互作用，从而可以开发客户端的应用程序 。它是通过嵌入或调入在标准的HTML语言中 实现的。
制作网页特效
什么是网页特效？
网页特效就是网页的特殊效果，应用 它可以让你的网页变得形式多样、富有 动感、更加吸引人，比如滚动字幕、弹 出窗口、漂浮广告等。
• 网页特效主要通过使用HTML语言、 JavaScript等脚本语言编程来实现。 • HTML使用 < html >...</ html> 来标识 。 • JavaScript使用 <script>...</script> 来标识 。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（1）插件的安装与管理
（2）插件的应用
课堂实践
1．操作要求
（1）打开“课堂实践”网站文件夹“15网页特效”中的网页文档“15.html”。
（2）应用“显示－隐藏层”行为实现图像的放大与还原，即鼠标指针指向“凤凰城门”下面的图像时显示尺寸较大的图像，鼠标指针离开时，尺寸较大的图像立即隐藏。
5
4.项目资讯，发放资料
简要介绍项目制作所需的主要知识及操作方法；
将学习资料以PPT及视频动画的形式发给学生。
10
5.角色扮演，形成方案
每组学生既模拟客户又模拟网站设计公司，既负责向下一组提出客户需求，又负责为上一组设计制作网页；
组长（项目经理）负责向组员（网页设计师）讲述客户需求，组员集思广益，产生完成项目的初步方案。
能力目标
（1）在网页灵活使用CSS、行为、时间轴、插件实现网页特效
素质目标
培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。
重点
（1）使用行为制作特效的操作方法。
难点
（1）如何获取所需的插件
课型
讲授型＋操作型
教学方法
任务驱动法、分组讨论法、理论实践一体化
教学手段
多媒体教学
教参
中国铁道出版社的《DreamweaverMX2004扩展程序与密技》
（3）在浏览器状态栏显示文字“<--长沙世界之窗欢迎您！-->”的文字。
疑难解析
问题1：当某个事件被触发时，如果需要调用某个指定的JavaScript函数，怎样实现？
问题2：如何利用插件设置彩色渐变文字
课外拓
展实践
为“快乐e游”网站制作包含特效的“公园游”网页
课后评析
25
6.方案展示，确定目标
各项目经理将讨论后的方案进行展示，各组组员可做补充说明；
教师与其他组成员点评，经改进后最终确定可实施的、能够达成知识和技能目标的工作方案。
25
7.任务分解，实战操练
教师将项目分解为多个任务：
任务1：制作“云南旅游”网页
任务2：编写JavaScript程序，实现特效
每组成员按照客户需求分步进行设计制作，教师巡视指导。针对学生中普遍存在的问题利用教学广播讲解演示；针对个别问题，进行个别指导。
15
10．布置作业，举一反三
（1）基础作业：
继续改进作品；
填写项目总结报告；
布置下次课任务。
（2）提高作业：
制作包含特效的“九寨沟之游”网页
5
总计
180
新授内容
1．使用脚本制作特效
（1）利用HTML标记制作特效
（2）利用CSS制作特效
（3）利用JavaScript制作特效
2．使用行为制作特效
3．使用时间轴制作特效
授课日期
班级名称
授课地点
教学课题
第十七讲制作网页特效
课时
4学时
教学目的
1．学会利用CSS制作特效的操作方法；
2．学会使用行为制作特效的操作方法；
3．学会使用时间轴制作特效的操作方法；
4．学会使用插件制作特效的操作方法。
知识目标
1．利用CSS制作特效；
2．使用行为制作特效；
3．使用时间轴制作特效；
4．使用插件制作特效。
60
8.成果展示，考核评价
由小组观摩评选出一个优秀设计作品进行成果展示。介绍过程中要求说明设计思路及制作过程中遇到的问题，如何解决问题，同时其他组成员也可提出问题，让设计者解释设计所用的相关技术及特点；
依据项目评价表对作品进行自我评价、小组评价和教师评价，挖掘作品优点，并指出问题所在，给出具体改进及修改意见；
评选出“最佳美工设计”、“最佳网页制作”、“最佳组织协作”、“最佳员工”等奖项。
25
9.总结归纳，引申提高
首先提问学生总结，让学生谈本项目的收获；
教师对本次目的不足之处，进行引申和提高。
小结：本讲介绍了多种网页特效的制作方法，利用行为制作特效比较简便，应该重点掌握，其他几种特效制作方法一般了解。
教学环节
时间安排
1.复习提问：
JavaScript有哪些常用的内置对象？
5
2.情境设置，项目引入
情境设置：BZ旅行社新推出了“云南旅游”的特色旅游项目，请你为其设计制作一个宣传“云南旅游”的网页，并加入网页特效。
通过具体情境引入本次课要学的“制作网页特效”，并展示项目最终效果网页。
5
3.教学目标说明：介绍本次课的项目要求、项目目标、项目重点难点。