1、3、熟练使用 Bootstrap 中的对象，实现网页的动态效果。4、熟练使用 Bootstrap 对表单、表格和事件的操作。5、熟练使用 Bootstrap 与 JavaScript 进行网页异步交互设计。6、事件驱动的程序设计思想，熟练使用 JavaScript 中的对象，实现网页特效。7、熟练使用 JavaScriptUI 及 JavaScript 第三方插件。8、网页设计布局合理，色彩搭配合理，网页操作方便。9、设计过程中充分考虑浏览器兼容等问题，并做适当处理。（二）职业素养目标31、培养学生“爱岗、敬业、细致、求精”的职业道德与情感。2、培养学生良好的动手实践习惯，尤其注重挖掘学生的潜
2、质。3、注重培养学生与社会接轨。4、培养学生严谨的行事风格。5、培养学生具有踏实工作作风，良好的观察和思考能力强以及团队合作能力。（三）职业技能证书考核要求通过该门课程学习学生可以参加全国信息技术应用水平竞赛或参加行业资格认证考试，获得相应职业技能资格证书。三、内容标准（一）学习目标：1BootStrap 入门篇 BootStrap 简介及安装 BootStrap CSS 概览 BootStrap 网格系统 BootStrap 排版 BootStrap 代码 BootStrap 表格 BootStrap 表单 BootStrap 按钮 BootStrap 图片 BootStrap 辅助类 Bo
3、otStrap 响应式实用工具42BootStrap 进阶篇 BootStrap 组件 BootStrap 字体图标 BootStrap 下拉菜单 BootStrap 按钮组 BootStrap 按钮下拉菜单 BootStrap 输入框组 BootStrap 导航元素 BootStrap 导航栏 BootStrap 面包屑导航 BootStrap 分页 BootStrap 标签 BootStrap 微章 BootStrap 超大屏幕 BootStrap 页面标题 BootStrap 缩略图 BootStrap 警告 BootStrap 进度条 BootStrap 多媒体对象 BootStrap
4、 列表组 BootStrap 面板 BootStrap wells53BootStrap 插件篇3.1 BootStrap 插件概览3.2 BootStrap 过渡效果3.3 BootStrap 模态框3.4 BootStrap 下拉菜单3.5 BootStrap 滚动监听3.6 BootStrap 标签页3.7 BootStrap 提示工具3.8 BootStrap 弹出框3.9 BootStrap 警告框3.10 BootStrap 按钮3.11 BootStrap 折叠3.12 BootStrap 轮播3.13 BootStrap 附加导航 BootStrap 其他篇 BootStrap
5、 UI 编辑器 BootStrap v2 教程 BootStrap HTML 编码规范 BootStrap CSS 编码规范 BootStrap 可视化布局 Less 教程6（二）活动安排：1、基于工作过程的课程开发理念，先进行综合职业行动领域和情境分析，然后深入企业调研和行业专业研讨， 最终分解和确定学习任务。2、根据情景任务，开发相应的课程教案，组织课程资源。3、推行一体化教学模式，强化教与学的及时互动，进行动态的教学评价和反馈机制。4、建立课后网络教学和学习平台，强化课后训练和扩充学习资源，提供课后教学支持。5、组织专题技术讲座和讨论，加强对新技术的掌握。6、加强校企联动，鼓励走入企业参
6、加生产实训，使学生加深对 BootStrap 开发技能在实际工作应用的认识和掌握。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 教程（四）技能要点：
7、71、具备熟练使用与操作 Dreamweaver软件环境的能力；2、具备基础 JavaScript 语言基础；3、具备使用 Dreamweaver准确进行编程运行以及解决运行测试能力；4、具备熟练的编程操作能力和输出调试能力；6、具备中级制排版和配色的技能水平。四、实施建议（一）教学建议1、课程项目结构与学时分配为使学生掌握利用 Dreamweaver 软件熟练进行网页编程能力所需的知识与技能， 本课程以网页编程和输出为贯穿项目， 并由基础网页编程 3 个子项目来组织教学， 将职业行动领域的工作过程融合在项目训练中。本课程项目结构与学时分配见表 1。表1Bootstrap 开发技术课程项目（学
8、习情境）内容与学时分配表项目编号 子项目名称 子项目内容 支撑知识 学时1、 Bootstrap 包 含 了 1、 网格行为一个响应式的、 移动 2、 最大容器宽度设备优先的、 不固定 3、 Class 前缀的网格系统， 可以随 4、 列 #着设备和视口大小 5、 最大列宽1 Bootstrap 网格系统 的增加而适当的增 12加到最多 12 列2、媒体查询： 用来创建Bootstrap 网格系统中的关键的分界点，根据不同的视口大小显示不8同的内容1、内联子标题1、 我是标题 32、强调h3. 我是副3、缩写标4、地址h35、引用2、 133、 WWW4、 /address1、 放置页眉和页脚
9、的1、 inline -默认。方式有三种页眉和页脚与页面2、 使用 内容位于行内。data-position属 fixed -页 面和 页性来定位页眉和页脚会留在页面顶部定位页眉和页脚脚和底部。fullscreen- 与fixed 类似 ; 页面和页脚会留在页面顶部和底部JavaScript 插件1、 jQuery Mobile导航 1、 导 航 栏 由 一 组18栏水 平 排 列 的 链92、 jQuery Mobile 列表 接构成，通常位于 页 眉 或 页 脚内部。2、3、默认地，导航栏中的链接会自动转换 为 按 钮 （ 无 需data-role=button ）。4、请 使 用navb
10、ar 属性来定义导航栏：2、课程教学实施建议本课程重视学生在校学习与实际工作的一致性， 采取任务驱动、项目导向的教学模式，每个具体学习情境设计见表 2-1 、2-2 、2-3 详表。表2-1BootStrap 开发技术学习情境表一学习情境（项目） ：创建一个 web 项目 学时 12能 力 目 标 ： 通 过 理 论 和 实 践 相 结合 的 教 学 方 式 ， 使 学 员 熟 练 掌 握BootStrap 。项目目标 知识目标：1、添加导航栏完全采用 Bootstrap 提供的样式2、添加内容10任务一： 在 web目录下创建 css 目录，在 css 目录下创建 boostrap目录，将压
11、缩版的 css 文件 复制到此目录下。任务二： 在中引入样式，在head 中添加下面代码。项目任务任务三： 添加导航栏完全采用Bootstrap提供的样式。任务四： 在 nav 标签同级下面添加显示内容的div 。任务五：导航栏将内容遮挡住了，需通过css 样式进行控制。学生知识1、引入了预编译版的 CSS 和 JavaScript文件，创建一个Web项目。与能力准备1、 BootStrap发展背景材料1、 Bootstrap简介2、 Bootstrap安装手册和说明教学材料准备3、 Bootstrap命令快捷键表4、 Bootstrap特效基础案例5-10 个5、 相关教学教案6、 考核内容
12、和评价标准步骤教学活动过程主要知识点教学方法建议学时收集和展示 BootStrap技 1、 全局的 CSS 设术相关背景知识，提出总置链接样式资 讯 收 集 和 体课程目标和任务要求，2、 定 义 基 本 的多媒体演示法下发任务书、 下发任务说明书，让学生HTML 元 素 样学习资料提前了解任务内容，并提式前进行资料的学习11引入工作任务，分析目标， 1、 查找节点摆出问题，做出任务计划， 2、 创建节点2、分析任务，提将完成任务所需要的基3、 插入节点出问题，制定实本理论和基本概念讲授4、 删除节点施计划和方案给学生，然后经过讨论5、 复制节点优化，确定最终工作任6、 替换节点务方案。7、
13、包裹节点1、 属性操作演示实现任务过程， 解释2、 样式操作讲授法演示法 3在编程过程中如何使用3、任务演示和实这些指令，以及在应用施这些指令时的注意事项演示与操作法3、 设 置 和 获 取案例法 3HTML、文本值情境教学法4、 遍历节点及创新。5、 CSS DOM操作技能实训，提出进一步问4、技能实训和知 演示与操作法题，拓展相应知识，强化 4识拓展 讨论交流法专项技能12进行自评、互评交流，分析 工 作 过 程 的 问 题 和 不足，并总结成功与失败的经验和教训，发扬成绩，找出不足。交互检查法同时结合一定形式的理论5、检查和评估 讨论法和实践综合考查，成果展小组演示法示、提交实训报告和多
14、种形式的虚拟情趣活动等，及时得到教学反馈信息，做出教学评价表2-2BootStrap 开发技术学习情境表二Bootstrap 表格、表单的使用 学时 13能力目标：熟练掌握 Bootstrap 的使用，能够手动写出 Bootstrap 的一些项目目标常见特效，并学会插件的使用。知识目标：1、 Bootstrap 表格2、 Bootstrap 表格类3、 Bootstrap 表格上下文类4、 Bootstrap 表单布局5、 Bootstrap 垂直表单6、 Bootstrap 内联表单7、 Bootstrap 水平表单8、 Bootstrap 支持的表单控件9、 Bootstrap 表单控件状
15、态10、 Bootstrap 表单控件大小设置内边距以及水平分割线在内容主体上看到条纹项目任务 任务三：表格周围增加边框隔行换色精简表格1、获取表单元素2、Bootstrap 中操作样式3、文本框获取焦点、失去焦点时的事件处理1、 项目任务所需教学案例2、 项目实施标准3、 演示视频资料4、 技能实训网页资料案例 5-10 个5、 多媒体课件6、 项目阶段性考核内容和评价标准步骤 教学活动过程 主要知识点 教学方法建议 学时141、 收集任务资讯，下1、 表单文本框应发任务说明书和相用关参考资料2、 多行文本框应2、 分析任务要求， 制定任务工作计划， 确定 3、 复选框的应用案例法工作方案。
16、4、 列表矿工的应讨论法1、任务一教学3、 任务实施：演示和操作法讲解相应命令操作5、 表单验证多媒体展示成品和体验效果，完整演示绘制过程4、技能实训，拓展知识5、组织讨论和总结15任务二 1、更改表格颜色1、 收集任务资讯，下 2、展开与关闭表发任务说明书和相 格关参考资料 3、筛选表格内容任务工作计划， 确定2、任务二教学 3、 任务实施： 10 演示和操作法讲解相应命令操作，效果，完整演示布局过程，解答学生在操作中的问题。4、 技能实训， 拓展知识5、 组织讨论和总结成果检查和展示， 分析反思工作过程并交流， 对绘图进行适当集中测评， 多3、检查和评估 讨论法角度检查学生学习情况，及时教
17、学反馈， 强化和弥补教学不足。表2-3BootStrap 开发技术学习情境表三学习情境（项目）：利用 BootStrap进行快速 Web 开发16能够对 BootStrap 有一个简单的认识了解，清楚BootStrap与其他 JS 框架的不同，掌握BootStrap 的常用语法、使用技巧及注意事项。 全局显示、排版和链接任务一 : 使用 Bootstrap栅格系统（布局）使用 Bootstrap掌握下拉菜单使用 Bootstra创建导航条创建按钮模仿起筷首页效果1、布局栅格系统的使用2、下拉菜单方法，导航条创建方法，按钮创建方法3、利用 Bootstrap 写出首页效果1、 项目任务案例材料2
18、、 实际操作教学演示视频教学材料准备 3、 技能实训样品资料（完整网页两套）4、 多媒体教学课件5、 项目阶段性考核内容和评价标准教学活动过程 主要知识点 教学方法建步骤 学时议171、 提前下达任务书，让1、 bootstrap响应式学生收集资料，展开布局前期的自学，摆出问实现响题。应式导航栏效果2、 任务分析和分解，规3、 BootStrap划任务方案。应式布局导航栏折叠隐藏效果项目需求阅读，讲解Bootstrap 基础知识和制导航、轮播图操作法图规范，全面演示和操作和在生活中的实际运用并结合视频、生活案例等多 种 手 段 进 行 介 绍Bootstrap 特点4、 技能实训和知识拓展5、
19、 组织交流讨论6、 以虚拟设计竞标方式进行成果汇报和展示2、任务二教学1、 收集任务资料，下发 1、 bootstrap 网 页任务指导书 框架的使用方法2、 罗列任务要点，制定 2、 利 用 MVC 和工作计划和方案 Bootstrap 快 速 搭建响应式个人视 频 展 示变 成过程 博客站案例演示法和效果，讲解 Ajax 的设计要点，完整操作演示运行出效果4、 组织成果公开展示和评比5、 技能实训和知识拓展3、任务三教学1、 下发任务指导书，分Metronic 完全响应式析任务要点，提出任管理模板之菜单栏学务要求习笔记2、 组织讨论，形成完善2、 Bootstrap 响应式的实施规划和技术方侧边栏改进版案3、 Bootstrap 实现圆角、圆形头像和响应按照任务要求，讲授式图片排版中困难知识点要点4、 BootStrap 创建响制作和流程，操作演示应式导航条实例代码5、 总结19组 织 学 生加 强 操作过程的自查自评，同时以小组交流形式进行互评强 化 对 实训 过 程和实训报告的监督和检查，以 理 论 和上 机 结合5、检查和评估形式有针对性对表格和表单嵌套进行教学测评，以检查教学效果课 后 加 强教 学 交流辅导平台，及时解决学生交互检查法小组操作
