Bootstrap响应式网站开发任务式教程-课程大纲

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