无限畅想

比较常用，简单的IE6.IE7.FF兼容hack方法

Sat, 23 Aug 2008 01:01:09 +0000

.test{
    height:20px;
    background-color:orange;
}

ff识别

-----------------------------------------------------------

*+html .test{/*IE7*/
    height:20px;
    background-color:blue;
}

IE7浏览器
------------------------------------------------------------

*html .test{/*IE6*/
    height:20px;
    background-color:black;
}

IE6浏览器

-----------------------------------------------------------------------

IE6加*html，而IE7加*+html，暗示加了一个版本。
Tags - 兼容 , hack , 代码 , web标准

为何div空白会占据一定的空间？

Thu, 31 Jul 2008 10:23:54 +0000

我们制作页面很多情况下碰到div是空白的

如果给div元素设置了宽度时，比如width:100%，此时div在IE中（IE6，IE7）将占据物理空间，而在FF中不占据物理空间（正确理解）。为了表述直观，将样式直接写在元素标签内：

此时在IE中到底是什么在影响着最终的显示，又是如何解析的呢？

可能的影响因素：字体大小（font-size），字体行高（line-height），高度（height），溢出（overflow）

我们对上面的代码逐一添加过滤属性（具体的过程有兴趣的朋友，可以私下里实验一下，“自己动手，丰衣足食”！）

在测试的过程中，你会发现IE6和IE7的解析也不尽相同，比如在给div设置了line-height:0; height:0; 的样式后，IE7中显示正常了，不再占据物理空间了，而IE6却依然我行我素，亦或是悲！

最终的测试结果，最简单的方法是，给div设置高度（height）和溢出（overflow）属性：

Tags - div , div空白 , web标准

关于申请本站友情链接说明

Thu, 24 Jul 2008 11:16:55 +0000
有意想跟本站友情链接的必须做好一下几步：

1.做好本站的链接

文字链接：无限畅想    http://www.admincss.com/

图片链接：http://www.admincss.com/logo.gif

2.做好链接以后在本帖留言，我会定时查看的

3.只要网站内容健康，都可以链接，不限收录

站长QQ：36339194

邮箱：ktzzx@163.com
Tags - 友情链接

目前非常全面的CSS兼容问题资料汇集

Wed, 16 Jul 2008 11:30:35 +0000
CSS兼容问题一直困扰着CSSer，面对各浏览器，往往感觉束手无策，愁眉不展。CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，在各浏览器厂商解析CSS没有达成一致前，我们只能用这样的方法来完成这样的任务。
　　
　　我进行前端开发的时候，测试用的浏览器大致有: IE7、IE6、Opera9（文章撰写时版本为9.25 8825），Safari3（文章撰写时版本为3.0.4 523.15），Firefox2（文章撰写时版本为2.0.0.11）等。
　　
　　在正常的 selector { property:value; } 的基础上常会根据具体情况为相同元素使用Hack以达到浏览器间统一，更详细的CSS兼容知识，欢迎关注52CSS.com的相关文章。

IE系列

　　selector { +property:value; } 在属性名前加上加号"+",这个Hack只有IE系列可以识别.
　　selector { *property:value; } 在属性名前加上星号"*",这个Hack只有IE系列可以识别.
　　selector { _property:value; } 在属性名前加上下划线"_",这个Hack只有IE系列 (除IE7外) 识别.
　　* html selector{ property:value; } 在选择器上运用继承法 * html selector, 这个Hack只有IE系列 (除IE7外) 可以识别.
　　html/**/ >body  selector { property:value; } 在选择器上运用继承法 html/**/ >body  selector ,这个Hack只有IE系列 (除IE7外) 可以识别.
　　selector { property/**/:value; } 在属性名和冒号":"之间加入注释,屏蔽IE6用.
　　selector/**/ { property/**/:value; } 在选择器和花括号"{"之间以及在属性名和冒号":"之间加入注释,屏蔽IE5和IE6用 (不屏蔽IE5.5) .
　　select/**/ { property:value; } 在选择器和花括号"{"之间加入注释,屏蔽IE5用.
　　*+html  selector { property:value !important; } 在选择器上运用继承法 *+html selector 再加上 !important, 这个Hack只有IE7可以识别.

Firefox：

　　*:lang(lang) selector { property:value !important; } 用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.

Safari：

　　selector:empty { property:value !important; } 用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.

Opera：

　　@media all and (min-width: 0px){ selector { property:value; } } 利用特殊继承法进行定义的话,目前只有Opera可以识别.

　　以上的CSS Hack并不完整，欢迎大家一起补充。
　　对于Hack的运用，最普遍的现象是CSS盒模型Hack，清除浮动Hack。

CSS盒模型在IE5.X上是有严重解析错误的.这个Hack针对IE5.X：

　　selctor { width:IE5.X宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度; }

清除浮动Hack,相信这个定义用的人很多：

　　selector:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

　　另外还有很多很多CSS Hack的运用，一一列举的话可能能写成一本书了……想到再添加到52CSS.com吧。

传自：52css.com

Tags - css兼容 , 代码 , web标准

综合网站seo优化30条技巧

Fri, 11 Jul 2008 00:58:39 +0000
作为一名网站站长最看重的是通过搜索引擎来的流量，尤其是那些技术资源型(大量文档)网站。所以，针对SEO制定了一系列策略，显得尤为重要。

SEO目前主要从3个方面入手：

1、链接   2、关键   3、网页

一、SEO-链接

要点: 导入导出和內链接、链接页面内容相关性

1.网站首页尽量不要放置过多的导出链接，所有页面导出链接最大不要超过100个。

2.网站尽量减少交换链接的数量，控制在5，6个高质量网站交换链接。.

3.一个页面的PR 值的一个简单计算公式:PR(A)=0.15+0.85(PR(Ti)/C(Ti)+…+PR(Tn)/C(Tn)).合理的理由PR值高的页面,并非所有页面都互链就好.

4.保持导入和导出链接有所指向页面有比较高的质量。例如PR>4的页面.。

5.使导入、內链接中的源头文字和指向页面内容具有较强的关联性。保持两个相连接页面内容的相关，尽量避免不相关内容页面的链接。

6.注意导入链接在原页面的位置，通常认为导入链接所在位置的价值关系是：

原页面导航中>原页面内容中>广告中>合作站点中.

7. 建立HTML站点图,使网站内所有页面与站点图的链接指向页面不超过2层.一个站点图链接最好控制在50个以内.链接过多就要把站点图分为几页

8.想办法增大导入链接的数量，例如:通过del.icio.us 或者在blog等地方发留言等方式

9.yahoo网站深度链接比值控制在75%以上.

DLR =Total backlinks - Number of backlinks to the top level of the websitex  100% Total backlinks

10.尽量缩短URL的长度,保持在65个字母之内,URL的页面层级在2层以内.

11.保持网站内所有页面链接的唯一性,尽量不要用多个URL指向同一个页面.

二、SEO-关键字

要点：关键词选取、关键词位置、关键词密度

1.确定网站定位内容总共包含的关键词,通常有几百个.频道建设初期选取10-20个左右最核心的关键词,以及由这些词衍生的关键词作为首批优化的对象.

2.提高google Double-Listing 的可能性。特别是文章最终页的核心关键字可以是1个为主,伴随2,3个衍生词.

3.将重要突出的关键字尽量放在首页靠前的位置,为每个栏目页,列表页均匀的分配不同的关键词.

4.尽量将需要优化的关键词组靠近放置在一个网页中.(例如想优化 Windows Vista  SP1 ,就要尽可能的将 Windows 和 Vista SP1 靠近放置).

5.可以将关键字放置在页面的链接中.（但这个影响正在减少）

6.每个网页重点突出的关键字最好控制在4个以内,每个关键字的密度在2%-8%之间.页面核心关键字总密度控制在25%左右.

7.在 title 和 description中加入关键字( keyword 据说已经不再被搜索引擎关注),title中最多放置3个关键词,description 最多放置3-4个关键字。用关键词来造句,250个字母.

8.可以通过给页面加入与主题相关的导出链接的方式,来增加关键词密度.尽量不要通过简单堆砌大量重复关键字的方式来提高关键字的密度。例如围绕Windows Server 2003 和IIS 为关键字的文章,可以通过增加与 Windows 、Windows Server 、 IIS 、Windows 2003相关的各种性质文章来达到增加关键词密度的目的。

三、SEO-单网页优化

要点：网页结构、网页主题、网页独特性、网页更新

1.为网页指定明确单一的内容主题。通过频道导航（特别是首页），并在网页中放置关键字，以及频道导入、导出链接的关键字突出主题。

2.网站的各个页面结构尽量保持简单和一致,有利于搜索引擎理解频道. 网页文件的大小最好控制在100K以内，尽量压缩网页内配图的体积以便搜索引擎读取同时提高载入速度；

3.不要轻易使重定向、框架等对搜索引擎不友好页面处理方式。

4.标题的文字长度(title)最好控制在40-60个字母以内,并将关键字尽量放置在title中突出主题.

5.尽量把关键字放到网页文件名中,图片的名字,图片替代文字中使它们更容易被搜索引擎理解.

6.通过页面之间 title 和 description的描述来突出主题.

7.把关键字和文章分段标题,重要段落用粗体、斜体、大字体等方式突出网页要表达的主题.

8.可以.通过关键字在文章标题,正文的位置,突出的方式,出现的频率来体现页面的独特性.

9.将页面公共内容相似的部分外置.(Yahoo 会查看相似页面导出链接的相似性.Google 会对网页内容分段建立”信息指纹”.)

10.尽量不要在一个频道内出现大量相同或相似的内容页面。文章最终页的正文内容不要过短。

11.网站栏目网页内容保持规律的更新，文章最终页通过评论等形式保持内容更新.

Tags - seo优化 , seo技巧 , seo

SEO重点是建设独特网站内容

Tue, 24 Jun 2008 09:19:40 +0000
一直以来对于SEO核心的讨论有很多，外链建设、内链布局、网站结构、用户体验、内容等。任何一项对于SEO来说，都是的那么重要。

思亿欧的SEO观点一直是主张用户体验与搜索引擎优化的结合，既是在为网站实施SEO的同时也必须考虑用户体验。如果要真正的让一个网站在搜索引擎上一直有一个良好的表现，唯一的办法就是要注重用户体验与网站内容的建设，再加上辅助的SEO策略。

所以，对于SEO中众多的因素而言，思亿欧觉得网站内容是SEO的核心同时也是网站发展的核心。

为什么，思亿欧会认为网站内容是SEO的核心？

对于过去而言，网站内容对SEO的重要性，已经今非昔比了。过去，简单的一张、十张页面凑成的网站，可以很容易获得排名。但是现在，即使一个内容丰富但域名历史较短的网站，都很难在搜索引擎上获得良好的表现。

与SEO中其他的因素例如：外部链接、内部链接、网站结构等相比，重点致力于内容建设的网站，在经过搜索引擎考验期之后，会比重点建设其他因素的效果更好。

所以，如果想让网站持续的通过搜索引擎获取流量，只有是重点抓网站内容的建设。

什么样的内容有利于提升网站在搜索引擎上的表现？

1.与网站主题相关的内容；

2.独特的内容；

3.原创内容；

需要注意的是，对于转载或者采集的内容，对搜索引擎的作用非常低。

网站内容与用户体验

通过对网站内容的建设，特别是高质量的原创内容的建设可以提升网站的用户体验。之前的帖子，我们曾经说过，用户体验有时候很简单，有时候很复杂。通过对网站内容的建设，为用户提供一个有价值性的网站，用户的回头率自然会非常高。

总结

无论是Google、Yahoo、Baidu甚至是Msn，无一例外对于网站内容都是非常重视。所以，网站内容的建设是思亿欧搜索引擎优化流程中的重点，坚持以原创内容建设网站获取的排名会更加牢固。

作者: 杭州思亿欧网络科技有限公司
   原载: http://www.seo.com.cn

Tags - seo优化 , seo重点

font属性的缩写方式

Fri, 20 Jun 2008 08:50:37 +0000
font-style设定斜体　如：font-style: italic;
font-weight设定文字粗细　如：font-weight: bold;
font-size设定文字大小　如：font-size: 12px;（或者9pt参考CSS手册http://www.52css.com/css/）
line-height设定行距　如：line-height: 150%;
color设定文字颜色（注意不是font-color）　如：color: red;
font-family设定字体　如：font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体

见解后：

font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;}

定义规则：font-style font-weight font-size line-height font-family；而color设定文字颜色需要单独进行定义。

Tags - font , web标准

页面制作朋友比较常用的js代码

Sat, 14 Jun 2008 02:06:21 +0000
1.文本框焦点问题
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件
点击时文字消失，失去焦点时文字再出现

2.网页按钮的特殊颜色

3.鼠标移入移出时颜色变化

4.平面按钮

5.按钮颜色变化

6.平面输入框

7.使窗口变成指定的大小

8.文字上下滚动，鼠标悬停，滚动停止。
酷站欣赏设计素材 http://www.kecola.com/

10.可以点击文字实现radio选项的选定


情侣 : 一次注册两个帐户

11.可以在文字域的font写onclick事件

12.打印打印网页

13.线型输入框

class="line">

14.显示文档最后修改日期

15.可以在鼠标移到文字上时就触发事件

 link

16.可以根据网页上的选项来确定页面颜色

background.html

Changing Background Colors



17.将按钮的特征改变

　　本例按钮的代码如下：

onmouseout="this.className='style1'" class="style1">

18.改变按钮的图片.

　　本例的按钮代码如下：

onmouseout="this.className='style3'" class="style3">

19.打印页面
打印本稿

20.可以直接写html语言
document.write("");

21.改变下拉框的颜色

>guoqiang99859

25.layer2为组件的ID，可以控制组件是否可见
document.all.item('Layer2').style.display = "block";
document.all.item('Layer2').style.display = "none";//

26.将页面加入favorite中
//

27.过10秒自动关闭页面
< script language="JavaScript" >
function closeit() {
setTimeout("self.close()"，10000)
}
< /script >

28.可以比较字符的大小
char=post.charAt(i);
if(!('0'<=char&&char<='9'))

29.将字符转化为数字
month = parseInt(char)

30.点击value非空的选项时转向指定连接

31.改变背景颜色

onmouseout="this.bgColor='#FAFBFC';">

32.改变文字输入框的背景颜色

33.改变水平线的特征

34.传递参数的方式
8

35.页内跳转
1
2
3
4
5
6
7
dfdf
dfdf//

36.两个按键一起按下
if(event.ctrlKey && window.event.keyCode==13)//

37.刷新页面
javascript:this.location.reload()//

38.将网页的按钮使能

39.文字移动

40.双击网页自动跑
//

41.后退

42.前进

43.刷新

44.转向指定网页
document.location="http://www.kecola.com"或者document.location.assign("http://www.hexiehao.com")

45.在网页上显示实时时间
//

46.可以下载文件
document.location.href="目标文件"//

47.连接数据库
import java.sql.*;
String myDBDriver="sun.jdbc.odbc.JdbcOdbcDriver";
Class.forName(myDBDriver);
Connection conn=DriverManager.getConnection("jdbcdbc:firm","username","password");
Statement stmt=conn.createStatement();
ResultSet rs=stmt.executeQuery(sql);
rs.getString("column1");//

48.可以直接在页面“div”内写下所需内容

//

49.可以改变页面上的连接的格式，使其为双线

完整的css

50.新建frame

href="javascript:newframe('http://www.163.net/help/a_little/index.html','http://www.163.net/help/a_little

/a_13.html')">

51.向文件中写内容
<%@ page import="java.io.*" %>
<%
String str = "print me";
//always give the path from root. This way it almost always works.
String nameOfTextFile = "/usr/anil/imp.txt";
try
{
  PrintWriter pw = new PrintWriter(new FileOutputStream(nameOfTextFile));
  pw.println(str);
  //clean up
  pw.close();
}
catch(IOException e)
{
  out.println(e.getMessage());
}
%>

52.先读文件再写文件
<%@ page language = "java" %>
<%@ page contentType = "text/html; charSet=gb2312" %>
<%@ page import ="java.util.*" %>
<%@ page import ="java.lang.*" %>
<%@ page import ="javax.servlet.*" %>
<%@ page import ="javax.servlet.jsp.*" %>
<%@ page import ="javax.servlet.http.*" %>
<%@ page import="java.io.*" %>
eryrytry
<%
int count=0;
FileInputStream fi =new FileInputStream ("count.txt");
ObjectInputStream si= new ObjectInputStream (fi);
count =si.readInt();
count++;
out.print(count);
si.close();

FileOutputStream fo =new FileOutputStream ("count.txt");
ObjectOutputStream so= new ObjectOutputStream (fo);
so.writeInt(count);
so.close();
%>

53.直线型输入框

54.可以将背景改为按钮性状，通过改变css改变属性

onmouseout=this.className='mouseout';>
color="#000000">录音笔

55.同时按下CTRL和Q键
document.onkeydown=function()
{
if(event.ctrlKey&&event.keyCode==81)
{alert(1)}
}//

56.以下是一个完整的显示hint的代码，其思想是当鼠标停留是将div中的内容显示在鼠标出，当鼠标移出后在将该div隐

藏掉
---------------------------------------------------------------------------------------------------------

------------

dfdfd

---------------------------------------------------------------------------------------------------------

------------

57.弹出窗口
方法一：浏览器读页面时弹出窗口；
方法二：浏览器离开页面时弹出窗口；
方法三：用一个连接调用：打开一个窗口
注意：使用的"#"是虚连接。
方法四：用一个按钮调用：何时装载script

58.动态改变字体的大小
function doZoom(size)
{
   document.getElementById('zoom').style.fontSize=size+'px'
}

function aa()
{
   var newWin=window.open(url);
   newWin.document.form1.text1.value=value1;
}改变弹出窗口上域的属性
opener.document.form2.text2.value=value2;改变父窗口的域的值

59.判断是何种浏览器
var name = navigator.appName;
if (name == "Microsoft Internet Explorer")
alert("IE");
else if (name == "Netscape")
alert("NS");//

60.vbsscript确定框
//

61.复制内容到剪切板
function JM_cc(bb)
{
    var ob=eval("document.form1."+bb);
    ob.select();
    js=ob.createTextRange();
    js.execCommand("Copy");
}//

62.java中建立数据库连接取数据
public void init()
{
String url="jdbcdbc:javadata";
try
{
  Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
  Connection con=DriverManager.getConnection(url,"sa","");//mssql database user SA and password
  DatabaseMetaData dma=con.getMetaData();
  System.out.println("Connect to"+dma.getURL());
  System.out.println(";Driver "+dma.getDriverName());
  System.out.println(";Version "+dma.getDriverVersion());
  System.out.println("");
  Statement stmt=con.createStatement();
  ResultSet rs=stmt.executeQuery("select * from company.dbo.TB_NAME where number=1");//Sql
  rs.next();
  String dispresult=rs.getString("name");
  System.out.println(dispresult);// Instead,you can display it in Paint() or use AWT etc.
  rs.close();
  stmt.close();
  con.close();
}
catch(SQLException ex)
{
  System.out.println("!!!SQL Exception !!!");

  while(ex!=null)
  {
   System.out.println("SQLState:"+ex.getSQLState());
   System.out.println("Message:"+ex.getMessage());
   System.out.println("Vendor:"+ex.getErrorCode());
   ex=ex.getNextException();
   System.out.println("");
  }

}
catch(java.lang.Exception ex)
{
  ex.printStackTrace();
}
}//

63.最小化窗口
window.blur()//

64.文档的路径
document.URL//

65.定时执行某段程序
setTimeout("change_color()",600);

66.设置为主页
function makeHome(){
  netscape.security.PrivilegeManager.enablePrivilege("UniversalPreferencesWrite");
  navigator.preference("browser.startup.homepage", location.href);
}//

67.设置为收藏
function addFav(){
  if(ie)
    window.external.AddFavorite(location.href,'WWW.OGRISH.COM : GROTESQUE MOVIES AND PICTURES');
  if(ns)
    alert("Thanks for the bookmark!\n\nNetscape users click OK then press CTRL-D");
}//

68.判断cookie是否可用
navigator.cookieEnabled;//

69.显示有模式的有页面的弹出窗口
function setbgcolor_onclick()
{
var color = showModalDialog("/mailpage/compose/colorsel.html",0,"help=0");
if (color != null)
{
  document.compose.bgcolor.value = color;
}
}//

70.截取小数点后两位
var a=3454545.4454545;
alert(a.toFixed(2));//

71.禁止选择页面上的文字来拷贝

//

72.屏蔽右键菜单
oncontextmenu="event.returnValue = false"//

73.事件禁止起泡
event.cancelBubble = true//

74.禁止在输入框打开输入法
//

75.屏蔽汉字和空格
//

76.用javascript判断文件是否存在
function Exists(filespec)
{
if (filespec)
{
  var fso;
  fso = new ActiveXObject("Scripting.FileSystemObject");
  alert(fso.FileExists(filespec));
}
}
选择图片

//

77.获得当前的文本框选中的文字
//

78.跳转至目标页面，同时不可返回
hexiehao.com//

79.获得当前的行是表格的第几行















　　　　　
　　　　　
//

80.删除表格某行，xx表示某行，下标从0开始计算
document.all.myTable.deleteRow(xx)//

81.动态的向表格中添加行

//

90.取第x,y的值
//

91.向新打开的网页上写内容
newwin=window.open('about:blank','','top=10');
newwin.document.write('');//

93.返回
javascript:history.go(-2);//

94.将页面上选中的内容复制到剪贴板
abcdefg

onclick="window.clipboardData.setData('text',document.selection.createRange().text);" value='复制页面选中

的字符'>//
95.将页面上选中的内容复制到剪贴板
kjhkjhkhkj////

96.鼠标移到下拉框时自动全部打开
//

97.获得本机的文件
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f1 = fso.GetFile("C:\\bsitcdata\\ejbhome.xml");
alert("File last modified: " + f1.DateLastModified); //

98.判断客户端是否是IE浏览器
因为 document.all 是 IE 的特有属性，所以通常用这个方法来判断客户端是否是IE浏览器 ,document.all?1:0;

99.创建新的下拉框选项
new Option(text,value)这样的函数//

100.在页面上画柱状图

%12
4人

backdepth='15pt' on='true'/>

%12
4人
backdepth='15pt' on='true'/>//

101.饼图

>xml技术

style="border-collapse: collapse" bordercolor="#CCCCCC" width="100%" ID="Table1">



　

//

102.是一个特殊的容器，想装个网页都行
//button

103.外部的html代码
event.srcElement.outerHTML//

104.标识当前的IE事件的触发器
event.srcElement和event.keyCode//

105.事件类型
event.type//

106.动态改变类型

//

107.页面翻转
//

108.滚屏
parent.scroll(x,y);//
//

109.改变状态栏
self.status ="";//

110.改变窗口大小
window.resizeTo(200,300);//

111.改变鼠标样式
style
BODY{CURSOR: url('mouse.ani');
SCROLLBAR-BASE-COLOR: #506AA8;
SCROLLBAR-ARROW-COLOR: #14213F;
}//

112.背景透明
//

113.鼠标为等待形状
//

114.调用父窗口的函数
opener.fucntion1();//

115.body的内部html代码
//

116.框架中调用父窗口的函数

160.动态创建一个标签
newElem  = document.createElement("DIV");
newElem.id = "hint_layer";
document.body.appendChild(newElem);
document.all.hint_layer.innerText="guoguo";//

161.标题栏
document.title//

162.背景图片
//背景图片不动

//背景图片居中

163.设置透明效果
document.form.xxx.filters.alpha.opacity=0～100//

164.定义方法
var dragapproved=false;
document.onmouseup=new Function("dragapproved = false");//

165.将数字转化为人民币大写形式
function convertCurrency(currencyDigits) {
// Constants:
var MAXIMUM_NUMBER = 99999999999.99;
// Predefine the radix characters and currency symbols for output:
var CN_ZERO = "零";
var CN_ONE = "壹";
var CN_TWO = "贰";
var CN_THREE = "叁";
var CN_FOUR = "肆";
var CN_FIVE = "伍";
var CN_SIX = "陆";
var CN_SEVEN = "柒";
var CN_EIGHT = "捌";
var CN_NINE = "玖";
var CN_TEN = "拾";
var CN_HUNDRED = "佰";
var CN_THOUSAND = "仟";
var CN_TEN_THOUSAND = "万";
var CN_HUNDRED_MILLION = "亿";
var CN_SYMBOL = "人民币";
var CN_DOLLAR = "元";
var CN_TEN_CENT = "角";
var CN_CENT = "分";
var CN_INTEGER = "整";

// Variables:
var integral; // Represent integral part of digit number.
var decimal; // Represent decimal part of digit number.
var outputCharacters; // The output result.
var parts;
var digits, radices, bigRadices, decimals;
var zeroCount;
var i, p, d;
var quotient, modulus;

// Validate input string:
currencyDigits = currencyDigits.toString();
if (currencyDigits == "") {
  alert("Empty input!");
  return "";
}
if (currencyDigits.match(/[^,.\d]/) != null) {
  alert("Invalid characters in the input string!");
  return "";
}
if ((currencyDigits).match(/^((\d{1,3}(,\d{3})*(.((\d{3},)*\d{1,3}))?)|(\d+(.\d+)?))$/) == null) {
  alert("Illegal format of digit number!");
  return "";
}

// Normalize the format of input digits:
currencyDigits = currencyDigits.replace(/,/g, ""); // Remove comma delimiters.
currencyDigits = currencyDigits.replace(/^0+/, ""); // Trim zeros at the beginning.
// Assert the number is not greater than the maximum number.
if (Number(currencyDigits) > MAXIMUM_NUMBER) {
  alert("Too large a number to convert!");
  return "";
}

// http://www.knowsky.com/ Process the coversion from currency digits to characters:
// Separate integral and decimal parts before processing coversion:
parts = currencyDigits.split(".");
if (parts.length > 1) {
  integral = parts[0];
  decimal = parts[1];
  // Cut down redundant decimal digits that are after the second.
  decimal = decimal.substr(0, 2);
}
else {
  integral = parts[0];
  decimal = "";
}
// Prepare the characters corresponding to the digits:
digits = new Array(CN_ZERO, CN_ONE, CN_TWO, CN_THREE, CN_FOUR, CN_FIVE, CN_SIX, CN_SEVEN, CN_EIGHT,

CN_NINE);
radices = new Array("", CN_TEN, CN_HUNDRED, CN_THOUSAND);
bigRadices = new Array("", CN_TEN_THOUSAND, CN_HUNDRED_MILLION);
decimals = new Array(CN_TEN_CENT, CN_CENT);
// Start processing:
outputCharacters = "";
// Process integral part if it is larger than 0:
if (Number(integral) > 0) {
  zeroCount = 0;
  for (i = 0; i < integral.length; i++) {
   p = integral.length - i - 1;
   d = integral.substr(i, 1);
   quotient = p / 4;
   modulus = p % 4;
   if (d == "0") {
    zeroCount++;
   }
   else {
    if (zeroCount > 0)
    {
     outputCharacters += digits[0];
    }
    zeroCount = 0;
    outputCharacters += digits[Number(d)] + radices[modulus];
   }
   if (modulus == 0 && zeroCount < 4) {

    outputCharacters += bigRadices[quotient];
   }
  }
  outputCharacters += CN_DOLLAR;
}
// Process decimal part if there is:
if (decimal != "") {
  for (i = 0; i < decimal.length; i++) {
   d = decimal.substr(i, 1);
   if (d != "0") {
    outputCharacters += digits[Number(d)] + decimals[i];
   }
  }
}
// Confirm and return the final output string:
if (outputCharacters == "") {
  outputCharacters = CN_ZERO + CN_DOLLAR;
}
if (decimal == "") {
  outputCharacters += CN_INTEGER;
}
outputCharacters = CN_SYMBOL + outputCharacters;
return outputCharacters;
}//

166.xml数据岛绑定表格

接收人发送人主题内容
表格的结束

//cd_catalog.xml

  Empire Burlesque
  Bob Dylan
  USA
  Columbia
  10.90
  1985


  Hide your heart
  Bonnie Tyler
  UK
  CBS Records
  9.90
  1988


  Greatest Hits
  Dolly Parton
  USA
  RCA

  9.90
  1982


  Still got the blues
  Gary Moore
  UK
  Virgin records
  10.20
  1990


//

167.以下组合可以正确显示汉字
================================
xml保存编码 xml页面指定编码
ANSI  gbk/GBK、gb2312
Unicode  unicode/Unicode
UTF-8  UTF-8
================================

168.XML操作

169.动态修改CSS的另一种方式
this.runtimeStyle.cssText = "color:#990000;border:1px solid #cccccc";//

170.正则表达式
匹配中文字符的正则表达式： [\u4e00-\u9fa5]

匹配双字节字符(包括汉字在内)：[^\x00-\xff]

应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}

匹配空行的正则表达式：\n[\s| ]*\r

匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/

匹配首尾空格的正则表达式：(^\s*)|(\s*$)

应用：javascript中没有像vbscript那样的trim函数，我们就可以利用这个表达式来实现，如下：

String.prototype.trim = function()
{
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

////////利用正则表达式分解和转换IP地址：

下面是利用正则表达式匹配IP地址，并将IP地址转换成对应数值的Javascript程序：

function IP2V(ip)
{
re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g  //匹配IP地址的正则表达式
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
throw new Error("Not a valid IP address!")
}
}

不过上面的程序如果不用正则表达式，而直接用split函数来分解可能更简单，程序如下：

var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))

匹配Email地址的正则表达式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

匹配网址URL的正则表达式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

//////////利用正则表达式去除字串中重复的字符的算法程序：

var s="abacabefgeeii"
var s1=s.replace(/(.).*\1/g,"$1")
var re=new RegExp("["+s1+"]","g")
var s2=s.replace(re,"")
alert(s1+s2)  //结果为：abcefgi

思路是使用后向引用取出包括重复的字符，再以重复的字符建立第二个表达式，取到不重复的字符，两者串连。这个方

法对于字符顺序有要求的字符串可能不适用。

//////////得用正则表达式从URL地址中提取文件名的javascript程序，如下结果为page1

s="http://www.9499.net/page1.htm"
s=s.replace(/(.*\/){0,}([^\.]+).*/ig,"$2")
alert(s)

/////////利用正则表达式限制网页表单里的文本框输入内容：

用正则表达式限制只能输入中文：onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"

onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,'')

)"

用正则表达式限制只能输入全角字符： onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')"

onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,'')

)"

用正则表达式限制只能输入数字：onkeyup="value=value.replace(/[^\d]/g,'')

"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

用正则表达式限制只能输入数字和英文：onkeyup="value=value.replace(/[\W]/g,'')

"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

171.设置和使用cookie

设置与读取 cookies...

写入cookie的值

//

172.取月的最后一天
function getLastDay(year,month)
{
//取年
var new_year = year;
//取到下一个月的第一天,注意这里传入的month是从1～12
var new_month = month++;
//如果当前是12月，则转至下一年
if(month>12)
{
  new_month -=12;
  new_year++;
}
var new_date = new Date(new_year,new_month,1);
return (new Date(new_date.getTime()-1000*60*60*24)).getDate();
}//

173.判断当前的焦点是组中的哪一个
for(var i=0;i<3;i++)
if(event.srcElement==bb[i])
  break;//

174.实现类
package com.baosight.view.utils;
import javax.servlet.jsp.tagext.TagSupport;
import javax.servlet.http.HttpSession;
public class Mytag extends TagSupport
{
  public int doStartTag() throws javax.servlet.jsp.JspException
  {
    boolean canAccess = false;
    HttpSession session= pageContext.getSession();
    if (canAccess)
    {
      return EVAL_BODY_INCLUDE;
    }
    else
    {
      return this.SKIP_BODY;
    }
  }
}

175.在web.xml中添加定义

    guoguo
    /WEB-INF/abc.tld


176.标签库中定义abc.tld

"http://www.kecola.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">

1.0
1.1
hr
guoguo
Extra 3 Tag Library

  mytag
  com.baosight.view.utils.Mytag

   id2
   true
            true


177.在使用自定义标签的页面中加入自己定义的标签，
<%@ taglib uri="guoguo" prefix="guoguo" %>
//自己定义标签

178.显示带边框的集

  查询条件
dfdfdf
//

179.【文件(F)】菜单中的命令的实现

1、〖打开〗命令的实现
[格式]:document.execCommand("open")
[说明]这跟VB等编程设计中的webbrowser控件中的命令有些相似，大家也可依此琢磨琢磨。
[举例]在之间加入：
打开

2、〖使用记事本编辑〗命令的实现
[格式]:location.replace("view-source:"+location)
[说明]打开记事本，在记事本中显示该网页的源代码。
[举例]在之间加入：
使用记事本编辑

3、〖另存为〗命令的实现
[格式]:document.execCommand("saveAs")
[说明]将该网页保存到本地盘的其它目录！
[举例]在之间加入：
另存为

4、〖打印〗命令的实现
[格式]:document.execCommand("print")
[说明]当然，你必须装了打印机！
[举例]在之间加入：
打印

5、〖关闭〗命令的实现
[格式]:window.close();return false
[说明]将关闭本窗口。
[举例]在之间加入：
关闭本窗口

180.【编辑(E)】菜单中的命令的实现

〖全选〗命令的实现
[格式]:document.execCommand("selectAll")
[说明]将选种网页中的全部内容！
[举例]在之间加入：
全选

181.【查看(V)】菜单中的命令的实现

1、〖刷新〗命令的实现
[格式]:location.reload() 或 history.go(0)
[说明]浏览器重新打开本页。
[举例]在之间加入：
刷新
或加入:
刷新

2、〖源文件〗命令的实现
[格式]:location.replace("view-source:"+location)
[说明]查看该网页的源代码。
[举例]在之间加入：
查看源文件

3、〖全屏显示〗命令的实现
[格式]:window.open(document.location, "url", "fullscreen")
[说明]全屏显示本页。
[举例]在之间加入：
全屏显示

182.【收藏(A)】菜单中的命令的实现

1、〖添加到收藏夹〗命令的实现
[格式]:window.external.AddFavorite('url', '“网站名”)
[说明]将本页添加到收藏夹。
[举例]在之间加入：
添加到收

藏夹

2、〖整理收藏夹〗命令的实现
[格式]:window.external.showBrowserUI("OrganizeFavorites",null)
[说明]打开整理收藏夹对话框。
[举例]在之间加入：
整理收藏夹

183.【工具(T)】菜单中的命令的实现

〖internet选项〗命令的实现
[格式]:window.external.showBrowserUI("PrivacySettings",null)
[说明]打开internet选项对话框。
[举例]在之间加入：
internet选项

184.【工具栏】中的命令的实现

1、〖前进〗命令的实现
[格式]history.go(1) 或 history.forward()
[说明]浏览器打开后一个页面。
[举例]在之间加入：
前进
或加入:
前进

2、〖后退〗命令的实现
[格式]:history.go(-1) 或 history.back()
[说明]浏览器返回上一个已浏览的页面。
[举例]在之间加入：
后退
或加入:
后退

3、〖刷新〗命令的实现
[格式]:document.reload() 或 history.go(0)
[说明]浏览器重新打开本页。
[举例]在之间加入：
刷新
或加入:
刷新

185.其它命令的实现
〖定时关闭本窗口〗命令的实现
[格式]:settimeout(window.close(),关闭的时间)
[说明]将关闭本窗口。
[举例]在之间加入：
3秒关闭本窗口

【附】为了方便读者，下面将列出所有实例代码，你可以把它们放到一个html文件中，然后预览效果。
打开

 使用记事本编辑

 另存为

 打印

 关闭本窗口

 全选

 刷新刷新

 查看源文件

 全屏显示

 添加到收藏

夹

 整理收藏夹

 internet选项

 前进1　前进2

后退1　后退2

3秒关闭本窗口

186.给DHTML中的标签添加一个新的属性，可以随意加

//

187.xmlhttp技术
此方法是通过XMLHTTP对象从服务器获取XML文档，示例如下。

//

188.服务器端通过request.getReader()获得传入的字符串

189.在java中使用正则表达式
java.util.regex.Pattern p =

java.util.regex.Pattern.compile("\\d+|.\\d+|\\d+.\\d*|(E|\\d+E|.\\d+E|\\d+.\\d*E)((\\+|-)\\d|\\d)\\d*");
java.util.regex.Matcher m = p.matcher("12.E+3");
boolean result = m.matches();//

190.给下拉框分组
//

191.加注音

基准文本
注音文本
//

192.加删除线
~~此文本将带删除线显示。~~//

193.取frame中的event事件
document.frames("workspace").event.keyCode//

194.是弹出方法的定义
String.prototype.trim=function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
alert("  ".trim)//

195.防止网页被包含
if (window != window.top)
top.location.href = location.href;//

196.让网页一直在frame里面
if(window==window.top)
{
document.body.innerHTML="
请通过正常方式访问本页面！
";
//window.close();
}//

197.加为首页

//

198.xml数据岛操作

  HTML中的数据岛中的记录集




HTML中的XML数据岛记录编辑与添加





  酒店名称：

  地址：

  主页：

  电子邮件：

  电话：

  级别：










  四海大酒店

海魂路1号

  www.coa.com.cn
  master@sihaohotel.com.cn
  (0989)8888888
  五星级


  五湖宾馆

东平路99号

  www.hexiehao.com
  web@wuhu.com.cn
  (0979)1111666
  四星级


  “大沙漠”宾馆

留香路168号

  www.kecola.com
  master@admin5.net

  (0989)87878788
  五星级


  “画眉鸟”大酒店

血海飘香路2号

  www.coa.com.cn
  chuliuxiang@throstlehotel.com.cn
  (099)9886666
  五星级





   //xml数据岛中添加记录

-------------------------------
  The following list is a sample of the properties and methods that you use to access nodes in an XML

document.

Property/    Method Description
XMLDocument Returns a reference to the XML Document Object Model (DOM) exposed by the object.

documentElement  Returns the document root of the XML document.
childNodes    Returns a node list containing the children of a node (if any).
item     Accesses individual nodes within the list through an index. Index values are zero-based, so

item(0) returns the first child node.
text     Returns the text content of the node.

The following code shows an HTML page containing an XML data island. The data island is contained within

the element.


    HTML with XML Data Island



Within this document is an XML data island.



        Adventure Works
        Alpine Ski House





For an example, you can cut and paste this sample line of code:

resortXML.XMLDocument.documentElement.childNodes.item(1).text//读取页面上的XML数据岛中的数据
resortXML.documentElement.childNodes.item(0).getAttribute("code")//读取页面上的XML数据岛中的数据
resortXML.documentElement.childNodes[0].getAttribute("code")//读取页面上的XML数据岛中的数据

199.模式窗口
父窗口
var url="aaa.jsp";
var

data=showModalDialog(url,null,"dialogHeight:400px;dialogHeight:600px;center:yes;help:No;status:no;resizab

le:Yes;edge:sunken");
if(data)
alert(data.value);

子窗口
var data=new Object();
data.value1="china";
window.returnValue=data;
window.close();

200.动态设置事件，带参数

//

201.将url转化为16进制形式
var ret = '';

for(var i=0; i < str.length; i++)
{
  var ch = str.charAt(i);
  var code = str.charCodeAt(i);

  if(code < 128 && ch != '[' && ch != '\'' && ch != '=')
  {
   ret += ch;
  }
  else
  {
   ret += "[" + code.toString(16) + "]";
  }
}
return ret;//

202.打开新的窗口并将新打开的窗口设置为活动窗口
var newWin=window.open("xxxx");
newWin.focus();//

203.容错脚本
JS中遇到脚本错误时不做任何操作:window.onerror = doNothing;
指定错误句柄的语法为:window.onerror = handleError
function handleError(message, URI, line)
{// 提示用户，该页可能不能正确回应
return true; // 这将终止默认信息
}//在页面出错时进行操作

204.JS中的窗口重定向:
window.navigate("http://www.coa.com.cn");//

205.防止链接文字折行
document.body.noWrap=true;//

206.判断字符是否匹配.
string.match(regExpression)//

207.
href="javascript:document.Form.Name.value='test';void(0);"//不能用onClick="javacript:document.Form.Name.v

alue='test';return false;"

当使用inline方式添加事件处理脚本事，有一个被包装成匿名函数的过程，也就是说
onClick="javacript:document.Form.Name.value='test';return false;"被包装成了：
functoin anonymous()
{
    document.Form.Name.value='test';return false;
}
做为A的成员函数onclick。
而href="javascript:document.Form.Name.value='test';void(0);"相当于执行全局语句，这时如果使用return语句会

报告在函数外使用return语句的错误。

208.进行页面放大

sdsdsdsdsdsdsdsds
//

209.放置在页面的最右边
//

210.通过style来控制隔行显示不同颜色

//

211.全屏最大化
newwindow=window.open("","","scrollbars")
if (document.all)
{
newwindow.moveTo(0,0)
newwindow.resizeTo(screen.width,screen.height)
}//

212.根据名字解析xml中的节点值
var XMLDoc=new ActiveXObject("MSXML");
XMLDoc.url="d:/abc.xml";
aRoot=XMLDoc.root;
a1.innerText=aRoot.children.item("name").text;//

213.在页面上解析xml的值
http://msdn.microsoft.com/librar ... 3472-4b03-9fb0-1e08

fcccdf35.asp
//

214.看一个字符串里面有多少个回车符，返回值是一个数组
var s=value.match(/\n/g);if(s)if(s.length==9){alert('10行了');return false;}//

215.获得asc码
var s='aa';
alert(s.charCodeAt(1))//

216.文字居右对齐
//

217.判断一个方法是否存在
function pageCallback(response){
alert(response);
}
if(pageCallback)
alert(1)//

218.判断一个变量是否定义
if(typeof(a)=="undefined")
{
alert()
}//

219.javascript执行本机的可执行程序,需设置为可信或者降低IE安全级别

调用方式
测试//

220.弹出新页面，关闭旧页面，不弹出提示框
var w=screen.availWidth-10;

   var h=screen.availHeight-10;
   var swin=window.open("/message_management.jsp",

"BGSMbest","scrollbars=yes,status,location=0,menubar=0,toolbar=0,resizable=no,top=0,left=0,height="+h+",w

idth="+w);
   window.opener=null;
   window.close();//

221.能输入的下拉框

//

222.在方法中定义全局变量
function globalVar (script) {
        eval(script);//all navigators
  //window.execScript(script); //for ie only
}
globalVar('window.haha = "../system";');
alert(haha);//在方法中定义全局变量，其中的haha就是全局变量了

223.显示一个对象的全部的属性和属性的值
var a=new Object();
a.name='a1';
a.***='mail'
for(var p in a)
{
alert(p+"="+a[p])
}//

224.16进制转换成10进制
var n = parseInt("2AE",16);//这里将16进制的 2AE 转成 10 进制数，得到 n 的值是 686

225.复制粘贴

//

226.获得对象类型
switch (object.constructor){
   case Date:
   ...
   case Number:
   ...
   case String:
   ...
   case MyObject:
   ...
   default:
   ...
}//

227.图片加载失败时重新加载图片
//

228.
//font_effect.htc

//abc.css
tr{behavior:url(font_effect.htc);}

229.可以通过css和htc改变表格的颜色,仅IE支持
//xxx.html

1 2 3
4 5 6
//

230.在页面上画点
function a(x,y,color)
{
document.write("
"+(y+20)+";background-color: "+color+"' width=1 height=1>")
}//

231.自动关闭网页

本页10秒后自动关闭,请注意刷新页面

Tags - 经典收集 , 代码

网页设计师必看的16个有启发性设计网站

Wed, 11 Jun 2008 09:44:35 +0000
1. The Best Designs----http://www.thebestdesigns.com/

The Best Designs 是个遍览高质量XHTML和FLASH设计的优秀网站。每个网站设计都会加上相关的标签(比如 - Bold, Colorful, CSS)，让你更方便的找到你想要的。

2. CSS Remix----http://cssremix.com/

照CSS Remix自己的话说，他们是“一个新鲜的Web2.0最佳设计站点的大本营” （尽管有些搜罗的站点并不是Web 2.0的）。RSS订阅者超过14,000人，CSS Remix绝对可以称得上是设计师们发现别人设计作品的主流网站之一。

3. CSS Mania---http://cssmania.com/

CSS Mania是一个包涵众多设计风格的CSS站点搜罗网站，而且更新比较勤。到现在为止，它已经收藏了超过10,000个网站。推荐CSS Mania的老兄是这么说的：“这个站收藏的网站设计的质量并不都是很高。”

4. screenfluent---http://screenfluent.com/

screenfluent是个提供很好设计的网站收罗站。这个网站很棒的地方是它能让你先打开一个很酷的窗口让你预览。超过7,000多的设计，内容也不少。

5. Screenalicio.us----http://www.screenalicious.com/

收藏超过 9,800 多个网站设计。你可以给每个网站设计按1星到5星的方法打分，而且还可以给每个网站设计留言。你还可以按设计的星级和更新时间来分类搜索。

6. Open Source Web Design------http://www.oswd.org/

Open Source Web Design 是一个允许用户上传发表网站设计的社区。你可以免费下载站点上的设计作品。可以是简单浏览下网站设计也可以下载下来研究学习。

7. One Page Love---http://onepagelove.com/

One Page Love 这个网站设计搜罗站收藏的一般都是一些漂亮、创意十足的单页站点设计。分类中有：产品展示、个人档案、临时页和节日等等。

8. FullSingle----http://www.fullsingle.com/

FullSingle 是另一家收藏单页站点设计的网站。最新的设计都会附带一个简单的介绍说明。

9. One Page Folios-----http://onepagefolios.com/

如果上面2个单页站点设计搜罗站还不能让你满意，就试试这个吧。这儿有超过800个设计，而且每个站点设计都经过编辑审编过。

10. We Love WP---http://welovewp.com/

We Love WP 收藏的是一些很棒的WordPress站点设计。

11. CSS Divine----http://cssdivine.com/

一家CSS网站设计的搜罗站。点击侧边栏的色块，可以进行色彩分类查询，让你很方便的找到符合自己主题色的网站设计。网站类别包括：艺术类、商务站点、简洁型等等。

12. Design Snack---http://www.designsnack.com/

按他们自己的话说，这是 “设计师自己的收藏箱” 。 Design Snack 同时包含XHTML和FLASH的设计. 你可以自定义网站设计作品的展示方式，为每个设计投票或者通过色调来浏览设计作品。

13. SF art & design portal---http://www.strangefruits.nl/

SF art & design portal 是阿姆斯特丹一家网站工作室创办的网站。收藏的网站设计都是通过人工甄选。你可以按照类别、风格、色调甚至是国别来进行分类浏览。

14. Design Shack ----http://designshack.co.uk/gallery/all/

一流CSS站点设计的集合地。该站的搜罗的设计作品都是 "优中选优"的一流作品. 同时，他们还有一些网页设计方面教程的内容

15. CSSloaf----http://www.cssloaf.com/

CSSloaf 整合了其他35家网页设计搜罗站的设计作品，所以你就不用浪费时间把那么多站点都访问一遍了。他们的特色是有大幅的网页截图，这样你就不用费神去看小的网页截图了。

16. eduStyle----eduStyle 致力于搜罗高校教育性网站的设计。
感谢大家提供的站点，如果你喜欢的站点没有列在这里也没关系，回复一下，我们会把您的好站也更新在这个文章里的：）
沪江UI团队资料翻译组翻译作品

Tags - 网页设计

教你如何科学设计自己的网站网页

Tue, 10 Jun 2008 12:06:43 +0000
转自视觉中国，觉得挺有用的转来跟大家分享。

在网络设计领域关于Eye-Tracking的研究十分火爆，但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门，可以为改进你的网站设计提供些意见：

1.对比图像，文字更具吸引力

与你所认为的相反，在浏览一个网站的时候，能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户，他们是来寻觅信息的而不是图像。因此，保证你的网站设计凸现出最重要的信息板块，这才是设计的首要原则。

2.眼球的第一运动聚焦于网页的左上角

用户浏览网页的这一习惯应该在意料之中，毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时，应该尽量保持这一格式。要知道，如果你希望保持个人特色，搭建一个成功的网站，你就必须尊重用户们的习惯。

3.用户浏览网页时，首先观察网页的左上部和上层部分，之后再往下阅读，浏览右边的内容

用户普遍的浏览方式呈现出“F”的形状。保证网站内容的重要要素集中于这些关键区域，以此确保读者的参与。在此放置头条，副题，热点以及重要文章，这样可以吸引到读者进行阅读。

4.读者会忽视横幅广告

研究表明，读者常忽视大部分的横幅广告——尽管你以此维持网站生计——视线往往只停留几分之一秒。如果你想通过广告挣钱，那么必须创新你的广告位以及合理配置网站广告形式。

5.花哨的字体和格式被忽视

为什么呢？那是因为用户会认为这些是广告，并非他们所需要的信息。事实上，研究表明用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息，因为视觉线索告诉他们把这些忽略吧。保持网站的清爽，不要因为华而不实的表面，让重要的信息被忽略。

6.用数词来代替数字

如果使用数词取代数字的罗列，读者会发现在你的网站可以很容易地发现真实的资料。要知道，你是写给那些将第一次浏览你的网站的读者，所以，让他们容易发现他们所需的信息，让他们感兴趣。

7.字体大小影响浏览行为

想改变人们对你的网页的看法吗？改变网页字体的大小。大的字体刺激浏览，而小一些的字体则提高焦点阅读量。根据你的需要，合理配置两者的比例。

8.遇到感兴趣的内容，用户仅会多看一眼副标题

不要过分坚持副标题固定的格式——保证他们的相关性和兴趣。你也可以让副标题包含关键词，这样可以有效利用搜索引擎，让它带来读者。

9.人们大都只浏览网页的小部分内容

如果在用户浏览的时候提供信息使他们尽快锁定目标，就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。

10.简短的段落相对于长段落来说有更好的表现力

网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成，例如这个电子商务网站的产品介绍。

11.根据视觉锁定，一栏格式比多栏格式拥有更好的表现力

别让过多的信息把网站来访者淹没。大多数情况下，简洁更具力量。多栏内容容易被用户忽视，我们需要消除这些干扰。

12.网页顶部和左边的广告更能吸引眼球

如需要在网站植入广告，试图使他们融入网页的左上部，这样他们才能吸引到最大的视觉注意力。当然，用户仅仅会注意到这些广告，这并不意味着他们会用鼠标点击。所以不要为了提高广告的注意力而牺牲原有的网站设计。

13.将广告放置与最佳内容一旁也可以提升注意力

如果想要提升广告的可视性和点击率，可以将其设置于最能引起人兴趣的内容一旁，整合进网页的设计里。这样，用户既可以找到所需的内容，你也能提升广告的效益。

14.在各种测试中，人们阅读文字广告最为专心。

正如上面提到的，一般的互联网用户不会花费太多时间用于查看那些一眼就能看出是广告的内容。这就是文字广告表现出众的原因。他们并没有分散注意力，而是与网页的其它部分内容融为一体，这让他们减少了对读者的视觉刺激，也使这一广告形式获得成功的阅读率。

15.越大的图像吸引越多的注意力

如果要在网页中使用图片，那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要保证你所用的图片与文章内容相关，否则它更容易被忽视。大多数读者都拥有高速的连接速度，所以请放心在你的网站上使用那些较大体积的图片。

16.干净、清晰的特写图片能吸引更多的视觉注意

可能那些抽象的艺术图片会让你的网站看起来很有味道，但是他们并不会吸引多少读者的注意力。如果你需要使用到这些图片，请确保所用图片的清晰以及其表达内容的简单可读性。必须注意的是，那些与真实的“人”相关的图片比所谓的模特图片更为“优秀”。

17.标题能吸引眼球

浏览网页时，读者能发现的第一内容是标题。确保网页的所有相关链接畅通和有效，以让读者顺利的通过网站进一步搜索。

18.用户花费大量时间察看按钮和菜单

所以，你需要花费额外的时间维护你的精心设计。毕竟，他们不仅吸引了读者的眼球，更是网站设计的重要组成要素。

19.表单格式可以延长读者的注意时间

分解内容和段落，大量使用表单形式来表现你的文章，可以保证读者的浏览率。使用数字和其它标记符号来突出文章的重要内容，会让网站更容易浏览，用户更快的找到所需的信息。

20.避免呈现大块的文本

研究显示，一般的网络浏览者不会花费时间去阅读大块的文本，无论他们有多重要或写得多好。因此，必须把这些大文本分解为若干小段落。突出重要的地方，放置点击的按钮也可以提高用户的注意力。

21.格式可以吸引注意力

在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所表达的最主要的信息。使用时需要谨慎，因为过多的使用会使你的网页难以阅读，把读者吓跑。

22.利用好空白

尽管把网页的每寸空间都填满这个想法十分诱人，但事实上让网站留出部分剩余更为不错。网站的过量信息会把用户淹没，同时他们也会忘记所提供的大部分的内容。所以保持网页的简洁，给读者预留出一些视觉空间来供读者休息。

23.放置于网页顶部，导航工具的作用将更好的发挥

理想情况下，你不会满足于当读者打开你的网站时仅浏览初始页，而是希望他们浏览翻阅，察看其它感兴趣的内容。将导航器置于网页顶部，就可以让用户通过使用这个工具轻松的找到所需的目标内容。
Tags - 网页设计

表格的结束
接收人	发送人	主题	内容