一个网页由许多文件组成：文本，代码，样式表，媒体内容等等。当你开发网页时，你需要将这些文件以清晰的结构在你的本地计算机中存储下来，保证它们之间的联系，使它们看起来正确，然后才能将它们上传至服务器。这一节讨论了一些创建清晰的文件结构你应该了解的知识。
网页应该存放在计算机何处？
当你在本地操作你的网页时，你应该将所有关联的文件放在一个能反映服务器上文件结构的单独的文件夹里。这个文件夹可以存放在任何你喜欢的位置，不过你应该将它放在你容易找到的位置，或许可以是你的桌面，你的主页，或是磁盘根目录。
- 选择一个位置存放你的网页项目。创建一个名为 web-projects （或更简单）的文件夹。这将是你全部网页项目存放的位置。
- 在第一级目录下，新建另一个文件夹来存放你的第一个网页。命名为 test-site（或者更加有想象力）。
一些关于大小写和空格的提示
你会注意到在这篇文章里，我们要求你为文件夹和文件命名都是以小写形式并且没有空格，这是因为：
- 很多计算机，特别是Web服务器，是对大小写敏感的。举个例子，如果你将一个图片放在
test-site/MyImage.jpg，然后在一个不同的文件里你试图以test-site/myImage.jpg 来引用这个图片，这将不会起作用。 - 浏览器，Web服务器，还有程序语言不能一致处理空格。举个例子，如果你在文件名里使用空格，一些系统会把它这个文件名视为两个文件名。一些服务器将会把你的文件名里的空格替换为 “%20”（URIs里空格的编码），破坏你所有的链接。最好是使用横线和下划线来分离单词：
my-file.html或是my_file.html。
由于这些原因，在你为文件夹和文件命名最好养成使用小写并且省略空格的习惯。那样你将减少很多问题～
网页应该使用什么结构？
接下来，看看我们的测试网页应该拥有什么结构。我们创建的任何网页项目中最常使用的就是一个索引HTML文件和不同的包括图像，样式表和脚本文件的文件夹。让我们现在创建它们：
index.html：这个文件通常将包括你的主页内容，也就是说，人们第一次进入你的网页看到的文本和图像。使用你的文本编辑器，创建一个名为index.html的新文件并将其保存在test-site文件夹。imagesfolder： 这个文件夹包含你网页上所有使用的图像。在test-site文件夹内创建一个images 文件夹。stylesfolder： 这个文件夹包含了为你的内容添加样式的样式表（比如，设置文本颜色和背景颜色）。在test-site文件夹内创建一个styles 文件夹。scriptsfolder： 这个文件夹包含了所有为你网页添加交互功能的JavaScript代码（比如点击时读取数据的按钮）。在test-site文件夹内创建一个 scripts文件夹。
提示：在 Windows 系统中，你可能在查看文件名时会遇到些问题，因为 Windows 有一个很恼人的选项叫隐藏已知文件类型扩展名被默认开启。通常你可以打开Windows资源管理器，选择文件夹选项，单击选项，取消隐藏已知文件类型扩展名复选框，然后点击确定。查看 Windows 版本的详细信息，请使用 Yahoo 搜索！
文件路径
为了关联不同文件，你需要为它们提供文件路径——基本上是一个路线让一个文件知道另一个文件在哪。为了实现，我们将插入一小段HTML代码到 index.html 文件，让其显示你在 "What will your website look like?" 文章里选择的图像。
- 拷贝你早先保存的图像到
images文件夹。 - 打开
index.html文件，准确插入以下显示的代码。不用担心现在不理解代码的意义——我们将在以后详细讲解此结构的信息。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <img src="" alt="My test image"> </body> </html> - 这行代码
<img src="" alt="My test image">是插入图像的 HTML 代码。我们需要告诉 HTML 图像在哪里。这张图片在 images 目录下，而 images 目录与index.html处于同级目录。要从index.html所处一级目录进入图片所在目录，我们所需的文件路径是 images/your-image-filename。例如，我们的图像名是firefox-icon.png，所以我们的文件路径就是images/firefox-icon.png。 - 在 src＝" " 的双引号中插入文件路径。
- 保存 HTML 文件，然后使用浏览器打开（双击文件）。你应该看到你展示着图像的新网页！
一些文件路径的通用规则：
- 要引用一个位于同级目录的 HTML 文件，只需直接使用文件名，比如
my-image.jpg。 - 要引用一下子目录的文件，在路径前写下目录名并加一个斜杠，比如 subdirectory/my-image.jpg。
- 要引用一个父目录的 HTML 文件，加上两个点。举个例子，如果
index.html在test-site子目录而my-image.png与test-site处于同级目录，你可以使用../my-image.png 在index.html内引用my-image.png。 - 你可以组合随意以上方法，比如
../subdirectory/another-subdirectory/my-image.png.
到此为止，这是你需要知道的全部。
提示：Windows 系统会使用反斜杠而不是斜杠，比如 C:\windows 。这没关系，就算你在 Windows 上开发你的网页，你仍应该在你的代码中使用斜杠。
还有什么需要完成的？
我们差不多都做完了。你的文件夹结构应该与下面一样：
