本项目我们首先进行“党建工作”页面的设计，通过本页面的设计，我们JQuery的基本语法与使用，熟练使用JQuery、JavaScript、插件Swiper等进行轮播图的设计，并能使用他们进行页面交互效果的添加。

【 案例展示 】

学习任务

重点、难点

突破方法

1. ”党建工作”页面的设计。

1. JQuery的使用。

2. 教学难点：页面交互效果的实现。

采用翻转课堂、项目导入的教学模式，采用分组讨论、案例教学、演示动画等教学方法，运用在线教学平台。

知识目标

能力目标

素质目标

1.掌握JQuery的基本语法；

2.掌握JavaScript实现页面交互；

3.掌握JQuery实现动画的方法；

4.掌握“党建工作”页面设计实现。

1.能够熟练应用JQuery完成基本操作；

2.能够利用JavaScript实现页面交互；

3.能够利用JQuery实现页面动画；

4.能够实现“党建工作”页面设计。

1.具有爱国爱党的爱国主义情怀；

2.提升职业自豪感；

3.具有实践动手能力；

4.具备团队协作精神。

课程思政——爱国主义教育

【 课程设计】

思维脑图

【 资料下载 】

单元设计

教学设计17-JQuery实现轮播图 .pdf

教学设计18-“党建工作”页面实现.pdf

教学设计19-“党建工作”项目技能点.pdf

课程教案

教案17-JQuery实现轮播图 .pdf

教案18-“党建工作”页面实现.pdf

教案19-“党建工作”项目技能点.pdf

演示文稿

项目6 公司网站“党建工作“页面设计.pptx

任务工单

公司网站“党建工作”的页面设计

素材下载

     1、区块划分前基本的css文件.rar

    项目6 轮播图图片素材下载.rar

    项目6 图片素材下载.rar

课内同步项目

   “党建工作”移动端页面设计

课外扩展项目

    黑色时尚摄影图片格子html5相册.rar 

练习题

    1、练习1

疑难问题解答

     1、H5逐步实现拖放功能介绍。