《Web前端开发》教学大纲

《Web前端开发》教学大纲课程编号：13220502英文名称：Front-endDevelopmentofWeb学分：2.5学时：总学时48学时，其中理论32学时，实践16学时先修课程：计算机导论课程类别：专业主干课授课对象：计算机科学与技术专业学生教学单位：机械与电气工程学院修读学期：第3学期一、课程描述和目标《Web前端开发》是一门计算机科学与技术专业低年级学生的专业必修课，属于应用类课程。通过本课程，让学生学习有关Web前端开发所需的知识，学习Web前端常用的开发和调试工具，能用HTML技术设计Web页面，能用CSS对Web页面进行布局和美化，能用JavaScript实现Web页面的动态效果和交互功能，能设计和开发满足不同行业需求的Web前端应用。课程目标1：学习Web前端开发所需的基础知识，包括HTML、CSS、JavaScript，培养Web前端开发的基本能力，包括代码编写、代码调试、页面优化。课程目标2：能熟练使用Web前端开发的编辑工具软件，调试工具软件和发布工具软件。课程目标3：能设计与开发满足不同行业需求的Web前端应用。二、课程目标对毕业要求的支撑关系毕业要求指标点课程目标权重指标点5-2：能够选择与使用恰当的仪器、信息资源、工程工具和专业模拟软件，对计算机软硬件系统在设计与实施等过程中的复杂工程问题进行分析、计算与设计。课程目标1H指标点8-2：理解诚实公正、诚信守则的工程职业道德和规范，并能够在计算机相关领域的工程实践中自觉遵守。课程目标2M指标点12-1：具备持续更新和提高自我知识、能力与素质的终身学习意识。课程目标3M三、教学内容、基本要求与学时分配序号教学内容基本要求及重、难点（含德育要求）学时教学方式对应课程目标1Web前端开发基础：Web网站基本概念Web网站工作原理Web网站规范Web前端开发工具理解Web网站的概念和规范，理解Web网站工作原理，学会使用Web前端开发工具德育要求：爱岗敬业2讲授式演示式课程目标1课程目标22HTML模块：HTML简介与结构HTML文字、段落、图像、超链接、列表、表格、DIV、SPANHTML表单理解HTML基本概念和规范，具备HTML代码编写能力，能应用HTML知识制作结构合理代码规范的Web前端应用。德育要求：家国情怀6讲授式演示式练习式课程目标1课程目标23CSS模块：CSS简介与基本语法CSS在HTML中的使用方法CSS基本选择器CSS复合选择器CSS盒子模型CSS定位CSS页面布局理解CSS基本概念和规范，具备CSS代码编写能力，理解CSS在Web开发中的作用，能够应用HTML与CSS知识设计和开发出结构合理、代码规范、样式美观的Web前端应用。德育要求：工匠精神8讲授式演示式练习式课程目标2课程目标34JavaScript模块：JavaScript简介JavaScript语法JavaScript对象浏览器对象HTMLDOM对象JQuery应用Web应用部署理解JavaScript基本概念和规范，具备JavaScript代码编写能力，了解在浏览器环境中调试JavaScript的方法，能应用HTML、CSS和JavaScript知识设计和开发出结构合理、代码规范、样式美观、具有动态效果的Web前端应用。了解Web前端应用部署方法。德育要求：职业素养8讲授式演示式练习式课程目标2课程目标35案例项目模块：首页与商品详情购物车管理登录与册订单管理与个人中心浏览器调试技术了解功能模块的设计与实现，掌握前浏览器和后端Java调试技术，掌握应用MVC模式进行Web开发。德育要求：创新意识、团队协作8讲授式演示式练习式课程目标3合计32序号实验项目实验内容与要求学时类型对应课程目标1HTML表单应用实验要求：必修。实验内容：计一个问卷调查Web页面，调查内容三选一（手机使用习惯，微博使用习惯，游戏娱乐习惯）。具体要求：包含表单的下列元素text，radio，checkbox，select，textarea，submit，reset，具体调查内容自定义2设计课程目标1课程目标22CSS基础应用实验要求：必修。实验内容：完成7个局部Web页面的CSS样式代码编写，给出HTML代码和样式要求，学生完成CSS代码编写。2设计课程目标1课程目标23CSS综合应用实验要求：必修。实验内容：完成2个完成页面的布局，给出HTML代码和Web页面效果图，学生完成页面布局的CSS代码编写。Web页面1固定宽度居中2列型布局，要求综合使用CSS页面布局技术；Web页面2自适应宽度2列型布局，要求综合使用CSS页面布局技术。2设计课程目标2课程目标34JavaScript应用实验要求：必修。实验内容：完成1个有奖竞赛Web页面，要求使用JavaScript数组、函数、事件等基础知识。具体要求：系统内部产生一个一定范围的随机数；用户猜一个数字，如果和系统随机数相同，则中奖。用户猜数的形式可以多样，可以是数字按钮或者输入一个数字或者变换的数字点暂停或者其他可行的方式；奖品在屏幕上显示若干个，中奖后突出显示用户获得的一个奖品；单击重置按钮，游戏可以重新开始。2设计课程目标2课程目标35综合网站设计实验要求：必修。实验内容：完成1个电子商务类Web前端应用的设计和开发。具体要求：(1)设计电子商务网站首页index.html，包含网站Logo，导航菜单，最新动态，产品分类，产品列表；(2)设计商品详情detail.html，包含商品各类具体信息：编号、名称、简介、图片、单价、购买数量，加入购物车按钮；(3)设计用户注册reg.html和登录login.html页面;(4)设计购物车展示页面cart.html，包含3项购物项目，提交订单按钮；(5)设计订单页面order.html，包含订单金额，收货人、收获电话、收获地址，订单明细；(6)网站部署到Windows或者Linux的Web服务器软件中。8综合课程目标2课程目标3合计16四、课程教学方法集中讲授与翻转课堂相结合、直观演示、小组讨论、案例分析等教学方式。五、学业评价和课程考核（一）考核方式及具体要求序号考核方式课程目标1（分值）课程目标2（分值）课程目标3（分值）合计1平时作业334102章节测验15510303课程实验226104课程项目10103050课程目标对应分值302050100（二）考核与评价标准1.平时作业考核与评价标准分值观测点90-100分70-89分60-69分0-59分作业按时完成，90%以上的作业内容齐全，基本知识点理解、掌握到位。能够利用利用理论知识实现较为复杂Web前端应用开发。按时完成，70%以上的作业内容齐全，基本知识点理解、掌握较到位。能够较好利用理论知识实现Web前端应用开发。延时完成，60%以上的作业内容齐全，基本知识点理解、掌握基本到位。能够利用理论知识基本实现Web前端应用开发。不交和补交，50%以下的作业内容齐全，基本知识点理解、掌握有偏差。不能利用理论知识实现Web前端应用开发。2.章节测试与评价标准章节测试根据测试题目及评分标注进行打分（百分制）。3.课程实验考核与评价标准分值观测点90-100分70-89分60-69分0-59分课程实验能根据实验要求自主设计实验方案，有自己的设计理念，实验完成度高，效果好。实验报告完整，技术总结分析到位。能根据实验要求自主设计实验方案，有自己的设计理念，实验完成度较高，效果较好。实验报告完整，技术总结分析基本到位。能根据实验要求自主设计实验方案，实验完成度一般，效果一般。实验报告较完整，技术总结分析不到位。基本能根据实验要求自主设计实验方案，实验完成度差，效果差。实验报告不完整，无技术总结分析。4.课程项目考核与评价标准分值观测点90-100分70-89分60-69分0-59分课程项目课程项目功能完善，符合课程项目设计要求；项目代码规范，代码注释丰富，符合项目开发代码要求；界面简洁美观，人机交互合理，业务逻辑合理。项目文档格式规范，符合项目技术文档要求。课程项目功能较完善，符合课程项目设计要求；项目代码较规范，有一定代码注释，符合项目开发代码要求；界面简洁美观，人机交互较合理，业务逻辑合理。项目文档格式较规范，符合项目技术文档要求。课程项目功能基本完善，符合课程项目设计要求；项目代码规范，有代码注释，基本符合项目开发代码要求；界面效果一般，人机交互简单，业务逻辑基本合理。项目文档基本符合项目技术文档要求。课程项目基本功能未完成；项目代码不规范；界面简陋，人机交互不合理。项目文档格式不规范，不符合项目技术文档要求。六、教材与参考书（一）推荐教材1．《从0到1HTML+CSS+JavaScrip