Bootstrap基础教程（第3版）课标教学设计

PAGE4PAGE《WEB前端框架应用》课程标准课程编码： 课程类别：B类适用专业：软件技术 授课单位：信息学院学时：72 编写执笔人及编写日期：xxx，2025年2月学分：4 审定负责人及审定日期：XXX，2025年2月1.课程定位和课程设计1.1课程性质与作用课程性质：本课程是软件技术专业的专业基础课程，是培养学生使用Web前端框架Bootstrap进行页面设计能力的支撑课程。课程的作用：通过本课程的学习，使学生逐步建立和掌握Web客户端静态页面设计的思想方法，具有分析问题和解决问题的能力，能够使用Bootstrap框架结合HTML、CSS和Javascript编写Web客户端静态页面，具备解决实际问题，吃苦耐劳、团结协作的良好品质，并为Web开发后续课程打下基础。与其他课程的关系（前导课程、后续课程）等。（1）前导课程：静态网页设计（2）后续课程：JavaWeb应用系统开发，信息系统开发1.2课程基本理念课程开发本着以专业能力培养为主线、兼顾社会能力、方法能力培养的设计理念，着重发展学生的实践技能。整个课程教学设计紧紧围绕高技能人才培养的目标展开教学，选取典型工作任务作为学习载体，以任务的开发过程为主线，将知识的讲解贯穿于任务的开发过程中，随着任务的进展来推动知识的扩展。根据开发过程中需要的知识与技能规划教学进度，组织课堂教学，确定学生实训任务。在循序渐进完成任务开发的同时实现教学目标，做到学习与工作的深度融合。1.3课程设计思路以“项目导向、任务驱动”的教学模式为主，通过引入实用的任务，以任务的开发过程为主线，贯穿于每个知识点的讲解，随着任务的不断拓展来推动整个课程的进展。对于每个知识点的讲解采用以实际工作中软件开发的过程和步骤为出发点，采用“五步”教学法，整个教学过程分为任务描述、计划、实施、检测、评价五大步骤，分别对应软件开发的需求分析、设计、编码、测试、验收五个工作环节。使得学生在学习的过程中自然而然的了解程序开发的步骤和流程，为将来参加实际工作进行项目开发打下良好的基础。同时通过采用“教”、“学”、“做”三位一体法教学法，教师边示范、边讲解、边提问，学生边做、边学、边思考，从而实现在做中教，在做中学，提高学生的实践能力和专业水平。2.课程目标知识目标：通过本课程的学习，使学生逐步建立和掌握Web客户端静态页面设计的思想方法，具有分析问题和解决问题的能力，能够使用Bootstrap框架结合HTML、CSS和Javascript编写Web客户端静态页面，具备解决实际问题，吃苦耐劳、团结协作的良好品质。能力目标：能独立进行资料收集与整理、具备用户需求的理解能力；．能根据项目需求，具备项目页面的设计与实现能力；能独立实现页面美化与布局；具有综合应用HTML语言、CSS样式、JavaScript脚本、Bootstrap进行页面的设计、编码、调试、维护能力。素质目标：养成善于思考、深入研究的良好自主学习的习惯；通过项目与案例教学，培养学习者的分析问题、解决问题的能力；具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力；通过课外拓展训练，培养学习者的创新意识；具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。3.课程内容与要求学习情境设计：学习情境情境描述职业能力（知识、技能、态度）课时单元一：Bootstrap入门搭建Bootstrap开发环境，使用Bootstrap开发第一个网页掌握Bootstrap开发环境搭建方法，掌握编写简单的Bootstrap网页的方法；增加学生学习课程的兴趣，端正学习态度。2单元二：Bootstrap栅格系统设计简单网页：应用Bootstrap栅格系统、CSS组件理解Bootstrap整体架构；掌握Bootstrap栅格系统；了解CSS组件架构，培养学生认真细致工作的习惯。8单元三：CSS样式设计个人主页：应用Bootstrap排版样式、表格样式、表单样式、按钮样式、图片和图标样式掌握Bootstrap排版样式使用；掌握表格样式使用；掌握表单样式使用；掌握按钮样式使用；掌握图片和图标样式使用；培养学生的页面设计能力。8单元四：工具类设计学习电台网页：应用颜色、边框、flex、图像、排列等工具类掌握各种工具的使用，培养学生网站设计设计的能力。8单元五：表单设计带有登录、注册、联系我们等页面掌握表单和输入框的使用6单元六：CSS组件设计带有登录、注册功能的响应式网站主页：应用图标、按钮组、下拉菜单、输入控件、导航、导航条、路径导航、分页、标签与徽章、巨幕、警告框、进度条、多媒体对象、列表组、卡片等技术掌握字体图标使用；掌握按钮组使用；掌握下拉菜单使用；掌握输入控件使用；掌握导航条使用；掌握路径导航使用；掌握分页使用；掌握标签与徽章使用；掌握巨幕使用；掌握警告框使用；掌握进度条使用；掌握多媒体对象使用；掌握列表组使用；掌握卡片使用；培养学生的网站设计能力,对页面进行美化与布局10单元七：Javascript插件设计网站页面效果：应用模态框、下拉菜单、滚动监听、标签页、提示、弹出框掌握模态框使用；掌握下拉菜单使用；掌握滚动监听使用；掌握标签页使用；掌握提示使用；掌握弹出框使用；提高学生的分析处理问题的能力。14单元八：综合案例通过一个综合案例讲解如何从0开始构建一个Bootstrap框架网站。提高学生的分析处理问题的能力。6课程设计12总学时724.课程实施4.1教学条件4.1.1软硬件条件在本课程实施过程中，对实验室实训室具体配置要求如下：名称配置标准序号设备名称数量硬件配置1CPU2.4G主频+2内存2G+3硬盘10G+软件或学习平台：操作系统：WindowsXP及后续版本开发工具：IIS6及后续版本、IE10以上版本、Chrome浏览器、HBuilder最新版本。4.1.2师资条件对任课教师的职业能力和知识结构的要求：任课教师能将课程体系、教学内容与企业对应岗位直接对接，实现企业开发团队与实际项目应用于教学过程，课程学习与项目开发实训合二为一。专任教师和兼职教师组成的具有“双师”结构特点的教学团队要求：专任教师100%为双师素质教师，专兼结合的教学团队中包含从软件企业研发一线的行业专家，直接承担专业课程的实践教学，成为专业教学团队的重要组成部分，教学团队成员80%同时具备学院讲师、企业工程师双重资格。4.2教学方法建议根据软件技术专业课程的特点和高职学生的特点，对于实践课程，可采用具有专业特色的教学模式PTLF。即项目导向（Project-oriented），任务驱动（Task-driven），层层递进（Layersofprogressive），四真环境（Fourkindsofsimulationenvironment）。①课程的完备性：通过项目贯穿和任务分解，学生了解到软件开发的真实过程，实践了软件开发各个阶段软件产品的建模及项目文档的编写，获得了完成某类项目的系统知识。②任务的导向性：每一阶段都有明确的目标和产品，各项任务逐层递进，引导学生一步一步完成整个项目。③教学情景的完整性：每个教学情景都是一个完整过程，从信息的收集、整理、分析、建模、到软件文档书写；设计有明确的输入、加工和输出项。通过学习，学生除了掌握相关技能，还可以领悟到解决问题的一些基本方法和思路。④技能的适应性：教学情景的设计具有典型性，通过这些教学情景的训练，学生的专业技术能力具有一定的适应性，可以在其它的项目中得以应用。4.3教学评价、考核要求本课程考核采用课程设计的形式。平时成绩（其中考勤占平时成绩40%、作业占平时成绩40%，过程性考核占平时成绩20%）占本课程成绩50%；课程设计成绩占本课程成绩50%。5.课程资源开发与利用（1）根据课程目标、学生实际以及本课程的专业技能特性，本课程的教学资源应该由教材和参考资料等组成。推荐教材：《Bootstrap基础教程（第3版）》，人民邮电出版社，赵丙秀主编推荐学习参考资料：1．《BootstrapWeb前端开发技术》，人民邮电出版社，肖立莉,刘德山主编2．《Bootstrap响应式Web前端开发》，人民邮电出版社，王红、秦海玉、侯勇主编（2）加强整个课程内容多媒体教学资源的建设，积极开发和利用网络课程资源，激发学生的学习兴趣，使学生的学习不再局限于课堂，促进学生对知识的理解和掌握。（3）产学合作开发实训课程资源，充分利用本行业典型的企业资源，加强产学合作，建立实习实训基地，实践工学交替，满足学生的实习实训需求，同时为学生的就业创造机会。6.其他说明本课程标准根据XXX职业学院“软件技术”专业人才培养方案制订，适用于三年制高职“软件技术”专业，也适用于软件测试等专业，根据专业不同，可以根据实际情况进行取舍变动。

软件技术软件技术专业《WEB前端框架应用》课程教学设计课程类别：课程主讲人：所在学院：XXXXXX学院教务处制 整体教学设计 基本信息课程名称WEB前端框架应用课程编码学分4学时72授课对象软件技术专业大一学生选用教材《Bootstrap基础教程（第3版）（微课版）》，人民邮电出版社，赵丙秀、汪晓青、李文蕙课程定位本课程以企业人才标准作为依据和培养目标，以培养学生WEB应用程序开发能力和基本素质为主线，围绕着WEB应用程序开发的基本理论和知识进行学习。通过本课程的学习，使学生逐步建立和掌握Web客户端静态页面设计的思想方法，具有分析问题和解决问题的能力，能够使用Bootstrap框架结合HTML、CSS和Javascript编写Web客户端静态页面，具备解决实际问题，吃苦耐劳、团结协作的良好品质，并为Web开发后续课程打下基础。与其他课程的关系（前导课程、后续课程）等。（1）前导课程：静态网页设计（2）后续课程：JavaWeb应用系统开发，信息系统开发设计说明设计理念：课程开发本着以专业能力培养为主线、兼顾社会能力、方法能力培养的设计理念，着重发展学生的实践技能。整个课程教学设计紧紧围绕高技能人才培养的目标展开教学，选取典型工作任务作为学习载体，以任务的开发过程为主线，将知识的讲解贯穿于任务的开发过程中，随着任务的进展来推动知识的扩展。根据开发过程中需要的知识与技能规划教学进度，组织课堂教学，确定学生实训任务。在循序渐进完成任务开发的同时实现教学目标，做到学习与工作的深度融合。设计思路：以“项目导向、任务驱动”的教学模式为主，通过引入企业代表性项目，以项目的开发过程为主线，贯穿于每个知识点的讲解，随着项目的不断拓展来推动整个课程的进展。对于每个知识点的讲解采用以实际工作中软件开发的过程和步骤为出发点，采用“五步”教学法，整个教学过程分为任务描述、计划、实施、检测、评价五大步骤，分别对应软件开发的需求分析、设计、编码、测试、验收五个工作环节。使得学生在学习过程中自然而然的了解程序开发的步骤和流程，为将来参加实际工作进行项目开发打下良好的基础。同时通过采用“教”、“学”、“做”三位一体法教学法，教师边示范、边讲解、边提问，学生边做、边学、边思考，从而实现在做中教，在做中学，提高学生的实践能力和专业水平。学情分析知识基础前面已经学习了《静态网页设计》课程，有一定的页面设计基础。有一定数学和英语基础。能力水平能利用HTML和CSS进行简单的页面设计，能利用电脑进行基本操作，如：上网、文字处理等。行为特征1.乐于采用信息化手段学习2.学生沟通技巧与深度思考不足教学目标知识目标能力目标素质目标通过本课程的学习，使学生逐步建立和掌握Web客户端静态页面设计的思想方法，具有分析问题和解决问题的能力，能够使用Bootstrap框架结合HTML、CSS和Javascript编写Web客户端静态页面，具备解决实际问题，吃苦耐劳、团结协作的良好品质。能独立进行资料收集与整理、具备用户需求的理解能力；．能根据项目需求，具备项目页面的设计与实现能力；能独立实现页面美化与布局；具有综合应用HTML语言、CSS样式、JavaScript脚本、Bootstrap进行页面的设计、编码、调试、维护能力。养成善于思考、深入研究的良好自主学习的习惯；通过项目与案例教学，培养学习者的分析问题、解决问题的能力；具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力；通过课外拓展训练，培养学习者的创新意识；具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。学习内容设计学习情境情境描述职业能力（知识、技能、态度）课时单元一：Bootstrap入门搭建Bootstrap开发环境，使用Bootstrap开发第一个网页掌握Bootstrap开发环境搭建方法，掌握编写简单的Bootstrap网页的方法；增加学生学习课程的兴趣，端正学习态度。2单元二：Bootstrap栅格系统设计简单网页：应用Bootstrap栅格系统、CSS组件理解Bootstrap整体架构；掌握Bootstrap栅格系统；了解CSS组件架构，培养学生认真细致工作的习惯。8单元三：CSS样式设计个人主页：应用Bootstrap排版样式、表格样式、表单样式、按钮样式、图片和图标样式掌握Bootstrap排版样式使用；掌握表格样式使用；掌握表单样式使用；掌握按钮样式使用；掌握图片和图标样式使用；培养学生的页面设计能力。8单元四：工具类设计学习电台网页：应用颜色、边框、flex、图像、排列等工具类掌握各种工具的使用，培养学生网站设计设计的能力。8单元五：表单设计带