Bootstrap响应式Web开发教学大纲.docx

《Bootstrap响应式Web开发》

课程教学大纲

（课程英文名称）

课程编号：

学 分：学分

学 时：48学时 （其中：讲课学时36 上机学时12）

先修课程：计算机基础、计算机网络、HTML、CSS、JavaScript适用专业：信息技术及其计算机相关专业

开课部门：计算机系

一、课程的性质与目标

《Bootstrap响应式Web开发》是专注于HTML5中移动端常用的开发技术和Bootstrap相关内容开发的Web前端教材，涉及HTML5、CSS3、JavaScript和Bootstrap框架等。本课程提供了丰富的案例，如视频播放器、轮播图等，提高学生的学习兴趣。对于案例的实现思路进行了细致地分析和总结，让学生理解复杂案例的实现过程。通过本课程的学习，学生能够掌握移动Web技术和Bootstrap框架来快速实现响应式Web页面的开发。

二、课程设计理念与思路

课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的升华与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。

课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与实际操作相结合”。

三、教学条件要求

操作系统：Windows7

开发工具：Chrome、VisualStudioCode编辑器等工具

四、课程的主要内容及基本要求

学习单元第一章初识Bootstrap

学习单元

第一章初识Bootstrap

学时

3

1.

学习目标

使学生掌握Bootstrap的概念、特点及组成

使学生了解PC端浏览器和移动端浏览器的区别

使学生熟悉VisualStudioCode编辑器的使用

使学生熟悉移动Web开发的主流方案

知识点

了解

掌握

重点

难点

什么是Bootstrap

Bootstrap的特点

√

√

√

学习内容

Bootstrap的组成

√

√

浏览器

√

VisualStudioCode

移动Web开发的主流方案

√

√

√

学习单元 第二章移

学习单元 第二章移动Web开发基础（上）

学时

6

1. 使学生掌握视口的基本概念和使用方法

2. 使学生掌握移动Web页面的样式编写方法

学习目标

3. 使学生理解分辨率和设备像素比的概念

4. 使学生掌握二倍图的使用方法

5. 使学生掌握SVG矢量图的使用方法

知识点 了解

掌握

重点

难点

什么是视口

√

√

利用meta标签设置视口

√

√

移动Web页面的样式编写

√

√

设置移动端的特殊样式

√

√

√

学习内容

分辨率和设备像素比 √

√

什么是二倍图

√

√

背景图片的缩放

√

√

实现背景图片的二倍图

√

√

什么是SVG √

SVG标签和样式

√

√

从外部引入

从外部引入SVG文件

√

第三章移动Web开发基础（下）

学习单元

第三章移动Web开发基础（下）

学时

6

学习目标

使学生掌握HTML5新增API的使用

使学生掌握移动端常用事件的使用

使学生掌握移动端常用插件的使用

知识点

了解

掌握

重点

难点

检测网络连接

√

全屏操作

√

√

文件读取

√

√

地理定位

√

√

Web存储

√

√

播放视频和音频

√

√

学习内容

Touch事件概述

√

√

Touch事件实现轮播图效果

√

模拟移动端单击事件

√

√

Fastclick插件的使用

√

利用Fastclick处理点透事件

√

iScroll插件的使用

√

Swipe插件的使用

√

Swiper插件的使用

√

学习单元第四章移动端页面布局

学习单元

第四章移动端页面布局

学时

6

学习目标

学习内容

1. 使学生了解什么是流式布局

2. 使学生掌握flex弹性盒布局以及使用方式

3. 使学生掌握媒体查询的使用方法

4. 使学生掌握如何实现移动端设备的Rem适配布局

5. 使学生掌握Bootstrap的下载和安装以及使用方法

6. 使学生掌握Sass和Less的使用方法

知识点 了解

掌握

重点

难点

移动端页面常用布局 √

流式布局 √

flex布局体验 √

flex设置主轴方向

√

√

√

justify-content设置主轴子元素排列flex-wrap子元素是否换行

align-items设置侧轴子元