前言：

前面文韬互联和大家对网站设计的导航栏目划分进行了初步的探讨，由于时间比较匆忙，可能谈的没有那么深入，今天和大家沟通的主题是"网站设计之详情页设计及代码减肥",里面涉及到两方面，第一是图片设计，第二是代码减肥，可能对于很多人来讲有点麻烦，这属于两个范围了，毕竟懂代码的人，未必会设计;会设计的人，未必懂代码。

(正文开始，请君阅读)

网站设计，从页面层级来讲，包括首页、列表页以及详情页等;从结构上来看，就是头部、尾部以及中间的部分。在网站制作过程中，目前区分结构的方法比较简单，看页面就是从上到下，从左到右;当你右键查看源代码时，统一从上到下，就可以看到整个网站的结构和布局了。

如何为网站进行瘦身?

网站制作的前面，是网站设计与切片，当然，网站设计只是考虑逻辑与美观，至于网站效果的实现则是由切片后的代码实现的。如果在网站制作过程中，能为以后作进一步的考虑的话，提前规划好网站瘦身，就可以从源代码这里开始考虑了。

以前的网站制作，一般多以table表格为主，很少会涉及到div+css，但随着web发展的速度，到现在html5都已经很时兴了，table表格就逐步显得落伍了。所以，我们记住的第一点就是网站的制作中，优先以div+css进行布局。

大家都知道.css文件是网站的样式文件，有些朋友喜欢一个网站调用很多样式文件，也有一些朋友喜欢将所有的样式放一个.css文件里。实际上，当我们使用百度网站测速工具时，系统会从很多层面进行分析，比如.css、.js、图片等文件的加载速度出发，提供一个意见：将不同的.css文件放在一个.css文件里，避免资源调用的浪费。

同时，代码的制作要规范化。该有的代码必须有，冗余的代码则必须清除掉，过多的标签给页面增加了负担，比如一个页面只有500KB，可能就因为有多而无用的标签则增加了页面的大小。再者，将冗余的注释代码也去掉。一眼就能看清楚的结构，就无须过多地注释了。

再者，尽量将.js代码放置在页面的最下面，一般.js是页面效果的显示，为了提高网站的访问速度，可以先完全加载出来后，再来显示效果。

这里对代码的设置不做过多的讲解，比如分布式、负载均衡等，只是一个理论的概念，具体操作以后我们再细谈。

图片轮播的代码怎么设置?

在前面的文章中， 我们介绍过网站为了显得高端大气上档次，有时候会为导航栏通栏显示，图片也会设置成大banner。在以前的图片轮播的代码中，一般以flash或frame框架显示，文韬互联在2012年接触的一个网站，图片轮播就是以flash显示的。但发展至今，早已经取消了flash来显示图片的设置。

取消的原因是随着互联网技术的发展，搜索引擎依旧不认识flash要表达什么，同时浏览器在加载渲染页面时，更喜欢最新的技术——HTML5。我们现在在设计图片的过程中，有两条标准需要遵循：图片质量要好，要清晰，同时图片要表达的主题要突出。我们看到网站的图片时，要能接受并且明白它要表达的意思。

现在绝大部分网页中，图片的轮播都会有上一页和下一页的提示和操作。可以让我们选择观看不同的图片。同时，不同的图片，可能链接不同的内容，这个也是可以设置的。

详情页面该如何布局设置?

一般我们会把内容页当作最后一层页面，也就是说在这一层页面中，就没有比它更深一层的内容显示了。那么，在这一层页面中，我们有几个地方需要考虑：

增加关键词之间的的关联性

增加页面上下页的关联性

扩大用户访问的粘性

怎么理解增加关键词之间的关联性呢?比如当前用户访问的页面的关键词是A时，一个网站的内容很多，会有其他的页面的关键词也是A，假设这两篇文章有一定的关联，可以适当的推荐这篇文章给用户访问，以此来提高用户的访问体验。调用代码有几种，其一为增加tag标签区域，让用户点击tag标签，可以看到凡是网站中设置了关键词为A的文章都有哪些;同时，在页面中，可以增加关键词相同或相似的文章显示，一般可以调用8篇比较合适。

怎么增加页面上下也的关联性呢?可以通过设置代码的上一页、下一页，让前端显示的内容中，能调用到上一篇文章和下一篇文章;如果下一篇没有文章了，那么自动回到当前文章所属的栏目列表中。

在扩大用户访问的粘性的调用中，以上两个操作是一种，同时，我们可以增加其他文章调用，比如一个月里点击量最大的文章前10的文章调用、评论文章的前10调用等等。能有利于用户获取信息以及增加他的访问体验的操作，都是可以尝试而且是有必要的。我们终是是要明白一点，搜索引擎存在的目的应该是将能满足用户需求的优质内容优先推荐给用户的。