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

课程标准课程名称：响应式网站开发专业大类：电子信息大类响应式网站开发S代码:0311117课程名称：响应式网站开发课程性质：必修课程类别：职业技术基础课程适用专业：计兑机应用技术、软件技术、移动互联应用技术开设学期：第一学期授课学时：48（理实一体）+16学时项目强化一、课程定位N响应式网站开发是计算机应用技术、软件技术、移动互联应用技术专业的一门职业技术基础课程，由浅入深地讲解了前端框架bootstrap的语法及使用技巧,涵盖了bootstrap的众多功能模块,如栅格系统,Borders,Disp1.ay,Spacing、Text-,1.inages、ShadoWS工具类，NaVbar、Breadcrumbs1.istgroup、Accordion,A1.ert、Carouse1.等众多组件、及表格类、表单类等，通过理论、图解、实战的方式阐择Bootstrap的特性功能.通过学习本门课程，学生能更好地掌握Bootstrap的特性，并且将新技术运用到实际的开发当中，提高自C1.开发Web程序的水平。二、谭程设计以就业为导向，以能力为本位，不局限于单纯的技能训练，在培养学牛.职业岗位能力的基础上，围绕高走明复合型技术技能型人才专业培养目标，培养学生的终身学习的能力和职业生涯发展所需的综合素养。课程建设优化传统HTy1.网页设计类课程教学内容，设计教学情境.开发课程案例，建设课程教学资源，实施基于混合式教学的“教学做”一体化教学方式，采用过程式考核方式，提高课程教学质量。课程教学按照：“提出工程实际案例、分析案例所需知识、知识准算、师生共同完成案例、布置任务、学生臼主完成任务、小组交潦、教加点评”的步骤进行。将课程基本知识点融于案例中，围绕着案例来开展课堂教学活动，引导学生参与分析、讨论，让学生在具体的问题情境中，积极思考，主动探索。课程教学内容符合职业技能培养要求，注重实践环节，实践性教学内容占课程内容的60%以上，课程既具有针对性、又具有技术性和综合性，有效地培养了学生豆杂静态页面的设计与开发能力。三、课程目标(一)课程总目标通过基于工作过程的教学实施，使学生能够根据工作任务和要求，按网站设计的堪本潦程、需求规范，运用相关工具，独立自主完成基于Boo1.s1.rap技术的静态复杂页面的设计与制作,同时对接行业标准和岗位要求强化学生的职业道德菽识和职业素质养成意识；通过小组合作学习，培养学生团队合作、协议沟通能力；为后续Web前端开发打下坚实的基础。(二)课程具体目标1.知识目标(1)掌握BoOtS1.raP的环境搭建;(2)掌握Bootstrap栅格系统的使用；(3)掌握B。ISIraP的常用工具类：(4)掌握BootStraP的常用组件;(5)掌握B。IS1.raP表格类的使用：(6)掌握B。IStraP表单类的使用。2 .能力目标(1)能够设计、制作响应式布局的静态页面：(2)能综合使用BOoISIr即美化页面元素；(3)能综合使用BOOtSIraP常用组件丰富页面表现效果。3 .素质日标(1)培养学生良好的语言表达能力：(2)培养学生自主学习习惯和团队合作能力，身心参与、手脑并用的劳动意识；(3)培养学生严谨细致的学习态度和追求完美的工匠精神：(4)树立坚定的理想信念，厚植爱国主义楮怀；四、课程内容及学习情境根据Web前端开发工程师职业岗位的要求，遴选课程内容，课程内容打破学科体系，进行解构和建构。以其实的项1和任务为载体，基于Web前端开发的设计、开发与维护岗位的工作流程设置四个情境：I.BOo1.S1.rUP栅格系统，2.Bootstrap常用内容、工具、表单类，3.Bootstrap常用组件，4.项目强化.课程的主要内容和要求见表U表1课程内容和学习情境表序号学习情境学习体主要学习内容学习目标学时I学习情境1BoOtStr叩梗格系统“同学会”通用框架、往昔岁月页面任务1：使用Bootstrap的容零项目任务：完成网站通用框架的搭建I.掌握container：2.掌握container-f1.uid；4任务2：使用网格实现响应式布局项目任务:完成往昔岁月页面I掌提网格(Grid)基本使用:2 .掌握定义列宽度：3 .掌握OfrSe1.S和Gutters的使用；4 .掌握同一列在浏览器不同分辨率下窕度的切换：42学习情境2BoOtStraP常用内容、工具、表单类“同学会”通用柩架、首页、邀请函、日程表、在线明言页面任务3：使用工具类项目任务：完成网站通用柢架的搭建1，握Borders1.具类：2.»Disp1.ay工具类;4任务4：使用工具类项目任务:完成遨请函页面I.掌提SapCing工具类：2.掌握Tx1.工具类；4任务5：使用工具类项目任务：完成首页合照阴影效果1.掌提Shadows工具类:2任务6：使用内容类项目任务：完成甘灾合照图片效果1.掌握Images内容类：2任务%使用内容类原目任务：完成H程表页面I.掌握Tab1.es内容类的蚊认样式：2 .掌握表格的边框、条纹、悬停效果：3 .掌握设置去格及表头的颜色：4任务8：使用表单类项目任务,完成在线价言页面表单1 .掌握FonnCumrO1.表单类：2 .掌握Inputgroup表单类:43学习情境3Bootstrap常用组件“同学会”通用框架、首页、邀谛函、在线窗古页面任务9：使用组件类JJiFI任务：完成首页导航栏和面包屑导航1 .室维NaVbar组件类：2 .面包屑导航(Breadcnimb)组件类：4任务10：使用组件类项目任务；完成遨请函页面1*1S1.iStgroUP俎件类:2.掌件Accon1.ion组件类：4任务Ih使用S1.件类项目任务：重构导航程1.掌握BUUOnS组件类;2任务12：使用姐件类项目任务:完成在线留古页面的留吉列表1.掌握徽幸(BadRC)组件类:2.掌樨警告框(A1.ert)组件类：2任务13：使用组件类攻目任务：完成校园风光页面、重构bannerI.掌提轮播(CarOUSeD溟件类8学习情境4项目强化“同学会”网站任务1：制作往昔岁月页面I.套用网站通用部分2.完成页面的响应式布局4任务2：制作遨请函页面I.套用网站通用部分2 .完成温馨提示模块3 .完成组织小组模块4任务3：制作日程表页面1 .食用网站通用部分2 .完成表格基础样式3 .完成表格和灰头的颜色4任务4：制作在践留古页面1.套用网站通用部分2 .完成表原模块3 .完成留言列表模块4五、教学设计学习情境一，BOOtStraP楣格系统项目名称：“同学会”网站学时，8教学目标1 .掌握COntainer容涔2 .掌握COntainer-f1.uid容器3 .掌握网格(Grid)基本使用4 .掌握定义列宽度5 .掌握OffSetS和GUtterS的使用6 .掌握同一列在浏览器不同分辨率下宽度的切换教学重点1 .掌握Con1.ainer容耦2 .掌握网格(Grid)基本使用3 .掌握定义列宽度1.掌握同一列在浏览器不同分辨率下宽度的切换学习难点1 .掌握定义列宽度2 .掌握同一列在浏览罂不同分辨率下宽度的切换子任务主要教学内容任务1:使用BootStmP的容器I.使用container容器,完成网站通用框架的搭建项目任务：完成网站通用框架搭建任务2：使用网格实现响应式布局1.使用Grid相关样式类，实现页面布局：2 .使用.co1.-,定义各列宽度3 .使用Offsets和Gutters,设置偏移和各列之间的间隔1.使用断点，实现同一列在浏览器不同分册率卜.宽度的切换项目任务I完成往昔岁月页和活动详情面教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老如按照每个小组的完成情况对小组进行评分并总结。备注学习情境二，Bootstrap常用内容、工具、表单类项目名称，“同学会”网站学时I20教学目标1 .掌握BorderS工具类：2 .掌握DiSPIay工具类：3 .掌握SaPCing工具类：4 .掌握TeXt工具类；5 .掌握Shadows工具类:6 .掌握Images内容类;7 .掌握Tab1.es内容类的默认样式；8 .掌握表格的边框、条纹、悬停效果：9 .掌握设理表格及表头的颜色：11 .掌握FormCOn1.roI表单类：12 .掌握InPUtgroup表单类;教学重点1.掌握DiSPIay工具类：2 .掌握SaPeing工具类：3 .掌握Images内容类：4 .掌握Tab1.es内容类的默认样式；5 .掌握表格的边框、条纹、悬停效果：6 .掌握Eohiicontro1.表单类；学习难点I.掌握表格的边框、条纹、悬停效果：2.掌握FormContrOI表单类：子任务主要敷学内容任务3：使用工具类1 .为通用部分添加边框效果2 .为通用部分设置显示切换项目任务I完成网站通川柢架的搭建任务4：使用工具类1 .使用SaPCing工具类设置元素间的内外间距：2 .使用Text工具类给文字部分添加适当的效果：项目任务：完成邀访函页面任务5：使用工具类1.使用ShadOWS工具类给图片添加阴影效果项目仔务：完成首页合照阴膨效果任务6：使用内容类1 .使用.im-f1.uid类为图片添加响应式支持2 .使用img-thumbnai1.类为图片添加缩略图效果项目任务：完成首页合照图片效果任务7：使用内容类1 .为表格添加基础样式2 .tab1.e-bordered,.tab1.e-striped,.tab1.e-hover类，为表格添加边框、条纹、和悬停效果3 .添加表格和表头的颜色项目任务：完成日程表页面任务8：使用表单类1.使用.form-contro1.为输入框架添加效果2.使用.input-group组合按钮和输入框项目任务：完成在线留言页面表单教学方法建议任务驱动方式组织教学内容，取用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评,老师按照每个小组的完成情况对小组进行评分并总结。备注学习情境三：BoOt8trap常用组件项目名称：“同学会”网站学时：20教学目标1 .掌握NaVbar组件类；2 .面包屑导航(Breadcrumb)组件类：3 .掌握1.iS1.group组件类;4 .掌握ACCordion组件类:5 .掌握BUttonS组件类：6 .掌握徽章(Badge)组件类：7 .掌握警告框(A1.ert)组件类；8 .掌握轮播(Carouse1.)组件类教学重点1 .掌握Navbar组件类：2 .掌握ACeOrdion组件类：3 .掌握BU1.1.OnS组件类；4 .掌握警告框(A1.ert)组件类：5 .掌握轮播(Carouse1.)组件类学习难点1 .掌握Accordion组件类：2 .掌握轮播(Carouse1.)组件类子任务主要教学内容任务9：使用组件类1 .使用NaVbar组件制作导航栏;2 .使用BreadCrUmb组件制作面包屑导肮：项目任务：完成苜页片航栏和面包厝导航任务10：使用组件类1.使用Accordion组件制作温馨提示和组织小组模块：项目任务：完成邀请函页面任务11：使用纲件类1.使用Buttons组件制作导航按钮；项目任务：重构导航栏任务12：使用组件类1.使用徽章(Badge)组件制作留言点费数址;2.使用警告框(A1.ert)组件制作留言列表：项目任务：完成在线留言页面的留言列表任务13：使用纲件类1 .使用轮播(Carouse1.)组件制作校园风光图片轮播显示:2 .使用轮播(Carouse1.)组件制作banner广告图片轮播显示：项目任务：完成校园风光页面、重构banner教学方法建议任务驱动方式组织教学内容，采用理实一体化教学方式，学生按照任务进行实操并进行自我评价以及小组互评，老师按照每个小组的完成情况对小组进行评分并总结。答注学习情境四：项目强化项目名称：“同学会”网站学时：16教学目标1 .掌握Bootstrap环境的搭建2 .掌握Bootstrap的棚格系统3 .掌握Bootstrap常用内容和工具类-1.掌握Bootstrap常用组件教学重点1 .掌握B。ISIraP环境的搭建2 .掌握Bootstrap的栅格系统3 .掌握Bootstrap常用内容和工具类学习难点1.掌握BootStraP的栅格系统子任务主要教学内容任务1：制作往昔岁月页面I.套用网站通用部分2.完成页面的响应式布局任务2：制作邀请函页面1 .套用网站通用部分2 .完成温野提示模块3 .完成组织小组模块任务3：制作11程表页面I.套用网站通用部分2,完成表格触础样式3.完成表格和表头的颜色任务制作在线图方页面1 .食用网站通用部分2 .完成表单模块3完成留言列次模块效学方法建议以理论讲解、演示为生，学生按照教学内容进行实操并进行自我评价以及小组互评，老师按煦每个小组的完成情况对小组进行评分并总结，采用任务驱动教学。备注六、实施建议(一)教材选用与编写根据专业人才培养方案和课程教学目标选用理论实践一体化或项目课程教推荐教材1.HTM1.5+BootstrapHTM1.5与BOotStraP网页设计，黑马程序员，人民邮电出版社，2019参考书：1.Bootstrap前端开发（全案例微课版）北京：清华大学出版社，20212. B。OtStraP网站开发实战北京：电子工业出版社，20213. Bootstrap5.X从入门到项目实战北京：清华大学出版社，20234. 11r网站5. 网站二）课程资源的开发与利用1 .开发课件、微课等教学资源：2 .选用符合教学要求的录像、课件、视频、资料文献等资源辅助教学：3 .依托学校职教云教学平台进行课程资源建设。（三）教学基本条件4 .专业教师的要求（1）具有前端新知识、新技能的学习能力和创新创业能力：（2）具备前端架构设计能力：（3）具备移动端开发能力：（4）具备的端组件化能力：（5）具备网站性能优化能力（6）具有较强的工作过程系统课程教学设计能力：（7）具有较强的行动导向教学组织与实施能力。5 .学习场地、设施的要求为保证项目、任务的实施与完成，本课程必须在实践理论一体化教室完成教学过程。（四）教学建议1 .本课程以实际的典型应用为基础构建学习我体，建议在每个学习情境的教学实施中，完全采用项目引导、任务驱动的行动导向教学,并以小组协作方式完成各项工作任务。2 .以Web项目的设计、实现作为驱动主线，实现理论实践体化教学。学生通过感性认识，理性思维，动手操作，完成Web项目的分析、设计、编码、调试和运行，在做中学，在学中做，最终达到真正听得懂，学得会,做得好，切实提高动手能力和分析问题、解决问题的综合素履。3 .在教学过程中，要创设工作情景，同时应加大实践实操的容垦，要紧密结合职业技能等级证书的考证，加强号证的实操项目的训练,在实践实操过程中，使学生掌握HTy1.踊态页面设计与制作应有的技能,提高学生的询位适应能力。4 .在教学过程中，要尽量应用多媒体、动画视频、演示等教学资源辅助教学，帮助学生理解相关概念。5 .在教学过程中，在教学过程中，关注软件产业发展新业态、新模式，对接新技术、新工艺、新规范发展趋势，贴近生产现场。为学生提供职业生涯发展的空间，努力培养学生参与社会实践的创新精神和职业能力。6 .教学过程中教时i应积极引导学生提升职业素养，培养职业道德。七、教学评价（一）成绩构成本课程主要以过程考核为主，号核涵盖学习情境全过程，既评价学生专业能力，也评价学生交流沟通、团队协作、自主学习、问题的分析与处理等非专业能力，以促进学生综合职业能力的养成。课程总评成绩=项目成绩（70%）+作业成绩10%）+考勤（IOQ+课堂活动成绩（10%）（二）项目成绩评价指标项目总分100分，项目考核由指导教师对每个小组进行综合考核，考核内容分为三个部分：第部分是项目的设计和制作，占评价成绩的70斩第二部分是项目总结报告，占评价成绩的10%,第三部分是团队合作和语言表达,占评价成绩10缸第四部分是职业操守，占评价成绩的10%。具体考核标准见表2。表2项目考核标准考核内容（满分100分）评分占满分的100%80占满分的8060占满分的60¾以下“同学会”网站的设计与制作（70分）网页通用部分实现（K）分）能够独立完成页面设计与制作可以通过其他人帮助下，能够完成页面设计与制作不能完成页面设计与制作首页（10分）能够独立完成页面设计与制作可以通过其他人帮助下，能够完成页面设计与制作不能完成页面设计与制作邀请函（5分）能够独立完成页面设计与制作可以通过其他人帮助下，能够完成页面设计与制作不能完成页面设计与制作日程表（5分）能够独立完成页面设计与制作可以通过其他人帮助下，能够完成页面设计与制作不能完成页面设计与制作往昔岁月（10分）能够独立完成页面设计与制作可以通过其他人帮助下,能够完成页面设计与制作不能完成页面设计与制作校园风光（10分）能够独立完成页面设计与制作可以通过其他人帮助下,能够完成页面设计与制作不能完成页面设计与制作在线留言（10分）能够独立完成页面设计与制作可以通过其他人帮助下,能够完成页面设计与制作不能完成页面设计与制作联系我们（10分）能够独立完成页面设计与制作可以通过其他人帮助下，能锅完成页面设计与制作不能完成页面设计与制作总结报告（10分）格式符合要求，内容完整正确格式堪本符合要求，内容部分正确内容未写清楚团队合作和语言表达（10分）有很强的团队合作精神,在团队中起主要作用，能够清晰地表述项目实现原理有一定的团队合作精神,在团队中起次要作用，能够表述项目实现原理没有团队合作意识，基本未发挥作用，问题表述不清楚职业操守（三）分）代码规范、命名规范、有注择、代码格式清晰代码可读性不高代码比较混乱