职业技术学校《响应式网站开发bootstrap》课程标准

课程标准课程名称：响应式网站开发专业大类：电子信息大类响应式网站开发课程代码：0311117课程名称：响应式网站开发课程性质：必修课程类别：职业技术基础课程适用专业：计算机应用技术、软件技术、移动互联应用技术开设学期：第一学期授课学时：48（理实一体）+16学时项目强化一、课程定位《响应式网站开发》是计算机应用技术、软件技术、移动互联应用技术专业的一门职业技术基础课程，由浅入深地讲解了前端框架bootstrap的语法及使用技巧，涵盖了bootstrap的众多功能模块，如栅格系统，Borders、Display、Spacing、Text、Images、Shadows工具类，Navbar、Breadcrumb、Listgroup、Accordion、Alert、Carousel等众多组件、及表格类、表单类等，通过理论、图解、实战的方式阐释Bootstrap的特性功能。通过学习本门课程，学生能更好地掌握Bootstrap的特性，并且将新技术运用到实际的开发当中，提高自己开发Web程序的水平。二、课程设计以就业为导向，以能力为本位，不局限于单纯的技能训练，在培养学生职业岗位能力的基础上，围绕高素质复合型技术技能型人才专业培养目标，培养学生的终身学习的能力和职业生涯发展所需的综合素养。课程建设优化传统HTML网页设计类课程教学内容，设计教学情境，开发课程案例，建设课程教学资源，实施基于混合式教学的“教学做”一体化教学方式，采用过程式考核方式，提高课程教学质量。课程教学按照：“提出工程实际案例、分析案例所需知识、知识准备、师生共同完成案例、布置任务、学生自主完成任务、小组交流、教师点评”的步骤进行。将课程基本知识点融于案例中，围绕着案例来开展课堂教学活动，引导学生参与分析、讨论，让学生在具体的问题情境中，积极思考，主动探索。课程教学内容符合职业技能培养要求，注重实践环节，实践性教学内容占课程内容的60﹪以上，课程既具有针对性、又具有技术性和综合性，有效地培养了学生复杂静态页面的设计与开发能力。三、课程目标（一）课程总目标通过基于工作过程的教学实施，使学生能够根据工作任务和要求，按网站设计的基本流程、需求规范，运用相关工具，独立自主完成基于Bootstrap技术的静态复杂页面的设计与制作。同时对接行业标准和岗位要求强化学生的职业道德意识和职业素质养成意识；通过小组合作学习，培养学生团队合作、协议沟通能力；为后续Web前端开发打下坚实的基础。（二）课程具体目标1.知识目标（1）掌握Bootstrap的环境搭建；（2）掌握Bootstrap栅格系统的使用；（3）掌握Bootstrap的常用工具类；（4）掌握Bootstrap的常用组件；（5）掌握Bootstrap表格类的使用；（6）掌握Bootstrap表单类的使用。2.能力目标（1）能够设计、制作响应式布局的静态页面；（2）能综合使用Bootstrap美化页面元素；（3）能综合使用Bootstrap常用组件丰富页面表现效果。3.素质目标（1）培养学生良好的语言表达能力；（2）培养学生自主学习习惯和团队合作能力，身心参与、手脑并用的劳动意识；（3）培养学生严谨细致的学习态度和追求完美的工匠精神；（4）树立坚定的理想信念，厚植爱国主义情怀；四、课程内容及学习情境根据Web前端开发工程师职业岗位的要求，遴选课程内容，课程内容打破学科体系，进行解构和重构。以真实的项目和任务为载体，基于Web前端开发的设计、开发与维护岗位的工作流程设置四个情境：1.Bootstrap栅格系统，2.Bootstrap常用内容、工具、表单类，3.Bootstrap常用组件，4.项目强化。课程的主要内容和要求见表1。表1课程内容和学习情境表序号学习情境学习载体主要学习内容学习目标学时1学习情境1Bootstrap栅格系统“同学会”通用框架、往昔岁月页面任务1：使用Bootstrap的容器项目任务：完成网站通用框架的搭建1.掌握container；2.掌握container-fluid；4任务2：使用网格实现响应式布局项目任务：完成往昔岁月页面1.掌握网格（Grid）基本使用；2.掌握定义列宽度；3.掌握Offsets和Gutters的使用；4.掌握同一列在浏览器不同分辨率下宽度的切换；42学习情境2Bootstrap常用内容、工具、表单类“同学会”通用框架、首页、邀请函、日程表、在线留言页面任务3：使用工具类项目任务：完成网站通用框架的搭建1.掌握Borders工具类；2.掌握Display工具类；4任务4：使用工具类项目任务：完成邀请函页面1.掌握Sapcing工具类；2.掌握Text工具类；4任务5：使用工具类项目任务：完成首页合照阴影效果1.掌握Shadows工具类；2任务6：使用内容类项目任务：完成首页合照图片效果1.掌握Images内容类；2任务7：使用内容类项目任务：完成日程表页面1.掌握Tables内容类的默认样式；2.掌握表格的边框、条纹、悬停效果；3.掌握设置表格及表头的颜色；4任务8：使用表单类项目任务：完成在线留言页面表单1.掌握Formcontrol表单类；2.掌握Inputgroup表单类；43学习情境3Bootstrap常用组件“同学会”通用框架、首页、邀请函、在线留言页面任务9：使用组件类项目任务：完成首页导航栏和面包屑导航1.掌握Navbar组件类；2.面包屑导航（Breadcrumb）组件类；4任务10：使用组件类项目任务：完成邀请函页面1.掌握Listgroup组件类；2.掌握Accordion组件类；4任务11：使用组件类项目任务：重构导航栏1.掌握Buttons组件类；2任务12：使用组件类项目任务：完成在线留言页面的留言列表1.掌握徽章（Badge）组件类；2.掌握警告框（Alert）组件类；2任务13：使用组件类项目任务：完成校园风光页面、重构banner1.掌握轮播（Carousel）组件类84学习情境4项目强化“同学会”网站任务1：制作往昔岁月页面1.套用网站通用部分2.完成页面的响应式布局4任务2：制作邀请函页面1.套用网站通用部分2.完成温馨提示模块3.完成组织小组模块4任务3：制作日程表页面1.套用网站通用部分2.完成表格基础样式3.完成表格和表头的颜色4任务4：制作在线留言页面1.套用网站通用部分2.完成表单模块3.完成留言列表模块4五、教学设计学习情境一：Bootstrap栅格系统项目名称：“同学会”网站学时：8教学目标掌握container容器掌握container-fluid容器掌握网格（Grid）基本使用掌握定义列宽度掌握Offsets和Gutters的使用掌握同一列在浏览器不同分辨率下宽度的切换教学重点掌握container容器掌握网格（Grid）基本使用掌握定义列宽度掌握同一列在浏览器不同分辨率下宽度的切换学习难点掌握定义列宽度掌握同一列在浏览器不同分辨率下宽度的切换子任务主要教学内容任务1：使用Bootstrap的容器1.使用container容器，完成网站通用框架的搭建项目任务：完成网站通用框架搭建任务2：使用网格实现响应式布局1.使用Grid相关样式类，实现页面布局；2.使用.col-x，定义各列宽度3.使用Offsets和Gutters，设置偏移和各列之间的间隔4.使用断点，实现同一列在浏览器不同分辨率下宽度的切换项目任务：完成往昔岁月页和活动详情面教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境二：Bootstrap常用内容、工具、表单类项目名称：“同学会”网站学时：20教学目标1.掌握Borders工具类；2.掌握Display工具类；3.掌握Sapcing工具类；4.掌握Text工具类；5.掌握Shadows工具类；6.掌握Images内容类；7.掌握Tables内容类的默认样式；8.掌握表格的边框、条纹、悬停效果；9.掌握设置表格及表头的颜色；11.掌握Formcontrol表单类；12.掌握Inputgroup表单类；教学重点1.掌握Display工具类；2.掌握Sapcing工具类；3.掌握Images内容类；4.掌握Tables内容类的默认样式；5.掌握表格的边框、条纹、悬停效果；6.掌握Formcontrol表单类；学习难点1.掌握表格的边框、条纹、悬停效果；2.掌握Formcontrol表单类；子任务主要教学内容任务3：使用工具类1.为通用部分添加边框效果2.为通用部分设置显示切换项目任务：完成网站通用框架的搭建任务4：使用工具类1.使用Sapcing工具类设置元素间的内外间距；2.使用Text工具类给文字部分添加适当的效果；项目任务：完成邀请函页面任务5：使用工具类1.使用Shadows工具类给图片添加阴影效果项目任务：完成首页合照阴影效果任务6：使用内容类1.使用.img-fluid类为图片添加响应式支持2.使用img-thumbnail类为图片添加缩略图效果项目任务：完成首页合照图片效果任务7：使用内容类1.为表格添加基础样式2.使用.table-bordered,.table-striped,.table-hover类，为表格添加边框、条纹、和悬停效果3.添加表格和表头的颜色项目任务：完成日程表页面任务8：使用表单类1.使用.form-control为输入框架添加效果2.使用.input-group组合按钮和输入框项目任务：完成在线留言页面表单教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境三：Bootstrap常用组件项目名称：“同学会”网站学时：20教学目标1.掌握Navbar组件类；2.面包屑导航（Breadcrumb）组件类；3.掌握Listgroup组件类；4.掌握Accordion组件类；5.掌握Buttons组件类；6.掌握徽章（Badge）组件类；7.掌握警告框（Alert）组件类；8.掌握轮播（Carousel）组件类教学重点1.掌握Navbar组件类；2.掌握Accordion组件类；3.掌握Buttons组件类；4.掌握警告框（Alert）组件类；5.掌握轮播（Carousel）组件类学习难点1.掌握Accordion组件类；2.掌握轮播（Carousel）组件类子任务主要教学内容任务9：使用组件类1.使用Navbar组件制作导航栏；2.使用Breadcrumb组件制作面包屑导航；项目任务：完成首页导航栏和面包屑导航任务10：使用组件类1.使用Accordion组件制作温馨提示和组织小组模块；项目任务：完成邀请函页面任务11：使用组件类1.使用Buttons组件制作导航按钮；项目任务：重构导航栏任务12：使用组件类1.使用徽章（Badge）组件制作留言点赞数量；2.使用警告框（Alert）组件制作留言列表；项目任务：完成在线留言页面的留言列表任务13：使用组件类1.使用轮播（Carousel）组件制作校园风光图片轮播显示；2.使用轮播（Carousel）组件制作banner广告图片轮播显示；项目任务：完成校园风光页面、重构banner教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境四：项目强化项目名称：“同学会”网站学时：16教学目标1.掌握Bootstrap环境的搭建2.掌握Bootstrap的栅格系统3.掌握Bootstrap常用内容和工具类4.掌握Bootstrap常用组件教学重点1.掌握Bootstrap环境的搭建2.掌握Bootstrap的栅格系统3.掌握Bootstrap常用内容和工具类学习难点1.掌握Bootstrap的栅格系统子任务主要教学内容任务1：制作往昔岁月页面1.套用网站通用部分2.完成页面的响应式布局任务2：制作邀请函页面1.套用网站通用部分2.完成温馨提示模块3.完成组织小组模块任务3：制作日程表页面1.套用网站通用部分2.完成表格基础样式3.完成表格和表头的颜色任务4：制作在线留言页面1.套用网站通用部分2.完成表单模块3.完成留言列表模块教学方法建议以理论讲解、演示为主，学生按照教学内容进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结，采用任务驱动教学。备注六、实施建议（一）教材选用与编写根据专业人才培养方案和课程教学目标选用理论实践一体化或项目课程教材。推荐教材1.HTML5+BootstrapHTML5与Bootstrap网页设计，黑马程序员，人民邮电出版社，2019参考书：1.Bootstrap前端开发（全案例微课版）北京:清华大学出版社,20212.Bootstrap网站开发实战北京:电子工业出版社,20213.Bootstrap5.X从入门到项目实战北京:清华大学出版社,20234.网站5.网站（二）课程资源的开发与利用1.开发课件、微课等教学资源；2.选用符合教学要求的录像、课件、视频、资料文献等资源辅助教学；3.依托学校职教云教学平台进行课程资源建设。（三）教学基本条件1．专业教师的要求（1）具有前端新知识、新技能的学习能力和创新创业能力；（2）具备前端架构设计能力；（3）具备移动端开发能力；（4）具备前端组件化能力；（5）具备网站性能优化能力（6）具有较强的工作过程系统课程教学设计能力；（7）具有较强的行动导向教学组织与实施能力。2．学习场地、设施的要求为保证项目、任务的实施与完成，本课程必须在实践理论一体化教室完成教学过程。（四）教学建议1.本课程以实际的典型应用为基础构建学习载体，建议在每个学习情境的教学实施中，完全采用项目引导、任务驱动的行动导向教学，并以小组协作方式完成各项工作任务。2.以Web项目的设计、实现作为驱动主线，实现理论实践一体化教学。学生通过感性认识，理性思维，动手操作，完成Web项目的分析、设计、编码、调试和运行，在做中学，在学中做，最终达到真正听得懂，学得会，做得好，切实提高动手能力和分析问题、解决问题的综合素质。3.在教学过程中，要创设工作情景，同时应加大实践实操的容量，要紧密结合职业技能等级证书的考证，加强考证的实操项目的训练，在实践实操过程中，使学生掌握HTML静态页面设计与制作应有的技能，提高学生的岗位适应能力。4.在教学过程中，要尽量应用多媒体、动画视频、演示等教学资源辅助教学，帮助学生理解相关概念。5.在教学过程中，在教学过程中，关注软件产业发展新业态、新模式，对接新技术、新工艺、新规范发展趋势，贴近生产现场。为学生提供职业生涯发展的空间，努力培养学生参与社会实践的创新精神和职业能力。6.教学过程中教师应积极引导学生提升职业素养，培养职业道德。七、教学评价（一）成绩构成本课程主要以过程考核为主，考核涵盖学习情境全过程，既评价学生专业能力，也评价学生交流沟通、团队协作、自主学习、问题的分析与处理等非专业能力，以促进学生综合职业能力的养成。课程总评成绩=项目成绩（70%）+作业成绩（10%）+考勤（10%）+课堂活动成绩（10%）（二）项目成绩评价指标项目总分100分，项目考核由指导教师对每个小组进行综合考核，考核内容分为三个部分：第一部分是项目的设计和制作，占评价成绩的70%，第二部分是项目总结报告，占评价成绩的10%，第三部分是团队合作和语言表达