Web 前端技术
23120114X
32 学时
2025-2026 学年第二学期
课程简介
本课程是新闻学专业教育选修课，旨在培养学生运用前端技术和 AI 辅助编程工具进行数字内容创作的能力。课程涵盖 HTML、CSS、JavaScript 等前端基础技术，以及数据可视化、交互设计等应用技能，重点教授如何借助 AI 编程工具快速实现创意，创建具有交互性和视觉表现力的融媒体作品。
课程采用「竞赛冲刺 + 系统教学」双段式教学模式：前半程以计算机设计大赛为驱动，指导学生边学边做、产出竞赛作品；后半程系统补充理论知识，完成更完整的课程项目。通过本课程，学生将在数字叙事、数据可视化和 Web 交互设计等方面建立核心能力，为新闻传播领域的数字化实践奠定基础。
先修课程： 电脑设计基础 · 新媒体概论 · 新闻学概论
课程目标
- 理解前端开发基本理论，掌握 HTML、CSS、JavaScript 前端基础知识，理解其在数字新闻传播中的作用，树立负责任的信息传播意识，将理论知识与新闻报道、内容展示和受众互动相结合。
- 运用前端技术和 AI 辅助编程工具创建交互叙事作品，通过数据可视化和视觉设计增强故事讲述，培养数字媒体审美能力，创新性地解决新闻信息呈现问题。
课程进度
第 1 周
Web技术全景与AI辅助编程
梳理Web技术发展脉络与前端开发核心概念，介绍Cursor、Claude等AI编程工具的使用方法，探讨AI辅助编程在新闻数据可视化、交互报道等传播实践中的应用价值。
第 2 周
HTML：新闻网页的结构标记语言
HTML 是构建网页内容的标准标记语言，本章系统介绍 HTML 文档结构、常用元素、融媒体标记及表单交互，帮助读者建立完整的网页内容组织能力。
第 3 周
CSS 视觉设计与布局
系统介绍 CSS 基础语法、盒模型、Flex 与 Grid 布局、Tailwind CSS 框架及动画过渡机制，为新闻页面的视觉呈现与响应式设计奠定技术基础。
第 4 周
CSS视觉设计与布局
系统介绍 CSS 基础语法、选择器、盒模型、Flex 与 Grid 布局、Tailwind CSS 响应式框架及 CSS 动画，帮助读者构建专业新闻页面的完整视觉设计能力。
第 5 周
JavaScript基础：语法、交互与数据获取
介绍JavaScript核心语法、函数与作用域、事件处理与DOM操作，以及异步编程基础，帮助读者为新闻页面添加动态交互与实时数据功能。
第 6 周
交互逻辑与数据获取
本章介绍JavaScript核心语法、事件处理与DOM操作，并引入异步编程概念，旨在为新闻页面添加动态交互与数据更新功能。
第 7 周
数据可视化与新闻叙事
本章介绍数据可视化的基本原理与设计方法，讲解使用ECharts库创建图表的技术，并探讨如何通过数据驱动的视觉效果增强新闻故事的传播力。