(完整版)《BootStrap开发技术》课程标准

1、 放置页眉和页脚的1、inline - 默认。页方式有三种 眉和页脚与页面内2、 使用data-position 容位于行内。

属性来定位页眉和fixed - 页面和页脚页脚 会留在页面顶部和底部。

fullscreen - 与 fixed

类似;页面和页脚会留在页面顶部和底部

1、jQuery Mobile导航1、 导航栏由一组栏 水平排列的链2、jQuery Mobile列表 接构成，通常位于页眉或页脚内部。

2、

3、默认地，导航栏中的链接会自动转换为按钮（无需

12

2

Bootstrap排版

13

3

定位页眉和页脚

13

4

JavaScript 插件

18

data-role="button"）。

4、请使用 data-role="navbar" 属性来定义导航栏：

2、课程教学实施

建议本课程重视学生在校学习与实际工作的一致性，采取任务驱动、项目导向的教学模式，每个具体学习情境设计见表2-1、2-2、2-3详表。

表2-1

BootStrap开发技术学习情境表一

学习情境（项目）：创建一个web项目

学时 12

能力目标：通过理论和实践相结合的教学方式，使学员熟练掌握BootStrap。

项目目标

知识目标：

1、添加导航栏完全采用Bootstrap提供的样式

2、添加内容

任务一：在web目录下创建css目录，在css目录下创建boostrap目录，将压缩版的css文件 复制到此目录下。

任务二：在中引入样式，在head中添加下面代码。

任务三：添加导航栏完全采用Bootstrap提供的样式。

任务四：在nav标签同级下面添加显示内容的div。

任务五：导航栏将内容遮挡住了，需通过css样式进行控制。

学生知识

1、引入了预编译版的 CSS 和 JavaScript 文件，创建一个Web项目。

与能力准备

项目任务

1、 BootStrap发展背景材料

1、 Bootstrap简介

2、 Bootstrap安装手册和说明

教学材料准备 3、 Bootstrap命令快捷键表

4、 Bootstrap特效基础案例5-10个

5、 相关教学教案

6、 考核内容和评价标准

步骤 教学活动过程 主要知识点 教学方法建议 学时

收集和展示BootStrap技1、 全局的CSS 设1、 BootStrap术相关背景知识，提出总置链接样式

资讯收集和体课程目标和任务要求，2、 定义基本的

多媒体演示法

下发任务书、下发任务说明书，让学生HTML 元素样学习资料 提前了解任务内容，并提式

前进行资料的学习

引入工作任务，分析目标，1、 查找节点

摆出问题，做出任务计划，2、 创建节点

2、分析任务，将完成任务所需要的基3、 插入节点

提出问题，制定本理论和基本概念讲授4、 删除节点

实施计划和方案

给学生，然后经过讨论5、 复制节点

优化，确定最终工作任6、 替换节点

7、 包裹节点

务方案。

演示实现任务过程，解释2

讲授法

演示法

3

1、 属性操作

2、 样式操作

演示与操作法

在编程过程中如何使用3、任务演示和实3、 设置和获取案例法

这些指令，以及在应用施 HTML、文本值

情境教学法

这些指令时的注意事项4、 遍历节点

及创新。

5、 CSS DOM操作

技能实训，提出进一步问

4、技能实训和知题，拓展相应知识，强化专识拓展

项技能

进行自评、互评交流，分析工作过程的问题和不足，并总结成功与失败的经验和教训，发扬成绩，找出不足。

同时结合一定形式的理论5、检查和评估

和实践综合考查，成果展示、提交实训报告和多种形式的虚拟情趣活动等，及时得到教学反馈信息，做出教学评价

表2-2

演示与操作法

讨论交流法

3

4

交互检查法

讨论法

小组演示法

BootStrap开发技术学习情境表二

学习情境（项目）：Bootstrap 表格、表单的使用 学时 13

能力目标：熟练掌握Bootstrap的使用，能够手动写出Bootstrap的一些常见特效，并学会插件的使用。

知识目标：

1、 Bootstrap 表格

2、 Bootstrap 表格类

3、 Bootstrap 表格上下文类

4、 Bootstrap 表单布局

5、 Bootstrap 垂直表单

6、 Bootstrap 内联表单

7、 Bootstrap 水平表单

8、 Bootstrap 支持的表单控件

9、 Bootstrap 表单控件状态

10、Bootstrap 表单控件大小

任务一：设置内边距以及水平分割线

任务二：在内容主体上看到条纹

任务三：表格周围增加边框

任务四：隔行换色

任务五：精简表格

项目目标

项目任务

1、获取表单元素

学生知识

2、Bootstrap中操作样式

与能力准备

3、文本框获取焦点、失去焦点时的事件处理

1、 项目任务所需教学案例

2、 项目实施标准

3、 演示视频资料

教学材料准备

4、 技能实训网页资料案例5-10个

5、 多媒体课件

6、 项目阶段性考核内容和评价标准

步骤

教学活动过程 主要知识点

教学方法建议 学时

1、

收集任务资讯，下1、 表单文本框应用

发任务说明书和相2、 多行文本框应关参考资料

2、 分析任务要求，制定用

任务工作计划，确定3、 复选框的应用

案例法

4、 列表矿工的应工作方案。

讨论法

1、任务一教学

演示和操作法

3、 任务实施： 用

讲解相应命令操作5、 表单验证

多媒体展示成品和体验效果，完整演示绘制过程

4、技能实训，拓展知识

5、组织讨论和总结

3

任务二 1、更改表格颜色

1、

收集任务资讯，下2、展开与关闭表发任务说明书和相格

3、筛选表格内容

关参考资料

2、 分析任务要求，制定任务工作计划，确定工作方案。

2、任务二教学 3、 任务实施：

讲解相应命令操作，多媒体展示成品和体验效果，完整演示布局过程，解答学生在操作中的问题。

4、 技能实训，拓展知识

5、 组织讨论和总结

成果检查和展示，分析反思工作过程并交流，对绘图进行适当集中测评，多3、检查和评估

角度检查学生学习情况，及时教学反馈，强化和弥补教学不足。

表2-3

BootStrap开发技术学习情境表三

学习情境（项目）：利用BootStrap进行快速 Web 开发

学时 13

案例法

讨论法

演示和操作法

10

交互检查法

讨论法

小组演示法

项目目标

能力目标：能够对BootStrap有一个简单的认识了解，清楚BootStrap与其他JS框架的不同，掌握BootStrap的常用语法、使用技巧及注意事项。

知识目标：全局显示、排版和链接

任务一: 使用Bootstrap栅格系统（布局）

任务二：使用Bootstrap掌握下拉菜单

任务三：使用Bootstra创建导航条

任务四：使用Bootstrap创建按钮

任务五：使用Bootstrap模仿起筷首页效果

项目任务

1、布局栅格系统的使用

学生知识

2、下拉菜单方法，导航条创建方法，按钮创建方法

与能力准备

3、利用Bootstrap写出首页效果

1、 项目任务案例材料

2、 实际操作教学演示视频

教学材料准备 3、 技能实训样品资料（完整网页两套）

4、 多媒体教学课件

5、 项目阶段性考核内容和评价标准

步骤

教学活动过程 主要知识点 教学方法建议

学时

1、 提前下达任务书，让1、bootstrap响应式学生收集资料，展开布局

前期的自学，摆出问2、Bootstrap实现响题。 应式导航栏效果

2、 任务分析和分解，规3、BootStrap实现响划任务方案。 应式布局导航栏折叠3、 任务实施： 隐藏效果

项目需求阅读，讲解4、Bootstrap响应式案例法

Bootstrap基础知识和制图导航、轮播图 操作法

1、任务一教学

规范，全面演示和操作和情境教学法

在生活中的实际运用并

结合视频、生活案例等多种手段进行介绍Bootstrap特点

4、 技能实训和知识拓展

5、 组织交流讨论

6、 以虚拟设计竞标方式进行成果汇报和展示

1、 收集任务资料，下发1、 bootstrap网页任务指导书 框架的使用方法

2、 罗列任务要点，制定2、 利用 MVC工作计划和方案 和Bootstrap快3、 任务实施： 速搭建响应式个案例法

视频展示变成过程人博客站案例

演示法

2、任务二教学 和效果，讲解Ajax的设情境教学法

计要点，完整操作演示运

行出效果

4、 组织成果公开展示和评比

5、 技能实训和知识拓展

3

7

1、Bootstrap

1、 下发任务指导书，分Metronic完全响应式析任务要点，提出任管理模板之菜单栏学务要求 习笔记

2、 组织讨论，形成完善2、Bootstrap响应式案例法

的实施规划和技术方侧边栏改进版

操作法

3、任务三教学 案 3、Bootstrap实现圆情境教学法

3、 任务实施： 角、圆形头像和响应

按照任务要求，讲授式图片

排版中困难知识点要点4、BootStrap创建响制作和流程，操作演示 应式导航条实例代码

4、 技能实训和知识拓展

5、 总结

组织学生加强操作过程的自查自评，同时以小组交流形式进行互评

强化对实训过程和实训报告的监督和检查，

以理论和上机结合5、检查和评估

形式有针对性对表格和表单嵌套进行教学测评，以检查教学效果

课后加强教学交流辅导平台，及时解决学生问题。

3

交互检查法

讨论法

小组操作法

（二）考核评价建议

为全面考核学生的知识与技能掌握情况，本课程主要以过程考核为主。课程考核涵盖项目（学习情境）任务全过程，主要包括项目实施等几个方面。各项目（学习情境）具体考核方式与考核标准比例见表3。

表3

BootStrap程序开发技术课程考核方式与考核标准

项目

编号

1

评价标准

考核点及

项目分值比

建议

考核方式

优 良 及格

基本能说明对BootStrap不及格

不能反映说明对BootStrap编程掌握，条项目

成绩比例

BootStrap语言基础（10%）

条理非常清晰，条理清晰，结资讯报告 结构合理，收集资源丰富，观点构合理，有较丰富资源丰35%

独到 富，有自己合理的观点

编程掌握，条理和结构基本合理，资料内容较少

理和结构不合理，无说明资料内容

能熟练进行能较好完成能基本完成Dreamweave安装、环境设DreamweaveD安装、环境设置和调用编程指令，能解决常见的问题，掌握一定的操作技巧

Dreamweave安装、环境设置和调能解决一些使用中的问题，但操作手段单一

代码编写规不能独立完成Dreamweaver软件操作（5%）

自评和互评

置和调用编程指令，能解决常见的问题，多样化的操作手段和技巧

Dreamweave安装、环境程指令，无法解决出现的应用问题

用编程指令，设置和调用编代码编写错误 、规范、整BootStrap中的事件处理和动画效果（20%）

集中测评

洁、注释无错误；

方法合理高效；运用命令快速，技巧手段丰富

综合素质考核（20%）

代码编写规范、整洁、注释无错误；浏览器运行顺畅，选用方法错误，命令操作多

代码规范、整洁、注释无错误；浏览器运行顺畅，能选用较合理的方法

范、整洁、注释无错误；浏览器运行顺畅，选用方法能较合理，命手段单一

令操作较慢，陌生和错误较 见附表3-1

实训成果完

实训成果完整，整，代码编写代码编写规范使用BootStrap操作DOM（20%）

小组评议、报告和教师评价

准确；格式非常标准，条理清查，有详细过程记录和分析并能提出很多新的方法和建议

规范准确；格式符合标准，内容完整，有一定过程记录和分析，选用方法不够丰富，没有多方面的比较。

实训成果基本完整，但代码编写规范不够；报告格式基本符合标准，有少许错误，内容完整，但缺少过程记录

实训成果基本完整，代码编写和效果准确，报告格式基本符合标准，有少许错误，内容完整，但缺少过程记录

代码符合基本准确、但不实训成果不完整，注释不完全准确；报告格式不符合标准，错误较多，无过程记录和说明

2

实训成果完整，实训成果完代码编写和效果规范准确；格使用BootStrap操作表单和表格（25%）

小组评议、报告和教师评价

式非常标准，条理清查，有详细过程记录和分析并能提出很多新的方法和建议

Less在BootStrap中的应用（10%）

集中测评

样式符合标准代码、布局、注整，代码编写和效果准确；内容完整，有一定过程记录和分析，选用方法不够丰富，没有多方面的比较。

代码符合标准编程、布局、注实训成果不完整，代码和样式布局规不完全准确；报告格式不符合标准，错误较多，无过程记录和说明

输出完全不按照编程标准进35%

释整洁；

选用方法合理高效；运用命令快速，技巧手段丰富

释页面能做到美观整洁；有一定的编程技巧，能选用较合理的方法

能完全符合注释正确，有少许错误；选用方法能较合理，命令操作较慢，熟练度欠缺

行，不正解、耗美观整洁；选用方法错误，命令操作陌生和错误较多

标排版整洁、时长；页面不综合素质考核（20%）

见附表3-1

能熟练操作

能熟练操作BootStrap能基本独立完成或在老师少许指导下简单网页特效任务，代码大体能符合标准，代码基本准确，有少许错误

无

法能熟练操作BootStrap编程和测试，能独立完成简单的网BootStrap UI插件页特效。制作符自评和互评

合标准，美观，并能自己解决问题，并能指导他人进行操作

BootStrap编程和测试，独立完成简单网页特效任务，制作符合标准，美观，并能解决一定的应用问题

BootStrap命语言，但无法独立完成排版布局任务，排版不完整，规范性差

编程和测试，令或仅能基本4

的使用（30%）

30%

综合素质考核（20%）

见附表3-1

100% 合计

附表3-1 综合素质考核评价标准

项目公共

考核点

建议考

核方式

优

评价标准

良 及格

1.工作与职业操守（30％）

评教师评价

＋自评＋互评

安全、文明工作，具有良好的职业操守

安全文明工作，职业操守较好

没出现违纪违规现象

2.学习态度（30％） 教师评价

学习积极性高，虚心好学

学习积极性较高 没有厌学现象

3.团队合作精神（20％）

互评

具有良好的团队合作精神，热心帮助小组其他成员

具有较好的团队合作精神，能帮助小组其他成员

能配合小组完成项目任务

4.交流及表达能力（10％）

互评＋教师

评价

能用专业语言正确流利地展示项目成果

能用专业语言正确、较为流利地阐述项目

能用专业课文基本正确地阐述项目，无重大失误

5.组织协调能力（10％）

互评＋教师

评价

能根据工作任务对资源进行合理分配，同时正确控制、激励和协调小组活动过程

能工作条件地资源进行较合理分配，同时较正确控制、激励和协调小组活动过程

能根据工作任务对资源进行分配，同时控制、激励和协调小组活动过程，无重大失误

注：各项目考核过程中要注意考核工作与职业操守、学习态度、团队合作精神、交流及表达能力、组织协调能力等内容。

（三）教材编写建议

1、必须依据本课程标准编写教材。

2、教材应充分体现任务导向、实践引领的课程设计思想。将网页布局技术按职业技能标准要求，分解成典型的工作任务，按照知识点和技能点的不同分解为不同的学习情境。

3、教材应与后台、前端合作开发，充分反映最新的科研动态和企业实践新成果，吸纳、更新知识点和技能点，使教材具有先进性、职业性和指导性。

4、教材内容要强化技能点的培养和知识点的应用。

5、教材表达必须精炼、准确、科学。

（四）实验实训设备配置建议

教学在一体化教室进行，配置多媒体展示、较高配置计算机设备，计算机配备数量要满足我院常规班级人数和保有一定工作余量，可按1人配置一台。

（五）课程资源开发与利用建议

1、充分利用我院合作企业的优势，在真实的工作情境中突出工学结合，选择典型的工作为实训任务，实现实训与生产相结合。

2、任课教师应建立好课后教学服务平台，做好课外辅导，拓展课外教学形式，形成以点带面、以强带弱、互帮互学的教学风气。

3、积极开发校外实训基地，充分利用企业资源强化生产性实训，提升学生的职业素养和职业能力。

4、充分利用各类教学资源，实现多渠道的资源共享，为学生提供完备的参考资料。组织教师开发多媒体课件、录制教学视频、编写指导资料，为学生提供参考网站、书目和工程资料，强化针对性学习。

（六）其它

本课程是学生进行排版布局的课程，所以要重视培养学生严肃认真的学习工作态度，，形成良好的绘图习惯，灵活准确高效的制作出网页效果图。

通过本课程学习，还应使学生具备将来自主学习和终身学习的能力，使学生具备有一定的知识拓展能力，让学生掌握活的知识，从而形成学生可持续发展提高的能力。

五、其它说明

本课程标准适用专业，有关附录及说明。