济南盈讯科技有限公司

9. 建立站点的线框图

序言

在开始设计一个 Web 站点前，每一个 Web 设计师都应当知道和了解 Web 站点的各项参数。在本篇文章中，你们将学习开始设计商业 Web 站点时需要具有的基本知识。这些知识和信息不仅对你为其他人构建 Web 站点很有帮助，而且可以作为你构建自己的 Web 站点时适用的检查清单。这个阶段的工作，是信息架构的后续工作。在这个阶段，你应当了解客户希望他们的Web站点包含哪些内容，站点的结构应该是什么样的，客户公司使用哪种类型的品牌，然后基于这些了解到的信息，建立一个可视设计模型，在征得客户的认可后，再加入图形图像和配色方案。

我将特别讲述以下几方面内容：

• 尽管配色和设计很重要，但你首先需要了解客户建站的目的和目标。客户建站的目的和目标，对站点的外观和总体风格有着重要影响。
• 因此在开始进行网站设计前，你需要编制一份重要事项清单，以了解客户的各项重要信息。
• 你还需要了解客户公司以前所做的营销工作，包括品牌推广工作，这些信息对网站设计很有用。
• 基于从客户那里收集到的所有信息，你将创建网站的视觉设计文件，为客户添加额外的图形图像和内容，提供可视的基础性文件。

本篇文章的内容目录如下：

• 你需要了解哪些信息
• 第一步
  • 一个虚构的示范网站
  • 标识（Logo）
  • 页面布局
  • 关于网站上的广告
  • 通过校验代码和征得客户的认可，确认页面布局
• 总结
• 延伸阅读
• 练习题

你需要了解哪些信息

一般说来，在决定进行网站设计前，个人或企业应该已确定建站的目的和目标。尽管配色和图形图像设计很重要，但你首先应有一份建站计划，列明建站预算、目标市场、预期目标，以及完成这些工作任务所需的资源等。你需要了解这样一些信息：该网站只是向用户提供信息，还是还计划向用户销售产品或服务？该网站是将长期存续并发展，还是只是想在短期内以网站作为进入一个细分市场的营销手段（如竞选网站、针对当前的时尚而建立的营销网站等）？网站将包括博客页面、法律信息页面、图片集、电子邮件联系表单吗？网站还需要其他哪些页面？与竞争对手的网站相比较，该网站如何？

最后，还有一个很重要的问题，那就是客户公司已经建立起品牌了吗？如果尚未建立起品牌，则你在开始进行网站构建和设计前，需要特别注意这一点。也许你不具有创作公司标识、为针对某一特定市场的产品或服务进行品牌建立和推广、进行市场营销等的技能，因此如果你尚未履行过这些营销工作，你可能需要一个营销专家与你一道工作。当然如果客户公司已有一个完整的建站计划，你就必须遵循他们的指示去做，这样建好的网站才会到达他们的要求和目标，成为客户公司的重要营销工具。

尽管很多此类信息在建站任务交到设计师之前可能就已经确定了，但了解以上那些问题的答案，还是可以帮助你确定是要建立哪种类型的网站、使用什么配色方案，以及要加入哪些图形图像等。不过有一点在建站前就可以确定，那就是网站必须具有可用性和可访问性。因此，在所有情况下，写代码和设计导航都是工作重点，关于网站的可访问性，将在以后的课程中更详细地讲述（本课程中关于可访问性的专题文章将很快发布）。关于网站的可用性，可以访问 Jakob Nielsen 的主页，了解他关于可用性的一些重要观点。

关键一点是要通过分别使用 HTML 和 CSS 编写代码和进行设计，使网站易于访问。除非 Flash 适用于网站的一些元素，要尽量避免使用 Flash（为提高 Flash 的可访问性，已经做了很多工作，参见相关文章。Flash 适合履行一些如播放视频这样的任务），并仔细思考在哪些地方需要使用 JavaScript 和其他一些技术。这样做，使设计师设计网站和编程员创建网站程序的工作都更为容易（如果设计师同时也是编程员，则更是如此）。同时，建立起来的网站在浏览器兼容性方面的表现也会更好。

第一步

为帮助你们解决这些问题，我将做一个示范，用我设计网站时使用的一套指导原则，构建一个简单的公司网站。我使用的检查清单将既包括有关公司的事项，也包括有关设计的事项。为方便起见，我假设这家公司是一家成熟的公司，已有一些现成的营销材料，公司标识、品牌等都已经有了。而如果你是从零开始工作的话，那么在开始开发公司网站前，还需要先制订出创建公司标识和品牌的计划。

作为一个 Web 设计师，我在开始为一家公司设计网站前，需要了解公司的以下信息。我想把所有重要的有关网站设计的信息都记录下来，这样我就不再需要在以后做出重大的改动。在为一家公司设计网站时，你都需要与公司所有者/决策人讨论以下这些主题，以确保你对这个网站设计项目的愿景是和他们的愿景相一致的。

1. 网站名称：网站名称是否反映了公司名称及其在网上的工作？在我的这个示例中，网站的名称就是公司的名称，即“Wiki Whatevers”（无处不在的维基）。如果该公司尚未使用一个 tag line（宣传语）的话，可能还想创制一个宣传语。这样在网页上宣传语、公司名称和公司标识就将放在一起显示。
2. 公司标识和品牌：我想收集该公司此前已编制的所有印刷品，包括公司标识（Logo）、宣传册等，这样我就可以建立起保存信息（如电话号码和地址等）的文件夹。通过这些资料及公司设计团队已设计出的公司标识，我就可以更好地理解这家公司的整体形象、品牌和风格。 如果公司尚未有标识，那么我就想聘请一个标识设计团队来为公司设计一个标识（我自己并不是一个标识设计师，因此会让别人来设计，你也可以和我一样这样做，并把产生的费用写入账单中）。
3. 网站的域名：在确定网站名称后，我想知道相应的域名是否可用。域名是一个网站的网上地址，用户在浏览器的地址栏键入域名即可达到网站。域名同时也用作从外部资源访问网站的链接。域名可选择任何一种顶级域名，如“.com,” “.org,” 等。尽管设计师通常并不负责进行域名注册，但了解域名是否已选定和注册，对设计工作还是很有帮助的。在一些情况下，由于域名不可用，我不得不改变网站的名称和网站的一些内容。出现这个问题，将使客户发生更高的费用，而如果一开始就选定域名，就可以避免出现这种情况。
4. 研究竞争对手的网站：了解竞争对手的网站包含哪些图形图像和内容，对你设计网站是很有用的，这样你就能设计出至少和该公司主要竞争对手的网站一样好或更好的网站。
5. 信息架构：网站需要有一个购物车系统或博客系统吗？网站所有者有什么样的网站扩展计划？采用什么结构将各个页面链接在一起？这些都是很重要的问题，你需要将它们纳入网站设计和导航设计之中。你需要知道网站在未来将如何扩展，这也将决定你怎样构建网站。
6. 网站内容：网站内容已编写出来了吗？如果已经编写出来，你会希望立即就获得这些内容，以帮助你确定导航、排版设计和布局。将内容分类是确定导航的最佳方式。此外，内容也可以帮助你确定网站的外观和总体风格。因此如果网站内容尚未编写出来，最好还是不急于开始设计工作。要确保内容的相关性，并规划好内容的更新，因为网站访问者最终是为了获取内容才一次一次访问网站的。
7. 研究虚拟主机：尽管客户可能中意某一个虚拟主机提供商，但由于不是所有的虚拟主机提供商都提供一样的技术支持，因此你可能还是需要了解其他一些虚拟主机提供商的情况。虚拟主机提供商提供网站寄存服务，其中一些虚拟主机提供商提供访问数据库的服务（你设计的网站的博客系统或购物车系统可能需要数据库支持）。一些虚拟主机会限制访问网站的用户人数，如果访问的网站用户越来越多，这就可能造成问题。你可以访问虚拟主机数据库（WHDb），获取载明有很多虚拟主机提供商的名称及其提供的服务、技术能力等的列表。在你开始进行网站设计前，请确认客户已购买了虚拟主机空间，这样你就能知道你的设计参数。
8. 规划用户如何离开网站：这意味着你和你的客户控制用户将如何离开网站。用户在访问网站后，最终还是要离开的，因此为什么不通过可产生收益的广告放置或通过链接交换来事先规划用户的离开呢？做这种规划，并且通过向网站用户提供某种服务，可以为网站增加金钱上的收益。
9. 任务截止日期：确定网站什么时间“上线”。一般说来，只要客户已准备好内容，对你的配色和布局设计样本表示满意，且不需要复杂的编程，那么完成一个小的网站设计和构建项目（如我示例的这个项目），8周时间就已足够。

一旦你已获得了这些基础信息之后，你就可以开始着手工作，阅读内容，规划导航，并决定如何对网站进行搜索引擎优化（SEO）。尽管你可能并不负责从事搜索引擎优化的工作，但你可以和 SEO 专家紧密合作，确定如何最好地使用网站的内容和代码，通过内容和大标题、小标题中的关键词，使网站的流量增加。

正如你不会在建筑师编制出蓝图前就去为新家挑选地毯或沙发一样，你也不会在规划好网站的架构前就去进行网站的视觉设计。在这个最初的规划阶段就规划导航和搜索引擎优化可以使你在后续工作中少走弯路并节省时间。在你准备好开始进行网站的视觉设计时，你已经熟悉网站的内容和架构，这样配色和图形图像设计工作就容易做得多。

一个虚构的示范网站

这个虚构的网站是一家向 wikis（维基网站）提供开源代码的网站，每周至少要发布三次新的开源代码。由于开源代码可以免费使用和修改，网站所有人希望通过捐赠、广告放置，以及其编程员提供的额外服务来为网站产生收入。该网站的名称为“Wiki Whatevers”（无处不在的维基），域名也已选定。网站的内容已编制出来，包括尚需分类的代码段、文章，以及参加这个项目的编程员的个人传记。寄存网站的虚拟主机提供可用的 MySQL 数据库，且不限制流量。现在需要列出网站将要使用的各项要素：

1. 使用公司已有的标识（Logo）。我想将客户公司的 Logo 数字化，并在网站的各个页面都使用这个 Logo。为此我需要一台扫描仪，将 Logo 扫描入一个图形程序（如 Photoshop 或 Gimp）。我将在确定页面布局后，再确定 Logo 的尺寸。我将把 Logo 图像设为 72dpi，以使 Logo 图像能被更快地下载。
2. 我想在介绍公司员工的页面（或“About"——关于我们页面）使用编程员的照片，因此我就需要他们的数码照片。他们可以提供普通照片供扫描成数码图片，或直接提供数码图片。如果他们提供的是数码图片，我需要其解析度比我最终使用的图片的解析度高，因此 300 dpi 的图片就很合适，或者提供全尺寸的图片也可以，我以后可以根据情况缩小图片的尺寸。
3. 由于客户已有足够的内容让博客在未来几个月内都保持活跃，客户决定使用一个博客系统。值得庆幸的是，客户选定的虚拟主机提供商熟悉博客系统，有能力处理数据库和很大的网络流量（包括高峰流量）。这个虚拟主机提供商还提供网站扩展的多个解决方案，如果客户希望扩展其网站的话，可以很容易地实现。如果虚拟主机的正常运行时间可以得到保证的话，客户会在网站整个成长期内都将网站寄存在这个虚拟主机。能持续数年都将网站寄存在同一个运行状况良好的虚拟主机上，会省去很多麻烦。
4. 使用 FTP（有多种 FTP 软件可供选择，如开源 FTP 软件 Filezilla，或适用于 Firefox 的 fireftp，或专有的FTP客户端软件如 CuteFTP），我将上传一个宣示网站即将上线的静态网页。“网站建设中”是一个应避免使用的短语，这是因为访问者如果不知道网站的上线日期，可能就不会再回来访问网站了。更适宜的做法是，先上传一个网页，在其上载明公司的名称、网站将提供些什么内容、网站的上线日期，以及联系信息（留一个电子邮件地址就很合适，如果公司是一家传统行业公司，也可以同时留下地址和电话）等。此外，如果能使用一个可以向个人发出网站上线通知的电子邮件表单，那就更好了。先上传这样一个网页，可使客户在其网站正式上线前，就有可能建立起潜在顾客群。
5. 使用从客户那里收到的网站内容/结构信息，以及确定客户希望在每一个页面都预留广告空间。 我将设计网站的架构并规划导航和文本链接。此外我还将运用这个设计样本，规划用于对网站进行搜索引擎优化的关键词。
6. 为 Logo 配色。我将选定两个或三个配色方案提交给客户批准。
7. 然后，我会上图库网站如 iStock 或 Comstock，选择其他图片或插图。不过要注意一点，需要多上几个图库网站，选择最优惠的交易条件和价格。使用图库网站提供的图片，费用并不昂贵，且避免让你自己去处理让人头疼的版权问题。此外，我还需要客户公司已经创作好的或将要创作的所有图片，以在网站各页面中使用（包括提供代码的页面、文章页面、博客页面等）。

备注：以上第 6和第 7阶段的工作，将在下一篇文章中详细讲述。请一定记住，在开始在为各个页面配色和添加图形图像前，需要先征得客户对网站视觉布局样板的批准。

标识（Logo）

Logo 是公司品牌的视觉展示。由于 Logo 要在长期内代表公司，多数公司都会精心设计他们的 Logo，不过也有一些客户对 Logo 这个代表公司的标识并不太在意。根据我自己的经验，如果一家公司尚未花费时间和金钱设计出一个专业的 Logo，则通常永远不会花这笔钱——无论你有多么具有说服力的论据要他们这样做。

Wiki Whatevers 公司的所有权人，都在乔治亚理工学院就读过，所以在设计公司 Logo 时，就选用了他们母校校标的颜色——金色和黑色。这个 Logo 设计得很简洁，至少让你在配色和进行页面布局时会容易一些。公司的 Logo 如图1所示：

图1：Wiki Whatevers公司的 Logo

我在此使用的是扫描的公司 Logo，意图在于在公司网站上使用和他们在印刷品上所使用的一样的 Logo。印刷色为 CMYK（青、品红、黄、黑四色），与由 RGB（红、绿、蓝三色）组成的 Web 颜色并不匹配。因此我需要做一些配色工作，以使网站上 Logo 的颜色与公司印刷品上 Logo 的颜色尽可能地匹配。为实现这个目标，有以下四种方式可供选择：

1. 联系 Wiki Whatevers 公司的印刷商，询问他们在此前是用什么颜色将公司的 Logo 印刷在公司的印刷品上的。通常情况下，印刷商会使用 Pantone 颜色。Pantone 公司还提供可帮助设计师将印刷色与 Web 颜色相匹配的工具。印刷商那里可能已有 Pantone 配色系统，因此他们就可以帮助你将印刷色与 Web 颜色相匹配，不用再花费额外的钱去购买 Pantone 公司提供的其他工具。
2. 由于这些 Wiki Whatevers 公司的所有权人在 Logo 中使用的是乔治亚理工学院校标的颜色，我可以去访问乔治亚理工学院的网站，看是否能找到相匹配的颜色。你可以使用一个图形程序从网站截图上提取一种颜色，将图像导入一个图形程序，使用取色工具或其他工具来配色。
3. 目视印刷品上 Logo 的颜色和 Web 颜色，使它们尽可能地匹配。在一些情况下，它们之间的差别可能相当大；而在另外一些情况下，它们之间会非常匹配，甚至不用再做修改。
4. 用一个接受 CMYK 颜色的扫描程序扫描印刷的 Logo 图像，并使用 Photoshop 软件的 Pantone Colour Swatches（Pantone 颜色样本）使印刷色与 Web 颜色尽可能地匹配。不过使用这种办法，你的扫描仪必须要能接受 CMYK 颜色，且你必须要有 Photoshop 软件。

就我而言，我从乔治亚理工学院运动队网站上的吉祥物图案中抓取到了最匹配的金色。这里金色的颜色代码为 #eab200, 黑色的颜色代码为 #000000。背景色为深绿蓝色（颜色代码 #002123），用于 Logo 的下拉式阴影。还有什么比从这个大黄蜂吉祥物图案（见图2）中抓取相匹配的颜色更容易呢？

图2：用于为 Logo 配色的乔治亚理工学院吉祥物图案的一部分。

附注：你很少会遇到有公司没有在名片、信头等上面使用其在网上的公司 Logo 或品牌标识的。不过很多此类公司似乎都接受网站上呈现出来的公司 Logo 等的颜色，而不是去对颜色进行更改，以与印刷品上的颜色相匹配。因此，不要总是信赖一家公司网站上的 Web 颜色，尤其是 Web 颜色与该公司印刷品（如宣传册或信头）上的颜色并不匹配时。更适宜的做法是，询问公司偏向于选择哪种颜色——也许他们一开始并没有注意到Web颜色和印刷色是有差别的。

页面布局

为简便起见，以下我将只示范一种页面布局。我选择的是这样一种博客页面布局：把更新频率最高的部分放在页面主体区域的上部，把导航栏放在页面顶部和包含最近更新内容的那部分页面主体之间，便于访问者点击，同时把过去的帖子放在页面的下端（below the fold，即除非用户向下滚动屏幕，否则无法看到）。“below the fold”（字面意思是对折线以下－译注）这个术语起源于报业，即当报纸被放在售报台上销售时，读者将只看到报纸对折线以上（“above the fold”）的部分，因此这部分在对折线以上的文字和图片是很重要的，因为它能促使读者购买整份报纸。

这一“将重要部分放在页面上端”的理论同样适用于网站设计。用户进入网站后不向下滚动屏幕就能看到的页面部分即是“above the fold”部分，而用户需向下滚动屏幕才能看到的页面部分即是“below the fold”部分。因此，一个页面布局的诀窍就是：要让访问者无论是在任何分辨率的显示器上首先看到的内容和图片都能引起他们的注意（这也是你需要在多种不同的显示器/屏幕分辨率下测试你的网站的原因之一）。图3为 Wiki Whatevers 网站的博客页面布局草图：

图3：Wiki Whatevers 网站的博客页面布局草图（线框图）。

网站各个页面都将沿用这一页面布局，不过用于列出无图像的文章列表和博客条目列表的存档页面，页面布局可做适当修改。之所以要保持页面布局的一致性，其原因是不让网站访问者感到困惑。一旦用户“学会”如何使用一个网站，一般情况下都不喜欢看到各个页面的布局有很大变化。以下是这个页面设计包含的主要部分：

1. 页面顶部：页面顶部标题部分较小，我不希望让网站 Logo 占据太多的页面空间。尽管 Logo 较小，但 Logo 中的颜色将是网站的整体配色方案中的一个重要部分。页面顶部标题部分位于页面顶端，这是一种传统型的布局。Logo 将与博客主页相链接，这样便于用户点击 Logo 就返回主页，因为很多用户在访问任何网站时，都已习惯通过点击 Logo 返回主页。
2. 导航栏：导航栏放置在页面顶部标题部分之下，醒目且便于使用。在页面底端部分也将放置一个同样的导航栏。我这样做是遵循一种传统做法，即为那些不选择在浏览器中显示图像的用户，在页面顶部和底端都放置一个纯文本的导航栏。由于我还不确定是否要在页面顶部的导航栏中使用图像，因此我决定索性在页面其它部分（一般是底端）放置一个纯文本的导航栏。这种纯文本的导航栏，可帮助那些使用屏幕阅读器的盲人用户更容易地访问网页。至于你把纯文本的导航栏放置在页面的顶部还是底端，这并不重要，因为盲人用户和视力正常的用户一样，都可以既自上而下，也可以自下而上地快速浏览网页。是否在一个页面内的两个不同的位置都摆放导航栏，这取决于设计师和其客户的决定。如果你使用包含图像的导航栏且不再另外放置一个纯文本的导航栏，那么一定记住要为导航栏中的图像加入描述性的 alt 属性。这样，那些使用屏幕阅读器的用户和不选择在浏览器中显示图像的用户就都还是能知道那些图像指的是什么。请阅读本课程第17篇文章的相关部分，更多地了解正确使用 alt 属性。
3. 最新发布的博客条目：最新的博客条目值得突出显示，将这个部分放在页面上端（“above the fold”）的显著位置，对客户和读者来说都是有益的。这样用户一进入网站，首先映入眼帘的就将是这个部分。不过将这个部分放置在这个显著的位置，意味着客户将需要对这个部分持续地进行更新，否则将面临失去回头访问者的风险，这是因为如果一个博客没有新内容在其上发布的话，人们就不大可能定期来访问这个博客。
4. 以前发布的博客条目：以前发布的博客条目放置在这个部分，放置 3－5个条目应该就足以让访问者初步了解他们以下将可能从网站上看到些什么内容。这里加入图像可能会使页面更好看一些，但并非一定要加入图像，这是因为这个部分位于页面下端（below the fold），不是很需要吸引访问者的眼球。是否使用图像，主要可考虑两点：下载图像所需的时间会不会成为一个问题；以及以前发布的文章旁是否真的需要配上图像，以吸引访问者点解阅读整篇文章/博客条目。
5. 右栏：这是显示按类别列出的博客条目列表、存档文件，以及其他类型的站点内容，以供访问者点击访问的部分。其他页面如“about the company”（关于本公司）页面，也一般有这种右栏，列出网站网站索引和联系信息。你决定如何在这种边栏中列出这些条目是很重要的决定，因为博客将建立在你创建的分类、你构建的页面及存档资料之上。当你在扩充网站时，这些列表将变得更长，因此在我们这个示范网站中，访问者在页面上端（“above the fold”）右栏中可能看到的只是 categories（分类列表）。客户可能会认为“pages”（其他网页）条目比 categories 条目更重要，在这种情况下，右栏中排列的顺序就可改为“pages”在前，categories 在后。 作为边注，这个条目列表不列入可包括入一个边框或边栏的所有东西。一些客户可能会感觉页面有两个边栏更好，这样博客页面就会变成三栏的，而不是上图所示的两栏页面。
6. 页面底端信息：页面底端信息是非常重要的，它向访问者提供可一眼就看到的公司及其网站的背景信息。适于在页面底端列出的信息可包括：公司名称、公司 Logo、公司地址、电子邮件地址、链接（指向联系表单、隐私权声明、免责声明、法律信息等的链接）、新闻摘要等。正如前面已经提到的，你也可以在页面底端放置纯文本的导航栏。
7. 广告：在这个页面布局中，广告设计为横条广告，分别放置在“最新发布的博客条目”部分和“以前发布的博客条目”部分之下。这便于客户灵活选择做文字广告或是网幅图像广告。这种类型的页面布局，仅在页面上端（“above the fold”）和下端（“below the fold”）各放置一个广告。对多数网站来说，页面上有两处广告也已足够了。此外，这种页面布局是把广告放在网站内容部分的下方，把广告降到次要位置。

这种页面布局可以使访问者不滚动屏幕，即可快速地从页面主体区域转到导航栏，此外通过显示指向网站分类列表的链接，也可使访问者看到网站可能包含的其他主题。使用这种页面布局，即使访问者不滚动屏幕到页面下端（“below the fold”），也已经能看到显示在页面上端（“above the fold ”）的网站的主要元素了。

关于网站上的广告

如果网站上的广告是与网站内容相关的，那么在网站上做广告对客户来说是有利可图的，而对网站访问者来说也是一种服务。换言之，如果网站上的内容是关于花卉的，则网站上的广告可能包括景观服务、宴会服务（这与插花相关）等。因此，对这个提供开源代码资料的网站来说，你可能会去寻找与开源代码业务有关的广告客户在上面打广告。访问 Google Adsense，可在这方面给你帮助。在你的网站流量大到足以吸引其他广告客户到网站来做广告之前，此用这种类型的广告方式是最好的选择。不过在接受广告前，始终要考虑搜索引擎优化（SEO）这个要点，因为一些广告可能对客户网站在搜索引擎页面中的排名位置有负面影响。以下是一些很有用的 SEO 资源：

• Intelligent site structure for better SEO!（搜索引擎优化与智能站点机构），作者 Joost de Valk.
• Semantic HTML and search engine optimization（语义化的HTML和搜索引擎优化），作者 Joost de Valk.
• How Affiliate Programs Can Affect Search Rankings（分销联盟计划如何可能影响到搜索排名），作者 Fredrick Marckini.
• New Report Explores how PPC Rank Affects Traffic（关于每次点击付费排名如何影响网站流量的研究报告），作者 Jennifer Laycock.

附注：作为一个设计师，除在为自己设计一个网站时外，你一般不会负责网站的广告事务，不过如果你计划在将来与广告或设计机构合作，你可能会希望多了解一些广告业务。作为一个设计师，你在哪些要素造就出一个成功的网站这方面的知识越多，就越有可能取得事业的成功。如果可能的话，尽量多学习营销知识（为你自己，也为你的客户）和了解搜索引擎优化策略。

通过校验代码和征得客户的认可，确认页面布局

在使用代码执行这个页面布局前，我想让客户确认这个页面布局（或线框图）。我在说服客户某一个页面布局比其他页面布局要好时，使用了这样一种策略，那就是提醒他们在额外的页面布局上写代码要多产生费用。这会促使客户选定一种页面布局，而代码可以在以后进行调整，以做出一些结构方面的改动。

在选定页面布局后，下一步的工作就是书写代码并校验代码。我使用万维网联盟的标记校验服务和 CSS 校验服务，来确认用于构建页面布局的 HTML 和 CSS 没有错误。你可以直接从你的计算机将文件上载到万维网联盟的校验服务站点，而并不需要将文件上载到客户的站点上去测试。这种测试让设计师和/或编程员可以发现在前端的任何错误，这样就可以在向页面添加图像图片、广告和其他东西前，更正这些错误。

可访问性也是一个重大的问题，你需要确认网站能为残疾人（如盲人和有运动障碍的人）所访问。这要比校验你写的 CSS 和 HTML 难一些。尽管有一些现成的检测工具如 TAWDIS 等可用，但你最好还是让真实的用户来检测你的网站的可访问性，并就网站的可访问性进行定性分析。尽管它可以就一些具体细节正确与否给出一些提示，检测工具是不能够做出网站是否具有可访问性的结论的，而且有时检测工具也会出错。在本课程后续发布的文章中，还将详细讲述可访问性，请继续学习吧。

你还应该在不同的可用浏览器中测试你的页面布局，这样你就能确保你的网站能为尽可能多的上网用户正常看到。你可以在 Mac，Windows，Linux 和手机平台上做这种测试——这些平台上都安装有不同的浏览器；或是使用仿真程序如 VMWare Fusion 等，在一台计算机上仿真多个系统，不过这很劳神费时。另外一种可选办法则是使用浏览器截屏服务如 BrowserCam 等，这种浏览器截屏服务快捷、方便，涵盖很多种不同的浏览器（包括一些相当老的浏览器）。这些浏览器截屏网站提供24小时的免费试用，你可以去看看他们的服务是否适合你的需要。在免费试用期后，付费使用这种服务也是值得的，尤其是如果你要设计很多网站，并要在很多种不同的浏览器上测试网站的话。

最后，你最好与客户沟通，让他们知道页面布局的代码已经写好且已通过校验；此外，你还应该让客户知道为让网站在不同的浏览器上都正常显示，需要对线框图做出多少处改动。只有在代码已写好并通过校验，且征得客户的认可后，你才能开始向页面添加颜色、图片图像，以及其他代码（如广告代码等）。尽管这种工作可能有些乏味，但确认所有前期工作都已通过校验并获得客户的认可，这是必要的。否则，当你在后续阶段发现代码问题和浏览器兼容性问题时，你将需要很大力气去解决这些问题，造成工作强度增加。此外，当客户想审查网站的实际架构时，将你手头编制好的页面布局图或线框图提交给他们，会让他们高兴。

一旦你完成了这个前期阶段的工作，你就可以开始进行格式化文本、添加颜色、图形图像等工作。至于具体该如何做，我将在下一篇文章中讲述。

总结

由于网站设计涉及多方面的工作，Web 设计师通常需要多方面的知识和技能。你设计的网站是会不断扩展呢，还是始终保持原样不变？在网站不断扩展时，虚拟主机提供商能始终提供高质量的服务吗？客户需要将网站从一个虚拟主机迁移到另一个虚拟主机，以适应网站扩展的需要吗？如果设计师无法一个人完成全部设计工作，他有一个能给予他帮助的团队可用吗？

因此，则配色和添加图形图像前，设计师需要先确定网站的基础结构。网站设计受到委托建站的公司所从事的业务的影响。同时，在规划阶段，就可以将一些以后可能出现的潜在问题加以解决。这种解决潜在问题的能力是职业设计师应具有的能力。

一旦基础已经确定，且网站架构图和线框图也已编制完成，设计师就可以开始实施配色方案，以完成整个网站的设计，最终提交给客户批准。

延伸阅读

以下是其他一些提供设计检查清单的网站：

• Dive In Designs checklist
• Net Mechanic’s Web Usability Checklist
• Max Design checklist
• Usability First’s Checklist
• David Skyrme and Associates’ Checklist
• SCORE's Web site design checklist

练习题

• 在你开始进行网页设计前，需要已了解到哪些信息？
• 为什么你必须将你计划在网页上使用的各个要素都列出来？
• 研究虚拟主机提供商为什么很重要？
• Web 设计师可能需要做多方面的工作。如果你对 Logo 设计一无所知，而客户又要求你设计一个 Logo，你将怎么处理？
• 给出为什么需要研究竞争对手网站的两个有力理由。
• 什么是 CMYK 颜色，以及这些字母都指什么颜色？
• 给出至少两种将 CMYK 颜色转换为相匹配的 RGB 颜色的方法。
• 给出为什么设计师在网页的页面布局中至少需要在一处放置一个纯文本的导航栏的理由。
• 为什么设计师要在整个网站内都保持一致的页面布局？
• 给出为什么要在设计的早期阶段进行代码校验的一个理由。

• < 上页
• 下页 >