BootStrap开发技术课程标准doc.docx
《BootStrap开发技术课程标准doc.docx》由会员分享，可在线阅读，更多相关《BootStrap开发技术课程标准doc.docx（42页珍藏版）》请在冰豆网上搜索。
BootStrap开发技术课程标准doc
v1.0可编辑可修改
《bootstrap》课程标准
教研室主任：
专业带头人：
系（部）主任：
教务处处长：
教学副院长：
审核批准日期：
二○一七年五月
《bootstrap》课程标准
（基本信息）
1
v1.0可编辑可修改
课程编码：
课程类别：
专业方向课程
适应专业：
网页设计
开设时间：
大三上期
学时数：
56学时
一、课程概述
（一）课程性质
Bootstrap，来自Twitter，是目前最受欢迎的前端框架。
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。
Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。
本教程将向您讲解Bootstrap框架的基础，通过学习这些内容，您将可以轻松地创建Web项目。
教程被分为Bootstrap基本结构、BootstrapCSS、Bootstrap布局组件和Bootstrap插件几个部分。
每个部分都包含了与该主题相关的简单有用的实例。
（二）课程基本理念
本课程通过企业项目开发流程为情景，学习并掌握BootStrap开发的基础知识和基本开发技能。
学生在学习本课程后具有一定的专业能力，可激发学生对后续专业课程的学习兴趣。
课程结构上遵循企业开发“流程化”、项目“兴趣化”、教学“项目实战化”、模式“前瞻化”、教材“权威化”、授课“案例化”等国内领先的IT工程师培养模式，并且结合科学的考核评价模式。
通过全方位课程设计、全真的工作环境、探索研究工学结合的培养模式，提高学生职业技能，最终实现岗位无缝对接。
（三）课程的设置与设计思路
本课程立足于培养学生的动手实践能力，教学活动基本上围绕着
2
v1.0可编辑可修改
职业导向而进行，对课程内容的选择标准进行创造性的根本改革，打
破以书本知识传授为主要特征的传统学科课程模式，转变为以工作情
景任务为中心组织课程内容和实施课程教学，让学生在完成具体项目
的过程中发展职业能力并掌握相关理论知识，真正做到学以致用，从
而发展职业能力。
本课程的框架结构，经过与企业专家系统的讨论分析，按实际需
要及由简入繁的原则，最终确定了学习培养标准。
最终达到掌握
BootStrap主流框架的目标，本课程共80课时，其中实践50课时。
二、课程目标
（一）职业技能目标
1、能够熟练使用CSS结合HTML实现网页布局。
2、熟练使用文档对象模型和事件驱动，能够很好的实现交互式
操作。
3、熟练使用Bootstrap中的对象，实现网页的动态效果。
4、熟练使用Bootstrap对表单、表格和事件的操作。
5、熟练使用Bootstrap与JavaScript进行网页异步交互设计。
6、事件驱动的程序设计思想，熟练使用JavaScript中的对象，
实现网页特效。
7、熟练使用JavaScriptUI及JavaScript第三方插件。
8、网页设计布局合理，色彩搭配合理，网页操作方便。
9、设计过程中充分考虑浏览器兼容等问题，并做适当处理。
（二）职业素养目标
3
v1.0可编辑可修改
1、培养学生“爱岗、敬业、细致、求精”的职业道德与情感。
2、培养学生良好的动手实践习惯，尤其注重挖掘学生的潜质。
3、注重培养学生与社会接轨。
4、培养学生严谨的行事风格。
5、培养学生具有踏实工作作风，良好的观察和思考能力强以及
团队合作能力。
（三）职业技能证书考核要求
通过该门课程学习学生可以参加全国信息技术应用水平竞赛或
参加行业资格认证考试，获得相应职业技能资格证书。
三、内容标准
（一）学习目标：
1BootStrap入门篇BootStrap简介及安装BootStrapCSS概览BootStrap网格系统BootStrap排版BootStrap代码BootStrap表格BootStrap表单BootStrap按钮BootStrap图片BootStrap辅助类BootStrap响应式实用工具
4
v1.0可编辑可修改
2BootStrap进阶篇BootStrap组件BootStrap字体图标BootStrap下拉菜单BootStrap按钮组BootStrap按钮下拉菜单BootStrap输入框组BootStrap导航元素BootStrap导航栏BootStrap面包屑导航BootStrap分页BootStrap标签BootStrap微章BootStrap超大屏幕BootStrap页面标题BootStrap缩略图BootStrap警告BootStrap进度条BootStrap多媒体对象BootStrap列表组BootStrap面板BootStrapwells
5
v1.0可编辑可修改
3BootStrap插件篇
3.1BootStrap插件概览
3.2BootStrap过渡效果
3.3BootStrap模态框
3.4BootStrap下拉菜单
3.5BootStrap滚动监听
3.6BootStrap标签页
3.7BootStrap提示工具
3.8BootStrap弹出框
3.9BootStrap警告框
3.10BootStrap按钮
3.11BootStrap折叠
3.12BootStrap轮播
3.13BootStrap附加导航BootStrap其他篇BootStrapUI编辑器BootStrapv2教程BootStrapHTML编码规范BootStrapCSS编码规范BootStrap可视化布局Less教程
6
v1.0可编辑可修改
（二）活动安排：
1、基于工作过程的课程开发理念，先进行综合职业行动领域和情境
分析，然后深入企业调研和行业专业研讨，最终分解和确定学习任务。
2、根据情景任务，开发相应的课程教案，组织课程资源。
3、推行一体化教学模式，强化教与学的及时互动，进行动态的教学
评价和反馈机制。
4、建立课后网络教学和学习平台，强化课后训练和扩充学习资源，
提供课后教学支持。
5、组织专题技术讲座和讨论，加强对新技术的掌握。
6、加强校企联动，鼓励走入企业参加生产实训，使学生加深对BootStrap开发技能在实际工作应用的认识和掌握。
8、完善项目化教材编写，组织教师参加高层次技术培训和企业工程
实践。
9、组织参加各层次的网页布局兴趣活动和比赛。
（三）知识要点：
1、BootStrap概述
2、BootStrap基本结构
3、BootStrapCSS
4、BootStrap布局组件
5、BootStrap插件
6、BootStrapUI编辑器
7、BootStrapv2教程
8、BootStrapHTML编码规范
9、BootStrapCSS编码规范
10、BootStrap可视化布局
11、Less教程
（四）技能要点：
7
v1.0可编辑可修改
1、具备熟练使用与操作Dreamweaver软件环境的能力；
2、具备基础JavaScript语言基础；
3、具备使用Dreamweaver准确进行编程运行以及解决运行测试能力；
4、具备熟练的编程操作能力和输出调试能力；
6、具备中级制排版和配色的技能水平。
四、实施建议
（一）教学建议
1、课程项目结构与学时分配
为使学生掌握利用Dreamweaver软件熟练进行网页编程能力所需的知识与技能，本课程以网页编程和输出为贯穿项目，并由基础网页编程3个子项目来组织教学，将职业行动领域的工作过程融合在项目训练中。
本课程项目结构与学时分配见表1。
表1
Bootstrap开发技术课程项目（学习情境）内容与学时分配表
项目编号子项目名称子项目内容支撑知识学时
1、Bootstrap包含了1、网格行为
一个响应式的、移动2、最大容器宽度
设备优先的、不固定3、Class前缀
的网格系统，可以随4、列#
着设备和视口大小5、最大列宽
1Bootstrap网格系统的增加而适当的增12
加到最多12列
2、媒体查询：
用来创建
Bootstrap网格系统中
的关键的分界点，根据
不同的视口大小显示不
8
v1.0可编辑可修改
同的内容
1、内联子标题
1、
我是标题3
2、强调
h3.
我是副
3、缩写
标
3
4、地址
h3
5、引用
2、
2
Bootstrap排版
6、列表
13
3、title="World
Wide
Wed">WWW
4、
dress>
1、放置页眉和页脚的
1、inline-
默认。
方式有三种
页眉和页脚与页面
2、使
用内容位于行内。
data-position
属fixed-
页面和页
性来定位页眉和页
脚会留在页面顶部
3
定位页眉和页脚
13
脚
和底部。
fullscreen
-与
fixed类似;页面和
页脚会留在页面顶
部和底部
JavaScript插件
1、jQueryMobile
导航1、导航栏由一组
4
18
栏
水平排列的链
9
v1.0可编辑可修改
2、jQueryMobile列表接构成，通常位
于页眉或页脚
内部。
2、
3、默认地，导航栏
中的链接会自动转
换为按钮（无需
data-role="button
"）。
4、请使用
data-role="navbar
"属性来定义导航
栏：
2、课程教学实施
建议本课程重视学生在校学习与实际工作的一致性，采取任务驱
动、项目导向的教学模式，每个具体学习情境设计见表2-1、2-2、
2-3详表。
表2-1
BootStrap开发技术学习情境表一
学习情境（项目）：
创建一个web项目学时12
能力目标：
通过理论和实践相结合的教学方式，使学员熟练掌握
BootStrap。
项目目标知识目标：
1、添加导航栏完全采用Bootstrap提供的样式
2、添加内容
10
v1.0可编辑可修改
任务一：
在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、定义基本的
2
多媒体演示法
下发任务书、下发任务说明书，让学生
HTML元素样
学习资料
提前了解任务内容，并提
式
前进行资料的学习
11
v1.0可编辑可修改
引入工作任务，分析目标，1、查找节点
摆出问题，做出任务计划，2、创建节点
2、分析任务，提
将完成任务所需要的基
3、插入节点
出问题，制定实
本理论和基本概念讲授
4、删除节点
施计划和方案
给学生，然后经过讨论
5、复制节点
优化，确定最终工作任
6、替换节点
务方案。
7、包裹节点
1、属性操作
演示实现任务过程，解释
2、样式操作
讲授法
演示法3
在编程过程中如何使用
3、任务演示和实
这些指令，以及在应用
施
这些指令时的注意事项
演示与操作法
3、设置和获取
案例法3
HTML、文本值
情境教学法
4、遍历节点
及创新。
5、CSSDOM操作
技能实训，提出进一步问
4、技能实训和知演示与操作法
题，拓展相应知识，强化4
识拓展讨论交流法
专项技能
12
v1.0可编辑可修改
进行自评、互评交流，分
析工作过程的问题和不
足，并总结成功与失败的
经验和教训，发扬成绩，
找出不足。
交互检查法
同时结合一定形式的理论
5、检查和评估讨论法和实践综合考查，成果展
小组演示法
示、提交实训报告和多种
形式的虚拟情趣活动等，
及时得到教学反馈信息，
做出教学评价
表2-2
BootStrap开发技术学习情境表二
学习情境（项目）：
Bootstrap表格、表单的使用学时13
能力目标：
熟练掌握Bootstrap的使用，能够手动写出Bootstrap的一些
项目目标
常见特效，并学会插件的使用。
13
v1.0可编辑可修改
知识目标：
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、项目阶段性考核内容和评价标准
步骤教学活动过程主要知识点教学方法建议学时
14
v1.0可编辑可修改
1、收集任务资讯，下
1、表单文本框应
发任务说明书和相
用
关参考资料
2、多行文本框应
2、分析任务要求，制定
用
任务工作计划，确定3、复选框的应用
案例法
工作方案。
4、列表矿工的应
讨论法
1、任务一教学
3
3、任务实施：
用
演示和操作法
讲解相应命令操作
5、表单验证
多媒体展示成品和体验
效果，完整演示绘制过程
4、技能实训，拓展知识
5、组织讨论和总结
15
v1.0可编辑可修改
任务二1、更改表格颜色
1、收集任务资讯，下2、展开与关闭表
发任务说明书和相格
关参考资料3、筛选表格内容
2、分析任务要求，制定
任务工作计划，确定
案例法
工作方案。
讨论法
2、任务二教学3、任务实施：
10演示和操作法
讲解相应命令操作，
多媒体展示成品和体验
效果，完整演示布局过
程，解答学生在操作中的
问题。
4、技能实训，拓展知识
5、组织讨论和总结
成果检查和展示，分析反
思工作过程并交流，对绘
交互检查法
图进行适当集中测评，多
3、检查和评估讨论法角度检查学生学习情况，
小组演示法
及时教学反馈，强化和弥
补教学不足。
表2-3
BootStrap开发技术学习情境表三
学习情境（项目）：
利用BootStrap
进行快速Web开发
学时
13
16
v1.0可编辑可修改
能力目标：
能够对BootStrap有一个简单的认识了解，清楚BootStrap
与
项目目标
其他JS框架的不同，掌握
BootStrap的常用语法、使用技巧及注意事项。
知识目标：
全局显示、排版和链接
任务一:
使用Bootstrap
栅格系统（布局）
任务二：
使用Bootstrap
掌握下拉菜单
项目任务
任务三：
使用Bootstra
创建导航条
任务四：
使用Bootstrap
创建按钮
任务五：
使用Bootstrap
模仿起筷首页效果
1、布局栅格系统的使用
学生知识
2、下拉菜单方法，导航条创建方法，按钮创建方法
与能力准备
3、利用Bootstrap写出首页效果
1、项目任务案例材料
2、实际操作教学演示视频
教学材料准备3、技能实训样品资料（完整网页两套）
4、多媒体教学课件
5、项目阶段性考核内容和评价标准
教学活动过程主要知识点教学方法建
步骤学时
议
17
v1.0可编辑可修改
1、提前下达任务书，让
1、bootstrap
响应式
学生收集资料，展开
布局
前期的自学，摆出问
2、Bootstrap
实现响
题。
应式导航栏效果
2、任务分析和分解，规
3、BootStrap
实现响
划任务方案。
应式布局导航栏折叠
3、任务实施：
隐藏效果
项目需求阅读，讲解
4、Bootstrap
响应式
案例法
Bootstrap基础知识和制
导航、轮播图
操作法
1、任务一教学
3
图规范，全面演示和操作
情境教学法
和在生活中的实际运用
并结合视频、生活案例等
多种手段进行介绍
Bootstrap特点
4、技能实训和知识拓展
5、组织交流讨论
6、以虚拟设计竞标方式
进行成果汇报和展示
18
v1.0可编辑可修改
2、任务二教学
1、收集任务资料，下发1、bootstrap网页
任务指导书框架的使用方法
2、罗列任务要点，制定2、利用MVC和
工作计划和方案Bootstrap快速
3、任务实施：
搭建响应式个人
案例法
视频展示变成过程博客站案例
演示法
和效果，讲解Ajax的设
情境教学法
计要点，完整操作演示运
行出效果
4、组织成果公开展示和
评比
5、技能实训和知识拓展
7
3、任务三教学
1、Bootstrap
1、下发任务指导书，分
Metronic完全响应式
析任务要点，提出任
管理模板之菜单栏学
务要求
习笔记
2、组织讨论，形成完善
2、Bootstrap响应式
的实施规划和技术方
侧边栏改进版
案
3、Bootstrap实现圆
案例法
操作法
3
情境教学法
3、任务实施：
角、圆形头像和响应
按照任务要求，讲授
式图片
排版中困难知识点要点
4、BootStrap创建响
制作和流程，操作演示
应式导航条实例代码
4、技能实训和知识拓展
5、总结
19
组织学生加强操作
过程的自查自评，同时以
小组交流形式进行互评
强化对实训过程和
实训报告的监督和检查，
以理论和上机结合
5、检查和评估
形式有针对性对表格和
表单嵌套进行教学测评，
以检查教学效果
课后加强教学交流
辅导平台，及时解决学生
问题。
v1.0可编辑可修改
交互检查
法
讨论法
小组操作
法
升级会员 