《Web前端应用开》教学大纲课程名称：Web前端应用开课程类别（必修/选修）：必修课程英文名称：WebFrontEndApplicationDevelopment其中实验/实践学时：24总学时/周学时/学分：48/3/3先修课程：无后续课程支撑：电子商务实务、Python网络爬虫实务授课地点：实验楼503机房授课时间：周三5-7节(2-17周）授课对象：2025电商1.2班62人开课学院：粤台产业科技学院任课数师姓名/职称：陈权/副数授答疑时间、地点与方式：课堂或课后，教室或通讯软件，当面或线上答疑课程考核方式：开卷（）闭卷（）课程论文（）其它（v）报告使用教材：《HTML5+CSS3+JavaScriptWeb前端开发案例教程》，王方，人民電出版社，2025年5月，ISBN：9787115663733教学参考资料：无课程简介：网页设计技术是建构商务网站项目策划、商务网站项目建设与管理之核心技术，网页设计一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现。本课程讲投内容包括基本的HTML和CSS以及JavaScript等，这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。本课程教导学生在进行开发前，对这些概念弄清楚、弄明白，在开发的过程中才会得心应手。课程教学目标及对毕业要求指标点的支排：毕业要求课程教学目标支毕业要求指标点目标1：1.3能够应用专业知识解决工程1-工程知识：能够运用数学、基础科学、计算机1
1 《Web 前端应用开》教学大纲 课程名称：Web 前端应用开 课程类别（必修/选修）：必修 课程英文名称：Web Front End Application Development 总学时/周学时/学分：48/3/3 其中实验/实践学时：24 先修课程： 无 后续课程支撑：电子商务实务、Python 网络爬虫实务 授课时间：周三 5-7 节(2-17 周) 授课地点：实验楼 503 机房 授课对象：2025 电商 1,2 班 62 人 开课学院：粤台产业科技学院 任课教师姓名/职称：陈权/副教授 答疑时间、地点与方式：课堂或课后，教室或通讯软件，当面或线上答疑 课程考核方式：开卷（） 闭卷（） 课程论文（） 其它（v）报告 使用教材：《HTML5+CSS3+JavaScript Web 前端开发案例教程》，王方，人民郵電出版社，2025 年 5 月，ISBN：9787115663733 教学参考资料：无 课程简介： 网页设计技术是建构商务网站项目策划、商务网站项目建设与管理之核心技术，网页设计一般分为前端设计和前端开发，前端设计一般可以理解为 网站的视觉设计，前端开发则是网站的前台代码实现。本课程讲授内容包括基本的 HTML 和 CSS 以及 JavaScript 等，这三个是前端开发中最基本也是最 必须的三个技能。前端的开发中，在页面的布局时， HTML 将元素进行定义，CSS 对展示的元素进行定位，再通过 JavaScript 实现相应的效果和交互。 本课程教导学生在进行开发前，对这些概念弄清楚、弄明白，在开发的过程中才会得心应手。 课程教学目标及对毕业要求指标点的支撑： 课程教学目标 支撑毕业要求指标点 毕业要求 目标 1： 1.3 能够应用专业知识解决工程 1-工程知识：能够运用数学、基础科学、计 算机
计算问题。培养学生具备Web用开发的相关知识，使其科学与技术、商务管理等相关知识，对于智能互能应用于软件工程、人工智能信息工程、商务信息联网系统开发运维所涉及的软件工程、人工智能管理等方面专业知识与技能，成为专业技术人才，信息工程、商务信息管理等问题具有解决能力。能以科学方法解决问题与进行创新。目标2：2-问题分析：能够应用数学、自然科学和工程科培养学生灵活运用Web程序设计解决问题的能力学的基本原理，对于智能互联网系统开发运维复并具有独立思考、创新思维、组织管理、沟通协调、自2.3能够应用专业知识解决工程杂问题进行识别与表达，并通过文献研究分析，我挑战、终身学习的能力。须具备能力包括：能在实践计算问题。以获得有效结论。3.2能够应用专业知识解决工程3-设计/开发解决方案：能够掌握Web的界面设计、中完成Web相关技术学习。计算问题。Web后端设计、数据库设计等基础理论与技术，具有追求创新的意识，对Web应用系统开发运维问题提出创新解决方案。目标3：4-研究：能够熟悉Web应用系统的前端设计、后通过Web应用开发程序设计项目实践，学生能提升端设计、数据库设计、数据挖掘、大数据分析、学生人文素养、社会服务的情操，培养学生良好的职业4.2能够应用专业知识解决工程人工智能赋能、云计算等基本科学研究方法，具道德与社会责任感。并养成学生动手操作、寻找答案、逻计算问题。有科学研究精神，为智能移动应用系统开发运维辑推理、科学思考的务实精神。复杀问题提出有效研究，手段并将问题有效解决。目标4：5-使用现代工具：能够针对Web应用系统开发运培养学生于Web应用开发项目制作过程中，能具有5.3能够应用专业知识解决工程维复杂问题，合理选用适当的技术、资源、现代工创新力、团队力、专业力、跨界力、服务力与英语运用能计算问题。具，进行预测与模拟并做可行性分析。通过国际化视野和跨文化交流合作的能力，发掘更多有效力，并具有国际观，秦献社会国家及人类。并培养学生2
2 培养学生具备 Web 用开发的相关知识，使其 能应用于软件工程、人工智能信息工程、商务信息 管理等方面专业知识与技能，成为专业技术人才， 能以科学方法解决问题与进行创新。 计算问题。 科学与技术、商务管理等相关知识，对 于智能互 联网系统开发运维所涉及的软件工 程、人工智能 信息工程、商务信息管理等问 题具有解决能力。 目标 2： 培养学生灵活运用 Web 程序设计解决问题的能 力， 并具有独立思考、创新思维、组织管理、沟通协 调、自 我挑战、终身学习的能力。须具备能力包括： 能在实践 中完成 Web 相关技术学习。 2.3 能够应用专业知识解决工程 计算问题。 3.2 能够应用专业知识解决工程 计算问题。 2-问题分析：能够应用数学、自然科学和工 程科 学的基本原理，对于智能互联网系统开 发运维复 杂问题进行识别与表达，并通过文 献研究分析， 以获得有效结论。 3-设计/开发解决方案：能够掌握 Web 的界面 设计、 Web 后端设计、数据库设计等基础理 论与技术，具 有追求创新的意识，对 Web 应 用系统开发运维问 题提出创新解决方案。 目标 3： 通过 Web 应用开发程序设计项目实践，学生能 提升 学生人文素养、社会服务的情操，培养学生良好 的职业 道德与社会责任感。并养成学生动手操作、寻找答案、逻 辑推理、科学思考的务实精神。 4.2 能够应用专业知识解决工程 计算问题。 4-研究：能够熟悉 Web 应用系统的 前端设计、后 端设计、数据库设计、数据挖 掘、大数据分析、 人工智能赋能、云计算等基 本科学研究方法，具 有科学研究精神，为智能 移动应用系统开发运维 复杂问题提出有效研究 手段并将问题有效解决。 目标 4： 培养学生于 Web 应用开发项目制作过程中，能 具有 创新力、团队力、专业力、跨界力、服务力与英语运用能 力，并具有国际观，奉献社会国家及人 类。并培养学生 5.3 能够应用专业知识解决工程 计算问题。 5-使用现代工具：能够针对 Web 应 用系统开发运 维复杂问题，合理选用适当的技术、资源、现代工 具，进行预测与模拟并做可 行性分析。通过国际 化视野和跨文化交流合作 的能力，发掘更多有效
解决间题的现代工具。逐步认识、熟知、实践和应用的学习态度理论教学进程表教学模式支撑课周次教学主题学时数授课教师教学内容（重点、难点、课程思政融入点）作业安排教学方法线下/混合式程目标重点：Web原理基础及Web前端技术基础课堂讲授和依照学习状况安排目标一陈权2线下绪论1难点：无小组讨论作业目标三重点：HTML5基本结构及文本、列表、图像标签难点：图像标签课程思政融入点：透过人文关怀角度教学课堂讲授和依照学习状况安排目标一陈权22线下HTML5基础1作业目标二阐述Web前端应用开发，培养学生具备专小组讨论业知识用于造福人民，善尽社会责任，业养成科学严谨、认真细致、实事求是的科学态度和职业道德。课堂讲授和依照学习状况安排目标一重点：超链接、表格、框架、容器标签2陈权线下3HTML5基础II小组讨论作业目标四难点：超链接标签课堂讲授和重点：CSS样式表、选择器、语法规则依照学习状况安排目标一陈权2线下4CSS基础I小组讨论作业目标二难点：CSS选择器目标一重点：CSS常用样式、定位依照学习状况安排2陈权线下5CSS基础II课堂讲授和作业目标二难点：CSS定位3
3 逐步认识、熟知、实践和应用的学 习态度。 解决问题的现代工具。 理论教学进程表 周次 教学主题 授课教师 学时数 教学内容（重点、难点、课程思政融入点） 教学模式 线下/混合式 教学方法 作业安排 支撑课 程目标 1 绪论 陈权 2 重点：Web 原理基础及 Web 前端技术基础 难点：无 线下 课堂讲授和 小组讨论 依照学习状况安排 作业 目标一 目标三 2 HTML5 基础 I 陈权 2 重点：HTML5 基本结构及文本、列表、图 像标签 难点：图像标签 课程思政融入点：透过人文关怀角度教学 阐述 Web 前端应用开发，培养学生具备专 业知识用于造福人民，善尽社会责任，並 养成科学严谨、认真细致、实事求是的科 学态度和职业道德。 线下 课堂讲授和 小组讨论 依照学习状况安排 作业 目标一 目标二 3 HTML5 基础 II 陈权 2 重点：超链接、表格、框架、容器标签 难点：超链接标签 线下 课堂讲授和 小组讨论 依照学习状况安排 作业 目标一 目标四 4 CSS 基础 I 陈权 2 重点：CSS 样式表、选择器、语法规则 难点：CSS 选择器 线下 课堂讲授和 小组讨论 依照学习状况安排 作业 目标一 目标二 5 CSS 基础 II 陈权 2 重点：CSS 常用样式、定位 难点：CSS 定位 线下 课堂讲授和 依照学习状况安排 作业 目标一 目标二
小组讨论课堂讲授和依照学习状况安排目标三重点：JavaScript语法2线下陈权6JavaScript基础！作业小组讨论难点：无目标四课堂讲授和重点：JavaScript各类程序操作依照学习状况安排目标一陈权2线下7JavaScript基础II小组讨论作业目标二难点：JavaScript程序设计课堂讲授和依照学习状况安排目标一重点：各类表单标签2陈权8线下HTML5表单API难点：无小组讨论作业目标二重点：音频及视频设置目标课堂讲授和依照学习状况安排2陈权线下9HTML5媒体API难点：无小组讨论作业目标三HTMLS地理定重点：位置信息操作及Geolocation接口课堂讲授和依照学习状况安排目标一陈权2线下10位API难点：Geolocation接口小组讨论作业目标二重点：CSS3各种效果目标三课堂讲授和依照学习状况安排陈权211线下CSS3技术难点：无小组讨论作业目标四重点：拖放事件及对象难点：拖放对象课程思政融入点：透过华为公司在5G网课堂讲授和依照学习状况安排目标一陈权2线下12HTML5拖放API作业络通讯技术领先全球却遭到美国无情打小组讨论目标二压，鼓励学生面对问题克服问题，学习从逆境中持续成长进步。合计244
4 小组讨论 6 JavaScript 基础 I 陈权 2 重点：JavaScript 语法 难点：无 线下 课堂讲授和 小组讨论 依照学习状况安排 作业 目标三 目标四 7 JavaScript 基础 II 陈权 2 重点：JavaScript 各类程序操作 难点：JavaScript 程序设计 线下 课堂讲授和 小组讨论 依照学习状况安排 作业 目标一 目标二 8 HTML5表单 API 陈权 2 重点：各类表单标签 难点：无 线下 课堂讲授和 小组讨论 依照学习状况安排 作业 目标一 目标二 9 HTML5媒体 API 陈权 2 重点：音频及视频设置 难点：无 线下 课堂讲授和 小组讨论 依照学习状况安排 作业 目标 目标三 10 HTML5 地 理 定 位 API 陈权 2 重点：位置信息操作及 Geolocation 接口 难点：Geolocation 接口 线下 课堂讲授和 小组讨论 依照学习状况安排 作业 目标一 目标二 11 CSS3 技术 陈权 2 重点：CSS3 各种效果 难点：无 线下 课堂讲授和 小组讨论 依照学习状况安排 作业 目标三 目标四 12 HTML5拖放 API 陈权 2 重点：拖放事件及对象 难点：拖放对象 课程思政融入点：透过华为公司在 5G 网 络通讯技术领先全球却遭到美国无情打 压，鼓励学生面对问题克服问题，学习从 逆境中持续成长进步。 线下 课堂讲授和 小组讨论 依照学习状况安排 作业 目标一 目标二 合计 24
实践教学进程表项目类型（验证/综教学支撑课周次授课敏师学时实验项目名称教学内容（重点、难点、课程思政融入点）合/设计)方法程目标目标一重点：Web原理基础及Web前端技术基础绪论陈权综合实验11难点：无目标二重点：HTML5基本结构及文本、列表、图像目标一陈权综合实验HTML5基础I12标签目标二难点：图像标签目标一重点：超链接、表格、框架、容器标签陈权综合HTML5基础ⅡI实验3难点：超链接标签目标二重点：CSS样式表、选择器、语法规则目标一陈权综合实验CSS基础I14目标二难点：CSS选择器重点：CSS常用样式、定位目标三综合陈权实验CSS基础IⅡI5-难点：CSS定位目标四目标一点：JavaScript语法陈权综合实验JavaScript基础I16难点：无目标二重点：JavaScript各类程序操作难点：JavaScript程序设计课程思政融入点：要求学生处理实验数据必须目标一陈权综合JavaScript基础II实验7目标二坚持实事求实、严谨的科学态度：要求学生实验过程中主动思考理论原理，在实验过程中去验证实验原理，使理论与实践相辅相成。5
5 实践教学进程表 周次 实验项目名称 授课教师 学时 教学内容（重点、难点、课程思政融入点） 项目类型（验证/综 合/设计） 教学 方法 支撑课 程目标 1 绪论 陈权 1 重点：Web 原理基础及 Web 前端技术基础 难点：无 综合 实验 目标一 目标二 2 HTML5 基础 I 陈权 1 重点：HTML5 基本结构及文本、列表、图像 标签 难点：图像标签 综合 实验 目标一 目标二 3 HTML5 基础 II 陈权 1 重点：超链接、表格、框架、容器标签 难点：超链接标签 综合 实验 目标一 目标二 4 CSS 基础 I 陈权 1 重点：CSS 样式表、选择器、语法规则 难点：CSS 选择器 综合 实验 目标一 目标二 5 CSS 基础 II 陈权 1 重点：CSS 常用样式、定位 难点：CSS 定位 综合 实验 目标三 目标四 6 JavaScript 基础 I 陈权 1 重点：JavaScript 语法 难点：无 综合 实验 目标一 目标二 7 JavaScript 基础 II 陈权 1 重点：JavaScript 各类程序操作 难点：JavaScript 程序设计 课程思政融入点：要求学生处理实验数据必须 坚持实事求实、严谨的科学态度；要求学生实 验过程中主动思考理论原理，在实验过程中去 验证实验原理，使理论与实践相辅相成。 综合 实验 目标一 目标二
重点：各类表单标签目标三陈权综合实验HTML5表单API18难点：无目标四重点：音频及视频设置目标一陈权1综合实验HTML5媒体API9难点：无目标二目标一重点：位置信息操作及Geolocation接口陈权综合实验HTML地理定位API-10目标二难点：Geolocation接口目标三重点：CSS3各种效果陈权综合实验CSS3技术111难点：无目标四重点：拖放事件及对象目标一陈权综合HTML5拖放API实验112难点：拖放事件及对象目标二重点：整体布局设计、网站页眉实现陈权3设计实验综合应用设计实例I13目标三难点：无重点：菜单导航栏实现陈权3设计实验综合应用设计实例I14目标四难点：无重点：主体内容实现、网站页脚实现陈权3设计实验综合应用设计实例II15目标三难点：主体内容实现重点：3总复习陈权综合实验16难点：合计24课程考核课程目标支撑毕业要求指标点评价依据及感绩比例（%）6
6 8 HTML5 表单 API 陈权 1 重点：各类表单标签 难点：无 综合 实验 目标三 目标四 9 HTML5 媒体 API 陈权 1 重点：音频及视频设置 难点：无 综合 实验 目标一 目标二 10 HTML5 地理定位 API 陈权 1 重点：位置信息操作及 Geolocation 接口 难点：Geolocation 接口 综合 实验 目标一 目标二 11 CSS3 技术 陈权 1 重点：CSS3 各种效果 难点：无 综合 实验 目标三 目标四 12 HTML5 拖放 API 陈权 1 重点：拖放事件及对象 难点：拖放事件及对象 综合 实验 目标一 目标二 13 综合应用设计实例 I 陈权 3 重点：整体布局设计、网站页眉实现 难点：无 设计 实验 目标三 14 综合应用设计实例 II 陈权 3 重点：菜单导航栏实现 难点：无 设计 实验 目标四 15 综合应用设计实例 III 陈权 3 重点：主体内容实现、网站页脚实现 难点：主体内容实现 设计 实验 目标三 16 总复习 陈权 3 重点； 难点： 综合 实验 合计 24 课程考核 课程目标 支撑毕业要求指标点 评价依据及成绩比例（%）
作业实验，课堂期中报告期末报告表现510目标一1.3510153.2,2.3目标二5目标三4.21015555.310目标四总计302050100备注：1）根据《东莞理工学院考试管理规定》第土二条规定：旷课3次（或6课时）学生不得参加该课程的期终考核。2）各项考核标准见附件所示。大纲编写时间：2025年9月5日系（部）审查意见：同意系（部）主任签名：日期：2025年9月6日备注：7
7 作业实验,课堂 表现 期中报告 期末报告 目标一 1.3 5 5 10 目标二 3.2,2.3 10 5 15 目标三 4.2 10 5 15 目标四 5.3 5 5 10 总计 30 20 50 100 备注：1）根据《东莞理工学院考试管理规定》第十二条规定：旷课 3 次（或 6 课时）学生不得参加该课程的期终考核。2）各项考核标准见附件所示。 大纲编写时间：2025 年 9 月 5 日 系（部）审查意见： 同意 系（部）主任签名： 日期：2025 年 9 月 6 日 备注：