《BootStrap开发技术》课程标准.docx

1、BootStrap开发技术课程标准bootstrap课程标准教研室主任： 专业带头人： 系(部)主任： 教务处处长： 教学副院长： 审核批准日期： 二一七年五月bootstrap课程标准（基本信息）课程编码：课程类别：专业方向课程适应专业：网页设计开设时间：大三上期学 时 数：56学时一、课程概述（一）课程性质Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本教程将向您讲解 Bootstra

2、p 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。（二）课程基本理念本课程通过企业项目开发流程为情景，学习并掌握BootStrap开发的基础知识和基本开发技能。学生在学习本课程后具有一定的专业能力，可激发学生对后续专业课程的学习兴趣。课程结构上遵循企业开发“流程化”、项目“兴趣化”、教学“项目实战化”、模式“前瞻化” 、教材“权威化”、授课“案例化”等国内领先的IT工程师培养模式，并且结合科学的考

3、核评价模式。通过全方位课程设计、全真的工作环境、探索研究工学结合的培养模式，提高学生职业技能，最终实现岗位无缝对接。（三）课程的设置与设计思路本课程立足于培养学生的动手实践能力，教学活动基本上围绕着职业导向而进行，对课程内容的选择标准进行创造性的根本改革，打破以书本知识传授为主要特征的传统学科课程模式，转变为以工作情景任务为中心组织课程内容和实施课程教学，让学生在完成具体项目的过程中发展职业能力并掌握相关理论知识，真正做到学以致用，从而发展职业能力。本课程的框架结构，经过与企业专家系统的讨论分析，按实际需要及由简入繁的原则，最终确定了学习培养标准。最终达到掌握BootStrap主流框架的目标，

4、本课程共80课时，其中实践50课时。二、课程目标（一）职业技能目标1、能够熟练使用CSS结合HTML实现网页布局。2、熟练使用文档对象模型和事件驱动，能够很好的实现交互式操作。 3、熟练使用Bootstrap中的对象，实现网页的动态效果。4、熟练使用Bootstrap对表单、表格和事件的操作。 5、熟练使用Bootstrap与JavaScript进行网页异步交互设计。6、事件驱动的程序设计思想，熟练使用JavaScript中的对象，实现网页特效。7、熟练使用JavaScriptUI及JavaScript第三方插件。 8、网页设计布局合理，色彩搭配合理，网页操作方便。 9、设计过程中充分考虑浏览

5、器兼容等问题，并做适当处理。（二）职业素养目标1、培养学生“爱岗、敬业、细致、求精”的职业道德与情感。2、培养学生良好的动手实践习惯，尤其注重挖掘学生的潜质。3、注重培养学生与社会接轨。4、培养学生严谨的行事风格。5、培养学生具有踏实工作作风，良好的观察和思考能力强以及团队合作能力。（三）职业技能证书考核要求通过该门课程学习学生可以参加全国信息技术应用水平竞赛或参加行业资格认证考试，获得相应职业技能资格证书。三、内容标准（一）学习目标：1BootStrap入门篇BootStrap简介及安装BootStrap CSS 概览BootStrap网格系统BootStrap排版BootStrap代码Bo

6、otStrap表格BootStrap表单BootStrap按钮BootStrap图片BootStrap辅助类BootStrap响应式实用工具2BootStrap进阶篇BootStrap组件BootStrap字体图标BootStrap下拉菜单BootStrap按钮组BootStrap按钮下拉菜单BootStrap输入框组BootStrap导航元素BootStrap导航栏BootStrap面包屑导航BootStrap分页BootStrap标签BootStrap微章BootStrap超大屏幕BootStrap页面标题BootStrap缩略图BootStrap警告BootStrap进度条BootStr

7、ap多媒体对象BootStrap列表组BootStrap面板BootStrap wells3BootStrap插件篇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 其他篇BootStrap UI编辑器BootStrap v2

8、教程BootStrap HTML 编码规范BootStrap CSS 编码规范BootStrap 可视化布局Less 教程（二）活动安排：1、基于工作过程的课程开发理念，先进行综合职业行动领域和情境分析，然后深入企业调研和行业专业研讨，最终分解和确定学习任务。2、根据情景任务，开发相应的课程教案，组织课程资源。3、推行一体化教学模式，强化教与学的及时互动，进行动态的教学评价和反馈机制。4、建立课后网络教学和学习平台，强化课后训练和扩充学习资源，提供课后教学支持。5、组织专题技术讲座和讨论，加强对新技术的掌握。6、加强校企联动，鼓励走入企业参加生产实训，使学生加深对BootStrap开发技能在实

9、际工作应用的认识和掌握。8、完善项目化教材编写，组织教师参加高层次技术培训和企业工程实践。9、组织参加各层次的网页布局兴趣活动和比赛。（三）知识要点：1、BootStrap概述2、BootStrap基本结构3、BootStrap CSS4、BootStrap 布局组件5、BootStrap插件 6、BootStrap UI编辑器7、BootStrap v2教程8、BootStrap HTML 编码规范9、BootStrap CSS 编码规范10、BootStrap 可视化布局11、Less 教程（四）技能要点：1、具备熟练使用与操作Dreamweaver软件环境的能力；2、具备基础JavaSc

10、ript语言基础；3、具备使用Dreamweaver准确进行编程运行以及解决运行测试能力；4、具备熟练的编程操作能力和输出调试能力；6、具备中级制排版和配色的技能水平。四、实施建议（一）教学建议1、课程项目结构与学时分配为使学生掌握利用Dreamweaver软件熟练进行网页编程能力所需的知识与技能，本课程以网页编程和输出为贯穿项目，并由基础网页编程3个子项目来组织教学，将职业行动领域的工作过程融合在项目训练中。本课程项目结构与学时分配见表1。表1 Bootstrap开发技术课程项目（学习情境）内容与学时分配表项目编号子项目名称子项目内容支撑知识学时1Bootstrap网格系统1、Bootstr

11、ap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备和视口大小的增加而适当的增加到最多12列2、媒体查询：用来创建 Bootstrap 网格系统中的关键的分界点，根据不同的视口大小显示不同的内容1、网格行为2、最大容器宽度3、Class前缀4、列#5、最大列宽122Bootstrap排版1、内联子标题2、强调3、缩写4、地址5、引用6、列表1、我是标题3 h3. 我是副标3 h32、 3、WWW4、 133定位页眉和页脚1、放置页眉和页脚的方式有三种2、使用data-position 属性来定位页眉和页脚1、inline - 默认。页眉和页脚与页面内容位于行内。fixed -

12、 页面和页脚会留在页面顶部和底部。fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部134JavaScript 插件1、jQuery Mobile导航栏2、jQuery Mobile列表1、导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。2、3、默认地，导航栏中的链接会自动转换为按钮（无需 data-role=button）。4、请使用 data-role=navbar 属性来定义导航栏：182、课程教学实施建议本课程重视学生在校学习与实际工作的一致性，采取任务驱动、项目导向的教学模式，每个具体学习情境设计见表2-1、2-2、2-3详表。表2-1BootSt

13、rap开发技术学习情境表一学习情境（项目）：创建一个web项目学时12项目目标能力目标：通过理论和实践相结合的教学方式，使学员熟练掌握BootStrap。知识目标：1、添加导航栏完全采用Bootstrap提供的样式2、添加内容项目任务任务一：在web目录下创建css目录，在css目录下创建boostrap目录，将压缩版的css文件bootstrap.min.css 复制到此目录下。任务二：在index.jsp中引入样式，在head中添加下面代码。任务三：添加导航栏完全采用Bootstrap提供的样式。任务四：在nav标签同级下面添加显示内容的div。任务五：导航栏将内容遮挡住了，需通过css样

14、式进行控制。学生知识与能力准备1、引入了预编译版的 CSS 和 JavaScript 文件，创建一个Web项目。教学材料准备1、BootStrap发展背景材料1、Bootstrap简介2、Bootstrap安装手册和说明3、Bootstrap命令快捷键表4、Bootstrap特效基础案例5-10个5、相关教学教案6、考核内容和评价标准步骤教学活动过程主要知识点教学方法建议学时1、BootStrap资讯收集和下发任务书、学习资料收集和展示BootStrap技术相关背景知识，提出总体课程目标和任务要求，下发任务说明书，让学生提前了解任务内容，并提前进行资料的学习1、全局的CSS 设置链接样式2、定

15、义基本的 HTML 元素样式多媒体演示法22、分析任务，提出问题，制定实施计划和方案引入工作任务，分析目标，摆出问题，做出任务计划，将完成任务所需要的基本理论和基本概念讲授给学生，然后经过讨论优化，确定最终工作任务方案。1、查找节点2、创建节点3、插入节点4、删除节点5、复制节点6、替换节点7、包裹节点讲授法演示法33、任务演示和实施演示实现任务过程，解释在编程过程中如何使用这些指令，以及在应用这些指令时的注意事项及创新。1、属性操作2、样式操作3、设置和获取HTML、文本值4、遍历节点5、CSS DOM操作演示与操作法案例法情境教学法34、技能实训和知识拓展技能实训，提出进一步问题，拓展相应

16、知识，强化专项技能演示与操作法讨论交流法45、检查和评估进行自评、互评交流，分析工作过程的问题和不足，并总结成功与失败的经验和教训，发扬成绩，找出不足。同时结合一定形式的理论和实践综合考查，成果展示、提交实训报告和多种形式的虚拟情趣活动等，及时得到教学反馈信息，做出教学评价交互检查法讨论法小组演示法表2-2BootStrap开发技术学习情境表二学习情境（项目）：Bootstrap 表格、表单的使用学时13项目目标能力目标：熟练掌握Bootstrap的使用，能够手动写出Bootstrap的一些常见特效，并学会插件的使用。知识目标：1、Bootstrap 表格2、Bootstrap 表格类3、Bo

17、otstrap 表格上下文类4、Bootstrap 表单布局5、Bootstrap 垂直表单6、Bootstrap 内联表单7、Bootstrap 水平表单8、Bootstrap 支持的表单控件9、Bootstrap 表单控件状态10、Bootstrap 表单控件大小项目任务任务一：设置内边距以及水平分割线任务二：在内容主体上看到条纹任务三：表格周围增加边框任务四：隔行换色任务五：精简表格学生知识与能力准备1、获取表单元素2、Bootstrap中操作样式3、文本框获取焦点、失去焦点时的事件处理教学材料准备1、项目任务所需教学案例2、项目实施标准3、演示视频资料4、技能实训网页资料案例5-10个

18、5、多媒体课件6、项目阶段性考核内容和评价标准步骤教学活动过程主要知识点教学方法建议学时1、任务一教学1、收集任务资讯，下发任务说明书和相关参考资料2、分析任务要求，制定任务工作计划，确定工作方案。3、任务实施：讲解相应命令操作多媒体展示成品和体验效果，完整演示绘制过程4、技能实训，拓展知识5、组织讨论和总结1、表单文本框应用2、多行文本框应用3、复选框的应用4、列表矿工的应用5、表单验证案例法讨论法演示和操作法32、任务二教学任务二1、收集任务资讯，下发任务说明书和相关参考资料2、分析任务要求，制定任务工作计划，确定工作方案。3、任务实施：讲解相应命令操作，多媒体展示成品和体验效果，完整演示

19、布局过程，解答学生在操作中的问题。4、技能实训，拓展知识5、组织讨论和总结1、更改表格颜色2、展开与关闭表格3、筛选表格内容案例法讨论法演示和操作法103、检查和评估成果检查和展示，分析反思工作过程并交流，对绘图进行适当集中测评，多角度检查学生学习情况，及时教学反馈，强化和弥补教学不足。交互检查法讨论法小组演示法表2-3BootStrap开发技术学习情境表三学习情境（项目）：利用BootStrap进行快速 Web 开发学时13项目目标能力目标：能够对BootStrap有一个简单的认识了解，清楚BootStrap与其他JS框架的不同，掌握BootStrap的常用语法、使用技巧及注意事项。知识目标

20、：全局显示、排版和链接项目任务任务一: 使用Bootstrap栅格系统（布局）任务二：使用Bootstrap掌握下拉菜单任务三：使用Bootstra创建导航条任务四：使用Bootstrap创建按钮任务五：使用Bootstrap模仿起筷首页效果学生知识与能力准备1、布局栅格系统的使用2、下拉菜单方法，导航条创建方法，按钮创建方法3、利用Bootstrap写出首页效果教学材料准备1、项目任务案例材料2、实际操作教学演示视频3、技能实训样品资料（完整网页两套）4、多媒体教学课件5、项目阶段性考核内容和评价标准步骤教学活动过程主要知识点教学方法建议学时1、任务一教学1、提前下达任务书，让学生收集资料，

21、展开前期的自学，摆出问题。2、任务分析和分解，规划任务方案。3、任务实施：项目需求阅读，讲解Bootstrap基础知识和制图规范，全面演示和操作和在生活中的实际运用并结合视频、生活案例等多种手段进行介绍Bootstrap特点4、技能实训和知识拓展5、组织交流讨论6、以虚拟设计竞标方式进行成果汇报和展示1、bootstrap响应式布局2、Bootstrap实现响应式导航栏效果3、BootStrap实现响应式布局导航栏折叠隐藏效果4、Bootstrap响应式导航、轮播图案例法操作法情境教学法32、任务二教学1、收集任务资料，下发任务指导书2、罗列任务要点，制定工作计划和方案3、任务实施：视频展示变

22、成过程和效果，讲解Ajax的设计要点，完整操作演示运行出效果4、组织成果公开展示和评比5、技能实训和知识拓展1、bootstrap网页框架的使用方法2、利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站案例案例法演示法情境教学法73、任务三教学1、下发任务指导书，分析任务要点，提出任务要求2、组织讨论，形成完善的实施规划和技术方案3、任务实施：按照任务要求，讲授排版中困难知识点要点制作和流程，操作演示4、技能实训和知识拓展5、总结1、Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记2、Bootstrap响应式侧边栏改进版3、Bootstrap实现圆角、

23、圆形头像和响应式图片4、BootStrap创建响应式导航条实例代码案例法操作法情境教学法35、检查和评估组织学生加强操作过程的自查自评，同时以小组交流形式进行互评强化对实训过程和实训报告的监督和检查， 以理论和上机结合形式有针对性对表格和表单嵌套进行教学测评，以检查教学效果课后加强教学交流辅导平台，及时解决学生问题。交互检查法讨论法小组操作法（二）考核评价建议为全面考核学生的知识与技能掌握情况，本课程主要以过程考核为主。课程考核涵盖项目（学习情境）任务全过程，主要包括项目实施等几个方面。各项目（学习情境）具体考核方式与考核标准比例见表3。表3 BootStrap程序开发技术课程考核方式与考核标

24、准项目编号考核点及项目分值比建议考核方式评价标准项目成绩比例优良及格不及格1BootStrap语言基础（10%）资讯报告条理非常清晰，结构合理，收集资源丰富，观点独到条理清晰，结构合理，有较丰富资源丰富，有自己合理的观点基本能说明对BootStrap编程掌握，条理和结构基本合理，资料内容较少不能反映说明对BootStrap编程掌握，条理和结构不合理，无说明资料内容35%Dreamweaver软件操作（5%）自评和互评能熟练进行Dreamweave安装、环境设置和调用编程指令，能解决常见的问题，多样化的操作手段和技巧能较好完成DreamweaveD安装、环境设置和调用编程指令，能解决常见的问题，

25、掌握一定的操作技巧能基本完成Dreamweave安装、环境设置和调用编程指令，能解决一些使用中的问题，但操作手段单一不能独立完成Dreamweave安装、环境设置和调用编程指令，无法解决出现的应用问题BootStrap中的事件处理和动画效果（20%）集中测评代码编写错误 、规范、整洁、注释无错误；方法合理高效；运用命令快速，技巧手段丰富代码规范、整洁、注释无错误；浏览器运行顺畅，能选用较合理的方法代码编写规范、整洁、注释无错误；浏览器运行顺畅，选用方法能较合理，命令操作较慢，手段单一代码编写规范、整洁、注释无错误；浏览器运行顺畅，选用方法错误，命令操作陌生和错误较多综合素质考核（20%）见附表

26、3-12使用BootStrap操作DOM（20%）小组评议、报告和教师评价实训成果完整，代码编写规范准确；格式非常标准，条理清查，有详细过程记录和分析并能提出很多新的方法和建议实训成果完整，代码编写规范准确；格式符合标准，内容完整，有一定过程记录和分析，选用方法不够丰富，没有多方面的比较。实训成果基本完整，但代码编写规范不够；报告格式基本符合标准，有少许错误，内容完整，但缺少过程记录实训成果不完整，注释不完全准确；报告格式不符合标准，错误较多，无过程记录和说明35%使用BootStrap操作表单和表格（25%）小组评议、报告和教师评价实训成果完整，代码编写和效果规范准确；格式非常标准，条理清查

27、，有详细过程记录和分析并能提出很多新的方法和建议实训成果完整，代码编写和效果准确；内容完整，有一定过程记录和分析，选用方法不够丰富，没有多方面的比较。实训成果基本完整，代码编写和效果准确，报告格式基本符合标准，有少许错误，内容完整，但缺少过程记录实训成果不完整，代码和样式布局规不完全准确；报告格式不符合标准，错误较多，无过程记录和说明Less在BootStrap中的应用（10%）集中测评样式符合标准代码、布局、注释整洁；选用方法合理高效；运用命令快速，技巧手段丰富代码符合标准编程、布局、注释页面能做到美观整洁；有一定的编程技巧，能选用较合理的方法代码符合基本准确、但不能完全符合标排版整洁、注释

28、正确，有少许错误；选用方法能较合理，命令操作较慢，熟练度欠缺输出完全不按照编程标准进行，不正解、耗时长；页面不美观整洁；选用方法错误，命令操作陌生和错误较多综合素质考核（20%）见附表3-14BootStrap UI插件的使用（30%）自评和互评能熟练操作BootStrap编程和测试，能独立完成简单的网页特效。制作符合标准，美观，并能自己解决问题，并能指导他人进行操作能熟练操作BootStrap编程和测试，独立完成简单网页特效任务，制作符合标准，美观，并能解决一定的应用问题能熟练操作BootStrap编程和测试，能基本独立完成或在老师少许指导下简单网页特效任务，代码大体能符合标准，代码基本准确

29、，有少许错误无法BootStrap命令或仅能基本语言，但无法独立完成排版布局任务，排版不完整，规范性差30%综合素质考核（20%）见附表3-1合计100%附表3-1综合素质考核评价标准项目公共考核点建议考核方式评价标准优良及格1.工作与职业操守（30）评教师评价自评互评安全、文明工作，具有良好的职业操守安全文明工作，职业操守较好没出现违纪违规现象2.学习态度（30）教师评价学习积极性高，虚心好学学习积极性较高没有厌学现象3.团队合作精神（20）互评具有良好的团队合作精神，热心帮助小组其他成员具有较好的团队合作精神，能帮助小组其他成员能配合小组完成项目任务4.交流及表达能力（10）互评教师评价能用专业语言正确流利地展示项目成果能用专业语言正确、较