HTML5+CSS3网页设计任务教程（第2版）教案-单元设计 单元4 CSS3高级应用 .pdf

XXXXXX学院

单

元

设

计

课程：________WEB开发基础

内容：单元4CSS3高级应用

学时：8学时

设计摘要

教学课题单元1HTML5静态网站开发概述

课程WEB开发基础学时安排8学时年级高职一年级

汤佳陈晓男主编.《HTML5+CSS3网页设计任务教材（第2版）》.高等教育出版社，

所选教材

_________________________________2023年12月.________________________________

一、教学背景

创作思路针对传统教学无法解决的教学难题进行设计，课程依托信息化教学环境，整合数字

化教学资源，采用混合式教学模式，采用翻转课堂的有力手段，采用“有效学习时间”的理念进行

项目化考核。以学生为中心，教师做引导，在项目教学的各环节充分运用HbuilderX开发工具、智慧

职教MOOC、动画、在线教学平台等信息化手段解决教学重点难点问题。

设计特色

1.教学过程项目化依据“工学结合、职业情境、项目主导人才培养模式，通过创设情境、

针对实际问题精心设计单元引例，教师点评、小组互评，使学生自主探究，“做中学，“学中做，

降低了学生学习难度，提高学习兴趣和课堂参与度；

2.教学资源数字化丰富的课件、经典作品、视频等资源可供学生在线平台学习；

3.网络平台融合化紧紧围绕HbuilderX开发工具，融入智慧职教MOOC、动画、在线教学平台

等信息化手段进行教学完成教学目标，突破重点、难点；

4.学习评价多元化结合作品展示、小组汇报等多种方式，采用学生自评、师生互评，以及评

价平台等多种手段形成动态化、多元化的评价体系。

二、学习目标与内容

1.学习目标

知识目标

（1）掌握使用第三方字体图标库的使用方法；

（2）掌握CSS3特色模块的使用方法；

（3）掌握CSS3动画的基本属性及使用方法；

（4）掌握CSS3文本、图片等元素的高级使用方法。

能力目标

（1）掌握使用第三方图标FontAweome框架的方法；

（2）深刻理解CSS3动画属性含义，熟练掌握常用动画的制作方法。

素质目标

总体目标实践出真知。

（1）具备信息搜集与筛选能力；

（2）具备创新精神，提高用户体验；

（3）提高代码阅读能力和重构能力。

2

思政育人目标

(1)通过学习第三方图标FontAweome框架的基本使用方法，可以教育学生“他山之石，可以

攻玉的道理，学习他人的长处和经验，可以帮助自己更好地成长和进步；

(2)通过学习CSS3动画属性，让学生明白不同的想法，不同的方式可能会达到同一个效果，但

是同一种想法，同种方式可能会达到不同的效果。

2.学习主要内容

(1)FontAweome图标的使用；

(2)CSS3图片背景的使用；

(3)制作搜索框；

(4)制作无间隙滚动文字和图片；

(5)制作轮播文字和图片；

(6)制作多种文字特效；

(7)制作图片遮罩和悬停特效。

3.学习重点及难点

教学重点

(1)FontAweome图标的基本使用方法；

(2)CSS3中动画中各个属性值以及作用。

教学难点

(1)FontAweome框架的基本使用方法；

(2)CSS3常