《Web前端技术》课程教学大级一、课程信息课程名称：Web前端技术Web Front-End Technology课程代码：06E7027B课程类别：专业选修课适用专业：数字媒体技术专业课程学时：32学时（含16学时实验）课程学分：1.5学分修读学期：第四学期先修课程：计算机导论、C语言程序设计二、课程目标《Web前端技术》是数字媒体技术专业的一门重要专业选修课程，该课程以前端三大核心技术HTML，CSS，JavaScript为主要内容，其目的是使学生通过本课程的学习，了解前端基本概念，掌握前端设计基本思想、HTML标记、CSS样式、页面布局和JavaScript的基础知识与事件处理等内容，使学生熟悉前端开发流程、掌握常见的页面布局效果、学会开发各种企事业单位、门户、电商类网站，培养学生基于前端技术解决相应工程方面问题的专业能力，提高分析问题、解决问题、合作学习的能力，激发学生的探索和创新精神，为以后深入学习Web系统开发课程和从事软件开发工作打下坚实的基础。（一）具体目标通过本课程的学习，使学生达到以下目标：1.了解前端技术的基本思想，理解前端技术的标准体系，握前端三大核心技术HTML，CSS，JavaScript的基本原理、使用方法和编码规范，能够应用前端技术，分析和解决计算机复杂工程问题。【支撑毕业要求指标点3.1】2.能够基于前端技术基本思想和标准体系，结合实际问题，根据开发需求选取合适开发工具，设计出符合实践的可行的解决方案。【支撑毕业要求指标点4.1、4.2)
《Web 前端技术》课程教学大纲 一、课程信息 课程名称：Web前端技术 Web Front-End Technology 课程代码：06E7027B 课程类别：专业选修课 适用专业：数字媒体技术专业 课程学时：32学时（含16学时实验） 课程学分：1.5学分 修读学期：第四学期 先修课程：计算机导论、C语言程序设计 二、课程目标 《Web 前端技术》是数字媒体技术专业的一门重要专业选修课程，该课程 以前端三大核心技术 HTML，CSS，JavaScript 为主要内容，其目的是使学生通 过本课程的学习，了解前端基本概念，掌握前端设计基本思想、HTML 标记、 CSS 样式、页面布局和 JavaScript 的基础知识与事件处理等内容，使学生熟悉前 端开发流程、掌握常见的页面布局效果、学会开发各种企事业单位、门户、电商 类网站，培养学生基于前端技术解决相应工程方面问题的专业能力，提高分析问 题、解决问题、合作学习的能力，激发学生的探索和创新精神，为以后深入学习 Web 系统开发课程和从事软件开发工作打下坚实的基础。 （一）具体目标 通过本课程的学习，使学生达到以下目标： 1. 了解前端技术的基本思想，理解前端技术的标准体系，握前端三大核心 技术 HTML，CSS，JavaScript 的基本原理、使用方法和编码规范，能够应用前 端技术，分析和解决计算机复杂工程问题。【支撑毕业要求指标点 3.1】 2. 能够基于前端技术基本思想和标准体系，结合实际问题，根据开发需求 选取合适开发工具，设计出符合实践的可行的解决方案。【支撑毕业要求指标点 4.1、4.2】
3.能熟练运用前端开发技术，结合其它相关技术实现业务功能，并对整个项目进行测试调试，保证功能的完善及系统的健壮。【支撑毕业要求指标点4.3】4.能够在Hbuilder或VScode等集成开发环境下，基于前端技术对复杂计算机软件工程问题进行分析、设计、开发和测试，培养学生在前端开发开中的创新能力，为从事相关应用领域开发，系统运行及维护打下坚实的基础。【支撑毕业要求指标点5.2】（二）课程目标与毕业要求的对应关系表1课程目标与毕业要求指标点的对应关系课程目标支撑的毕业要求支撑的毕业要求指标点3.设计/开发【3.1】掌摄数字媒体知识，能够在数字媒体系统的开发项目中进课程目标1解决方案行系鏡设计。【4.1】能够基于数字媒体学科相关原理和方法选择研究路线对复杂工程问题进行分解。课程目标 24.科学研究【4.2】能够运用数字媒体学科相关原理和专业知识设计实验方案，并按照合理步赚实施实验以支持复杂工程问题的解决：【4.3】能够对采集到的实验数据进行整理、分析和解释，并能通课程目标34.科学研究过信息综合得出有效结论。【5.2】具有根据工程问题需求利用文献和网络资源查阅相关资料课程目标 45.现代工具运用的能力；三、课程内容（一）课程内容与课程目标的关系
3. 能熟练运用前端开发技术，结合其它相关技术实现业务功能，并对整个 项目进行测试调试，保证功能的完善及系统的健壮。【支撑毕业要求指标点 4.3】 4. 能够在 Hbuilder 或 VS code 等集成开发环境下，基于前端技术对复杂计 算机软件工程问题进行分析、设计、开发和测试，培养学生在前端开发开中的创 新能力，为从事相关应用领域开发，系统运行及维护打下坚实的基础。【支撑毕 业要求指标点 5.2】 （二）课程目标与毕业要求的对应关系 表1 课程目标与毕业要求指标点的对应关系 课程目标 支撑的毕业要求 支撑的毕业要求指标点 课程目标 1 3. 设计/开发 解决方案 【3.1】掌握数字媒体知识，能够在数字媒体系统的开发项目中进 行系统设计。 课程目标 2 4．科学研究 【4.1】能够基于数字媒体学科相关原理和方法选择研究路线对复 杂工程问题进行分解。 【4.2】能够运用数字媒体学科相关原理和专业知识设计实验方案， 并按照合理步骤实施实验以支持复杂工程问题的解决； 课程目标 3 4．科学研究 【4.3】能够对采集到的实验数据进行整理、分析和解释，并能通 过信息综合得出有效结论。 课程目标 4 5.现代工具运用 【5.2】具有根据工程问题需求利用文献和网络资源查阅相关资料 的能力； 三、课程内容 （一）课程内容与课程目标的关系
表2课程内容与课程目标的关系课程内容教学方法支撑的课程目标学时安排2第一章Web前端技术综述案例式教学、启发式教学课程目标14第二章HTML课程目标1素例式教学、任务驱动教学2第三章CSS基础案例式教学、启发式教学课程目标14CSS选择器第四章案例式教学、启发式教学课程目标1、2、34第五章CSS专题应用案例式教学、任务驱动教学课程目标1、2、3、44第六章课程目标1JavaScript基础案例式教学、启发式教学4第七章JavaScript对象案例式教学、任务驱动教学课程目标1、2、3、44第八章Vue基础案例式教学、任务驱动教学课程目标1课程设计4综合主题网站案例式教学、任务驱动教学课程目标1、2、3、4合计32学时（二）具体内容第一章Web前端技术综述(2学时)【教学目标与要求】1、教学目标：知识目标：通过本章的教学，使学生对Web前端技术有一个整体宏观上的了解。了解Web前端发展历史，理解Web前端核心技术标准。能力目标：通过整理Web前端发展史，培养学生查阅资料、调研分析的能力。素养目标：通过对Web前端发展史的介绍，培养学生坚忍不拔、敢为人先、勇于奉献的精神，引导学生树立远大理想和爱国主义情怀，树立正确的世界观、人生观、价值观，勇敢地肩负起时代赋予的光荣使命，全面提高学生思想政治素质。2、教学要求：了解Web前端发展历史，了解Web前端核心技术组成，理解Web前端核心技术标准，了解Web前端工具，掌握其基本使用方法。【教学重点与难点】
表2 课程内容与课程目标的关系 课程内容 教学方法 支撑的课程目标 学时安排 第一章 Web 前端技术综述 案例式教学、启发式教学 课程目标 1 2 第二章 HTML 案例式教学、任务驱动教学 课程目标 1 4 第三章 CSS 基础 案例式教学、启发式教学 课程目标 1 2 第四章 CSS 选择器 案例式教学、启发式教学 课程目标 1、2、3 4 第五章 CSS 专题应用 案例式教学、任务驱动教学 课程目标 1、2、3、4 4 第六章 JavaScript 基础 案例式教学、启发式教学 课程目标 1 4 第七章 JavaScript 对象 案例式教学、任务驱动教学 课程目标 1、2、3、4 4 第八章 Vue 基础 案例式教学、任务驱动教学 课程目标 1 4 课程设计 综合主题网站 案例式教学、任务驱动教学 课程目标 1、2、3、4 4 合计 32 学时 （二）具体内容 第一章 Web 前端技术综述(2 学时) 【教学目标与要求】 1、教学目标： 知识目标：通过本章的教学，使学生对 Web 前端技术有一个整体宏观上的 了解。了解 Web 前端发展历史，理解 Web 前端核心技术标准。 能力目标：通过整理 Web 前端发展史，培养学生查阅资料、调研分析的能 力。 素养目标：通过对 Web 前端发展史的介绍，培养学生坚忍不拔、敢为人先、 勇于奉献的精神，引导学生树立远大理想和爱国主义情怀，树立正确的世界观、 人生观、价值观，勇敢地肩负起时代赋予的光荣使命，全面提高学生思想政治素 质。 2、教学要求： 了解 Web 前端发展历史，了解 Web 前端核心技术组成，理解 Web 前端核 心技术标准，了解 Web 前端工具，掌握其基本使用方法。 【教学重点与难点】
1、教学重点：Web前端发展历史；Web前端核心技术组成及其标准。2、教学难点：无。【学习内容】1、Web基础知识2、Web前端技术及标准3、Web前端工具【思政元素融入点】本章通过对Web前端发展史的介绍，引导激励学生树立坚忍不拔、敢为人先，勇于奉献的精神，同时激发学生的民族自豪感和自信心，引导学生树立远大理想和爱国主义情怀，树立正确的世界观、人生观、价值观，勇敢地肩负起时代赋予的光荣使命，全面提高学生思想政治素质。第二章HTML(4学时）【教学自标与要求】1、教学目标：知识目标：通过本章的教学，使学生了解HTML的基本概念，掌握HTML的基本结构，掌握HTML常用标签的使用方法和应用场景，能够使用HTML标签设计规范的页面。能力目标：通过HTML常用标签的学习和配套的作业及实验，培养学生的动手能力、工程实践能力以及细心耐心的工作态度。素养目标：加强学生对“初心不改，使命不忘，与历史同步，与时代同行”的认识和理解。2、教学要求：了解HTML的基本概念，掌握HTM基本结构以及HTML的编码规范。掌握页面结构的初步设计，理解HTML标题字标记以及空格和特殊符号。理解文本标记中的物理样式标标记与逻辑样式标记的应用以及字体font标签。掌握超链接的语法和创建方法，理解超链接的分类、路径等相关概念，学会利用超链接设置书签，学会编写不同类型的超链接的Web网页代码。了解列表的类型，掌握有序列表、定义列表、无序列表的标记语法及属性语法。学会使用无序、有序及定义列表设计Web网页
1、教学重点：Web 前端发展历史；Web 前端核心技术组成及其标准。 2、教学难点：无。 【学习内容】 1、Web 基础知识 2、Web 前端技术及标准 3、Web 前端工具 【思政元素融入点】 本章通过对 Web 前端发展史的介绍，引导激励学生树立坚忍不拔、敢为人先， 勇于奉献的精神，同时激发学生的民族自豪感和自信心，引导学生树立远大理想 和爱国主义情怀，树立正确的世界观、人生观、价值观，勇敢地肩负起时代赋予 的光荣使命，全面提高学生思想政治素质。 第二章 HTML(4 学时) 【教学目标与要求】 1、教学目标： 知识目标：通过本章的教学，使学生了解 HTML 的基本概念，掌握 HTML 的基本结构，掌握 HTML 常用标签的使用方法和应用场景，能够使用 HTML 标 签设计规范的页面。 能力目标：通过 HTML 常用标签的学习和配套的作业及实验，培养学生的 动手能力、工程实践能力以及细心耐心的工作态度。 素养目标：加强学生对“初心不改，使命不忘，与历史同步，与时代同行” 的认识和理解。 2、教学要求： 了解 HTML 的基本概念，掌握 HTM 基本结构以及 HTML 的编码规范。 掌握页面结构的初步设计，理解 HTML 标题字标记以及空格和特殊符号。 理解文本标记中的物理样式标标记与逻辑样式标记的应用以及字体 font 标签。 掌握超链接的语法和创建方法，理解超链接的分类、路径等相关概念，学会 利用超链接设置书签，学会编写不同类型的超链接的 Web 网页代码。 了解列表的类型，掌握有序列表、定义列表、无序列表的标记语法及属性语 法。学会使用无序、有序及定义列表设计 Web 网页
掌握设计表格的标记和属性、表格行标记的属性及设置方法、表格单元格的跨行与跨列属性的设置方法、表格的嵌套方法。学会在表格中嵌入各种页面元素、会使用表格进行简易网页布局。掌握图像img标记语法及属性设置方法、滚动文字marquee标记语法及属性设置方法、背景音乐bgsound标记语法及属性设置方法、嵌入多媒体文件embed标记语法及属性设置方法。学会采用超链接插入动画、音频和视频类等多媒体文件。理解Web页面中表单的概念与作用，掌握表单结构语法及属性语法、表单元素标记及属性语法。学会综合运用表单及表单元素设计网页。【教学重点与难点】1、教学重点：HTML标签的使用方法和应用场景。2、教学难点：表格、表单。【学习内容】1、HTML概述2、HTML结构3、文本标签4、超链接标签5、列表类标签6、表格标签7、多媒体类标签8、表单【思政元素融入点】本章主要讲解HTML基础及基本结构、常用标签的使用方法和应用场景等，内容知识点分布具有“多、散、小”的特点，不易掌握应用，因此，需要通过具体应用案例帮助学生梳理知识脉络，同时在案例讲解中进行“初心不改，使命不忘，与历史同步，与时代同行”的思想熏陶。第三章CSS基础(2学时)【教学目标与要求】1、教学目标：
掌握设计表格的标记和属性、表格行标记的属性及设置方法、表格单元格的 跨行与跨列属性的设置方法、表格的嵌套方法。学会在表格中嵌入各种页面元素、 会使用表格进行简易网页布局。 掌握图像 img 标记语法及属性设置方法、滚动文字 marquee 标记语法及属性 设置方法、背景音乐 bgsound 标记语法及属性设置方法、嵌入多媒体文件 embed 标记语法及属性设置方法。学会采用超链接插入动画、音频和视频类等多媒体文 件。 理解 Web 页面中表单的概念与作用，掌握表单结构语法及属性语法、表单 元素标记及属性语法。学会综合运用表单及表单元素设计网页。 【教学重点与难点】 1、教学重点：HTML 标签的使用方法和应用场景。 2、教学难点：表格、表单。 【学习内容】 1、HTML 概述 2、HTML 结构 3、文本标签 4、超链接标签 5、列表类标签 6、表格标签 7、多媒体类标签 8、表单 【思政元素融入点】 本章主要讲解 HTML 基础及基本结构、常用标签的使用方法和应用场景等， 内容知识点分布具有“多、散、小”的特点，不易掌握应用，因此，需要通过具 体应用案例帮助学生梳理知识脉络，同时在案例讲解中进行“初心不改，使命不 忘，与历史同步，与时代同行”的思想熏陶。 第三章 CSS 基础(2 学时) 【教学目标与要求】 1、教学目标：