HTML与CSS入门经典（第8版）

HTML与CSS入门经典（第8版）

人民邮电出版社

北京

本书是畅销图书《HTML与CSS入门经典》的最新版，和过去的版本相同，本书仍然采用直观、循序渐进的方法来为读者讲解使用 HTML 与CSS创建并发布网页的过程，以方便读者掌握。本书总共分为24章和1个附录，其涵盖的内容有理解Web的工作方式，如何发布Web内容，理解HTML与XHTML的关系，理解层叠样式单（CSS），使用文本块和列表，使用字体，使用表格显示信息，使用外部和内部链接，使用颜色，创建用于Web上的对象，在网站中使用对象和多媒体，使用框架，使用边距、填充、对齐和浮动，理解CSS盒子模型和定位，使用CSS进一步控制列表和控制导航，使用鼠标操作修改文本显示，创建固定或者流动的布局，创建打印友好的网页，理解动态网站，使用基于Web的表单，组织和管理网站，以及帮助人们找到你的网站等内容。附录还提供了完整的XHTML1.1与CSS2快速参考。

本书语言简洁、内容丰富，适合Web设计开发人员，以及大中专院校相关专业的学生阅读，对Web开发和发布感兴趣的读者也可以从中获益。

Julie C. Meloni 是位于 Los Altos 的多媒体公司 i2i Interactive 的技术总监，同时还是一位在数字人文领域工作的学者。她曾经编著了许多关于基于Web的编程语言及数据库主题的图书和文章，其中包括畅销的 Sams《Teach yourself PHP，MySQL，and Apache All in one》。

Michael Morrison 是一位作家、开发人员、玩具发明家，同时还是各种计算机技术图书以及基于Web的交互课程的作者。除了作家和自由职业者这个主业以外，Michael还与他的妻子 Masheed 一起创立了 Stalefish Labs娱乐公司。

2009年，全世界估计有15亿人访问互联网，在美国就有2.2亿。加上3.38亿的中国用户，5500万德国用户，4800万英国用户，3800万俄罗斯用户，以及6700万巴西用户，你可以看到 World Wide Web 中“World”一词的含义。许多互联网用户还为 Web 创建了内容——你可能是其中之一！虽然精确地度量网页的数量是很困难的，但是Google的最新数据指出， 2008年中期，索引的页面突破了1万亿。

在接下来的 24 小时中，互联网的可访问区域将会出现数千万个新的网页。至少有许多的页面会出现在私有的Intranet，它们将为通过局域网连接的业务人员所查看。每个页面和其他已经在网上的1万亿个页面相似，都使用超文本标记语言（HTML）。

随着你完成本书中 24 章内容，你的网页将和那些网页一起出现在互联网上。这些课程将帮助你获得当今世界上最有价值的技能：精通HTML。

你真的能够自己学会创建顶级的网页，而不需要任何专用的软件，甚至比花在计划和等待高价的HTML高手的时间还要少？这本相对简短、容易理解的书能教你学会如何制作高水平的网页。

是的，实际上，通过本书头两章的学习，完全没有HTML经验的人也能够拥有一个可以发布在Web上的页面。

如何能快速地学会Web的语言呢？依靠示例。本书将HTML组织为简单的步骤，然后为你精确地说明每个步骤的处理方法。每个HTML代码示例在其生成的网页图像之前直接列出。你会看到HTML代码是如何运行的，并能获悉其运行背后的原理，然后就可以将它们应用在自己的页面中。

经过24章内容的学习，你将对出现在互联网上属于你自己的酷炫页面感到惊讶。

超越HTML

本书不仅包括HTML，因为HTML不是创建现代的Web内容所唯一需要了解的内容。本书的目标是在24个简单而又短小的章节中，教会你创建现代的、与标准兼容的网站所需要的所有技能。本书介绍了如下关键技能和技术。

XHTML（可扩展的超文本标记语言）是网页创建的当前标准。本书的每个示例都是完全兼容 XHTML 的。在合适的地方，还会讲到 HTML 5。

本书的所有示例已经用当今的主流Web浏览器的最新版本进行过兼容性测试。这些浏览器包括 Apple Safari、Google Chrome、Microsoft Internet Explorer、Mozilla Firefox和Opera。

有许多包含层叠样式单（CSS）的内容，CSS 使你能够很好地控制布局、字体以及网页格式的各个方面，包括文本和图像。在创建令人瞠目的网页时，CSS比传统的HTML页面自身能做的多得多。例如，你知道CSS除了可以正常地查看Web外，还可以对具体信息进行处理，以便于打印吗？

第10章～第12章为你介绍多媒体应用程序及其使用，其中包含了可以免费下载并免费试用业界标准的软件的地址。

仅讲解技术内容是不够的，所以本书还包含了在建立网站以实现目标时所需要的建议。关键的细节——设计有效的页面布局，通过FTP软件将你的页面张贴到互联网上，组织和管理多个页面，让你的页面出现在主流互联网搜索网站查询列表的前列——都进行了足够深度的介绍，这可使你避免常常使初学者沮丧的困难。

对以上关键技术的讲解是使本书前 7 个版本成为畅销书的原因，而这个更新的版本——2005年以来本书的第一个版本——也没有差别。所有的示例都做了更新，而且大部分内容都重新修订过，以与新的示例和新技术相匹配。

直观的示例

本书的每个示例都分为两个部分。

先给出构成HTML页面的文本内容，其中所有的HTML和CSS代码被突出显示。

随后给出生成的页面，而且其显示效果与在所有主流浏览器中看到的相同。

你往往可以将示例改编为自己的网页，而完全不需要阅读跟随的文本。

本书中的所有示例都是与标准兼容的，可以用于 Apple Safari、Google Chrome、Microsoft Internet Explorer、Mozilla Firefox 和 Opera。虽然所有的屏幕截图取自于 Firefox，但是所有代码都已经在其他浏览器中测试过。

特殊元素

当你完成每章内容后，旁注可帮助你将刚学习的内容应用到自己的网页上。

注意：注释框提供关于所讨论主题的附加信息。

提示：节约你宝贵时间的提示和技巧被放置在提示框中，这样你可以快速地发现它们。

警告：当有你需要注意的事项时，你将在警告框中看到。

问答、测验和练习

每一章都以一个简短的问答对话结束，这个对话提出了每个人希望自己敢提出来的“傻问题”。一个简短而完整的测验让你能够测试自己，以确认理解了该章介绍的所有知识。最后，一两个可选的练习让你有机会在继续之前实践你的新技能。

本章中你将学到：

万维网（WWW）的简史

“网页（Web Page）”的含义，以及该术语不能反映所涉及的所有内容的原因

如何从你的个人计算机进入别人的浏览器

选择Web托管提供商的方法

不同的Web浏览器和设备类型对网面内容的影响

在学习复杂的HTML和CSS之前，先对这些技术有坚实的理解是很重要的，这些技术可以将这些普通文本文件转化为通过计算机或者手持设备浏览网页时看到的丰富的多媒体显示。

如果不使用 Web 浏览器查看，包含 HTML 和 CSS 的文件则看不出效果，除非有一个Web服务器，否则除了你自己以外，没有人能看到你的内容。Web服务器使你的内容可用于其他人，他们使用自己的Web浏览器导航到一个地址，并且等待服务器发送信息给他们。你将深入这个过程，因为你必须首先创建文件，然后将它们放到服务器上使其可用，并且必须确保你的内容将按照你的设想出现在最终用户那里。

很久以前，在人类还没有登上月球之前，一些富有远见的人决定看看自己能不能将几个主要的计算机网络连接在一起。我不再赘述这些人的名字和故事（到处都可以找到），但是最终的结果是“所有网络之母”，也就是我们对互联网的称呼。

直到1990 年，通过互联网访问信息还是一个相当技术性的事情。这非常困难，甚至连拥有博士学位的物理学家在尝试交换数据时都会感到沮丧。一位现在非常有名（并且被授予爵位）的物理学家 Tim Berners-Lee 爵士，发明了很容易地通过“超文本”链接交叉引用互联网上的文本的方法。

这不是一个新的思路，但是他的简单的超文本标记语言（HTML）能够兴旺起来，而更野心勃勃的超文本计划却失败了。超文本原意是指具有页面之间交叉引用的，以电子形式存储的文本。现在这个术语含义更广，指任何可以与其他对象链接的对象（文本、图像、文件等）。超文本标记语言是描述文本、图形和包含其他信息的文件组织和链接在一起的方式的一种语言。

到1993年，世界上只有100多台计算机能够提供HTML页面。这些互相链接的页面被称为万维网（WWW），许多 Web 浏览器程序被编写出来，使用户能够查看网页。因为 Web的流行，一些编程人员很快就写出能够和文本一起查看图形的浏览器。从那时开始，Web浏览器软件的持续发展和HTML和XHTML的标准化将我们带入了今天所生活的世界，现在有超过1.1亿台Web服务器提供对超过250亿个文本和多媒体文件的请求的服务。

注意：关于万维网历史的更多信息，参见这个主题的Wikipedia 文章：http://en.wikipedia.org/wiki/History_of_the_Web。

这几段话确实是这段不寻常的时期的简单历史。现在学校里的新人根本不知道没有万维网的时代，信息“永远在线”的理念和无处不在的计算将推动我们的生活的各个方面不断前进。Web 内容的创建和管理不再只是少数技术方面的人士（你可以称呼他们“高手”）所拥有的技能，在本书的最后，你将看到这些技能是每个人都能掌握的，而不是高手们的特权。

你可能已经注意到“Web内容”（而不是“网页”）这个术语的使用——这么说内涵更丰富。尽管我们说“访问一个网页”，但真实的意思是“在我们的计算机上查看所有某个地址上的文本和图像”。我们阅读的文本，看到的图像由 Web 浏览器根据在单独的文件上找到的一些指令显示。

这些文件包含由HTML代码标示或者包围的文本，告诉浏览器如何显示文本——作为标题、作为段落、红色的字体等。一些HTML标示告诉浏览器显示一个图像或者视频文件而不是普通文本，这就把我带回到那个论点——不同类型的内容被发送到你的Web浏览器，所以简单地说“网页”不能涵盖。这里我们使用“Web内容”这个词来代替，以包含文本、图像、音频、视频和其他在线媒体。

在后面，你将学习链接到或者创建各种网站上找到的多媒体Web内容的基础知识。现在你需要记住的是你控制着用户访问你的网站时所看到的。从包含所显示的文本行或者告诉服务器传递一个图形到用户的Web浏览器的代码的文件开始，你必须计划、设计并且实现最终组成你的Web存在的所有部分。随着你在本书中的学习，只要你理解所有的小步骤，理解这个过程就不困难。

Web内容的最基本形式从简单的包含HTML和XHTML标记的文本文件开始。XHTML是另一种味道的HTML，“X”代表eXtensible（可扩展），随着你持续地学习这些课程，将会许多到更多关于它的知识。从一开始就应该知道的重要的事情是本书中的所有示例都是兼容HTML 4和XHTML 的，这意味着它们在现在和将来任何新一代的浏览器上的显示都是近似的。这是编写兼容标准的代码的好处之一，你不需要担心未来因为代码“不能正常工作”而必须进行修改。只要 Web 浏览器坚持标准（有希望在长时间内），你的代码可能会始终“正常工作”。

在许多不同的地方发生了多个过程，最终产生了你看到的Web内容。这些过程发生得很快——在几毫秒之内——而且是在幕后发生的。换句话说，当我们认为所作的一切是打开一个Web 浏览器，输入Web 地址，并且立即看到请求的内容时，幕后的技术正在为我们辛勤地工作。图1.1展示了浏览器和服务器之间的基本交互。

图1.1 浏览器请求，服务器响应

但是，这个过程中有许多步骤，在你看到整个请求网站的内容之前，可能在浏览器和服务器中有多次往返。

假定你想要进行一次Google搜索，所以你认真地在地址栏输入http://www.google.com或者从书签列表中选择Google书签。你的浏览器几乎立即显示出如图1.2所示的画面。

图1.2 访问www.google. com

图1.2显示了一个包含文本和一个图形（Google标志）的网站。从Web服务器读取这些文本和图像并且在你的屏幕上显示所发生的简单过程如下。

1．你的Web浏览器发出对位于http://www.google.com/地址的index.html文件的一个请求。index.html 文件不必是你在地址栏上输入的地址的一部分；你将在第 2 章中学习到更多关于index.html文件的知识。

2．在接收到对一个具体文件的请求后，Web服务器进程在它的目录中查找具体的文件，并且将该文件的内容发送回你的浏览器。

3．Web浏览器接受index.html文件的内容，这是由HTML代码标记的文本，并且根据HTML代码显示内容。在显示内容的同时，浏览器发现用于Google标识的HTML代码，这个标识在图1.2中可以看到。HTML代码类似以下代码：

<img src="logos/logo.gif" width="384" height="121" border="0" alt="google"/>

这个代码标记提供了告诉浏览器显示该标识所需要的文件源位置（src）、宽度（width）、高度（height）、边框类型（border）以及辅助文本（alt）。你将通过稍后的课程学习更多关于特性的知识。

4．浏览器查看<img/>标记中的src特性以查找源位置。在这个例子中，图像logo.gif可以在读取HTML文件的相同Web地址（www.google.com）中找到。

5．浏览器请求http://www.google.com/logos/logo.gif上的文件。

6．Web服务器解释该请求，寻找该文件，并且将该文件的内容发送给请求它的浏览器。

7．Web浏览器在你的显示器上显示该图像。

正如你在Web内容交付过程的描述中看到的，Web浏览器所作的只是像你可以看到内容的一个像框。浏览器组合Web内容部件并且按照文件中的HTML命令安排这些部分。

你还可以在“本地”或者你的硬盘驱动器上查看Web内容，而不需要一个Web服务器。内容读取和显示的过程和前面列出的浏览器查找并且解释 HTML 文件的代码和内容的过程相同，但是旅程较短，浏览器在你自己的计算机硬盘上而不是远程机器上寻找文件。解释嵌入在文件中的基于服务器的编程语言需要一个Web服务器，但是这超出了本书的范围。实际上，你可以在没有Web服务器的情况下完成本书的所有课程，但是在你之外没有人能看到你的杰作。

尽管你可以在没有Web服务器的情况下完成本书的所有课程，但是我们建议你使用Web服务器。不要担心——得到一个托管提供商一般是个快速、轻松而相对经济的过程。实际上，你可以以稍高于本书的价格得到自己的域名和一年的Web托管服务。

如果你在搜索引擎当中输入 Web hosting provider（Web 托管提供商），你将得到上百万个结果和无穷的赞助搜索结果（也被称为广告）。世界上没有这么多 Web 托管提供商，但是看上去好像有。即使你关注托管提供商的一个受控列表，它也可能太长——特别是如果你寻找的是你自己或者你的公司或者组织放置一个简单的网站的地方时。

你将会希望在寻找一个提供商时缩小范围并且选择最符合你的需求的提供商。Web托管提供商的一些选择标准如下。

可靠性/服务器“正常运行时间”——如果你有一个网站，你希望确保人们能够始终到达它。

客户服务——寻求多种联络客户服务的方法（电话、E-mail、聊天工具）以及常见问题的在线文档。

服务器空间——托管套件是否包含足够的服务器空间来存储所有你计划包含在网站（如果有）的多媒体文件（图像、音频、视频）。

带宽——托管套件是否包含足够的带宽，使所有访问你的网站并且下载文件的人可以放心地进行，并且你不需要付出额外的钱？

域名购买和管理——套件是否包含一个自定义的域名，或者你在托管的账目之外需要必须单独购买和维护你的域名？

价格——不要为托管付过多的钱。你将会看到很宽的价格范围并且应该立即对“差异是什么？”感到奇怪。差异往往和服务质量无关而取决于公司的开销和公司认为能侥幸成功的要价。一个经验法则是，如果你租用的基本托管和域名套餐每年花费超过75美元，你就可能付得太多了。

这里有3家可靠的Web托管提供商，它们的基本套件在相对低的价格上包含了丰富的服务器空间和带宽（还有域名和额外的好处）。如果你不了解这些 Web 托管提供商，至少你可以将它们的基本套件描述作为你求购的指南。

A Small Orange（http://www.asmallorange.com）——它们的“极小”和“小”主机套件是新的Web内容发布者最好的起点。

DailyRazor（http://www.dailyrazor.com）——它们的 RazorLIMIT 和 RazorSTARTER托管套件是全功能而可靠的。

LunarPages（http://www.lunarpages.com）——基本托管套件适合于所有个人和小企业网站。

好的托管提供商的一个特性是它们为你提供“控制面板”，用来管理你的账户的各个方面。如图 1.3 所示，显示了我自己在 Daily Razor 的 RazorPRO 主机账户的控制面板。许多Web托管提供商提供自己的特殊控制面板软件，或者一些设计相似的控制面板——清晰标示的图标使你能够进行配置和管理账户。

图1.3 一个控制面板实例

你可能永远不需要使用控制面板，但是它可以使你简化数据库和其他软件的安装，查看Web统计，以及E-mail地址的添加（还有许多其他功能）。如果你能够按照说明书进行，就能管理自己的Web服务器——不需要特殊的培训。

刚刚讨论了Web内容交付的过程和Web服务器的获得，回到使用多种Web浏览器测试你的网站看上去有点奇怪。但是，在你离开并且学习所有关于使用HTML和CSS创建网站的知识之前，要记住这个非常重要的事实：你的网站的每个访问者可能使用和你不同的硬件和软件配置。他们的设备类型（台式机、笔记本、智能电话、iPhone）、屏幕分辨率、浏览器类型、浏览器窗口大小、连接速度——记住，你不能控制访问者查看你的网站时的任何方面。

尽管所有Web浏览器以总体相同的方式处理信息，但是它们之间有些特殊的差异导致在不同的浏览器中显示的结果不总是相同。即使使用相同的浏览器的相同版本也可能由于选择不同的显示选项和/或改变视窗大小而改变页面的外观。所有主要的浏览器都允许用户用自己的选择覆盖网页创作者指定的背景和字体。屏幕分辨率、窗口大小和可选的工具栏也可能改变页面第一次出现在屏幕上时所显示的部分。你只能确保你编写了兼容标准的HTML和CSS。

在任何情况下，都不要花费时间去设计在自己的计算机上看上去“完美”的东西——除非你愿意在朋友的计算机上、街上的咖啡店里的计算机上或者你的iPhone上查看时感到失望。

你应该始终用尽可能多的Web浏览器来测试网站，如下所示。

Apple Safari（http://www.apple.com/safari/）for Mac and Windows

Google Chrome（http://www.google.com/chrome）for Windows

Mozilla Firefox（http://www.mozilla.com/firefox）for Mac, Windows and Linux

Microsoft Internet Explorer（http://www.microsoft.com/ie）for Windows

Opera（http://www.opera.com/）for Mac，Windows and Linux/UNIX

本章为你介绍了使用HTML标记文本文件以生成Web内容的概念。你还学到了Web内容有比“页面”更多的含义——Web内容还包含图像、音频和视频文件。所有这些内容存在于一个Web服务器上——一台通常远离你的计算机的远程机器。在你的计算机或者其他设备上，你使用Web浏览器请求、读取，并且最终在你的屏幕上显示Web内容。

你学习到在确定Web托管提供商是否适合你的需求时所应该考虑的标准。你还学习了在你的作品放置到 Web 服务器上时用多种浏览器测试的重要性。编写正确的、与标准兼容的HTML和CSS将帮助确保你的网站对于所有访问者来说外观很相似，但是你仍然不应该在没有接受开发团队之外的潜在用户的意见情况下进行设计——当你是一个个人的“设计团队”时得到别人的意见更加重要！

问：你用“Web内容”代替了“网页”，但是我听到人们说“网页”。它们的意思是什么？这些术语和“主页”、“网站”有什么不同？

答：将万维网比喻为图书馆易于让人们理解。在这个图书馆中，单独的网站就是书。网站上的单独文件就是“页”。一个“网站”由一起创建并且内容相关的一页或者多页组成。“主页”通常指的是人们访问网站时看到的第一个网页。但是问题出现了，当人们在实际上意为“来我的网站”时说“访问我的网页”——网站充满了网页。将一个 Web 内容集合称作页面而不是网站说明你还没有真正理解Web 的工作方式——这是因为你不理解Web 内容在一起创建网站的方式，或者因为你已经计划，设计并且实现了一个内容都在一个页面上的网站！

问：我已经看到了Internet上一些网页的“源代码”，它看起来难以学习。我必须像编程人员那样思考才能学习这些内容吗？

答：尽管复杂的HTML页面确实看起来令人生畏，但是学习HTML比学习真正的软件编程语言（如C++或者Java）要容易得多。HTML是一种标记语言而不是编程语言，标记文本可以被浏览器以特定的方式呈现。这是与开发计算机程序完全不同的思想过程。你真的不需要任何编程人员的经验或者技能，就能成为成功的Web内容创作者。

许多商业网站背后的HTML看上去很复杂的原因之一是它可能由可视化的Web设计工具创建——“所见即所得”或者“WYSYIWYG”编辑器将使用软件开发者告诉它在特定情况下使用的标记——而在手工编码中，你完全控制所产生的标记。在本书中，你从头开始学习基础的编码，这一般产生清晰易读的源代码。可视化Web设计工具有让代码难以理解的倾向，还会生成复杂而不兼容标准的代码。

作业包括测验和帮助你巩固对包含的素材理解的联系。在看后面的答案之前，尝试回答所有问题。

1．定义术语“Web内容”。

2．产生一个带有一些文本和两个图像的网页需要在Web服务器上存储几个文件？

3．寻找一个Web托管供应商时，需要注意的一些特性是什么？

1．Web内容是描述从Web服务器传递到Web浏览器的文本、图像、音频、视频和其他媒体文件的全称。

2．你需要3个文件：一个用于网页本身，其中包含了文本和HTML标记；两个图像各为一个文件。

3．寻求可靠性、客户服务、Web空间和带宽、域名服务、网站管理附加功能以及价格。

安排你的 Web 托管——你打算在你自己的计算机上本地查看文件来完成本书的课程，还是打算使用一个Web 托管提供商？注意，大部分Web 托管提供商将使你在购买托管计划的同一天就能够工作。

本章中你将学到：

使用文本编辑器创建一个基本的HTML文件的方法

使用FTP将文件传送到你的Web服务器的方法

文件在Web服务器上应该存储的位置

在没有Web服务器的情况下分发Web内容的方法

使用其他发布方法（如博客）

在前一章中，你学习了通过Web浏览器请求Web内容的过程以及Web服务器对这些请求的响应方式，在本章中，将学到你作为内容创建者，使Web内容在网上可用的入手点——你必须在一个Web服务器上发布这些内容以便其他人能找到它。

在我们开始之前，看看程序清单2.1，这个程序清单表现了一些简单的Web内容——以大的加重字体，在浏览器窗口居中的两行打印“Hello World!Welcom to My Web Server。”（你好，世界！欢迎来到我的Web服务器。）的HTML代码行。

程序清单2.1 我们的HTML文件示例

为了使用这些内容，打开你选择的一个文本编辑器，如记事本（Windows上）或者TextEdit （在 Mac 上）。不要使用写字板、Microsoft Word 或者其他全功能的字处理软件，因为这些软件创建的文件不同于我们用于Web内容的普通文本文件。

注意：你将在第3章学到更多关于文本编辑器的内容。现在，我们只希望你有一个可以放到Web服务器上的示例文件！

输入你在程序清单2.1中看到的内容并以sample.html文件名保存。.html扩展名告诉Web服务器你的文件确实充满了HTML。当文件内容被发送到请求它的Web浏览器，浏览器也将指导它是HTML，并且正确地呈现它。

现在你有了一个HTML文件示例——并且幸运地有一个地方放置它，比如Web托管账户——让我们来发布你的Web内容。

正如你目前所学习到的，你应该将Web内容放置到一个Web服务器上使其可为其他人所访问。这个过程一般通过使用文件传输协议（FTP）来完成。为了使用 FTP，你需要一个FTP客户端------一个用于从你的计算机向Web服务器传送文件的程序。

FTP客户端需要3部分的信息以便连接到你的Web服务器，这些信息将在你的托管提供商建立你的账户后发送给你。

你所连接的主机名或者地址

你的账户用户名

你的账户密码

一旦你有了这些信息，你就可以使用一个FTP客户端来将内容传递到你的Web服务器。

不管你使用什么FTP客户端，FTP客户端一般使用相同类型的界面。如图2.1所示，显示了一个FireFTP的示例，它是用于Firefox浏览器的FTP客户端。本地计算机的目录列表出现在屏幕的左边，远程机器（Web服务器）的目录列表出现在右边。一般你将看到右箭头和左箭头按钮（见图 2.1）。右箭头将所选文件从你的计算机发送到 Web 服务器，左箭头从Web服务器发送文件到你的计算机。许多FTP客户端还允许你选择文件并且拖放到目标机器。

你有许多免费的 FTP 客户端可用，但是你也可以通过基于 Web 的文件管理器工具来传递文件，这可能是你的Web服务器控制面板的一部分。但是，这种文件传输方法一般引入更多的步骤，不像在你的计算机上安装一个FTP客户端那么简单。

下面是一些流行的免费FTP客户端。

Classic FTP（http://www.ncsoftware.com/classic/）for Mac and Windows

Cyberduck（http://cyberduck.ch/）for Mac

Fetch（http://fetchsoftworks.com/）for Mac

FileZilla（http://filezilla-project.org/）用于所有平台

FireFTP（http://fireftp.mozdev.org/）用于所有平台的 Firefox 扩展

图2.1 FireFTP界面

一旦你选择了一个 FTP 客户端并且安装在你的计算机上，你就可以上传和从你的 Web服务器下载文件。在下一小节，你将看到这一过程，使用本章开始创建的示例文件。

接下来的步骤说明了使用Classic FTP连接到你的Web服务器并且传送一个文件的方法。但是，所有FTP客户端使用大致相似的界面。如果你理解了下面的步骤，你应该能够使用任何FTP客户端。

记住，你首先需要主机名、账户用户名和账户密码。

1．启动 Classic FTP 程序，单击 Connect（连接）按钮。你将被提示输入希望连接的网站的信息，如图2.2所示。

图2.2 在 Classic FTP 中连接到新的网站

2．输入图2.2中所示的所有项目。

Site Label（网站标签）是你用于引用自己的网站的名称。其他人不会看到这一名称，所以输入你希望的任何名称。

FTP Server（FTP 服务器）是你需要发送网页的 Web 服务器的 FTP 地址。这个地址将由你的Web托管提供商给出。它可能是yourdomain.com，但是要检查签署服务时收到的信息。

User Name（用户名）和 Password（密码）也应该使用你的托管提供商给出的信息填写。

在你习惯使用客户端并且确定了工作流之前，不要改动 Initial Remote Directory onFirst Connection（第一次连接时的初始远程目录）和 Initial Local Directory on First Connection（第一次连接时的初始本地目录）。

3．完成了这些设置之后，单击OK保存设置并且建立与Web服务器的连接。

4．你将会看到一个对话框指示 Classic FTP尝试连接到 Web 服务器。在成功的连接时，你将看到如图2.3所示的界面，在左边显示本地目录内容，右边显示Web服务器的内容。

图2.3 通过 Classic FTP的一个成功的远程Web服务器连接

5．你现在几乎已经为向Web服务器传送文件做好了准备。剩下的工作就是将目录修改为你的Web服务器的称为文档根的目录。你的Web服务器的文档根目录是被设计为你的Web内容最高级目录的目录——目录结构的起始点，你将在本章中学到更多关于它的内容。通常，这个目录被命名为public_html（如图2.3所示）、www（在图2.3中也能看到，因为www被创建为public_html的别名）或者htdocs。这不是你必须创建的目录，因为你的Web托管提供商已经为你创建了。

6．双击文档根目录打开它。FTP客户端界面的右边将显示为该目录的内容（这时候它可能为空，除非你的Web托管提供商已经为你在这个目录中放入了占位文件）。

7．目标是将你前面创建的 sample.html 文件从你的计算机传送到 Web 服务器。在 FTP客户端界面的左边的目录里表中寻找文件并且单击以加亮文件名。

8．单击客户端界面中间的右箭头按钮将文件发送到Web服务器。一旦文件传送完成，客户端界面的右边将刷新，让你看到文件已经到达其目的地。

9．单击 Disconnect（断开）按钮关闭连接，然后退出 Classic FTP程序。

每当你要通过 FTP 传送文件到你的 Web 服务器，概念上都与这些步骤相似。你还可以使用你的 FTP 客户端创建远程 Web 服务器上的子目录。为了使用 Classic FTP创建子目录，单击 Remote（远程）菜单，并且单击 New Folder（新建文件夹）。不同的FTP 客户端有达到相同目标的不同界面选项。

维护Web内容的一个重要方面是确定组织内容的方法——不仅是为了用户寻找，也为了你在服务器上的维护。将文件放到指定目录中将帮助你管理这些文件。

在你的Web服务器上命名和管理目录，并且开发文件维护规则，这完全取决于你。但是，维护一个精心组织的服务器使你在长期中更加有效地管理它的内容。

在你浏览Web时，你可能已经注意到URL随着你在网站之间浏览而变化。例如，如果你查看一个公司的网站并且单击图形化导航进入公司的产品或者服务，URL可能从

http://www.companyname.com/

变成

http://www.companyname.com/products/

或者

http://www.companyname.com/services

在前一小节中，我使用术语“文档根目录”而未作真正的解释。Web服务器的文档根目录实际上是完整的 URL 中后缀的“斜杠”。例如，如果你的域名是 yourdomain.com，你的URL 为 http://www.yourdomain.com/，那么文档根目录是由后续的斜杠（/）代表的目录。文档根是在你的Web服务器上创建的目录结构的起始点，这时Web服务器开始查找Web浏览器请求的文件的开始位置。

如果你将sample.html按照刚才的指示放在文档根目录，那么你将能够通过Web浏览器在如下URL中访问它：

http: //www.yourdomain.com/sample.html

如果你在Web浏览器中输入这个URL，你将看到如图2.4所示的sample.html。

但是，如果你在文档根目录中创建了一个新的目录（newdirectory）并且将 sample.html放在那个目录，那么文件可能在如下URL中访问：

http: //www.yourdomain.com/newdirectory/sample.html

如果你将sample.html放在你连接服务器时原来看到的目录中——也就是说，你不改变目录并将文件放在文档根目录——那么sample.html文件将无法以任何URL在你的Web服务器上访问到。文件将仍然存在于你的Web服务器上，但是因为文件不在文档根目录——服务器软件所知的开始寻找文件的位置——它将永远不能被通过Web浏览器访问的人读取到。

图2.4 通过一个Web浏览器访问的sample. html文件

根本的原则是什么？始终导航到你的Web服务器的文档根目录，然后才开始传送文件。

对于图形和其他多媒体文件尤其如此。Web服务器上常用的一个目录称为“images”，你可以想象，这是所有图像资源放置的位置。其他常见的目录包括用于样式单文件的“CSS”（如果你使用超过一个样式单）以及用于外部 JavaScript 文件的“JS”。或者，如果你知道你将在网站上安排一个部分，访问者可以从这里下载许多其他不同类型的文件，你可能称这个目录为“downloads”。

不管是包含你的艺术相集的ZIP文件还是具有销售数字的Excel试算表，在互联网上发布网页之外的文件都是有帮助的。为了使非HTML文件在Web上可用，只要按照本章前面的上载说明，将文件如同HTML文件一样上传到Web服务器。当文件上传到Web服务器之后，你可以创建一个指向它的链接（你将在后面的章节中学习到）。换句话说，你的 Web 服务器能够提供远远超过HTML的服务。

本章中你将学习到一个HTML代码样板。如下的代码将被用于一个名为artfolio.zip文件，该文件位于你的网站的 downloads 目录，链接文本称为“Download my art portfolio!”：

<a href="/downloads/artfolio.zip>Download my art portfolio!</a>

当你想到一个索引的时候，你可能想到的是书籍最后告诉你到哪里寻找各种关键词和主题的部分。Web服务器目录中的索引文件可以服务于这一目的——如果你这么设计它。实际上，这就是这个名字的来源。

index.html（或者只称之为索引文件，正如一般提到的那样）是你为希望人们在导航到你的网站的特定目录时看到的默认文件所取的名字。如果你创建该页的时候牢记可用性，你的用户将从索引页面中得到该部分的所有内容。

例如，如图2.5所示，显示了包含指向3个页面的链接的下拉式导航和左边导航：Solutions Overview（解决方案概述，索引页本身所在的部分）、Connection Management（连接管理）和 Cost Management（成本管理）。页面本身的内容——称为 index.html，位于 solutions 目录中——还链接到solutions部分的其他两个页面。当用户到达这个特殊网站的solutions部分时，他们能够到达该部分的任意其他页面（并且可以用3种不同的途径）。

图2.5 展示一个好的区域索引页面

索引页面的另一个功能是当用户访问你的网站上具有索引页面的一个目录，但是没有指定该页时，他们将会登录到你的网站该部分（或者网站本身）的主页面上。

例如，在前一个示例中，用户可以输入下面的某个URL并且登录到网站solutions部分的主页面：

http://www.ipass.com/solutions/

http://www.ipass.com/solutions/index.html

如果solutions目录下没有index.html页面，结果将取决于Web服务器的配置。如果该服务器被配置为不允许目录浏览，用户将在尝试访问没有具体的页面名称的 URL 时看到“Directory Listing Denied”（目录列表被拒绝）信息。但是，如果服务器被配置为允许目录浏览，用户将会看到该目录的文件。

这些服务器配置选项将已经由你的主机提供商为你确定。如果你的主机提供商允许你通过控制面板修改服务器配置，那么你可以修改这些设置，这样你的服务器根据你的需求对请求进行响应。

索引文件不仅用于子目录，它也用在网站的顶级目录（或者文档根目录）。你的网站的第一个页面——或者称为主页（home page），或者其他用来称呼你希望用户在访问你的域时首先看到的Web 内容的词——应该被命名为index.html并且放在Web 服务器的文档根目录中。这将确保用户在Web浏览器中输入http://www.yourdomain.com/时，服务器将以你打算让他们看到的内容响应（而不是“目录列表被拒绝”或者其他不希望的后果）。

在网上发布HTML和多媒体文件是学习HTML并且创建Web内容的主要原因。但是在有些情况下却不是这样。例如，你可能希望在一个商业展览会上分发带有被设计为Web内容的营销材料的CD-ROM、DVD-ROM或者U盘——也就是说，通过Web浏览器能够查看的超链接文本，但是不需要有Web服务器。你还可能希望将基于HTML的说明手册包含在培训班的学生的可移动媒体上。这只是HTML页面可以被用在不涉及互联网的发布方案的两个示例。

这个过程也被称为创建本地网站。即使没有包含Web服务器，这些超文本内容仍然被称为网站。使用本地这个术语是因为你的文件在本地而不是远程（通过Web服务器）访问。

我们假定你需要创建一个希望分发到U盘上的本地网站。现在即使最便宜的U盘也能包含这么多的数据——而基本的超文本文件相当小——你可以在一个小U盘上分发整个网站和一个全功能的Web浏览器。

注意：发布一个 Web 浏览器在创建一个本地网站时不是必须的，但是这是很好的做法。你可以合理地假定用户有自己的 Web 浏览器并且将打开目录中的index.html开始浏览超链接内容。但是，如果你希望在U盘上分发一个Web 浏览器，到 http://www.portableapps.com/寻找 Portable Firefox。

只要把你的U盘的目录结构看作Web 服务器的目录结构。U盘的顶级目录可以是你的文档根目录。如果你和内容一起分发一个浏览器，你可能有两个目录——例如，一个名为browser，另一个名为 content。在这种情况下，content 目录将是你的文档根目录。在文档根目录中，你可以有更多的子目录，用来放置内容和其他多媒体文件。

保持好的组织对本地网站和远程网站同样重要，这样你避免了 HTML 文件中失败的链接。你将在后面的章节中学习更多关于链接在一起的文件的知识。

你可能有一个第三方主办（如Blogger或者WordPress）的博客，因此在没有专用的Web服务器甚至不了解任何HTML的情况下已经发布了内容。这些服务除了源代码编辑器之外还提供可视化编辑器，这意味着你可以输入你的文字并且添加视觉格式如加粗、斜体或者字体颜色，而不需要了解这些操作的HTML。但是这些内容在你单击这些编辑器的Publish（发布）按钮时仍然变成HTML。

但是，使用你在本书中将会获得的知识，你的博客将因为你能够为博客帖子内容和博客模板使用源代码编辑器而改进，从而给你对这些内容的观感更多的控制。这些操作和你学到的创建一个HTML文件和通过FTP上传到专用的Web服务器的过程不同，但是我如果不指出博客实际上是Web发布的一种形式，那就是我的疏忽。

当你传送文件到Web服务器或者将它们放置到可移动媒体用于本地浏览，你应该立即完全测试所有页面。下面的检查列表将帮助确保你的Web内容的表现符合你的预期。注意，某些术语现在对你来说有点不熟悉，但是随着你进一步学习并且创建更大的项目，可以再回到这一列表。

在传送文件之前，在你的计算机上测试以确保链接有效，内容反映你的视觉设计。在传送页面到Web服务器或者可移动设备之后，再次测试。

在可能的情况下用尽量多的浏览器进行这些测试——Chrome、Firefox、InternetExplorer、Opera和Safari——并在Mac和Windows平台上都进行测试。如果可能，以低分辨率（800像素×600像素）和高分辨率（1600像素×1200像素）分别测试。

在开始测试之前关闭Web浏览器的自动图像装入，这样你可以看到每个页面没有图像时的样子。检查alt标签文本然后开启图像装入，装入图形并且重新小心查看页面。

使用浏览器字体大小设置，以各种字体大小来查看每个页面，确保如果用户用自己的字体规格覆盖你的，你的布局不会破坏。

等待每个页面完全结束装入，然后滚动到底确定所有图像出现在应该出现的位置。

观察每个页面装入花费的时间。装入是否花费超过几秒钟？如果这样，这个页面上的信息是否宝贵到足于阻止用户在页面装入结束前转向别处？诚然，宽带连接很普遍，但是这并不意味着你可以在你的页面上载入1MB大小的图像。

如果你的页面通过了所有这些测试，你可以轻松一下了，你的网站已经为公众的查看做好了准备。

你以创建一个非常简单的HTML文件开始了本章，将其用作传送文件到Web服务器的过程的测试文件。你学习了文件传送过程的工作方式以及进行这些传送所需要的软件类型（FTP客户端）。你还学习了一些关于Web服务器目录结构和文件管理，以及给定的Web服务器目录中 index.html 文件的重要作用的知识。你还学到，可以在可移动媒体上分发内容，以及着手构造文件和目录，以达到不使用远程Web服务器查看内容的目标的方法。最后，你学习到了在向公众发布你的网站之前，测试文件的方法。

问：你建议的所有测试将比创建我的页面花的时间还多！我不能测试得少一些吗？

答：如果你的页面不是用来赚钱或者提供重要的服务，那么对一些用户来说它们看上去很滑稽，或者偶尔出点错误可能不是大事。在那种情况下，只要用两种不同的浏览器测试各个页面就可以收工了。但是，如果你需要建立一种专业的形象，严密的测试是不可替代的。

问：说真的，谁关心我如何组织Web内容呢？

答：不管你信不信，Web内容的组织对搜索引擎和网站的潜在访问者是很重要的——你将在第24章中学到更多这方面的知识。但是总的来说，拥有一个有组织的Web服务器目录结构将帮助你跟踪可能经常更新的内容。例如，如果你有一个图像或者多媒体的专用目录，你将精确地知道到哪里查找希望更新的文件——不需要找遍包含其他内容的目录。

作业包括测验和帮助你巩固对包含的素材理解的联系。在看后面的答案之前，尝试回答所有问题。

1．通过FTP连接到你的Web服务器，需要哪三部分信息？

2．index.html文件的用途是什么？

3．你的网站是否必须包含一个目录结构？

1．主机名，你的账户用户名，和你的账户密码。

2．index.html 文件一般是 Web 服务器中一个目录的默认文件。它允许用户访问 http://www.yourdomain.com/somedirectory/而不需要使用一个文件名后缀并得到正确的位置。

3．不。使用目录结构组织文件完全取决于你，但是强烈建议使用，因为它简化了内容维护。

使用你的FTP客户端，在你的网站的文档根目录中创建一个子目录。将sample.html文件的内容粘贴到另一个名为index.html的文件中，将<title>和</title>标签之间的文本改成新的内容，并将<h1>和</h1>标签之间的文本改成新的内容。保存文件并将其上传到新的子目录。使用你的浏览器导航到 Web 服务器上的新目录查看出现的index.html文件内容。然后，使用你的FTP客户端，删除远程子目录的index.html。用你的浏览器返回那个URL，重新装入页面，看看没有index.html的情况下服务器的响应。

使用上面的练习中创建的相同文件组，将这些文件放到可移动媒体设备——例如一个CD-ROM或者一个U盘。使用你的浏览器导航你的样板网站的这个本地版本，并且思考一下，你必须与这个可移动媒体一起分发的说明，以使其他人能够使用它。