网站设计

目标

在设计网站之前，设定目标很重要。网站服务于什么目的？并非所有网站都服务于相同目的。例如，零售网站的目标与非营利网站的目标截然不同。

一些常见的网站目标是

销售
营销
更新信息
生成潜在客户
分发信息

目标，在任何环境中，对企业成功至关重要。通过设定业务某个方面的目标，在本例中为网站，将有助于实现业务的其他目标，例如

扩大受众
增加销售额
连接其他企业或公司其他部门
一般沟通

设计信息

设计信息是组织希望向读者传达的形象。这也可以称为品牌。在创建网站外观时，您必须考虑徽标、颜色、字体和图像。所有这些都必须支持组织的个性。

传达品牌正在成为工作场所越来越普遍的事情。企业内部需要保持一致性，以便企业能够呈现统一的形象——并相信它。为网页赋予一致的外观将有助于将其定义为一个有凝聚力的网站，并将使导航变得更容易。由于公司正在围绕“主题”或“品牌”构建其工作场所，因此网站没有理由不以相同的方式进行。事实上，这是品牌识别所必需的，因此可以帮助公司发展和成功。一致的品牌和形象也为公司建立了信任和价值。

在传达品牌时，需要考虑一些重要事项

品牌，无论是通过网站还是客户服务传达，都必须保持一致
品牌应该无处不在——品牌曝光没有限制
简洁明了永远是最好的路线
您就是品牌，品牌就是您。如果您的品牌不反映公司的价值观和信念，那么它绝对不应该出现在您的网站上。

识别您的受众

了解您的受众将有助于您在决定支持哪些浏览器以及认可哪些新技术方面做出更好的决定。在设计新网站之前，最好调查一下您要面向的受众可能使用的浏览器、计算机用户知识和连接速度。在重新设计现有网站时，您可以查看过去的网站使用信息，以便您在最需要的地方对网站进行改进。

在设计网站时，应遵循一些不同的指南。以下是一些常见的网站类型

学术和科学网站应该更加关注网站在无图形浏览环境中的功能
面向消费者的网站应该特别注意网站性能和展示
在使用特定浏览器的受控环境中，例如企业环境中，最好充分利用网站的所有功能。员工通常会参加培训以学习如何使用这些网站，而设计师可以使用浏览器的全部潜力。
游戏网站可以假设用户拥有最新的插件和浏览器，并且在技术上非常精通

您还可以采取平衡的网页设计方法。这种设计整合了最新的网页技术，但以一种对那些使用旧浏览器的用户仍然有效的方式实施。

检查网站目的

弄清楚网站将如何使用是网站设计中另一个重要步骤。那些使用互联网的人通常分为两类

那些寻找信息的人
那些在互联网上寻找娱乐的人

对于信息网站，您可能需要考虑客户的技术水平或在设计中使用更通用的方法。对于那些寻找娱乐的网站，可以使用更前沿的技术来改善用户访问您的网站时的体验。

对于那些想要在其网站上使用最新技术但又想让每个人都能使用它的人，可以选择。在这种情况下，您可以使用浏览器检测器根据用户使用的浏览器类型提供不同的版本。这允许您使用最新技术，同时仍然识别使用旧浏览器的用户。

测试您的网站

在许多不同的浏览器和浏览器版本上测试您的网站。在上线之前这样做将有助于在网站对公众开放之前解决您可能遇到的问题。专业的网页设计公司会对其网站进行严格的质量保证阶段。如果这不可行，您可以在私有测试网站上发布您的网站。然后，您可以对以下浏览器运行自己的质量保证测试

熟人的浏览器
公司办公室浏览器
不同的 ISP

网站页面在不同的环境中显示会有所不同。这个测试阶段的总体思路是确保信息清晰地呈现，并且没有明显的错误。

内容

内容是创建网站最重要的原因之一。仔细想想，没有内容的网站就没有目的。没有目的的网站就是互联网上的浪费空间。

在考虑网站内容时，请务必考虑以下事项

网站的目标是什么？
网站试图接触到谁？
人们在网站上阅读信息要花多少时间？
个人如何访问该网站？
对读者来说最重要的信息是什么？
读者有什么问题？
读者在阅读网站内容后应该采取什么行动？

另一个需要考虑的网站内容方面是它如何在不同的搜索引擎中被搜索。您的网站中需要包含关键词，以确保该网站能够被寻找特定信息的人找到。使用关键词时要具体，并使用多次，这样搜索引擎机器人就可以找到该词并将其置于搜索结果列表的高位。

内容还必须适合年龄和受众。在互联网上很难确定年龄是否合适，因为任何会使用计算机的人都可能访问它。但是，网站上的内容仍然必须适合年龄，以便合适的受众能够阅读合适的材料。年龄适当性还包括确保私人信息不会在互联网上公开的总体适当性。受众适当性意味着网站的内容为人们提供了正确的信息，并且处于合适的阅读水平，以便目标读者能够理解。

随着企业越来越重视网站的可使用性，专门负责内容写作的职位正在涌现。网站内容撰写者专门负责为网站撰写信息。这种写作风格与学术写作不同，旨在吸引网页浏览者对网站以及信息的兴趣。

创建主页

您的主页将是您网站上访问量最大的页面。您的主页可能并不总是包含您的访客想要的内容，因此如果您有一些东西可以吸引他们，让他们想要进一步寻找他们需要的信息，您将有十秒钟的时间来吸引您的客户进入您的网站，否则他们将点击“返回”按钮并开始寻找其他地方。您的主页应该能够快速加载。当客户点击指向您网站的链接时，您拥有的十秒钟时间来吸引客户开始计时。如果您的网站加载需要五秒钟，那么您只有几秒钟的时间来吸引客户进一步深入。以下是一些帮助您加快网站加载速度的技巧

保持媒体图像大小
- 将图像限制在不超过 5 到 10KB
- 每个页面的大小不应超过 30KB
避免在您的主页上使用来自外部网站的广告，因为这些广告可能会减慢加载时间。您无法控制其他服务器提供其内容的速度。
将您的 HTML 代码分成几个部分，这样当页面底部仍在加载时，您的客户可以阅读主页的顶部部分。

关于主页的另一个重要点是永远不要停止修改它。当您的网站启动并运行后，审查您的日志文件可以帮助您使您的主页更易于用户使用。更新链接或颜色可能会提高您网站的吸引力或易用性。请记住，一切都可以更改，如果您不满意某个工作正常的东西，您不必接受它。

兼容性

功能在不同的 Web 浏览器中并不总是以相同的方式显示。使用多个浏览器检查已创建的页面可能很有用，以确保该页面对更广泛的受众正确显示。可以使用访问 validator.w3.org 验证已完成的 HTML 代码。可以上传并检查已保存的 HTML 代码的准确性。将列出 HTML 语法中的任何问题，以及更改错误的建议。这样可以消除需要人员在尝试在浏览器中显示 HTML 代码后搜索自己的代码以查找错误的必要性。

设计注意事项

综合

可用性

可用性是指使用网站的便捷程度。这可能是指网站的目标受众（参见受众），也可能是指网站所需的行业或商业标准。随着互联网的发展，网站的可用性定义经历了不同的变化。在互联网的早期，许多人不知道如何浏览网站或阅读提供的信息。这使得网站无法使用。现在，人们寻找最便捷的方式来获取所需的信息。

可用性意味着沟通

网站是一种视觉传达形式，具有多种用途。网站可以是信息性的、说服性的、长期的、广告性的或娱乐性的。可用性是根据网站的目标确定的。

如果网站实现了其目标并传达了必要的讯息，那么它就可以被认为是可用的。

开发可用性

在网站建成之前就开始对其进行测试将有助于在投入大量精力之前避免一些问题。计划在焦点小组中进行可用性测试，以帮助您为一个更好、更易于用户使用的网站做好准备。如果您无法访问焦点小组，您可以打印出您的想法并与家人和朋友分享，并征求他们的意见。在开始创建您的网站时，需要注意一些要点

了解人们对您网站的期望。客户可能想要与您准备构建的内容不同的东西。
您使用的措辞将对您网站的有效性至关重要。如果您尽早开始测试，您可以了解哪些词语可以更好地向您的受众传达您的讯息。
客户将为您提供好的想法。与客户进行测试将为您提供您可能没有想到的想法。
使用描述性标题、粗体字和项目符号列表以方便阅读
整合链接和资源以获取更多信息
添加图片、图表和图形以增强传达效果
避免添加不必要的信息、图片、声音或颜色，这些东西会分散注意力而不是提供帮助
与受众一起测试网站以确定其实用性

测试是构建网站的关键。您必须愿意倾听他人的意见，无论是朋友还是潜在客户，这样您就可以从一开始就拥有一个更好的网站。

外观

外观应赏心悦目，易于观看和操作。最重要的是用户来到这个页面想要找的任务（例如电子邮件地址或关于某个事件的信息）或最常搜索的任务应该成为网页的主要焦点。无论是某些颜色引导着这种重要性，还是大小、或在页面上的位置，甚至引导您到那个点的方向线，重要的任务都绝不能成为次要的。换句话说，它们应该更突出，而不是成为图像或背景的次要内容。您网站上的所有内容都应该有其目的，有其位于当前位置并以当前外观呈现的原因。

图片和颜色很重要也很有趣，但远远没有内容重要。对于任何网页来说都是如此。用户进入网站后不应该感到困惑。他们应该知道需要点击哪里（并理解点击后会发生什么），并且不应该被图像分散注意力。除非有意，否则图像应该最小化，并且只帮助推动内容的重要性，而不是压倒页面。因此，网页设计师的职责是确保这种情况不会发生。无论是通过布局（参见布局）还是通过视觉干扰、使用线条或颜色强制眼球运动、或通过设计师认为有价值的任何其他手段，内容都应该首先看到，图像其次或第三。

可见性

可见性可以被认为是网站设计中最重要的方面。人们必须先找到网站才能查看它。通常人们通过搜索引擎找到网站。

以下是一些提高可见性的技巧

为图片添加文本
检查 html 代码以查找错误
使用相关的标题标签
使用所有互联网用户都能看到的导航
删除重复内容
不要使用隐藏文本

布局

网站的布局应该尽可能简单。额外的装饰只会分散用户的注意力，造成混乱。您希望您的网站具有视觉上的吸引力，但最重要的是，要易于理解。用户访问您的网站是有原因的，如果布局不成功，用户很可能会离开页面，到其他地方寻找他们需要的信息。

创建布局时要牢记的要点

从线框图开始；使用简单的方框和线条来组织您的页面。图片应该是事后考虑的。
想想您希望用户首先看到什么，以及什么是最重要的。将这些内容设置为最大、最粗体、最鲜艳的色彩，任何能够吸引注意力的方式都可以（但要小心，不要让用户感到不知所措）。
始终牢记，大多数文化习惯从左到右，从上到下阅读。
- 将您的徽标放在左上角，以吸引用户关注页面的其他部分。
- 将您最不重要的信息（联系方式、外部链接、网站地图、相关信息等）放在左下角。人们不会错过它，但他们会在浏览页面其他部分之后才会进入那个角落。这样可以防止查看者看到他们可能不想看的内容。
尝试将您的查看者从左上角以向下对角线的方式引导到右下角。如果以这种方式设计您的信息，您的查看者将首先看到该对角线上的内容。然后他们会继续查看您在页面其他地方战略性地放置的任何其他信息。
如果您是网页设计新手，我建议您坚持使用自定义布局，标题放在左上角，选项卡横跨左上角（在插入选项卡之前，在徽标下方留出空间，徽标需要空间来展示），滚动条位于右侧，按钮是半 3D 的（提供点击效果，让用户知道“嘿，我可以点击，我在另一个页面上提供更多关于此内容的信息”。人们会扫描突出显示的内容，如果某些内容看起来不可点击，没有人会尝试点击它）。

这些只是基本知识。在实现成功的网页之前，还有更多要考虑的事情，但这只是一个起点。

构建网站

整理

组装

网页创作程序

网站文件

模板

对搜索引擎友好

标题标签

标题标签在任何网页中都起着重要的作用。放在标题标签内的文本将成为页面的名称，可以在浏览器工具栏中看到。例如，如果您正在查看 Google 的网站，页面的标题将简单地是“Google”。标题很有用，因为它们允许用户通过简单地查看其网页浏览器中的选项卡来轻松查看他们打开了哪些网站。标题标签还在将页面添加到收藏夹时为页面提供标题，并在搜索引擎结果中显示页面的标题。

在 HTML 中，标题标签位于 head 标签内。与所有其他 HTML 标签类似，它以<title>开头，以</title>结尾。在这两个标签之间，HTML 文档的创建者可以放置他们认为最能标识他们正在创建的网页的任何文本。例如，Google 标题将写成<title>Google</title>。

主体标签

body 标签定义 HTML 文档的主体。HTML 文档的所有内容都放置在这里。这包括文本、链接、图像、表格、列表以及页面需要的任何其他内容。在查看网页时可以看到的任何内容都在 body 标签内。

虽然 body 标签的写法与所有其他 HTML 标签相同，但它几乎总是不止一行。例如

<body>

文档内容

</body>

body 中的每一行通常都是一个单独的元素。例如，一行可能是链接，下一行是图片。以这种方式将 body 拆分为多行使编写和编辑 HTML 变得容易得多，因为它使所有内容都更容易单独查看。此外，可以缩进行，使文档更易于阅读和编辑。例如

<body>

</body>

这也使 HTML 文档的创建者能够轻松地查看所有标签是否正确打开和关闭。虽然建议将 HTML 拆分为不同的行并相应地缩进，但这并不是必需的。

ALT 标签

META 标签

与 HTML 中的许多其他标签不同，<meta> 标签没有结束标签。也就是说，包含在标签中的所有信息都放置在方括号内。例如

在这个例子中，<meta> 标签告诉浏览器 HTML 文档的关键字是 HTML 和 CSS。name 和 content 字段可以是作者希望包含的任何信息。如果作者希望包含文档的创建日期，他们可以编写

这使得<meta> 标签在创建和组织多个 HTML 文档时非常有价值。

这会告诉浏览器每 30 秒重新加载页面。除了这一点，<meta> 标签还可以告诉浏览器如何处理 cookie 并指定文本方向，以及许多其他事情。

门户页面

参考资料

Concepción, Anne - Marie. 专业网站设计从头到尾. 辛辛那提：How Design Books，2001 年。

Heng, Christopher. “如何创建对搜索引擎友好的网站”。http://www.thesitewizard.com/sitepromotion/search-engine-friendly.shtml。2010 年 4 月 11 日。

Kyrnin, Jennifer. About.com 网页设计指南. 艾文，马萨诸塞州：F+W 出版公司，2007 年。

Niederst, Jennifer. 网页设计概述. 塞巴斯托波尔，加州：O'Reilley 和 Associates, Inc.，1999 年。