基本信息
文件名称:Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)(第2版)(微课版) 教案 第13讲次 任务14 过渡与变形属性.docx
文件大小:3.02 MB
总页数:7 页
更新时间:2025-05-27
总字数:约1.27千字
文档摘要

教案

序号: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鼠标指针移至图片上时的放大效果

发布任务,学生能够有目标地进行学习

教师讲解

学生操作巩固

教师讲解

学生操作巩固

理论讲解

教师操作演示

学生练习

学生练习