本  课  程

授      课

总  时  数

（总学分）

已

完

成

学时数

本  学  期

授 课

    总学时数

理 论 教 学

时 数

实 践 教 学

时 数

复 习

机 动

讲 授

其 它

单项技能

训练

课程设计

72（4.5）

16

72

34

0

34

4

0

0

课程教学

目的和要求

（分述）

通过本课程的学习，使学生逐步建立和掌握Web客户端静态页面设计的思想方法，具有分析问题和解决问题的能力，能够使用Bootstrap框架结合HTML、CSS和Javascript编写Web客户端静态页面解决实际问题，具备吃苦耐劳、团结协作的良好品质。

教材和参考书

1．《Bootstrap基础教程》，人民邮电出版社，赵丙秀、张松慧主编

2.《Bootstrap实战》，机械工业出版社，成林主编

3．《深入理解Bootstrap，机械工业出版社，徐涛主编

教研室

审查意见

年    月    日

院（部）负责人审查意见

                            年    月    日

单元一：Bootstrap入门

搭建Bootstrap开发环境，

使用Bootstrap开发第一个网页

掌握Bootstrap开发环境搭建方法，掌握编写简单的Bootstrap网页的方法；增加学生学习课程的兴趣，端正学习态度。

4

单元二：Bootstrap整体架构

设计简单网页：应用Bootstrap网格系统、CSS组件、Bootstrap辅助类

理解Bootstrap整体架构；掌握Bootstrap网格系统；了解CSS组件架构；了解Bootstrap辅助类；培养学生认真细致工作的习惯。

8

单元三：BootstrapCSS样式

设计个人主页：应用Bootstrap排版样式、表格样式、表单样式、按钮样式、图片和图标样式

掌握Bootstrap排版样式使用；掌握表格样式使用；掌握表单样式使用；掌握按钮样式使用；掌握图片和图标样式使用；培养学生的页面设计能力。

10

单元四：Bootstrap组件

设计带有登录、注册功能的响应式网站主页：应用字体图标、按钮组、下拉菜单、输入控件、导航、导航条、路径导航、分页、标签与徽章、巨幕、缩略图、警告框、进度条、多媒体对象、列表、面板与well 等技术

掌握字体图标使用；掌握按钮组使用；掌握下拉菜单使用；掌握输入控件使用；掌握导航条使用；掌握路径导航使用；掌握分页使用；掌握标签与徽章使用；掌握巨幕使用；掌握缩略图使用；掌握警告框使用；掌握进度条使用；掌握多媒体对象使用；掌握列表使用；掌握面板与well使用；培养学生的网站设计能力,对页面进行美化与布局。

32

单元五：Javascript插件

设计网站页面效果：应用模态框、下拉菜单、滚动监听、标签页、提示、弹出框

掌握模态框使用；掌握下拉菜单使用；掌握滚动监听使用；掌握标签页使用；掌握提示使用；掌握弹出框使用；提高学生的分析处理问题的能力。

18

1

第1章 入门准备

1.1 Bootstrap概述

1.2 Bootstrap主要特色

1.3 Bootstrap环境准备

1.4 HTML标准模板

重点：Bootstrap标准模板

难点：Bootstrap主要特色

讲授

2

PC

Dreamweaver/

HBuilder

2

第2章 整体架构

2.1 整体架构

2.2 网格系统

2.2.1 网格系统原理

重点：网格系统

难点：网格系统

讲授

2

PC

Dreamweaver/

HBuilder

2

2.2.2 网格系统基本用法

2.2.3 响应式网格

2.3 CSS组件架构

重点：网格系统

难点：响应式网格

讲授

2

PC

Dreamweaver/

HBuilder

3-4

第3章 CSS布局

3.1 概述

3.2基础排版

    3.3代码

3.4 表格样式

重点：排版样式

难点：表格样式

讲授

2

PC

Dreamweaver/

HBuilder

5-6

3.5 表单样式

3.6 按钮样式

3.7 图片和图标样式

重点：按钮样式

图片和图标样式

难点：表单样式

讲授

2

PC

Dreamweaver/

HBuilder

7

3.8 Bootstrap辅助样式

3.8.1 文本及背景颜色

3.8.2 辅助图标

38.3 漂浮与居中

3.8.4 显示或隐藏内容

重点：Bootstrap辅助样式

难点：漂浮与居中

显示或隐藏内容

讲授

2

PC

Dreamweaver/

HBuilder

8

第4章 表单

4.1 基础表单

4.2 输入框

4.3下拉框

4.4文本域

4.5复选框和单选按钮

4.6表单焦点

4.7表单禁用

4.8 验证样式

4.9元素大小

4.10 输入框组

重点：基础表单、输入框组、验证样式

难点：输入框组 

讲授

2

PC

Dreamweaver/

HBuilder

作业1：构建登录表单

9

第5章 CSS组件 

5.1 字体图标

5.2 按钮组

5.3 下拉菜单

    5.4 按钮下拉菜单

重点：字体图标、按钮组

难点：下拉菜单

讲授

2

PC

Dreamweaver/

HBuilder

10

5.5 输入控件

5.6 导航

5.7 导航条

重点：输入控件、导航

难点：导航条

讲授

2

PC

Dreamweaver/

HBuilder e

作业2：构建网站导航条

11

5.8 路径导航

5.9 分页

5.10 标签

5.11徽章

重点：路径导航、分页、标签与徽章

讲授

2

PC

Dreamweaver/

HBuilder

12

5.12 巨幕

    5.13 页面标题

5.14 缩略图

5.15 警告框

5.16 进度条

重点：巨幕、缩略图、警告框

难点：进度条

讲授

2

PC

Dreamweaver/

HBuilder

13

5.17 多媒体对象

5.18 列表

5.19 面板

5.20 洼池

重点：列表、面板与well

难点：多媒体对象

讲授

2

PC

Dreamweaver/

HBuilder

作业3：构建评论列表

14

第6章 JavaScript插件

6.1动画过渡效果

6.2 模态框

6.3 下拉菜单

重点：模态框、下拉菜单

难点：模态框、下拉菜单

讲授

2

PC

Dreamweaver/

HBuilder

15

6.4 滚动监听

6.5 标签页

重点：滚动监听、标签页

难点：滚动监听、标签页

讲授

2

PC

Dreamweaver/

HBuilder

作业4：构建可切换标签页

16

6.6 提示

6.7 弹出框

6.8 警告框

6.9 按钮

重点：提示、弹出框

难点：提示、弹出框

重点：警告框、按钮

难点：警告框、按钮

讲授

2

PC

Dreamweaver/

HBuilder

17

6.10 折叠

6.11 轮播

6.12 定位浮标

重点：折叠、轮播、定位浮标

难点：折叠、轮播、定位浮标

讲授

2

PC

Dreamweaver/

HBuilder

作业5：构建复杂主页

18

课程设计

课程设计/机动

讲授

2

PC

Dreamweaver/

HBuilder

2

CSS定位与漂浮应用

CSS优先级

CSS盒模型

CSS定位与漂浮

Ø CSS优先级

Ø CSS盒模型

Ø CSS定位与漂浮

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u CSS优先级

u CSS盒模型

u CSS定位与漂浮

3

Bootstrap网格系统及布局

网格系统用法

响应式网格

固定式布局

流式布局

布局嵌套

Ø 整体架构

Ø 网格系统

Ø CSS组件架构

Ø Bootstrap布局

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 网格系统用法

u 响应式网格

u 固定式布局

u 流式布局

u 布局嵌套

4

Bootstrap辅助样式应用

文本及背景颜色

辅助图标

漂浮与居中

显示或隐藏内容

Ø Bootstrap辅助样式

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 文本及背景颜色

u 辅助图标

u 漂浮与居中

u 显示或隐藏内容

5

排版样式及

表格样式应用

排版样式使用

表格样式使用

Ø 排版样式

Ø 表格样式

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 排版样式

u 表格样式

6

表单样式、

按钮样式、

图片和图标样式应用

表单样式

按钮样式

图片和图标样式

Ø 表单样式

Ø 按钮样式

Ø 图片和图标样式

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 表单样式

u 按钮样式

u 图片和图标样式

7

字体图标、

按钮组、

下拉菜单应用

字体图标

按钮组

下拉菜单

Ø 字体图标

Ø 按钮组

Ø 下拉菜单

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 字体图标

u 按钮组

u 下拉菜单

8

输入控件、

导航、

导航条应用

输入控件

导航

导航条

Ø 输入控件

Ø 导航

Ø 导航条

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 输入控件

u 导航

u 导航条

9

路径导航、

分页、

标签与徽章应用

路径导航

分页

标签与徽章

Ø 路径导航

Ø 分页

Ø 标签与徽章

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 路径导航

u 分页

u 标签与徽章

10

巨幕、

缩略图、

警告框、

进度条应用

巨幕

缩略图

警告框

进度条

Ø 巨幕

Ø 缩略图

Ø 警告框

Ø 进度条

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 巨幕

u 缩略图

u 警告框

u 进度条

11

多媒体对象、

列表、

面板与well应用

多媒体对象

列表

面板与well

Ø 多媒体对象

Ø 列表

Ø 面板与well

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 多媒体对象

u 列表

u 面板与well

12

模态框、

下拉菜单应用

模态框

下拉菜单

Ø 模态框

Ø 下拉菜单

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 模态框

u 下拉菜单

13

滚动监听、

标签页应用

滚动监听

标签页

Ø 滚动监听

Ø 标签页

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 滚动监听

u 标签页

14

提示、

弹出框应用、

警告框、

按钮应用

提示

弹出框

警告框

按钮

Ø 提示

Ø 弹出框

Ø 警告框

Ø 按钮

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 提示

u 弹出框

u 警告框

u 按钮

15

折叠、

轮播、

定位浮标应用

折叠

轮播

定位浮标

Ø 折叠

Ø 轮播

Ø 定位浮标

PC

Dreamweaver/

MyEclipse/HBuilder

考查

2

u 折叠

u 轮播

u 定位浮标

16

-

18

公司网站设计(课程设计)

完成公司网站首页、新闻列表页和新闻主题页面设计

Ø 公司网站首页

Ø 新闻列表页

Ø 新闻主题页

PC

Dreamweaver/

MyEclipse/HBuilder

考试

10

u CSS

u Bootstrap