#### 一、实践任务

为了巩固本章关于文件结构与多页面整合的知识，请大家在 VS Code 等现代编辑器中完成以下实践任务。
**任务一 创建个人首页**
1. **生成候选原型** 运用所学知识，结合通义灵码等 AI 辅助编程工具，通过不断调整提示词让 AI 生成 10 个不同风格的网站首页版本，并从中挑选出最满意的一个作为最终稿。
2. **完善核心功能** 在这个首页中，必须明确包含个人信息、兴趣爱好和联系方式。
3. **配置导航与子页**
	- 添加导航菜单，包含首页、学习笔记、作业演示、关于、联系。
	- 为“作业演示”设置二级下拉菜单，包含演示1、演示2、演示3。
	- 再次利用 AI 辅助功能，生成一个学习笔记的“列表页”和一个具体的“文章内页”。
4. **规范文件命名** 提交的项目文件夹中必须严格包含以下 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 文件，准确掌握路径的层级关系是前端开发者必须跨越的核心门槛。
**（三）组件化思维的萌芽**
在选做任务中尝试统一提取并替换头部和底部，这是现代前端框架中“组件化开发”的雏形。通过保持公共部分代码的一致性，我们能极大地降低后期网站升级和维护的成本。

为了巩固本章关于文件结构与多页面整合的知识，请大家在 VS Code 等现代编辑器中完成以下实践任务。任务一 创建个人首页

第五章第三节 实践任务与总结

前端

开发工具

学习文件结构与多页面整合的实践任务，包含创建个人首页、整合历史作业、拆分头部底部等步骤。掌握工程化目录结构、相对路径运用和组件化思维，实现从单页面到完整网站的跨越。通过AI辅助工具生成页面原型，规范文件命名，确保项目清晰易维护。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

第五章第三节 实践任务与总结-腾讯云开发者社区-腾讯云

第五章第三节实践任务与总结

第五章第三节实践任务与总结

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第五章第三节 实践任务与总结

第五章第三节 实践任务与总结

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

第五章第三节实践任务与总结

第五章第三节实践任务与总结