BootStrap开发技术课程标准

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

2、Web 工程。教程被分为 Bootstrap 根本构造、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个局部。每个局部都包含了与该主题相关的简单有用的实例。二课程根本理念本课程通过企业工程开发流程为情景，学习并掌握BootStrap开发的根底知识和根本开发技能。学生在学习本课程后具有一定的专业能力，可激发学生对后续专业课程的学习兴趣。课程构造上遵循企业开发流程化、工程兴趣化、教学工程实战化、模式前瞻化、教材权威化、授课案例化等国领先的IT工程师培养模式，并且结合科学的考核评价模式。通过全方位课程设计、全真的工作环境、探索研究工学结合的培养模式，提高学生职

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

4、L实现网页布局。2、熟练使用文档对象模型和事件驱动，能够很好的实现交互式操作。3、熟练使用Bootstrap中的对象，实现网页的动态效果。4、熟练使用Bootstrap对表单、表格和事件的操作。5、熟练使用Bootstrap与JavaScript进展网页异步交互设计。6、事件驱动的程序设计思想，熟练使用JavaScript中的对象，实现网页特效。7、熟练使用JavaScriptUI及JavaScript第三方插件。8、网页设计布局合理，色彩搭配合理，网页操作方便。9、设计过程中充分考虑浏览器兼容等问题，并做适当处理。二职业素养目标1、培养学生爱岗、敬业、细致、求精的职业道德与情感。2、培养学生

5、良好的动手实践习惯，尤其注重挖掘学生的潜质。3、注重培养学生与社会接轨。4、培养学生严谨的行事风格。5、培养学生具有踏实工作作风，良好的观察和思考能力强以及团队合作能力。三职业技能证书考核要求通过该门课程学习学生可以参加全国信息技术应用水平竞赛或参加行业资格认证考试，获得相应职业技能书。三、容标准一学习目标：BootStrap入门篇BootStrap简介及安装BootStrap CSS 概览BootStrap网格系统BootStrap排版BootStrap代码BootStrap表格BootStrap表单BootStrap按钮BootStrap图片BootStrap辅助类BootStrap响应式

6、实用工具BootStrap进阶篇BootStrap组件BootStrap字体图标BootStrap下拉菜单BootStrap按钮组BootStrap按钮下拉菜单BootStrap输入框组BootStrap导航元素BootStrap导航栏BootStrap面包屑导航BootStrap分页BootStrap标签BootStrap微章BootStrap超大屏幕BootStrap页面标题BootStrap缩略图BootStrap警告BootStrap进度条BootStrap多媒体对象BootStrap列表组BootStrap面板BootStrap wellsBootStrap插件篇BootStrap插

7、件概览BootStrap过渡效果BootStrap模态框BootStrap下拉菜单BootStrap滚动监听BootStrap标签页BootStrap提示工具BootStrap弹出框BootStrap警告框BootStrap按钮BootStrap折叠BootStrap轮播BootStrap附加导航BootStrap 其他篇BootStrap UI编辑器BootStrap v2教程BootStrap HTML 编码规BootStrap CSS 编码规BootStrap 可视化布局Less 教程二活动安排：1、基于工作过程的课程开发理念，先进展综合职业行动领域和情境分析，然后深入企业调研和行业专业

8、研讨，最终分解和确定学习任务。2、根据情景任务，开发相应的课程教案，组织课程资源。3、推行一体化教学模式，强化教与学的及时互动，进展动态的教学评价和反应机制。4、建立课后网络教学和学习平台，强化课后训练和扩大学习资源，提供课后教学支持。5、组织专题技术讲座和讨论，加强对新技术的掌握。6、加强校企联动，鼓励走入企业参加生产实训，使学生加深对BootStrap开发技能在实际工作应用的认识和掌握。8、完善工程化教材编写，组织教师参加高层次技术培训和企业工程实践。9、组织参加各层次的网页布局兴趣活动和比赛。三知识要点：1、BootStrap概述2、BootStrap根本构造3、BootStrap CS

9、S4、BootStrap 布局组件5、BootStrap插件6、BootStrap UI编辑器7、BootStrap v2教程8、BootStrap HTML 编码规9、BootStrap CSS 编码规10、BootStrap 可视化布局11、Less 教程四技能要点：1、具备熟练使用与操作Dreamweaver软件环境的能力；2、具备根底JavaScript语言根底；3、具备使用Dreamweaver准确进展编程运行以及解决运行测试能力；4、具备熟练的编程操作能力和输出调试能力；6、具备中级制排版和配色的技能水平。四、实施建议一教学建议1、课程工程构造与学时分配为使学生掌握利用Dreamw

10、eaver软件熟练进展网页编程能力所需的知识与技能，本课程以网页编程和输出为贯穿工程，并由根底网页编程3个子工程来组织教学，将职业行动领域的工作过程融合在工程训练中。本课程工程构造与学时分配见表1。表1 Bootstrap开发技术课程工程学习情境容与学时分配表工程编号子工程名称子工程容支撑知识学时1Bootstrap网格系统Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备和视口大小的增加而适当的增加到最多12列2、媒体查询：用来创立 Bootstrap 网格系统中的关键的分界点，根据不同的视口大小显示不同的容网格行为最大容器宽度Class前缀列#最大列宽12

11、2Bootstrap排版联子标题强调缩写地址引用列表我是标题3 h3. 我是副标3 h3 133定位页眉和页脚放置页眉和页脚的方式有三种使用data-position 属性来定位页眉和页脚inline - 默认。页眉和页脚与页面容位于行。fi*ed - 页面和页脚会留在页面顶部和底部。fullscreen - 与 fi*ed 类似;页面和页脚会留在页面顶部和底部134JavaScript 插件jQuery Mobile导航栏jQuery Mobile列表导航栏由一组水平排列的构成，通常位于页眉或页脚部。默认地，导航栏中的会自动转换为按钮无需 data-role=button。请使用 data-

12、role=navbar 属性来定义导航栏：18课程教学实施建议本课程重视学生在校学习与实际工作的一致性，采取任务驱动、工程导向的教学模式，每个具体学习情境设计见表2-1、2-2、2-3详表。表2-1BootStrap开发技术学习情境表一学习情境工程：创立一个web工程学时12工程目标能力目标：通过理论和实践相结合的教学方式，使学员熟练掌握BootStrap。知识目标：添加导航栏完全采用Bootstrap提供的样式添加容工程任务任务一：在web目录下创立css目录，在css目录下创立boostrap目录，将压缩版的css文件bootstrap.min.css 复制到此目录下。任务二：在inde*

13、.jsp中引入样式，在head中添加下面代码。任务三：添加导航栏完全采用Bootstrap提供的样式。任务四：在nav标签同级下面添加显示容的div。任务五：导航栏将容遮挡住了，需通过css样式进展控制。学生知识与能力准备引入了预编译版的 CSS 和 JavaScript 文件，创立一个Web工程。教学材料准备BootStrap开展背景材料Bootstrap简介Bootstrap安装手册和说明Bootstrap命令快捷键表Bootstrap特效根底案例5-10个相关教学教案考核容和评价标准步骤教学活动过程主要知识点教学方法建议学时BootStrap资讯收集和下发任务书、学习资料收集和展示Boo

14、tStrap技术相关背景知识，提出总体课程目标和任务要求，下发任务说明书，让学生提前了解任务容，并提前进展资料的学习全局的CSS 设置样式定义根本的 HTML 元素样式多媒体演示法22、分析任务，提出问题，制定实施方案和方案引入工作任务，分析目标，摆出问题，做出任务方案，将完成任务所需要的根本理论和根本概念讲授给学生，然后经过讨论优化，确定最终工作任务方案。查找节点创立节点插入节点删除节点复制节点替换节点包裹节点讲授法演示法33、任务演示和实施演示实现任务过程，解释在编程过程中如何使用这些指令，以及在应用这些指令时的考前须知及创新。属性操作样式操作设置和获取HTML、文本值遍历节点CSS DO

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

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

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

18、实训，拓展知识组织讨论和总结更改表格颜色展开与关闭表格筛选表格容案例法讨论法演示和操作法103、检查和评估成果检查和展示，分析反思工作过程并交流，对绘图进展适当集中测评，多角度检查学生学习情况，及时教学反应，强化和弥补教学缺乏。交互检查法讨论法小组演示法表2-3BootStrap开发技术学习情境表三学习情境工程：利用BootStrap进展快速 Web 开发学时13工程目标能力目标：能够对BootStrap有一个简单的认识了解，清楚BootStrap与其他JS框架的不同，掌握BootStrap的常用语法、使用技巧及考前须知。知识目标：全局显示、排版和工程任务任务一: 使用Bootstrap栅格系

19、统布局任务二：使用Bootstrap掌握下拉菜单任务三：使用Bootstra创立导航条任务四：使用Bootstrap创立按钮任务五：使用Bootstrap模仿起筷首页效果学生知识与能力准备布局栅格系统的使用下拉菜单方法，导航条创立方法，按钮创立方法利用Bootstrap写出首页效果教学材料准备工程任务案例材料实际操作教学演示视频技能实训样品资料完整网页两套多媒体教学课件工程阶段性考核容和评价标准步骤教学活动过程主要知识点教学方法建议学时1、任务一教学提前下达任务书，让学生收集资料，展开前期的自学，摆出问题。任务分析和分解，规划任务方案。任务实施：工程需求阅读，讲解Bootstrap根底知识和制

20、图规，全面演示和操作和在生活中的实际运用并结合视频、生活案例等多种手段进展介绍Bootstrap特点技能实训和知识拓展组织交流讨论以虚拟设计竞标方式进展成果汇报和展示bootstrap响应式布局Bootstrap实现响应式导航栏效果BootStrap实现响应式布局导航栏折叠隐藏效果Bootstrap响应式导航、轮播图案例法操作法情境教学法32、任务二教学收集任务资料，下发任务指导书罗列任务要点，制定工作方案和方案任务实施：视频展示变成过程和效果，讲解Aja*的设计要点，完整操作演示运行出效果组织成果公开展示和评比技能实训和知识拓展bootstrap网页框架的使用方法利用ASP.NET MVC和

21、Bootstrap快速搭建响应式个人博客站案例案例法演示法情境教学法73、任务三教学下发任务指导书，分析任务要点，提出任务要求组织讨论，形成完善的实施规划和技术方案任务实施：按照任务要求，讲授排版中困难知识点要点制作和流程，操作演示技能实训和知识拓展总结Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记Bootstrap响应式侧边栏改良版Bootstrap实现圆角、圆形头像和响应式图片BootStrap创立响应式导航条实例代码案例法操作法情境教学法35、检查和评估组织学生加强操作过程的自查自评，同时以小组交流形式进展互评强化对实训过程和实训报告的监视和检查，以理论和上机结合

22、形式有针对性对表格和表单嵌套进展教学测评，以检查教学效果课后加强教学交流辅导平台，及时解决学生问题。交互检查法讨论法小组操作法二考核评价建议为全面考核学生的知识与技能掌握情况，本课程主要以过程考核为主。课程考核涵盖工程学习情境任务全过程，主要包括工程实施等几个方面。各工程学习情境具体考核方式与考核标准比例见表3。表3 BootStrap程序开发技术课程考核方式与考核标准工程编号考核点及工程分值比建议考核方式评价标准工程成绩比例优良及格不及格1BootStrap语言根底10%资讯报告条理非常清晰，构造合理，收集资源丰富，观点独到条理清晰，构造合理，有较丰富资源丰富，有自己合理的观点根本能说明对B

23、ootStrap编程掌握，条理和构造根本合理，资料容较少不能反映说明对BootStrap编程掌握，条理和构造不合理，无说明资料容35%Dreamweaver软件操作5%自评和互评能熟练进展Dreamweave安装、环境设置和调用编程指令，能解决常见的问题，多样化的操作手段和技巧能较好完成DreamweaveD安装、环境设置和调用编程指令，能解决常见的问题，掌握一定的操作技巧能根本完成Dreamweave安装、环境设置和调用编程指令，能解决一些使用中的问题，但操作手段单一不能独立完成Dreamweave安装、环境设置和调用编程指令，无法解决出现的应用问题BootStrap中的事件处理和动画效果2

24、0%集中测评代码编写错误、规、整洁、注释无错误；方法合理高效；运用命令快速，技巧手段丰富代码规、整洁、注释无错误；浏览器运行顺畅，能选用较合理的方法代码编写规、整洁、注释无错误；浏览器运行顺畅，选用方法能较合理，命令操作较慢，手段单一代码编写规、整洁、注释无错误；浏览器运行顺畅，选用方法错误，命令操作陌生和错误较多综合素质考核20%见附表3-12使用BootStrap操作DOM20%小组评议、报告和教师评价实训成果完整，代码编写规准确；格式非常标准，条理清查，有详细过程记录和分析并能提出很多新的方法和建议实训成果完整，代码编写规准确；格式符合标准，容完整，有一定过程记录和分析，选用方法不够丰富

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

26、准确；报告格式不符合标准，错误较多，无过程记录和说明Less在BootStrap中的应用10%集中测评样式符合标准代码、布局、注释整洁；选用方法合理高效；运用命令快速，技巧手段丰富代码符合标准编程、布局、注释页面能做到美观整洁；有一定的编程技巧，能选用较合理的方法代码符合根本准确、但不能完全符合标排版整洁、注释正确，有少许错误；选用方法能较合理，命令操作较慢，熟练度欠缺输出完全不按照编程标准进展，不正解、耗时长；页面不美观整洁；选用方法错误，命令操作陌生和错误较多综合素质考核20%见附表3-14BootStrap UI插件的使用30%自评和互评能熟练操作BootStrap编程和测试，能独立完成

27、简单的网页特效。制作符合标准，美观，并能自己解决问题，并能指导他人进展操作能熟练操作BootStrap编程和测试，独立完成简单网页特效任务，制作符合标准，美观，并能解决一定的应用问题能熟练操作BootStrap编程和测试，能根本独立完成或在教师少许指导下简单网页特效任务，代码大体能符合标准，代码根本准确，有少许错误无法BootStrap命令或仅能根本语言，但无法独立完成排版布局任务，排版不完整，规性差30%综合素质考核20%见附表3-1合计100%附表3-1综合素质考核评价标准工程公共考核点建议考核方式评价标准优良及格1.工作与职业操守30评教师评价自评互评平安、文明工作，具有良好的职业操守平安文明工作，职业操守较好没出现违纪违规现象2.学习态度30教师评价学习积极性高，虚心好学学习积极性较高没有厌学现象3.团队合作精神20互评具有良好的团队合作精神，热心帮助小组其他成员具有较好的团队合作精神，能帮助小组其他成员能配合小组完成工程任务4.交流及表达能力10互评教师评价能用专业语言正确流利地展示工程