网站设计必须知道的65条原则

　　网站中有哪些关键技巧？有哪些陷阱？在这里，世界上一流的网站设计专家，让你共享他们的秘密，告诉你：使网站赋予情趣的诀窍、应该避免做什么、应使用什么工具软件以及他们喜爱和厌恶的网站。

　　01 明确内容 　　

　　如果你想成为一个网站设计者，并正想建一个网站的话，首先应该考虑网站的内容，包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。

　　02 抓住用户

　　如果用户不能够迅速地进入你的网站，或操作不便捷，网站设计就是失败的。不要让用户失望而转向你的对手的网站。

　　03 优化内容

　　内容是核心。大约在两年以前，企业网站就像一本广告册子，更槽糕的是，网站使用了大量的图片，似乎要几个世纪才能下载完。 　　Chanels网站（www.channels.co.uk）在设计的某些方面是成功的，但是内容太贪乏，并且要花很长时间才能找到所要的东西，因此不能算是一个成功的网站。 　

　　04 快速下载

　　没有什么比要花很长时间下载页面更槽糕的了。作为一条经验，一个标准的网页应不大于60K，通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。

　　05 网站升级

　　时刻注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行缓慢。但是，如果你不想失去访问者的话，一定要仔细计划好你的升级计划。

　　06 坚持基本原则

　　即使你不懂HTML语言，你只需购买一个有版权的所见即所得的网页设计工具，如Adobe PageMill 或 Microsoft FrontPage Express，就可以创建一个看起来很合理的网站。但是，在设计时，这些软件包虽然不需要HTML，却使网站速度下降。 　　为了成功地设计网站，你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案，用Notepad制作网页。

　　07 学习HTML

　　用HTML设计网站，可以控制设计的整个过程。但是，如果你仅仅是网站设计的新手，你应该寻找一个允许修改HTML的软件包。HomeSite4是一个很好的Web设计工具。在设计过程中，HomeSite4能帮助你学习HTML。它还允许你切换到所见即所得的模式，以便你在把网站发送到Web之前，预览你的网站。

　　08 用笔画一个网站的框架

　　圣人云：笔比剑更强大。在用计算机之前，用笔画一个网站的框架，显示出所有网页的相互关系。计划好你的用户如何以最少的时间浏览你的网站。

　　09 “在计算机上永远也找不到好的方案”。 　　 ——专家忠告

　　10 网站地图

　　许多设计者把他们的网站地图放在网站上，这种做法，却是弊大于利。绝大部分的访问者上网是寻找一些特别的信息，他们对于你的网站是如何工作的，并没有兴趣。如果你觉得你的网站需要地图，那很可能是需要改进你的导航和工具条。

　　11 “睁大你的眼睛，留意所有的事情。对最不相关的东西的观察可以得到最好的灵感。观察一个站点的结构和设计。理解站点结构的关键元素，确保你的设计是围绕站点浏览进行的。” 　　 ——专家忠告

　　12 点击规则

　　听说过3次点击规则吗？对于小型网站，在你的主页上，没有任何一条信息，需要点击次数超过3次的。对于大型网站，使用导航和工具条来改善操作。

　　13 特殊字体的应用

　　虽然你可以在你的HTML中使用特殊的字体，但是，你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍需要一些变通的方法，以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题，但是只有最新版的浏览器才支持CSS。

　　14 “使用切合实际的简便的命名规则。” 　　 ——专家忠告

　　15 检查错别字

　　好的拼写是人们一生中重要的技能。但是遗憾的是，许多设计者都缺少这种技能。确保你拼写正确，并且格外注意平常容易误写的错别字。

　　16 避免长文本页面

　　在一个站点上有许多只有文本的页面，是令人乏味的，且也浪费Web的潜力。如果你有大量的基于文本的文档，应当以Adobe Acrobat格式的文件形式来放置，以便你的访问者能离线阅读。

　　17 不要使用卷滚条 　　人们厌恶在网上使用卷滚条。Trouble网站（www.Trouble.co.uk）是一个典型的设计很差的网站。它基于一个浮动的架构，为了阅读所有的文本，浏览者不得不使用卷滚条。

　　18 专家最喜爱的Web设计工具

　　1.Adobe Photoshop 　　

WEB界面静态化进入最后的环节，可以令管理员分门分类分子网地选择项目进行静态化，主要是首页，效率很高，按由XML设定的静态化项目，一个网站管理员可以在几分钟内完成上千个首页的静态化发布。但是当进入到再翻页部分时，却令我沉思了整整半天，觉得前面几天的路,也许走错了。

　　要知道错在什么地方，最好先看看为什么要进行WEB界面静态化。我绝不在乎已经浮了两年多的所谓不能把WEB界面变成静态页面就是技术不佳的话，事实上，今天才开始静态化是由于搜索引擎的要求。换言之，如果不是由于有搜索引擎极大的访问压力，仅仅是人的点击的话，根本不需要考虑动态网页静态提供。这就是路可能走错的原因，因为，对于人来说，把首页进行静态化是可以减轻访问压力的；而对于搜索引擎来说，如果梢页也是以伪静态形式提供的话，那么是否首页并不重要了，因为搜索引擎会顺着连接把整个网站搜个遍，如果仅仅是把首页静态化，对于减轻搜索引擎的压力没有什么帮助，如果是把所有异化的网页全部静态化，工程何其大也，包括使用者网站编辑，她们能够承受吗？

　　把首页静态化的原因，说起来主要与中国国内的网站设计陋习有关：总是把首页做得奇大无比，塞满了没有人看的垃圾。因此，假设受众总是先到首页的话，那么首页的负载就是后续页面的几十倍，把它静态化，也就省下了资源。但实际上目前的趋势，或者说国外网站的大势是使用精简的小首页，这样静态化就没有太大的必要；如果访问负载来自于搜索引擎的话，就更没有必要了。

　　那么什么内容应该以静态网页提供呢？大致可以把网页分成三类：一是导航性网页，这类页面变化少，适宜使用静态页面提供；国外网站的首页一般是这种形式；二是内容分类列表、摘要网页，这类是相对于书本的目录，如果是更新频繁的话，静态网页很难做，主要是需要实时更新的内容太多，一般适宜动态网页；三是内容页，如文章内容，这类网页罕有访问，也极少变动，适于变成静态网页。国内的网站的常见的大首页，主要是把第一类和第二类的功能混淆起来。我的系统的功能目前是主要把第一类变成静态，还是挺有用的，但尝试把第二类变成静态，就不恰当了，这就是我错的地方。

　　“把动态页面转成静态页面”，需求看似简单，但只有实际做下去，才知道什么是合适的，什么不是合适的。

　　Banner作为网上广告宣传的主要形式，越来越受到许多网站的青睐。笔者在制作自己的网站时，喜欢用友立Gif Animator加工一些创意独特、制作精美的Banner，它不但能给访问网站的用户留下一个深刻的印象，而且能体现你做的网站非常专业。一个偶然的机会我发现一个名叫BannerShop Gif Animator的软件，使用后发现它能做出非常专业级的Banner来。从其中“Master Frame”的概念来讲，它在功能上已超过了友立Gif Animator，并且在制作动画方面包含了友立Gif Animator的所有功能，其内置的图片过渡效果还可以从网上下载，非常方便。笔者不敢独享，赶紧介绍给各位幸幸苦苦制作网页的菜鸟们。

　　BannerShop Gif Animator是Selteco公司的主打产品，最新版本5.0.6.2。由于是共享软件，只有30天的试用期，所以每次当你运行该软件时都会有一个让你注册的对话框，我们可以按对话框上的Evaluate按钮来试用该软件。操作界面如图1所示。

图1

　　应用案例：房地产超市动画

　　制作步骤：

　　1.新建一个文件，按[Image>Import Image…]从BannerShop Gif Animator安装目录下的Tutorial目录中导入chicago.gif文件。

图2

　　2.缩小图片的尺寸。按[Image> Image Size…](如图3)将图片设置成宽为200像素、高为33像素的图片。

图3

　　3.点击 按钮自动将当前帧的大小调整为当前图片的大小。

　　4.点击Current Colors浮动窗口的前景色按钮(左边第一个按钮)，弹出的对话框中，在Predefined Colors的下拉框中选择Orange，把前景色改为橙色。

　　在制作网页的过程中，自适应问题是经常遇到，而又最让人头疼的，看了好多种解决的方法，但是都不是万能的。今天遇到这个问题，实在让我挠头，借鉴了Shark的方法，又给了我一个新思路。当时没仔细看LBS的样式表，今天才发现，.clear用的就是这个方法。接下来，我会做个关于“自适应高度”问题的汇总，以便今后遇到问题时候更快解决。

　　为了解决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后加上一个Spacer Div（clear:both）。但是IE和Mozilla对div的解释不同引起一些表现上的差异。

　　最简单的Spacer：

.HackBox{clear:both;}

　　IE可以正确地产生预期的效果，但是在Mozilla中不起作用。所以现在很多人是这么用的
.HackBox{ height:0; clear:both;}

　　然后XHTML中加入一个&nbsp；，如下：