正则表达式中的特殊字符一览[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

正则表达式中的特殊字符一览

〓简介〓
字符意义：对于字符，通常表示按字面意义，指出接着的字符为特殊字符，不作解释。
例如：/b/匹配字符’b’,通过在b 前面加一个反斜杠，也就是/b/，则该字符变成特殊字符，表示匹配一个单词的分界线。或者：对于几个字符，通常说明是特殊的，指出紧接着的字符不是特殊的，而应该按字面解释。例如：*是一个特殊字符，匹配任意个字符(包括0个字符)；例如：/a*/意味匹配0个或多个a。为了匹配字面上的*，在a前面加一个反斜杠；例如：/a*/匹配’a*’。

〓正文〓
字符
意义：对于字符，通常表示按字面意义，指出接着的字符为特殊字符，不作解释。
例如：/b/匹配字符’b’,通过在b 前面加一个反斜杠，也就是/b/，则该字符变成特殊字符，表示
匹配一个单词的分界线。
或者：
对于几个字符，通常说明是特殊的，指出紧接着的字符不是特殊的，而应该按字面解释。
例如：*是一个特殊字符，匹配任意个字符(包括0个字符)；例如：/a*/意味匹配0个或多个a。
为了匹配字面上的*，在a前面加一个反斜杠；例如：/a*/匹配’a*’。

字符^
意义：表示匹配的字符必须在最前边。
例如：/^A/不匹配”an A,”中的’A’，但匹配”An A.”中最前面的’A’。

字符$
意义：与^类似，匹配最末的字符。
例如：/t$/不匹配”eater”中的’t’，但匹配”eat”中的’t’。

字符*
意义：匹配*前面的字符0次或n次。
例如:/bo*/匹配”A ghost booooed”中的’boooo’或”A bird warbled”中的’b’，但不匹配”A goat g
runted”中的任何字符。

字符+
意义：匹配+号前面的字符1次或n次。等价于{1,}。
例如：/a+/匹配”candy”中的’a’和”caaaaaaandy.”中的所有’a’。

字符?
意义：匹配?前面的字符0次或1次。
例如：/e?le?/匹配”angel”中的’el’和”angle.”中的’le’。

字符.
意义：(小数点)匹配除换行符外的所有单个的字符。
例如：/.n/匹配”nay, an apple is on the tree”中的’an’和’on’，但不匹配’nay’。

字符(x)
意义：匹配’x’并记录匹配的值。
例如：/(foo)/匹配和记录”foo bar.”中的’foo’。匹配子串能被结果数组中的素[1], …, [n] 返
回，或被RegExp对象的属性$1, …, $9返回。

字符x|y
意义：匹配’x’或者’y’。
例如：/green|red/匹配”green apple”中的’green’和”red apple.”中的’red’。

字符{n}
意义：这里的n是一个正整数。匹配前面的n个字符。
例如：/a{2}/不匹配”candy,”中的’a’，但匹配”caandy,” 中的所有’a’和”caaandy.”中前面的两个
‘a’。

字符{n,}
意义：这里的n是一个正整数。匹配至少n个前面的字符。
例如：/a{2,}不匹配”candy”中的’a’，但匹配”caandy”中的所有’a’和”caaaaaaandy.”中的所有’a’

字符{n,m}
意义：这里的n和m都是正整数。匹配至少n个最多m个前面的字符。
例如：/a{1,3}/不匹配”cndy”中的任何字符，但匹配 “candy,”中的’a’，”caandy,” 中的前面两个
‘a’和”caaaaaaandy”中前面的三个’a’，注意：即使”caaaaaaandy” 中有很多个’a’，但只匹配前面的三
个’a’即”aaa”。

字符[xyz]
意义：一字符列表，匹配列出中的任一字符。你可以通过连字符-指出一个字符范围。
例如：[abcd]跟[a-c]一样。它们匹配”brisket”中的’b’和”ache”中的’c’。

字符[^xyz]
意义：一字符补集，也就是说，它匹配除了列出的字符外的所有东西。你可以使用连字符-指出一
字符范围。
例如：[^abc]和[^a-c]等价，它们最早匹配”brisket”中的’r’和”chop.”中的’h’。

字符[b]
意义：匹配一个空格(不要与b混淆)

字符b
意义：匹配一个单词的分界线，比如一个空格(不要与[b]混淆)
例如：/bnw/匹配”noonday”中的’no’，/wyb/匹配”possibly yesterday.”中的’ly’。

字符B
意义：匹配一个单词的非分界线
例如：/wBn/匹配”noonday”中的’on’，/yBw/匹配”possibly yesterday.”中的’ye’。

字符cX
意义：这里的X是一个控制字符。匹配一个字符串的控制字符。
例如：/cM/匹配一个字符串中的control-M。

字符d
意义：匹配一个数字，等价于[0-9]。
例如：/d/或/[0-9]/匹配”B2 is the suite number.”中的’2’。

字符D
意义：匹配任何的非数字，等价于[^0-9]。
例如：/D/或/[^0-9]/匹配”B2 is the suite number.”中的’B’。

字符f
意义：匹配一个表单符

字符n
意义：匹配一个换行符

字符r
意义：匹配一个回车符

字符s
意义：匹配一个单个white空格符，包括空格，tab，form feed，换行符，等价于[ fnrtv]。
例如：/sw*/匹配”foo bar.”中的’ bar’。

字符S
意义：匹配除white空格符以外的一个单个的字符，等价于[^ fnrtv]。
例如：/S/w*匹配”foo bar.”中的’foo’。

字符t
意义：匹配一个制表符

字符v
意义：匹配一个顶头制表符

字符w
意义：匹配所有的数字和字母以及下划线，等价于[A-Za-z0-9_]。
例如：/w/匹配”apple,”中的’a’，”$5.28,”中的’5’和”3D.”中的’3’。

字符W
意义：匹配除数字、字母外及下划线外的其它字符，等价于[^A-Za-z0-9_]。
例如：/W/或者/[^$A-Za-z0-9_]/匹配”50%.”中的’%’。

字符n
意义：这里的n是一个正整数。匹配一个正则表达式的最后一个子串的n的值(计数左圆括号)。

例如：/apple(,)sorange1/匹配”apple, orange, cherry, peach.”中的’apple, orange’，下面
有一个更加完整的例子。
注意：如果左圆括号中的数字比n指定的数字还小，则n取下一行的八进制escape作为描述。

字符ooctal和xhex
意义：这里的ooctal是一个八进制的escape值，而xhex是一个十六进制的escape值，允许在一个正则表达式中嵌入ASCII码。

详解如何在后台管理中进行批量操作(ASP+Script)

〓简介〓
我们常看到有些优秀的后台管理系统都是可以对信息批量操作的，比如点击一个复选框，全部选中（取消选中），然后一个确定按钮就可以全部删除（更新）那些信息了，其实这也不难，只是需要了一段小脚本……

〓正文〓
比如表单页面里全选的HTML语句是这样的

<input type=”checkbox” name=”chkAll” value=”on” onClick=”CheckAll(this.form)”>《全部选中》

这里就定义了一个CheckAll函数， this.form 表示动作当前的表单里，

onClick的意思就是当鼠标按下放开执行这样一个点击动作后激活CheckAll函数

而这个CheckAll函数的源代码也很简单：
========================================================
<script>
function CheckAll(form){

for (var i=0;i<form.elements.length;i++){

var e = form.elements[i];
if (e.name != ‘chkAll’)
e.checked = form.chkAll.checked;
}
}
</script>
===================================================
里面仅仅是一个FOR(initallization; test; increment) 典型的JS循环语句

initallization 表示循环开始付值一次这里是 var i=0 由于JS语法是强制每个变

量必须声明后才能使用的，而声明JS变量的声明方式可以有两种一种是先声明，

换行后付值比如：

var i, a
i = 1
a = 0

而另一种则是在同一行同时声明并付值比如 var i = 0 当然了，我这里用的是后者

（不行了，老娘喊我吃饭了，待会儿回来接着说……）

…………吃好了，可以接着说了，下面这句是i<form.elements.length，理论上讲

form.elements.length是获取当前表单里总共有多少个复选框（checkbox）获取的值是个整数类型

与i作比较，如果i小于他，则执行循环语句里的内容，后面的 i++ 则表示条件成立后每循环一次

i的数值累加一，这样当i累加到大于form.elements.length取得的数值后退出循环！

值得注意的是form.elements.length所获得的复选框的个数是包括那个form表单里

《全部选中》的那个复选框的

<input type=”checkbox” name=”chkAll” value=”on” onClick=”CheckAll(this.form)”>《全部选中》

所以接下来的语句 var e = form.elements[i]; 接着声明一个变量，记录循环到了哪个复选框

而全部选中的那个复选框名称为chkAll,所以我们对复选框名称（name）不为chkAll的

进行操作 if (e.name != ‘chkAll’)

!= 在JS中表示不等于，后面的语句 e.checked = form.chkAll.checked; 让所有的复选框的状态

都等于表单中chkAll的状态（checked表示选中），这里需要注意的是JS当中对变量命名的大小写

是敏感的（也就是区分大小写，所以chkAll和chkall脚本执行当中或把它解释成两个不同的名字）

至此批量操作脚本方面的语法就全部解释完了，下面是ASP方面要注意的

由于checkbox复选框获取的值是以数组的形式存在的比如我们一个名称为ID记录数据库内容ID自动编号

复选框，用 ID = Request.Form(“ID”) 取得的值直接不做处理显示出来会是以数组形式存在的，

ID = “3,22,32,66,6543” 那么在ASP语句里想以此为条件批量执行操作则必须把它们以单个数值的形式

提取出来，当然我们可以很简单地做到比如你在SQL查询语句里将等号（=）替换成（in）旁边再多加

两个括号就行了，比如原来的删除语句 sql = “delete id from table where id = ” & id & “”

现在批量删除只要改成 sql = “delete id from table where id in (” & id & “)” 就OK了！

可是如果我们是要用ID这个数组里的每个数值为条件去查询数据库相关内容用 where in

就不太好操作了，我们这时候需要将ID这个数组以循环形式单独提取出来，

一一进行操作，那么我们还需要

多用到一个变量（IDD），一个VBS内置函数（Split）和一个循环语句(For Each …… Next)

当然变量IDD是我们自己取的名字，您可以根据喜好自己定义，函数Split的作用是返回指定字符串的一维数组

For Each …… Next的作用是依据指定的数字重复循环执行一次，当我们用ID = Request.Form(“ID”)

获得一个数组的时候紧接下面 IDD = Split(ID,”,”) 或者这个字符串的一维数组

接着

For ID Each in IDD

执行你的代码, 而这期间代码的条件你就可以用等号了 where id = ” & id & “”

这样的代码本来就是万无一失的，可是我还是遇到了一个让我头疼半天的问题，还在已经找到原因解决了

下面我告诉你吧免得以后碰到就不会不知所措了……

Request.Form(“ID”) 获得的字符串”2,33,454,3222″ 本来中间的逗号分隔符，都应该是英文半角的这样Split才能

辨认，而我有次获取出来的居然都是用中文半角逗号的分隔符”2，24，55，342，322″，每次在调试的时候都告诉我说

数据溢出，搞不懂，后来我用VBS的Replace函数作了一下替换就OK了，就是在 ID = Request.Form(“ID”) 的下面

加一句 ID = Replace(ID,”，”,”,”) 将ID字符串里的中文逗号全部替换成英文半角的，呵呵，也怪我懒

没有追根溯源看看到底为什么会全变成中文半角的逗号！如果哪位高手知道的话请告知小弟，在下感激不尽！

客户端脚本，值得收藏！

〓简介〓
屏闭右键，防止别人Frame，不准粘帖，不准复制，IE限制自己的图标，网页另存，查看网页代码，等等！

〓正文〓
1. οncοntextmenu=”window.event.returnvalue=false” 将彻底屏蔽鼠标右键
<table border οncοntextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart=”return false”> 取消选取、防止复制

3. οnpaste=”return false” 不准粘贴

4. οncοpy=”return false;” oncut=”return false;” 防止复制

5. <link rel=”Shortcut Icon” href=”favicon.ico”> IE地址栏前换成自己的图标

6. <link rel=”Bookmark” href=”favicon.ico”> 可以在收藏夹中显示出你的图标

7. <input style=”ime-mode:disabled”> 关闭输入法

8. 永远都会带着框架
<script language=”javascript”><!–
if (window == top)top.location.href = “frames.htm”; //frames.htm为框架网页
// –></script>

9. 防止被人frame
<SCRIPT LANGUAGE=javascript><!–
if (top.location != self.location)top.location=self.location;
// –></SCRIPT>

10. <noscript>< src=*.html></></noscript> 网页将不能被另存为

11. <input type=button value=查看网页源代码
οnclick=”window.location = ‘view-source:’+ ‘ http://www.TOL8.com/'”>

12. 怎样通过asp的手段来检查来访者是否用了代理
<% if Request.ServerVariables(“HTTP_X_FORWARDED_FOR”)<>”” then
response.write “<font color=#FF0000>您通过了代理服务器，”& _
“真实的IP为”&Request.ServerVariables(“HTTP_X_FORWARDED_FOR”)
end if
%>

13. 取得控件的绝对位置

//javascript
<script language=”javascript”>
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
    t+=e.offsetTop;
    l+=e.offsetLeft;
    }
alert(“top=”+t+”/nleft=”+l);
}
</script>

//VBScript
<script language=”VBScript”><!–
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>”BODY”
    set a = a.offsetParent
    t=t+a.offsetTop
    l=l+a.offsetLeft
wend
msgbox “top=”&t&chr(13)&”left=”&l,64,”得到控件的位置”
end function
–></script>

14. 光标是停在文本框文字的最后
<script language=”javascript”>
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart(‘character’,e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value=”123″ οnfοcus=”cc()”>

15. 判断上一页的来源
asp:
request.servervariables(“HTTP_REFERER”)

javascript:
document.referrer

16. 最小化、最大化、关闭窗口
<object id=hh1 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″>
<param name=”Command” value=”Minimize”></object>
<object id=hh2 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″>
<param name=”Command” value=”Maximize”></object>
<OBJECT id=hh3 classid=”clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11″>
<PARAM NAME=”Command” value=”Close”></OBJECT>

<input type=button value=最小化 οnclick=hh1.Click()>
<input type=button value=最大化 οnclick=hh2.Click()>
<input type=button value=关闭 οnclick=hh3.Click()>
本例适用于IE

17.
<%
‘定义数据库连接的一些常量
Const adOpenForwardOnly     = 0 ‘游标只向前浏览记录，不支持分页、Recordset、BookMark
Const adOpenKeyset          = 1 ‘键集游标，其他用户对记录说做的修改将反映到记录集中，但其他用户增加或删除记录不会反映到记录集中。支持分页、Recordset、BookMark
Const adOpenDynamic         = 2 ‘动态游标功能最强，但耗资源也最多。用户对记录说做的修改，增加或删除记录都将反映到记录集中。支持全功能浏览(ACCESS不支持)。
Const adOpenStatic          = 3 ‘静态游标，只是数据的一个快照，用户对记录说做的修改，增加或删除记录都不会反映到记录集中。支持向前或向后移动

Const adLockReadOnly        = 1 ‘锁定类型，默认的，只读，不能作任何修改
Const adLockPessimistic     = 2 ‘当编辑时立即锁定记录，最安全的方式
Const adLockOptimistic      = 3 ‘只有在调用Update方法时才锁定记录集，而在此前的其他操作仍可对当前记录进行更改、插入和删除等
Const adLockBatchOptimistic = 4 ‘当编辑时记录不会被锁定，而更改、插入和删除是在批处理方式下完成的

Const adCmdText = &H0001
Const adCmdTable = &H0002
%>

18. 网页不会被缓存
HTM网页
<META HTTP-EQUIV=”pragma” CONTENT=”no-cache”>
<META HTTP-EQUIV=”Cache-Control” CONTENT=”no-cache, must-revalidate”>
<META HTTP-EQUIV=”expires” CONTENT=”Wed, 26 Feb 1997 08:21:57 GMT”>
或者<META HTTP-EQUIV=”expires” CONTENT=”0″>
ASP网页
Response.Expires = -1
Response.ExpiresAbsolute = Now() – 1
Response.cachecontrol = “no-cache”
PHP网页
header(“Expires: Mon, 26 Jul 1997 05:00:00 GMT”);
header(“Cache-Control: no-cache, must-revalidate”);
header(“Pragma: no-cache”);

19. 检查一段字符串是否全由数字组成
<script language=”javascript”><!–
function checkNum(str){return str.match(//D/)==null}
alert(checkNum(“1232142141”))
alert(checkNum(“123214214a1”))
// –></script>

20. 获得一个窗口的大小
document.body.clientWidth,document.body.clientHeight

21. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert(“含有汉字”);
else alert(“全是字符”);

22.TEXTAREA自适应文字行数的多少
<textarea rows=1 name=s1 cols=27 onpropertychange=”this.style.posHeight=this.scrollHeight”>
</textarea>

23. 日期减去天数等于第二个日期
<script language=javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a – dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + “年” + (a.getMonth() + 1) + “月” + a.getDate() + “日”)
}
cc(“12/23/2002”,2)
</script>

24. 选择了哪一个Radio
<HTML><script language=”vbscript”>
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name=”radio1″ type=”radio” value=”style” checked>Style
<INPUT name=”radio1″ type=”radio” value=”barcode”>Barcode
<INPUT type=”button” value=”check” οnclick=”checkme()”>
</BODY></HTML>

25.获得本页url的request.servervariables(“”)集合
Response.Write “<TABLE border=1><!– Table Header –><TR><TD><B>Variables</B></TD><TD><B>value</B></TD></TR>”
for each ob in Request.ServerVariables
Response.Write “<TR><TD>”&ob&”</TD><TD>”&Request.ServerVariables(ob)&”</TD></TR>”
next
Response.Write “</TABLE>”

26.
本机ip<%=request.servervariables(“remote_addr”)%>
服务器名<%=Request.ServerVariables(“SERVER_NAME”)%>
服务器IP<%=Request.ServerVariables(“LOCAL_ADDR”)%>
服务器端口<%=Request.ServerVariables(“SERVER_PORT”)%>
服务器时间<%=now%>
IIS版本<%=Request.ServerVariables”SERVER_SOFTWARE”)%>
脚本超时时间<%=Server.ScriptTimeout%>
本文件路径<%=server.mappath(Request.ServerVariables(“SCRIPT_NAME”))%>
服务器CPU数量<%=Request.ServerVariables(“NUMBER_OF_PROCESSORS”)%>
服务器解译引擎<%=ScriptEngine & “/”& ScriptEngineMajorVersion &”.”&ScriptEngineMinorVersion&”.”& ScriptEngineBuildVersion %>
服务器操作系统<%=Request.ServerVariables(“OS”)%>

27.ENTER键可以让光标移到下一个输入框
<input οnkeydοwn=”if(event.keyCode==13)event.keyCode=9″>

28. 检测某个网站的链接速度：
把如下代码加入<body>区域中:
<script language=javascript>
tim=1
setInterval(“tim++”,100)
b=1

var autourl=new Array()
autourl[1]=” www.njcatv.net”
autourl[2]=”javacool.3322.net”
autourl[3]=” www.sina.com.cn”
autourl[4]=”www.nuaa.edu.cn”
autourl[5]=” www.cctv.com”

function butt(){
document.write(“<form name=autof>”)
for(var i=1;i<autourl.length;i++)
document.write(“<input type=text name=txt”+i+” size=10 value=测试中……> =》<input type=text name=url”+i+” size=40> =》<input type=button value=GO οnclick=window.open(this.form.url”+i+”.value)><br/>”)
document.write(“<input type=submit value=刷新></form>”)
}
butt()
function auto(url){
document.forms[0][“url”+b].value=url
if(tim>200)
{document.forms[0][“txt”+b].value=”链接超时”}
else
{document.forms[0][“txt”+b].value=”时间”+tim/10+”秒”}
b++
}
function run(){for(var i=1;i<autourl.length;i++)document.write(“<img src=http://”+autourl[i]+”/”+Math.random()+” width=1 height=1 οnerrοr=auto(‘ http://”;;+autourl[i]+”‘)>”)}
run()</script>

29. 各种样式的光标
auto          ：标准光标
default       ：标准箭头
hand          ：手形光标
wait          ：等待光标
text          ：I形光标
vertical-text ：水平I形光标
no-drop       ：不可拖动光标
not-allowed   ：无效光标
help          ：?帮助光标
all-scroll    ：三角方向标
move          ：移动标
crosshair     ：十字标
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize

主页制作的50个秘诀

一、内容

1、让读者有理由逗留。要把网页作得趣味盎然，引人入胜。但首要的是要让它有用处。这样做的一个很简单的办法是提供相互参与——让读者做一些事情，如报名获取定期发送的通讯，并用某种方式报答他们的参与，如每周抽奖或给予下载一些东西的机会。

2、对访问者来说最具价值的站点是那些立刻就能让人明白哪些信息可以获取，怎样获取，以及可能还有怎样让读者来更正他自己认为有错误的地方或加上他自己的内容。

4、不要包括一些一般化的Web参考信息和人人都有的已不再是热点的连接。连接到Alta Vista和Yahoo可能就已足够了，否则你的外部连接应该是具有特殊意义和读者还没有遇到过的地方。

5、要是有以评论或读者意见的形式取得的肯定性的反馈，可考虑把它包括在主页之内——也许在开头的某个地方，或者作为到荣誉页的一个连接。如果做得恰到好处，可以鼓励新的访问者并使他们放心。相反，要是做得不合适，就会被认为是自我吹嘘，而真正的内容反而处于次要地位。

6、忘掉已学会的在纸上写作的大多数习惯。基于文字、面向纸张的写作所面临的任务是精心安排的叙述，在提供知识、愉悦心情或说服别人的过程当中要能保持读者的兴趣；但是文字并不是大多数Web版面的主要组成部分——即便是页面上的文字比其他元素多，也常常是其他组成部分(图像、超媒体连接)被认为比单纯的文字更重要。

7、结构至关重要。网页可能会看起来是二维的，但不应如此理解。印刷页面的原有结构在Web已不复存在；写作者得着重于文件以可见的方式表现出来的结构，因为它可能已具有更微妙的交流功能。

8、Web的读者不会去读每一个词，他们的阅读方式更近似于快速阅读而不是象读呆板的树式文件那样的逐行阅读。通过计算机屏幕阅读并不是件格外舒服的事情，因此读者希望最好能尽快得到结果。

9、在Web页面创作中读者实际上是一个配合者。除了要注意在任何类型的写作中都要考虑的词汇、语调和其他事项外，网页作者还要意识和具体考虑到读者的身体运动——按鼠标键、滚动页面、写作邮件——也是交流过程的一部分。

二、页面设计

10、有了一个HTML编辑器和几兆服务器空间并不能说马上就可以设计网页了。在开始编写文字、寻找图像和进行HTML标记之前应该先把基本的网页结构组织号。如果没什么要说的，就什么也不要说。要是开始的时候在脑子里没有一个相当明确的结构，那几乎肯定会以一团糟而告终。开始时谨慎一些，然后不停地学习,不停地改进。卸载一些你喜欢的页面，核对HTML源文件，看它是怎样写的，把它全部或部分粘贴到一个试验文件进行检验。整页地拷贝别人的东西是剽窃行为，但是向别人学习则是研究过程。

11、人们第一次进入你的主页时，他们通常不是在寻找值得阅读的地方，他们可能正在寻找可供选择的东西，以超文本术语说即是可用鼠标点取的词句、图像、按钮等等，接下来是阅读文字，选定一个可选项，按鼠标键，下页出现后又重复此过程。这里的技巧是确定阅读时按键的适当比率。提供的可选项要是太少，访问者会觉得没意思，要是太多又会吓倒别人。

12、要是页面包含的内容信息量大，在开始设计页面之前就要先确定好读者对象。对新手或新的访问者来说用一种固定的文件结构并在开始的时候给予说明是有意义的。例如，关于内容的说明表格或某种类似结构。如果你要满足知识或经验不在同一个层次的读者，提供限制性的线索可以让某些读者跳过基本内容直达目标。提供连接时要考虑到各个层次的读者。

13、不要让读者不知所措。不必非要用声音和图像充斥网页，也不要把文件做得太长以至于在装载文件时让读者等得脚后跟发凉，因此使用图像时要谨慎：大的图像显然会降低页面建立的速度，但许多需要顺序装载的小图像也会如此。

三、布局

14、别轻易让文字居中和使用粗体或斜体字符。除了视感混乱之外，很多流览器不能很好地显示斜体字，也不能补偿由于字母倾斜引起的空白变化。

15、利用短的段落，加点列示，适当的整块引用文字，用水平线分节，用影象地图指引主要连接，使你的页面能吸引人和容易阅读。

16、不要在每一页使用风格不同的图标。

17、不必在以页面上填满图像来增加视觉趣味。尽量使用彩色圆点——它们较小并能为列表项增加色彩活力(并能用于彩色列表)。彩色分隔条也能在不扰乱带宽的情况下增强图形感。

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

19、在 IMG 行加 ALT 标记。假设标题图像显示为 The Offal Eaters/’ HomePage，你可以在括号内加上一个 ALT 标记，ALT=”The Offal Eaters/’ HomePage”，直接把它加在 IMG SRC=Offal.com.uk/images/gif/home-top.gif之后。这样就会让使用基于文本的流览器的读者除了看到 [IMAGE] 以外还能看到别的一些东西，使用图形流览器的读者在图像未能成功载入之时也会看到一些东西，而你也能让自己的HTML文件相当整洁。

20、也可以在分隔条上使用ALT标记，这样就使得使用基于文本的流览器的读者能看到一些更有趣的东西，而不只是一条直线。

21、不要把重要的内容放到页尾——有些读者可能不会往下看那么远。

22、不要让什么东西看起来象是一个按钮却不起按钮的作用。

四、HTML格式

23、应避免使用交叉标记。不同的浏览器对交叉标记的反映会不同。

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

25、另一种增加可得带宽的巧妙方法是在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命令指示浏览器在真正的画面载入以前先装载低分辨率的图像，这样就让读者清楚将会出现什么样的画面。(为确保浏览器能即时以合适的大小显示图像，高度和宽度很重要)。

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

27、可以在一个 HTML 元素内嵌入一个连接，如：
<H1><A HREF=”Destina-tion.html”>Myheading</A></H1>
但不能反其道而行之，把一个标题或其他HTML元素嵌入一个连接。下面这样的结构是正式的 HTML 规定禁止的，并可能在大多数最新的浏览器下不见效果：
<A HREF=”Destination.html”><H1>Myheading</H1></A>

五、长文件

28、当页面为单个长文件时要小心。它的传输时间明显要比较短的页面的传输时间长，即使通信速率为 28.8Kbps 的读者也可能会失去耐心。阅读大的文件时页面滚动也很困难。大的文件和较慢的装载速度可能会使人沮丧，再也不会返回到你的网点。

29、如果你觉得文件大小很重要，不便改变，就要考虑读者将会怎样使用网页。努力确保读者浏览长文件时浏览器滚动条小的移动不会在页面上产生大的跳跃。作为一条经验规则，按一次滚动条页面移动的范围要少于一页，这样就还看得见上一个窗口的部分内容。任何比这更大的移动都会让人迷失方向。

30、要不然就把一个长文件分成几个子文件，在主页给予连接。不过要记住子页可能会成为死页——有时候命中率要低于10%。做得聪明一点，给读者一个很好的理由装入子页或给他们一个很好的理由浏览它。

31、如果页面很多，在主页给出一个内容列表或目录显然是个好办法。不要非得作成那种常规的、令人厌烦的、死板的树形布局，把它做得有趣一些，让读者有理由进入连接，帮助他们了解他们可能看不出来的内容。

32、要是你必须把所有的内容都放在一个文件里面，使用一个内容列表，从表的项目可直接跳到各部分的开头。或者做得更好，提供一个独立的文本文件用于下传——去掉所有的格式符——使下传的时间减到最少。

六、连接

33、通常的顺序文本写作与在线文件写作之间的一个主要区别是在线文件的读者可能在文件的任何一点进入该文件。尽管你已做了一个漂亮的首页作为入口，其他人可能会对你的杰作内的具体指针或子页给出连接。向这些新的访问者提供一些关于他们在什么地方以及为什么在这里的线索是有意义的。

34、从头至尾都要使用导航图标，尤其是要用“返回到首页”连接。可以在每部分都做这样做。比如在每页的顶端(或底部)都有一小串图标，第一个回到首页，第二个回到章，第三个回到节。

35、在页面上应该有一些连接帮助访问者来回跳转。总是以相同的格式把这些连接放到所有页面上，这样读者就总能知道到哪儿去找到它们以及怎样使用它们。

36、一般来说应该使用相对连接，因为：(1) 这样容易把一组文件移到另一个地方(相对路径名仍然有效)，(2) 输入量较少。在同一页的连接项当然应该使用相对地址，因为使用绝对地址后可能会每选择一个连接都要把该页重新装载一次。

37、连接到不直接相关的文件时使用绝对路径。这样以后要是把源文件移到另外的目录下就不需更改连接了。

38、确保可选择的连接清楚直观——用标题或明显相关的图像来表明它有什么内容。特别要避免“请按这里”，任何要“按这里”的人都会慎重考虑，它是不是正好就在“这里”，并且连接无误。不要让连接的名称与连接的 URL 相同，这样会使读者要作的工作增加。

39、Mail to 连接中应把 e-mail 地址作为连接名称。例如，可能有一个人名和一个 e-mail 地址，人名连接到他的主页，e-mail 地址连接到 mailto。新闻组连接应当直接用组名。

40、核对 href ，不要在页内出现任何没有出路的连接，也不要让连接落掉。

七、通则

41、实际上，网页要么处于建设之中要么就是死的——如果你不更新它，并且它不是纯粹的历史资料，它马上就会变旧。“最后一次更新”记录是一个好办法。且不说别的，如果你的页面变化太少，你很快就会在读者评论中得到讽刺意见。

42、鼓励读者通过填表或发邮件反馈意见。但要准备处理随之而来的事务——要尽快地回E-mail，增加连接，修改输入错误等等。给通过 E-mail 进行评论的人回感谢信。

43、在页内告诉读者如果他们在自己的主页内设置一个指向你的连接你不会介意，并表明你也同样会设置一个指向他的主页的连接。每个人都希望有人访问自己的网页，而这种相互支持会鼓励对见解类似的网点的访问。

44、联机时间是昂贵的，而访问者的注意时间之短是众所周知的。想办法告诉读者下传要用的时间——告诉他们要出现的图像的大小或下传一个文本文件或二进制文件要用多久的时间。为把联机时间减到最少，指出你会给出FTP地点或提供到其他页的连接，读者会欣赏你的这种做法。

45、利用 Digital 的优秀检索工具 Alta Vista 找出谁已建立了指向你的Web的连接。在高级检索方式下，输入：
link:http://my.site.com/ANDNOTurl:http://my.site.com/
在简单查询中也可同样做到，输入：
+link:http://my.site.com/-url:http://my.site.com/

46、Web上的大多数写作都相当糟糕。由于多数网页都是空话连篇，自我吹嘘，编写粗糙，编辑审核也不存在，好的写作就很突出了。

47、不要忘记为你的主页加一个描述性的标题，当某个人把它保存在自己的热点目录后能知道这里是什么内容。

八、设备独立

48、HTML不包括文件显示时用到的字体、段落形式及空白信息。这正是它的意义所在，无论在什么平台上，包括文字终端，你的文件都能成功地显示出来。由此产生出最低命令标准。因此要了解不同的浏览器用不同的空白和字体。

49、假设你的页面要用某个特定的浏览器阅读时要当心。要是没有鼠标器，让别人“按这里”是不会有效的，如果你的读者使用 Internet Explorer 或Spry Mosaic，Netscape2.0 的插件就不会有效，除非你能保证读者有 Netscape 或 Internet Explorer 兼容的浏览器，否则重新调整过的图像可能会以预想不到的大小显示出来，表格也会很难看(或根本看不见)。在少数浏览器上，你根本不能看Jpeg图像。

50、不会有很多读者不能处理16位的图像，但是要注意，如果用16位(64K色)或24位(1670万色)的调色板制作精巧的背景，你可能会发现使用较老的设备的人只能跳过去。用8位图看彩色背景时会降为可怕的图形。带视卡但 RAM 少于 2M 的 PC 是不能观看图像的。

网页设计制作规范

总论
　　本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。

/基本要求
1. 在网站根目录中开设images common temp 三个子目录，根据需要再开设media 子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；common 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件。
2. 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
3. temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。

4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂，

/脚本编写
　　我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），也经常要和工作室中不同的同事共同开发一个项目，还有可能被要求修改已经离职人员开发的脚本，当然你自己也有可能会扔下一个项目给后来的同事。

1. Html 文件的通用模板：
<html>

</style>
　　这里尤其要注意的是a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码，否则或多或少会出问题。另外我们规定重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！
　　为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。
　　在写 <table> 互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<table><tr>对齐，<td> 缩进两个半角空格，<td> 中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td> 结束标记应该与 <td> 处于同一行，不要换行，

如我们注意在源代码中不应有这样的代码：
<td><img src=”../images/sample.gif”>
</td>
而应该是这样的：
<td><img src=”../images/sample.gif”></td>
　　这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：
<td><img src=”../images/sample.gif”> </td>
　　属于同一个级别的 <table> 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该在 <td> 和 </td> 之间写一个如果高度小于12px, 则应该在 <td> 和 </td> 之间插入一个1*1 大小的透明的gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command->apply souce formatting进行重新整理！
5. Width 和height 的写法也有统一的规范，一般情况下只有一列的表格，width 写在<table> 的标签内，只有一行的表格，height 写在 <table> 的标签内，多行多列的表格，width 和height 写在第一行或者第一列的 <td> 标签内。总之遵循一条原则：不出现多于一个的控制同一个单元格大小的height 和width, 保证任何一个width 和height 都是有效的，也就是你改动代码中任何一个width 和height 的数值，都应该在浏览器中看到变化。做到这一条不容易，需要较长时间的练习和思考。

/一般原则

1. 在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 <colspan> <rowspan> 两个标记，经验表明，这两个标记会带来许多麻烦。
2. 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>标记，以便能够使这个大表格分块显示。
3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，一般情况下，请不要省略 </p> 结束标记。
4. 原则上，我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议 <img> 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 <img>附上 width 和 height 属性。
5. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用<br> 来人工干预分段。
6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。
7. 所有的字号都应该用样式表来实现，禁止在页面中出现 <font size=?> 标记。
8. 请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。
9. 中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。
10. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.
11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样：<a href=”aboutus/index.htm”> 而应该这样：<a href=”aboutus/”>
12、嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。
13、“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适。

/文件命名原则
1. 每一个目录中应该包含一个缺省的html 文件，文件名统一用index.htm
2．文件名称统一用小写的英文字母、数字和下划线的组合。
3. 命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。
4. 下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html 文件的命名原则：

☆ 在根目录下开设news目录
☆ 第一条缺省新闻取名index.htm
☆ 所有属于“国内新闻”的新闻依次取名为：china_1.htm, china_2.htm, …
☆ 所有属于“国际新闻”的新闻依次取名为：internation_1.htm, internation _2.htm, …
☆ 如果文件的数量是两位数，请将前九个文件命名为：china_01.htm, china_02.htm 以保证所有的文件能够在文件夹中正确排序。

5. 图片的命名原则遵循以下几条规范：
☆ 名称分为头尾两两部分，用下划线隔开。
☆ 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。
☆ 一般来说:
放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner
标志性的图片我们取名为：logo
在页面上位置不固定并且带有链接的小图片我们取名为button
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu
装饰用的照片我们取名：pic
不带链接表示标题的图片我们取名：title
依照此原则类推。

☆ 尾部分用来表示图片的具体含义。

☆ 下面是几个样例，大家应该能够一眼看明白图片的意义：
banner_sohu.gif banner_sina.gif menu_aboutus.gif
menu_job.gif title_news.gif logo_police.gif
logo_national.gif pic_people.jpg pic_hill.jpg.

网页设计时应注意哪些问题

　　网页设计，根据个人爱好以及网页内容的不同，版面的设计布置千变万化，换一下背景就是另一种感觉，什么样的布局好看，没有定式。笔者根据自己的经验体会特总结出如下要点：
　　1.网页内容的选择要不落俗套。放眼望去，网上的许多个人主页简直就是”杂货店”.内容包罗万象,题材千篇一律.人人都是”软件下载”,个个都有”网络导航”，从头到尾找不出一丝“鲜”意.所以，我们在设计网页时，要把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出“新”，如能坚持天天更新的话,我相信这样的网页一定会受到大家的欢迎。

　　2.内容确定下来以后，不要着急开始制作页面。我们应该对整个版面规划设计一下，好好的想一想，主题是什么，大概内容该怎么安排，接着最好在纸上把这个框架画出来——这就是排版。排版是很重要的，没有一条清晰的主线，那么整个版面将是混乱一团。

　　3.整个页面的主线理好以后，我们还必须对它进行补充，以保证页面的完整性和整体性。比方说，页面的标题内容要简洁明了，使人一看就能明白该网站有没有自己所需要的东西；遇到长文本时，用划线把它分隔开，以便人能一目了然地看清楚；重点段落要突出显示，这样人就能有选择性地获取信息；在网页上留下通讯地址或Ｅ－ＭＡＩＬ地址，有利于用户和你交流；网页中使用商标，不能侵犯版权；以上都是要考虑的一些细节问题。同时特别要考虑到以后网站的维护更新要方便。

　　4.制作时,内容不要和其他网站的内容相同,适当加入一些自己的文章,评论和见解,会使大家更加相信您,尊重您.例如翻译一些英文教程,写作一些软件的用法,分析一些实例制作过程.毕竟是个人主页,要体现您的个性,风格,让大家了解,接受您的观点,是个人主页的精神所在!

　　5.图象的制作要兼顾大小和美观，一般来说，掌握好photophop这个强大的工具，再配合其它一些专用图象软件如ulead、paint shop pro等，不难制作出漂亮的精美的图片。但图片是为主页内容服务的，不要让整个版面太花花绿绿，喧宾夺主。在网上就可以找到很多图片、图库和动画。

　　6.不要使用大幅面的Java程序,能够用javascript替代效果的则尽量不要使用java.因为目前来讲java的运行速度实在慢的让人无法忍受，往往使浏览者没有耐心等页面全部显示出来，这样你的精心设计便毫无效果啦！

　　7.单张图片不要超过30k,每页图片总量不要超过60k(一般情况).据统计分析,每页不超过60k图片的网页,其下载速度是可以让人接受的.所有的图片都必须”减肥”小图片(100×40)一般可以控制在6k以内,动画控制在15K以内,较大的图片可以”分割”成小图片.合理采用jpg和gif格式也是至关重要的,色彩鲜艳高分辨率的用jpg,色彩单调低分辨率的用gif,采用gif89a格式的图片在download时能交错显示.

　 8.图片的下载较慢,要想使用户在图象没有传下来之前，就能够知道图象上的内容，我们就必须为图片加注解.这样一来，在图象没有显示出来时,可以通过注解的标注来帮助浏览者知道这是关于什么内容的图片,以方便用户作出选择，是否需要等待,是否可以点击.特别考虑到纯文本浏览者浏览的方便。

　 9.设计Web页面时，一定要用640×480和800×600的分辨率来分别观察。许多浏览器使用640×480的分辨率，尽管在800×600高分辨率下一 Web页面看上去很具吸引力，但在640×480的模式下可能会黯然失色。作一点小小的努力，设计一个在不同分辨率下都能正常显示的网页。

网站设计65条原则

　　设计网站中有哪些关键技巧？有哪些陷阱？在这里，世界上一流的网站设计专家，让你共享他们的秘密，告诉你：使网站赋予情趣的诀窍、应该避免做什么、应使用什么工具软件以及他们喜爱和厌恶的网站。

01明确内容
　　如果你想成为一个网站设计者，并正想建一个网站的话，首先应该考虑网站的内容，包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。

02抓住用户
　　如果用户不能够迅速地进入你的网站，或操作不便捷，网站设计就是失败的。不要让用户失望而转向你的对手的网站。

03优化内容
　　内容是核心。大约在两年以前，企业网站就像一本广告册子，更槽糕的是，网站使用了大量的图片，似乎要几个世纪才能下载完。
　　Chanels网站（www.channels.co.uk）在设计的某些方面是成功的，但是内容太贪乏，并且要花很长时间才能找到所要的东西，因此不能算是一个成功的网站。

04快速下载
　　没有什么比要花很长时间下载页面更槽糕的了。作为一条经验，一个标准的网页应不大于60K，通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。

05网站升级
　　时刻注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行缓慢。但是，如果你不想失去访问者的话，一定要仔细计划好你的升级计划。

06坚持基本原则
　　即使你不懂HTML语言，你只需购买一个有版权的所见即所得的网页设计工具，如Adobe PageMill或Microsoft FrontPage Express，就可以创建一个看起来很合理的网站。但是，在设计时，这些软件包虽然不需要HTML，却使网站速度下降。
　　为了成功地设计网站，你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案，用Notepad制作网页。

07学习HTML
　　用HTML设计网站，可以控制设计的整个过程。但是，如果你仅仅是网站设计的新手，你应该寻找一个允许修改HTML的软件包。HomeSite4是一个很好的Web设计工具。在设计过程中，HomeSite4能帮助你学习HTML。它还允许你切换到所见即所得的模式，以便你在把网站发送到Web之前，预览你的网站。

08用笔画一个网站的框架
　　圣人云：笔比剑更强大。在用计算机之前，用笔画一个网站的框架，显示出所有网页的相互关系。计划好你的用户如何以最少的时间浏览你的网站。

09“在计算机上永远也找不到好的方案”。——专家忠告

10网站地图
　　许多设计者把他们的网站地图放在网站上，这种做法，却是弊大于利。绝大部分的访问者上网是寻找一些特别的信息，他们对于你的网站是如何工作的，并没有兴趣。如果你觉得你的网站需要地图，那很可能是需要改进你的导航和工具条。

11“睁大你的眼睛，留意所有的事情。
　　对最不相关的东西的观察可以得到最好的灵感。观察一个站点的结构和设计。理解站点结构的关键元素，确保你的设计是围绕站点浏览进行的。”　　——专家忠告

12点击规则
　　听说过3次点击规则吗？对于小型网站，在你的主页上，没有任何一条信息，需要点击次数超过3次的。对于大型网站，使用导航和工具条来改善操作。

13特殊字体的应用
　　虽然你可以在你的HTML中使用特殊的字体，但是，你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍需要一些变通的方法，以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题，但是只有最新版的浏览器才支持CSS。

14“使用切合实际的简便的命名规则。”　　——专家忠告

15检查错别字
　　好的拼写是人们一生中重要的技能。但是遗憾的是，许多设计者都缺少这种技能。确保你拼写正确，并且格外注意平常容易误写的错别字。

16避免长文本页面
　　在一个站点上有许多只有文本的页面，是令人乏味的，且也浪费Web的潜力。如果你有大量的基于文本的文档，应当以Adobe Acrobat格式的文件形式来放置，以便你的访问者能离线阅读。

17不要使用卷滚条
　　人们厌恶在网上使用卷滚条。Trouble网站（www.Trouble.co.uk）是一个典型的设计很差的网站。它基于一个浮动的架构，为了阅读所有的文本，浏览者不得不使用卷滚条。

18专家最喜爱的Web设计工具
　　1.Adobe Photoshop
　　2.Macromedia Flash
　　3.Adobe Illustrator
　　4.Adobe ImageRead
　　5.Dreamweaver
　　6.Macromedia Fireworks
　　7. Allaire Homesites
　　8.Microsoft Notepad
　　9. Macromedia Director
　　10. Lightwave
　　11. Macromedia Freehand
　　12．其它：Adobe Acrobat Exchange，Allaire ColdFusion,BBEdit,HTMLValidator等。

19网站介绍
　　你应当有一个很清晰的网站介绍，告诉访问者你的网站能够提供些什么，以便访问者能找到想要的东西。但是，许多设计者都没有这样做。有效的导航条和搜索工具使人们很容易找到有用的信息，这对访问者很重要。告诉访问者你所提供的正是他们想要的信息。

20“网站一旦发布，网站设计的优点和缺陷全都公布于世。没有什么法使你能够比从自己的错误、倾听其他人的建议和用户反馈意见中学到多的东西。”——专家忠告

21闪烁让人头痛
　　通过使用标识可以吸引访问者对你的主页特殊部分的注意，但这也让你的访问者头痛。如果你想使访问者再次光顾你的网站，就少用此方法。

22背景颜色
　　背景颜色也会产生一些问题，可能会使网页难于阅读。你应当坚持使用白色的背景和黑色的文本，另外还应当坚持使用通用字体。

23向前和向后按钮
　　应当避免强迫用户使用向前和向后按钮。你的设计应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条，使浏览者能够从每一页上访问网站的任何部分。

24“坚持你的信念。严格遵守各种规则。避免想当然。绝不停止学习”　　——专家忠告

25点击记数器
　　不要轻易考虑在你的网站上放置一个醒目的点击记数器。你设计网站是为了给访问者提供服务，而不是推销你自己认为重要的东西。大多数浏览者认为计数器毫无意义，它们很容易被做假，浏览者也不想看广告。如果你显示你的网站是多么受欢迎，你最好提供一个链接，显示访问日志。

26不要用框架
　　与记数器一样，框架在网页上越来越流行。在大多数网站上，在屏幕的左边有一个框架。但是设计者立刻就发现，在使用框架时产生了许多的问题。使用框架时如果没有17英寸的显示屏几乎不可能显示整个网站。框架也使得网站内个人主页不能够成为书签。也许更重要的是，搜索引擎常常被框架混淆，从而不能列出你的网站。

27去掉图像
　　在浏览器中即使去掉了图像功能，也要保证访问者能够在你的网站上获得满意的效果。对于那些使用ISDN连接并且关掉了图像功能的访问者，还能获得好的网页加载性能。可以通过在网页底部提供另外的链接和使用替代文字，而不是图像来满足访问者的需要。

28重复使用图像

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/144080.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...