第三节 实践任务
一、视频教程
教学视频制作一个简单的首页
二、实践任务
为了巩固本章关于文件结构与多页面整合的知识，请大家在 VS Code 等现代编辑器中完成以下实践任务。
任务一：创建个人首页
- 生成候选原型 运用所学知识，结合通义灵码等 AI 辅助编程工具，通过不断调整提示词让 AI 生成 10 个不同风格的网站首页版本，并从中挑选出最满意的一个作为最终稿。
- 完善核心功能 在这个首页中，必须明确包含个人信息、兴趣爱好和联系方式。
- 配置导航与子页
- 添加导航菜单，包含首页、学习笔记、作业演示、关于、联系。
- 为“作业演示”设置二级下拉菜单，包含演示1、演示2、演示3。
- 再次利用 AI 辅助功能，生成一个学习笔记的“列表页”和一个具体的“文章内页”。
- 规范文件命名 提交的项目文件夹中必须严格包含以下 5 个文件
- 首页：index.html
- 列表页：list.html
- 文章内页：single.html
- 样式表：styles.css
- 脚本文件：scripts.js
任务二：整合作业
将我们在第二章、第三章、第四章完成的成品作业，与本次任务一的作业整合到一个项目中。请在以下两种方案中任选其一完成。 方案 A（子目录独立法）
- 在当前项目的根目录下新建 2-1 文件夹（存放第二章作业）和 3-1 文件夹（存放第三章作业）。
- 在首页导航栏的“作业演示”下拉菜单中，使用相对路径通过超链接将这两份历史作业准确链接起来。
方案 B（平铺合并与资源集中法，推荐选用）
- 在根目录下新建一个 Web 文件夹。
- 将第二章和第三章的首页分别重命名为 2-1.html 和 3-1.html 等规范命名，并放置在该目录下。
- 新建 scripts 和 styles 文件夹，将历史作业及本次任务涉及的所有 CSS 和 JS 文件重命名后分类放入，并在 HTML 中更新正确的引入路径。
- 新建 upload 文件夹，将所有相关的图片等媒体信息集中存放在此，并同步修改页面中的引用路径。
- 通过导航栏下拉菜单链接 2-1.html 和 3-1.html。最后，全面测试以确保所有页面均可正常跨页访问和预览。
任务三：拆分头部和底部（选做挑战）
借助 AI 工具，将首页的 <header>（头部）和 <footer>（底部）相关的 CSS 样式单独拆分出来。随后，将第二章、第三章和第四章历史作业中的头尾结构，整体替换为本次任务的头尾代码，以实现整个网站视觉风格的统一。完成后，仔细检查以确保各页面的样式均能正常渲染。
实践任务
三、章节总结
本章我们迎来了从“单页面”向“完整网站”跨越的重要阶段。
（一）文件结构的工程化
我们学习了如何摆脱初学者常见的“大杂烩”代码，建立了像 styles、scripts、upload 等标准的工程化目录结构。良好的文件分类不仅让项目清晰易读，更是未来高效维护和扩展的基石。
（二）相对路径的运用
在整合多页面与分离静态资源时，我们深入实操了相对路径。无论是引入外部的 CSS、JS，还是在导航栏中串联不同的 HTML 文件，准确掌握路径的层级关系是前端开发者必须跨越的核心门槛。
（三）组件化思维的萌芽
在选做任务中尝试统一提取并替换头部和底部，这是现代前端框架中“组件化开发”的雏形。通过保持公共部分代码的一致性，我们能极大地降低后期网站升级和维护的成本。