<![CDATA[沉寂博客]]>

<![CDATA[沉寂博客]]> http://www.xa148.cn/ PJBlog2 2012-01-05T11:26:43+08:00 <![CDATA[一个页面多个选项卡示例，兼容FF]]> edream http://www.xa148.cn/ ctxlxm@163.com 2012-01-05T11:26:43+08:00 2012-01-05T11:26:43+08:00

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁的tab选项卡，一个页面中可重复使用多个tab丨芯晴网页特效丨CsrCode.Cn</title>
<style type="text/css">
<!--
body{ padding:0;font:12px "宋体";  }
/*选项卡1*/
#lib_Tab1{width:500px;margin:0px;padding:0px;margin-bottom:15px;}
/*选项卡2*/
#lib_Tab2{width:576px;margin:0px;padding:0px;margin-bottom:15px; }
/*菜单class*/
.lib_tabborder{border:1px solid #95C9E1;}
.lib_Menubox {height:28px;line-height:28px;position:relative;}

.lib_Menubox ul{margin:0px;padding:0px;list-style:none; position:absolute; top:3px; left:0; margin-left:10px; height:25px;text-align:center;}
.lib_Menubox li{float:left;display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-right:2px;height:25px;line-height:25px; background-color:#E4F2FD}
.lib_Menubox li.hover{padding:0px;background:#fff;width:116px;border-left:1px solid #95C9E1;border-top:1px solid #95C9E1;border-right:1px solid #95C9E1;
color:#739242;height:25px;line-height:25px;}
.lib_Contentbox{clear:both;margin-top:0px; border-top:none;height:181px; text-align:center;padding-top:8px;}
-->
</style>
<script>

</script>
</head>
<body>
<div id="lib_Tab1">
<div class="lib_Menubox lib_tabborder">
<ul>
   <li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li>
   <li id="one2" onclick="setTab('one',2,4)" >新闻2</li>
   <li id="one3" onclick="setTab('one',3,4)">新闻3</li>   
   <li id="one4" onclick="setTab('one',4,4)">新闻4</li>
</ul>
</div>
 <div class="lib_Contentbox lib_tabborder">  
   <div id="con_one_1" >新闻列表1</div>
   <div id="con_one_2" style="display:none">新闻列表2</div>
   <div id="con_one_3" style="display:none">新闻列表3</div>
   <div id="con_one_4" style="display:none">新闻列表4</div> 
 </div>
</div>

<div id="lib_Tab2">
<div class="lib_Menubox lib_tabborder">
<ul>
   <li id="two1" onclick="setTab('two',1,4)" >新闻1</li>
   <li id="two2" onclick="setTab('two',2,4)"class="hover" >新闻2</li>
   <li id="two3" onclick="setTab('two',3,4)">新闻3</li>   
   <li id="two4" onclick="setTab('two',4,4)">新闻4</li>
</ul>
</div>
 <div class="lib_Contentbox lib_tabborder">  
   <div id="con_two_1" >新闻列表1</div>
   <div id="con_two_2" style="display:none">新闻列表2</div>
   <div id="con_two_3" style="display:none">新闻列表3</div>
   <div id="con_two_4" style="display:none">新闻列表4</div> 
 </div>
</div>
<bR />

</body>
</html>

[Ctrl+A ȫѡ ʾ޸Ĳִ룬ٰ]

]]>

http://www.xa148.cn/default.asp?id=667 <![CDATA[SEO必须掌握的高级指令]]> edream http://www.xa148.cn/ ctxlxm@163.com 2011-10-26T11:08:29+08:00 2011-10-26T11:08:29+08:00

1、site

这个是大家最熟悉的高级搜索指令了，用来搜索某个域名在搜索引擎收录的所有文件。百度、Google、雅虎等各大搜索引擎都支持该指令。

2、link

也是一个常用的高级指令，用于查询url的反向链接，只有google支持该指令，但查询结果不准确。

3、linkdomain

该指令也是用于查询域名的反向链接，但只有雅虎支持，用雅虎来查网站的反向链接数据比较准确，所以都会用雅虎的linkdomain：命令查询一个网站的反向链接。

4、inurl

用于搜索查询呈现在url 中的页面，baidu和google均支持该指令。

指令格式：inurl：天天酒店折扣网返回的结果是url包含“天天酒店折扣网”的页面，支持中英文。

使用技巧：inurl命令可以准确查询个人博客的收录情况，比如：我在和讯申请了一个用户名为靓女人衣橱的博客，那么我们准确的查询博客收录呢？正确的查询方法是 site:hi.baidu.com inurl:靓女人衣橱这条命令的意思就是hi.baidu.com（百度空间域名）包含靓女人衣橱（用户名）的页面。

5、allinurl

与inurl相似，区别在于allinurl指令可以同时查询多个关键词

指令格式：allinurl：天天酒店折扣网推广技巧相当于inurl：天天酒店折扣网 inurl：天天酒店折扣网 6、inanchor

导入链接锚文字中包含搜索词的页面，baidu不支持该指令。

指令格式：inanchor：天天酒店折扣网返回的结果页面本身不一点包含“天天酒店折扣网”这几个字，而是指向这些页面的链接锚文字中出现了“天天酒店折扣网”这几个字。

使用技巧：利用该指令可以找到竞争对手到哪些网站去发布过外链，这也是一个快速找外链资源的方法，可惜的是baidu不支持。

7、intitle

该指令返回的结果是页面title包含关键词，baidu和google均支持该指令。

指令格式：intitle：淘宝网化妆品

使用技巧：比如我们要查询“淘宝网化妆品”这个关键词的竞争对手，那么用intitle指令查询返回的结果中将是你最强的竞争对手。

8、allintitle

该指令和intitle意思差不多，也是查询页面title包含关键词，唯一的却别在于

allintitle指令可以同时查询多个关键词。

指令格式：intitle：淘宝网化妆品淘宝网护肤品相当于intitle：淘宝网化妆品 intitle：淘宝网护肤品

9、filetype

用于搜索特定文件格式，baidu和google均支持该指令

指令格式：filetype：淘宝网化妆品 doc 返回的是包含“淘宝网化妆品”的文档

10、（-）减号

减号代表搜索不包含减号后面的词的页面。使用这个指令时减号前面必需是空格，减号后面没有空格，紧跟着需求排除的词，baidu和Google 均支持该指令。
]]>

http://www.xa148.cn/default.asp?id=666 <![CDATA[框架Frameset居中且固定宽度的两种解决办法 ]]> edream http://www.xa148.cn/ ctxlxm@163.com 2011-05-24T11:57:58+08:00 2011-05-24T11:57:58+08:00

第一种办法：

原来的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>视频会议后台管理_深圳视高科技有限公司</title>
<head>
</head>
<frameset rows="130,*,40" frameborder="no" border="0" framespacing="0">
   <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
   <frame src="center.html" name="mainFrame" id="mainFrame" />
   <frame src="bottom.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" />
</frameset>
<noframes>
<body></body>
    </noframes>
</html>

====================================================================

改过的代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>如何让框架Frameset居中，且固定宽度的两种办法</title>
<head>
</head>
<frameset cols="*,1024,*" frameborder="no" border="0" framespacing="0">
<frame src="about:blank"></frame>
<frameset rows="130,*,40" frameborder="no" border="0" framespacing="0">
   <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
   <frame src="center.html" name="mainFrame" id="mainFrame" />
   <frame src="bottom.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" />
</frameset>
<frame src="about:blank"></frame>
</frameset>
<noframes>
<body></body>
    </noframes>
</html>

第二种办法：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼓楼-清河坊</title>
</head>
<frameset cols="1120,320" name="m_wap" id="m_wap" frameborder="no" border="0" framespacing="0" style="width:1440px; height:900px; margin:0 auto;">
  <frame src="part_four_1.html" name="mainFrame" id="mainFrame" title="mainFrame" />
  <frame src="part_four_r1.html" name="rightFrame" scrolling="No" noresize="noresize" id="rightFrame" title="rightFrame" />
</frameset>
<noframes><body>
</body></noframes>
</html>

项目的整体显示的宽度是1440宽，高为900。这里设定了整体大框架的一个宽高以及大框架的一个整体的居中（用margin:0 auto来设定），以及左右两个框架的宽度（左1120，右320）。这样就能实现整体框架的居中显示了。。。

另外，由于本人的记性不太好，一些技巧生怕自己用过以后，以后就会忘记掉，所以顺便提一下关于在框架集中使用的链接时应注意的一些东西~！要实现点击左侧（右侧）框架的链接改变右侧（左侧）框架的文件，链接写法如下：

<a href="#"  target="mainFrame"></a>

其中，mainFrame为右侧（左侧）框架的id名
]]>

http://www.xa148.cn/default.asp?id=665 <![CDATA[影响SEO优化排名的八大因素]]> edream http://www.xa148.cn/ ctxlxm@163.com 2011-01-13T13:12:24+08:00 2011-01-13T13:12:24+08:00

2、内容因素
3、title和meta因素
4、网页排版细节
5、域名、文件名、url因素
6、网站链接构架因素
7、关键词布局因素
8、反向链接因素
]]>

http://www.xa148.cn/default.asp?id=664 <![CDATA[多个倒计时效果同页显示]]> edream http://www.xa148.cn/ ctxlxm@163.com 2010-12-20T09:41:09+08:00 2010-12-20T09:41:09+08:00

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script language=JavaScript>
var endtimes=new Array();//结束时间
endtimes[0]="4/6/2010 9:03:00";
endtimes[1]="4/6/2010 9:04:20";
endtimes[2]="4/8/2010 9:05:00";
endtimes[3]="4/9/2010 9:05:00";
var nowtimes;
function givetime(){
	nowtimes=new Date("4/6/2010 9:03:00");//当前服务器时间
	DownCount()
}
function DownCount(){
	nowtimes=Number(nowtimes)+1000;
	for(var i=0;i<=3;i++)
	{
		var theDay=new Date(endtimes[i]);
		theDay=theDay++;
		if(theDay<=nowtimes)
		{
			document.getElementById("times"+i).innerHTML = "00小时，00分钟，00秒";
		}
		else{
				timechange(theDay,i);
			
		}
	}
	window.setTimeout("DownCount()",1000)
}
function timechange(theDay,i){
	var theDays=new Date(theDay);
	var seconds = (theDays - nowtimes)/1000;
	var minutes = Math.floor(seconds/60);
	var hours = Math.floor(minutes/60);
	var days = Math.floor(hours/24);
	var CDay= days;
	var CHour= hours % 24;
	var CMinute= minutes % 60;
	var CSecond= seconds % 60;
	var CHour=CHour+CDay*24;
	if(CMinute<10)
	{
		CMinute="0"+CMinute;
	}
	if(CHour<10)
	{
		CHour="0"+CHour;
	}
	if(CSecond<10)
	{
		CSecond="0"+CSecond;
	}
	document.getElementById("times"+i).innerHTML = CHour + "小时，" + CMinute + "分钟，" + CSecond + "秒";
}
</script> 
<BODY onload="givetime()"> 
<table border="0" cellSpacing="0" cellPadding="0" width="100%" align="center" style="font-size:9pt">
<tr><td align="center">
现在离洽淡会还有<div id="times0"></div>
<div id="times1"></div>
<div id="times2"></div>
<div id="times3"></div>
</td></tr>
</table>
</body>
</html>

[Ctrl+A ȫѡ ʾ޸Ĳִ룬ٰ]

]]>

http://www.xa148.cn/default.asp?id=663 <![CDATA[几种常用的颜色RBG值]]> edream http://www.xa148.cn/ ctxlxm@163.com 2010-11-25T09:16:01+08:00 2010-11-25T09:16:01+08:00

颜色:COLOR 英文  COLORbbggrr   RGB(r,g,b)(COLORRGB同)
黑色：colorblack    COLOR000000      RGB(0,0,0)
白色：colorwhite    COLORFFFFFF     RGB(255,255,255)
红色：colorred      COLOR0000FF     RGB(255,0,0)
浅红色:colorlired(通达信用)   color8486FF   RGB(255,134,132)
绿色：colorgreen    COLOR00FF00     RGB(0,255,0)
蓝色：colorblue     COLORFF0000     RGB(0,0,255)
浅蓝色: colorliblue(通达信用)  colorffaa66    RGB(102,170,255)
灰色：colorgray     COLORC0C0C0    RGB(192,192,192)
淡灰色:colorligray(通达信用)  colorc6c6c6   RGB(198,198,198)
黄色：coloryellow   color00FFFF     RGB(255,255,0)
青色：colorcyan     colorCCCC33    RGB(51,204,204)
紫色:                colorFF0099    RGB(99,0,255)
洋红色：colormagenta  colorFF00FF    RGB(255,0,255)  亦称(品红色) (粉红色) (晶红色)
淡洋红色:colorlirmagenta (通达信用)  colorFF84FF   RGB(255,132,255) 亦称(淡晶红色)
棕色：colorbrown    color003399    RGB(153,51,0) 亦称(褐色)
翠绿色:                color66FF00    RGB(0,255,102)
金黄色:                color007dff     RGB(255,215,0)
橙色:                color0099ff     RGB(255,153,0)

]]>

http://www.xa148.cn/default.asp?id=662 <![CDATA[JS图片幻灯片效果收集]]> edream http://www.xa148.cn/ ctxlxm@163.com 2010-11-15T14:44:43+08:00 2010-11-15T14:44:43+08:00

HTML

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Hongru-fader</title>
<style type="text/css">
#fader{position:relative;overflow:hidden;height:300px;width:500px}
#fader li{position:absolute;left:0;top:0;}
ul,li{list-style:none;margin:0;padding:0}
img{display:block;}
.fader-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#333;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
.fader-cur-nav{display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px solid #fff;font-family:Tahoma;font-weight:bold;font-size:12px;cursor:pointer;}
</style>
<script type="text/javascript">
var Hongru={};
function H$(id){return document.getElementById(id)}
function H$$(c,p){return p.getElementsByTagName(c)}
Hongru.fader = function(){
	function init(anchor,options){
		this.anchor = anchor;
		var wp = H$(options.id),
			ul = H$$('ul',wp)[0],
			li = this.li = H$$('li',ul);
		this.index = options.position?options.position:0;
		this.a = options.auto?options.auto:2;
		this.cur = this.z = 0;
		this.l = li.length;
		this.img = [];
		for(var k=0;k<this.l;k++){
			this.img.push(H$$('img',this.li[k])[0]);
		}
		this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav';
		nav_wp = document.createElement('div');
		nav_wp.id = 'fader-nav';
		nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;';
		var alt = this.alt = document.createElement('p');
		for(var i=0;i<this.l;i++){
			this.li[i].o = 100;
			//setOpacity(this.li[i],this.li.o);
			this.li[i].style.opacity = this.li[i].o/100;
			this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')';
			//绘制控制器
			var nav = document.createElement('a');
			nav.className = options.navClass?options.navClass:'fader-nav';
			nav.innerHTML = i+1;
			nav.onclick = new Function(this.anchor+'.pos('+i+')');
			nav_wp.appendChild(nav);
		}
		wp.appendChild(alt);		
		wp.appendChild(nav_wp);
		this.textH = nav_wp.offsetHeight;
				alt.style.cssText = 'color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);';
				alt.style.height = alt.style.lineHeight = this.textH+'px';
		this.pos(this.index);
	}
	init.prototype={
		auto:function(){
			this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*1000); 
		},
		move:function(i){
			var n = this.cur+i;
			var m = i==1?n==this.l?0:n:n<0?this.l-1:n;
			this.pos(m);
		},
		pos:function(i){
			clearInterval(this.li.a);
			clearInterval(this.li[i].f);
			var curLi = this.li[i];
			this.z++;
			curLi.style.zIndex = this.z;
			this.alt.style.zIndex = this.z+1;
			nav_wp.style.zIndex = this.z+2;
			this.li.a=false; //这句话是必要的
			this.cur = i;
			//setOpacity(curLi[i],0);
			if(this.li[i].o>=100){
				this.li[i].o = 0;
				curLi.style.opacity = 0;
				curLi.style.filter = 'alpha(opacity=0)';
				this.alt.style.height = '0px';
			}
			for(var x=0;x<this.l;x++){
				nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'fader-nav';
				}
			this.alt.innerHTML = this.img[i].alt;
			this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20);
		},
		fade:function(i){
		var p=this.li[i];
			if(p.o>=100){
				clearInterval(p.f);
				if(!this.li.a){ //一定要在这里做个是否已经clearInterval的判断，要不然在快速点击的时候会导致图片不停地闪
					this.auto();
				}
			}
			else{
				p.o+=5;
				//setOpacity(this.li[i],this.li[i].o);
				p.style.opacity = p.o/100;
				p.style.filter = 'alpha(opacity='+p.o+')';
				this.alt.style.height = Math.ceil(p.o*this.textH/100)+'px';
			}
		}
	};
	return {init:init};
}();
</script>
</head>
<body>
<div id="fader">
	<ul>
		<li><img src="<a href="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg" target="_blank">http://images.cnblogs.com/cnblogs_com/hongru/264552/o_1.jpg</a>" alt="我是图片一" /></li>
		<li><img src="<a href="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg" target="_blank">http://images.cnblogs.com/cnblogs_com/hongru/264552/o_2.jpg</a>" alt="哈哈，图片二" /></li>
		<li><img src="<a href="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg" target="_blank">http://images.cnblogs.com/cnblogs_com/hongru/264552/o_3.jpg</a>" alt="这是图片三" /></li>
		<li><img src="<a href="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg" target="_blank">http://images.cnblogs.com/cnblogs_com/hongru/264552/o_4.jpg</a>" alt="哈哈，图片四" /></li>
		<li><img src="<a href="http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg" target="_blank">http://images.cnblogs.com/cnblogs_com/hongru/264552/o_5.jpg</a>" alt="图片五来咯" /></li>
	</ul>
</div>
<script type="text/javascript">
var fader = new Hongru.fader.init('fader',{
	id:'fader'
});
</script>
</body>
</html>

[Ctrl+A ȫѡ ʾ޸Ĳִ룬ٰ]

其中options参数配置：
id（必选）//列表的父标签id，
auto（可选）//自动运行间隔时间默认2秒
index（可选）//初始化时从第几个元素开始播放，默认为0，即第一个位置
navClass （可选）//控制器样式，默认为’fader-nav‘，
curNavClass （可选）//当前状态的控制器样式，默认为’fader-cur-nav‘

不错的图片效果:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank">http://www.w3.org/TR/html4/loose.dtd</a>">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<div id="wrap"><div id="sideright">
  <div class="contents_main">
	  <div class="detail_summary">
		  <P>
				<P></TR><TR><TD style="BORDER-BOTTOM: rgb(238,238,238) 1px solid" align="right"></P></TD> <TD style="PADDING-LEFT: 10px; BORDER-BOTTOM: rgb(238,238,238) 1px solid"><P><SPAN class=dr><IFRAME style="WIDTH: 600px; HEIGHT: 156px" src="<a href="http://cet.hjenglish.com/subject/recommand/index.htm" target="_blank">http://cet.hjenglish.com/subject/recommand/index.htm</a>" frameBorder=0 scrolling=no>  </IFRAME></SPAN></TD></TR></P>
                <span style="display: none">
                <script language="javascript" src="click.aspx"></script>
                <script language="javascript" type="text/javascript" src="706092.js"></script>
                </span></div>
	</div>
		</div>
	</div>
</body>
</html>

[Ctrl+A ȫѡ ʾ޸Ĳִ룬ٰ]

不错的幻灯片效果:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 图片播放器 </TITLE>
<metahttp-equiv="pragma"content="no-cache"> 
<metahttp-equiv="cache-control"content="no-cache,must-revalidate"> 
<metahttp-equiv="expires"content="wed,26feb199708:21:57gmt"> 
<style>
body{font-size:12px;margin:0px;height:100%;}
#rotatorPlayer{text-align:center;width:100%}
#seconddiv{position:absolute;z-index:1;top:0;left:702;text-align:left;border:1px #333333 solid;height:100%;padding:6px}
img{border:0px}
#menu{position:absolute;z-index:1;top:40;left:710;width:200px;text-align:left}
#second{width:116px;height:20px;border:1px #000000 solid}
#button{width:60px;height:20px;border:1px #000000 solid;cursor:hand}
</style>
</HEAD>
<BODY scroll=no>
<div id=seconddiv><select name="second" id=second>
<option value=1>1 秒</option>
<option value=2>2 秒</option>
<option value=3>3 秒</option>
<option value=4>4 秒</option>
<option value=5>5 秒</option>
<option value=6>6 秒</option>
<option value=7>7 秒</option>
<option value=8>8 秒</option>
<option value=9>9 秒</option>
<option value=10>10 秒</option>
<option value=15>15 秒</option>
<option value=20>20 秒</option>
<option value=30>30 秒</option>
<option value=40>40 秒</option>
<option value=50>50 秒</option>
<option value=60>60 秒</option>
<option value=100>100 秒</option>
<option value=200>200 秒</option>
<option value=500>500 秒</option>
</select>&nbsp;&nbsp;<button id=button onclick="adRotator.set(getRef('second').value)">播放</button></div>
<div style="width:700;height:100%">
<div id=AdRotator></div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

[Ctrl+A ȫѡ ʾ޸Ĳִ룬ٰ]

北京奥运网站的图片轮转效果

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" target="_blank">http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd</a>">

<HTML lang=zh-CN xml:lang="zh-CN" 
xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<HEAD>
<TITLE>第29届奥林匹克运动会网站</TITLE>
<script>
if(typeof sas=="undefined")var sas=new Object();
if(typeof sas.ued=="undefined")sas.ued=new Object();
if(typeof sas.ued.util=="undefined")sas.ued.util=new Object();
if(typeof sas.ued.FlashObjectUtil=="undefined")sas.ued.FlashObjectUtil=new Object();
sas.ued.FlashObject=function(swf,id,w,h,ver,c,useExpressInstall,quality,xiRedirectUrl,redirectUrl,detectKey)
{
if(!document.createElement||!document.getElementById)return;this.DETECT_KEY=detectKey?detectKey:'detectflash';
this.skipDetect=sas.ued.util.getRequestParameter(this.DETECT_KEY);
this.params=new Object();this.variables=new Object();
this.attributes=new Array();this.useExpressInstall=useExpressInstall;
if(swf)this.setAttribute('swf',swf);
if(id)this.setAttribute('id',id);
if(w)this.setAttribute('width',w);
if(h)this.setAttribute('height',h);
if(ver)this.setAttribute('version',new sas.ued.PlayerVersion(ver.toString().split(".")));
this.installedVer=sas.ued.FlashObjectUtil.getPlayerVersion(this.getAttribute('version'),useExpressInstall);
if(c)this.addParam('bgcolor',c);
var q=quality?quality:'high';
this.addParam('quality',q);
var xir=(xiRedirectUrl)?xiRedirectUrl:window.location;this.setAttribute('xiRedirectUrl',xir);
this.setAttribute('redirectUrl','');
if(redirectUrl)this.setAttribute('redirectUrl',redirectUrl)};
sas.ued.FlashObject.prototype={setAttribute:function(name,value){this.attributes[name]=value},getAttribute:function(name){return this.attributes[name]},addParam:function(name,value){this.params[name]=value},getParams:function(){return this.params},addVariable:function(name,value){this.variables[name]=value},getVariable:function(name){return this.variables[name]},getVariables:function(){return this.variables},createParamTag:function(n,v){var p=document.createElement('param');p.setAttribute('name',n);p.setAttribute('value',v);return p},getVariablePairs:function(){var variablePairs=new Array();var key;var variables=this.getVariables();for(key in variables){variablePairs.push(key+"="+variables[key])}return variablePairs},getFlashHTML:function(){var flashNode="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){if(this.getAttribute("doExpressInstall"))this.addVariable("MMplayerType","PlugIn");flashNode='<embed type="application/x-shockwave-flash" src="'+this.getAttribute('swf')+'" width="'+this.getAttribute('width')+'" height="'+this.getAttribute('height')+'"';flashNode+=' id="'+this.getAttribute('id')+'" name="'+this.getAttribute('id')+'" ';var params=this.getParams();for(var key in params){flashNode+=[key]+'="'+params[key]+'" '}var pairs=this.getVariablePairs().join("&");if(pairs.length>0){flashNode+='flashvars="'+pairs+'"'}flashNode+='/>'}else{if(this.getAttribute("doExpressInstall"))this.addVariable("MMplayerType","ActiveX");flashNode='<object id="'+this.getAttribute('id')+'" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+this.getAttribute('width')+'" height="'+this.getAttribute('height')+'">';flashNode+='<param name="movie" value="'+this.getAttribute('swf')+'" />';var params=this.getParams();for(var key in params){flashNode+='<param name="'+key+'" value="'+params[key]+'" />'}var pairs=this.getVariablePairs().join("&");if(pairs.length>0){flashNode+='<param name="flashvars" value="'+pairs+'" />'}flashNode+="</object>"}return flashNode},write:function(elementId){if(this.useExpressInstall){var expressInstallReqVer=new sas.ued.PlayerVersion([6,0,65]);if(this.installedVer.versionIsValid(expressInstallReqVer)&&!this.installedVer.versionIsValid(this.getAttribute('version'))){this.setAttribute('doExpressInstall',true);this.addVariable("MMredirectURL",escape(this.getAttribute('xiRedirectUrl')));document.title=document.title.slice(0,47)+" - Flash Player Installation";this.addVariable("MMdoctitle",document.title)}}else{this.setAttribute('doExpressInstall',false)}if(this.skipDetect||this.getAttribute('doExpressInstall')||this.installedVer.versionIsValid(this.getAttribute('version'))){var n=(typeof elementId=='string')?document.getElementById(elementId):elementId;n.innerHTML=this.getFlashHTML()}else{if(this.getAttribute('redirectUrl')!=""){document.location.replace(this.getAttribute('redirectUrl'))}}}};sas.ued.FlashObjectUtil.getPlayerVersion=function(reqVer,xiInstall){var PlayerVersion=new sas.ued.PlayerVersion(0,0,0);if(navigator.plugins&&navigator.mimeTypes.length){var x=navigator.plugins["Shockwave Flash"];if(x&&x.description){PlayerVersion=new sas.ued.PlayerVersion(x.description.replace(/([a-z]|[A-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."))}}else{try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");for(var i=3;axo!=null;i++){axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+i);PlayerVersion=new sas.ued.PlayerVersion([i,0,0])}}catch(e){}if(reqVer&&PlayerVersion.major>reqVer.major)return PlayerVersion;if(!reqVer||((reqVer.minor!=0||reqVer.rev!=0)&&PlayerVersion.major==reqVer.major)||PlayerVersion.major!=6||xiInstall){try{PlayerVersion=new sas.ued.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","))}catch(e){}}}return PlayerVersion};sas.ued.PlayerVersion=function(arrVersion){this.major=parseInt(arrVersion[0])||0;this.minor=parseInt(arrVersion[1])||0;this.rev=parseInt(arrVersion[2])||0};sas.ued.PlayerVersion.prototype.versionIsValid=function(fv){if(this.major<fv.major)return false;if(this.major>fv.major)return true;if(this.minor<fv.minor)return false;if(this.minor>fv.minor)return true;if(this.rev<fv.rev)return false;return true};sas.ued.util={getRequestParameter:function(param){var q=document.location.search||document.location.href.hash;if(q){var startIndex=q.indexOf(param+"=");var endIndex=(q.indexOf("&",startIndex)>-1)?q.indexOf("&",startIndex):q.length;if(q.length>1&&startIndex>-1){return q.substring(q.indexOf("=",startIndex)+1,endIndex)}}return""}};if(Array.prototype.push==null){Array.prototype.push=function(item){this[this.length]=item;return this.length}}var getQueryParamValue=sas.ued.util.getRequestParameter;var sohuFlash=sas.ued.FlashObject;
function Cookie(document,name,hours,path,domain,secure){this.$document=document;this.$name=name;this.$expiration=hours?new Date((new Date()).getTime()+hours*3600000):null;this.$path=path?path:null;this.$domain=domain?domain:null;this.$secure=secure;};Cookie.prototype.store=function (){var cookieval="";for(var prop in this){if((prop.charAt(0)=='$')||((typeof this[prop])=='function')) continue;if(cookieval!="") cookieval+='&';cookieval+=prop+':'+escape(this[prop]);}var cookie=this.$name+'='+cookieval;if(this.$expiration)cookie+='; expires='+this.$expiration.toGMTString();if(this.$path) cookie+='; path='+this.$path;if(this.$domain) cookie+='; domain='+this.$domain;if(this.$secure) cookie+='; secure';this.$document.cookie=cookie;};Cookie.prototype.load=function(){var allcookies=this.$document.cookie;if(allcookies=="") return false;var start=allcookies.indexOf(this.$name+'=');if(start==-1) return false;start+=this.$name.length+1;var end=allcookies.indexOf(';',start);if(end==-1) end=allcookies.length;var cookieval=allcookies.substring(start,end);var a=cookieval.split('&');for(var i=0; i<a.length; i++) a[i]=a[i].split(':');for(var i=0; i<a.length; i++) this[a[i][0]]=unescape(a[i][1]);return true;};Cookie.prototype.remove = function(){var cookie;cookie = this.$name + '=';if (this.$path) cookie += '; path=' + this.$path;if (this.$domain) cookie += '; domain=' + this.$domain;cookie += '; expires=Fri, 02-Jan-1970 00:00:00 GMT';this.$document.cookie = cookie;};
</script>
<BODY>
<DIV class=focusFlash>
<DIV id=sasFlashFocus27></DIV>
<SCRIPT type=text/javascript>
//<![CDATA[
txt="<a image='<a href="http://images.beijing2008.cn/20070801/Img214118175.jpg" target="_blank">http://images.beijing2008.cn/20070801/Img214118175.jpg</a>' info='官网专访维尔布鲁根：我们对北京的高度肯定是有事实依据的' url='<a href="http://www.beijing2008.cn/1year/talks/s214117468/s214117473/" target="_blank">http://www.beijing2008.cn/1year/talks/s214117468/s214117473/</a>' /><a image='<a href="http://images.beijing2008.cn/20070728/Img214115977.jpg" target="_blank">http://images.beijing2008.cn/20070728/Img214115977.jpg</a>' info='顺义奥林匹克水上公园交付使用 将举办世界赛艇青年锦标赛' url='<a href="http://www.beijing2008.cn/cptvenues/venues/src/headlines/shunyi/" target="_blank">http://www.beijing2008.cn/cptvenues/venues/src/headlines/shunyi/</a>' /><a image='<a href="http://images.beijing2008.cn/20070728/Img214115951.jpg" target="_blank">http://images.beijing2008.cn/20070728/Img214115951.jpg</a>' info='北京射击馆正式验收交付 奥运首金有望在此诞生' url='<a href="http://www.beijing2008.cn/cptvenues/venues/bsh/headlines/bsh/" target="_blank">http://www.beijing2008.cn/cptvenues/venues/bsh/headlines/bsh/</a>' /><a image='<a href="http://images.beijing2008.cn/20070801/Img214118234.jpg" target="_blank">http://images.beijing2008.cn/20070801/Img214118234.jpg</a>' info='北京奥运会专用邮编102008启用 奥运邮件更安全快捷顺畅' url='<a href="http://www.beijing2008.cn/bocog/bocognews/headlines/n214118181.shtml" target="_blank">http://www.beijing2008.cn/bocog/bocognews/headlines/n214118181.shtml</a>' />"
var sohuFlash2 = new sohuFlash("<a href="http://images.beijing2008.cn/demo.swf" target="_blank">http://images.beijing2008.cn/demo.swf</a>", "27", 520, 205, "7");
sohuFlash2.addParam("quality", "high");
sohuFlash2.addParam("wmode", "opaque");
sohuFlash2.addVariable("txt",txt);
sohuFlash2.write("sasFlashFocus27");
//]]>
 </SCRIPT>
</DIV>
</BODY>
</HTML>

[Ctrl+A ȫѡ ʾ޸Ĳִ룬ٰ]

图片互换效果

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<style type="text/css">

</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
		<div id="ad_pic">
<div id="f_div">
	
	<div id="f_imgDiv"></div>
	<div id="f_infoDiv">		
		
		<div id="f_buttonDiv"></div>
	</div>	
</div>
<table width="150" border="0" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">
<tr>  
<td align="center" bgcolor="#EFEFEF">

<div id="f_text" class="f12b"></div>
<script language="javascript" type="text/javascript">

</script>
</td>
</tr>
</table>
		  </div>
		
</body>
</html>

[Ctrl+A ȫѡ ʾ޸Ĳִ룬ٰ]

点击出现图片大图效果

HTML

<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;}
#enlarge_images{position:absolute;display:none;z-index:2;}
</style>
<div id="demo">
	<img src="<a href="http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg" target="_blank">http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg</a>" />
	<img src="<a href="http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg" target="_blank">http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg</a>" />
	<img src="<a href="http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg" target="_blank">http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg</a>" />
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
	var ts = gg[i];
	ts.onclick = function(event){
		event = event || window.event;
		ei.style.display = "block";
		ei.innerHTML = '<img src="' + this.src + '" />';
		ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
		ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
	}
	ts.onmouseout = function(){
		ei.innerHTML = "";
		ei.style.display = "none";
	}
}
</script>

[Ctrl+A ȫѡ ʾ޸Ĳִ룬ٰ]

一个图片占击效果

HTML

<style>
#divleft,#divright{border:1px solid gray;height:100%}
#divleft{width:33%;float:left}
#divleft img{cursor:pointer;border:0}
#divright{width:66%;float:right}
#divxxx,#divxxx img{position:absolute}
.active{border:3px solid gold}  
</style>
<script>
function showPic(obj){
  var img=new Image();
  img.src=obj.src;
  divxxx.appendChild(img);
  var w0=divright.clientWidth,h0=divright.clientHeight;
  var w1=obj.width,h1=obj.height;
  var l=w0*Math.random();
  var t=h0*Math.random();
  img.style.left=parseInt(l+w1>w0?w0-w1:Math.floor(l));
  img.style.top=parseInt(t+h1>h0?h0-h1:Math.floor(t));
  img.onmousedown=function(){
    if(event.button!=1)
      return;
    if(divright.current)
      divright.current.className="";
    this.className="active";
    this.style.zIndex=999;
    divright.current=this;
    this.moving=true;
    this.dx=parseInt(this.style.left)-event.screenX;
    this.dy=parseInt(this.style.top)-event.screenY;
    this.setCapture();
    }
  img.onmousemove=function(){
    if(!this.moving)
      return;
    status=[event.screenX+this.dx,event.screenY+this.dy];
    this.style.left=event.screenX+this.dx;
    this.style.top=event.screenY+this.dy;
    }
  img.onmouseup=function(){
    if(event.button!=1)
      return;
    if(this.moving){
      this.moving=false;
      this.style.zIndex=0;
      this.releaseCapture();
      }
    }
  img.ondblclick=function(){
    divxxx.removeChild(this);
    }
  }
</script>
<div id=divleft>
<img onclick=showPic(this) src=http://pages.blueidea.com/articleimg/2007/03/1433/preview_s01.jpg>
<img onclick=showPic(this) src=http://pages.blueidea.com/articleimg/2007/03/1431/preview_s01.jpg>
<img onclick=showPic(this) src=http://pages.blueidea.com/articleimg/2006/08/1334/preview_s01.jpg>
</div>
<div id=divright><div id=divxxx></div></div>

[Ctrl+A ȫѡ ʾ޸Ĳִ룬ٰ]

]]>

http://www.xa148.cn/default.asp?id=661 <![CDATA[晴空蓝色，天蓝色RGB值]]> edream http://www.xa148.cn/ ctxlxm@163.com 2010-11-10T16:14:52+08:00 2010-11-10T16:14:52+08:00

http://www.xa148.cn/default.asp?id=660 <![CDATA[网页制作当中常见的BUG问题]]> edream http://www.xa148.cn/ ctxlxm@163.com 2010-11-02T10:38:58+08:00 2010-11-02T10:38:58+08:00

被点击访问过的超链接样式不在具有hover和active了, 解决方法是改变CSS属性的排列顺序: L-V-H-A

ps：好在自己一开始书写时就没有把这四种样式写全过，我只写 a:link ，a:hover ，一直也没出现什么问题，后来发现ie6下a:visited 和 ff下的颜色不一致，这才发现这一个问题。看来没有问题也不代表书写正确。

2.IE6的双倍边距BUG

例如:

<style type="text/css">
body {margin:0}
div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red }
</style>

浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

ps：刚开始接触这一工作的时候真的是不知道怎么回事，还以为是各个浏览器之间的解释不同，制作的时候只能小心意义的以ie6的宽度来定义，可惜ff 和ie经常预览效果不一致，被某些人抓住不放，当时很是气氛和郁闷，一气之下疯狂百度和谷歌，可惜那时候抓不住关键词，走了不少弯路才找到问题答案，好在现在解决了。Y(^_^)Y

3.为什么FF下文本无法撑开容器的高度?

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉he ight设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

div { height:auto!important; height:200px; min-height:200px; }

4.为什么web标准中IE无法设置滚动条颜色了?

原来样式设置：

<style type="text/css">
body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }
</style>

解决办法是将body换成 html

ps: 当时被要求要重新定义滚动条的时候，我查到了两个方法，一种如上，一种是js仿制滚动条，我应用的是上面的这种，但是发现不兼容IE，后来不了了之了，再后来偶然间才发现了这个解决办法。

5.为什么无法定义1px左右高度的容器?

IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px

6.怎么样才能让层显示在FLASH之上呢?

解决的办法是给FLASH设置透明:

<param name="wmode" value="transparent" />

7.怎样使一个层垂直居中于浏览器中?

<style type="text/css">

</style>

这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

ps:margin的值就是div宽度的1/2;

8、 firefox嵌套div标签的居中问题的解决方法

假定有如下情况：

<div id="a">
<div id="b"> </div>
</div>

如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常；但是在 Firefox中b却会是居左的。

解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto;。

]]>

http://www.xa148.cn/default.asp?id=659 <![CDATA[网站用户体验的几大要点]]> edream http://www.xa148.cn/ ctxlxm@163.com 2010-10-25T09:40:40+08:00 2010-10-25T09:40:40+08:00

约瑟夫。派恩和詹姆士。吉尔摩在《体验经济》一书中提出其观点：所谓“体验”就是企业以商品为道具，以服务为舞台，以顾客为中心，创造出可以使消费者全面参与、让消费者感到值得回忆的活动。
体验是使每个人以个性化的方式参与消费，在消费过程中产生情绪、体力、心理、智力、精神等方面的满足，并产生预期或更为美好的感觉。
体验的核心就是顾客参与，体验营销的消费者充分发挥自身的想象力和创造力，主动参与产品的设计、创造和再加工。
通过创造性的消费来体现独特的个性和价值，获得更大的满足和成就感。体验营销的焦点放在顾客体验上，把顾客作为价值创造的主体，及时回应消费者的感情诉求。

（二）网络体验

网站体验，指的是利用网络特性，为客户提供完善的网络体验，提高客户的满意度，从而与客户建立起紧密而持续的关系。
网络的体验，是体验的延伸。随着网络的普及，网络体验成为体验营销不可缺少的重要组成部分。

（三）网站体验的分类

1、感官体验：呈现给用户视听上的体验，强调舒适性。
2、交互体验：呈现给用户操作上的体验，强调易用/可用性。
3、情感体验：呈现给用户心理上的体验，强调友好性。
4、浏览体验：呈现给用户浏览上的体验，强调吸引性。
5、信任体验：呈现给用户的信任体验，强调可靠性。

（四）网站体验的76个体验点

一、感官体验：呈现给用户视听上的体验，强调舒适性。

1. 设计风格：符合目标客户的审美习惯，并具有良好的引导性。
网站在设计之前，必须明确目标客户群体，并针对目标客户的审美喜好，进行分析，从而确定网站的总体设计风格。
2. 网站LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间。
3. 页面速度：正常情况下，尽量确保页面在5秒内打开。如果是大型门户网站，必须考虑南北互通问题，进行必要的压力测试。
4. 页面布局：重点突出，主次分明，图文并茂。与企业的营销目标相结合，将目标客户最感兴趣的，最具有销售力的信息放置在最重要的位置。
5. 页面色彩：与品牌整体形象相统一，主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。
6. 动画效果：与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览。
7. 页面导航：导航条清晰明了、突出，层级分明。
8. 页面大小：适合多数浏览器浏览（以15寸及17寸显示器为主）。
9. 图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远。
10. 图标使用：简洁、明了、易懂、准确，与页面整体风格统一。
11. 广告位：避免干扰视线，广告图片符合整体风格，避免喧宾夺主。
12. 背景音乐：与整体网站主题统一，文件要小，不能干扰阅读。要设置开关按钮及音量控制按钮。

二、交互体验：呈现给用户操作上的体验，强调易用和可用性。

13. 会员申请：介绍清晰的会员权责，并提示用户确认已阅读条款。
14. 会员注册：流程清晰、简洁。待会员注册成功后，再详细完善资料。
15. 表单填写：尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段作出限制。（如手机位数、邮编等等，避免无效信息）
16. 表单提交：表单填写后需输入验证码，防止注水。提交成功后，应显示感谢提示。
17. 按钮设置：对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击。
18. 点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。
19. 错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。
20. 在线问答：用户提问后后台要及时反馈，后台显示有新提问以确保回复及时。
21. 意见反馈：当用户在使用中发生任何问题，都可随时提供反馈意见。
22. 在线调查：为用户关注的问题设置调查，并显示调查结果，提高用户的参与度。
23. 在线搜索：搜索提交后，显示清晰列表，并对该搜索结果中的相关字符以不同颜色加以区分。
24. 页面刷新：尽量采用无刷新（AJAX）技术，以减少页面的刷新率。Ajax是新兴的网络开发技术的象征。它将JavaScript和XML技术结合在一起，用户每次调用新数据时，无需反复向服务器发出请求，而是在浏览器的缓存区预先获取下次可能用到的数据，界面的响应速度因此得到了显著提升。
25. 新开窗口：尽量减少新开的窗口，以避免开过多的无效窗口，关闭弹出窗口的功能。
26. 资料安全：确保资料的安全保密，对于客户密码和资料进行加密保存。
27. 显示路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。

三、浏览体验：呈现给用户浏览上的体验，强调吸引性。

28. 栏目的命名：与栏目内容准确相关，简洁清晰，不宜过于深奥。
29. 栏目的层级：最多不超过三层，导航清晰，运用JAVAscrip等技术使得层级之间伸缩便利。
30. 内容的分类：同一栏目下，不同分类区隔清晰，不要互相包含或混淆。
31. 内容的丰富性：每一个栏目应确保足够的信息量，避免栏目无内容情况出现。
32. 内容的原创性：尽量多采用原创性内容，以确保内容的可读性。
33. 信息的更新频率：确保稳定的更新频率，以吸引浏览者经常浏览。
34. 信息的编写方式：段落标题加粗，以区别于内文。采用倒金字塔结构。
35. 新文章的标记：为新文章提供不同标识（如new），吸引浏览者查看。
36. 文章导读：为重要内容在首页设立导读，使得浏览者可以了解到所需信息。文字截取字数准确，避免断章取义。
37. 精彩内容的推荐：在频道首页或文章左右侧，提供精彩内容推荐，吸引浏览者浏览。
38. 相关内容的推荐：在用户浏览文章的左右侧或下部，提供相关内容推荐，吸引浏览者浏览。
39. 收藏夹的设置：为会员设置收藏夹，对于喜爱的产品或信息，可进行收藏。
40. 栏目的订阅：提供Rss或邮件订阅功能
41. 信息的搜索：在页面的醒目位置，提供信息搜索框，便于查找到所需内容。
42. 页面打印：允许用户打印该页资料，以便于保存。
43. 文字排列：标题与正文明显区隔，段落清晰。
44. 文字字体：采用易于阅读的字体，避免文字过小或过密造成的阅读障碍。可对字体进行大中小设置，以满足不同的浏览习惯。
45. 页面底色：不能干扰主体页面的阅读。
46. 页面的长度：设置一定的页面长度，避免页面过长而影响阅读。
47. 分页浏览：对于长篇文章进行分页浏览。
48. 语言版本：为面向不同国家的客户提供不同语言的浏览版本。
49. 快速通道：为有明确目的的用户提供快速的入口。

四、情感体验：呈现给用户心理上的体验，强调友好性。

50. 客户分类：将不同的浏览者进行划分（如消费者、经销商、内部员工），为客户提供不同的服务。
51. 友好提示：对于每一个操作进行友好提示，以增加浏览者的亲和度。
52. 会员交流：提供便利的会员交流功能（如论坛），增进会员感情。
53. 售后反馈：定期进行售后的反馈跟踪，提高客户满意度。
54. 会员优惠：定期举办会员优惠活动，让会员感觉到实实在在的利益。
55. 会员推荐：根据会员资料及购买习惯，为其推荐适合的产品或服务。
56. 鼓励用户参与：提供用户评论、投票等功能，让会员更多地参与进来。
57. 会员活动：定期举办网上会员活动，提供会员网下交流机会。
58. 专家答疑：为用户提出的疑问进行专业解答。
59. 邮件/短信问候：针对不同客户，为客户定期提供邮件/短信问候，增进与客户间感情。
60. 好友推荐：提供邮件推荐功能。
61. 网站地图：为用户提供清晰的网站指引。

五、信任体验：呈现给用户的信任体验，强调可靠性。

62. 搜索引擎：查找相关内容可以显示在搜索引擎前列。
63. 公司介绍：真实可靠的信息发布，包括公司规模、发展状况、公司资质等。
64. 投资者关系：上市公司需为股民提供真实准确的年报，财务信息等。
65. 服务保障：将公司的服务保障清晰列出，增强客户信任。
66. 页面标题：准确地描述公司名称以及相关内容。
67. 文章来源：为摘引的文章标注摘引来源，避免版权纠纷。
68. 文章编辑作者：为原创性文章注明编辑或作者，以提高文章的可信度。
69. 联系方式：准确有效的地址、电话等联系方式，便于查找。
70. 服务热线：将公司的服务热线列在醒目的地方，便于客户查找。
71. 有效的投诉途径：为客户提供投诉或建议邮箱或在线反馈。
72. 安全及隐私条款：对于交互式网站，注明安全及隐私条款可以减少客户顾虑，避免纠纷。
73. 法律声明：对于网站法律条款的声明可以避免企业陷入不必要的纠纷中。
74. 网站备案：让浏览者确认网站的合法性。

75. 相关链接：对于集团企业及相关企业的链接，应该具有相关性。

76. 帮助中心：对于流程较复杂的服务，必须具备帮助中心进行服务介绍

本文由站酷网 - Lander 翻译，
]]>

http://www.xa148.cn/default.asp?id=657