详情
本书是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本，作者在本书囊括了最新的HTML5与CSS3技术，并采用实例方式讲解了这些技术的实用技巧和注意事项。通过本书的学习，读者可以开发出交互性的动态Web站点。
书名：21天学通HTML+CSS+JavaScript Web开发（第7版）
ISBN：978-7-115-43285-8
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [美] Laura Lemay Rafe Colburn Jennifer Kyrnin
译 袁国忠
责任编辑 傅道坤
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
Laura Lemay, Rafe Colburn and Jennifer Kyrnin: Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day (Seventh Edition)
ISBN: 0672336235
Copyright © 2016 by Pearson Education, Inc.
Authorized translation from the English languages edition published by Pearson Education, Inc.
All rights reserved.
本书中文简体字版由美国Pearson公司授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。
版权所有，侵权必究。
本书是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本，作者在本书囊括了最新的HTML5与CSS3技术，并采用易于理解的步骤式教程讲解了这些技术的实用技巧和注意事项。通过本书的学习，读者可以开发出交互性的动态Web站点。
本书总共分为6部分，第1部分是基础知识，讲解了Web发布的基本概念以及相关工具、HTML与CSS的简介；第2部分是创建网页相关的内容，包括HTML的基本知识、使用列表组织信息、使用链接；第3部分是HTML和CSS的高级用法，包括使用HTML和CSS设置文本的格式、使用CSS设置网站的样式、在网页中使用图像、创建表格、使用CSS定位元素、设计表单、使用HTML5定义页面的结构、集成音视频等多媒体、使用CSS设置页面布局，以及响应式Web设计等；第4部分则介绍了JavaScript和jQuery的知识，内容包括JavaScript简介、在页面中使用JavaScript和jQuery、使用框架和链接窗口；第5部分则讲解了移动Web设计与用户体验设计；第6部分介绍了将网站发布到Web上的内容，具体包括如何发布网站、使用服务器、使用搜索引擎和SEO技术提升网站的曝光率。
本书内容基础扎实，示例丰富实用，适合初中级水平的网站设计、开发人员阅读。
Rafe Colburn是一位Web开发人员兼作者，拥有15年的网站开发经验；他还出版了Special Edition Using SQL和Sams Teach Yourself CGI in 24 Hours等著作；您可通过其博客（http://rc3.org）或Twitter账户@rafeco与他取得联系。
Jennifer Kyrnin是一位Web设计人员兼作者，从1995年起就一直从事互联网领域的工作；她还出版了Sams Teach Yourself Bootstrap in 24 Hours、Sams Teach Yourself Responsive Web Design in 24 Hours和Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours等著作；您可通过http://htmljenn.com/或Twitter账户@htmljenn与她取得联系。
Laura Lemay是全球最受欢迎的Web开发图书作者之一，其著作包括Sams Teach Yourself Web Publishing with HTML、Sams Teach Yourself Java in 21 Days和Sams Teach Yourself Perl in 21 Days等。
在过去的十年中，Web已成为人类社会不可分割的一部分：企业大多都有网站，而电视广告很少有不显示URL的。最能说明问题的一个简单事实是大多数人都知道URL是什么；几年前不知道互联网为何物的人现在通过FaceBook又与高中同学联系上了。
Web最大的优点是，即便不是什么大公司，也能在Web上发布信息。您只要有一台能够访问互联网的网站并愿意学习，就能创建自己的网站。您既然选择了阅读本书，显然是对Web发布感兴趣。您之所以学习Web发布，可能是出于工作需要，也可能是旨在寻找新的自我表达途径，还可能是想将小宝宝的照片发布到Web上，让居住在全国各地的亲戚能够了解孩子的最新情况。问题是您如何开始学习呢？
网上有关如何像久经沙场的专业人员一样发布网站的信息浩如烟海，有教程，有参考手册，有数不胜数的示例，还有简化Web发布工作的免费工具。为何要选择阅读本书呢？这样做的优点在于，它集合了创建网站所需的全部知识，并以循序渐进的方式呈现出来。本书涵盖了精通HTML、将网站发布到Web服务器、创建用于Web的图形以及确保网站平稳运行所需的全部知识。
然而，这些还不是本书的全部内容。其他介绍如何创建网页的图书只涉及基本的技术细节，如将文本设置为粗体，而在本书中，您还将学习使用特殊效果的原因以及该在什么情况下使用它们。除页面本身外，本书提供了网站整体结构设计方面的提示、建议和示例。本书并非仅仅介绍如何创建网站，而将介绍如何创建卓越的网站以及如何吸引访客来访问它。
本书的示例都符合HTML5和CSS3标准，并尽可能使用所有最新浏览器都支持的标签。每当使用已摒弃或HTML5不支持的标签时，都会明确地指出这一点。
为方便获得本书最新的修订、下载或勘误，请访问www.informit.com/register并注册。
本书适合您阅读吗？这取决于：
本书各章以合理的顺序排列，让您从完成最简单的任务着手，最终掌握复杂的技巧。
市面上有很多介绍如何使用Web的图书，但本书不是这样的。要阅读本书，读者必须能够连接到互联网，安装了Chrome、Safari、Firefox、Opera、Internet Explorer 10或Microsoft Edge等现代浏览器，并熟悉Web和互联网的基本工作原理，还必须对电子邮件和FTP等互联网的其他方面略知一二，因为本书经常会提及它们。
换而言之，您必须使用过Web来提供内容。如果您符合这种要求，就接着往下阅读吧！
本书的很多屏幕截图都是在Macintosh计算机上截取的，但如果您使用的是Windows或Linux计算机，也可完成所有这些工作。您只要熟悉您使用的操作系统的工作原理，并能找到常用的程序就可以了。
千里之行，始于足下；这是学习编写、设计和发布网页之旅的第一站，但实际踏上旅程前，您应学习一些简单的基础知识，包括：
当前Web无处不在，因此本章的内容可能有点老生常谈。如果您这么认为，可大致地扫一眼，再进入第2章，迈出创建网页的第一步。
从用户的角度看，您很可能很熟悉Web。您使用喜欢的Web浏览器访问网站，通过它们查找信息、购物或了解朋友的最新动态。您还可能使用Web浏览器来查看邮件、了解日程安排以及完成工作。
要成为Web发布者，就必须明白用户在Web浏览器中输入地址或单击链接以访问网站时发生的情况。从技术角度阐述Web前，先来给它下个定义。
Web是：
下面从您如何将Web用作发布媒介的角度详细说说上述说法的含义。
超文本的含义是，不像看书那样以线性方式阅读，而是可以轻松地从一个地方跳到另一个地方：您可获取更详细的信息、再回过头去阅读、跳到其他主题或根据兴趣阅读。
超文本让您能够根据兴趣以非线性方式阅读文字和可视化信息。
看到术语超文本时，将其视为链接即可；事实上，现在还有人将链接称为超链接。访问网页时，您很可能发现其中充斥链接。有些链接指向当前网页的其他地方，有些指向当前网站的其他网页，还有些指向其他网站的网页。超文本这个概念在Web面世前就存在，它早已被用于HyperCard等应用程序和各种帮助系统中。然而，万维网重新定义了超文本系统的规模。即便只考虑一个大型网站这样的超文本系统，其规模也是前所未见的；如果再考虑到这样一点，即从位于美国的服务器链接到位于澳大利亚的服务器上的文档时，并不比链接到当前目录中的文档更难，就可以想象出Web的规模有多大了。
几乎所有的大中型企业和组织都使用Web技术来管理项目、订购原材料以及在无纸环境中发布信息。通过将文档放在安全的私有Web服务器（内联网）上，这些企业和组织既利用了万维网提供的技术，又确保了其信息不向外传播。
只要能够访问Internet，就能够访问万维网，不管您使用的是智能手机、平板电脑、全新的笔记本电脑还是在跳蚤市场购买的台式机。不管您喜欢Windows还是Macintosh的菜单和按钮，亦或认为Macintosh和Windows都弱爆了，都没有关系，因为万维网不在乎访问设备是什么，也不在乎它是哪家公司生产的——它完全是跨平台的。
跨平台意味着不管使用的是什么计算机硬件，也不管它运行的是哪种操作系统，装备的是什么显示器，都可以一样地访问Web信息。
跨平台是一种理想
在纯粹主义者看来，Web的核心就是跨平台。然而，理想很丰满，现实很骨感。多年来，随着众多特殊功能、技术和媒体类型的推出，Web的跨平台特征遭到了损害。Web发布者可选择使用非标准特性，如Flash，但这样做将缩小其网站的受众范围，如果考虑到越来越多的人转而使用智能手机和移动设备来访问Web，这一点尤其明显。Web发布者还必须做出如下选择：专门创建用于移动设备的应用程序，还是打造跨平台兼容性更强的Web应用程序。该不该为特定平台提供更强大的功能而降低跨平台灵活性呢？这完全由各个发布者决定。
Web内容可能消耗大量的存储空间，其中包含图像、音频和视频时尤其如此。为存储发布到Web上的所有信息，需要海量的磁盘空间，而要对所有这些信息进行管理，几乎是一项不可能完成的任务（有人尝试过）。
Web为何能成功地提供海量信息呢？因为这些信息分布在全球的数百万个网站中，而每个网站都分别存储其发布的信息。每个网站驻留在一台或多台被称为Web服务器的计算机上。Web服务器也是计算机，只是负责侦听并响应来自Web浏览器的请求。作为信息消费者时，您请求服务器提供资源以便查看它。您只是将浏览器指向网站，别的什么都没有做。
网站是Web上一个发布信息的位置。您浏览网页时，浏览器连接到网站以获取该网页。
每个网站、网站的每个网页乃至每项信息都有独一无二的地址，这种地址被称为统一资源定位符（URL）。有人让您访问网站http://www.nytimes.com/时，他只是给您提供了一个URL。每当您使用浏览器访问网站时，都使用URL。本章后面的“统一资源定位符”一节将更详细地介绍URL。
对于存储在Web上的信息，要获取其永久性拷贝，您必须将其存储到本地，因为这些内容可能随时发生变化，甚至在您查看网页时就发生了变化。
浏览信息时，您无须安装帮助系统的新版本，不必再买本新书，也不用致电技术支持以获取最新的使用指南，您只需启动浏览器即可。
发布到Web时，您可确保信息始终是最新的，而无须花大量时间重新发布更新后的文档。另外，没有材料成本：您无须让人根据装订数量或输出质量进行报价；也不会因为是彩印而需要额外花钱。不会有顾客因为购买了4年前的过期版本而打电话投诉。
来看完全在线发布的图书，如Cory Doctorow的著作Little Brother（其发布网址为http://craphound.com/littlebrother/）。作者可更正该书的任何错误，并将修订后的文本上传到网站，这样读者马上就能看到。有翻译版上市后，作者可发布广告，如图1.1所示。
图1.1 发布图书Little Brother的网站
本书的屏幕截图都是在运行在OS X上的Google Chrome或Safari上截取的，这只是因为我编写本书时使用的是Apple Macintosh。如果您使用的是其他操作系统，不要觉得自己受了冷落。前面说过，Web的优点在于，不管您使用的是哪种平台，看到的信息都相同。
对于有些网站来说，能够随时动态更新正是它们存在的原因所在。图1.2显示了BBC新闻频道的主页，这个网站24小时更新，实时地报告最新发生的新闻。这个网站能够发布最新发生的新闻，其及时性是报纸无法比拟的。BBC新闻频道的网址为http://www.bbc. co.uk/news/world/。
图1.2 BBC新闻频道
当前，用户甚至都无须重新加载网页就能看到最新的信息。通过使用第17章将讨论的JavaScript，您可实时地更新网页的内容。在图1.3所示的NBA比赛网页中，比分和统计信息与比赛同步更新。
图1.3 CBS体育网站实时更新比赛情况
交互性指的是能够与Web服务器“对讲”。电视等传统媒体丝毫没有交互性，受众能做的只是坐下来观看——播什么就看什么。除了更换频道，受众没有多大的选择权。Web天生就是交互式的，这种交互性是通过单击链接跳到其他网页实现的。然而，除了这种简单的交互性外，Web还让您能够同发布者和其他用户交流。
事实上，当前最流行的网站都旨在让用户能够与其他用户（而不是发布者）交互，这就是所谓的社交媒体。当前，网站不再花钱雇佣作者和摄影师，而雇佣程序员来营造空间，让大家能够分享自己创建的内容。如果您看到有人对着电视大声朗读Twitter或Facebook上的帖子，不要大惊小怪，这正是社交媒体的发展现状。
作为Web发布者，您需要决定您的网站该提供什么样的交互。您可发布不给用户提供任何交互空间的网页；可让用户提交非公开的反馈；可让用户发布公开的评论、与您唱反调或彼此斗嘴；可提供论坛，让用户彼此直接交互；可提供游戏或其他交互性功能；还可集成其他网站的交互功能，从而将您的网站与这些网站关联起来。例如，图1.4显示了一个被集成到第三方网站的Facebook小部件。
图1.4 一个Facebook小部件
前面说过，Web浏览器是一款应用程序，您使用它来浏览网页以及在万维网中导航。Web浏览器有很多，适用于您想象得到的任何平台的都有。例如，Windows自带Microsoft Internet Explorer，OS X自带Safari，而Mozilla Firefox、Google Chrome和Opera都可免费下载。另外，通过移动设备和平板电脑使用浏览器的人越来越多。iPhone和iPad自带了Mobile Safari，Android移动平台也自带浏览器。还有其他移动平台（如BlackBerry和Windows Phone）以及用于Android和iPhone的第三方浏览器。就在几年前，Internet Explorer还在Windows浏览器中占据统治地位，OS X的市场份额不到5%，而移动浏览器的功能很有限，根本就不能显示常规网页。那个时候，很多开发人员都选择支持Internet Explorer，而根本不考虑其他浏览器。现在，这样的做法再也不可行了。
仅当您确定只有使用特定浏览器（如Internet Explorer）的用户访问您的网站时，选择针对该浏览器进行开发才是合适的。在实现内联网的组织中，这种开发方式很常见。在这种情况下，完全可以认为组织的所有用户都将使用提供给他们的浏览器，因此设置内联网上的网页时，可以使用该浏览器特有的功能。
Web浏览器的核心目标是连接到Web服务器并请求文档，再妥善地设置这些文档的格式并显示它们。Web浏览器还可显示本地计算机中的文件、下载并非用于显示的文件，甚至让用户能够发送和接收电子邮件。然而，浏览器最擅长的还是获取并显示Web文档。所有网页都是使用超文本标记语言（HTML）编写的，这种语言指定网页包含的文本、描述网页的结构、指定到其他文档和图像等多媒体的链接。对于从Web服务器获取的信息，浏览器设置其格式以便显示。即便是同一个文件，不同浏览器设置其格式和显示它的方式也可能不同，这取决于系统的功能以及浏览器的配置。
您很可能只使用一两款浏览器，例如，在计算机上使用一款浏览器，在移动设备上使用另一款浏览器。然而，访问您的网站的浏览器可能五花八门，要成功地发布到Web，一定要考虑这一点。本节描述一些最流行的Web浏览器，但市面上的浏览器绝非只有这些，如果您使用的浏览器未在这里提及，不要认为您必须转而使用这里提及的浏览器。使用什么浏览器都可以，只要适合您就好。
Google Chrome是当前最流行的Web浏览器，凭借出色的性能和稳定性以及更新频繁，还有适用于台式机和移动设备，其市场份额的增长速度令人难以置信。它和Apple Safari使用的是同一个HTML引擎——开源引擎WebKit。这款浏览器可从http://www.google.com/ chrome/免费下载。在本书的一些屏幕截图中，使用的就是Google Chrome，从第2章开始，我将讨论它的独特之处。
Microsoft Windows自带了浏览器Microsoft Internet Explorer，这是第二流行的Web浏览器。由于新版本发布频率没有Google Chrome和Mozilla Firefox那么高，其市场份额逐渐被其他浏览器抢占。然而，很多人还在使用Internet Explorer，它与Chrome、Firefox和Safari等其他浏览器有很大的不同。根据网站CanIUse.com的说法，Internet Explorer 10支持49%的HTML5功能，而Internet Explorer 11支持58%的HTML5功能。
如果您很看重Web设计，应在系统中安装所有流行的浏览器，并使用它们来查看发布的网页。这样，您就可确定一切是否运行正常。即便某款浏览器您平时不太用，但访问您网站的用户会经常使用。如果您要检查跨平台兼容性问题，请从Microsoft Internet Explorer和Mozilla Firefox开始，再将Google Chrome也囊括进来。
图1.5显示了在Windows 10中运行的Microsoft Edge——Internet Explorer的继承者。
对于Internet Explorer，需要指出的一个要点是，其不同的版本差别很大。Internet Explorer 10是2012年发布的，但很多用户都还在使用Internet Explorer 9、Internet Explorer 8甚至Internet Explorer 7。不同版本的Internet Explorer差别很大，因此为确保网站能够正常运行，必须使用每个版本进行测试。Web发布者不再支持Internet Explorer 6，大多数发布者不再支持Internet Explorer 7，因此Microsoft建议所有用户都升级到更新的版本。2015年，Microsoft发布了新款浏览器Microsoft Edge，这是Windows 10默认使用的浏览器。
图1.5 Microsoft Edge（Windows 10）
Mozilla Firefox是一款免费的开源Web浏览器。截止到2015年7月，它在浏览器市场大约占据了15%的份额。Netscape Navigator是第一款流行的商业Web浏览器，其1.0版发布于1994年。1998年，Netscape Communications公开了其Web浏览器的源代码，并让一些员工专门负责对其进行改进。经过7年的多次改版，这款浏览器最终变成了Mozilla Firefox。自从被美国在线收购后，Netscape Communications便不再与独立的非盈利组织Mozilla Foundation有任何瓜葛了。
在很大程度上说，Firefox得以流行是因为它不存在困扰Internet Explorer的安全问题。另外，大量的Firefox扩展改善了这款浏览器的使用体验，在遵循不断发展的Web安全方面，Firefox做得非常出色。Firefox可用于Windows、Mac OS X和Linux，您可从http://www.mozilla.com/免费下载它。
Safari是OS X默认使用的浏览器，这款浏览器还有一个移动版本，被用于Apple iPhone 和iPad。它基于开源技术，对Web标准的支持可与Firefox媲美。当前，Safari占据大约9%的浏览器市场份额。
如果不说说移动浏览器，对浏览器的讨论就不完整。三大移动浏览器巨头分别是Chrome、Safari和Android；截止到2015年7月，Chrome占据了31%的移动浏览器市场份额，而Safari和Android分别为24%和15%。
Google Chrome在2014年之前进入移动市场，在2015年初是最流行的移动浏览器。它使用与桌面版相同的引擎，其性能和稳定性符合用户对Chrome的期望。Safari是Apple在iPhone和iPad等iOS设备中提供的浏览器，对HTML5的支持极强，除屏幕尺寸较小外，其使用体验与桌面浏览器几乎没什么不同。同样，Android提供的浏览器也提供了极佳的Web体验。和桌面版Safari和Chrome一样，这三款浏览器也都基于渲染引擎WebKit。有关创建对移动设备友好的网站时需要考虑的因素，将在第21章讨论。
截止到2015年7月，Google Chrome在桌面和移动Web浏览器市场都占据了大部分市场份额，而其他浏览器占据的份额都较小——不超过13%。例如，Opera（http://www. operasoftware.com/）占据的市场份额很小，只有5%；这是一款小巧、快速、免费的浏览器，可用于包括Windows、Mac OS X和Linux在内的很多平台，并遵循了相关的标准。对使用KDE的UNIX用户来说，有浏览器Konqueror；有各种从Mozilla发展而来的浏览器，如用于Mac OS X的Camino；有提供全文本网页视图的命令行浏览器，如Lynx和Links；还有众多让有特殊要求的用户能够访问Web的浏览器。要支持这些五花八门的浏览器，编写代码时必须遵循通用标准。
要查看和浏览网页，只需要一款Web浏览器；要将网页发布到Web上，需要一个Web服务器。
Web服务器是在计算机上运行的程序，负责响应Web浏览器的请求——向它提供URL指定的内容。要将文档发布到Web上，需要一个Web服务器。运行服务器程序的计算机也被称为服务器，这容易让人混淆。因此，如果有人说Web服务器，他指的可能是用于响应请求的程序，也可能是运行该程序的计算机。
您使用浏览器请求网页时，浏览器使用HTTP建立一条到服务器的Web连接。服务器接受连接，发送请求的文件，再关闭连接。接下来，浏览器对从服务器获取的信息设置格式。
在服务器端，可能有很多不同的浏览器连接到同一个服务器，该服务器负责处理所有这些请求。
Web服务器不仅提供文件，还负责管理表单输入以及将表单和浏览器关联到运行在服务器上的数据库等程序。
与浏览器一样，也有很多用于不同平台的服务器，它们的功能各不相同。就当前而言，您只需知道服务器是做什么用的，有关Web服务器的更详细信息将在第23章介绍。
前面说过，URL指向Web上的一些数据，该数据可以是Web文档、图像、样式表或JavaScript脚本，这些都将在本书后面介绍。URL为查找并访问信息提供了统一而一致的方法。
除在浏览器中直接输入URL来访问网页外，您还可使用URL在文档中创建到另一个文档的超文本链接。因此，无论从什么角度看，URL对您和浏览器在Web上导航来说至关重要。
URL包含有关如下方面的信息：
您还可使用特殊的URL来完成发送邮件（Mailto URL）和运行JavaScript代码等任务。第6章将全面介绍URL及其每个部分的含义。
Web刚面世时，Web发布指的只有一件事情：创建由单个文件组成的网页，并将其上传到服务器，让用户能够通过浏览器进行查看。但从此以后，几乎一切都变了。
有些网站依然只包含手工创建并上传的网页，但大多数网站都是使用运行在服务器上的软件创建的。网页更复杂了，网站亦如此。当前，网页的大部分内容都是使用应用程序创建的，而这些应用程序也驻留在Web上。例如，在WordPress.com，您可创建博客并通过WordPress的Web界面立即发布这些内容。
无论是在Twitter发布状态更新、在新闻网站发表评论、使用工具发布博客还是编辑维基百科上的文章，都是在将内容发布到Web上。在大多数情况下，您都无须直接编写HTML。一般而言，网页都是根据别人创建的模板生成的，而您通常可以设置内容的格式——使用图形编辑器或让您能够避免使用HTML的简化标记。
然而，您输入的内容最终都将转换为HTML，以便向用户显示。因此，如果您发布的内容看起来不妥，要修复问题就必须懂HTML。您需要区分由您控制的页面部分和您使用的发布应用程序生成的部分。如果您要进一步控制网站的外观，可能就需要懂HTML，这样才能修改用于指定网页外观的模板。
因此无论采用什么样的Web发布方法，全面了解Web发布的工作原理都将让您受益。您也许永远都不会手工创建网页，但明白如何这样做将让您能够使用工具来创建网站——不管您最终选择的工具是什么。
要发布到Web，您必须明白与Web的各部分相关的基本概念。在本章中，您学习了三个重要的概念。首先，您学习了用于发布信息的Web的一些重要特征。其次，您学习了Web浏览器和Web服务器以及它们如何交互来传递网页。最后，您学习了URL是什么，以及为何它对Web浏览和Web发布来说都很重要。
本书的每章都有作业，旨在帮助您复习刚学习的主题。在本节的第一个小节中，将回答一些与Web相关的常见问题。接下来，将由您来回答一些有关Web的问题，而随后列出了这些小测验的答案。在每章的最后都有几个练习，旨在帮助您记住刚学到的Web知识。
问：Web有谁负责运营？这些协议都是由谁控制的？这一切都是由谁管理的？
答：万维网并非由某个组织拥有或控制。鉴于向Web提供信息的独立网站数不胜数，任何单个组织都无法制定相关的规则或指南。然而，有两类组织给Web的外观和发展方向带来了重大影响。
第一个这样的组织是万维网联盟（W3C），它有两个总部，分别位于美国的麻省理工学院和欧洲的INRIA。W3C的成员为有志于支持和定义Web语言和协议（如HTTP、HTML、XHTML等）的个人和组织；W3C还提供浏览器、服务器等产品，可供任何人免费使用。W3C负责制定万维网标准和实施相关的规则，其网站地址为http://www.w3.org/。
影响Web的第二类组织是浏览器开发商，其中最著名的是Google、Apple、Microsoft和Mozilla Foundation。为成为最流行、最先进的Web浏览器，这些开发商展开了激烈的竞争。一些关心Web未来的个人和公司成立了一个名为WHATWG（Web Hypertext Application Technology Working Group，Web超文本应用技术工作组）。HTML5规范就是由WHATWG和W3C一起制定的。
从现在开始，WHATWG放弃了给HTML规范制定版本号，相反，HTML将是一个“流动的标准”，将涵盖实验性功能和得到广泛支持的功能，旨在确保该规范紧跟发展步伐，涵盖浏览器开发商一致同意在其浏览器中添加的功能。如果提议添加的功能未得到一致同意，该功能将从HTML规范中删除。这旨在避免以前遇到的问题，即HTML规范制定流程与浏览器开发商所做的工作脱节的问题。
问：我听说Web发展迅速，要跟上潮流几乎不可能。本书会注定一出版就过时吗？
答：确实，Web在不断变化，但本书介绍的大部分知识您以后都用得着。当前，HTML像以前一样很稳定，一旦您掌握与超文本标记语言（HTML）、级联样式表（CSS）和JavaScript相关的核心技术，可根据需要补充新的知识。
1．URL是什么？
2．要将文档发布到Web上，必须有什么？
1．URL（统一资源定位符）是一个指向Internet上特定文档或信息的地址。
2．您必须能够访问Web服务器。Web服务器是在Web上提供文档的程序，它响应Web浏览器发出的获取文件的请求，能够将请求的网页发送给众多不同类型的浏览器。它们还负责管理表单输入以及处理数据库集成。
1．从现在开始，每当您在网上冲浪时都更多地从Web发布的角度考虑考虑。看看URL由哪些部分组成，注意网页的结构。这样，您很快就将对网页是如何创建的了如指掌。
2．下载一款您通常不使用的浏览器，并尝试使用一段时间。如果您当前使用的是Internet Explorer，请尝试使用Firefox、Chrome、Safari乃至命令行浏览器Lynx或Links。要真正明白现在情况有何不同，还有未升级浏览器的用户的Web体验是什么样的，请从http://browsers.evolt.org/下载一款老式浏览器并尝试使用它。
无论是编写图书还是给房间刷漆，您都不会草率行事，抓起刷子就干或立即坐在计算机前敲字，而是先制定完成项目的计划并搜集完成项目所需的材料。您的计划可能很简单——先刷墙再刷天花板，也可能很复杂——详细列出您要写到书中的每项内容。
搜集材料方面亦如此。如果您要给房间刷漆，就需要刷子和油漆，还有防止油漆落在其他地方的东西。同样，如果您要编写图书，就需要安装字处理程序，还可能需要搜集为写作提供支持的研究材料。与其他大多数项目一样，设计并编写网页也需要思考并制定计划，然后再着手处理文本和图形并将它们链接起来。同样，您需要确保创建网页需要的一切都在计算机中，还有一个可用于托管网站的地方。
要为发布到Web做好准备，您必须：
首先，介绍一下本书都将使用的一些简单术语。您必须知道下述术语的含义及其在您开发的Web产品所处的位置。
图2.1 网站和网页
网站都由Web服务器托管。在本书的前几章，您将学习如何开发深思熟虑、设计良好的网站。然后，您将学习如何将网站发布到Web服务器。
就像纸张页是图书和报纸的构成元素一样，网页也是网站的构成元素，虽然网页不像纸张页那样长度是固定的。网页有时也被称为Web文档，这两个术语说的是一码事。网页由HTML文档和其他部分（如图像或其他多媒体）组成。
当今的大多数网站都不是由不同的网页组成的，而是使用应用程序创建的，这些应用程序根据一组常用模板发布存储在数据库中的Web内容。网站上的URL充当了发布应用程序的输入。在本书中，您将创建传统意义上的网页，因为这是最容易的学习方式。
如果您是发布到网站，主页将是网站的首页或最顶层页面，它是让用户能够访问网站其他网页的入口，如图2.2所示。
图2.2 主页
大多数用户都将通过主页访问您的网站，但有些用户将通过其他网页进入您的网站。用户可链接到您的网站的任何网页，这是Web的本质决定的；如果并非主页的网页包含有趣的信息，用户可能直接链接到该网页；因此，在这些网页中，不应假设访客见过您的主页。
主页通常概述了通过这个起点可以访问的网站内容，例如，它可能是一个目录或一组图标。如果网站的内容不多，它们可能都包含在一个网页中；在这种情况下，主页和网站指的是一回事。个人主页可能包含到简历的链接以及到Twitter账户和Flickr上照片的链接。餐馆的主页可能包含营业时间和位置，还有显示菜单和行车路线的链接。公司的主页通常描述了公司从事的业务，并包含诸如About the Company、Products and Services和Customer Support等链接。
首先，如果您只想通过网页发布文本或图片，就根本不需要对计算机做任何配置。您只需打开浏览器，找到让您能够发布这些内容的网站，如Tumblr或Wix，然后直接通过浏览器进行发布。
如果您要学习如何从空白开始创建网站，就需要配置计算机，以便能够在本地创建和查看网页。要尝试Web发布，只有两款工具是必不可少的，就是文本编辑器和Web浏览器。Web浏览器在前一章简要地介绍过，因此下面先来说说文本编辑器。
HTML文件属于纯文本文件，应使用处理纯文本文件的工具对其进行编辑。这意味着学习HTML时，不应使用Microsoft Word等字处理程序或Google Docs等在线应用程序来编辑文件。这些程序让您能够设置格式，并将结果保存为Microsoft Word等专用文档格式。令人迷惑的是，在这些应用程序中，也可以将文档保存为HTML文档。从生成文档的角度看，这样做虽然能够满足您的要求，但对完成您的目标——学习HTML毫无帮助。
如果您以前使用过文本编辑器，很可能有自己喜欢的一款。在什么样的文本编辑器是良好的文本编辑器方面，大家的看法常常非常武断。如果您根本没有使用过文本编辑器或用得不多，就需要有人推荐。刚开始时，您可使用计算机的操作系统自带的文本编辑器——所有操作系统都自带了文本编辑器。
如果您是Windows用户，可使用“记事本”；如果您使用的是OS X，可先用用TextEdit；如果您是Linux用户，可先用用vi或Emacs。
“记事本”、TextEdit和vi提供的功能都极其有限，如果您需要做大量的文本编辑工作，可能想寻找其他功能更强大的文本编辑器。下面列出了网站开发人员常用的一些文本编辑器。
现在，您该找到您要使用的文本编辑器并启动它。如果使用的是OS X文本编辑器TextEdit，请确保它处于纯文本模式。如果文档窗口包含选择字体或设置其他格式的控件，请选择菜单Format>Make Plain Text。启动文本编辑器后，就可以输入一些内容了；如果您愿意，还可以保存编辑的文件。需要指出的重点是，您只能通过键盘输入字符，而没有任何设置格式的选项，这就是纯文本的含义。
只需使用“记事板”或TextEdit就可完成本书介绍的所有任务，但大多数Web开发人员都发现，使用功能更强大的工具可极大地提高效率。很多文本编辑器都突出特定的文本，让文档阅读起来更容易；它们还让您能够同时打开多个文档以及将一组文件视为一个项目。当前，您都还未开始创建网页，因此很难确定哪个工具适合您，但强烈建议您在阅读本书的过程中尝试不同的编辑器。很多商业编辑器都可免费试用，您可先试用，再决定是否购买。
图2.3是OS X文本编辑器TextEdit的一个屏幕截图，这个屏幕截图最引人瞩目的地方是，根本没有设置文本格式的菜单，也没有工具栏。这正是您对文本编辑器的要求，它让您能够编辑文件的内容，而又不会设置任何格式。
图2.3 OS X文本编辑器
前一章说过，有很多流行的Web浏览器，在Web上冲浪时，您可根据喜好使用任何一款。然而，阅读本书时，建议您使用浏览器Google Chrome，其主要原因是Google Chrome为帮助创建网站提供了大量功能强大的工具。其他浏览器也提供了类似的工具，但本书说的都是Google Chrome 开发者工具，因此如果您也使用Google Chrome，阅读起来将更容易。如果您充满自信，也可使用其他浏览器；在这种情况下，每当本书提及Google Chrome时，您都需要将其替换为您选择的浏览器。不管您最终决定使用哪款浏览器，我都建议您下载Google Chrome并阅读下一节；如果您对这些工具根本不熟悉，就更应该这样做。您可从http://google.com/chrome下载Google Chrome。
下载并安装Google Chrome后，启动它并访问http://getbootstrap.com/。Bootstrap是一个通用的网页框架，将在本书后面讨论。就当前而言，它很有用，因为这个网页的源代码易于理解。在Chrome中，选择菜单“更多工具”>“开发者工具”，这将打开开发者工具，如图2.4所示[1]。
图2.4 Google Chrome开发者工具
有一个打开开发者工具的快捷键，在Windows中为Ctrl + Shift + I，在OS X中为Command + Option + I。您经常会用到开发者工具，因此绝对值得记住这个快捷键。
开发者工具是作为浏览器中的一个面板打开的，覆盖了网页的下半部分。如果您愿意，可单击右上角的按钮，将开发者工具与浏览器窗口分离。这让您能够在两个窗口中看到更多内容，但必须在它们之间切换。如果您愿意，还可以将开发者工具移到浏览器窗口右边，而不是让它位于底部。请将开发者工具放在您认为看起来最舒服的地方。
从Web面世起，浏览器就支持一种名为“查看源代码”的功能，它显示当前网页的HTML源代码。在Google Chrome中，要查看当前网页的源代码，可选择菜单“更多工具”> “查看源代码”。图2.5显示了http://getbootstrap.com/的源代码。
图2.5 http://getbootstrap.com/的源代码
开发者工具是这种概念的扩展，但功能强大得多。开发者工具包含很多选项卡，默认显示的是选项卡Elements，其中包含的内容类似于网页的源代码。浏览器下载网页时，将其进行转换，让设置HTML格式并显示它的引擎能够明白。根据网页的有效性程度，这种转换所做的修改很少。Elements选项卡显示的是浏览器看到的HTML，而“查看源代码”显示的是浏览器下载的HTML，如果您比较“查看源代码”窗口和Elements选项卡中的内容，将发现它们有几个不同的地方，这佐证了我前面的说法。
现在暂时不要考虑这些HTML是做什么的，我马上就会详细介绍；当前的重点是开发者工具。如果您将鼠标指向Elements选项卡中的元素，相应的网页部分将呈高亮显示，让您知道网页各部分与HTML源代码的对应关系。如果您单击Elements选项卡中的元素，右边的窗格将更新以显示该元素的样式信息，等您开始使用级联样式表时，这种功能将很有帮助，因为它准确地指出了浏览器是如何解读样式的。
最后，开发者工具面板的右上角有三个按钮，其中最右边的那个用于将开发者工具窗口和浏览器窗口分离和合并，而最左边的那个按钮显示/隐藏第17章将开始介绍的JavaScript 控制台。另外，左上角还有两个按钮，其中左边的那个像放大镜，如果您单击它，再单击网页的内容，将在Elements选项卡中选中相应的HTML元素，在您需要审查网页上的特定元素时，这很有用。
练习2.1：使用审查器（Inspector）
这里有必要研究一下审查器的工作原理，看看如何使用开发者工具来查找Elements选项卡中与网页内容对应的HTML元素。如果您当前在浏览器中访问的不是http://getbootstrap.com/，请打开该网站，再打开Chrome开发者工具。您可能想尝试前面的“提示”所说的键盘快捷键。前面说过，您将经常这样做。
打开开发者工具后，单击左上角的审查器按钮—放大镜，它将变成蓝色，表明开发者工具为审查您单击的元素做好了准备。现在，在浏览器窗口中移动鼠标，将其指向网页顶部附近的大标题，浏览器窗口将类似于如图2.6所示。
图2.6 审查Bootstrap主页
正如您看到的，该标题呈高亮显示，且工具提示中显示了一些有关该元素尺寸的信息。这个元素正是您要审查的，因此请在浏览器中找到并单击它。您刚打开开发者工具时，Elements选项卡显示的网页源代码几乎处于完全折叠的状态，如图2.4所示；但当您审查元素时，源代码将展开到足够的程度，让您能够看到被单击的网页元素对应的HTML源代码。现在，开发者工具窗口应显示用来创建您单击的标题的HTML标签，如图2.7所示。
图2.7 使用开发者工具审查图标B
我并不奢望您现在就理解开发者工具窗口中的众多内容，但这里需要指出一些重点。在左边的窗格中，显示的是网页的HTML源代码；右边窗口显示的样式信息指出了为何选定元素有当前这样的外观。在左边窗格的底部，指出了选定元素在网页结构中的位置：选定的元素显示在最后，它是包含B的span元素，在网页中被嵌套了4层，并对其应用了3个CSS类。
您经常要求助于开发者工具，尤其是在网页的外观不符合预期时。它指出了浏览器眼中的网页是什么样的，让您能够轻松地向下挖掘，找到您要寻找的元素，这在网页庞大而复杂时尤其有用。
这个问题好像问得很傻。如果您都不知道自己要发布什么，就不会购买本书了，但也许并非完全知道自己要向Web发布什么，或者说您的想法模糊而不具体。也许您突然间接手了负责公司网站的工作，有人将本书交到您手中说，这本书可提供帮助；也许您原本是软件开发人员，突然间被要求负责开发产品的Web界面或Web应用程序；又也许您看到一些网页后觉得很酷，想做些类似的东西。
对于您要发布到Web的东西，我在本书中都称之为内容。内容是一个包罗万象的术语，可以指文本、图形、多媒体、表单等。告诉别人您的网页是做什么用的时，您其实就在描述其内容。
您想象得到的任何东西都可发布到Web。事实上，如果您要做的事情看似越荒唐古怪，就越有理由去尝试。最有趣的网站都是那些拓展了Web原有功能的网站。
通过研究与您要创建的网站类似的网站，也可能获得灵感。如果您要打造公司网站，就研究竞争对手的网站，看看它们都提供了哪些功能。如果您要打造个人网站，就访问让您敬佩的网站，看看能否从中找到灵感。找出这些网站让您喜欢并想模仿的方面，还有可以改善的方面。
当前，很多类型的网站的创建门槛都很低。如果您要发布文本和图片，有很多免费的博客软件可供使用，您只需选择适合自己的博客软件，打造自己的网站就是分分钟的事。尝试比以前任何时候都容易；请先尝试尝试，如果管用，就接着往下做。
如果您根本不知道要向Web发布什么，请不要就此止步；先将本书放在一边，等有想法后再继续阅读。也许通过阅读本书您会有些想法，因此即便您原本没有想法，本书也很有用。我个人发现，要想出点子，最佳的方式是花一个下午在网上冲浪，看看别人都做了些什么。
网站规划的下一步是确定如何在网页之间分配内容，并制定在网页之间导航的方案。如果有很多需要以复杂的方式链接起来的内容，请坐下来制定具体的内容分配计划，这对您以后开发和链接网页大有裨益。
线框图是网站完成后的大致轮廓，指出了内容在网页之间的分配情况以及内容是如何彼此关联起来的。有了线框图后，开发每个网页时就无须牢记它在整个网站所处的准确位置，也无须牢记它与其他网页之间的复杂关系。
在网站特别大的情况下，如果有线框图，就可将网站不同部分的开发工作分配给不同的人去完成。清晰的线框图让您能够最大限度地避免重复工作，减少每个人都必须牢记的上下文信息。
如果网站较小，或者网站是使用提供了具体结构的内容管理应用程序创建的，也许不需要线框图。然而，对于复杂的大型网站，线框图可节省大量的时间，避免众多的弯路。如果您无法牢记内容的各个部分以及它们之间的关系，就应考虑绘制线框图。
线框图什么样呢？一般而言，它们是成组的文档或图像，每组表示网站中一种特定类型的网页。文档包含网页的粗略示意图，指出了网页各个部分处于什么位置、占据多大空间以及将发挥的作用。例如，报纸网站的线框图包括主页示意图、各个版面的主页以及文章页面的线框图。线框图还可能包括网站的注册表单以及购买广告版面的页面。图2.8是一个使用工具Balsamiq创建的线框图。
图2.8 报纸主页的线框图
线框图并非必须非常漂亮，也并非一定要使用线框图绘制软件来创建。绘制线框图的关键在于，将网页以适合您的方式组织起来。如果您喜欢索引卡和细绳，使用这些工具就是了；如果在纸上或计算机中绘制简单的草图更佳，这样做就是了。
绘制线框图时，需要考虑如下几点。
确定一个网页包含多少信息可能比较棘手。有些网站将所有内容都放在一个设计巧妙的冗长网页中，有些网站将内容分配到大量不同的网页中，还有些网站使用新技术按需动态地加载网页的各个部分，用户根本不需要从一个网页切换到另一个网页。为避免过于花哨，最佳的做法是这样组织内容，即让每个页面都包含一个主题的信息。如果页面有好几屏长，也许该将相应的主题按逻辑分成多个子主题。
为了让访客能够在页面之间导航，您需要哪些链接。这些是文档中的主链接，让访客能够实现您确定的目标。向前、向后、向上、向下的链接以及到主页的链接都属于主要的导航方式。
除简单的导航链接外，有些网站还包含与主要Web内容平行的额外信息，如术语表、按字母顺序排列的概念索引、版权信息或职员页面。制定计划时一定要考虑这些额外的信息，想想要如何将它们链接到主要内容。
鉴于主页是访问网站其他信息的入口，需要考虑要将哪些信息放在主页上。一篇博客？即将推出的产品摘要？一系列到其他主题的链接？无论您决定将哪些内容放在主页上，都必须确保它们有足够的吸引力，让目标受众留下来。
除非您的网站要求访客注册才能访问，否则访客很可能是通过搜索引擎进入网页的。务必要让访客能够知道他访问的是哪个网站，并指出该网站还有更多他可能感兴趣的信息。通常，您可通过设计和导航实现这个目标。
设计网站的框架时，别忘了您要达成的目标，并避免您的目标因额外的信息或内容而变得模糊不清。
有多个实用工具和包可帮助创建线框图。下面是一些免费的工具：Mockingbird （http://gomockingbird.com/）、Denim （http://dub.washington.edu:2007/denim/）、Gliffy （https://www.gliffy.com/uses/wireframe-software/）。另外，还有一些用于iOS和Android设备的移动应用可帮助创建网站模型。
您迟早需要将您在本地计算机上创建的网站放到Internet服务器上。这样做之前，您必须确定自己需要什么样的托管协议。最简单的方法是，获取一个这样的Web托管账户，即让您能够将HTML文件、图像、样式表和其他Web内容上传到一台Web服务器。这种方法让您能够在本地轻松地创建网站，并原封不动地发布到服务器。
另一种选择是使用应用程序将内容发布到Web上。如果您要创建的网站属于已有的类型，市面上有相应的发布工具，这种选择将更合适。例如，如果您要发布博客，可使用TypePad（http://typepad.com/）、Blogger（http://blogger.com）、WordPress（http://wordpress.com/）、Tumblr（http://tumblr.com）等网站。使用这些应用程序的优点是，可通过Web界面轻松地建立网站、选择主题并开始将内容发布到Web；而无须手工创建网页和注册托管账户，甚至都不需要手工编辑文件。
还有一些在线工具让您能够建立格式比博客更开放的网站，如Wix（http://www.wix.com/）、Squarespace（http://squarespace.com/）和Weebly（http://www.weebly.com/）。这些应用程序让您能够使用其提供的众多模板轻松地创建网站，它们还提供了其他功能，如域名、电子商务、图像和多媒体选集等。使用这些应用程序的优点是，可轻松地创建比博客平台更专业的网站。
无论使用上述哪类应用程序，通常您只需填写表单并为网站选择URL和主题，然后就可以通过表单输入内容，而无须为网页编写HTML。有些应用程序甚至包含WYSIWYG编辑器，让您无须使用HTML就能设置您输入的内容的格式。
然而，这并不意味着您无须学习HTML和级联样式表（CSS）。即便不手工创建网页，输入内容或修改主题时，您也需要明白网页是如何创建的。如果您不明白网页是如何创建的，就不知道如何找出并修复网站存在的标记问题——无论这个网站是否是您负责编写的。
对大多数刚接触Web发布的人来说，使用一个应用程序是最佳的方法，因为这样您能够马上将感兴趣的内容放到Web上，而无须搞明白太多的事情。然而，有些人受困于这些应用程序的局限性，想自己做得更多，更好地控制自己的网站。本书将帮助他们实现这个目标。
如果您要创建并上传网页，就需要选择一家能够提供所需存储空间的公司。托管公司多如牛毛，它们向需要建立网站的人提供Web空间。诸如DreamHost（http://dreamhost.com/）和Pair.com（http://pair.com/）等公司从事托管业务多年，提供各种价格实惠的托管套餐，但还有众多其他的选择。很多人都向为其提供网站域名注册服务的公司购买托管套餐，或购买当地的托管公司的服务。
如果您选择这种做法，则注册托管账户以便将网页发布到Web上的步骤如下。
1．注册一个域名（可选）。如果您希望自己网站的URL类似于mycoolsite.com或mycompany.com，就需要注册相应的域名。域名注册公司很多，只需在搜索引擎中输入“域名注册”，就能看到大量域名注册公司的广告和搜索结果。
2．选择一家Web托管公司并注册账户。如果您只是想将网页放到雇主或学校的内部或外部服务器上，根本就不需要购买托管服务；但如果您要创建可通过Internet访问的网站，就需要购买托管服务。
3．将您注册的域名同新创建的网站关联起来。域名注册公司和托管公司应该会告诉您如何进行设置，从而让域名指向您的托管账户。这样，用户在浏览器中输入您的域名时，就能看到您上传到服务器的内容。
4．开始上传内容。设置好Web托管后，就可使用您喜欢的任何工具将Web内容上传到服务器了。很多托管公司都提供了让您能够上传内容的Web界面，同时大多数托管公司还允许您使用支持文件传输协议（FTP）、安全复制（SCP）或安全FTP（SFTP）的文件传输工具将文件传输到服务器。
有关Web托管以及如何发布网站，第23章将做更全面的讨论，这里之所以简要地介绍它们，旨在让您提早知道——万一您迫不及待，现在就想将内容发布到Web呢！
本章阐述了如何为高效地创建网页做好准备。您学习了如何使用Google Chrome内置的开发者工具来帮助创建网页，以及如何寻找可用于创建网页的文本编辑器。您学习了如何制定网站要达成的目标以及如何寻找网站托管服务。您还学习了使用HTML创建网站前如何使用线框图来创建网站地图。
在本节的第一个小节，将回答一些与网站规划相关的常见问题。接下来，将由您来完成一些测验题，如果有测验题您回答不了，请参阅随后的答案。练习旨在帮助您想出一些创建网站的点子。
问：确保组织有序好像需要做大量的工作。我只想做些简单的事情，可您跟我说必须有计划和线框图。这些步骤确实必不可少吗？
答：如果要做的事情很简单，本章建议您做的大多数工作都不用做。然而，如果要开发多个相互链接的网页，先制定计划将大有裨益。如果您制定计划就动手做，可能发现很难理清头绪，导致结果不符合预期，进而让用户难以从您的网站获取所需的信息，而且您也难以重新组织使其易于理解。动手前制定计划有益无害，长期而言这还可能节省时间。
问：在本章中，您花了很大的篇幅讨论如何组织主题和网页，对网页的设计和布局却只字未提。这是为什么呢？
答：等您更深入地了解了HTML（用于创建网页的语言）可实现的布局及其无法做到的事情后，我将讨论网页的设计和布局。
问：如果您在本章讨论的基本结构我都不喜欢，如何办呢？
答：自己设计。没有规定说您必须使用层次型或线性结构，只要访客能够找到他们想要的信息或完成您想要他们完成的工作就好。我介绍这些结构只是想提供一些可能的网页组织思路。
1．请简要地定义网站、Web服务器和网页。
2．在Web发布中，术语主页是什么意思？
3．不管您在网站中使用什么样的导航结构，通常有一个链接必须包含在每个网页中。这是什么链接？
4．线框图有何用途？
1．网站是单个网页或多个以有意义的方式链接起来的网页。Web服务器是实际存储网站的计算机或对浏览器发出的网页请求做出响应的软件。网页是组成网站的元素，犹如书页。
2．在Web发布中，主页是进入网站其他页面的入口，即第一个网页或最顶端的网页。
3．在网站的每个页面中，都应包含到主页的链接。这样，如果用户迷失了方向，依然能够找到回主页的路。
4．线框图指出了网站创建好的大致轮廓。它帮助您以适合的方式组织网页，创建大型网站时其帮助最大。
1．想出访客要通过您的网页实现的一些目标，越清晰越好。
2．确定目标后，访问一些网站，它们涉及的主题与您要创建的网站包含的主题类似。研究这些网站时，问问自己，这些网站易于导航、内容令您满意吗？再列出这些网站让您喜欢的地方。该如何让您的网站更好呢？
[1] 译者注：编写本书时，作者使用的版本大致为Chrome 38，更新版本的界面与此不同。
