井井有条的目录是专业项目的起点 ｜ 课型：理实一体课 ｜ 建议课时：2节
一个目录规范的多页面站点骨架：首页+关于页+独立CSS，演示正确的路径引用。
新窗口运行 下载源码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人简介-首页</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; max-width: 600px; margin: 40px auto; padding: 0 16px; color: #1f2a33; }
nav a { margin-right: 16px; color: #0f8c7f; }
.box { border: 2px dashed #38d6c4; border-radius: 10px; padding: 16px; margin-top: 20px; }
code { background: #e7f7f4; padding: 2px 6px; border-radius: 4px; }
</style>
</head>
<body>
<nav><a href="demo1.html">首页</a><a href="demo1-about.html">关于我</a></nav>
<h1>规范目录演示站</h1>
<p>本站的目录结构如下：</p>
<div class="box"><pre>lesson3/
├── demo1.html ← 首页
├── demo1-about.html ← 关于页
└── css/
└── style.css ← 样式（本例为内联演示）</pre></div>
<p>引用css文件夹中的文件：<code>href="css/style.css"</code></p>
<p>从css文件夹返回上级：<code>../images/logo.png</code></p>
</body>
</html>演示多页面站点的第二页。
新窗口运行 下载源码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人简介-关于我</title>
<style>
body { font-family: "Microsoft YaHei", sans-serif; max-width: 600px; margin: 40px auto; padding: 0 16px; color: #1f2a33; }
a { color: #0f8c7f; }
</style>
</head>
<body>
<nav><a href="demo1.html">返回首页</a></nav>
<h1>关于我</h1>
<p>我来自海南三亚，正在学习WEB前端技术。</p>
</body>
</html>任务目标：独立规划并搭建一个目录规范、路径零错误的三页面站点
| 任务内容与评分 |
|---|
| 任务1：画出站点目录树草图（手绘或工具）（15分） |
| 任务2：创建目录：index.html、css/、js/、images/（15分） |
| 任务3：三个页面间用相对路径互相链接（30分） |
| 任务4：images中放一张图片并在页面正确引用（20分） |
| 任务5：写出JPG/PNG/SVG三种格式的适用场景（20分） |