昆明网站建设信得过品牌，西南首家三维全景技术提供商，为您提供营销型网站建设服务。

在网站建设中，对于一个网站的结构来说，URL也是非常的重要，在URL制作时我们应该事先做好规划，应该从用户体验和搜索引擎蜘蛛体验出发，在总体上边应该做到URL清晰、友好、方便记忆，然后还要适当的考虑对于搜索引擎排名的影响，具体来说，URL设计时我们要从下边几点来着手：

1、URL越短越好

这样做主要是为了用户体验，其实对于搜索引擎来说，不超过1000个字母都没有问题，可是如果不考虑用户体验，确实真的用了非常长的URL的话，用户看起来就有些麻烦了，甚至会马上离开你的网站，曾经有人做过这方面的试验，在搜索引擎的搜索结果中，一个较短的URL出现在一个较长的URL下边时，较短的URL的点击率是较长的URL的2.5倍。而且较短的URL也比较有利于复制与传播。人们都比较喜欢简单的东西，特别是现代，人们不喜欢太复杂的东西，能简单就简单。所以网站的URL要尽量的短。

2、URL中避免太多参数

在进行URL设计时，我们尽量使用静态的URL，虽然现代的主流搜索引擎都能够很好的去索引带有参数的动态网页了，可是，使用静态的URL还是有一定的优势的，如果由于某些原因，不能使用静态的URL，而不得不使用动态的URL时，设计的则是URL中的参数应该尽量减少，不要超过三个，一般的情况下URL中的参数2-3个就可以了。参数太多了不但用户看起来困难，对搜索引擎的索引可能也会造成一定的问题。所以，能使用静态就使用静态的URL，能短就尽量短。

3、目录层次尽量少

这里所指的目录层次是指物理目录结构，而不是指逻辑结构，我们在进行URL的设计时，网站的结构要尽量的去减少目录层次，层次不能太深了，一般建议不要超过三层，特别对于一些新站来说，权重低，搜索引擎蜘蛛爬行得很浅，深一点的页面，蜘蛛都很可能不会去爬行的，所以要尽量的做到使目录层次减少，URL缩短。根据观察，百度尤其比较喜欢目录层次比较少的页面。

4、文件名及目录名要具描述性

文件名及目录名要具有可描述性，不但让用户一眼就能看出来这个页面是关于什么的，对用户体验比较友好，而且搜索引擎也比较喜欢这样的URL。例如一个关于新闻的目录，我们可以把它命名为news，用户看到这个目录名称，大概就知道这个目录是关于什么内容的了。

5、URL中包含关键词

关键词出现在URL中，可以提高一定的相关性，尤其对于优化英文网站，这点非常的重要，而且关键词出现在URL的位置越靠前越好，也就是说出现在域名中最好，其次是出现在目录名中，最后才是出现在文件名中。注意一点的是不过不要出现关键词堆积的现象。例如许多朋友的SEO博客，在网站的域名中就包含了SEO，这对于关键词的排名来说，具有一定的权重优势。

6、URL中的字母全部用小写

这里有以下原因：

(1)、全部用小写，用户比较容易输入，不用因为大小写混合而出现错误，这是人们的输入习惯。

(2)、有些服务器是区分大小写的，例如Lunix服务器，这样在站长做链接或者是用户输入时，会因为大小写的问题而出现404错误，而且robots也是区分大小写的，如果大小写搞错了，可能会造成不能收录的严重问题。所以建议所有的URL都使用小写。

7、连词符的使用

目录或者文件名中如果有两个单词组成时，一般建议中间使用中划线(-)隔开，切记不要使用下划线或者其他字符，在搜索引擎中，它是把中划线当作一个空格来处理的，而下划线则是被忽略的，例如seo-lunwen会被读成seo与lunwen。这是比较友好的写法。

8、使用目录形式还是文件形式

大部分的CMS系统都可以把页面的URL设置为目录或者文件形式，有些朋友认为目录形式比文件形式权重要高一点，无论使用哪种形式的URL，权重应该是差不了多少的，基本可以忽略二者之间的权重差异，使用目录形式有一个优点，以后如果更换其他的编程语言，URL也可以不用变化，也不用经过特殊的处理，而文件形式的URL可能文件的扩展名会变化，需要做一定的URL重写处理。

上边是一个网站的URL在网站建设的时候，应该注意的八个问题。在设计URL时，只有严格的按照这几点来操作就可以了。网站的URL设计得好，不但利于蜘蛛的爬行，而且用户看着也简单、易懂。

前端优化，这几字对于做网站的人来说应该相当熟悉了。
近年来，前端的用户体验现在显得越来越重要，从后台开发，到前台技术很多工作都围绕如何提高前端用户体验而展开。我们也许能从这篇文章里获取一些有用的信息，用到自己的实际项目工作中。这篇文章的作者来自yahoo的异常表现小组。他们是一个很小的队伍，专门针对雅虎的产品进行质量检测和改进，该作者作为 一个后端工程师，现在却开始捣鼓前端代码优化方面的工程，他认为这是一个极好的进步的机会。他的目标是改进用户端体验，他度量了在各个带宽下浏览器的响应 时间，得出如下的一个图表，它展示了来自http://yahoo.com的http的流量。现在我们来好好学习一下：

以上图标的第一个标签就是html，是一个html文档最开始加载的东东，在这个例子中，读取html代码只占了整个响应时间中的5%，这个结果适 用于绝大多数网站，在采样美国的前十位网站中，只有一家超过5%但少于20%，其余80%的时间是用来读取网页其他内容的，也就是说，前端（原文是 front-end，意思就是不包括html代码的其余内容，可以是图片，脚本，flash，视频，各种东西）。这就是为什么我们要把目光集中在这些东西 来提高显示速度的关键原因。

为什么要从前端开始着手有三个主要原因：

这里有提升和改进的潜力。如果能减少一半的体积，就能减少40%的响应时间。

改进前端比改进后端需要的时间和资源更少。（改进后端要重新设计应用程序规划，代码，寻找优化代码的方法，添加或改变硬件配置，分布式数据库，等等）

前端的改进在我们的工作中已经被证实，我们在yahoo有五十个小组，在我们的最佳表现规则下，提高了他们的用户端响应时间达到25%或更高。

我们的黄金规则是：首先优化前端表现，这些东西耗费了用户端响应时间中的80%。

1.减少http请求数

图片，css，script，flash，等等这些都会增加http请求数，减少这些元素的数量能减少响应时间。

CSS Sprites技术能减少图片的请求数，把零散的小图片放到一起，运用background-position来改变背景图片的位置，前提是html元素事先定义好宽高，其实就像一个遮罩，移动背景就会看到不同的景象。

内嵌图像 用data:URL scheme的方式把图片内容代码直接嵌入html代码中，这样会增大html代码的体积，改进的方式是把内嵌图片嵌入到css中（css被缓存），这样就会更好的减少http请求数而且不增大html的体积。

很多用户都是在空缓存的情况下进入你的网站的，这样第一次的速度就会显得很重要。

第一条规则是最重要的一条规则。

2.运用cdn技术

具体方式，可以Google一下。

3.加一个长时间过期的头部

Expires: Thu, 15 Apr 2010 20:00:00 GMT
浏览器会用缓存来减少http请求数来加快页面加载的时间，如果页面头部加一个很长的过期时间，浏览器就会一直缓存页面里的元素。
不过这样会带来一个问题，就是如果页面里的东西变动的话就要改名字了，否则用户端不会主动刷新，在yahoo工作组用的是版本号，例如yahoo_2.0.6.js

4.Gzip压缩

Gzip是现在最流行和最有效的压缩方式，她是GNU开发的，RFC1952标准化。
（Gzip是在服务器端压缩图片，css，脚本等，传送到用户端的浏览器再解压，这样可以提高传输速度，不过对服务器的压力会增大，一般选择部分元素压缩比较合适。）

5.把样式表放到顶部

我们发现把css放到文档头部会让网页加载得更快。因为这样可以让页面逐渐加载。
把样式表放到接近底部的问题是它阻止了页面元素的逐渐显示。这样还会导致“flash of unstyled content” 即在样式表加载之前页面内容是以没有样式的形式显示出来的，待加载完样式后，页面重绘，内容一闪即改变了样式表现。

6.把脚本放到底部

把脚本放到尽可能底部的地方，一个原因是让页面逐渐渲染，另一个是实现更好的并行下载。

对于脚本，脚本以下的内容被阻止逐渐加载了，因为只有当下载完脚本以后才会下载下面的内容，第二个脚本引起的问题是阻止平行下载。 “http/1.1 specification”建议浏览器对一个域名， 同一时间下载数不超过2个（按：实际监测发现一般有超过2个），我曾经让ie并行下载100个图片。 当脚本正在下载的时候，浏览器不会开始下载任何东西。

7.避免css expressions

css expressions 是一个有力（和危险）的方式动态的改变css的属性。他们自ie5就开始被支持，举个例子，用css expression可以让背景色每个小时轮换一次。但是被非ie浏览器忽略的。

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );

expressions的问题就在与它的计算频率绝对超出我们的想象，甚至当我们移动鼠标，都会引起页面的重绘！

下面是举例页面

减少css expressions计算次数的一个方法就是使用一次性的expressions。 当第一次expression计算出一个明确的值，就让样式等于这个值，不再变动。如果样式的属性一定要动态的改变，就用时间句柄吧！

8.让脚本和样式外延

Javascript和CSS应该是外部调用还是内嵌呢？
用外部调用文件的方式更快，因为他们是可以被缓存的，如果是内嵌在页面中他们就无法被缓存了！想想如果用户要在你的网站看很多很多的页面，如果都是使用同一个外部脚本和样式，那么他们一旦被缓存，就再也不需要下载了，这样会给你带来很大的潜在好处。

9.减少DNS查询

10.减小脚本体积

有两个比较流行的工具是用来减小脚本的体积的–JSMin和YUI Compressor。（按：这个压缩和Gzip压缩是不一样的，Gzip是传输压缩，这个是代码压缩）

11.避免重定向

重定向会减慢用户体验，它会延迟所有的东西直至到达新页面。一个最浪费的重定向经常会发生而我们的开发者又会经常忽略的就是比如 http://astrology.yahoo.com/astrology的结果是重定向到http://astrology.yahoo.com /astrology/ 在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。
从一个旧网站跳转到新网站也是经常要用到重定向，还有就是连接一个网站中的不同部分和在某些情况下（比如不同浏览器，不同的用户帐号类型，等等）的用户导 向。用重定向很简单，而且只需要一点额外的代码，虽然在这些情况下用重定向减少了开发者的复杂度，但它降低了用户的体验，变通的做法是用Alias和 mod_rewrite如果两个部分是在同一主机上的话，如果是由域名变更引起的重定向，变通的做法是通过Alias或mod_rewrite创建一个 CNAME（一个DNS记录，创建一个别名，从一个域名指向另一个域名）

12.去掉重复的脚本

（按：简单的说，同一个脚本如果被调用多次，浏览器并不会忽略后续的脚本，而总是覆盖加载，覆盖运行，这样会增加开销）

13.配置ETags

ETags（Entity tags）是服务器和浏览器的一个功能，它用来判断浏览器缓存里的元素是否和原来服务器上的一致。ETags比last-modified date更具有弹性，它用一个独一无二的字符串来标识一个元素的版本。
源服务器用响应头里的ETag来特定一个元素的ETag：
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: “10c24bc-4ab-457e1c1f”
Content-Length: 12195
之后，如果浏览器要验证这个元素，它就会用If-None-Match头来回传ETag到源服务器。如果符合的话，一个304状态的代码就会从源服务器返回到浏览器，这样源服务器就节省了传输具体数据的开销。
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: “10c24bc-4ab-457e1c1f”
HTTP/1.1 304 Not Modified

用Etags的问题就在于它会标识那个特定的服务器，如果换了服务器，Etags也就失去了原有的功能，但是这种现在在网络上太常见了，因为我们经常用服务器集群。默认情况下，Apache和IIS会在Etag中内嵌数据，这样会动态减少验证成功的机会。

Apache1.3和2.x的ETag格式是inode-size-timestamp。虽然一个文件可能在不同服务器的同一个目录，同样的大小，安全级，时间戳等等，它的inode会随着服务器的不同而不同。

IIS5.0和6.0有同样类似Etags的东西，叫时间戳：ChangeNumber（更改号），更改号是一个用来追踪IIS配置变化的计数器，ChangeNumber在不同IIS服务器之间是不一样的。

它最终的问题就是，IIS和Apache产生的Etags会在不同服务器之间无法匹配，这样我们的浏览器就无法得到我们期待的304响应，而给我们 的是一个普通的200响应，和正常的数据流。如果你的网站只有一个服务器还无所谓，如果是集群，而你用的是默认的ETag配置，你的用户就会获得更慢的页 面，你的服务器也会有更高的负载，消耗更大的带宽资源，代理也无法高效缓存你的内容，甚至即使你有一个长时间过期的头部（按：见第三条规则），也不会阻止 它重新载入内容。

如果你不想发挥Etags提供的这个弹性验证模型的优势，你最好关掉它。Apache中关掉它的方法是在Apache的配置文件中写这么一句：
FileETag none

14.让Ajax缓存

人们会问这些规则同样适用于web2.0吗？当然！这个规则是我在雅虎工作做web2.0后得出的第一条规则。

Ajax的一个好处是它会给你实时的回馈，因为它和后台的服务器是异步传输的，然而，用Ajax并不能保证你的用户不用无聊的拨弄手指头来等待这个 回馈，在很多应用中，用户是否需要等待取决于Ajax是怎么用的，举例说，在一个基于网页的邮件客户端，用户会持续等待Ajax的回馈来搜索符合他的标准 的邮件信息。记住“异步”并不意味着“实时”。让它缓存的方式同样是加一个过期头部。

相信很多人都上过taobao吧，在taobao的产品列表页有一个浮动的用来排序的浮动层，当你拖动滚动条而导致那个排序栏看不到的时候它会自动变为浮动层，一直固定在那里。非常好的一个用户体验实例。如果不明白的话就看下面的图片吧

淘宝产品列表:http://search.taobao.com/search?cat=50010388&commend=all&q=%B0%E5%D0%AC&source=search1

腾讯财经产业经济 http://finance.qq.com/industry/index.htm

如何实现？
scrollTop是什么？当元素内部的内容高度超过元素本身的高度时就会出现滚动条，随着拖动滚动条而被隐去的上面部分的高度就是scrollTop值。
这种定位层就是当页面触发onscroll事件时，取得scrollTop值并写入定位层CSS属性，使之保持位置。

下面是实例代码，请查看源文件。

在线查看

1. 用 CSS 实现布局

让我们一起来做一个页面

首先，我们需要一个布局。

请使用 CSS 控制 3 个 div，实现如下图的布局。

这题不难，在平时项目开发过程中也经常会碰到：

主要考虑几个问题：1. IE6 的 3 像素 BUG；2. 清楚浮动；

CSS代码

div{background:#CCCCCC;}
#first{float:left;width:100px; height:150px}
#second{clear:left;float:left;margin-top:10px;width:100px;height:150px}
#third{zoom:1; width:200px;margin-left:110px;_margin-left:107px; height:310px}

XML/HTML代码

<div id="first"></div>   
<div id="second"></div>   
<div id="third"></div>

2. 用 javascript 优化布局

由于我们的用户群喜欢放大看页面

于是我们给上一题的布局做一次优化。

当鼠标略过某个区块的时候，该区块会放大25%，

并且其他的区块仍然固定不动。

提示：

也许，我们其他的布局也会用到这个放大的效果哦。

可以使用任何开源代码，包括曾经你自己写的。

关键字：javascript、封装、复用

惭愧啊，用上边那个布局我怎么也没把它优化出来，硬这头皮用绝对定位改了布局；

所以样式改成了这样

body{ margin:0; padding:0}
div{background:#CCCCCC; position:absolute}
#first{width:100px; height:150px}
#second{top:160px;width:100px;height:150px}
#third{ width:200px; height:310px; left:110px}

javascript 要考虑封装、复用

function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）
var obj=document.getElementById(id); // 获取元素对象值
var dW=obj.clientWidth; // 获取元素宽度
var dH=obj.clientHeight; // 获取元素高度
//var oTop=obj.offsetTop;
//var oLeft=obj.offsetLeft;
obj.onmouseover=function(){ // 鼠标移入
this.style.width=dW*x+"px"; // 横向缩放
this.style.height=dH*y+"px"; // 纵向缩放
this.style.backgroundColor="#f00″; // 设置调试背景
this.style.zIndex=1; // 设置z轴优先
}
obj.onmouseout=function(){ // 鼠标移出，设回默认值
this.style.width="";
this.style.height="";
this.style.padding="";
this.style.backgroundColor="";
this.style.zIndex="";
}
}
zoom("first",1.25,1.25);
zoom("second",1.25,1.25);
zoom("third",1.25,1.25);

查看演示

　　CSS Sprites 简介：通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟，阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。随着Web设计向着精致、巧妙的方向发展，设计师们开始考虑使用非Javascript的方 式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生。

　　说白了，CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

　　当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

CSS Sprites应用：在这方面，淘宝网做的比较好，我就以淘宝网为例吧。
[实例一:淘宝频道页面导航]
效果图：

sprites图：

[实例二：淘宝首页]
效果图：

sprites图：

CSS Sprites优点：
　　CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。
　　1.利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
　　2.个人认为CSS Sprites能减少图片的字节，我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

CSS Sprites缺点：
　　诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点。
　　1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，否则可能会出现出现干扰图片的情况；这些还好，做痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
　　2.CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；不过网上已经有高手开发出“CSS Sprites 样式生成工具”，大家可以尝试一下。
　　3.CSS Sprites在维护的时候比较麻烦，sprites是一般双刃剑，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，有只能（最好）往下加图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且重新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
　　4.由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

CSS Sprites总结：
　　性能压倒一切。CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利弊，在决定是不是应用CSS Sprites。为保持兼容性和维护性，sprites图片中的各个部分保持一定的距离是一种不错的做法。

　　MSS是web前端技术标记语言、样式表语言、脚本语言(Markup Language & Stylesheet Language & Scripting Language)的缩写。
　　在近四五年时间里，伴随着web2.0的炒作，web标准被收录其支持技术体系，div+css ajax被神化。
时下还流行着div+css这种说法，很多开发者都反对这样的称谓，div只不过是html的一个标签，css也只是样式表的一种，也有些人认为只不过是一种说法无所谓，我的观点是欲行其事先正其名，名称是挺重要的。
初学者很容易误认为div+css就是web标准的全部，这样误人子弟的说法是不负责任的行为，后来又有人建议用xhtml+css称呼，业界正对html5讨论得火热，假如未来广泛应用之后又改称html5+css？
简单概括web前端技术，是通过结构化的标记组织信息，应用样式表按某种目的以不同形式展现给读者，借助脚本语言让读者跟信息内容产生某种互动行为。
　　随着互联网的发展，web前端技术越来越被重视，div+css的说法也逐渐被更为贴切的MSS所替代。