2024-2025第二学期《Web前端调》课程标准

文章来源：教务处发布时间：2025-06-11浏览次数：10

《Web前端设计》课程标准

一、课程基本信息

课程名称	Web前端设计							课程编码	xxwl23003
建议学时	64学时		其中实践学时			20学时		学时/学分	64学时/3学分
课程类型	□公共课专业基础课专业核心课							编制人	赵书慧
课程性质	理论课理实一体□整周实训							审定人
制定日期	2025年4月22日				修订日期
先修课程	信息技术、C程序设计
后续课程	Java程序设计
课程描述	本课程是网络技术专业必修的一门专业基础课程，是在信息技术及C程序设计基础上开设的一门理论+实践一体的课程，对接专业人才培养目标，面向Web前端工作岗位，培养学生具备一定的Web前端开发的职业素质，具备Web前端开发、创新能力，为后续Java程序设计等课程的学习奠定基础的课程。
课程目标	1.知识目标 A1. 了解本课程内容在Web开发领域的定位与作用； A2. 了解HTML、CSS及JavaScript技术的发展脉络、趋势及应用前景； A3. 熟悉HTML中的基本元素、文字与段落元素、图像元素、列表元素、表格元素、超链接元素、多媒体元素、框架元素及表单元素的语法、属性和参数等基础知识； A4. 掌握CSS中元素的语法、属性和参数等基础知识； A5. 了解网页布局的几种方法，掌握使用CSS进行网页布局、样式设计的基础知识； A6. 掌握JavaScript中的基本语法知识及DOM和BOM操作能力； 2.能力目标 B1. 具备使用HTML制作包含基本内容的网页的能力； B2. 具备使用HTML及CSS等技术来设计网页布局的能力； B3. 具备使用JavaScript技术来提高网页交互性、体验性的能力； B4. 具备综合使用HTML、CSS与JavaScript的相关知识，来丰富、渲染网页的能力； B5. 具备根据具体应用需求，创新性地设计网页的能力。素质养成目标 C1. 培养学生养成严谨认真的科学态度，耐心细致的工作作风； C2. 培养学生具备良好的交流沟通素养和创新精神; C3. 培养学生具备良好的职业道德和职业素养； C4. 培养学生具备在学习和工作中具备良好的职业规范。
教学方式	讲授□讨论或座谈问题导向学习分组合作学习□专题学习实作学习□发表学习□实习□参观访问□其他（模拟演练）
学习评价	评价项目			评价方式（对应教学目标）			分值比例	评价标准
	过程性评价	平时评价		出勤、平时表现			20%	出勤率：10%，平时作业及表现：10%
		单元评价		单元知识点			10%	单元知识点掌握情况10%
		期中评价		期中测验			10%	期中测验成绩10%
		实践评价		实操能力			10%	实际操作动手能力10%
	终结性评价（期末）			期末考试			50%	期末考试成绩50%
指定教材	《》（作者，出版社，出版年份，ISBN号)

二、课程教学内容与进度

学时	章节（情境）名称与内容	A知识目标代码	B能力目标代码	C素质目标代码	对应专业人才培养方案毕业能力要求指标点
2	第1章HTML、CSS、JavaScript综述	A1、A2	B1	C1	D1、D2、D3
2	第2章HTML基础 2.1 HTML文档的结构 2.1.1 HTML基本语法 2.1.2 HTML文件的命名 2.1.3 编写HTML文件的注意事项 2.1.4 文件头部内容 2.1.5 主体内容＜body＞实验1 制作简单的HTML页面	A3	B1	C1、C2、C3、C4	D1、D2、D3
2	第2章HTML基础 2.2 HTML文字相关标签 2.2.1 文字效果 2.2.2 文字修饰 2.2.3 段落＜p＞ 2.2.4 <span>标签 2.3 列表类型小实例——文字网页	A3	B1	C1、C2、C3、C4	D1、D2、D3
2	第2章 HTML基础 2.4 超链接标签 2.4.1超链接概述 2.4.2 超链接的路径 2.4.3 超链接的建立 2.4.5 设置图像映射 2.5 图像标签 2.5.1 图像文件的类型 2.5.2 文件相对地址和绝对地址 2.5.3 图像标签img 小实例——超链接及图像的使用	A3	B1	C1、C2、C3、C4	D1、D2、D3
2	第2章 HTML基础 2.6 表格概述 2.6.1 插入表格＜table＞ 2.6.2 设置表格标记属性 2.6.3 设置表格行与单元格 2.6.4 表格嵌套 2.6.5 小实例——表格在网页中的应用	A3	B1	C1、C2、C3、C4	D1、D2、D3
2	第2章 HTML基础 2.7表单的应用 2.7.1 表单概述 2.7.2 表单标记＜form＞ 2.7.3 信息输入＜input＞ 2.7.4 下拉列表<select> 2.7.5 多行文本域<textarea> 2.7.6 小实例——表单的实际应用	A3	B1	C1、C2、C3、C4	D1、D2、D3
2	第2章 HTML基础 2.8 框架 2.8.1 框架概述 2.8.2 框架的基本结构 2.8.3 设置框架 2.8.4 设置框架集＜frameset＞ 2.8.5 浮动框架＜iframe＞ 2.8.6 在框架上建立链接 2.8.7 小实例——框架的实际应用	A3	B1	C1、C2、C3、C4	D1、D2、D3
2	第3章 CSS层叠样式表 3.1 CSS的概述 3.2 CSS样式的引用方法 3.3 CSS选择器	A4	B2	C1、C2、C3、C4	D1、D2、D3
2	第3章 CSS层叠样式表 3.4 字体和文本的设置 3.4.1 字体样式font 3.4.2 文本样式text 3.4.3 列表控制 3.4.4 小实例——综合设置字体	A4	B2	C1、C2、C3、C4	D1、D2、D3
2	第3章 CSS层叠样式表 3.5 表格控制 3.6 边框设置border 3.7 背景设置background	A4	B2	C1、C2、C3、C4	D1、D2、D3
2	第3章 CSS层叠样式表 3.8 CSS盒子模型 3.8.1 盒子的宽和高 3.8.2 盒子的边框border 3.8.3 盒子的外边距margin 3.8.4 盒子的内边距paddin 3.8.5 盒子的背景background 3.8.6 盒子尺寸的计算方式box-sizing 3.8.7 盒子的阴影box-shadow 3.8.8 盒子的圆角属性border-radius	A5	B2	C1、C2、C3、C4	D1、D2、D3
2	第3章 CSS层叠样式表 3.9 CSS浮动和定位 3.9.1 CSS浮动float 3.9.2 定位position 3.9.3 显示display	A5	B2	C1、C2、C3、C4	D1、D2、D3
2	第3章 CSS层叠样式表 3.10 CSS2D转换及过渡动画 3.10.1 CSS2D转换 3.10.2 CSS过渡 3.10.3 CSS动画	A4	B2	C1、C2、C3、C4	D1、D2、D3
2	第3章 CSS层叠样式表 3.11 CSS3D转换 3.11.1 CSS3D转换 3.11.2 实例-卡片立体翻转	A4	B2	C1、C2、C3、C4	D1、D2、D3
2	第3章 CSS层叠样式表 3.12 CSS弹性布局flex 3.12.1 父元素属性 3.12.2 子元素属性	A5	B2	C1、C2、C3、C4	D1、D2、D3
2	第3章 CSS层叠样式表 3.13 CSS自适应屏幕 3.13.1 自适应屏幕@media screen 3.13.2 案例	A5	B2	C1、C2、C3、C4	D1、D2、D3
2	第4章 JavaScript基础 4.1 JavaScript语言概况 4.2 第一个JavaScript程序 4.3 数据类型 4.4 运算符	A6	B3、B4	C1、C2、C3、C4	D1、D2、D3
2	第4章 JavaScript基础 4.5 JavaScript流程控制语句 4.5.1 if语句 4.5.2 switch语句小实例——单击换图片	A6	B3、B4	C1、C2、C3、C4	D1、D2、D3
2	第4章 JavaScript基础 4.5 JavaScript流程控制语句 4.5.3 while语句 4.5.4 do_while语句 4.5.5 for语句小实例——单击换图片	A6	B3、B4	C1、C2、C3、C4	D1、D2、D3
4	第4章 JavaScript基础 4.6 JavaScript函数 4.6.1 函数的定义及函数的形参 4.6.2 函数的调用及函数的实能 4.6.3 变量的作用域 4.6.4 闭包函数	A6	B3、B4	C1、C2、C3、C4	D1、D2、D3
2	第4章 JavaScript基础 4.7 JavaScript数组 4.7.1 数组的声明 4.7.2 数组元素的引用 4.7.3 数组的属性和方法 4.7.4 数组的遍历案例-下拉列表显示省份和市级信息	A6	B3、B4	C1、C2、C3、C4	D1、D2、D3
2	第4章 JavaScript基础 4.8 JavaScript定时器案例-桌球的运动	A6	B3、B4	C1、C2、C3、C4	D1、D2、D3
2	第4章 JavaScript基础 4.9 JavaScript对象 4.9.1 对象的声明 4.9.2 对象的构造 4.9.3 对象属性的访问 4.9.4 对象方法的访问	A6	B3、B4	C1、C2、C3、C4	D1、D2、D3
4	第4章 JavaScript基础 4.10 JavaScript内置对象 4.10.1 Date对象 4.10.2 Math对象 4.10.3 String对象 4.10.4 array对象	A6	B3、B4	C1、C2、C3、C4	D1、D2、D3
4	第4章 JavaScript基础 4.11 文档对象模型DOM 4.11.1 DOM简介 4.11.2 获取元素 4.11.3 修改元素内容 4.11.4 修改元素属性 4.11.5 创建、添加、修改、替换DOM元素案例-留言板	A5、A6	B3、B4、B5	C1、C2、C3、C4	D1、D2、D3
4	第4章 JavaScript基础 4.12 JavaScript事件 4.12.1 事件概述 4.12.2 主要事件分析 4.12.3 其他常用事件 4.12.4 鼠标事件 4.12.5 事件冒泡和事件委托案例：下拉菜单	A5、A6	B3、B4	C1、C2、C3、C4	D1、D2、D3
4	第4章 JavaScript基础 4.13 浏览器对象模型BOM 4.13.1 JavaScript Window 4.13.2 JavaScript Screen 4.13.3 JavaScript Location 4.13.4 JavaScript History	A5、A6	B3、B4、B5	C1、C2、C3、C4	D1、D2、D3

注：本课程标准进度表部分可根据教学需要进行±10%调整。

三、课程实施与保障

1.课程思政

通过系列教学活动设计，将课程思政有效融入教学活动中，活动结束教师点评知识应用同时，对学生在完成任务中的出现的错误进行解析，指出学生需要提升或完善的能力和素质目标。例如分析学生测试结果，逐步提升学生的阅读理解力与观察力、分析判断能力；通过讨论、头脑风暴等活动逐步锻炼学生的逻辑思维能力、语言表达能力；通过实践教学环节强化学生的团队协作能力、安全操作意识、求真务实的工匠精神；通过Web网页的实际制作应用，提升学生解决实际问题的能力。

2.教学模式

采用线上线下混合式教学模式，教学过程中以应用案例教学为主。案例教学为学生提供了一种模仿、借鉴和引伸的范例，师生互动性强，充分体现以学生为中心的教育理念。强调从提出问题入手，激发学生学习的兴趣，让学生有针对性地去探索并运用理论知识，以提高分析和解决问题的能力。

3.教学基本条件

（1）教学团队基本要求

专职教师10人，其中专职教师7人，来自企业的兼职教师3人。均具备双师素质资格，具有一定的实践经验，教学效果良好，职称和年龄结构合理。

（2）教学硬件环境基本要求

实施课程教学，校内应具备以下实训条件：多媒体专业教室、教学做一体化实训室和相关实训设备。

表实训室配置与要求

序号	实训室名称	功能（实训项目）	面积、设备名称及台数要求	容量
1	Web前端开发实训室	软件项目实训	HP电脑（50套）+柜式空调（2台）+投影仪（1套）+讲台（1套）+音响（1套）	50
2	网络安全实训室	软件项目实训	HP电脑（80套）+柜式空调（2台）+投影仪（1套）+讲台（1套）+音响（1套）	80
3	移动应用开发实训室一	软件项目实训	HP电脑（40套）+柜式空调（2台）+投影仪（1套）+讲台（1套）+音响（1套）	40
4	移动应用开发实训室二	软件项目实训	HP电脑（40套）+柜式空调（2台）+投影仪（1套）+讲台（1套）+音响（1套）	40

教学资源基本要求

主要包括能够满足学生专业学习、教师专业教学研究和教学实施需要的教材、图书及数字资源等。

①基本教学资源：

1.教材选用基本要求按照国家规定选用 “十三五”规划优质教材以及校本自主研发教材。建立由专业教师、行业专家和教研人员等参与的教材选用机构，完善教材选用制度，经过规范程序择优选用教材。

2.图书文献配备基本要求图书文献配备能满足人才培养、专业建设、教科研等工作的需要，方便师生查询、借阅。专业类图书文献包括：有关专业理论、技术、方法、思维以及实务操作类图书和文献。

②数字教学资源：

建设、配备与本专业有关的音视频素材、教学课件、数字化教学案例库、虚拟仿真软件、数字教材等专业教学资源库，种类丰富、形式多样、使用便捷、动态更新、满足教学。
线上导学平台：学生通过提供基于教材本身又有扩展的视频、课件等学习资源，课前预习、测评，课后复习、考试、在线交流使用，实现“任何时间、任何地点、任何终端”的高效碎片化学习；供老师（项目经理、QA、项目助理）可以方便快捷准确的统计分析学生所有学习行为数据，极大的提升教学管理效率和效果。