职业技术学校《响应式网站开发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