《Web前端开发技术》课程教学大纲.docx

《《Web前端开发技术》课程教学大纲.docx》由会员分享，可在线阅读，更多相关《《Web前端开发技术》课程教学大纲.docx（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web前端开发技术课程教学大纲课程英文名Web Front-end Development Technology课程代码B课程类别专业课课程性质选修学 分4总学时数64开课学院计算机学院开课基层教 学组织软件工程课程组面向专业软件工程、软件工程（卓 越工程师计划）、软件工 程（国际教育学院）开课学期第3学期一、 课程目标Web前端开发技术课程是软件工程、软件工程（卓越工程师计划）、软件工程（国际 教育学院）专业的一门重要的基础课程，对Web应用开发方向系列课程起着重要的奠基与互 补作用。课程主要培养学生掌握和运用Web前端开发语言与工具，基于Web前端的开发流程 和规范，进行分析、设计、开发和

2、调试Wob前端应用的基本能力。同时，通过对Web前端 技术的了解和使用，对比和正视国内移动开发技术及生态的发展现状与国外的差距，引导学 生树立科技兴国的远大理想，激发学生强烈的历史使命感和责任心。课程目标1：掌握呢b前端应用开发的基础概念、基本结构与流程，能够基于用户的实 际需求，策划和设计合理的Web前端应用解决方案。课程目标2：掌握浏览器的基本工作原理，理解前端与后端的交互流程和呢b应用体系 结构。能够基于浏览器的功能和限制，开发和实现具备基本功能的Web前端应用。课程目标3：掌握Web前端基本技术（html、css、javascript等）及相关开发工具，能够结 合具体的应用场景，进行可

3、用性、可访问性、运行性能等方面的分析和优化。课程目标4：能够掌握Web前端开发的新技术与发展趋势，及时掌握国家相关方面的 科技战略需求，树立强烈的爱国主义使命感与责任心。二、 课程目标与毕业要求对应关系针对软件工程、软件工程（卓越工程师计划）、软件工程（国际教育学院）专业，Web前端 开发技术支持毕业要求（1）、（3）,课程目标与相关毕业要求的对应关系如表1所示：表1课程目标与毕业要求对应关系毕业要求指标点课程目标毕业要求1:工程知识：能够掌握数学、自然科学、 工程基础和计算机软件系统体系知识，并应用在 软件工程相关领域的复杂工程问题的解决方案 中。1-2能够应用工程基础及软件工 程专业知识对

4、模型进行分析，并 利用模型解决问题。1, 2, 31-3能够将软件工程基础和专业 知识用于对软件工程领域复杂问 题解决方案的分析与优化。1, 2, 3毕业要求3：设计/开发解决方案：能够设计软件 工程领域复杂工程问题的解决方案，能够设计与 开发满足特定需求的软件系统、模块或算法，在 设计中考虑社会、健康、安全、法律、文化以及 环境等因素，并体现一定的创新意识。3-1能够针对软件工程复杂系统 设计并实现满足特定需求的模块 或算法。1, 2, 3, 4三、 课程目标与教学内容和方法的对应关系课程教学内容对课程目标的支撑关系、教学方法如表2所示:教学内容教学方法课程目标1. Web前端开发基础课堂讲

5、授、上机实训、文献查阅2. HTML基础课堂讲授、上机实训、文献查阅3. Web站点基础课堂讲授、上机实训、案例分析与讨 论、文献查阅4. Web表阐课堂讲授、上机实训、案例分析与讨 论、文献查阅5. CSS基础课堂讲授、上机实训、案例分析与讨 论、文献查阅6. CSS定位与布局课堂讲授、上机实训、案例分析与讨 论、文献查阅7.响应式设计课堂讲授、上机实训、案例分析与讨 论、文献查阅8. Javascript 基础课堂讲授、上机实训、案例分析与讨 论、文献查阅9. DOM 和 BOM课堂讲授、上机实训、案例分析与讨 论、文献查阅10.浏览器应用编程课堂讲授、上机实训、案例分析与讨 论、文献查阅

6、11.前端应用构建与发布课堂讲授、上机实训、案例分析与讨 论、文献查阅表2课程目标与教学内容、教学方法的对应关系批注W用1:这一条缺内容课程教学的详细内容与要求如下:1. Web前端开发基础（1）教学内容Web概述与Web应用体验；浏览器的工作方式与插件；Web应用的前端与后端的区 别及交互流程；Web前端工程师职业需求（2）教学重点：Web应用前端与后端的区分（3）教学难点：Web应用前端与后端的交互流程（4）教学要求：能够基本描述清楚Web应用的前端与后端的区别及交互流程思政融合点1：通过对Web应用开发的现状与趋势的介绍，引导学生了解由新一代互 联网应用开发模式如单页应用、前后端分离、S

7、erverless应用等，从而激发学生努力学习， 奋勇追赶的爱国主义热情、自豪感与使命感。2. HTML基础（1）教学内容介绍HTML标记的概念与作用；HTML文档的基本结构HTML的基本语法规则；语义 类标记的用法与特性；讲解格式与转义；讲解元标记等（2）教学重点：语义类标记的用法与特性（3）教学难点：语义类标记的正确使用（4）教学要求：能够编写语义正确、格式规范的HTML文档Web前端站点基础（1）教学内容介绍Web前端站点的基本结构和相关标记，讲解前端站点的初步设计方法，讲解文 字与多媒体资源的区别与联系，讲解页面之间的链接与锚，讲解框架及页面的组合与嵌 套等（2）教学重点：Web站点的

8、概念；链接的作用与URL的格式（3）教学难点：多媒体资源的类型及渲染（4）教学要求：能够编写一个内容类型丰富、结构清晰的Web静态站点Web表单（1）教学内容HTML表单的概念与作用；HTML表单的处理流程；HTML表单的结构与标记；HTML 主要控件的用法与特性；如何综合运用表单及表单控件设计可交互的页面（2）教学重点：HTML表单的用法与特性（3）教学难点：HTML表单的作用及与后端的交互（4）教学要求：能够编写较为复杂的、可交互的HTML文档CSS基础（1）教学内容讲解CSS与样式的基本概念；讲解呢b媒体的特性；讲解CSS的基本语法；讲解 各种选择器的使用；讲解Web排版的基本规则；讲解

9、如何实现对网页的字、颜色、布 局等元素进行控制；（2）教学重点：Web排版与Web媒体的特性（3）教学难点：CSS选择符（4）教学要求：能够为HTML文档设计基本的样式CSS定位与布局（1）教学内容介绍CSS盒子模型结构及构成盒子模型的边界、边框、填充、内容等相关属性， 进而达到灵活运用CSS+DIV进行页面布局的目标;讲解CSS中的各种定位方法与指令, 讲解布局的各种实现方法和技术1. ）教学重点：CSS盒模型2. ）教学难点：浮动定位与布局3. ）教学要求：能够基于CSS盒模型和各类定位方式，实现各种常见的页面布局响应式设计（1）教学内容讲解响应式设计的由来与基本概念；讲解媒体查询指令的用

10、法；讲解不同内容类型 的响应式设计技巧；讲解前景与背景；讲解图标字体；讲解可访问性的基本原理以及如 何进行页面样式的调试（2）教学重点：媒体查询与可访问性（3）教学难点：图片等内容类型的响应式设计（4）教学要求：能够设计和实现适应主流设备的响应式页面Javascript 基础（1）教学内容JavaScript程序的概念与作用；JavaScript标识符和变量的概念及其使用方法; JavaScript常用运算符和表达式概念以及中顺序、分支、循环三种程序控制结构语法, 设计具有动态、交互功能的网页。（2）教学重点：Javascript的基本语法与功能（3）教学难点：Javascript的动态特性（

11、4）教学要求：能够为HTML文档设计和实现基本的动态效果思政融合点2：以Javascript的语言演进历史为切入点，引导探索和总结Web前端开发 的前沿技术及发展趋势，并正视我国信息技术及生态与国外先进国家的差距，从而深入理解 “科技建国”战略方针的重要性，树立投身科学研究和技术创新的远大理想。7. DOM 和 BOM（1）教学内容讲解文档对象模型DOM、浏览器对象BOM以及事件对象等概念，讲解如何运用 document对象来访问、创建及修改节点；window对象的常用属性及方法；介绍 navigator、 screen history、 location 等对象。（2）教学重点：DOM的结构

12、与属性（3）教学难点：DOM的常用API的使用（4）教学要求：能够基于D0M和BOM来实现页面的动态更新.浏览器应用编程（1）教学内容讲解cookies、本地存储等概念及其相关API的使用；讲解Ajax、JSON等概念及 相关工具的使用；讲解前端文件包含、前端模板引擎等概念及相关工具的使用（2）教学重点：浏览器API的使用（3）教学难点：前端渲染的概念及应用（4）教学要求：能够基于前端模板技术实现页面的动态生成.前端应用构建与发布（1）教学内容讲解前端项目的构建与发布等概念及相关工具的使用；讲解前端依赖管理工具、包 管理工具的基本概念及其使用；讲解nodejs的基本概念及未来的技术发展等。培养

13、学 生掌握现代Web前端开发技术及工具，掌握前端工程化思维。（2）教学重点：前端依赖与包管理（3）教学难点：前端模块化与打包（4）教学要求：能够借助包管理工具实现CSS预处理器等高级特性思政融合点3：引导学生了解各类Web前端开发的工具、框架和库，理解软件工程、 网络生态和共享平台的重要性与意义,鼓励学生进行前端组件的定制和扩展，践行开源文化, 为构建新一代互联网而贡献自己的力量四、实践环节及要求基于课堂讲授的内容，参考教师的示例项目，学生设立个人项目，在教师的指导下，按 照规定的进度，上机实训和进行项目开发。共安排32学时的课内上机实训，实训内容和要 求安排如下：表3:项目实训内容表实训内容

14、学时基本要求实训性质实训 类别1. 开发环境构建与前端技术体验2熟悉前端开发环境的构建必做验证2. 语义标记与语义HTML文档实训2掌握HTML的结构与基本标记必做综合3.Web静态站点构实训2掌握Web站点的结构与多媒体资源等复杂类型标记必做综合4. Web表单与数据校验实训2掌握Web表单的交互流程与各项属性的应用必做综合5. Web排印实训2掌握CSS的基本语法与常见的排印指令必做综合6.复杂样式及精准控制实训2掌握定型、定位等概念与CSS指令必做综合7. 多列布局与复杂布局实训2掌握浮动布局、栅格系统、弹性布局等概念与CSS指令必做综合8. 背景与图标字体实训2掌握前景背景、雪碧图、图

15、标字体等概念与CSS技术必做综合9. 可访问性实训2掌握响应式设计、媒体查询等概念与CSS技术必做综合10. Javascript基础语法与功能实训2掌握Javascript基本语法特性与基本功能必做综合11. Javascript DOM 实训2掌握文档对象模型的概念及其相关API必做综合12. Javascript BOM 实训2掌握浏览器对象模型及其相关API必做综合13.浏览器API实训2掌握cookies,本地存储等概念及其相关API必做综合14.浏览器应用编程实训2掌握Ajax、前端模板等概念及其人相关技术必做综合15.综合实训：综合项目调试、重构 与发布4综合所学技术，掌握前端项

16、目的调试、重构与发布等流程及工具必做综合合计32五、与其它课程的联系先修课程：程序设计基础，面向对象程序设计（C+/JAVA等任一） 后续课程：Web应用程序设计六、学时分配表4学时分配表教学内容讲课 时数实训时数实践学时上机时数自学 时数习题课时讨论时数1. Web前端开发基础2222. HTML基础2223. Web站点基础2224. Web表单2225. CSS基础2226. CSS定位与布局4447.响应式设计4448. Javascript 基础2229. DOM 和 BOM44410.浏览器应用编程44411.前端应用构建与发布444合计323232总计课内64学时+课外自学32学

17、时七、课程目标达成途径及学生成绩评定方法1 .课程目标达成途径课程R标的达成途径如表所示。表5课程目标与达成途径课程目标达成途径课程目标1:掌握Web前端应用开发的基础概 念、基本结构与流程，能够基于用户的实际需 求,策划和设计合理的Web前端应用解决方案。以案例为引导，通过课堂讲解，项目实践，演示与答 辩等形式，使学生理解Web前端应用类项目的基本 功能结构和一般解决方案，并使用专业视角和专业术 语进行表达和交流，策划和设计一个个人项目及基本 的解决方案课程目标2：掌握浏览器的基本工作原理，理 解前端与后端的交互流程和肌b应用体系结构。 能够基于浏览器的功能和限制，开发和实现具以案例为引导，

18、通过项目实训、课堂讲解、评审讨论 等形式，帮助学生将Web前端应用开发所需的知识， 如逻辑、视图、组件、API等等串联起来。并合理的 利用浏览器的功能与社前端区资源，开发和实现一个备基本功能的Web前端应用。具备基本功能的Web前端应用课程目标3：掌握Web前端基本技术（html、css、 javascript等）及相关开发工具，能够结合具体的 应用场景，进行可用性、可访问性、运行性能 等方面的分析和优化。以案例为引导，通过项目实训、课堂讲解，评审讨论 等形式掌握基本的工具技能，并培养学生.能够自主运 用互联网工具和资源，发现问题、表达问题即而最终 解决问题的能力课程目标4：能够掌握Web前端

19、开发的新技术 与发展趋势，及时掌握国家相关方面的科技战 略需求，树立强烈的爱国主义使命感与责任心以案例教学法、讲授法介绍课程的前沿技术，使学生 进一步了解目前国内相关先进技术与取得的成就，从 而建立强烈的民族自豪感与爱国主义使命感。2 .学生成绩评定方法该课程为考试课程，考试方式为闭卷。该课程采用形成性评价与终结性评价相结合的评 价方法，学期总评成绩由两部分构成：平时成绩，占比60胀 期末考试成绩，占比40虬 各 部分的具体评价环节、关联课程目标、评价依据及方法和在总成绩中的占比，如表6所示。表6课程考核与成绩评定方法成绩构成考核项目考核关联 的课程目 标考核依据与方法占总评成绩 的比重平时成

20、绩课程思政 实践4考查实践项目的实用性与公益性。通过课堂讨论、项 目检查、答辩与项目成果质量等多种形式，考查学生 是否能有效地将信息技术与具体应用领域相结合，理 解科技兴国的伟大意义5%课堂表现1,2,3根据学生在各类教学活动中的积极度、贡献度以及团 队互助精神等进行评分；占比不超过10%25%实训表现1,2,3根据定期项目检查和评审等活动中是否如期完成计 划的目标与完成质量进行评分。占比不超过15%项目成果1,2,3根据项目成果的功能项数量，实现难度，代码质量等 进行评分；占比30%30%期末成绩期末考试1,2,3考查基本知识的记忆、理解和熟练程度；书面考试； 占比40%40%总评成绩1,2

21、,3,4二平时成绩*60%+期末成绩*40%100%八、教学资源表7课程的基本教学资源资源类型资源教材Web前端开发技术一一HTML、CSS、JavaScript （第2版）,储友良编，清华大学出版社,2016 年10月参考书籍 或文献（1） JavaScript高级程序设计（第3版）美Nicholas C. Zakas著；李松峰，曹力译人 民邮电出版社，2016.5（2） Web前端开发技术实验与实践：HTML、CSS、JavaScript储友良编 清华大学出版社，2016. 11(3)(4)(5)教学文档无九、课程目标达成度的定量评价在课程结束后，需要对每一个课程目标（含思政课程目标）进行

22、达成度的定量评价，用 以实现课程的持续改进。课程目标达成度的定量评价算法：1、使用教学活动（如课程思政实践、课后作业、课堂练习、单元测验、项目实训、演 讲、课堂讨论、互动、阅读报告、大作业等等）成绩或期末考试部分题目得分率作 为评价项目，来对某个课程目标进行达成度的定量评价；2、为保证考核的全面性和可靠性，要求对每一个课程目标的评价项目选择超过两种；3、根据施教情况，评价项目可以由教师自行扩展，权重比例可以由教师自行设计；4、对某一个课程目标有支撑的各评价项目权重之和为1；5、使用所有学生（含不及格）的平均成绩计算。十、说明本课程大纲主要用于规范软件工程、软件工程（卓越工程师计划）、软件工程（国际教育学 院）专业的Web前端开发技术课程的教学目标、教学内容、教学方法、教学要求以及考 核评价方法等，承担该课程的教师必须遵照本大纲安排授课计划、实施教学过程，完成学生 各个阶段与各方面的学习成果考核与评价；在学期末，需对课程目标进行达成度评价。本课程大纲自2020年开始执行，生效之日原先版本均不再使用。十一、编制与审核表9大纲编制与审核信息工作内容责任部门或机构负责人完成时间编制软件工程课程组舒亚非2019.10审核软件工程课程组徐海涛2019.10