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