HTML5网页制作与前端开发（AI协同）-教案王寅峰 第18-36讲

第2页共4页第18讲教案教学单元一号任务：动感加速（探索CSS缓动函数）周次9时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解动画节奏对用户体验的影响。培养使用缓动函数创造自然、舒适动画的能力。能力目标理解CSS动画中的缓动函数。掌握ease、linear、ease-in-out等内置缓动函数及自定义缓动函数（cubic-bezier）的用法。能够结合不同的动画效果制作复杂的组合动画。教学要求掌握transition-timing-function和animation-timing-function的用法。了解steps()阶跃函数的使用场景（如逐帧动画）。能够使用在线工具（如Easings）预览和自定义缓动曲线。教学重点：常用缓动函数（linear、ease、ease-in、ease-out、ease-in-out）的效果差异。cubic-bezier()自定义缓动函数。组合动画的实现。教学难点：理解贝塞尔曲线控制点与动画速度的关系。模拟非内置缓动函数（如easeOutElastic）的实现思路实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-回顾上节课的过渡和关键帧动画，提问：为什么有的动画看起来更自然、有的显得机械？引出缓动函数。-简述本节课目标：在CSS动画学习站中添加缓动函数示例模块。2.知识点讲解与演示（20分钟）-缓动函数概述（3分钟）：定义缓动函数控制动画速度变化曲线，使动画更符合自然运动规律。-内置缓动函数（7分钟）：表5-1-1。-linear：线性过渡，速度恒定。-ease：慢速开始，加速，再减速（默认）。-ease-in：慢速开始，逐渐加速。-ease-out：快速开始，逐渐减速。-ease-in-out：慢速开始，加速，再减速（两端慢中间快）。-steps()阶跃函数（3分钟）：实现逐帧动画，如打字机效果、精灵图动画。语法：steps(number,end)。-自定义缓动函数cubic-bezier()（7分钟）：-语法：cubic-bezier(x1,y1,x2,y2)，四个参数定义贝塞尔曲线的两个控制点。-取值范围：x1、x2在0~1之间。-使用Easings在线工具预览和获取自定义曲线。3.边讲边做（15分钟）-在上节课的animation-station.html中添加新的<section>模块。-创建多个相同大小的方块，分别应用不同的缓动函数（linear、ease、ease-in、ease-out、ease-in-out）。-为每个方块添加鼠标悬停触发水平移动的过渡效果。-观察不同缓动函数下方块移动的速度变化差异。-图5-1-3展示缓动效果示例。第二学时（40分钟）1.继续知识点讲解与演示（12分钟）-模拟非内置缓动函数（7分钟）：-有些缓动效果（如easeOutElastic弹性效果、easeInBounce弹跳效果）不是CSS内置的，但可以通过@keyframes模拟。-示例：使用@keyframes模拟easeOutElastic效果，通过在不同百分比设置偏移量实现回弹。-展示弹性动画效果。-组合动画（5分钟）：-一个元素可以同时应用多个动画，用逗号分隔。-示例：animation:move2sease-in-outinfinite,rotate1.5slinearinfinite;-每个动画可以有独立的持续时间、缓动函数和播放次数。2.边讲边做（18分钟）-为CSS动画学习站添加一个“组合动画”展示区。-创建一个卡片元素，同时应用以下动画：-上下浮动（translateY变化）。-背景色渐变。-阴影大小变化。-设置不同的动画时长和缓动函数，观察叠加效果。-使用AI助手辅助生成组合动画代码。-图5-1-8展示组合动画效果示例。3.总结与展示（10分钟）-邀请学生展示完成的缓动函数对比模块和组合动画。-总结不同缓动函数的适用场景：-ease-out适合进入动画。-ease-in适合退出动画。-ease-in-out适合循环动画。-介绍Easings在线工具的使用价值。-预告下节课将使用CSS动画优化静态网站。课后作业：-使用Easings工具找到一组喜欢的cubic-bezier值，应用到自己的动画中。-尝试模拟easeInBounce弹跳效果（提示：使用@keyframes定义不同时间点的位置变化）。教学资源列表与访问路径备注智慧树HTML5课程对应章节Easings在线工具：/MDNWebDocs：cubic-bezier()在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交包含缓动函数对比模块和组合动画的CSS动画学习站代码完成平台上关于CSS缓动函数相关选择题练习预习模块5关于CSS动画优化静态相关内容第19讲教案教学单元二号任务：惟妙惟肖（使用CSS动画优化静态网站）周次10时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解CSS动画所必须遵循的网页设计原则。培养克制、恰当地使用动画的设计审美。能力目标学习CSS动画需遵循的网页设计原则，避免CSS使用不当而产生“影响页面的可访问性”“影响用户体验感”等问题。能够为静态页面添加进入动画、悬停动画等，增强网页的互动性。教学要求掌握动画设计四原则：一致性、可用性与可访问性、节奏与时长、清晰与引导性。能够为图像添加淡入动画、为卡片添加上下浮动动画、为按钮添加悬停放大效果。掌握animation-fill-mode:forwards的使用。教学重点：CSS动画的网页设计原则。为页面元素添加适当的动画效果（淡入、浮动、缩放）。教学难点：平衡动画效果与页面性能（避免过多动画导致卡顿）。理解动画时长对用户体验的影响（通常300ms-500ms）。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-展示模块3/4完成的志愿服务队招新页面（静态样式），提问：如何让这个页面更生动？引出本节课目标：为静态页面添加CSS动画。2.知识点讲解与演示（20分钟）-网页设计原则与CSS动画的关系（12分钟）-一致性：动画应与网页整体设计风格一致，不要使用与页面风格不符的动画效果。-可用性与可访问性：动画不应妨碍内容的可读性和可访问性。考虑提供禁用动画的选项。-节奏与时长：动画时长通常保持在300ms-500ms之间，过快或过慢都会让用户感到困惑或不耐烦。-清晰与引导性：动画应有助于引导用户理解页面的结构、功能或交互逻辑。-性能优化：优先使用transform和opacity属性（只触发合成，不触发重排）。-AI辅助生成动画示例（8分钟）：-演示向AI助手提问：“生成一个简单的按钮动画示例，并且要符合网页设计的几个基本原则”。-分析AI生成的代码，重点关注transition、:hover、:focus状态的设计。-强调可访问性：为键盘用户提供:focus视觉反馈。3.边讲边做（15分钟）-打开模块3/4完成的志愿服务队招新页面。-为主题切换按钮添加鼠标悬停时的放大效果（transform:scale(1.1);transition:transform0.3sease;）。-为图像展示区的图像添加进入动画：-初始opacity:0;，通过@keyframes定义淡入，animation-fill-mode:forwards;保持最终状态。-图5-2-3展示主题切换按钮的悬停放大效果。第二学时（40分钟）1.继续知识点讲解与演示（10分钟）-浮动动画（5分钟）：为浮动内容块添加上下浮动的动画，增加页面活力。css<br>@keyframesfloat{<br>0%{transform:translateY(0);}<br>50%{transform:translateY(-10px);}<br>100%{transform:translateY(0);}<br>}<br>.float-card{animation:float3sease-in-outinfinite;}<br>-跳转按钮（5分钟）：在页面右下角添加一个矩形按钮，单击跳转到CSS动画学习站。2.边讲边做（20分钟）-为“策划部”、“宣传部”等浮动内容块添加上下浮动动画。-书稿图5-2-4展示“加入我们”模块浮动效果。-在页面右下角添加固定定位的跳转按钮：position:fixed;bottom:220px;right:220px;-为跳转按钮添加鼠标悬停时的背景色变化和放大效果。-设置跳转链接指向第17讲创建的animation-station.html。-展示CSS动画学习站跳转按钮。3.总结与展示（10分钟）-邀请学生展示优化后的志愿服务队招新页面。-点评动画的使用是否恰当、时长是否合理。-总结动画设计最佳实践：-使用transform和opacity进行动画以获得更好性能。-动画时长控制在300ms-500ms。-提供交互反馈时要考虑可访问性（如:focus）。-预告下节技能补强将学习视觉效果与功能的融合。课后作业：-为志愿服务队招新页面的“常规活动”列表项添加悬停动画（如背景色渐变、左移效果）。-为页脚版权信息添加淡入动画，页面加载时从透明淡入。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：transform、animation-fill-mode在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交添加了CSS动画效果的志愿服务队招新页面代码。完成平台上关于CSS动画优化相关选择题练习预习模块5视觉效果与功能的融合相关内容第20讲教案教学单元技能补强：别具匠心（视觉效果与功能的融合）周次10时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解“高级感”网页的设计要素：细腻、流畅、精致。培养通过CSS动画提升页面质感的审美能力。能力目标了解如何通过CSS动画和布局技巧提升页面的“高级感”。通过组合不同的CSS动画制作出类似玻璃质感的效果。教学要求掌握细腻过渡效果的实现（平滑颜色、阴影变化）。掌握细节化动画效果（淡入、上浮）。掌握背景渐变和阴影效果的搭配使用。了解backdrop-filter:blur()实现玻璃拟态效果。教学重点：细腻过渡效果和细节化动画。背景渐变与阴影搭配提升层次感。玻璃拟态效果的实现。教学难点：backdrop-filter与filter的区别。玻璃拟态效果中透明度、模糊度和背景的协调。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注1.原理讲解（12分钟）-什么是“高级感”网页（2分钟）：通过精致打磨设计、排版、色彩、互动，创造精致、细腻、流畅且富有品质的网页效果。-细腻过渡效果（3分钟）：-示例：按钮平滑过渡效果（图5-3-1）。-关键：transition应用于all或具体属性，时长适中，使用ease-in-out等舒适曲线。-细节化动画效果（3分钟）：-示例：文字淡入上浮动画（图5-3-2）。-@keyframesfadeln{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}-背景渐变和阴影效果（4分钟）：-线性渐变：background:linear-gradient(135deg,#FFB6C1,#2E86C1);-阴影效果：box-shadow:04px12pxrgba(0,0,0,0.1);-悬停时增强阴影并上浮：transform:translateY(-10px);（图5-3-3）。2.实践操作：玻璃拟态效果（18分钟）-效果介绍（3分钟）：“玻璃质感”效果——半透明背景+模糊背景，模拟磨砂玻璃视觉效果。-核心CSS属性（5分钟）：-background:rgba(255,255,255,0.2);半透明白色背景。-backdrop-filter:blur(10px);背景模糊（影响元素背后的区域）。-border-radius:12px;圆角。-box-shadow:04px16pxrgba(0,0,0,0.1);阴影。-border:1pxsolidrgba(255,255,255,0.3);边框增强质感。-动手实践（7分钟）：-为CSS动画学习站的跳转按钮添加玻璃质感效果。-添加鼠标悬停效果：背景透明度提高、阴影增强。-书稿图5-3-5展示跳转按钮的高级玻璃质感效果。-注意：backdrop-filter有兼容性问题，需添加浏览器前缀（-webkit-backdrop-filter）。3.拓展与总结（10分钟）-刀片切割效果演示（5分钟）：-结合JavaScript实现炫酷的“刀片切割效果”（图5-3-4）。-简要讲解实现原理：clip-path动态裁剪。-总结（3分钟）：-细腻过渡、细节动画、渐变阴影、玻璃拟态是提升页面“高级感”的有效手段。-适度使用，避免过度设计。-布置作业（2分钟）。课后作业：-为志愿服务队招新页面的卡片元素添加玻璃拟态效果。-尝试使用linear-gradient为页面背景添加渐变色。-阅读MDN文档了解backdrop-filter的兼容性情况和前缀写法。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：backdrop-filter、linear-gradient、box-shadow在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交添加了玻璃拟态效果的CSS动画学习站页面代码。完成平台上关于CSS动画和布局技巧选择题练习预习模块6“JavaScript基础”相关内容=第21讲教案教学单元零号任务：JavaScript从零到一（构建基础的博客页面）周次11时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解JavaScript作为Web开发“灵魂”的核心地位。培养通过编程解决问题的逻辑思维。能力目标掌握JavaScript变量的声明方式和作用域，理解不同数据类型的应用场景。学习控制语句（if...else、for、while等）的使用方法。掌握函数的定义、调用与参数传递，理解函数作用域。教学要求掌握var、let、const的区别（函数作用域vs块作用域）。掌握基本数据类型：String、Number、Boolean、null、undefined、Symbol。掌握条件语句（if...elseif...else）和循环语句（for、while）。掌握函数的声明、表达式、箭头函数及参数传递。教学重点：变量的声明与作用域。条件语句和循环语句的使用。函数的定义与调用。教学难点：理解let与var的作用域差异。理解函数作用域与全局作用域的关系。箭头函数的简写语法。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注1.导入与讲解（8分钟）-复习引入（2分钟）：回顾模块1-5学习了HTML和CSS，能够构建静态网页，引出JavaScript实现动态交互。-JavaScript的地位（3分钟）：JavaScript是Web开发的“灵魂”，它能将静态页面转变为动态交互应用。-本任务目标（3分钟）：利用AI助手生成基础博客页面的HTML/CSS，并使用JavaScript实现“日常博客”和“学术博客”的分类筛选功能。2.知识点讲解与演示（17分钟）-变量与数据类型（7分钟）：-var：函数作用域，可重复声明。-let：块作用域，不可重复声明。-const：块作用域，声明常量，不可重新赋值。-基本数据类型：String（字符串）、Number（数字）、Boolean（布尔值）、null（空值）、undefined（未定义）、Symbol（符号）。-类型转换：String()、Number()、Boolean()。-控制语句（5分钟）：-条件语句：if...elseif...else。-循环语句：for循环、while循环。-函数（5分钟）：-函数声明：functionname(参数){...}。-函数表达式：constfunc=function(参数){...}。-箭头函数：(参数)=>表达式或(参数)=>{...}。-返回值：return。-函数作用域：函数内部声明的变量外部无法访问。3.边讲边做（10分钟）-使用AI助手生成基础博客页面。-在生成的HTML中添加两个按钮：“日常博客”和“学术博客”。-编写JavaScript代码：-创建一个博客数组，包含标题、内容、分类等字段。-编写renderBlogs(category)函数，根据分类参数筛选并渲染博客列表。-为按钮绑定onclick事件，调用renderBlogs函数。-展示基础的博客页面效果。4.总结与预告（5分钟）-总结JavaScript的三大核心：变量、控制语句、函数。-强调let和const在现代开发中的优先使用。-预告下节课将学习数组、对象、DOM操作及无障碍设计。课后作业：-为自己创建的博客数组增加2篇博客文章。-修改renderBlogs函数，当没有博客时显示“暂无博客”提示。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：JavaScript基础在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交实现分类筛选功能的博客页面代码。完成平台上关于“JavaScript基础”选择题相关练习预习模块6“数组、对象、DOM操作及无障碍设计”相关内容第22讲教案教学单元一号任务：全员通行（让每个用户都能无障碍访问网页）周次11时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解无障碍设计的重要性，关注残障用户的网页访问体验。培养包容性设计的价值观。能力目标理解数组和对象的创建、访问与操作方法。掌握DOM操作的原理，通过操作HTML元素处理事件。掌握无障碍功能设计网页的原则和方法。教学要求掌握对象的创建（字面量、构造函数）和属性访问。掌握数组的创建和常用方法（push、filter、forEach）。掌握document.getElementById、addEventListener等DOM操作方法。了解WCAG无障碍设计的四大原则：可感知性、可操作性、可理解性、健壮性。教学重点：对象和数组的创建与操作。DOM操作（获取元素、修改内容、绑定事件）。无障碍功能实现（字体放大、语音朗读）。教学难点：理解DOM树的结构和节点关系。SpeechSynthesisAPI的使用。理解WCAG原则在实际开发中的应用。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-回顾上节课的博客页面，提问：视力不佳的用户如何阅读？色盲用户如何区分颜色？引出无障碍设计。2.知识点讲解与演示（20分钟）-无障碍设计的基本概念（5分钟）：-定义：考虑到各种障碍类型（视力、听力、行动、认知等），确保所有用户都能轻松访问和操作内容。-WCAG四大原则：可感知性、可操作性、可理解性、健壮性。-对象（5分钟）：书稿P129-130。-创建：字面量{key:value}，构造函数newObject()。-访问：点表示法obj.key，方括号表示法obj['key']。-遍历：for...in循环。-数组（5分钟）：-创建：字面量[1,2,3]，构造函数newArray()。-常用方法：push()（添加）、pop()（删除）、filter()（过滤）、forEach()（遍历）、find()（查找）。-图6-1-3“数组的基本操作”。-DOM操作（5分钟）：-获取元素：document.getElementById()、document.querySelector()。-修改内容：element.textContent、element.innerHTML。-展示“常见DOM操作”。3.边讲边做（15分钟）-为上节课的博客页面添加无障碍功能：-添加字体放大/缩小按钮（A-、A、A+）。-使用document.documentElement.style.fontSize动态修改根元素字体大小。-使用SpeechSynthesisAPI实现“一键阅读页面”功能，朗读页面所有文本内容。-展示无障碍博客页面效果。第二学时（40分钟）1.继续知识点讲解与演示（12分钟）-事件处理（8分钟）：-addEventListener(event,handler)添加事件监听。-removeEventListener(event,handler)移除事件监听。-常见事件：click、mouseover、keydown、input。-展示“常见事件处理”。-无障碍最佳实践（4分钟）：-为交互元素提供aria-label属性。-确保键盘可访问性（tabindex、:focus样式）。-为图像提供有意义的alt文本。2.边讲边做（18分钟）-为博客页面添加事件监听优化：-使用addEventListener替代onclick属性。-为按钮添加aria-label属性提升屏幕阅读器体验。-确保字体缩放时页面布局不破裂。-测试语音朗读功能：朗读内容包括博客标题、正文、图像的alt文本。3.总结与展示（10分钟）-邀请学生展示无障碍博客页面，测试字体缩放和语音朗读功能。-总结无障碍设计的价值和实现要点。-预告下节课将学习面向对象程序设计和SOLID原则。课后作业：-为博客页面的所有按钮添加:focus样式，确保键盘用户能够看到焦点状态。-为图像添加有意义的alt属性描述。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：DOM、事件、SpeechSynthesisWCAG官方指南在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交实现了无障碍功能的博客页面代码。 完成平台上关于数组、对象、DOM操作及无障碍设计选择题练习。预习模块6“面向对象程序设计和SOLID原则”相关内容。第23讲教案教学单元二号任务：设计与优化（面向对象程序设计与SOLID原则）周次12时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解面向对象编程思想对大型项目的重要性。培养编写高内聚、低耦合、可扩展、易维护代码的习惯。能力目标掌握面向对象程序设计（OOP）的核心概念（类、对象、继承、多态）。了解SOLID原则对代码设计的影响。教学要求掌握class关键字定义类，constructor构造函数，new创建实例。掌握extends实现继承，super调用父类构造函数。理解方法重写实现多态。了解SOLID原则的核心思想（重点：单一职责原则、开闭原则）。教学重点：类和对象的定义与使用。继承的实现。单一职责原则（SRP）和开闭原则（OCP）的理解。教学难点：理解多态的概念。理解开闭原则（对扩展开放，对修改封闭）。将SOLID原则应用到实际代码重构中。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-回顾上节课的博客页面代码，提问：当代码量增大时，如何组织和管理代码？引出面向对象编程。2.知识点讲解与演示（20分钟）-类和对象（8分钟）：书稿P136。-类的定义：classClassName{constructor(){...}}。-对象的创建：constobj=newClassName();-属性和方法。-继承（6分钟）：-extends关键字实现继承。-super()调用父类构造函数。-方法重写。-多态（6分钟）：-同一方法在不同子类中有不同实现。-示例：Animal类有speak方法，Dog和Cat分别重写。3.边讲边做（15分钟）-重构博客页面的JavaScript代码：-创建Blog类，包含title、content、category、author、date等属性。-创建BlogManager类，负责博客的存储、筛选、渲染。-将原有的零散函数整合到类中。第二学时（40分钟）1.继续知识点讲解与演示（12分钟）-封装（4分钟）：-使用#前缀定义私有属性和方法。-通过公共方法访问私有属性。-SOLID原则概述（8分钟）：-单一职责原则（SRP）：一个类应该只有一个职责。示例：将日志功能分离到独立的Logger类。-开闭原则（OCP）：对扩展开放，对修改封闭。示例：通过继承和多态扩展功能，而非修改现有类。-里氏替换原则（LSP）：子类应能替换父类。-接口隔离原则（ISP）：不应强迫类实现不需要的接口。-依赖倒置原则（DIP）：依赖抽象而非具体实现。2.边讲边做（18分钟）-优化语音朗读功能：-原有一键阅读功能只能朗读全文。-新增单篇博客独立阅读功能：为每篇博客添加“朗读本文”按钮。-使用speechSynthesis.cancel()停止前一个朗读任务。-展示独立阅读单篇博客文章的实现效果。-应用SOLID原则分析代码改进点。3.总结与展示（10分钟）-展示重构后的代码结构，对比重构前后的可维护性。-总结面向对象编程的三大特性：封装、继承、多态。-总结SOLID原则的核心价值。-预告下节技能补强将学习服务器搭建与Node.js。课后作业：-为BlogManager类添加deleteBlog(id)和editBlog(id,newData)方法。-分析自己的博客代码，找出可以应用单一职责原则的地方并重构。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：类、继承在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交使用面向对象思想重构后的博客页面代码。完成平台上关于面向对象程序设计和SOLID原则选择题练习。预习模块6“服务器搭建与Node.js”相关内容。第24讲教案教学单元技能补强：轻松启动（服务器搭建与Node.js的应用）周次12时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解客户端-服务器架构的基本原理。培养部署和运维Web应用的能力。能力目标掌握搭建服务器的多种方式。了解服务器的基本概念。学习如何使用Node.js创建简单的HTTP服务器。教学要求理解服务器的概念和作用。能够安装Node.js并验证安装成功。能够使用Node.js的http模块创建HTTP服务器。能够通过本地和广域网访问部署的网页。教学重点：Node.js的安装与验证。http模块创建服务器。服务器搭建流程。教学难点：理解require模块导入机制。理解文件路径处理（path.join、__dirname）。理解端口占用问题的排查。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注1.原理讲解（10分钟）-什么是服务器（3分钟）：服务器是一种能够稳定提供服务的计算机。客户端通过HTTP请求向服务器索取资源，服务器返回响应。-Node.js介绍（4分钟）：-基于ChromeV8引擎的JavaScript运行环境。-允许在服务器端运行JavaScript代码。-特点：非阻塞I/O模型、跨平台、丰富的NPM生态。-本任务目标（3分钟）：使用Node.js搭建HTTP服务器，部署博客页面，并实现本地和广域网访问。2.操作演示与实践（20分钟）-安装Node.js（3分钟）：访问下载安装，终端输入node-v验证。-简单服务器快速体验（5分钟）：-安装http-server：npminstallhttp-server-g-在项目目录运行：http-server-p8090-通过手机浏览器访问。-自定义HTTP服务器（12分钟）：-创建项目文件夹，初始化npminit-y。-创建server.js，编写代码：-导入http、fs、path模块。-读取HTML文件内容。-创建服务器，设置响应头Content-Type:text/html。-监听端口（如3000）。-运行服务器：nodeserver.js。-浏览器访问http://localhost:3000。3.总结与拓展（10分钟）-端口占用处理（2分钟）：图6-3-5展示端口占用时的处理方式。-部署无障碍博客页面（3分钟）：将模块6完成的博客页面部署到Node.js服务器中。-广域网访问（3分钟）：-获取本机公网IP地址。-其他设备通过http://<公网IP>:3000访问。-总结（2分钟）：-本地开发服务器与生产服务器的区别。-Node.js在Web开发中的重要地位。-预告下节课将进入模块7“DOM与事件处理”。课后作业：-将模块6完成的无障碍博客页面部署到Node.js服务器中，通过手机访问测试。-尝试修改服务器端口为8080，观察是否正常运行。-阅读文档了解Express框架的基本使用（拓展学习）。教学资源列表与访问路径备注智慧树HTML5课程对应章节Node.js官网：/NPM官网：/在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交部署成功的博客页面访问截图（本地和手机访问各一张）。完成平台上关于Node.js选择题练习预习模块7“DOM与事件处理”相关内容第25讲教案教学单元零号任务：如虎添翼（使用DOM操作增强操作的动态响应）周次13时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解DOM操作在实现动态网页中的核心作用。培养使用开发者工具进行调试的习惯。能力目标掌握通过DOM操作动态插入、删除和修改博客内容。掌握使用console.log()进行调试。教学要求掌握选择节点的方法：getElementById、getElementsByClassName、querySelector、querySelectorAll。掌握创建和插入节点：createElement、appendChild、insertBefore。掌握删除节点：removeChild。掌握修改节点属性：setAttribute、getAttribute。掌握类名与样式操作：classList、style。教学重点：获取DOM元素的方法。动态创建、添加、删除元素。修改元素属性和样式。教学难点：理解HTMLCollection（动态集合）与NodeList（静态集合）的区别。理解innerHTML与textContent的区别及适用场景。掌握classList的add、remove、toggle方法。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注1.导入与讲解（8分钟）-复习引入（2分钟）：回顾模块6的博客页面，博客内容写死在HTML中，无法动态新增、修改或删除。-本任务目标（3分钟）：在模块6博客页面基础上，实现添加、修改、删除博客的功能。-DOM概述（3分钟）：DOM是HTML和XML文档的编程接口，将文档表示为树形结构。2.知识点讲解与演示（17分钟）-选择节点（5分钟）：-getElementById(id)：通过id获取单个元素。-getElementsByClassName(className)：通过类名获取HTMLCollection。-getElementsByTagName(tagName)：通过标签名获取HTMLCollection。-querySelector(selector)：通过CSS选择器获取第一个匹配元素。-querySelectorAll(selector)：通过CSS选择器获取静态NodeList。-创建和插入节点（4分钟）：-createElement(tagName)：创建新元素。-createTextNode(text)：创建文本节点。-appendChild(node)：在父节点末尾添加子节点。-insertBefore(newNode,referenceNode)：在参考节点前插入新节点。-删除和替换节点（3分钟）：-removeChild(node)：删除指定子节点。-replaceChild(newNode,oldNode)：替换子节点。-修改属性与样式（5分钟）：-setAttribute(name,value)/getAttribute(name)。-classList：add()、remove()、toggle()、contains()。-perty：直接修改内联样式。-textContent/innerHTML：修改文本或HTML内容。3.边讲边做（10分钟）-打开模块6完成的博客页面。-添加“添加新博客”按钮和浮窗（对话框）。-实现addNewBlog()函数：获取用户输入，创建新博客元素，添加到博客列表。-实现deleteBlog(blogId)函数：找到对应博客元素并删除。-实现editBlog(blogId)函数：弹出浮窗，修改博客内容。-使用console.log()输出调试信息，验证函数执行情况。-展示参考效果，展示控制台调试。4.总结与预告（5分钟）-总结DOM操作的核心流程：获取元素→创建元素→修改元素→插入/删除元素。-强调classList比直接操作className更灵活。-预告下节课将学习事件处理机制。课后作业：-为博客添加“编辑”功能，单击编辑按钮后弹出浮窗，可修改博客标题和内容。-使用classList.toggle为博客项添加“已读”样式切换功能。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：DOM操作在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交实现增删改功能的博客页面代码。完成平台上关于DOM与事件处理选择题练习。预习模块7“事件处理机制”相关内容。第26讲教案教学单元一号任务：事半功倍（使用事件处理机制提高交互的精准性）周次13时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解事件驱动编程的思维模式。培养合理使用事件委托优化性能的意识。能力目标掌握通过事件监听器增强博客交互性。掌握使用事件对象优化交互逻辑。掌握事件冒泡与事件捕获机制。教学要求掌握addEventListener和removeEventListener的用法。掌握常见事件类型：click、dblclick、keydown、input、submit、scroll、resize等。掌握事件对象（event）的常用属性和方法：target、preventDefault()、stopPropagation()。理解事件冒泡和捕获阶段，掌握事件委托技术。教学重点：addEventListener添加事件监听。事件对象的使用（target、preventDefault）。事件委托的实现与应用场景。教学难点：理解事件冒泡与捕获的执行顺序。掌握事件委托的工作原理（利用冒泡机制）。区分event.target与event.currentTarget。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-回顾上节课使用onclick属性绑定事件，引出更优的事件绑定方式。-简述本节课目标：使用事件监听器优化博客页面的交互。2.知识点讲解与演示（20分钟）-添加和移除事件监听器（5分钟）：-element.addEventListener(event,handler,options)-element.removeEventListener(event,handler)-options参数：once（只触发一次）、capture（捕获阶段触发）。-常见事件类型及使用场景（8分钟）：-鼠标事件：click、dblclick、mouseenter、mouseleave。-键盘事件：keydown、keyup。-表单事件：input、change、submit。-窗口事件：scroll、resize、load、DOMContentLoaded。-事件对象（7分钟）：-event.target：触发事件的元素。-event.currentTarget：绑定事件的元素。-event.preventDefault()：阻止默认行为。-event.stopPropagation()：阻止事件冒泡。3.边讲边做（15分钟）-重构上节课的博客页面事件绑定：-将onclick属性替换为addEventListener。-为“添加新博客”按钮绑定click事件。-为删除按钮绑定click事件，使用event.target获取被单击的按钮。-为防止事件冒泡导致的问题，在删除按钮的处理函数中调用stopPropagation()。第二学时（40分钟）1.继续知识点讲解与演示（12分钟）-事件冒泡和捕获（6分钟）：-捕获阶段：事件从window向下传递到目标元素。-目标阶段：事件到达目标元素。-冒泡阶段：事件从目标元素向上传递到window。-默认情况下，事件在冒泡阶段触发。-事件委托（6分钟）：-原理：利用事件冒泡，将事件监听器绑定到父元素上，统一处理子元素的事件。-优势：减少事件监听器数量，动态添加的子元素也能响应事件。-示例：ul.addEventListener('click',(e)=>{if(e.target.tagName==='LI'){...}})2.边讲边做（18分钟）-使用事件委托优化博客删除功能：-将删除按钮的click事件监听器绑定到博客列表容器上。-通过e.target.classList.contains('delete-btn')判断是否为删除按钮。-实现搜索输入框的实时筛选功能：监听input事件，过滤博客列表。-展示事件冒泡和捕获机制。3.总结与展示（10分钟）-邀请学生展示优化后的博客页面。-总结事件委托的优势：性能优化、支持动态元素。-强调stopPropagation()的使用场景（如避免触发父元素上的事件）。-预告下节课将学习闭包和防抖技术。课后作业：-为博客页面添加键盘快捷键：按Ctrl+S保存博客（preventDefault阻止默认保存行为）。-使用事件委托为动态添加的博客项的“编辑”按钮绑定事件。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：事件、事件委托在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交使用事件委托和事件对象优化后的博客页面代码。完成平台上事件处理机制选择题练习。预习模块7“闭包和防抖技术”相关内容。第27讲教案教学单元二号任务：举重若轻（使用闭包提效及防抖技术）周次14时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解函数式编程的核心概念（闭包、高阶函数）。培养性能优化意识，避免不必要的函数调用。能力目标掌握闭包的原理，能够识别和应用闭包。掌握防抖技术，能使用防抖优化高频事件的性能。教学要求理解闭包的定义：函数能够记住并访问其词法作用域，即使函数在该作用域之外执行。掌握闭包的典型应用场景：封装私有变量、防抖/节流函数。掌握防抖函数的实现原理：延迟执行+重置定时器。能够使用防抖优化搜索输入框的input事件。 教学重点：闭包的概念和形成条件。防抖技术的原理和实现。防抖在搜索功能中的应用。教学难点：理解闭包中变量引用的生命周期。理解防抖函数中setTimeout和clearTimeout的配合。区分防抖（debounce）与节流（throttle）的适用场景。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-回顾上节课的搜索功能：每次输入都会立即执行筛选，对于频繁输入的场景存在性能浪费。-提出问题：如何让搜索在用户停止输入一段时间后再执行？引出防抖技术。2.知识点讲解与演示（20分钟）-闭包的概念（8分钟）：-定义：函数能够捕获并记住其定义时的作用域环境。-例7-2-1：outerFunction返回innerFunction，innerFunction能够访问outerVariable。-展示控制台中闭包的内容。-闭包的应用场景（7分钟）：-封装私有变量（例7-2-2计数器）。-模块化模式。-防抖/节流函数的实现基础。-匿名函数（5分钟）：-定义：没有名称的函数。-使用场景：作为参数传递（回调函数）、立即执行函数表达式（IIFE）。3.边讲边做（15分钟）-编写一个简单的闭包示例：计数器函数，每次调用返回递增的值。-在浏览器控制台中测试闭包的效果。-分析闭包中变量在内存中的存储方式。第二学时（40分钟）1.继续知识点讲解与演示（12分钟）-防抖技术（8分钟）：-定义：限制函数在短时间内多次触发时的执行次数，只有在事件停止触发一段时间后才执行。-实现原理：利用闭包保存timeoutId，每次触发时clearTimeout清除之前的定时器，然后setTimeout设置新定时器。-例7-2-6：基本防抖函数。-防抖适用场景（4分钟）：-搜索框实时搜索。-窗口resize事件。-按钮连点控制。-表单输入验证。2.边讲边做（18分钟）-为博客页面的搜索输入框添加防抖功能：-编写debounce(func,delay)函数。-将搜索处理函数包装为防抖版本。-对比添加防抖前后的性能差异。-为窗口resize事件添加防抖：仅在用户停止调整窗口大小后输出窗口尺寸。-展示防抖效果。3.总结与展示（10分钟）-邀请学生展示添加防抖后的搜索功能。-总结闭包的核心价值：保存状态、封装私有变量。-总结防抖技术的核心：延迟执行+重置定时器。-拓展介绍节流（throttle）技术及与防抖的区别。-预告下节技能补强将学习多人协作编辑器。课后作业：-实现一个防抖函数，延迟时间默认为300ms。-为博客的“保存”按钮添加防抖，避免用户快速点击多次提交。-（选做）学习节流（throttle）的原理并实现一个简单的节流函数。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：闭包、setTimeout在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交实现防抖搜索功能的博客页面代码。完成平台上关于闭包和防抖技术选择题练习。预习模块7“多人协作编辑器”相关内容。第28讲教案教学单元技能补强：齐心协力（开发多人协作编辑器）周次14时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解实时协作应用的技术挑战和解决方案。培养跨学科（前端+后端）的工程视野。能力目标了解WebSocket实时通信的基本原理。理解浏览器安全策略。了解编辑器的基本构成与用户权限管理。教学要求理解WebSocket与HTTP的区别（全双工vs半双工）。了解OT（操作转换）和CRDT等数据同步机制。了解SelectionAPI和EditingAPI在编辑器中的应用。了解剪贴板API的安全限制。教学重点：WebSocket实时通信原理。编辑器基本构成（文本操作、用户权限）。浏览器剪贴板安全策略。教学难点：理解WebSocket的全双工通信模型。理解OT算法解决冲突的基本思想。理解剪贴板API的用户激活限制。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注1.原理讲解（15分钟）-多人协作编辑器需求（2分钟）：多个用户同时编辑同一文档，实时看到彼此的修改。-WebSocket（5分钟）：-定义：在单个TCP连接上进行全双工通信的协议。-与HTTP的区别：HTTP是请求-响应模式（半双工），WebSocket是双向实时通信。-适用场景：聊天室、在线协作、实时游戏。-数据同步机制（3分钟）：-OT（操作转换）：将用户的编辑操作转换为可以合并的形式。-CRDT：基于数据结构的冲突解决机制。-编辑器的基本构成（5分钟）：-HTMLEditingAPIs：document.execCommand()（已废弃，了解即可）。-SelectionAPI：window.getSelection()获取用户选中的文本。-用户权限管理：锁定机制确保同一时间只有一人可编辑。2.操作演示与实践（15分钟）-WebSocket服务器搭建（5分钟）：-使用ws库创建WebSocket服务器。-监听connection、message、close事件。-广播消息给所有连接的客户端。-前端编辑器实现（5分钟）：-创建contenteditable属性的可编辑区域。-监听input事件，将内容变化通过WebSocket发送到服务器。-接收服务器广播，更新本地编辑器内容。-Localtunnel公开服务（5分钟）：-安装localtunnel：npminstall-glocaltunnel。-运行lt--port8080，获取公网URL，实现跨网络测试。-图7-3-3展示多人协作编辑器效果。3.总结与拓展（10分钟）-剪贴板功能安全考量（3分钟）：-navigator.clipboard.writeText()和readText()。-安全限制：必须在用户主动触发的上下文（如单击事件）中调用。-版本控制与冲突解决（3分钟）：-撤销/重做：维护undoStack和redoStack。-冲突解决：依赖OT或CRDT算法。-总结（2分钟）：-多人协作编辑器的技术栈：WebSocket+OT/CRDT+富文本编辑器。-AI助手在辅助编写复杂逻辑中的价值。-预告（2分钟）：下节课将进入模块8“Canvas基础与动画设计”。课后作业：-使用AI助手完善WebSocket服务器的代码，实现更完善的广播逻辑。-（选做）学习ShareDB库，了解OT算法的实际应用。-阅读MDN文档了解contenteditable属性的更多用法。教学资源列表与访问路径备注智慧树HTML5课程对应章节WebSocketAPI文档Localtunnel：https://localtunnel.me/在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交多人协作编辑器的核心代码（server.js+index.html）。预习模块8“Canvas基础与动画设计”相关内容。第29讲教案教学单元零号任务：笔走龙蛇（Canvas绘图）周次15时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解Canvas在Web图形绘制中的核心地位。培养通过CanvasAPI实现创意视觉设计的兴趣。能力目标掌握Canvas中<canvas>标签的基本特性和使用方式，包括与<img>标签的区别、Canvas坐标系。能用JavaScript绘制基本图形和文本。学习使用fillText()与strokeText()方法进行文字渲染。教学要求掌握<canvas>标签的width、height属性。掌握获取Canvas上下文：canvas.getContext('2d')。掌握Canvas坐标系（左上角为原点，x轴向右，y轴向下）。掌握基本图形绘制：fillRect()、strokeRect()、beginPath()、moveTo()、lineTo()、arc()。掌握文字渲染：fillText()、strokeText()、font、textAlign。掌握样式设置：fillStyle、strokeStyle、shadowColor、globalAlpha。教学重点：Canvas坐标系理解。基本图形绘制（矩形、路径、圆形）。文字渲染和样式设置。教学难点：理解路径绘制中beginPath()和closePath()的作用。理解fill()与stroke()的区别。理解Canvas的像素级操作原理。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注1.导入与讲解（8分钟）-复习引入（2分钟）：回顾模块1-7学习了HTML/CSS/JS，能够构建静态网页和动态交互，但缺乏图形绘制能力，引出Canvas。-Canvas概述（3分钟）：<canvas>是HTML5新增标签，可使用脚本（JavaScript）在其中绘制图像，适用于图表、动画、游戏、实时视频处理。-本任务目标（3分钟）：在模块6-7的博客页面中，添加一个“博客打赏”区域，使用Canvas绘制图形和文字。2.知识点讲解与演示（17分钟）-Canvas基本代码模板（3分钟）：-<canvasid="canvas"width="300"height="300"></canvas>-默认尺寸：宽度300px，高度150px。-constctx=canvas.getContext('2d');获取2D绘图上下文。-Canvas坐标系（2分钟）：-左上角为原点(0,0)，x轴正方向向右，y轴正方向向下。-书稿图8-0-3展示坐标系中的绿色正方形。-绘制基本图形（6分钟）：-矩形：fillRect(x,y,width,height)、strokeRect()。-路径：beginPath()→moveTo()→lineTo()→closePath()→fill()/stroke()。-圆形：arc(x,y,radius,startAngle,endAngle)。-文字渲染（3分钟）：-fillText(text,x,y)：填充文字。-strokeText(text,x,y)：描边文字。-font：设置字体样式。-textAlign：对齐方式（left、center、right）。-Canvas样式（3分钟）：-fillStyle/strokeStyle：填充/描边颜色。-shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY：阴影效果。-globalAlpha：全局透明度。-线性渐变：createLinearGradient()+addColorStop()。3.边讲边做（10分钟）-在博客页面中添加Canvas元素：<canvasid="donationCanvas"width="260"height="300">。-编写独立脚本donation.js，实现“博客打赏”区域：-设置背景色为奶白色。-绘制圆角矩形区域。-添加阴影效果。-添加文字“博客打赏”，居中显示。-图8-0-9展示“博客打赏”区域效果。-使用AI助手辅助生成Canvas绘图代码。4.总结与预告（5分钟）-总结Canvas绘图的四步：获取Canvas→获取上下文→设置样式→绘制图形。-强调Canvas坐标系与数学坐标系的区别。-预告下节课将学习Canvas动画。课后作业：-修改“博客打赏”区域的尺寸和背景渐变色。-在Canvas中绘制一个简单的笑脸（圆形+两个眼睛+弧形嘴巴）教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：Canvas教程在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交包含“博客打赏”Canvas区域的博客页面代码。完成平台上关于Canvas基础与动画设计选择题练习。预习模块8“Canvas动画”相关内容。第30讲教案教学单元一号任务：妙趣横生（Canvas动画）周次15时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解Canvas动画与CSS动画的区别与适用场景。培养利用requestAnimationFrame实现高性能动画的意识。能力目标掌握Canvas中<canvas>标签的基本特性和使用方式，包括与<img>标签的区别、Canvas坐标系。能用JavaScript绘制基本图形和文本。学习使用fillText()与strokeText()方法进行文字渲染。教学要求掌握requestAnimationFrame的使用。理解帧率（fps）的概念（目标60fps）。掌握通过改变变量值并重绘实现动画。掌握速度和加速度的计算方法。掌握translate()、rotate()、scale()变换方法及save()/restore()状态管理。教学重点：requestAnimationFrame动画循环。速度和加速度实现运动。旋转与缩放动画。鼠标事件驱动的交互动画。教学难点：理解requestAnimationFrame与setInterval/setTimeout的区别（与屏幕刷新率同步）。理解save()和restore()在变换中的重要性。实现鼠标拖动交互时坐标的计算。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-回顾上节课的静态Canvas绘图，提问：如何让Canvas中的图形动起来？引出Canvas动画。-简述本节课目标：为博客页面设计一个专属的动态时钟。2.知识点讲解与演示（20分钟）-Canvas动画基本步骤（3分钟）：清空画布（clearRect）→②更新状态（位置/角度）→③重绘→④循环调用。-requestAnimationFrame（5分钟）：-浏览器提供的专门用于动画的API。-与屏幕刷新率同步，通常为60fps。-页面不可见时会自动暂停，节省资源。-递归调用实现动画循环。-动画函数实现（5分钟）：-示例：蓝色方块在限定区域内移动并反弹。-变量：x、y（位置），dx、dy（速度）。-边界检测逻辑。-速度与加速度（7分钟）：-速度：每帧移动的距离（x+=dx）。-加速度：速度随时间增加（dx+=acceleration）。-限制最大速度（if(dx>maxSpeed)dx=maxSpeed）。3.边讲边做（15分钟）-创建clock.js独立脚本。-实现动态时钟：-绘制表盘（圆形）和刻度。-获取当前时间（时、分、秒）。-计算时针、分针、秒针的角度。-使用requestAnimationFrame每秒更新一次。-图8-1-3展示动态时钟效果。第二学时（40分钟）1.继续知识点讲解与演示（12分钟）-旋转与缩放动画（6分钟）：-translate(x,y)：平移坐标系。-rotate(angle)：旋转坐标系。-scale(x,y)：缩放坐标系。-save()：保存当前绘图状态。-restore()：恢复之前保存的状态。-示例：旋转和缩放的正方形动画。-交互动画（6分钟）：-监听鼠标事件：mousedown、mousemove、mouseup。-在Canvas上实现可拖拽的圆形。-判断鼠标是否在圆形内：计算距离Math.hypot(mouseX-circleX,mouseY-circleY)。2.边讲边做（18分钟）-为动态时钟添加交互功能：长按时钟加快指针旋转。-监听mousedown事件，启动加速计时器。-监听mouseup事件，停止加速，恢复正常速度。-使用AI助手辅助完成代码（向AI提问：“在当前动态时钟代码的基础上，为动态时钟绑定mousedown事件，实现‘长按时钟加快指针旋转’的效果”）。-图8-1-3展示博客页面动态时钟效果。3.总结与展示（10分钟）-邀请学生展示动态时钟效果和长按加速功能。-总结requestAnimationFrame的优势：性能优化、节能、同步刷新率。-强调save()和restore()在变换中避免状态污染的重要性。-预告下节课将学习贝塞尔曲线绘制。课后作业：-为动态时钟添加“开始/暂停”按钮。-实现一个匀速直线运动的小球，碰到边界反弹。-（选做）为小球添加重力加速度效果。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：Canvas教程、requestAnimationFrame在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交包含动态时钟的博客页面代码。完成平台上关于Canvas动画选择题练习。预习模块8“贝塞尔曲线绘制”相关内容。第31讲教案教学单元二号任务：曲尽其妙（贝塞尔曲线绘制）周次16时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解贝塞尔曲线在计算机图形学中的核心地位。培养数学思维与编程结合的工程能力。能力目标学习贝塞尔曲线的基本概念和公式推导。掌握如何绘制二次和三次贝塞尔曲线。掌握动态调整控制点实现曲线变化，使用多段贝塞尔曲线创建复杂路径等技能。教学要求理解贝塞尔曲线的定义：由控制点定义的数学曲线。掌握二次贝塞尔曲线公式：B(t)=(1-t)²P0+2(1-t)tP1+t²P2。掌握三次贝塞尔曲线公式：B(t)=(1-t)³P0+3(1-t)²tP1+3(1-t)t²P2+t³P3。掌握Canvas中绘制贝塞尔曲线的方法：quadraticCurveTo()、bezierCurveTo()。教学重点：二次贝塞尔曲线的绘制（quadraticCurveTo）。三次贝塞尔曲线的绘制（bezierCurveTo）。动态调整控制点实现曲线实时变化。教学难点：理解贝塞尔曲线的数学推导过程。理解控制点位置与曲线形状的关系。掌握多段贝塞尔曲线拼接实现复杂路径。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-回顾上节课的Canvas动画，提问：如何绘制平滑的曲线路径？引出贝塞尔曲线。-简述本节课目标：为博客页面设计一个专属Logo，使用贝塞尔曲线绘制。2.知识点讲解与演示（20分钟）-贝塞尔曲线定义与应用（5分钟）：-由法国工程师贝塞尔在20世纪60年代提出。-应用领域：字体设计（TrueType/OpenType）、SVG路径、动画缓动（cubic-bezier）、3D建模、机器人路径规划。-二次贝塞尔曲线公式推导（8分钟）：-三个控制点：P0（起点）、P1（控制点）、P2（终点）。-推导过程：两次线性插值。-最终公式：B(t)=(1-t)²P0+2(1-t)tP1+t²P2。-图8-2-10展示二次贝塞尔曲线示例。-三次贝塞尔曲线公式推导（7分钟）：书稿P193-195。-四个控制点：P0（起点）、P1（控制点1）、P2（控制点2）、P3（终点）。-推导过程：三次线性插值。-最终公式：B(t)=(1-t)³P0+3(1-t)²tP1+3(1-t)t²P2+t³P3。-展示三次贝塞尔曲线示例，展示四次贝塞尔曲线示例。3.边讲边做（15分钟）-创建logo.js独立脚本。-使用二次贝塞尔曲线绘制简单的心形或叶子形状。-使用三次贝塞尔曲线绘制更复杂的曲线部分。-添加阴影和文字样式。-图8-2-15展示博客页面Logo示例。第二学时（40分钟）1.继续知识点讲解与演示（12分钟）-动态调整控制点（6分钟）：-监听鼠标事件（mousedown、mousemove、mouseup）。-检测鼠标是否靠近控制点（距离<阈值）。-拖动控制点实时更新曲线。-示例：可拖拽控制点的三次贝塞尔曲线。-多段贝塞尔曲线绘制复杂路径（6分钟）：-连续调用bezierCurveTo()绘制多段曲线。-示例：绘制波浪形曲线或花朵形状。2.边讲边做（18分钟）-为博客页面设计专属Logo：-结合二次和三次贝塞尔曲线绘制一个独特的图标（如羽毛笔、B字母艺术字）。-使用<canvas>绘制Logo，并放置在页面左上方。-为Logo添加颜色渐变和阴影效果。-使用AI助手