《Web前端开发技术》课程标准.docx

Web前端开发技术课程标准一、课程基本信息课程编码z01100426课程类型理论实践理论+实践V总学时72实践学时,18学分4.5适应对象高等职业学校软件技术相关专业（群）适用专业软件技术先修课程高级语言程序设计、数据结构、HTML5后续课程动态网站开发、毕业设计编写教师编写时间2021年7月院（部）审批审批时间二、课程定位UavaScript）课程是计算机软件技术专业的一门重要的专业课，定位于WEB技术开发工作岗位。它是WI田前端技术开发的必备课程，在整个课程体系中具有重要的作用。本课程的前导课程：高级语言程序设计、数据结构、HTML5。后续课程：动态网站开发、毕业设计等。通过学习本课程的学习，使学生掌握JaVaSCriPt的基本知识与应用，能运用所学知识开发出企事业单位需要的各种形式网站（网上商店、论坛、新闻发布等）的特效。强化学生项目开发能力（系统分析/设计，编程，测试等）。培养学生应用动态网站技术进行网页特效开发的能力，并形成良好的编程习惯和团队合作精神；培养学生的自主学习和创新能力，为其成长为一名合格的WEB前端技术开发程序员奠定良好的基础。三、课程能力标准要求（一）知识要求使学生掌握常用的网页设计工具，熟练运用多种网页设计技术，具备Web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。1、掌握JaVaSCriPt语言的基本语法。2、掌握JavaScript中的BOM对象操作。3、掌握JaVaSCriPt操作文档对象模型。4、掌握jQue门T选择器。5、掌握jQuery中的事件与动画特效。6、掌握jQuey中的DOM操作。7、掌握表单验证。8、掌握jQue”中的Ajax。（二）能力要求1、具有网站功能规划的能力。2、具有网站布局的能力。3、具有规范化、专业化的编码能力4、具有规范化、专业化的测试能力；熟悉项目实施过程，如：需求分析、系统设计、编码、测试、提交产品等；（三）素质要求形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。1、自主、开放的学习能力2、诚实、守信、坚韧不拔的性格3、良好自我表现、人际沟通能力、良好的团队合作精神四、知识体系（思维导图、知识要点）见图1知识体系思维导图五、课程主要内容课程教学能力训练项目设计表见表1课程教学能力训练项目设计表订购页面交互效果化妆品网站需来分析和设计同*SU功由£计问站风格定位页面而要分析与&计，跣遍网站SthS计总计工具：PhotoshopC86开发环境搭建'；,开卷工具：DreamWeaVerCS6SJSublime Te, t %5tZB JETester (6-11), Flrefo,( SM9S件FirebUg)用户注册交互效果注册弹出苜口：回定S件,tMgg信色：JaVaSCriPt对刎Bt呈.包括五大对象网站首页交互效果实现一等四片乾I菁工甲：自定兵邸聂定订震订方搜索Ig文字惺示效毕：事件女程I返回顶部双甲：C$弹式.JQuer湎作动Ig、¾fljQueyfflDOMjQueryiWffM图聆ffJTabtW或甲：动画.足时;S一片的大数甲：FanCybo,用片插件杂止Id标石所品：jQuery中的BOMBg产品列表页面交互效果实现户品到HaM旃（手被白"；：晨u"y密件理 产品评用正特K :葭1臼事件辑湿石就条，匕：语环*11遇主TinySCrolIbar插件使用使物QU缈实迎U1«USeIeuT拉据搠晓示0里：事件删呈留言板异步刷新、SAja,求.JSON¾a图1知识体系思维导图表1课程教学能力训练项目设计表总项目（活动）子项目（活动）训练项目名称训练任务拟实现的能力目标和素质目标学时1.化妆品网站设计与实现1.1主题网站需求分析与总体设计1.1.1网站需求分析编写需求规格说明书掌握需求分析的过程与规范11.1.2网站规划功能设计掌握网站规划的流程11.1.3网站风格定位页面布局分析与设计掌握页面布局的知识1114化妆品网站总体设计网站总体设计掌握网站总体的设计流程11.2开发环境、1.2.1开发环境、熟悉开发环境熟悉开发环4调试环境搭建调试环境搭建境，能够创建网站、网页等1.3猜数游戏和计算器设计131显示变量数据类型制作动态显示变量数据类型掌握JavaScript的变量、数据类型、运算符号等知识1132学生成绩考评.制作学生成绩考评页面掌握JavaScript的选择结构语法11.3.3猜数字游戏制作猜数游戏页面掌握JavaScript的循环结构1L3.4简易计算器制作简易计算器掌握函数和自定义函数1L4用户注册页面效果1.4.1动态显示系统时间及随机选号设计在页面动态显示系统时间掌握Date对象和定时器函数1制作随机选号页面掌握Math对象的属性和常用方法1制作简单的焦点图效果掌握数组的属性和方法1验证注册页面信息掌握String对象的属性和方法1使用正则表达式验证掌握正则表达11.4.2动态添加商品信息表注册页面信息式的使用使用CoreDOM方式动态添加表格掌握查看、创建、增加、删除、替换节点3使用HTMLDoM方式动态添加表格掌握HTMLD0M对象的属性143动态弹窗及注册页面弹出窗口的掌握window的网页标题交替显示实现常用属性、方法和事件2制作页面标题交替显示效果、复选框全选效果掌握document对象的常用属性和方法21.5网站首页交互效果实现1.5.1动态改变导航菜单及图片轮播动态改变导航菜单样式掌握style、CIaSSName、visibility>display属性1制作图片轮显效果掌握style>ClassNamexvisibility>display属性1制作随光标滚动的广告图片掌握获取样式的值和页面事件1制作Tab切换效果掌握制作Tab切换效果的方法1制作光标移到某图上显示该图的大图掌握制作光标移到某图上显示该图的大图的方法21.5.2化妆品网站背景图轮播效果实现化妆品网站背景图轮播效果实现能综合运用JavaScript与CSS样式21.5.3搜索框文字提示效果化妆品网站索框文字提示效果1.5.4品牌列表的显示与收起网站品牌列表的显示与收起jQuery开发工具和插件、jQuery选择器41.5.5留言板前端特效制作制作图片展示效果制作留言板前端局部掌握jQuery的DoM操作，获取、设置和删4更新效果制作电子邮件删除效果表格隔行变色和当前行变色制作层叠图片横向平滑移动轮播切换效果除属性掌握节点的操作1.5.6图片横向移动效果FAQ答案的显示与隐藏图片横向移动效果掌握jQuery的动画41.5.7化妆品网站首页效果（续）返回顶部效果在线客服效果图片的Tab切换效果图片放大效果：Fancybox图片播放插件禁止鼠标右键效果掌握综合运用CSS样式、jQuery制作动画、jQuery中的DoM操作41.6产品列表页面交互效果实现1Uai<rWR1754微博数字统计掌握加载DoM、事件绑定、事件移除、简写事件41.6.1微用IXXJ贝府效设计制作图片提示效果掌握事件对象、事件冒泡改变图片透明度掌握合成事件、特殊事件162化妆品网站产品列表页面交互效果实现滚动条美化循环编程语法、TinyScroIIbar插件使用4产品列表Tab切换（手动、自动）jQuery事件编程产品详细页特效IQuery事件编程1.7订购页面交互效果1.7.1相册制作使用插件实现图片放大镜效果使用插件实现图片播放效果编写隔行变色插件掌握jQuery的插件应用jqZoom>Fancybox4172化妆品网站订购页面交互效果使用JQuery实现Ul模拟Select下拉框操作提示框效果综合运用知识实现页面效果41.8留言板异步刷新181名称验证设计名称验证页面掌握jQuery中的Ajax应用4182网页数据异步刷新网页数据异步刷新2主题网站设计与实现2.1展示完整的化妆品网站作品2.1展示完整的化妆品网站作品2.1展示完整的化妆品网站作品总结本课程的知识和技能42.2课程设计课程设计要求课程设计要求清晰理解课程设计的要求合计72六、课程考核6.1考核方式本课程考核采取形成性考核和终结性考核两种方式进行，两部分的分数比例为：课程考核成绩二形成性考核成绩（60%）+终结性考核成绩（40%）6.1.1形成性考核6.1.1.1形成性考核种类及分数比例本课程形成性考核选择平时成绩和项目任务成绩。其中平时成绩主要指考勤和上课参与度；子项目成绩包括：操作和实训任务卡。分数比例为：形成性考核成绩二平时成绩（30%）+项目任务成绩（70%）6.1.1.2形成性考核具体内容及评分标准（1）平时成绩考核（IoO分）随机对学生进行考勤，无故迟到或早退1次扣5分，请假一次扣5分，旷课一次扣10分，扣满100分为止。随机抽取学生回答问题，答对一题奖励5分，平时成绩为100的不再增加。（2）项目任务成绩（100分），如表2。表2考核方式与考核标准设计表项目名称考核点及项目分值建议考核方式评价标准项目成绩比例优良及格网站特效分析与规划设计网站需求分析、网站规划、网站风格定位、网站总体设计（10%提交系统需求分析与总体设计文档，教师评）价正确理解任务，提交文档规范可实施，并有一定的创新点。正确理解任务，提交文档规范可实施能理解任务，提交文档较规范可实施。5%项目开发环境搭建安装DreamweaverCSG或SubIimeText创建网站(5%)提交安装图片，教师评价成功安装软件，并创建一个网站及部分静态页面成功安装软件，创建一个网站成功安装软件5%用户注册交互模块JavaScript基础及jQueryBOM编程提交完成的作品源码，演示，答辩教师评价、小组互源程序准确无误，页面布局合理，回答问题思路清晰、流畅、正确。源程序准确无误，回答问题思路较清晰、流畅、正确。源程序基本准确，回答问题基本清晰、正确。10%首页交互模块JavaScript内置对象编程、jQueryDOM编程提交完成的作品源码，教师评价源程序准确无误、页面布局合理。源程序准确无误、页面布局比较合理。源程序基本无误、页面布局基本合理。10%产品列表页面交互模块jQuery事件编程、Ajax的应用提交完成的作品源码，演示，答辩教师评价、小组互评源程序准确无误，页面布局合理，回答问题思路清晰、流畅、正确。源程序准确无误，回答问题思路较清晰、流畅、正确。源程序基本准确，回答问题基本清晰、正确。10%订购页面模块（Query插件的应用提交完成的作品源码，教源程序准确无误、页面布局合理。源程序准确无误、页面布源程序基本无误、页面布10%师评价局比较合理。局基本合理。JavaScript课程设计文档规范、代码规范等提交自选设计作品文档及源代码，项目演示，答辩作品演示答辩教师评价提交的自选设计项目源程序准确无误、有较强的创新、能完全实现其功能，页面布局合理,回答问题思路清晰、流畅、正确。提交的自选设计项目源程序准确、有一定的创新、能实现其功能，页面布局较合理，回答问题思路较清晰、流畅、正确。提交的自选设计项目源程序居本准确、能实现其基本功能，页面布局基本合理，回答问题思路基本清晰、正确。50%合计100%6. I.2终结性考核6.1.1.1 终结性考核具体内容及评分标准本课程终结性考核采取笔试考核（IOO分）。如表3。表3课程考核命题双向细目表题型分值教学单元题型（以分数计）A计客观性题选择填空1网站特效分析与规划设计102122项目开发环境搭建142163用户注册交互模块142164首页交互模块104145产品列表页面交互模块122146订购页面模块104147JavaScript课程设计10414合计8020100七、教学资源配置7.1主教材JavaScript+jQue门T交互式Web前端开发，黑马程序员，人民邮电出版社。7. 2参考资料1、JavaScript与jQuery实战教程，清华大学出版社，卢淑萍2、Web前端开发初级下册，中国工信出版社集团电子工业出版社，工业和信息化部教育与考试中心。7.3主要设备与设施教-学-做一体化机房，机房应配有良好性能的教师机和学生机、投影仪、无线麦克风、教师机和学生机均需安装OffiCe2003和CS6,并安装多媒体示教软件用于广播教学、文件分发、作业搜集等。八、教师要求教师应当非常熟悉本课程所有知识点的理论内容，并有丰富的相关实践能力，要求参加或主持过相关网站开发项目，与学生沟通能力强，能较好地掌握和分析学生的学情。