第6章 十个窍门打造个性化精品网站

如何才能让你的网站与众不同？如何在成千上万的网站里表现出你的十足个性？一千个人有一千种说法。

在此，总结自己多年来做网站的经验和别人的建站技巧，谈一下建站的诸多窍门。

1.标题清晰，内涵显而易见

如今互联网上网站众多，只怕要数以亿计了，一个人一直不停的浏览也需要几十年才能看完，可见网站竞争非常激烈，即使同一种类型的网站，也有众多的竞争者。那么，如何在如此激烈的竞争中凸显出来呢？网站标题和栏目导航可谓承担了非常重大的责任。

任何一个人初次打开一个陌生网站都会思考下列问题：

这是什么网站？

网站上有什么？

我能在这里做什么？

为什么我应该选择这里，而不是其他地方？

你的网站便是要在第一时间为访客解决这些疑问。

网站名称一定要简单明了。比如说，你做的是建材行业的专业网站，那就直接命名为“某某建材网”，不要起一些非主流的名字，因为你做的是用来盈利的个人网站，而不是QQ空间。

网站构架一定要清晰，各个导航栏分类明确，次序井然。不要弄的跟迷宫一样，让人一看就眼花缭乱，不知从何处下手。那样的网站别人看一眼就立马走人了。如果网站内容较多，最好设置站内搜索功能，以方便用户查找。

用户是上帝。这句话对于网站站长来说同样有效。如果你的网站让用户感到麻烦，甚至是厌烦了，他们便会去找另一家同类网站。不要抱有侥幸心理，也不要做一些看似特立独行、别出心裁的网站页面。

相信我，越简单，越容易上手的网站，才越能得到用户的青睐。你看看百度的页面，看看hao123的页面，简单到只有一个个框框里的几行字而已。

2.关键词简洁有效

建设一个网站就要提高它的知名度，要提高知名度就要依靠搜索引擎，因为很多用户在不知道你网站的情况下是通过搜索引擎来查找的。既然这样，要想通过搜索引擎来提高流量，靠的是什么呢？是关键字。

关键字的选法可以说决定了你网站大半的命运。

（1）换位思考。

站在客户的角度考虑，客户在搜索你的产品时将使用什么关键词？这可以从众多资源中获得反馈，包括从你的客户、供应商、品牌经理和销售人员那里获知其想法。

（2）语义拓展。

将关键词扩展成一系列近义短语，选择其中比较适合的短语，用WordTracker进行检测，该软件的功能是查看你的关键词在其它网页中的使用频率，以及在过去24小时内各大搜索引擎上有多少人在搜索时使用过这些关键词。最好的关键词是那些没有被滥用而又很流行的词。

（3）专业词汇。

关键词一定要越专业越好，不要似是而非。要非常明确的表达出网站的功能，让专业人士在搜索的时候能够第一时间搜到你的网站。

（4）范围限定。

并不是说关键词概况的范围越大，越容易被搜到。而应该范围越小越好，越细越好。如果你是个地方性网站，关键词一定要体现这个地方的名称；如果是企业网站，一定要体现企业的品牌。

（5）修饰词组。

不要用单调的短语，比如说银行，你不能直接就设置银行作关键字，而应该进行修饰，到底是交通，是农业，还是工商呢？如果是工商，是工商的什么网站？信用卡购物？网上商城？

经常用搜索引擎的人应该知道，越贴近用户需求的关键词，越是会排在前面。比如你搜“电脑中病毒解决方法”，可能前三页大部分都是相应的解决办法，后面几页便是“电脑出问题怎么解决”，再往下就变成“病毒”，再往下就变成“电脑”，所以，精确而细致的关键词是非常重要的。

3.视觉效果

人们在阅读某种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。心理学研究表明，一般的浏览习惯是从上到下、从左到右，在一个平面上，上松下稳而压抑。同样，平面的左松右稳。所以平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”，也就是最优选的地方。在网页设计中一些突出或推荐的信息通常都放在这个位置。当然这种视觉流程只是一种感觉并非一种固定的公式，只要符合人们的心理顺序和逻辑顺序，就可以更为灵活地运用，在网页设计中，灵活而合理地运用直接影响到传达信息的准确性与有效性。

4.网页框架与布局

网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型，在这里就不做一一论述了。其实我们在做设计的时候并没有过多地考虑什么形式，比如我们在一张纸上看到一个圆形的东西，很容易联想到它像太阳，而有些人则联想到月亮等等。这都是一种形式比喻，最重要的是抓住客户的需求，把握网站的定位做出合理的框架布局。

（1）分辨率。

网页的整体宽度可分为三种设置形式：百分比、像素、像素 百分比。通常在网站建设中以像素形式最为常用，行业网站也不例外。我们在设计网页的时候必定会考虑到分辨率的问题，科技发展到现在我们通常用的是1024×768和800×600的分辨率，现在网络上很多都用778个像素的宽度，在800的分辨率下面往往使整个网页很压抑，有种不透气的感觉，其实这个宽度是指在800×600的分辨率上网页的最宽宽度，不代表最佳视觉，不妨试试760～770的像素，不管在1024还是800的分辨率下都可以达到较佳的视觉效果。

（2）合理广告。

目前一些网站的广告（弹出广告、浮动广告、大广告、banner广告、通栏广告等等）让人觉得很繁琐，根本就不愿意看，有时干脆连这个网站都不上了。这样一来网站受到了严重的影响，广告也没达到广告的目的。这些问题都是我们在设计网站之前需要考虑、需要规划的内容之一。

浮动广告有两种，第一种是在网页两边空余的地方可以上下浮动的广告；第二种是满屏幕到处随机移动的广告。建议能使用第一种的情况下尽量使用第一种，不可避免第二种情况时尽量在数量上控制最多一个就好。如果数量过多会直接影响到用户的心理、妨碍到用户浏览信息，适得其反。首页广告不宜过多，适中即可。如在注册或者某个购买步骤的页面上，最好不要出现过多的其他无关内容让用户分心，避免客户流失等。

（3）空间的合理利用。

很多的网页都具有一个特点，用一个字来形容，那就是“塞”，它将各种各样的信息如文字、图片、动画等不加考虑的塞到页面上，有多少挤多少，不加以规范，导致浏览时会遇到很多的不方便，主要就是页面主次不分，喧宾夺主，要不就是没有重点，没有很好的归类，整体就像个大杂烩。让人难以找到需要的东西。有的则是一片空白失去平衡，也可以用个“散”字来形容。

并非要把整个页面塞满了才不觉得空，也并非让整个页面空旷才不觉得满，只要合理的安排、有机的组合，使页面达到平衡，即使在一边的部分大面积留空，同样不会让人感到空，相反这样会给人留下广阔的思考空间，给人回味又达到了视觉效果。

（4）文字编排。

在网页设计中，字体的处理与颜色、版式、图形化等其他设计元素的处理一样非常关键。

①文字图形化。

文字图形化就是将文字用图片的形式来表现，这种形式在页面的子栏目里面最为常用，因为它不仅突出，同时又美化了页面，使页面更加人性化且加强了视觉效果，是文字无法达到的。然而，对于通用性的网站，文字图形化就导致了弊端——扩展性不强。

②强调文字。

如果将个别文字作为页面的诉求重点，则可以通过加粗、加下划线、加大号字体、加指示性符号、倾斜字体、改变字体颜色等手段有意识地强化文字的视觉效果，使其在页面整体中显得出众而夺目。这些方法实际上都是运用了对比的法则。如果在更新频率低的情况下，也可以使文字图形化。

5.网站配色

（1）用一种色彩。

这里是指先选定一种色彩，然后调整透明度或者饱和度，说得通俗些就是将色彩变淡或者加深，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

（2）用两种色彩。

先选定一种色彩，然后选择它的对比色（在Photoshop里按ctrl shift I）再进行微小的调整。整个页面色彩丰富但不花哨。

（3）用一个色系。

简单地说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。也就是在同一色系里面采用不同的颜色使网页增加色彩，而又不花，色调统一。这种配色方法在网站设计中最为常用。

（4）灰色在网页设计中又称为“万能色”，其特点是可以和任何颜色搭配，在使用时把握量避免网页变灰。在网页配色中，尽量控制在三种色彩以内，以避免网页花、乱、没有主色的显现。背景和前文的对比尽量要大（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容、也使用户在浏览信息的时候不会觉得累。

6.网站LOGO

Logo顾名思义就是站点的标志图案，logo最重要的就是用图形化的方式传递网站的定位和经营理念，同时便于人们识别。网站logo的设计过程中一般有以下三种思路：（1）直接以网站网址作为logo。（2）根据网站提供的产品或服务特点展开logo设计。（3）以传递网站运营商的经营理念为特色。

7.签上自己的名字，并展示得到的荣誉

不要在这里弄上一个长长的签名，少许的自我宣传可能是中肯的，尤其是当你想让自己的网页具有个人特色时，但这可能会带来困窘，妨碍实质内容。你所要作的只是连接到关于作者的那一页，该页也是弃权、版权声明及类似说明的合适地方。要是有以评论或读者意见的形式取得的肯定性反馈，可考虑把它包括在主页之内。也许在开头的某个地方，或者作为到荣誉页的一个链接。如果做得恰到好处，可以鼓励新的访问者并使他们放心。相反，要是做得不合适，就会被认为是自我吹嘘，而真正的内容反而处于次要地位。

8.对用作背景的GIF要谨慎

它们可以使一个页面看起来很有趣，甚至很专业，但是装饰背景很容易使文字变得不可辨读，要把背景做得好，光有颜色对比是不够的。背景要么很亮（文字较暗）要么很暗（文字较亮）。背景含图像的对比度要较低才不至于过于分散读者的注意力。

使用交织GIF和JPEG。因为交织图像是分级显示出来的。首先以很低的分辨率显示，然后逐步提高分辨率，直至最后达到正常显示。这种方式有时候会使较大的图像看起来好像装载得快一些（实际上并非如此，但这是一种有益的错觉）。这样也便于读者在图像装载的过程中看到它的模样，如果他们不喜欢或不想看的话就有机会中断传输或转向别的地方。

9.在IMG行加ALT标记

假设标题图像显示为The Offal EatersHomepage，你可以在括号内加上一个ALT标记，ALT=“The Offal EatersHomepage”，直接把它加在IMGSRC=Offal。com。uk/images/gif/hometop。gif之后，这样就会让使用基于文本的浏览器读者除了看到「IMAGE」以外还能看到别的一些东西，使用图形浏览器的读者在图像未能成功载入之时也会看到一些东西，而你也能让自己的HTML文件相当整洁。也可以在分隔条上使用ALT标记，这样就使得用基于文本的浏览器的读者能看到一些更有趣的东西，而不只是一条直线。

10.巧用命令

一种增加可得带宽的巧妙方法是在HTML底稿中使用Lowsrc命令。比如说有一张400×600像素的1600万色扫描图，所占空间约为35K。使用Paint Shop Pro这一类的工具对原图重新取样，比如说高度为100像素（也许为了达到自己的要求，你得进行调整才能找到最合适的大小，但可以从高度除以4开始），Paint Shop Pro全自动计算新画面的宽度、保存新画面，它的大小现在应为6K或更小。然后在HTML文件中可以这样写上：

〈img src=“bigpic。jpg”lowsrc=“smallpic。jpg”width=“600”height=“400”〉

Lowsrc命令指示浏览器在真正的画面载入以前先装载低分辨率的图像，这样就让读者清楚将会出现什么样的画面。（为确保浏览器能即时以合适的大小显示图像，高度和宽度很重要。）

当然，可以用Lowsrc提取你想要的任何图像，一条双色的“请等待下传”的信息可能只占几百字节，同时由于图像是存在浏览器的缓存区，因此可用“请等待”信息代替所有画面，当图像平静地消失于背景之中的时候，读者可以悠闲地浏览你的网页。

也可以在一个HTML元素内嵌入一个连接，如：

〈H1〉〈A HREF=“Destina-tion。html”〉Myheading〈/A〉〈/H1〉

但不能反其道而行之，把一个标题或其他HTML元素嵌入一个连接，下面这样的结构是正式的HTML规定禁止的，并可能在大多数最新的浏览器下不见效果：

〈A HREF=“Destination。html”〉〈H1〉Myheading〈/H1〉〈/A〉

当然，做网站的窍门还有很多很多，每个人在运营过程中都会发现属于自己的一些技巧性东西，希望你也能提供出来，让大家一起分享。