简单交互式展示页 - 临界态AI教育实战课

课程 3：简单交互式展示页资源下载

进阶 30分钟 ★★

适合人群：已完成课程0、1和2,对Alma有一定了解的学员

课前准备

打开自己的 AI课程文件夹，在里面新建一个文件夹，名称为本课编号（如 lesson-3）
在 Alma 里面新建一个聊天，设置该项目的文件夹指向新建的文件夹
确保已安装 MiniMax 图片生成技能（my-minimax-image-gen），本课将使用该技能生成封面背景图

课程目标

掌握使用AI生成HTML/CSS/JS代码的提示词技巧
学会描述PPT转场效果和UI设计风格
制作15页主题内容的教学展示页
使用MiniMax技能生成封面背景图
实现全屏投屏功能，便于课堂展示

本课主题：中国传统文化中的科学思想

我们要制作一个15页的PPT风格HTML教学展示页，内容涵盖：

篇章	内容
天文学篇	历法系统、观测仪器、星象记录
数学篇	圆周率、勾股定理、九章算术
农学篇	农时指导、农业技术、农学著作
医学篇	中医理论、本草纲目、望闻问切
工艺技术篇	四大发明、冶金技术、建筑技术

统一五步流程

按照README中说明的教学理念，本课遵循以下统一流程：

明确目标：想清楚要做什么
设计输出格式：确定HTML结构和功能需求
提出需求：用自然语言向Alma提出需求（给出基础提示词和详细提示词）
应对问题：预判可能出现的情况，准备相应的提示词
验证结果：检查输出是否符合预期

第一步：明确目标

任务描述

制作一个15页的PPT风格HTML教学展示页，主题是"中国传统文化中的科学思想"，用于课堂投屏展示。

功能需求

PPT转场效果：左右箭头切换页面，支持流畅的淡入淡出或滑动效果
中国风UI设计：水墨风格配色（黑白灰、朱红、青绿），优雅的字体
全屏投屏：支持F11或按钮切换全屏模式
封面背景图：封面页配备主题背景图
响应式布局：适配不同屏幕尺寸
本地服务器/上传：可以本地打开或部署到服务器

15页内容规划

页码	标题	核心内容
1	封面页	课程标题、副标题
2	目录页	五大领域导航
3	天文学·历法	农历、二十四节气
4	天文学·仪器	浑天仪、星象记录
5	数学·成就	圆周率、勾股定理
6	数学·著作	九章算术、祖冲之
7	农学·农时	二十四节气与农事
8	农学·著作	齐民要术、农政全书
9	医学·理论	阴阳五行、经络
10	医学·本草	本草纲目、药物
11	工艺·四大发明	指南针、火药、造纸、印刷
12	工艺·建筑	斗拱、榫卯
13	对比·发展路径	中西科学发展对比
14	对比·思想差异	天人合一vs实证主义
15	总结页	总结、思考题

第二步：设计输出格式

文件结构

lesson-3/
├── index.html          # 主HTML文件（内嵌CSS和JS）
└── images/             # 图片文件夹
    └── 01-cover.png    # 封面背景图

HTML结构要求

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>中国传统文化中的科学思想</title>
  <style>
    /* CSS样式在这里 */
  </style>
</head>
<body>
  <div class="slides-container">
    <section class="slide" data-page="1">
      <!-- 第1页内容 -->
    </section>
    <section class="slide" data-page="2">
      <!-- 第2页内容 -->
    </section>
    <!-- ... 共15页 -->
  </div>

  <div class="controls">
    <button id="prevBtn">上一页</button>
    <span id="pageNumber">1 / 15</span>
    <button id="nextBtn">下一页</button>
    <button id="fullscreenBtn">全屏</button>
  </div>

  <script>
    // JavaScript代码在这里
  </script>
</body>
</html>

UI设计风格

元素	设计要求
配色方案	中国风：水墨黑(#333)、朱红(#C04851)、青绿(#4A7C59)、米白(#F5F5F0)
字体	标题使用宋体/楷体，正文使用微软雅黑
背景	浅色纸张纹理或水墨渐变
边框	细线边框或水墨晕染效果
按钮风格	扁平化设计，使用文字按钮，悬停时加深颜色

第三步：提出需求

3.1 基础提示词（5页快速验证）

说明：这是简化版提示词，只要求生成5页，用于快速验证功能和效果。确认无误后，再使用详细提示词生成完整的15页。

请帮我创建一个简单的PPT风格HTML页面，包含：
1. 5个section，每个代表一页
2. 可以用左右箭头切换页面
3. 简单的淡入淡出转场效果
4. 显示当前页码
5. 全屏按钮

5页内容：
- 第1页：封面页 - 大标题：中国传统文化中的科学思想
- 第2页：目录页 - 五大领域导航列表
- 第3页：内容页 - 天文学：历法系统、观测仪器、星象记录
- 第4页：内容页 - 数学：圆周率、勾股定理、九章算术
- 第5页：总结页 - 总结和思考题

UI要求：
- 简单的中国风配色（黑白灰、朱红）
- 图片使用占位符：images/01.png、images/02.png等
- 图片和文字左右布局

输出：完整的HTML文件代码，包含所有HTML、CSS、JavaScript代码和中文注释

3.2 详细提示词（15页完整版）

角色：你是前端开发专家，擅长制作PPT风格的网页展示页

任务：创建一个15页的PPT风格HTML教学展示页

主题：中国传统文化中的科学思想

具体要求：

一、HTML结构（15页）

第1页 - 封面页
- 大标题：中国传统文化中的科学思想
- 副标题：从天文、数学、农学、医学到工艺技术
- 背景：水墨山水风格渐变背景
- 装饰元素：简单的水墨笔触线条

第2页 - 目录页
- 标题：课程目录
- 内容：五大领域导航
  * 天文学篇：历法、仪器、星象
  * 数学篇：圆周率、勾股定理、九章算术
  * 农学篇：农时、技术、著作
  * 医学篇：理论、本草、诊断
  * 工艺技术篇：四大发明、建筑
- 布局：左侧图片，右侧文字列表

第3页 - 天文学·历法
- 标题：天文学篇 - 历法系统
- 内容：
  * 农历：阴阳合历，反映月相变化
  * 二十四节气：指导农业生产的时间节点
  * 历法的精确性：古代历法的科学成就
- 图片位置：右侧放置二十四节气图

第4页 - 天文学·仪器
- 标题：天文学篇 - 观测仪器
- 内容：
  * 浑天仪：古代天文观测的核心仪器
  * 星象记录：超新星、日食的详细记载
  * 观测精度：古代天文学的世界领先地位
- 图片位置：中心放置浑天仪图片

第5页 - 数学·成就
- 标题：数学篇 - 古代数学成就
- 内容：
  * 圆周率：祖冲之精确到小数点后7位
  * 勾股定理：勾三股四弦五
  * 计算工具：算盘的使用
- 图片位置：几何图形示意

第6页 - 数学·著作
- 标题：数学篇 - 数学著作
- 内容：
  * 九章算术：古代数学的集大成者
  * 海岛算经、孙子算经
  * 数学思想的传承与发展
- 图片位置：古籍插图

第7页 - 农学·农时
- 标题：农学篇 - 农时与农业
- 内容：
  * 二十四节气与农事的对应关系
  * 水利灌溉技术：都江堰等
  * 农具改良：曲辕犁、水车
- 图片位置：农耕图

第8页 - 农学·著作
- 标题：农学篇 - 农学著作
- 内容：
  * 齐民要术：贾思勰的农学巨著
  * 农政全书：徐光启的农业百科
  * 农学思想的实践性
- 图片位置：书籍插图

第9页 - 医学·理论
- 标题：医学篇 - 中医理论体系
- 内容：
  * 阴阳五行理论：人体与自然的统一
  * 经络学说：气血运行的通道
  * 整体观念：辨证论治
- 图片位置：人体经络图

第10页 - 医学·本草
- 标题：医学篇 - 本草与诊断
- 内容：
  * 本草纲目：李时珍的药物学巨著
  * 四诊法：望闻问切
  * 中药的配伍与禁忌
- 图片位置：中草药图

第11页 - 工艺·四大发明
- 标题：工艺技术篇 - 四大发明
- 内容：
  * 指南针：磁石指向，远洋航行
  * 火药：炼丹术的意外发现
  * 造纸术：蔡伦改进，书写革命
  * 印刷术：毕昇活字，知识传播
- 图片位置：四大发明图

第12页 - 工艺·建筑
- 标题：工艺技术篇 - 冶金与建筑
- 内容：
  * 冶金技术：青铜器、铁器的制作
  * 建筑技术：斗拱、榫卯结构
  * 代表建筑：故宫、长城、赵州桥
- 图片位置：古建筑细节

第13页 - 对比·发展路径
- 标题：中西科学发展路径对比
- 内容：
  * 中国：实用主义，经验积累
  * 西方：理论体系，逻辑推演
  * 差异原因：文化传统与思维方式
- 图片位置：时间轴对比图

第14页 - 对比·思想差异
- 标题：科学思想的深层差异
- 内容：
  * 天人合一：人与自然的和谐
  * 实证主义：客观真理的追求
  * 两种思想的价值与局限
- 图片位置：对比图表

第15页 - 总结页
- 标题：课程总结
- 内容：
  * 中国古代科学的辉煌成就
  * 传统科学思想的独特价值
  * 思考题：如何传承与创新？
- 装饰：水墨背景，简洁布局

二、CSS样式（中国风设计）

1. 配色方案
   - 主色：水墨黑 #333333
   - 强调色：朱红 #C04851
   - 辅助色：青绿 #4A7C59
   - 背景色：米白 #F5F5F0
   - 文字色：深灰 #2C2C2C

2. 字体设置
   - 标题：使用衬线字体（宋体、楷体）
   - 正文：使用无衬线字体（微软雅黑）
   - 英文/数字：使用系统默认

3. 页面布局
   - 每页section使用flexbox布局
   - 内容居中对齐
   - 图片与文字左右排列（封面和总结页除外）
   - 内边距：40px-60px

4. 装饰元素
   - 水墨笔触边框（使用CSS渐变模拟）
   - 水墨晕染效果（使用box-shadow）
   - 简单的SVG装饰元素

5. 转场动画
   - 页面切换：淡入淡出 + 轻微滑动
   - 动画时长：0.5秒
   - 缓动函数：ease-in-out

6. 响应式设计
   - 最大宽度：1200px
   - 移动端适配：调整内边距和字体大小

三、JavaScript交互功能

1. 页面切换
   - 左右箭头键（← →）切换
   - 上一页/下一页按钮
   - 显示当前页码（x / 15）
   - 边界处理：第一页不能往前，最后一页不能往后

2. 全屏功能
   - 全屏按钮触发
   - F11快捷键支持
   - 全屏状态下显示/隐藏控制栏

3. 自动播放（可选）
   - 自动轮播功能
   - 播放/暂停按钮
   - 可调节播放速度

4. 键盘快捷键
   - ← →：切换页面
   - F11：全屏
   - Space：播放/暂停

四、技术要求

1. 所有代码（HTML、CSS、JS）写入单个index.html文件
2. 使用纯CSS实现转场效果（不依赖外部库）
3. 图片使用占位符路径：images/01-cover.png、images/02-menu.png等
4. 代码要有详细的中文注释
5. 兼容主流浏览器（Chrome、Firefox、Safari、Edge）
6. 响应式设计，适配不同屏幕

五、输出格式

请直接给我一个完整的、可直接保存为index.html的代码文件，包含所有HTML、CSS、JavaScript代码和中文注释。

---

### 收到代码后的处理步骤

1. 复制Alma返回的完整HTML代码
2. 在你的 `lesson-3/` 文件夹中，新建一个文件名为 `index.html` 的文本文件
3. 将代码粘贴到文件中并保存
4. 双击 `index.html` 文件，在浏览器中打开查看效果
5. 如果发现问题，使用"第四步：应对可能出现的情况"中的提示词向Alma反馈

第四步：应对可能出现的情况

情况1：转场效果不流畅

问题描述：页面切换时卡顿或动画不自然

应对提示词：

我收到了代码，但是转场效果不够流畅，请优化：
1. 减少动画时长到0.3秒
2. 使用transform代替position实现动画（性能更好）
3. 添加will-change属性优化渲染性能
4. 确保每个slide的position为absolute，用left控制显示隐藏

情况2：全屏功能不兼容

问题描述：全屏按钮在某些浏览器无效

应对提示词：

全屏功能有问题，请改进：
1. 同时实现requestFullscreen和webkitRequestFullscreen等前缀方法
2. 添加全屏事件监听，同步全屏状态
3. 全屏时隐藏控制栏，鼠标悬停时显示
4. 处理全屏退出的情况

情况3：图片无法显示

问题描述：图片路径错误导致图片无法显示

应对提示词：

图片显示有问题，请修正：
1. 检查图片路径是否正确（images/01-cover.png）
2. 添加图片加载失败的替代处理（显示alt文字）
3. 使用object-fit: cover确保图片比例正确
4. 添加图片懒加载功能

情况4：响应式布局问题

问题描述：在小屏幕上布局混乱

应对提示词：

响应式布局有问题，请优化：
1. 使用媒体查询适配小屏幕
2. 小屏幕上图片和文字改为上下排列
3. 调整字体大小（使用rem单位）
4. 优化内边距和外边距

情况5：键盘导航不工作

问题描述：按箭头键没有反应

应对提示词：

键盘导航不工作，请修复：
1. 确保事件监听器正确绑定到document
2. 检查是否有其他元素阻止了键盘事件
3. 添加事件委托或使用capture模式
4. 添加调试日志确认事件是否触发

第五步：使用 MiniMax 生成封面背景图

复习 Lesson-2 的技能

在第2课中，你已经学习了使用 my-minimax-image-gen 技能生成图片。本课我们将继续使用这个技能，为封面页生成主题背景图。

如何在 Alma 中调用技能

调用方式：

在 Alma 聊天中，你可以直接说：

请使用 my-minimax-image-gen 技能生成封面背景图

Alma 会自动调用该技能，并引导你完成图片生成。

完整的调用提示词：

请使用 my-minimax-image-gen 技能生成一张图片：

图片用途：用于PPT风格的HTML教学展示页

画面描述：中国传统水墨山水画，淡雅的远山和近景，留白意境，适合做背景

风格要求：
- 中国传统水墨画风格
- 淡雅的配色，适合做背景
- 高清画质，适合网页展示

输出要求：
- 保存到 AIDOCS/images-minimax 文件夹
- 文件名：01-cover.png
- 图片比例：16:9

图片需求

本课仅需生成1张封面背景图：

图片文件名	页码	内容描述	提示词建议
01-cover.png	1	水墨山水背景	中国传统水墨山水画，淡雅的远山和近景，留白意境，适合做背景

生成图片的提示词模板

在 Alma 中使用以下提示词调用 my-minimax-image-gen 技能：

请使用 my-minimax-image-gen 技能生成一张图片：

图片用途：用于PPT风格的HTML教学展示页

画面描述：[填写上面表格中的内容描述]

风格要求：
- 中国传统水墨画风格或中国风设计
- 淡雅的配色，适合做背景或插图
- 高清画质，适合网页展示

输出要求：
- 保存到 AIDOCS/images-minimax 文件夹
- 文件名：01-cover.png（根据需求修改编号和名称）
- 图片比例：16:9（适合PPT展示）
- 提示我生成的图片链接或保存路径

图片生成后的处理

重要说明：

MiniMax技能保存位置：AIDOCS/images-minimax/ 文件夹（由my-minimax-image-gen技能自动保存）
项目所需位置：lesson-3/images/ 文件夹（你的项目文件夹内）

操作步骤：

打开你的 AIDOCS/images-minimax/ 文件夹
找到生成的图片文件（如 01-cover.png 等）
打开你的 lesson-3/ 项目文件夹
在其中新建一个 images/ 子文件夹
将图片从 AIDOCS/images-minimax/ 复制到 lesson-3/images/

验证方法：

确保图片文件名与HTML代码中的路径一致（如 images/01-cover.png）
在浏览器中打开 index.html，检查图片是否能正常显示
如果图片尺寸不符合要求，可以使用提示词让AI重新生成

第六步：验证结果

功能测试清单

打开生成的 index.html 文件，逐项测试以下功能：

1. 页面切换功能

2. 转场效果

切换页面时是否有淡入淡出效果
动画是否流畅（没有卡顿）
动画时长是否合适（0.3-0.5秒）

3. 页码显示

页码显示格式是否正确（x / 15）
切换页面时页码是否同步更新

4. 全屏功能

点击"全屏"按钮能否进入全屏
按F11能否进入全屏
全屏退出后是否能正常显示
全屏状态下内容是否正常显示

5. 响应式布局

调整浏览器窗口大小时布局是否正常
在小屏幕上内容是否完整显示
字体大小是否合适

6. 图片显示

封面背景图是否能正常显示
图片比例是否正确
图片路径是否正确

7. 内容完整性

每页的标题是否正确
内容文字是否完整
是否有明显的格式错误

浏览器兼容性测试

在以下浏览器中打开 index.html，检查是否正常显示：

Chrome
Firefox
Safari
Edge

投屏测试（如果有条件）

连接投影仪或大屏幕
进入全屏模式
测试页面切换是否流畅
检查文字和图片是否清晰可读

常见问题检查清单

如果测试发现问题，对照以下清单排查：

问题	可能原因	检查方法
图片不显示	路径错误	检查images/文件夹是否存在，文件名是否正确
动画卡顿	性能问题	检查是否使用了transform优化，减小动画复杂度
全屏不工作	浏览器兼容性	检查是否使用了正确的全屏API和前缀
布局混乱	响应式问题	检查媒体查询，测试不同屏幕尺寸
中文乱码	编码问题	检查HTML文件是否为UTF-8编码

实践任务总结

你需要完成的步骤

✅ 创建项目文件夹 lesson-3/
✅ 在Alma中新建聊天，设置目录
✅ 使用提示词向Alma提出需求，生成HTML代码
✅ 保存代码为 index.html
✅ 使用 my-minimax-image-gen 技能生成封面背景图
✅ 创建 images/ 文件夹，放入图片
✅ 在浏览器中打开 index.html，测试功能
✅ 根据测试结果，使用相应的应对提示词优化代码
✅ 完成所有功能验证

成功标志

当你完成以下内容时，说明你已经掌握了本课的核心技能：

能够准确描述PPT转场效果和UI设计风格
能够使用AI生成完整的HTML/CSS/JS代码
能够使用MiniMax技能生成封面背景图
能够独立完成功能测试和问题排查
能够制作出专业的PPT风格教学展示页

课程总结

本课学到的方法

AI生成网页代码的提示词技巧
- 明确HTML结构要求
- 描述UI设计风格和配色方案
- 定义交互功能和动画效果
PPT转场效果的实现原理
- 使用CSS动画实现淡入淡出
- 使用JavaScript控制页面切换
- 使用transform优化性能
全屏投屏功能的实现
- 全屏API的使用
- 浏览器兼容性处理
- 事件监听和状态同步
MiniMax封面背景图的生成
- 复习 Lesson-2 的技能
- 为封面设计生成提示词
- 生成封面背景图

第七部分：上传自己的网页

什么是静态网页和动态网页

在开始上传之前，我们先了解一下网页的基本类型：

网页类型	特点	例子
静态网页	纯前端，不需要后端服务器，直接在浏览器中打开就能看	本课制作的PPT展示页
动态网站	需要后端服务器和数据库，内容可以动态变化	淘宝、京东、微博

本课制作的展示页属于静态网页，因为它：

只包含HTML、CSS、JavaScript代码
不需要数据库支持
不需要后端服务器处理
可以直接在浏览器中打开查看

为什么需要上传发布

你现在制作的网页只能在自己的电脑上打开，别人看不到。如果你想让其他人也能访问你的作品，就需要把它发布到网上。

使用 PinMe 上传静态网页

PinMe 是一款零配置前端部署工具，特别适合发布像我们这样制作的静态网页。

PinMe 的特点

特点	说明
零配置	无需服务器，无需账户，无需复杂设置
操作简单	随时随地，网页上直接上传
文件大小	单个文件最大200MB，目录总大小最大1GB
永久保存	上传的文件会永久保存，公共访问
无需注册	不需要创建账号

注意事项（非常重要）

注意事项	原因
私密内部文件切勿上传	上传后任何人都可以通过网址访问
不上传敏感信息	如密码、手机号、身份证号等
只上传教学作品	课程作业、展示页面等公开内容

PinMe 使用步骤

打开浏览器，访问 PinMe 网址：
```
https://pinme.eth.limo
```
进入网页后，你会看到一个上传区域，提示文字是：
```
Drop your file here or click to upload
```
上传你的网页内容：
- 如果是单个 HTML 文件，直接上传 index.html 文件
- 如果是包含图片的完整网页，建议先打包成 zip 文件，然后上传 zip 文件
等待上传完成，PinMe 会返回给你一个发布地址
这个发布地址就是你的网页访问网址，你可以：
- 复制这个网址，分享给其他人
- 在任何设备上通过浏览器打开这个网址访问

上传示例

上传单个 HTML 文件：

打开 lesson-3/ 文件夹
选中 index.html 文件
拖拽到 PinMe 的上传区域
等待上传完成
复制返回的网址

上传包含图片的完整网页：

打开 lesson-3/ 文件夹
选中 index.html 和 images/ 文件夹
右键 → 压缩（或使用压缩软件）
得到一个 lesson-3.zip 文件
上传 lesson-3.zip 文件到 PinMe
等待上传完成
复制返回的网址

验证上传结果

在浏览器中打开 PinMe 返回的网址
检查页面是否正常显示
测试页面切换、全屏等功能是否正常
如果发现问题，修改代码后重新上传

第八部分：完整任务总结

你需要完成的全部步骤

创建项目文件夹 lesson-3/
在 Alma 中新建聊天，设置工作目录指向 lesson-3/
使用基础提示词（5页版本）向 Alma 提出需求，快速验证功能
保存代码为 index.html，在浏览器中打开测试
确认基础功能正常后，使用详细提示词（15页版本）生成完整代码
使用 my-minimax-image-gen 技能生成封面背景图
在 lesson-3/ 文件夹中创建 images/ 子文件夹
将生成的图片从 AIDOCS/images-minimax/ 复制到 lesson-3/images/
在浏览器中打开 index.html，按照测试清单逐项验证功能
根据测试结果，使用相应的应对提示词向 Alma 反馈问题
优化代码直到所有功能正常
访问 PinMe 网站（https://pinme.eth.limo）
上传 index.html 文件或包含图片的 zip 文件
复制 PinMe 返回的发布网址
在浏览器中打开网址，验证上传结果
将网址分享给其他人查看

成功标志

当你完成以下内容时，说明你已经掌握了本课的全部技能：

理解静态网页和动态网页的区别
能够使用 PinMe 发布静态网页
能够准确描述 PPT 转场效果和 UI 设计风格
能够使用 AI 生成完整的 HTML/CSS/JS 代码
能够使用 MiniMax 技能生成封面背景图
能够独立完成功能测试和问题排查
能够制作出专业的 PPT 风格教学展示页
能够将作品发布到网络上，让他人访问

常见问题

问题：PinMe 上传失败
- 原因：文件超过大小限制（单个文件最大200MB，目录总大小最大1GB）
- 解决：压缩文件，或者删除不必要的图片和文件
问题：上传后网址访问不了
- 原因：网址复制错误，或者网站临时故障
- 解决：重新复制网址，或者稍后再试
问题：图片显示不出来
- 原因：图片路径错误，或者图片没有包含在上传文件中
- 解决：检查图片路径，确保 zip 文件包含了 images/ 文件夹
问题：页面样式乱了
- 原因：压缩文件时文件结构被打乱
- 解决：重新打包，确保 index.html 和 images/ 文件夹在同一层级

恭喜你！现在你已经能够制作专业的PPT风格教学展示页，可以用于课堂投屏展示了！

课程 3：简单交互式展示页 资源下载

课前准备

课程目标

本课主题：中国传统文化中的科学思想

统一五步流程

第一步：明确目标

任务描述

功能需求

15页内容规划

第二步：设计输出格式

文件结构

HTML结构要求

UI设计风格

第三步：提出需求

3.1 基础提示词（5页快速验证）

3.2 详细提示词（15页完整版）

第四步：应对可能出现的情况

情况1：转场效果不流畅

情况2：全屏功能不兼容

情况3：图片无法显示

情况4：响应式布局问题

情况5：键盘导航不工作

第五步：使用 MiniMax 生成封面背景图

复习 Lesson-2 的技能

如何在 Alma 中调用技能

图片需求

生成图片的提示词模板

图片生成后的处理

第六步：验证结果

功能测试清单

1. 页面切换功能

2. 转场效果

3. 页码显示

4. 全屏功能

5. 响应式布局

6. 图片显示

7. 内容完整性

浏览器兼容性测试

投屏测试（如果有条件）

常见问题检查清单

实践任务总结

你需要完成的步骤

成功标志

课程总结

本课学到的方法

第七部分：上传自己的网页

什么是静态网页和动态网页

为什么需要上传发布

使用 PinMe 上传静态网页

PinMe 的特点

注意事项（非常重要）

PinMe 使用步骤

上传示例

验证上传结果

第八部分：完整任务总结

你需要完成的全部步骤

成功标志

常见问题

下载资源

课程 3：简单交互式展示页资源下载