处理网页文件

规划网站
1.在纸上画出网站结构的草图，确定你在每个页面希望呈现的内容。与其他的工作不同，这项工作是能指导网站设计的。
2.为页面、图像和其他外部文件设计一个简单且一致的命名规则。

创建网站并不需要特殊的工具。可以使用任何文本编辑器，甚至是 Windows 自带的记事本 Notepad，或者 OS X 上的免费软件TextWrangler（www.barebones.com/products/textwrangler）（Mac 也自带一款编辑器，名为 TextEdit，但它在 OS X 某些版本中存在漏洞，使之无法正确处理 HTML 文件。）
创建新网页的步骤：
(1) 打开文本编辑器。
(2) 选择 File → New（文件→新建）创建一个新的空白文档，如图 2.2.1 所示。
(3) 创建 HTML 内容。
(4) 保存文件。

即 使 已 经 指 定 了 .html 或 .htm 的 扩展名，Windows 上的某些文本编辑器也会在文件名末尾加上默认扩展名。（注意大多数专门编辑 HTML 页面的编辑器并不存在这个问题。）这样文件名就变成了 webpage.html.txt，这样的文件无法在浏览器中查看。Windows 通常会隐藏扩展名，也导致这个问题变得隐蔽，它尤其容易困扰新手。有两个解决办法：一个是在首次保存文件时将文件名包围在双引号中，这样能防止添加额外的扩展名；另一个是让 Windows 显示文件扩展名，从而可以看见程序自动添加的扩展名并将其删除。

用文本编辑器创建的网页需要在多种平台和多种设备上的多种浏览器查看。为了让所有这些程序都能访问网页，网页需要保存为通用的“纯文本”格式，不包含文字处理软件可能应用的任何专用格式化信息。

保存网页的步骤：
(1) 创建网页之后，在文本编辑器中选择File → Save As（文件→另存为）
(2) 在随后弹出的对话框中，选择纯文本或文本文档（或别的叫法）作为文件格式。
(3) 为文档添加 .html 或 .htm 的扩展名（这一点非常重要）。
(4) 选择要保存网页的文件夹。
(5) 点 击 Save（ 保 存）。

大多数 Web 服务器都会根据文件名识别每个文件夹中的默认页面。大多数情况下，系统会将 index.html 识别为默认页面。如果没有 index.html，就会继续寻找index.htm、default.htm 等文件名。如果访问者输入带目录的 URL，但没有指定文件名，那么就会打开默认页面。（目录就是文件夹，就像你自己计算机里的文件夹一样。）

因为网页在大多数情况下是通过浏览器查看的，所以在桌面上双击网页件，会启动默认浏览器并显示它们。如果想编辑网页文件，需要在文本编辑器中手动打开它。
编辑网页的步骤
(1) 打开文本编辑器。
(2) 选择 File → Open。
(3) 找到包含目标文件的目录。
(4) 如果没有看到目标文件，选择 All Files（全部文件）选项（或类似的叫法）。在不同的程序或平台，这个选项的叫法和位置都有细微的差异。
(5) 点击 Open，就可以开始编辑文件了。

组织文件的步骤：
(1) 创建一个主文件夹或目录存放网站上所有可用的资料。在 Mac 上，在 Finder 中选。在 Windows 中，右击桌面（或你选择的文件夹），选择 New → Folder（新建→文件夹）。然后为文件夹命名。
(2) 根据网站的组织结构创建子文件夹。例如，可以考虑为网站的每个部创建单独的文件夹，并根据需要在其中创建单独的子文件夹。
(3) 为网站的图像、样式表（CSS 文件）和 JavaScript 文件创建一个或多个文件夹，每个文件夹还可以有各自的子文件夹。有很
多种组织方式，具体做法完全取决于你自己。一种方法是将 CSS、JavaScript 文件夹同图像文件夹（及其他文件夹）一样放在根目录，也可以将这些文件夹一起放在根目录下的 assets（资源）文件夹里。

创建网页之后，你肯定希望看看它在浏览器中显示的样子。实际上，你并不知道访问者使用什么浏览器（不同的浏览器呈现页面的方式会有差异），因此建议使用多个浏览器查看页面。

在浏览器中查看网页的步骤：
(1) 打开浏览器。
(2) 选择 File → Open File（在不同的浏览器中，Open File 项的表述可能不同，但不管是什么，不能选择 Open Location）。也可以使用快捷键 Command-O（对于 OS X）或 Ctrl-O（对于 Windows）。使用快捷键会直接跳到第 (3) 步，但 Internet Explorer 除外——IE会先弹出一个对话框。
(3) 在弹出的对话框中，找到目标文件所在的文件夹，选中该文件，点击 Open。页面会显示在浏览器中，显示效果与发布到服务器的网页相同（关于发布网页）。对于不同的浏览器，这些步骤可能有些差异。

学习其他网页开发和设计人员如何创建页面是提高 HTML 代码水平最容易的方法之一。幸好，我们很容易就可以查看和学习他人的 HTML 代码。不过，文本内容、图像、音频、视频、样式表及其他外部文件可能受版权保护。通常的做法是借鉴其他人的页面为自己的 HTML 寻找灵感，再创建自己的内容。

1. 使用 View Source 查看其他设计者的HTML 代码
   (1) 在浏览器中打开网页。
   (2) 选择 View Source（查看源代码，或浏览器中的其他类似选项）。这时会显示HTML代码。
   (3) 如果需要，可以保存该文件以作进一步研究。
2. 通过开发者工具查看其他设计者的 HTML代码
   查看网页源代码的另一种方法是使用浏览器的开发者工具。不同浏览器提供的开发者工具并不一样，但有些功能是一样的。
   CSS 不可多得的资料，通过它可以查看某个特定的效果是如何实现的，可以随意改动代码而不必担心破坏任何东西。关于开发者工具（既有现代浏览器的，也有旧浏览器的）的信息。