教案
序号：13
授课日期
课时数
4
章节名称
任务14过渡与变形属性
教学内容
重点
过渡属性和变形属性。
难点
过渡属性和变形属性。
教学目的与要求
学会使用阴影和渐变的属性。
学会使用过渡与变形属性。
教学方法
与手段
教师采用任务驱动法，使用教学PPT辅助授课。
教师操作演示，学生实训练习。
学生课前课后均可通过“浙江省高等学校在线开放课程共享平台”的配套微课学习。
作业及
思考题
完成课堂上未完成的习题，通过网络平台上交作业。
通过回帖的方式回答课上留下的思考题。
预习下一节内容。
讲授内容
课堂组织
第一学时
（任务14过渡与变形属性
14.1过渡属性）
实操任务目标发布
实战演练——制作产品展示页
图13-SEQ图\*ARABIC\r11“产品展示”网页
强化训练——制作商品评论页
图13-SEQ图\*ARABIC2“商品评论”网页
过渡（transition）属性
图13-SEQ图\*ARABIC3过渡属性应用前的效果图13-SEQ图\*ARABIC4过渡属性应用后的效果
图13-SEQ图\*ARABIC5过渡属性应用后（图形为红色）的效果
第二学时
（任务14过渡与变形属性
14.2变形属性）
图13-SEQ图\*ARABIC6变形属性
第三学时
实战演练——制作产品展示页
案例描述：设计并制作产品展示页，网页效果如下图13-7所示。当光标悬停在产品模块上时，出现如图13-8所示的效果。
图13-SEQ图\*ARABIC7“产品展示”网页
图13-SEQ图\*ARABIC8鼠标指针悬停在产品模块上时的效果
图13-SEQ图\*ARABIC9“产品展示”的网页布局
第四学时
强化训练——制作商品评论页
案例描述：设计并制作商品评论网页，网页效果如下图13-10所示。当光标悬停在商品模块上时，出现如图13-11所示的效果。
图13-SEQ图\*ARABIC10“商品评论”网页
图13-SEQ图\*ARABIC11鼠标指针悬停在商品模块上时的效果
图13-SEQ图\*ARABIC12“商品评论”的网页布局
课后实训
案例描述：设计绿色植物展示列表，如图1所示。当鼠标移动到列表项时，出现如图2所示的效果。当鼠标移动到图片上时，出现如图3所示的图片放大效果。
图13-SEQ图\*ARABIC13“绿色植物”网页
图13-SEQ图\*ARABIC14鼠标指针移至绿色植物的名称上时的效果
图13-SEQ图\*ARABIC15鼠标指针移至图片上时的放大效果
发布任务，学生能够有目标地进行学习
教师讲解
学生操作巩固
教师讲解
学生操作巩固
理论讲解
教师操作演示
学生练习
学生练习