《《Bootstrap响应式网站开发》课程教学大纲(上)》由会员分享，可在线阅读，更多相关《《Bootstrap响应式网站开发》课程教学大纲(上)（7页珍藏版）》请在金锄头文库上搜索。
1、Bootstrap响应式网站开发课程教学大纲课程编号：030338-Z0 适用专业：应用技术课程类型：专业课（专业基础） 课程性质：必修课课程学时：60 课程学分：4 一、课程定位Bootstrap响应式网站开发课程是计算机应用技术等专业的专业核心课程。本课程从前端响应式网站开发的角度合理选取教学内容，涉及内容有基于HTML5和CSS3的网页开发技术、响应式网页的概念与设计思路、Bootstrap框架的基本应用、JavaScript插件的使用方法和常用事件、跨平台的移动Web技术等。通过本课程的学习，学生能够掌握HTML5以及Bootstrap框架在响应式网站开发中应用，在做案例过程中，提高实
2、践操作能力。本课程的先导课程有计算机技术基础、程序设计基础、网站设计与网页制作等，后续课程有HTML5混合App开发、综合项目化实训等。二、课程目标1.知识目标（1）熟悉响应式网页布局的概念和使用方法移动Web开发的作用和开发环境；（2）掌握Bootstrap的环境搭建和基本的Bootstrap模板使用方法；（3）掌握Bootstrap栅格系统的原理以及使用方法；（4）掌握Bootstrap栅格系统的基础布局；（5）掌握Bootstrap中表格的类型与使用方法；（6）掌握Bootstrap表单布局的类型、表单中控件的分类、状态以及控件的使用方法；（7）掌握Bootstrap常用布局组件使用方法
3、；（8）掌握Bootstrap的JavaScript插件的引用，与常见的JavaScript插件效果的使用方法；（9）掌握综合运用所学知识开发移动web项目的方法；2.能力目标（1）能独立进行资料收集与整理、具备用户需求的理解能力；（2）能根据项目需求，具备项目页面的设计与实现能力；（3）能根据项目需求，使用Bootstrap框架和移动web开发技术实现页面布局；（4）具有综合应用所学知识开发移动web项目的方法。3.素质目标（1）养成善于思考、深入研究的良好自主学习的习惯；（2）通过项目与案例教学，培养学习者的分析问题、解决问题的能力；（3）具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力
4、；（4）通过课外拓展训练，培养学习者的创新意识；（5）具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。三、课程设计1.设计理念以培养移动web网站开发相关职业岗位的职业能力和职业素养为核心，以项目为载体，以典型工作过程要素为教学内容的基础，以启发学生自信心、主动性、自学能力为着力点，校企共育，实现培养学生技术能力和职业素养的教学目标，如图1所示。图1 课程设计理念第一、以教学仿真项目和企业实际项目为载体重构和序化教学内容。而不是按照传统的原理、实验、实训的内容进行教学；第二、校企融合，工学结合，在课程教学过程中引入企业元素。校企共同开发课程，将企业工作流程、行业标准和主流技术引入教学；第
5、三、将网站开发相关职业岗位的典型工作过程作为组织教学内容的基础。通过行动领域分析、学习领域分析和教学情境设计，构建教学内容中的单元和任务；第四、以启发学生自信心、主动性、自学能力为着力点。实现“学生主体、教师主导”的教育理念。2.设计思路以职业能力分析、职业岗位典型工作过程分析和学生分析等为基础，在首先确定专业课程体系的前提下，确定本课程的课程目标、教学内容、学习情境、教学资源、教学方法、考核形式等核心要素，并充分体现课程的职业性、实践性和开放性，如图2所示。课程的职业性、实践性和开放性的具体体现见表1。图2 课程设计路线图表2 课程的实践性、开放性和职业性课程设计特征体现方式实践性教学内容基
6、于模拟教学项目和真实项目的教学；学生课外实践活动。教学方法理论实践一体化；项目化教学；学生课后实践活动组织和实施；教学评价学生考核方式：实践环节和项目实战占比例大；以学生的项目实战能力的整体水平作为评价教师教学效果的主要依据；职业性团队精神和沟通能力基于分组的课程学习和课后学习、实践活动；经常要求学生汇报和展示项目成果。计划管理大量的课外任务时效性要求；学生参与项目开发任务分配时效性要求；项目开发流程要求学生按照企业运行方式实施项目开发；理解客户需求学生在开发真实项目时直接面对客户项目文档编写要求学生编写项目设计文档开放性教学方式学生学习和实践场所、时间的开放性师资队伍专职教师和企业兼职教师共
7、同组成教学团队教学内容真实项目和模拟项目相结合；教学资源各种数字化教学资源、案例库支持学生网上学习；四、课程内容与学时分配序号项目名称知识与案例模块学时分配理论实践合计11响应式网页简介响应式网页简介1. 认识响应式网页布局162. 流式网络13. 媒体查找实现响应式布局14. 体验响应式布局中的图像与字体15. 案例：体验响应式布局中的图像与字体112Bootstrap概述1. Bootstrap 简介0.50.542. Bootstrap 使用基础0.50.53. 案例：尝试Bootstrap布局企业导航区113Bootstrap栅格系统1. Bootstrap栅格系统的原理1162. 栅
8、格系统的常用方法113. 案例：企业内容展示页面制作114Bootstrap基础布局1. 基础排版1162. 列表0.50.53. 按钮0.50.54. 其他辅助类115Bootstrap表格1. 网页中的表格0.50.542. Bootstrap 中表格的简介0.50.53. 案例：商品列表数据展示116Bootstrap表单1. 表单布局的类型0.50.562. 表单中控件的分类0.50.53. 表单中控件状态114. 案例：用户信息注册页面制作117使用Bootstrap布局组件1. 字体图标 下拉菜单 按钮组11122. 输入框组 导航113. 导航栏114. 分页 标签与徽章 超大屏
9、幕与缩略图115. 警告与进度条 面板多媒体对象与列表组11案例：企业网站主页制作118Bootstrap的JavaScript插件1. Bootstrap插件概述 过渡效果与模态框1182. 标签页 提示工具弹出框工具113. 折叠框工具 轮播工具114. 案例：使用JS插件布局企业网站119综合项目实训项目1:课程宣传页面1310项目2企业主页页面设计制作24课外项目训练合计273360本专业可采用实施理论实践一体化教学，学时分配仅为教师教学参考依据。课时分配可根据需要进行微笑调整，*为课外学生自学模块，根据专业不同可进行#模块与*的调整。五、教学设计单元1：响应式网页简介项目名称：响应式
10、网页简介 学时： 6教学目标 认识响应式网页布局 掌握流式网络的思路和实现方式 掌握媒体查询的使用 了解响应式布局中的图像与字体教学重点 认识响应式网页布局 掌握流式网络的思路和实现方式 掌握媒体查询的使用学习难点 掌握流式网络的思路和实现方式 掌握媒体查询的使用子任务主要教学内容任务1认识响应式网页布局响应式网页的概念、响应式网页布局的优缺点、视口viewport的概念和使用任务2流式网络网格设计的实现方式、实现的流式布局的思路、HTML5的移动Web开发任务3媒体查找实现响应式布局媒体查询的断点设置、媒体查询的使用方法、设置方式、媒体类型、判断条件、媒体特征任务4体验响应式布局中的图像与字
11、体流式图像、字体使用任务5 案例：体验响应式布局中图像与字体教学方法建议以理论讲解、实际网站演示为主备注单元2：Bootstrap概述项目名称：Bootstrap概述 学时： 4教学目标 了解Bootstrap的优势 了解什Bootstrap浏览器与设备支持 掌握Bootstrap 环境搭建 掌握基本的Bootstrap模板的使用方法 掌握基本的文档类型、响应式图像的设置教学重点 掌握Bootstrap 环境搭建 掌握基本的Bootstrap模板的使用方法 掌握基本的文档类型、响应式图像的设置学习难点 掌握基本的Bootstrap模板的使用方法 掌握基本的文档类型、响应式图像的设置子任务主要教
12、学内容任务1 Bootstrap 简介初识Bootstrap、使用Bootstrap的优势，Bootstrap浏览器与设备支持、Bootstrap 环境搭建、实例操作Hello World任务2 Bootstrap 使用基础基本的Bootstrap使用模板、设置文档类型、响应式图像任务3案例：尝试Bootstrap布局企业导航区使用Bootstrap布局企业的导航区教学方法建议教授法（基础知识）、案例演示法（项目制作演示）备注单元3：Bootstrap栅格系统项目名称：Bootstrap栅格系统 学时：4教学目标 掌握栅格系统的工作原理 掌握响应式实用工具 掌握移动与调整列的位置、调整列的排序
13、、列嵌套排版等栅格系统的常用方法教学重点 掌握栅格系统的工作原理 掌握响应式实用工具 掌握移动与调整列的位置、调整列的排序、列嵌套排版等栅格系统的常用方法学习难点 掌握栅格系统的工作原理 掌握响应式实用工具 掌握移动与调整列的位置、调整列的排序、列嵌套排版等栅格系统的常用方法子任务主要教学内容任务1 Bootstrap栅格系统的原理栅格系统的实现原理、栅格系统的工作原理、响应式栅格、响应式实用工具任务2栅格系统的常用方法移动与调整列的位置、调整列的排序、列嵌套排版任务3案例：企业内容展示页面制作使用Bootstrap的栅格系统完成企业内容展示页面制作教学方法建议教授法（基础知识）、案例演示法（项目制作演示）备注 审核人： 批准人：
