《Web技术基础》课程教学大纲-工程认证

《Web技术基础》教学大纲

一、课程简介本课程是软件工程专业的一门专业选修课程，主要讲解Web应用程序开发的客户端技术，包括超文本标记语言HTMLHyperTextMarkupLanguage层叠样式表CSSCascadingStyleSheets客户端脚本语言JavaScript可扩展样式语言XMLExtensibleMarkupLanguage等这些知识是当前各主要软件开发平台的基础，掌握了这些知识，不仅有助于进一步学习各种Web应用开发技术，也有助于对软件开发全过程的理解通过本课程的学习，学生不仅能够掌握Web技术基础知识，培养学生具备Web前端设计能力，培养学生运用科学思维方法和工程设计方法来制作Web静态站点的能力，还可以形成严谨的工作作风，提高学生的专业素质，对培养学生的应用能力和创新意识起着重要的作用

二、课程目标-课程具体目标.掌握Web应用程序客户端的基本技术和Web应用开发的基础知识，这些可以作为未来从事的专业技术方向的储备知识，是企业应用开发技术的基础.能够将所学知识应用于软件系统前端的设计、开发和改进，具备一定的前端综合开发能力；.能够运用所学知识识别和判断用户对Web前端需求的合理性和可行性的分析能力；-课程目标与专业毕业要求的关系表1本课程对专业毕业要求及其指标点的支撑

1.实验内容自选主题，综合运用所学的HTML、CSS知识编写至少两个HTML页面具体要求如下1所选主题应该符合当代大学生的精神风貌，思想健康向上、积极乐观，能够传递一定的正能量切忌只有网页的框架，没有实际内容HTML专注于内容的设计，CSS负责设置内容的样式3用CSS+DIV的方式布局网页整体架构，网页局部内容可采用表格等多种布局方式4要求网页中合适的位置包含登录用户名、密码、提交、重置表单控件、注册表单至少包含用户名、密码、确认密码、提交、重置表单控件，或有单独的登录、注册表单网页5页面外观简单、大方、美观；页面内容充实；6用超链接把网站所有的页面链接成有机的整体7网站的文件夹层次结构清晰，资源分类存放.基本要求1综合使用HTML、CSS、JavaScript技术；了解网站的设计、发布过程；.支撑的课程目标本实验项目可以支撑“课程目标2能够将所学知识应用于软件系统前端的设计、开发和改进具备一定的前端综合开发能力”本实验通过实践操作，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示，要求学生掌握JavaScript基本知识，进一步要求学生能够将这些知识用于解决软件工程领域复杂工程问题，达到课程目标的要求.教学方式表2课程目标与教学环节以课堂讲授为主，结合课堂讲授内容安排课内实验及课后作品，加深对理论教学内容的理解和认识，培养工程实践能力.教学方法在《Web技术基础》教学过程中，基于“学中做、做中学”的教学原则，采用了多种教学方法针对不同的教学内容采用一种或多种教学方法相结合的方式

（1）全过程案例导向式教学法根据每个知识模块的不同学习目标设计不同案例，导入案例，进而对案例进行相关分析，引出本次课的相关知识，通过实践演练，实现案例，掌握相关知识，从而实现学习目标

（2）任务驱动教学法创设场景一提出任务一学生自主学习一协作学习、讨论一一效果评价（师生参与）一巩固练习a.创造场景，布置任务，调动学生学习积极性要求学生真正从实际工作的角度来思考问题，重视学生的参与过程，不单纯地进行理论讲授b.学生自主学习，通过主动参与，提高学生能力，提高基本技能让学生在设计过程中分析并充分表现自己，锻炼自己的思想方法、分析问题和解决问题的能力，提高学生的独立思考能力和语言表达能力c.引导学生进行讨论，不单纯地去追求一种正确答案，而是重视得出结论的思考过程d.教师与学生共同评价成果，通过成果展示和教师演示，师生共评并总结归纳e.巩固练习，熟练掌握所学内容

（3）项目教学法这个阶段的教学是利用项目小组的形式进行组织将学生按各自的特点、能力、和兴趣组成若干个项目小组（每组4-6人），学生在项目小组内分担不同的角色（项目负责人、界面设计、搜集素材、代码编写、页面测试）这种做法既兼顾了学生的学习兴趣、又可以培养学生的团队意识，同时也考虑到学生的个性化发展实践证明，这些多样化的教学方法很好地满足了学生多样化的学习需求，使得教学内容深入浅出，教学方式灵活多样，有效地调动了学生学习的积极性，更好地训练了学生的操作技能，增长了实践经验，提高了教学质量.课时安排表3学时分配与教学方法

五、考核方式及成绩评定办法

（一）考核方式及具体要求本课程的学业成绩采用结构化方法产生，由两部分构成，分别为平时成绩、期末成绩，两项成绩均按百分制打分，然后分别按40%、60%的比例计入学业成绩即学业成绩=平时成绩X40%+期末成绩又60%平时成绩二3次随堂测试*20%+2次作品*40%+7次课后实验*40%；a.其中3次随堂测试为I1TML+CSS知识模块、JavaScript知识模块、CSS3+IITML5+XML知识模块在课堂上利用雨课堂完成，主要考察学生基本知识的学习情况；b.讲完HTML和CSS后让学生自选主题做一个静态Web站点；讲完JavaScript、I1TML

5.CSS3后让学生在第一作品的基础上加入动态的功能，完善作品；c.7次课后实验，自编教材中对实验内容给出了明确要求和效果图，每次实验都类似一个小型静态Web站点期末采用考试系统上机考试，题库中有4种类型的题目，几乎涵盖了本门课程所有的内容，每类题随机抽取1道组卷，共可组成4900套不同的试卷

（二）成绩评定办法及依据表4考核方式及成绩评定办法

六、教材及其它教学资源

（一）课程教材

[1]Web技术基础.杨占胜.电子工业出版社，

2016.8

（二）推荐参考资料

[1]《疯狂HTML5/CSS3/JavaScript讲义》.李刚著.电子工业出版社

2016.5

[2]《Web程序设计》.（美）塞巴斯塔著.清华大学出版社，

2015.1

[3]《Web技术应用基础》.樊月华，刘雪涛主编清华大学出版社，

2016.1

[4]《Web前端开发技术一HTML、CSS、JavaScript））.聂常红.人民邮电出版社，2014

[5]《网页设计与开发一HTML、CSS、JavaScript^王维虎，宫婷.人民邮电出版社2017

七、说明本课程的先修课程包括大学计算思维、程序设计语言基础，后续课程包括JavaWeb应用程序开发、ASP.NET程序设计，在整个课程体系中，本课程起着承上启下的作用本课程所学知识是软件开发的基础，不仅有助于学生进一步学习各种Web应用开发技术，也有助于对软件开发全过程的理解三课程对解决复杂工程问题能力的培养本课程的教学过程充分体现和落实对学生解决复杂工程问题能力的培养，理解复杂工程问题的内涵，认识复杂工程问题的特征，有针对性的培养和提高学生在未来的计算机技术工程实践活动中解决复杂工程问题的能力在课程理论知识讲授环节，注重培养学生掌握Web应用程序客户端的基本技术和Web应用开发的基础知识，培养学生能够针对复杂工程问题，选择合适的开发平台，完成相应编程在实验教学环节，围绕课程支撑的课程目标安排实验项目，由简至繁设计实验项目，明确实验要求，指导实验过程，使学生熟练掌握所学的Web前端技术并应用到实际项目中，进一步加强培养学生解决复杂工程问题的能力在课程考核环节，根据课程支撑的课程目标选择上机考试的考核方式，学生通过考试系统随机从四类题目中各选一道题组成一套完整试卷，相当于做了一个小型的Web站点考题设置方案完全覆盖课程支撑的课程目标，考题设计充分体现了对学生解决复杂工程问题能力的考查，考题的难度和深度能够体现复杂工程问题的特征总之，本课程的教学通过在理论讲授、实验、课程考核等环节充分贯彻培养学生解决复杂工程问题能力的理念和要求，实现本课程支撑课程目标的达成

三、教学内容及基本要求-理论教学第1单元Internet与Web基础.教学内容Internet的起源和相关知识;Web的起源和相关知识；Web应用程序开发的两种模式.基本要求了解Web的一些基础理论知识；2掌握Web应用程序开发的两种模式，从而更好的理解Web开发的整个过程.支撑的课程目标本单元各知识点的讲授和学习，可以支撑“课程目标1Web应用程序客户端的基本技术和Web应用开发的基础知识，这些可以作为未来从事的专业技术方向的储备知识，是企业应用开发技术的基础本单元教学通过“互动、开放”的课堂形式，采用问题导入、案例式的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，培养学生掌握Web基础知识，能够基于科学原理并采用科学方法对软件工程领域前端问题进行研究，并通过信息综合得到合理有效的结论，达到课程目标的要求第2单元超文本标记语言HTML.教学内容HTML的文档结构和基本标记；HTML的文本格式化标记、超链接、列表和图像标记；HTML的表格、表单、框架和常用的元标记.基本要求1掌握使用基本的HTML标记制作图文并茂的HTML页面；2熟练使用超链接标记，并学会编辑小型Web站点.支撑的课程目标本单元各知识点的讲授和学习，可以支撑“课程目标1Web应用程序客户端的基本技术和Web应用开发的基础知识，这些可以作为未来从事的专业技术方向的储备知识，是企业应用开发技术的基础”本单元教学通过“互动、开放”的课堂形式，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握HTML标记的使用方法和作用，能够用表格布局页面，初步具备设计网页的能力，进一步要求学生能够基于科学原理并采用科学方法对软件工程领域前端问题进行研究，包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结论，达到课程目标的要求第3单元层叠样式表CSS标记的.教学内容css的分类和三种层次样式表的样式规则；CSS选择器的语法规则和应用；CSS常用的样式属性及取值；4利用定位和浮动属性对网页进行布局.基本要求1掌握三种层次的样式表的样式规则，能够灵活运用选择器、样式属性来设置HTML内容的样式；2学会编辑布局合理、样式美观的网页

3.支撑的课程目标本单元各知识点的讲授和学习，可以支撑“课程目标2能够将所学知识应用于软件系统前端的设计、开发和改进，具备一定的前端综合开发能力；”本单元教学通过“互动、开放”的课堂形式，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握CSS基本知识，学会用DIV4-CSS布局网页，进一步要求学生能够将这些Web前端基础知识用于解决软件工程领域复杂工程问题，达到课程目标的要求第4单元JavaScript编程.教学内容JavaScript的基本语法;JavaScript常用内置对象的应用；DOM对象和DOM事件;JavaScript对HTML元素的访问、增加、修改、删除操作；5正则表达式和表单的验证.基本要求1使学生掌握基本的JavaScript语法，能够运用JavaScript为网页增添动态功能；2熟练掌握JavaScript对表单数据进行验证的方法.支撑的课程目标本单元各知识点的讲授和学习，可以支撑“课程目标2能够将所学知识应用于软件系统前端的设计、开发和改进，具备一定的前端综合开发能力”本单元教学通过“互动、开放”的课堂形式，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握JavaScript基本知识，学会用JavaScript对表单进行验证，进一步要求学生能够将这些Web前端基础知识用于解决软件工程领域复杂工程问题，达到课程目标的要求第5单元HTML

5.教学内容HTML5新增的常用标记与属性；HTML5新增的表单标记；HTML5拖放API；HTML5绘图和对多媒体的支持.基本要求1使学生了解HTML5的优势，掌握HTML5新增的标记和属性；2学会使用拖放、绘图、多媒体等功能.支撑的课程目标本单元各知识点的讲授和学习，可以支撑“课程目标1Web应用程序客户端的基本技术和Web应用开发的基础知识，这些可以作为未来从事的专业技术方向的储备知识，是企业应用开发技术的基础”本单元教学通过“互动、开放”的课堂形式，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握HTML5新增标记的使用方法和作用，进一步要求学生能够基于科学原理并采用科学方法对软件工程领域前端问题进行研究包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结论，达到课程目标的要求第6单元CSS

3.教学内容CSS3新增的伪类选择器；CSS3新增的边框样式和多栏布局；3变形与动画.基本要求1使学生了解和掌握CSS3新增的选择器和属性，学会使用这些新属性来设置多栏布局.支撑的课程目标本单元各知识点的讲授和学习，可以支撑“课程目标1Web应用程序客户端的基本技术和Web应用开发的基础知识，这些可以作为未来从事的专业技术方向的储备知识，是企业应用开发技术的基础J本单元教学通过“互动、开放”的课堂形式，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握CSS3新增样式属性的使用方法和作用，进一步要求学生能够基于科学原理并采用科学方法对软件工程领域前端问题进行研究，包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结论，达到课程目标的要求第7单元JavaScript进阶.教学内容JavaScript函数高级功能;DOM2事件模型；JavaScript程序调试.基本要求1使学生了解DOM2事件模型，熟练使用JavaScript函数高级功能并掌握JavaScript程序调试的方法.支撑的课程目标本单元各知识点的讲授和学习，可以支撑“课程目标3能够运用所学知识识别和判断用户对Web前端需求的合理性和可行性的分析能力”本单元教学通过“互动、开放”的课堂形式，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握JavaScript高级知识，进一步要求学生能够能够针对复杂工程问题，开发、选择与使用恰当的技术、资源、现代工程工具和信息技术工具，包括对复杂工程问题的预测与模拟，并能够理解其局限性，达到课程目标的要求第8单元XML介绍.教学内容XML语法与解析器；CSS格式化XML文档;DTD与XMLDOM；.基本要求1使学生掌握XML的基本语法知识，学会用CSS格式化XML文档，能熟练阅读XML文档2能正确定义具体应用领域的DTD文档.支撑的课程目标本单元各知识点的讲授和学习，可以支撑“课程目标1Web应用程序客户端的基本技术和Web应用开发的基础知识，这些可以作为未来从事的专业技术方向的储备知识，是企业应用开发技术的基础”本单元教学通过“互动、开放”的课堂形式，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握XML基础知识，进一步要求学生能够基于科学原理并采用科学方法对软件工程领域前端问题进行研究，包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结论，达到课程目标的要求-实验教学实验项目1基本网页设计.实验内容1表格布局；2界面设计；3列表导航；4内容网页.基本要求1掌握常用的HTML标记的使用；2掌握表格页面布局；3了解网站设计的基本步骤

3.支撑的课程目标本实验项目可以支撑“课程目标2能够将所学知识应用于软件系统前端的设计、开发和改进具备一定的前端综合开发能力J本实验通过实践操作，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握HTML标记的使用方法和作用，能够用表格布局页面，初步具备设计网页的能力，进一步要求学生能够将这些知识用于解决软件工程领域复杂工程问题，达到课程目标的要求实验项目2CSS应用.实验内容CSS布局；2格式化界面；3格式化文字；4格式化表格.基本要求1掌握常用CSS样式属性及其使用；2掌握选择器的使用；3掌握DIV+CSS页面布局；了解网页的盒模型和流布局.支撑的课程目标本实验项目可以支撑“课程目标2能够将所学知识应用于软件系统前端的设计、开发和改进具备一定的前端综合开发能力”本实验通过实践操作，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握CSS基本知识，学会用DIV+CSS布局网页，进一步要求学生能够将这些知识用于解决软件工程领域复杂工程问题，达到课程目标的要求实验项目3JavaScript编程.实验内容1交换图像；2网页秒表;3修改页面内容；.基本要求1掌握JavaScript的基本语法；2掌握DOM对象的使用；3会应用所学JavaScript知识进行客户端的编程.支撑的课程目标本实验项目可以支撑“课程目标2能够将所学知识应用于软件系统前端的设计、开发和改进具备一定的前端综合开发能力」本实验通过实践操作，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握JavaScript基本知识，进一步要求学生能够将这些知识用于解决软件工程领域复杂工程问题，达到课程目标的要求实验项目4表单验证.实验内容要求对表单中的用户名、密码、密码确认、Email身份证等数据进行验证.基本要求1掌握正则表达式的语法；2使用正则表达式进行基本的用户输入验证；.支撑的课程目标本实验项目可以支撑“课程目标3能够运用所学知识识别和判断用户对Web前端需求的合理性和可行性的分析能力”本实验通过实践操作，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握JavaScript表单验证的相关知识，进一步要求学生能够针对复杂工程问题，开发、选择与使用恰当的技术、资源、现代工程工具和信息技术工具包括对复杂工程问题的预测与模拟，并能够理解其局限性，达到课程目标的要求实验项目5HTML5应用.实验内容1用HTML5新增的元素和属性对客户端表单数据进行验证；2用HTML5的Canvas绘制各种图形；HTML5对多媒体的支持.基本要求1掌握新增的常用HTML5标记和属性；2掌握Canvas标记的使用；3掌握video标记的使用；.支撑的课程目标本单元各知识点的讲授和学习，可以支撑“课程目标1Web应用程序客户端的基本技术和Web应用开发的基础知识，这些可以作为未来从事的专业技术方向的储备知识，是企业应用开发技术的基础本实验通过实践操作，采用问题导入、案例式、操作演示的教学方法，激发学生的学习兴趣通过课堂讨论、案例演示和课后作业，要求学生掌握HTML5新增标记的使用方法和作用，进一步要求学生能够基于科学原理并采用科学方法对软件工程领域前端问题进行研究，包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结论，达到课程目标的要求实验项目6个人网站设计课程基本信息课程代码20123203课程名称中/英Web技木基础/WebTechnologyFoundation学分

3.0总学时64理论学时32实践学时32课程性质选修开课学期3适用专业软件工程先修课程大学计算思维、程序设计语言基础开课单位信息科学与工程学院大纲版本2017制定修订人许作萍审核人赵德玉批准人王振海制定修订时间

2018.5审核时间

2018.6批准时间

2018.6支撑的毕业要求支撑的毕业要求指标点课程目标毕业要求1工程知识能够将数学、自然科学、工程基础和软件工指标点

1.4能将工程和专业知识用于软件系统的设计、开发能够将所学知识应用于软件系统前端的设计、开发序号课程目标教学环节讲授作业实验1掌握Web应用程序客户端的基本技术和Web应用开发的基础知识，这些可以作为未来从事的专业技术方向的储备知识，是企业应用开发技术的基础VVV2能够将所学知识应用于软件系统前端的设计、开发和改进，具备一定的前端综合开发能力VV3能够运用所学知识识别和判断用户对Web前端需求的合理性和可行性的分析能力VVV序号教学内容学时分配教学方法1Internet与Web基础2讲授2超文本标记语言HTML6讲授3层叠样式表CSS6讲授4JavaScript编程6讲授5HTML54讲授6CSS32讲授7JavaScript进阶4讲授8XML介绍2讲授9基本网页设计4上机10CSS应用6上机11JavaScript编程6上机12表单验证8上机13HTML5应用4上机14个人网站设计4综合练习课程目标考核方式/占比考核内容与方法成绩评定指标与依据目标1掌握Web应用程序客户端的基本技术和Web应用开发的基础知识，这些可以作为未来从事的专业技术方向的储备知识，是企业应用开发技术的基础考试/60%课程相关知识点掌握程度期末上机考试成绩随堂测试/8%随堂测试雨课堂随堂测试成绩作品/16%作品作品完善性课后实验/16%实验实验完整性与正确率目标

2.能够将所学知识应用于软件系统前端考试/60%课程相关知识点掌握程度期末上机考试成绩的设计、开发和改进，具备一定的前端综合开发能力随堂测试/10%随堂测试雨课堂随堂测试成绩作品/20%作品作品完善性课后实验/10%实验实验完整性与正确率目标

3.能够运用所学知识识别和判断用户对Web前端需求的合理性和可行性的分析能力考试/60%课程相关知识点掌握程度期末上机考试成绩随堂测试/15%随堂测试雨课堂随堂测试成绩作品/20%作品作品完善性课后实验/5%实验实验完整性与正确率程专业知识用于解决软件工程领域复杂工程问题和改进和改进，具备•定的前端综合开发能力毕业要求4研究能够基于科学原理并采用科学方法对软件工程领域复杂工程问题进行研究，包括设计实验、分析与解释数据、并通过信息综合得到合理有效的结论指标点

4.1能够基于科学原理，通过文献研究或者相关方法，调研和分析复杂工程问题的解决方案掌握Web应用程序客户端的基本技术和Web应用开发的基础知识，这些可以作为未来从事的专业技术方向的储备知识，是企业应用开发技术的基础毕业要求5使用现代工具能够针对复杂工程问题，开发、选择与使用恰当的技术、资源、现代工程工具和信息技术工具，包括对复杂工程问题的预测与模拟，并能够理解其局限性指标点

5.1能够开发、选择与使用恰当的技术、资源、现代工程工具和信息技术工具完成复杂软件工程需求分析、预测、模拟能够运用所学知识识别和判断用户对Web前端需求的合理性和可行性的分析能力。