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