《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、培养学生具有踏实工作作风，良好的观察和思考能力强以及团队合作能力。〔三〕职业技能证书考核要求通过该门课程学习学生可以参加全国信息技术应用水平竞赛或参加行业资格认证考试，获得相应职业技能资格证书。三、内容标准〔一〕学习目标：BootStrap入门篇BootStrap简介及安装BootStrapCSS概览BootStrap网格系统BootStrap排版BootStrap代码BootStrap表格BootStrap表单BootStrap按钮BootStrap图片BootStrap辅助类BootStrap响应式实用工具BootStrap进阶篇BootStrap组件BootStrap字体图标BootStrap下拉菜单BootStrap按钮组BootStrap按钮下拉菜单BootStrap输入框组BootStrap导航元素BootStrap导航栏BootStrap面包屑导航BootStrap分页BootStrap标签BootStrap微章BootStrap超大屏幕BootStrap页面标题BootStrap缩略图BootStrap警告BootStrap进度条BootStrap多媒体对象BootStrap列表组BootStrap面板BootStrapwellsBootStrap插件篇BootStrap插件概览BootStrap过渡效果BootStrap模态框BootStrap下拉菜单BootStrap滚动监听BootStrap标签页BootStrap提示工具BootStrap弹出框BootStrap警告框BootStrap按钮BootStrap折叠BootStrap轮播BootStrap附加导航BootStrap其他篇BootStrapUI编辑器BootStrapv2教程BootStrapHTML编码标准BootStrapCSS编码标准BootStrap可视化布局Less教程〔二〕活动安排：1、基于工作过程的课程开发理念，先进行综合职业行动领域和情境分析，然后深入企业调研和行业专业研讨，最终分解和确定学习任务。2、根据情景任务，开发相应的课程教案，组织课程资源。3、推行一体化教学模式，强化教与学的及时互动，进行动态的教学评价和反应机制。4、建立课后网络教学和学习平台，强化课后训练和扩充学习资源，提供课后教学支持。5、组织专题技术讲座和讨论，加强对新技术的掌握。6、加强校企联动，鼓励走入企业参加生产实训，使学生加深对BootStrap开发技能在实际工作应用的认识和掌握。8、完善工程化教材编写，组织教师参加高层次技术培训和企业工程实践。9、组织参加各层次的网页布局兴趣活动和比赛。〔三〕知识要点：1、BootStrap概述2、BootStrap根本结构3、BootStrapCSS4、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。表1Bootstrap开发技术课程工程〔学习情境〕内容与学时分配表工程编号子工程名称子工程内容支撑知识学时1Bootstrap网格系统Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备和视口大小的增加而适当的增加到最多12列2、媒体查询：用来创立Bootstrap网格系统中的关键的分界点，根据不同的视口大小显示不同的内容网格行为最大容器宽度Class前缀列#最大列宽122Bootstrap排版内联子标题强调缩写地址引用列表<h3>我是标题3h3.<small>我是副标3h3</small></h3><small><strong><em><abbrtitle="WorldWideWed">WWW</abbr> <address></address>133定位页眉和页脚放置页眉和页脚的方式有三种使用data-position属性来定位页眉和页脚inline-默认。页眉和页脚与页面内容位于行内。fixed-页面和页脚会留在页面顶部和底部。fullscreen-与fixed类似;页面和页脚会留在页面顶部和底部134JavaScript插件jQueryMobile导航栏jQueryMobile列表导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。默认地，导航栏中的链接会自动转换为按钮〔无需data-role="button"〕。请使用data-role="navbar"属性来定义导航栏：18课程教学实施建议本课程重视学生在校学习与实际工作的一致性，采取任务驱动、工程导向的教学模式，每个具体学习情境设计见表2-1、2-2、2-3详表。表2-1BootStrap开发技术学习情境表一学习情境〔工程〕：创立一个web工程学时12工程目标能力目标：通过理论和实践相结合的教学方式，使学员熟练掌握BootStrap。知识目标：添加导航栏完全采用Bootstrap提供的样式添加内容工程任务任务一：在web目录下创立css目录，在css目录下创立boostrap目录，将压缩版的css文件bootstrap.min.css复制到此目录下。任务二：在index.jsp中引入样式，在head中添加下面代码。任务三：添加导航栏完全采用Bootstrap提供的样式。任务四：在nav标签同级下面添加显示内容的div。任务五：导航栏将内容遮挡住了，需通过css样式进行控制。学生知识与能力准备引入了预编译版的CSS和JavaScript文件，创立一个Web工程。教学材料准备BootStrap开展背景材料Bootstrap简介Bootstrap安装手册和说明Bootstrap命令快捷键表Bootstrap特效根底案例5-10个相关教学教案考核内容和评价标准步骤教学活动过程主要知识点教学方法建议学时BootStrap资讯收集和下发任务书、学习资料收集和展示BootStrap技术相关背景知识，提出总体课程目标和任务要求，下发任务说明书，让学生提前了解任务内容，并提前进行资料的学习全局的CSS设置链接样式定义根本的HTML元素样式多媒体演示法22、分析任务，提出问题，制定实施方案和方案引入工作任务，分析目标，摆出问题，做出任务方案，将完成任务所需要的根本理论和根本概念讲授给学生，然后经过讨论优化，确定最终工作任务方案。查找节点创立节点插入节点删除节点复制节点替换节点包裹节点讲授法演示法33、任务演示和实施演示实现任务过程，解释在编程过程中如何使用这些指令，以及在应用这些指令时的考前须知及创新。属性操作样式操作设置和获取HTML、文本值遍历节点CSSDOM操作演示与操作法案例法情境教学法34、技能实训和知识拓展技能实训，提出进一步问题，拓展相应知识，强化专项技能演示与操作法讨论交流法45、检查和评估进行自评、互评交流，分析工作过程的问题和缺乏，并总结成功与失败的经验和教训，发扬成绩，找出缺乏。同时结合一定形式的理论和实践综合考查，成果展示、提交实训报告和多种形式的虚拟情趣活动等，及时得到教学反应信息，做出教学评价交互检查法讨论法小组演示法表2-2BootStrap开发技术学习情境表二学习情境〔工程〕：Bootstrap表格、表单的使用学时13工程目标能力目标：熟练掌握Bootstrap的使用，能够手动写出Bootstrap的一些常见特效，并学会插件的使用。知识目标：Bootstrap表格Bootstrap表格类Bootstrap表格上下文类Bootstrap表单布局Bootstrap垂直表单Bootstrap内联表单Bootstrap水平表单Bootstrap支持的表单控件Bootstrap表单控件状态10、Bootstrap表单控件大小工程任务任务一：设置内边距以及水平分割线任务二：在内容主体上看到条纹任务三：表格周围增加边框任务四：隔行换色任务五：精简表格学生知识与能力准备获取表单元素Bootstrap中操作样式文本框获取焦点、失去焦点时的事件处理教学材料准备工程任务所需教学案例工程实施标准演示视频资料技能实训网页资料案例5-10个多媒体课件工程阶段性考核内容和评价标准步骤教学活动过程主要知识点教学方法建议学时1、任务一教学收集任务资讯，下发任务说明书和相关参考资料分析任务要求，制定任务工作方案，确定工作方案。任务实施：讲解相应命令操作多媒体展示成品和体验效果，完整演示绘制过程4、技能实训，拓展知识5、组织讨论和总结表单文本框应用多行文本框应用复选框的应用列表矿工的应用表单验证案例法讨论法演示和操作法32、任务二教学任务二收集任务资讯，下发任务说明书和相关参考资料分析任务要求，制定任务工作方案，确定工作方案。任务实施：讲解相应命令操作，多媒体展示成品和体验效果，完整演示布局过程，解答学生在操作中的问题。技能实训，拓展知识组织讨论和总结更改表格颜色展开与关闭表格筛选表格内容案例法讨论法演示和操作法103、检查和评估成果检查和展示，分析反思工作过程并交流，对绘图进行适当集中测评，多角度检查学生学习情况，及时教学反应，强化和弥补教学缺乏。交互检查法讨论法小组演示法表2-3BootStrap开发技术学习情境表三学习情境〔工程〕：利用BootStrap进行快速Web开发学时13工程目标能力目标：能够对BootStrap有一个简单的认识了解，清楚BootStrap与其他JS框架的不同，掌握BootStrap的常用语法、使用技巧及考前须知。知识目标：全局显示、排版和链接工程任务任务一:使用Bootstrap栅格系统〔布局〕任务二：使用Bootstrap掌握下拉菜单任务三：使用Bootstra创立导航条任务四：使用Bootstrap创立按钮任务五：使用Bootstrap模仿起筷首页效果学生知识与能力准备布局栅格系统的使用下拉菜单方法，导航条创立方法，按钮创立方法利用Bootstrap写出首页效果教学材料准备工程任务案例材料实际操作教学演示视频技能实训样品资料〔完整网页两套〕多媒体教学课件工程阶段性考核内容和评价标准步骤教学活动过程主要知识点教学方法建议学时1、任务一教学提前下达任务书，让学生收集资料，展开前期的自学，摆出问题。任务分析和分解，规划任务方案。任务实施：工程需求阅读，讲解Bootstrap根底知识和制图标准，全面演示和操作和在生活中的实际运用并结合视频、生活案例等多种手段进行介绍Bootstrap特点技能实训和知识拓展组织交流讨论以虚拟设计竞标方式进行成果汇报和展示bootstrap响应式布局Bootstrap实现响应式导航栏效果BootStrap实现响应式布局导航栏折叠隐藏效果Bootstrap响应式导航、轮播图案例法操作法情境教学法32、任务二教学收集任务资料，下发任务指导书罗列任务要点，制定工作方案和方案任务实施：视频展示变成过程和效果，讲解Ajax的设计要点，完整操作演示运行出效果组织成果公开展示和评比技能实训和知识拓展bootstrap网页框架的使用方法利用ASP.NETMVC和Bootstrap快速搭建响应式个人博客站案例案例法演示法情境教学法73、任务三教学下发任务指导书，分析任务要点，提出任务要求组织讨论，形成完善的实施规划和技术方案任务实施：按照任务要求，讲授排版中困难知识点要点制作和流程，操作演示技能实训和知识拓展总结BootstrapMetronic完全响应式管理模板之菜单栏学习笔记Bootstrap响应式侧边栏改良版Bootstrap实现圆角、圆形头像和响应式图片BootStrap创立响应式导航条实例代码案例法操作法情境教学法35、检查和评估组织学生加强操作过程的自查自评，同时以小组交流形式进行互评强化对实训过程和实训报告的监督和检查，以理论和上机结合形式有针对性对表格和表单嵌套进行教学测评，以检查教学效果课后加强教学交流辅导平台，及时解决学生问题。交互检查法讨论法小组操作法〔二〕考核评价建议为全面考核学生的知识与技能掌握情况，本课程主要以过程考核为主。课程考核涵盖工程〔学习情境〕任务全过程，主要包括工程实施等几个方面。各工程〔学习情境〕具体考核方式与考核标准比例见表3。表3BootStrap程序开发技术课程考核方式与考核标准工程编号考核点及工程分值比建议考核方式评价标准工程成绩比例优良及格不及格1BootStrap语言根底〔10%〕资讯报告条理非常清晰，结构合理，收集资源丰富，观点独到条理清晰，结构合理，有较丰富资源丰富，有自己合理的观点根本能说明对BootStrap编程掌握，条理和结构根本合理，资料内容较少不能反映说明对BootStrap编程掌握，条理和结构不合理，无说明资料内容35%Dreamweaver软件操作〔5%〕自评和互评能熟练进行Dreamweave安装、环境设置和调用编程指令，能解决常见的问题，多样化的操作手段和技巧能较好完成DreamweaveD安装、环境设置和调用编程指令，能解决常见的问题，掌握一定的操作技巧能根本完成Dreamweave安装、环境设置和调用编程指令，能解决一些使用中的问题，但操作手段单一不能独立完成Dreamweave安装、环境设置和调用编程指令，无法解决出现的应用问题BootStrap中的事件处理和动画效果〔20%〕集中测评代码编写错误、标准、整洁、注释无错误；方法合理高效；运用命令快速，技巧手段丰富代码标准、整洁、注释无错误；浏览器运行顺畅，能选用较合理的方法代码编写标准、整洁、注释无错误；浏览器运行顺畅，选用方法能较合理，命令操作较慢，手段单一代码编写标准、整洁、注释无错误；浏览器运行顺畅，选用方法错误，命令操作陌生和错误较多综合素质考核〔20%〕见附表3-12使用BootStrap操作DOM〔20%〕小组评议、报告和教师评价实训成果完整，代码编写标准准确；格式非常标准，条理清查，有详细过程记录和分析并能提出很多新的方法和建议实训成果完整，代码编写标准准确；格式符合标准，内容完整，有一定过程记录和分析，选用方法不够丰富，没有多方面的比拟。实训成果根本完整，但代码编写标准不够；报告格式根本符合标准，有少许错误，内容完整，但缺少过程记录实训成果不完整，注释不完全准确；报告格式不符合标准，错误较多，无过程记录和说明35%使用BootStrap操作表单和表格〔25%〕小组评议、报告和教师评价实训成果完整，代码编写和效果标准准确；格式非常标准，条理清查，有详细过程记录和分析并能提出很多新的方法和建议实训成果完整，代码编写和效果准确；内容完整，有一定过程记录和分析，选用方法不够丰富，没有多方面的比拟。实训成果根本完整，代码编写和效果准确，报告格式根本符合标准，有少许错误，内容完整，但缺少过程记录实训成果不完整，代码和样式布局规不完全准确；报告格式不符合标准，错误较多，无过程记录和说明Less在BootStrap中的应用〔10%〕集中测评样式符合标准代码、布局、注释整洁；选用方法合理高效；运用命令快速，技巧手段丰富代码符合标准编程、布局、注释页面能做到美观整洁；有一定的编程技巧，能选用较合理的方法代码符合根本准确、但不能完全符合标排版整洁、注释正确，有少许错误；选用方法能较合理，命令操作较慢，熟练度欠缺输出完全不按照编程标准进行，不正解、耗时长；页面不美观整洁；选用方法错误，命令操作陌生和错误较多综合素质考核〔20%〕见附表3-14BootStrapUI插件的使用〔30%〕自评和互评能熟练操作BootStrap编程和测试，能独立完成简单的网页特效。制作符合标准，美观，并能自己解决问题，并能指导他人进行操作能熟练操作BootStrap编程和测试，独立完成简单网页特效任务，制作符合标准，美观，并能解决一定的应用问题能熟练操作BootStrap编程和测试，能根本独立完成或在老师少许指导下简单网页特效任务，代码大体能符合标准，代码根本准确，有少许错误无法BootStrap命令或仅能根本语言，但无法独立完成排版布局任务，排版不完整，标准性差30%综合素质考核〔20%〕见附表3-1合计100%附表3-1综合素质考核评价标准工程公共考核点建议考核方式评价标准优良及格1.工作与职业操守〔30％〕评教师评价＋自评＋互评平安、文明工作，具有良好的职业操守平安文明工作，职业操守较好没出现违纪违规现象2.学习态度〔30％〕教师评价学习积极性高，虚心好学学习积极性较高没有厌学现象3.团队合作精神〔20％〕互评具有良好的团队合作精神，热心帮助小组其他成员具有较好的团队合作精神，能帮助小组其他成员能配合小组完成工程任务4.交流及表达能力〔10％〕