HTML5网页制作与前端开发（AI协同）-教案_第1页
HTML5网页制作与前端开发（AI协同）-教案_第2页
HTML5网页制作与前端开发（AI协同）-教案_第3页
HTML5网页制作与前端开发（AI协同）-教案_第4页
HTML5网页制作与前端开发（AI协同）-教案_第5页
已阅读5页，还剩127页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第2页共4页深圳信息职业技术大学教案2025年/2026年第2学期专业大类电子与信息课程名称《AIGC与HTML5开发》课程类别专业基础课教学模式（课堂教学/混合式教学）混合式教学任课班级AIGC与HTML5开发-0001任课教师王寅峰所属院部计算机与软件学院2026年6月日

第1讲教案教学单元零号任务——磨刀不误砍柴工（配置Web开发环境与AI助手）周次1时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标能够独立完成技术文档的查阅及使用，熟记专业中、英文术语培养利用AI工具辅助解决技术问题的意识与习惯能力目标能够独立完成Web开发环境（VSCode、浏览器）的安装与配置能够安装并配置AI助手插件（通义灵码）能够使用AI助手生成基础HTML代码教学要求熟练掌握VSCode编辑器的下载、安装与基本配置熟练掌握常用插件（LiveServer、通义灵码等）的安装与使用理解浏览器在开发调试中的作用能够使用AI助手生成并测试简单页面教学重点：VSCode编辑器的安装与配置AI助手插件的安装与使用LiveServer的使用方法教学难点：AI助手的有效提问（提示词撰写）实验仪器及教具：PC机、windows7-win11操作系统、VSCode、谷歌浏览器

教学过程备注1.导入与讲解（10分钟） -Web开发岗位介绍、技术要求与发展趋势 -AIGC概念介绍：什么是AI辅助编程 -本任务目标概述：搭建高效的开发环境 2.边讲边做，学生跟做（25分钟） -VSCode安装与配置（5分钟） -下载与安装（建议非系统盘） -勾选附加任务选项 -插件安装（10分钟） -安装中文语言包 -安装通义灵码（AI助手） -安装LiveServer、AutoCloseTag、AutoRenameTag等 -演示通过扩展视图搜索并安装插件 -工作区创建与AI助手使用（10分钟） -创建项目文件夹，在VSCode中打开 -新建HTML文件（demo01.html） -使用AI助手生成“志愿服务队招新页面”代码 -提示词示例：“生成一个志愿服务队招新页面，包含中文欢迎信息、服务队介绍、常规活动、社会实践回顾、加入激励等内容” 3.测试与总结（5分钟） -使用LiveServer启动本地服务器，查看页面效果 -修改代码并观察实时刷新 -总结：开发环境搭建的要点和AI助手的价值课后作业：-自行练习使用AI助手生成不同类型的HTML页面（个人介绍页、产品展示页）-通过网络课程资料卡、微课视频预习“一号任务”内容教学资源列表与访问路径备注课程：/course/index/1788510919781912576?courseId=1000087375&mapVersion=0VSCode官网：在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：使用AI助手生成一个“个人简介”HTML页面，并提交源代码预习模块1一号任务的相关资料

第2讲教案教学单元一号任务——脉络分明（构建志愿服务队招新页面）周次1时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标能够独立完成技术文档的查阅及使用，熟记专业中、英文术语培养语义化设计的意识和良好的代码书写习惯能力目标能够使用Emmet插件快速生成HTML模板能够运用语义化标签构建结构清晰的网页能够使用文本内容标签、列表标签、表格标签组织页面内容教学要求熟练掌握HTML文档的基本结构理解网页语义化设计原则熟练掌握标题、段落、列表、文本样式等标签的使用熟练掌握表格标签及其语义化结构教学重点：HTML文档结构与Emmet快速生成语义化标签的选用原则列表标签与表格标签的使用教学难点：语义化设计原则的理解与应用表格的语义化结构（<thead>、<tbody>、<tfoot>）实验仪器及教具：PC机、windows操作系统、VSCode、谷歌浏览器

教学过程备注边讲边做，学生跟做，实现案例（80分钟）1.导入与复习（5分钟）-回顾上节课配置的开发环境-展示一个结构清晰的网页，引出HTML结构的重要性2.知识点讲解与演示（20分钟）-

HTML基本概念（5分钟）什么是HTML：页面的“骨架”-元素与标签：开始标签、结束标签、空元素-HTML文档基本结构：<!DOCTYPE>、<html>、<head>、<body>-

Emmet快速生成模板（5分钟）-输入“!”按Tab/Enter生成模板-修改lang="zh"、设置<title>-

语义化设计原则（10分钟）-内容优先、结构清晰、兼容性、易维护-语义化设计的价值（SEO、可访问性）3.边讲边做（20分钟）-创建demo02.html，生成基础模板-添加主标题、副标题、段落文本-使用<hr>添加水平分割线-使用<ul>和<li>创建无序列表第二学时（45分钟）1.继续知识点讲解与演示（15分钟）-

文本样式标签（10分钟）-

<strong>、<small>、<em>、<mark>、<del>的语义与效果-组合使用示例-

表格标签（5分钟）-基本结构：<table>、<tr>、<th>、<td>-语义化结构：<caption>、<thead>、<tbody>、<tfoot>-

colspan和rowspan属性2.边讲边做（20分钟）-为志愿服务队招新页面完善内容-添加“关于我们”“我们的使命”“加入我们”等部分-使用<strong>突出关键词-添加页脚版权信息（使用<small>）-使用AI助手辅助完善表格示例3.总结与答疑（10分钟）-学生展示完成的页面-点评常见问题（标签嵌套、语义化使用）-预告下节课内容（多媒体元素）课后作业：-提交“志愿服务队招新页面”完整代码-完成平台上的HTML基础选择题练习-预习多媒体标签相关内容教学资源列表与访问路径备注智慧树HTML5课程，对应章节MDNWebDocs：HTML基础Emmet官方文档在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交“志愿服务队招新页面”完整代码完成平台上的HTML基础选择题练习预习多媒体标签相关内容

第3讲教案教学单元二号任务——图文并茂（添加多媒体元素丰富页面内容）周次2时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标能够独立完成技术文档的查阅及使用，熟记专业中、英文术语培养多媒体资源的合理使用意识（版权、性能优化）能力目标能够在页面中嵌入和管理多媒体元素（图像、音频、视频）掌握HTML5标签属性的写法和全局属性的使用方法理解相对路径与绝对路径的区别及应用场景教学要求熟练掌握<img>标签及其属性（src、alt、width、height、title、loading）熟练掌握<video>和<audio>标签及其属性理解相对路径与绝对路径的区别了解<source>和<track>标签的用途教学重点：<img>、<video>标签的核心属性相对路径与绝对路径的使用教学难点：多媒体资源的路径管理不同浏览器多媒体格式的兼容处理（<source>的使用）实验仪器及教具：PC机、windows操作系统、VSCode、谷歌浏览器

教学过程备注1.导入与复习（5分钟）-回顾上节课完成的文字版招新页面-提出问题：如何让页面更生动？引出多媒体元素2.知识点讲解与演示（20分钟）-

图像标签<img>（10分钟）-src属性（图片来源）-alt属性（替代文本，可访问性）-width/height（尺寸设置）-title（悬停提示）-loading="lazy"（懒加载）-示例代码演示-

路径知识（10分钟）-相对路径：./、../、子目录-绝对路径：网络绝对路径、物理绝对路径-实际应用场景与选择建议3.边讲边做（20分钟）-在招新页面的“关于我们”部分添加两张图像-练习使用相对路径引用图像-设置width、height、alt、title属性第二学时（45分钟）1.继续知识点讲解与演示（15分钟）-

视频标签<video>（10分钟）-src、controls、autoplay、loop、muted、poster属性-width/height设置播放器尺寸-

<source>标签处理多格式兼容-

音频标签<audio>（5分钟）-基本属性与用法-与<video>的异同2.边讲边做（20分钟）-在“加入我们”部分插入团队文化视频-设置宽600、高400-添加controls控件-使用<source>指定MP4格式-演示使用AI助手优化多媒体代码3.总结与展示（10分钟）-学生展示添加多媒体后的完整页面-点评路径使用、属性设置等常见问题-引出下节课内容：动静分离与图床优化课后作业：-为招新页面添加背景音乐（<audio>，设置循环播放）-预习“技能补强”部分：动静分离与图床教学资源列表与访问路径备注免费图床服务（如SM.MS、ImgURL等）MDNWebDocs：<video>、<audio>在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，学生可观看“多媒体标签详解”“路径使用指南”等视频进行自主学习。在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交添加多媒体元素后的完整招新页面代码完成平台上关于路径使用的选择题练习预习“动静分离与图床”相关内容第4讲教案教学单元技能补强：各司其职（动静分离与图床资源优化）周次2时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解专业术语，了解企业级资源管理理念。培养性能优化意识。能力目标理解动静分离原则及其优势。能够理解图床服务的概念，并使用免费图床服务上传、管理图像。教学要求了解动静分离原则对提升网站性能的作用。了解图床服务的基本使用方法。教学重点：动静分离原则的理解。图床服务的基本使用。教学难点：理解图床、CDN等技术如何优化资源加载。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。

教学过程备注1.问题导入与原理讲解（15分钟）-问题引入（3分钟）：回顾“二号任务”中，所有图片都存放在本地项目文件夹的./img/目录下。引导学生思考：当一个网站访问量变大、图片越来越多、甚至需要部署到远程服务器时，这种本地存储方案会遇到什么瓶颈？-带宽消耗大：所有图片请求都占用应用服务器带宽。-存储空间有限：服务器磁盘空间有限，无法无限存储图片。-维护成本高：图片管理、备份、迁移困难。-加载速度慢：没有CDN加速，远距离用户访问延迟高。-动静分离原则（5分钟）：-定义：“动静分离是服务器架构中的重要优化技术，核心理念是将静态资源（图像、CSS文件、JavaScript文件等）与动态内容（服务器端脚本生成的页面内容、API响应等）分开处理。”-核心优势：-提高加载速度：静态资源可被缓存在CDN或浏览器中，减少重复下载操作，大幅提升加载速度。-为服务器减压：静态资源请求不占用服务器计算资源，使服务器能专注处理动态内容，减轻服务器整体负担。-增强安全性：分离处理模式能更好地保护网站，有效防止敏感信息泄露，可为图像设置访问权限，保障个人隐私安全。-CDN技术简介（3分钟）：-定义：CDN（ContentDeliveryNetwork，内容分发网络）通过全球分布的服务器节点缓存网站静态资源，使用户能从距离最近的节点获取内容。-作用：显著提升访问速度和用户体验。-与图床的关系：现代图床服务通常集成DNS和CDN技术，进一步优化图像加载速度和可靠性，是动静分离原则的实际应用。-图床服务（4分钟）：-定义：专门用于存储和管理图像的网络服务或平台，能高效管理和分发图像资源。-核心优势-分享图像：通过图床链接分享图像，无须考虑服务器带宽或存储限制。-节省资源：显著减轻原始服务器存储和传输图像的压力。-图像管理：提供专业工具帮助用户管理图像，包括创建相册、搜索图像、编辑图像等功能。-保护隐私：可设置图像访问权限，有效保护个人隐私。-企业级应用vs个人应用：-企业级：阿里云OSS、七牛云等，具备高性能、可扩展性、完善的安全保障机制。-个人应用：免费图床服务（如SM.MS、ImgURL等），使用灵活简便，适合临时存储和分享。 2.技能实践：使用图床优化图像资源（18分钟）-获取图床链接（5分钟）：-教师演示：选择一个免登录的免费图床服务（如SM.MS）。-操作步骤：①打开图床网站首页。②单击“上传”或“Browse”按钮，选择本地图像文件。③上传完成后，网站提供多种格式的链接（Markdown、BBcode、HTML等）。④复制“HTML”格式的链接或直接复制图片URL（以https://...开头）。-图1-3-1展示了使用AI助手生成图床操作指南的过程。-替换代码（8分钟）：-打开上节课完成的“志愿服务队招新页面”（demo02.html或club.html）。-找到<img>标签的src属性，原值为本地相对路径（如./img/img1.png）。-将src属性值替换为刚刚复制的图床链接。-示例代码：html<br><!--修改前--><br><imgsrc="./img/img1.png"alt="关于我们"width="300"height="200"><br><!--修改后--><br><imgsrc="/images/img1.png"alt="关于我们"width="300"height="200"><br>-注意：如果图床链接已经包含width/height或样式信息，可直接使用；否则保留原有的宽高属性。-效果验证（2分钟）：-使用LiveServer刷新页面，验证图片是否正常显示。-打开浏览器开发者工具的“网络”（Network）面板，刷新页面，观察图片请求的地址是否为图床URL。-强调：图片资源请求已从本地服务器转移至图床服务商，实现了“动静分离”。-AI助手辅助（3分钟）：-演示如何向AI助手提问获取更详细的操作指南。-提示词示例：“如何使用免费、免登录的图床服务上传图像并获取外部链接？请提供一个完整的HTML页面示例，其中包含一个图像展示区域，替换图像链接地址即可直接使用。”-如果发现生成的操作指南过于简略，可追加提问：“请提供更详细的上传步骤和代码说明。”-如果发现生成的操作指南过于简略，可以进一步追加请求‘请提供更详细的上传步骤和代码说明’以获取更全面的技术指导。 3.总结与拓展（7分钟）-本课总结（3分钟）：-回顾动静分离的核心思想：将静态资源（图片、CSS、JS）与动态内容分开处理，交给专门的服务器或服务（如图床、CDN）。-总结图床优化的价值：-对开发者：减轻应用服务器压力，简化资源管理。-对用户：享受CDN加速带来的更快访问速度。-强调这是一种从“能用”到“好用”的工程化思维，是专业Web开发的重要实践。-拓展延伸（4分钟）：-“从简易到专业”：免费图床适合初学者和临时需求；企业级项目应选择专业云存储服务（如阿里云OSS、七牛云、又拍云等），它们提供更高的稳定性和更完善的权限管理。-其他静态资源优化手段：-CSS/JS文件压缩合并。-使用雪碧图（Sprite）减少HTTP请求数。-字体文件的CDN加速。-思考题：“CDN如何通过地理分布节点提升内容传输速度？相比于服务器直接传输，CDN为何能有效减少资源加载时间？”课后作业：-尝试将志愿服务队招新页面中的所有图片资源都上传到图床，并用链接替换。-思考除了图片，页面中还有哪些资源可以使用CDN加速？教学资源列表与访问路径备注免费图床服务（如SM.MS、ImgURL等）阿里云OSS/又拍云等云存储服务介绍页面在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：将使用了图床链接的招新页面代码提交至平台。完成平台上的选择题练习预习模块2“HTML5扩展”的相关内容。第5讲教案教学单元零号任务：各就各位（确定HTML5文档类型和字符编码）周次3时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标能够独立完成技术文档的查阅及使用，熟记专业中、英文术语（如DOCTYPE、UTF-8、语义化）。培养编写符合Web标准、具有良好跨平台兼容性的代码意识。能力目标能够理解并正确书写HTML5文档类型声明（<!DOCTYPEhtml>）。能够理解并设置正确的字符编码（<metacharset="UTF-8">）。能够使用AI助手生成包含结构型语义化标签（<header>、<nav>、<main>等）的网页骨架。教学要求理解<!DOCTYPEhtml>的作用（触发标准模式，保证跨浏览器一致性）。理解UTF-8编码的意义（支持国际化，避免乱码）。了解HTML5新增的结构型语义化标签及其用途。教学重点：HTML5文档类型声明和字符编码的设置。结构型语义化标签（<header>、<nav>、<main>、<footer>、<aside>）的认识。教学难点：理解文档类型声明对浏览器渲染模式（标准模式vs.怪异模式）的影响。<article>与<section>标签适用场景的区别。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。

教学过程备注1.导入与讲解（10分钟）-复习引入（3分钟）：回顾模块1构建的“志愿服务队招新页面”，指出其结构主要依赖<div>，引出更语义化的页面结构。-文档类型声明（4分钟）：<!DOCTYPEhtml>——告知浏览器使用标准模式渲染页面，避免“怪异模式”导致的显示差异。-字符编码（3分钟）：<metacharset="UTF-8">——确保网页正确显示世界各种语言字符，避免乱码。2.知识点讲解与演示（15分钟）-结构型语义化标签（10分钟）：-<header>：定义文档或区域的头部，通常包含logo、标题、导航等。-<nav>：定义导航链接区域。-<main>：定义文档的主要内容，一个页面仅使用一次。-<article>：定义独立的、自包含的内容块，如论坛帖子、新闻文章。-<section>：定义文档中的一个主题性区域，通常包含一个标题。-<aside>：定义与主内容相关的侧边栏内容。-<footer>：定义文档或区域的底部，通常包含版权信息、联系方式等。-<article>与<section>的区别：<article>强调独立性（可被RSS订阅），<section>强调主题分组（是文档结构的一部分）。-AI助手生成骨架（5分钟）：提示词：“请帮我生成一个社团管理网页的基础HTML骨架，包含<nav>、<article>、<section>和<aside>这4种常用的结构型语义化标签”。3.边讲边做（10分钟）-创建club.html，输入“!”生成模板。-修改<htmllang="zh-CN">。-设置<title>为“社团管理”。-在<body>中依次添加<header>、<nav>、<main>、<aside>、<footer>标签。4.总结与预告（5分钟）-总结本课核心：正确的文档声明、字符编码和语义化骨架是专业Web开发的基石。-预告下节课将在此基础上填充更丰富的内容（<figure>、<mark>、<progress>）。课后作业：-使用AI助手生成一个包含<header>、<nav>、<main>、<aside>、<footer>的“个人博客”页面骨架。-思考：如果网页中没有<!DOCTYPEhtml>声明，可能会发生什么？教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：HTML5文档类型声明、字符编码在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交生成的“个人博客”页面骨架代码。完成平台上关于文档类型和字符编码的选择题练习。预习模块2“语义化标签”相关内容第6讲教案教学单元一号任务：各得其所（用语义化标签让网页内容易读、易维护）周次3时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标培养“让代码自解释”的良好编程习惯。理解语义化对网页可访问性（如屏幕阅读器）能力目标能够使用<figure>和<figcaption>标签为图像等元素添加语义化的标题/说明。-能够使用<mark>标签高亮显示页面中的关键文本。-能够使用<progress>标签显示任务完成进度。教学要求掌握<figure>/<figcaption>的使用场景（图像、图表、代码块等）。掌握<mark>标签的语义（与内容相关的突出显示）。掌握<progress>标签的value和max属性的使用。教学重点：<figure>与<figcaption>的组合使用。<progress>标签表示进度。教学难点：区分<mark>与<strong>/<em>的语义差异（<mark>表示引用标记，<strong>表示重要性，<em>表示强调）。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。

教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-展示上节课生成的社团管理网页骨架，提出问题：骨架有了，如何让里面的内容也更具语义？引出更细粒度的语义化标签。2.知识点讲解与演示（15分钟）-<figure>与<figcaption>（8分钟）：-<figure>：用于包裹独立的流内容（图像、图表、代码块等）。-<figcaption>：作为<figure>的第一个或最后一个子元素，为该内容提供标题或说明。-示例：<figure><imgsrc="team.jpg"alt="团队合影"><figcaption>图1：志愿服务队全体成员</figcaption></figure>-<mark>标签（7分钟）：-<mark>：用于高亮显示与用户当前上下文相关的文本（如搜索结果中的关键词）。-语义区分：<mark>表示“引用标记”；<strong>表示“重要性”；<em>表示“语气强调”。-示例：<p>我们的口号是：<mark>奉献、友爱、互助、进步</mark>。</p>3.边讲边做（20分钟）-在上一讲的club.html中的<main>区域内，添加一个社团活动照片的<figure>，并使用<figcaption>添加描述。-在社团介绍文字中，使用<mark>标签高亮显示核心口号或关键词。第二学时（40分钟）1.继续知识点讲解与演示（12分钟）-<progress>标签（8分钟）：-<progress>：用于表示任务的完成进度。-value属性：当前进度值。-max属性：最大值（默认为1）。-示例：<progressvalue="70"max="100">70%</progress>-综合案例演示（4分钟）：展示一个使用了以上所有标签的完整区域示例。2.边讲边做（18分钟）-在club.html的<aside>侧边栏区域，创建一个“最新志愿者活动”板块。-为每个活动添加一个<progress>标签，模拟显示志愿者招募进度。-调整页面样式（可简单使用CSS），使页面布局更合理。3.总结与展示（10分钟）-邀请学生展示完成后的页面，分享使用语义化标签的心得。-教师点评，强调语义化标签对SEO和可访问性的实际价值。-预告下节课内容（交互式语义化标签）。课后作业：-完善社团管理网页，在“社团章程”板块中使用<mark>标签标注出最重要的三条章程。-在“社团招新报名情况”板块中使用<progress>标签显示各部门的报名进度。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：<figure>、<mark>、<progress>在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交完善后的社团管理网页代码。完成平台上关于语义化标签的练习题。预习模块2“交互式语义化标签”相关内容第7讲教案教学单元二号任务：如鱼得水（使用交互式语义化标签让访问更自然）周次4时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标培养关注用户体验的工程思维。理解表单设计在用户信息收集中扮演的重要角色能力目标能够使用<details>和<summary>标签创建可展开/折叠的内容块。能够使用HTML5新增的表单输入类型（如email、tel、date）和属性（如required、placeholder、pattern）构建功能更丰富的表单。教学要求掌握<details>和<summary>的用法。掌握常用新增表单输入类型（email、tel、number、date等）和属性（autofocus、required、placeholder、pattern）。教学重点：<details>和<summary>标签的使用。HTML5新增表单输入类型和属性的应用。教学难点：理解pattern属性中正则表达式的基本写法。表单验证的前端实现逻辑（浏览器内置验证）。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。

教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-展示当前社团管理网页，提问：如何让页面能“收起/展开”某些不重要的补充信息？如何让用户更方便地提交报名信息？引出交互式标签和现代表单。2.知识点讲解与演示（15分钟）-<details>和<summary>标签（10分钟）：-<details>：创建一个可展开/折叠的内容容器。-<summary>：为<details>提供可见的标题，用户单击它可切换展开/折叠状态。-示例：<details><summary>查看更多</summary><p>这里是隐藏的详细内容...</p></details>-新增表单输入类型（5分钟）：-email：邮箱格式验证。-tel：电话号码输入。-url：网址格式验证。-number：数字输入，带增减按钮。-date：日期选择器。-color：颜色选择器。-range：滑动条。-search：搜索框。3.边讲边做（20分钟）-在社团管理网页的社团介绍区域下方，添加一个<details>块，用<summary>显示“查看更多社团历史”。-在展开的内容中，写一段社团的发展历程文字。第二学时（40分钟）1.继续知识点讲解与演示（15分钟）-新增表单输入属性（10分钟）：-autofocus：页面加载时自动获得焦点。-required：必填字段，提交时会验证。-placeholder：占位提示文本。-pattern：使用正则表达式定义输入格式。-multiple：允许选择多个文件（与file类型配合）。-min/max：限制数值或日期的最小值/最大值。-step：指定数值的增减步长。-表单综合示例（5分钟）：展示一个包含了多种新类型和新属性的“志愿者报名表”代码片段。2.边讲边做（15分钟）-在<aside>侧边栏区域，将原有的简单报名入口改造成一个完整的“志愿者信息收集表”。-要求包含：志愿者号（autofocus）、电子邮箱（required）、电话号码（pattern验证简单格式）、服务日期（date）、个人资料上传（file+multiple）、提交按钮。-体验浏览器内置的表单验证功能（如邮箱格式错误、必填项为空时的提示）。3.总结与优化（10分钟）-AI辅助美化（5分钟）：演示如何向AI助手提问“为下面的HTML表单生成配套的CSS代码，使其美观大方”，并将生成的CSS应用到页面中。-总结（3分钟）：回顾交互式标签和现代表单对提升用户体验的价值。-预告（2分钟）：下节课将进入模块3“CSS基础”。课后作业：-为社团管理网页增加一个“入社申请表”，使用不少于5种HTML5新增的输入类型或属性。-尝试使用pattern属性为手机号码编写一个更严格的正则表达式。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：<details>、表单高级主题正则表达式在线测试工具在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交包含完善后表单的社团管理网页代码。完成平台上关于HTML5表单的练习题。预习模块2“可见性原则”相关内容。第8讲教案教学单元技能补强：一目了然（可见性原则）周次4时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标培养“以用户为中心”的设计思维。理解好的设计是“隐形”的，即用户无需思考就能明白如何使用。能力目标理解可见性原则的核心内涵：系统状态可见、操作反馈可见。能够识别和分析网页中符合/违反可见性原则的设计。能够通过CSS为表单输入框添加简单的视觉反馈（如边框变色），提升可见性。教学要求理解可见性原则的四项基本要求。能够结合实际案例（如电商购物车、即时通讯软件）分析可见性原则的应用。教学重点：可见性原则的核心思想：让用户知道当前发生了什么。通过视觉反馈（颜色、动画等）提升界面可见性。教学难点：将抽象的设计原则转化为具体的代码实现。培养主动审视和优化界面交互反馈的意识。 实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。

教学过程备注1.原理讲解与案例分析（18分钟）-什么是可见性原则？（5分钟）：-定义：系统的状态应清晰可见，并在合理时间内给予用户适当的反馈。-四项要求：①让用户知道系统在做什么；②让用户知道自己处于什么位置；③让用户知道系统做了什么；④让用户知道自己在做什么。-生活中的可见性（3分钟）：电梯楼层指示灯、手机电量提示、交通信号灯。-网页中的优秀实践分析（10分钟）：-分析本模块开发的社团管理网页：导航栏高亮当前页、<progress>进度条可视化了招募进度。-淘宝购物车：添加商品时，购物车图标数字变化+动画反馈。-微信消息：显示“发送中”→“已发送”，失败显示红色叹号。-QQ文件传输：显示上传进度条。2.实践优化：为表单添加即时反馈（15分钟）-问题发现（3分钟）：回顾上节课制作的“志愿者信息收集表”，用户输入错误时缺乏明确的视觉反馈。-CSS伪类（5分钟）：-:invalid伪类：匹配输入内容不符合验证规则的输入框。-:valid伪类：匹配输入内容符合验证规则的输入框。-AI辅助方案（2分钟）：提问“为以下HTML表单的输入框添加CSS样式，当输入框内容无效（:invalid）时显示红色边框，有效（:valid）时显示绿色边框”。-动手实践（5分钟）：学生参照AI生成的CSS代码，为表单添加样式。体验:invalid和:valid伪类的效果。3.总结与思考（7分钟）-对比展示（3分钟）：对比修改前后的表单样式，让学生直观感受可见性原则的优化效果。-总结（2分钟）：强调可见性原则是提升用户体验的“地基”，开发者在编码时就应主动思考交互反馈。-思考题（2分钟）：在文件上传功能中，如何运用可见性原则？（提示：上传进度条、成功/失败提示）课后作业：-观察你常用的3个APP或网站，找出至少一处运用可见性原则的设计，并截图说明。-为社团管理网页的提交按钮增加一个单击后的反馈效果（如显示“提交中...”的文字变化，或按钮变为灰色不可用状态）。教学资源列表与访问路径备注智慧树HTML5课程对应章节书本中提到的电商、社交软件案例网站MDNWebDocs：:valid和:invalid伪类在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交优化后的社团管理网页代码（包含表单验证样式）。提交课后作业中关于可见性原则的案例分析报告（图文）。完成平台上关于可见性原则基础选择题预习模块3“CSS基础”相关内容。第9讲教案教学单元零号任务：一叶知秋（从开发者工具认识样式）周次5时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标能够独立完成技术文档的查阅及使用，熟记专业中、英文术语（CSS、选择器、盒模型、DOM树等）。培养利用开发者工具进行调试和学习的习惯。能力目标掌握CSS的基础概念，理解CSS选择器的分类与应用。掌握元素选择器、类选择器和id选择器的使用方法。学习开发者工具的简单使用，能够通过“元素”面板查看和修改样式。教学要求理解CSS的定义、基本语法（选择器+声明块）。掌握元素选择器、类选择器、id选择器的写法。能够使用开发者工具的“元素”面板查看和临时修改样式。教学重点：CSS选择器（元素、类、id选择器）。开发者工具“元素”面板的使用。教学难点：理解CSS的层叠规则和优先级计算。区分HTMLCollection和NodeList。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。

教学过程备注1.导入与讲解（8分钟）-复习引入（2分钟）：回顾模块1-2完成的“志愿服务队招新页面”，指出页面只有HTML结构，缺乏美观的样式，引出CSS的作用。-CSS的定义（3分钟）：-CSS（CascadingStyleSheets，串联样式表）是一种用于描述HTML或XML文档呈现方式的样式表语言。-书稿比喻：HTML是房子的框架，CSS是装饰和布置房子，决定墙壁颜色、窗户大小、家具摆放位置等。-CSS的基本语法（3分钟）：-规则由选择器和声明块组成：选择器{属性:值;属性:值;}-示例：p{color:blue;font-size:16px;}-选择器用于指定要设置样式的HTML元素；声明块用花括号“{}”包围，每个声明是“属性:值”对，用分号“;”结束。2.知识点讲解与演示（17分钟）-CSS选择器（12分钟）：-元素选择器：直接使用HTML标签名。示例：p{color:blue;}，选择所有<p>段落元素。-类选择器：使用点号“.”作为前缀。示例：.highlight{border:2pxsolidred;}，选择所有class="highlight"的元素。-id选择器：使用井号“#”作为前缀。示例：#mainTitle{color:green;}，选择id="mainTitle"的单个元素。-属性选择器：根据元素的属性或属性值选择。示例：[title]{color:red;}（有title属性）、[class="example"]{background-color:yellow;}（class值等于example）。-伪类选择器：定义元素的特殊状态。示例：:hover（鼠标悬停）。-通用选择器：写为“*”，匹配页面中所有元素。常用于全局样式重置。-CSS层叠规则和优先级（5分钟）：-优先级顺序（权重值）：-内联样式表：1000-id选择器：100-类选择器、属性选择器、伪类选择器：10-元素选择器：1-通用选择器：0-权重值相等时，后定义的样式优先级高。-!important声明的优先级最高。3.边讲边做（10分钟）-打开模块1完成的demo02.html（志愿服务队招新页面）。-在<head>中添加<style>标签，编写样式。-练习使用元素选择器设置<p>颜色为蓝色。-练习使用类选择器为某些文本添加.highlight-text类，设置颜色为红色。-练习使用id选择器为某个元素（如页脚）设置独特样式。-开发者工具体验：右击页面元素选择“检查”，在“元素”面板的“样式”子面板中查看和临时修改样式。-观察DOM树结构。4.总结与预告（5分钟）-总结CSS的基本语法和三种基础选择器的写法与优先级。-强调开发者工具是前端开发的“神器”，要熟练使用。-预告下节课将学习CSS变量实现统一色彩管理。课后作业：-为“志愿服务队招新页面”的<h1>设置红色（使用元素选择器），为某个段落设置黄色背景（使用类选择器）。-使用开发者工具检查本节课写的样式，尝试临时修改并观察效果。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：CSS选择器在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交添加了基础样式的“志愿服务队招新页面”代码。 第10讲教案教学单元一号任务：万紫千红（用CSS统一色彩管理）周次5时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解一致性设计原则在网页中的重要性。培养模块化、可维护的CSS代码编写习惯。能力目标理解CSS变量的定义与使用，掌握通过:root定义全局变量。实现页面色彩的统一管理，确保样式的复用性和一致性。掌握文字排版、hover效果和透明度的应用。教学要求掌握CSS变量的语法：--变量名:值;和var(--变量名)。掌握:root伪类的含义（代表文档的根元素<html>）。掌握opacity属性、rgba和hsla颜色值的用法与区别。了解BEM命名规范的基本概念。教学重点：CSS变量的定义与使用。通过:root定义全局颜色变量。文字排版属性的综合应用。rgba透明度颜色的使用。教学难点：理解CSS变量的作用域（全局变量在:root中定义）。区分opacity属性与rgba颜色值的不同作用范围（元素整体透明vs颜色透明）。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。

教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-展示上节课完成的基础样式页面，提问：如果要将网站的主题色从蓝色改为绿色，需要修改多少处？引出CSS变量的价值。-简述本节课目标：实现页面的统一色彩管理。2.知识点讲解与演示（20分钟）-CSS变量（自定义属性）（8分钟）：-定义语法：--变量名:值;（注意以两个短横线开头）。-使用语法：var(--变量名)。-作用域规则：在哪个选择器中定义，就只在那个选择器及其后代元素中生效。-书稿例3-1-1：:root{--primary-font-size:16px;--secondary-color:#F39C12;}，p{font-size:var(--primary-font-size);color:var(--secondary-color);}-使用:root定义全局变量（5分钟）：-:root是一个伪类，代表文档的根元素，在HTML中就是<html>元素。-在:root中定义的CSS变量可以被整个文档中的任何元素访问。-示例：:root{--primary:#2E86C1;--text:#333333;--background:#FFFFFF;}-文字排版相关属性（7分钟）：-font-family：设置字体族。示例：font-family:'Arial',sans-serif;（优先使用Arial，若无则使用系统默认无衬线字体）-font-size：字体大小。示例：font-size:16px;、font-size:1rem;-font-weight：字体粗细。示例：font-weight:normal;、font-weight:bold;、font-weight:600;-line-height：行高。示例：line-height:1.6;（无单位时表示字体大小的倍数）-text-align：文本对齐。示例：text-align:left;、center;、right;-text-decoration：文本装饰。示例：text-decoration:none;（去除下划线）、underline;-表3-1-1归纳了文字排版相关属性。3.边讲边做（15分钟）-打开上节课的demo02.html（或模块3零号任务完成的页面）。-在<style>标签中的:root处定义颜色变量：--primary（主题蓝#2E86C1）、--text（文字灰#333333）。-将页面中零散的颜色值（如#2E86C1、#333333）替换为var(--primary)和var(--text)。-为body设置全局文字排版样式：font-family:Arial,sans-serif;line-height:1.6;-为标题h1、h2、h3设置统一的颜色和字重。第二学时（40分钟）1.继续知识点讲解与演示（15分钟）-hover效果（5分钟）：-:hover伪类：定义鼠标指针悬停在元素上时的样式。-例1-3：a:hover{color:#FF0000;text-decoration:none;}（鼠标悬停时链接文字变红，下划线消失）-可应用于任何元素，不限于链接。-透明度及其应用（10分钟）：-opacity属性：设置整个元素的透明度，取值范围0（完全透明）~1（完全不透明）。适用于让整个元素（包括其所有子元素）变透明。-rgba颜色值：rgba(red,green,blue,alpha)，仅设置颜色的透明度，不影响元素其他部分。示例：background-color:rgba(0,0,0,0.5);（半透明黑色背景）-hsla颜色值：hsla(hue,saturation,lightness,alpha)，色调0~360，饱和度0%~100%，亮度0%~100%，透明度0~1。-适用场景区分：opacity适用于整体半透明效果（如图层遮罩）；rgba适用于背景色半透明而内部文字保持完全不透明。-书稿表3-1-2（rgba参数）、表3-1-3（hsla参数）。-颜色搭配和设计（简要提及）：图3-1-2展示了颜色搭配知识导图。-CSS命名规范（简要提及）：BEM命名法（Block-Element-Modifier），如.button__text、.button--big。2.边讲边做（15分钟）-为页面中的超链接<a>添加hover效果：鼠标悬停时改变颜色并添加下划线。-为某个按钮或卡片区域添加rgba背景色半透明效果（背景半透明，文字不透明）。-使用opacity为图像添加鼠标悬停时的淡入淡出效果：img:hover{opacity:0.8;transition:opacity0.3s;}-将定义好的全局变量应用到更多元素上，如hr的分割线颜色、.highlight-text的高亮颜色等。3.总结与展示（10分钟）-邀请学生展示完成的效果，对比使用CSS变量前后修改主题色的便利性。-总结本课核心：-CSS变量实现统一色彩管理，提高代码可维护性。-文字排版属性构建良好的阅读体验。-透明度丰富视觉层次。-预告下节课将学习盒模型和页面布局。课后作业：-为一号任务完成的页面添加深色/浅色两套颜色变量，通过注释切换观察效果。-为页面的某个区域添加半透明背景（使用rgba），文字保持完全不透明。-尝试为页面中的按钮添加悬停时的放大效果（使用transform:scale()）。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：CSS变量、rgba()在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交使用CSS变量统一管理颜色的页面代码。完成平台上CSS变量相关选择题练习预习模块3“CSS盒模型”相关内容第11讲教案教学单元二号任务：井井有条（页面布局与视觉层次设计）周次6时数2授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解CSS盒模型在页面布局中的核心地位。培养设计视觉层次（背景层、容器层、内容层）的意识。能力目标理解CSS盒模型的概念，掌握标准盒模型与替代盒模型的区别。掌握块级元素、内联元素和内联块元素的特性与应用场景。通过Flexbox布局实现图像网格并调整内容元素的间距。教学要求掌握盒模型的组成：content、padding、border、margin。理解box-sizing:border-box;的作用并能熟练应用。了解块级、内联、内联块元素的区别。掌握Flexbox布局的基本使用（display:flex、gap、justify-content等）。掌握px、rem、em、%等单位的适用场景。教学重点：CSS盒模型的四部分构成。标准盒模型与替代盒模型的计算区别。Flexbox布局的基本使用。页面视觉层次的设计（背景层、容器层、内容层）。教学难点：理解box-sizing:border-box;如何改变宽高的计算方式。理解不同元素类型（块级/内联/内联块）的行为差异及转换方式。外边距合并（margincollapsing）的理解。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。

教学过程备注第一学时（40分钟）1.导入与复习（5分钟）-展示上节课完成样式但布局拥挤、缺乏层次感的页面。-提问：如何控制元素之间的间距、边框、背景区域？如何让页面看起来更有层次感？引出CSS盒模型。2.知识点讲解与演示（20分钟）-CSS盒模型（12分钟）：-盒模型概念：将每个HTML元素想象成一个矩形盒子。-四部分构成（从内到外）：-content（内容区域）：显示元素的实际内容（文本、图像等）。可通过width和height设置大小。-padding（内边距）：内容区域与边框之间的透明区域，会继承父元素的背景色。可单独设置上右下左四个方向：padding-top、padding-right、padding-bottom、padding-left。-border（边框）：围绕内边距和内容的线条。可设置宽度、样式、颜色：border-width、border-style、border-color。支持圆角border-radius。-margin（外边距）：元素与相邻元素之间的空白区域。用于控制元素间的距离。可单独设置上右下左四个方向。可能发生外边距合并。-图3-2-2（盒模型z轴示意）、图3-2-3（盒模型平面示意）。-两种盒模型：-标准盒模型（box-sizing:content-box）：实际宽度=width+padding-left+padding-right+border-left+border-right-替代盒模型（box-sizing:border-box）：实际宽度=width（已包含padding和border）-统一重置：*{box-sizing:border-box;}-元素类型（8分钟）：-块级元素：独占一行，占据父容器完整宽度，可设置宽高。常见：<div>、<p>、<h1>~<h6>、<section>、<article>、<nav>、<header>、<footer>。-内联元素：随文本流动，不强制换行，宽高由内容决定，不可显式设置宽高。常见：<span>、<a>、<strong>、<em>、<i>、<b>、<br>。-内联块元素：内联排列（不换行）但可设置宽高。常见：<img>、<button>，或通过display:inline-block实现。-表3-2-1对比三类元素的特性。3.边讲边做（15分钟）-打开上节课完成的页面（或模块3一号任务完成的页面）。-在全局样式中添加*{box-sizing:border-box;}进行盒模型重置。-为主容器.main-content设置max-width:1200px;margin:40pxauto;padding:40px;实现居中容器。-为<section>区块添加padding:20px;margin:40px0;border-radius:8px;box-shadow:04px12pxvar(--shadow);第二学时（40分钟）1.继续知识点讲解与演示（12分钟）-display属性（5分钟）：-block：显示为块级元素。-inline：显示为内联元素。-inline-block：显示为内联块元素。-none：隐藏元素（不占空间）。-flex：弹性布局。-grid：网格布局。-表3-2-2详细说明display属性值。-单位的使用（7分钟）：-绝对单位：px（像素）。固定尺寸，不依赖外部环境。-相对单位：-em：相对于父元素的字体大小。-rem：相对于根元素（<html>）的字体大小。-%：相对于父元素的某一属性（如宽度）。-vw/vh：相对于视口的宽度/高度（1vw=视口宽度的1%）。-表3-2-3归纳常见相对单位的特点与应用场景。-Flexbox布局（在演示中讲解）：-display:flex;将容器设为Flex容器。-gap属性设置子项之间的间距。-justify-content控制主轴对齐方式（center、space-between等）。2.边讲边做（18分钟）-使用Flexbox实现图像网格布局：.gallery{display:flex;gap:20px;justify-content:center;}-为标题h1、h2、h3设置margin-bottom:1rem;统一底部间距。-为列表项<li>设置padding:8px0;增加上下间距。-设置页脚全宽样式：.footer{background-color:var(--footer-bg);padding:20px0;text-align:center;}-添加圆角边框和阴影效果，增强视觉层次（背景层、容器层、内容层）。3.总结与展示（10分钟）-展示学生完成的效果页面（参考图3-2-4）。-总结本课核心：-盒模型是布局的基础，理解content、padding、border、margin。-box-sizing:border-box让布局更可控。-Flexbox简化一维布局。-视觉层次（三层结构）增强页面质感。-预告下节技能补强将学习CSS主题切换。课后作业：-为志愿服务队招新页面中的“常规活动”列表添加自定义项目符号（使用::before伪元素）。-尝试使用Flexbox的justify-content:space-between将图像网格中的图片两端对齐。-使用rem单位重新设置整个页面的字体大小体系。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：盒模型、Flexbox在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交完成了布局优化和视觉层次设计的页面代码。完成平台上CSS盒模型相关选择题练习预习模块3“CSS主题切换相关内容第12讲教案教学单元技能补强：游刃有余（CSS主题切换）周次6时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标理解用户体验的个性化需求（如夜间模式缓解视觉疲劳）。培养利用CSS变量实现可维护、可扩展的代码设计思维。能力目标掌握通过CSS变量实现主题切换的原理。通过DOM操作动态更改CSS变量值，实现用户交互式的主题切换。确保主题切换的视觉一致性和交互连贯性。教学要求理解在:root中定义颜色变量的意义。掌握document.documentElement.style.setProperty()方法动态修改变量。能够使用AI助手辅助生成主题切换的交互代码。教学重点：CSS变量在主题切换中的核心作用。通过JavaScript动态修改CSS变量。教学难点：理解JavaScript如何与CSS变量协同工作。主题切换时确保过渡平滑（使用transition）。维护主题切换后的状态一致性。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。

教学过程备注1.原理讲解（10分钟）-主题切换的价值（3分钟）：-夜间模式：缓解用户在弱光环境下的视觉疲劳。-自定义主题色：满足用户个性化需求。-提升用户体验和产品专业度。-CSS变量在主题切换中的优势（4分钟）：-集中管理颜色、字体等关键样式属性。-一改全改，无需逐条修改CSS规则。-代码可维护性高，便于扩展更多主题。-为后续扩展主题选项预留便利的接口。-实现原理（3分钟）：-第一步：在:root中定义主题相关的CSS变量（如--primary、--background、--text、--container-bg）。-第二步：页面中所有颜色相关样式都引用这些变量。-第三步：通过JavaScript动态修改:root上的变量值，页面中所有引用该变量的地方自动更新。2.动手实践：控制台测试（12分钟）-操作1：切换主题色（4分钟）：-打开上节课完成的页面（模块3二号任务完成的页面），按F12打开开发者工具控制台。-输入命令：document.documentElement.style.setProperty('--primary','#FF1493');-观察页面主题色（如标题、按钮、分割线等）是否变为深粉色。-操作2：切换夜间模式（5分钟）：-输入以下命令：document.documentElement.style.setProperty('--background','#121212');document.documentElement.style.setProperty('--text','#DDDDDD');document.documentElement.style.setProperty('--container-bg','#1E1E1E');document.documentElement.style.setProperty('--footer-bg','#0A0A0A');-观察页面是否变为暗色主题。-原理总结（3分钟）：-document.documentElement获取根元素<html>。-style.setProperty(属性名,属性值)方法用于设置CSS变量。-变量值改变后，浏览器自动重绘引用了该变量的所有元素。3.集成页面交互功能（13分钟）-需求说明（3分钟）：-在页面顶部添加一个下拉列表框（选择主题色：蓝色、粉色、绿色、黄色）。-添加一个“深夜模式”按钮：单击切换深夜模式/正常模式。-要求下拉列表框和按钮的风格与页面保持一致。-所有主题切换需平滑过渡。-AI辅助生成代码（5分钟）：-演示向AI助手提问：“在已有代码的基础上，如何通过DOM操作仅更改CSS变量值，实现用户在选择不同主题颜色或单击‘深夜模式’按钮后自动更改页面主色调？需要在页面顶部添加header部分并在其最右侧实现下拉列表框和一个‘深夜模式’按钮。默认主题颜色为蓝色（#2E86C1），可切换为粉色、绿色、黄色等。单击‘深夜模式’按钮后页面进入暗色主题，再次单击后切回正常模式。要求下拉列表框和按钮的风格与页面保持一致，所有主题切换需平滑过渡。”-整合与测试（5分钟）：-学生将AI生成的HTML/CSS/JS代码整合到自己的页面中。-测试下拉框切换主题色功能。-测试“深夜模式”按钮切换功能。-观察颜色变化是否有平滑过渡效果（如没有，可添加transition）。4.总结（5分钟）-回顾CSS变量实现主题切换的核心流程：定义变量→引用变量→JS修改变量。-强调一致性设计原则在Web开发中的重要性。-展示实现主题切换功能后的效果。-布置课后作业。课后作业：-为主题切换添加transition效果，使颜色变化时平滑过渡（提示：为会变色的元素添加transition:all0.3sease;）。-尝试增加第三种主题（如“护眼绿”），并在下拉框中添加对应选项。-实现“深夜模式”按钮的状态记忆功能（如使用localStorage存储用户选择，下次访问时自动应用）。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：setProperty()、CSS变量在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交实现了主题切换功能的完整页面代码。提交课后作业中关于主题切换过渡效果的实现思路说明。预习模块4“CSS定位技巧”相关内容第13讲教案教学单元零号任务：精确定位（掌控布局之CSS定位技巧）周次7时数1授课班级AIGC与HTML5开发-0001教学目的及要求：素质目标能够独立完成技术文档的查阅及使用，熟记专业中、英文术语（定位、偏移、层叠上下文等）。培养解决复杂页面布局问题的逻辑思维。能力目标掌握CSS定位的多种方式（static、relative、absolute、fixed、sticky）。理解每种定位方式的应用场景和原理。掌握通过z-index控制元素层级。教学要求理解定位的概念及定位元素脱离文档流的特性。掌握相对定位、绝对定位、固定定位、粘性定位的用法和区别。掌握z-index的使用条件（仅对定位元素有效）。教学重点：相对定位（relative）与绝对定位（absolute）的组合使用。固定定位（fixed）实现导航栏置顶。z-index控制层叠顺序。教学难点：理解绝对定位的参考系（最近的非static定位祖先元素）。理解粘性定位（sticky）的“相对定位→固定定位”切换机制。实验仪器及教具：PC机、Windows操作系统、VSCode、谷歌/Edge浏览器。

教学过程备注1.导入与讲解（8分钟）-复习引入（2分钟）：回顾模块3学习的盒模型和Flexbox布局，指出这些布局方式在普通文档流中工作，引出“脱离文档流”的定位技术。-定位的概念（3分钟）：定位实现对元素的精准控制，通过position属性指定定位方式，结合top、right、bottom、left偏移属性调整位置。表4-0-1概述了5种定位方式。-本任务目标（3分钟）：在模块2创建的社团管理网页基础上，使用固定定位固定头部导航栏，并使用z-index确保导航栏不被其他内容遮挡。2.知识点讲解与演示（17分钟）-静态定位（static）（2分钟）：默认定位方式，元素遵循正常文档流，top、right、bottom、left属性无效。-相对定位（relative）（3分钟）：元素在原有位置基础上偏移，但仍占据原有位置空间（不脱离文档流）。图4-0-2。示例：position:relative;top:30px;left:50px;-绝对定位（absolute）（4分钟）：元素脱离文档流，相对于最近的已定位（非static）祖先元素定位。如果没有，则相对于<html>（初始包含块）。图4-0-3。示例：父元素position:relative;，子元素position:absolute;bottom:30px;right:50px;-固定定位（fixed）（3分钟）：元素脱离文档流，相对于浏览器窗口定位，页面滚动时位置不变。适用于固定导航栏、返回顶部按钮等。-粘性定位（sticky）（3分钟）：元素在滚动到特定位置前表现为相对定位（占据原空间），滚动到阈值时表现为固定定位。图4-0-4。示例：position:sticky;top:0;-z-index与层叠上下文（2分钟）：z-index属性控制定位元素的层叠顺序，数值越大越靠上（前）显示。仅对定位元素（position值非static）有效。图4-0-6展示了重叠效果。3.边讲边做（10分钟）-打开模块2完成的社团管理网页club.html。-为<header>添加固定定位样式：position:fixed;top:0;left:0;width:100%;z-index:1000;-为<main>内容区域添加margin-top（值为<header>的高度），防止内容被固定导航栏遮挡。-使用AI助手辅助完成代码（参照图4-0-7）。-测试滚动页面，观察导航栏是否始终固定在顶部（图4-0-8）。4.总结与预告（5分钟）-总结五种定位方式的特性和适用场景。-强调绝对定位“子绝父相”的经典组合。-预告下节课将学习浮动布局。课后作业：-为社团管理网页添加一个“返回顶部”按钮，使用固定定位固定在页面右下角。-尝试使用相对定位为某个图标添加微调偏移（如垂直居中微调）。教学资源列表与访问路径备注智慧树HTML5课程对应章节MDNWebDocs：position在线教学过程（学生自主学习指引）在线教学资源有明确的步骤操作“指导书”以及“微课视频”，可以满足指引学生在线自主学习的需求。在线辅导与答疑安排依托“智慧树”平台资源展示页面的“问答”、“评价”等交互功能，及班级微信群进行在线答疑。线上作业：提交实现了固定导航栏的社团管理网页代码。完成平台上CSS定位相关选择题练习预习模块4“浮动布局”相关内容 第14讲教案教学单元一号任务：浮动不止（探索CSS的浮动魔法）周次7时数2授课班级AIGC与HTML5开发-0001教学目的及要求

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论