《《BootStrap开发技术》课程》由会员分享，可在线阅读，更多相关《《BootStrap开发技术》课程（17页珍藏版）》请在金锄头文库上搜索。
1、8川*别HF鼠他龙片亂bootstrap课程标准教研室主任：专业带头人：系（部）主任:教务处处长：教学副院长:审核批准日期：二O七年五月bootstrap课程标准（基本信息）课程编码：课程类别:专业方向课程适应专业：网页设计开设时间:大三上期学时数：56学时一、课程概述（一）课程性质Bootstrap，来自Twitter,是目前最受欢迎的前端框架.Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。本教程将向您讲解Bootstrap框架的基础，通过学习这些内容，您将可以轻松地创
2、建Web项目。教程被分为Bootstrap基本结构、BootstrapCSS、Bootstrap布局组件和Bootstrap插件几个部分。每个部分都包含了与该主题相关的简单有用的实例.（二）课程基本理念本课程通过企业项目开发流程为情景，学习并掌握BootStrap开发的基础知识和基本开发技能。学生在学习本课程后具有一定的专业能力，可激发学生对后续专业课程的学习兴趣。课程结构上遵循企业开发“流程化”、项目“兴趣化、教学“项目实战化”模式“前瞻化”、教材“权威化”授课“案例化”等国内领先的IT工程师培养模式，并且结合科学的考核评价模式。通过全方位课程设计、全真的工作环境、探索研究工学结合的培养模式
3、，提高学生职业技能，最终实现岗位无缝对接。（三）课程的设置与设计思路本课程立足于培养学生的动手实践能力,教学活动基本上围绕着职业导向而进（完整word版）BootStrap开发技术课程标准行,对课程内容的选择标准进行创造性的根本改革，打破以书本知识传授为主要特征的传统学科课程模式,转变为以工作情景任务为中心组织课程内容和实施课程教学，让学生在完成具体项目的过程中发展职业能力并掌握相关理论知识，真正做到学以致用，从而发展职业能力。本课程的框架结构，经过与企业专家系统的讨论分析，按实际需要及由简入繁的原则，最终确定了学习培养标准.最终达到掌握BootStrap主流框架的目标，本课程共80课时,其中
4、实践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、培养学生具有踏实工作作风，良好的观察和思考能力强以及团队合作能力。（三）职业技能证书考核要求通过该门课程学习学生可以参加全国信息技术应用水平竞赛或参加行业资格认证考试,获得相应职业技能资格证书。三、内容标准（一）学习目标:BootStrap入门篇BootStrap简介及安装BootStrapCSS概览BootStrap网格系统BootStrap排版BootStrap代码BootStrap表格BootStrap
6、表单BootStrap按钮BootStrap图片BootStrap辅助类BootStrap响应式实用工具BootStrap进阶篇BootStrap组件BootStrap字体图标BootStrap下拉菜单BootStrap按钮组BootStrap按钮下拉菜单BootStrap输入框组幽吊盘dens工oo日8T诗H出滸dejq.sq.oogLT虫蚕些dejq.sq.oog9T址聊作姿dejq-sq-ooggT点盖軒丄dejq-s-oogfT幽母湃de工SA。日*S畜姿潔裒dejq.sq.oog乙T现鑰曲骅de工SA。日I*S覽曲骅des工oo日Ss|19Mdejq.sq.oog转傅dejq.sq.
7、oog馬華滋dejq.sq.oog省徑申奇參de坷SA。日O1Fdejq.sq.oog旱衰de坷SA。日囲浇影dejq.sq.oogMdens工00日邃暂詳de=S20日dejq.sq.oog蚕洱dejq.sq.oog虫纟dejq.sq.oog睜号斷便dejq.sq.oog寻睜号dejq-s-oog峯乎睜号dens工0。日软契彭瘵严毋希kdezs工0。日（翔P丿om轟当）3.9BootStrap警告框3.10BootStrap按钮3.11BootStrap折叠3.12BootStrap轮播3.13BootStrap附加导航BootStrap其他篇BootStrapUI编辑器BootStrapv
8、2教程BootStrapHTML编码规范BootStrapCSS编码规范BootStrap可视化布局Less教程（二）活动安排:1、基于工作过程的课程开发理念，先进行综合职业行动领域和情境分析，然后深入企业调研和行业专业研讨,最终分解和确定学习任务。2、根据情景任务，开发相应的课程教案，组织课程资源。3、推行一体化教学模式,强化教与学的及时互动，进行动态的教学评价和反馈机制。4、建立课后网络教学和学习平台,强化课后训练和扩充学习资源,提供课后教学支持。5、组织专题技术讲座和讨论,加强对新技术的掌握。6、加强校企联动，鼓励走入企业参加生产实训，使学生加深对BootStrap开发技能在实际工作应用
9、的认识和掌握.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、具备使用D
10、reamweaver准确进行编程运行以及解决运行测试能力；4、具备熟练的编程操作能力和输出调试能力；6、具备中级制排版和配色的技能水平。四、实施建议（一）教学建议1、课程项目结构与学时分配为使学生掌握利用Dreamweaver软件熟练进行网页编程能力所需的知识与技能,本课程以网页编程和输出为贯穿项目，并由基础网页编程3个子项目来组织教学，将职业行动领域的工作过程融合在项目训练中。本课程项目结构与学时分配见表1。表1Bootstrap开发技术课程项目（学习情境）内容与学时分配表项目编号子项目名称子项目内容支撑知识学时1Bootstrap网格系统1、Bootstrap包含了一个响应式的、移动设备优
11、先的、不固定的网格系统，可以随着设备和视口大小的增加而适当的增加到最多12列2、媒体查询：用来创建Bootstrap网格系统中的关键的分界点，根据不同的视口大小显示不同的内容1、网格行为2、最大容器宽度3、Class前缀4、列#5、最大列宽122Bootstrap排版1、内联子标题2、强调3、缩写4、地址5、引用6、列表1、h3我是标题3h3o我是副标3h3/small/h32、strong3、abbrtitle二”WorldWideWed”WWW/abbr4、address133定位页眉和页脚1、放置页眉和页脚的方式有三种2、使用dataposition属性来定位页眉和页脚1、inline-
12、默认。页眉和页脚与页面内容位于行内。fixed-页面和页脚会留在页面顶部和底部。fullscreen-与fixed类似；页面和页脚会留在页面顶部和底部134JavaScript插件1、jQueryMobile导航栏2、jQueryMobile列表1、导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部.2、3、默认地，导航栏中的链接会自动转换为按钮（无需data-role二”button）o4、请使用datarole=navbar18属性来定义导航栏：2、课程教学实施建议本课程重视学生在校学习与实际工作的一致性，采取任务驱动、项目导向的教学模式，每个具体学习情境设计见表2-1、2-2、2-3
13、详表。表2-1BootStrap开发技术学习情境表一学习情境（项目）：创建一个web项目学时12项目目标能力目标：通过理论和实践相结合的教学方式，使学员熟练掌握BootStrap。知识目标：、添加导航栏完全采用Bootstrap提供的样式2、添加内容项目任务任务一：在web目录下创建css目录，在css目录下创建boostrap目录，将压缩版的css文件bootstrap.min.css复制到此目录下。任务二:在index.jsp中引入样式，在head中添加下面代码。任务三：添加导航栏完全采用Bootstrap提供的样式。任务四：在nav标签同级下面添加显示内容的div.任务五：导航栏将内容遮
14、挡住了，需通过css样式进行控制。学生知识与能力准备1、引入了预编译版的CSS和JavaScript文件，创建一个Web项目.教学材料准备1、BootStrap发展背景材料1、Bootstrap简介2、Bootstrap安装手册和说明3、Bootstrap命令快捷键表4、Bootstrap特效基础案例5一10个5、相关教学教案6、考核内容和评价标准步骤教学活动过程主要知识点教学方法建议学时1、BootStrap资讯收集和下发任务书、学习资料收集和展示BootStrap技术相关背景知识，提出总体课程目标和任务要求，下发任务说明书，让学生提前了解任务内容，并提前进行资料的学习1、全局的CSS设置链
15、接样式2、定义基本的HTML元素样式多媒体演示法22、分析任务，提出问题，制定实施计划和方案引入工作任务，分析目标，摆出问题，做出任务计划，将完成任务所需要的基本理论和基本概念讲授给学生，然后经过讨论优化，确定最终工作任务方案.1、查找节点2、创建节点3、插入节点4、删除节点5、复制节点6、替换节点7、包裹节点讲授法演示法33、任务演示和实施演示实现任务过程，解释在编程过程中如何使用这些指令，以及在应用这些指令时的注意事项及创新。1、属性操作2、样式操作3、设置和获取HTML、文本值4、遍历节点5、CSSDOM操作演示与操作法案例法情境教学法34、技能实训和知识拓展技能实训，提出进一步问题，拓展相应知识，强化专项技能演示与操作法讨论交流法45、检查和评估进行自评、互评交流，分析工作过程的问题和不足，并总结
