电脑报精华 · 2001 年 · wl045

网上信息安全防范技巧

(登科)·约 6,869 字·1 张配图

网页技巧集锦

一、一个连接同时改变多个Frame
1.有一个简单的方法就是用“TARGET=_top”来链接到一个新的frameset网页，任何framesets中共有的文件或图片将可快速载入。
2.你可以使用script来改变所选择的frames以及（选择性的）做出一按下就有某种功能的效果，如下：　
<A HREF="" name="ClickMe">Click me!</A>
<SCRIPT Language = "VBScript">
<!- -SUB ClickMe_OnClick()
parent.FrameOne.location.href="my_gif.gif"
parent.FrameTwo.location.href="my_htm.htm"
END SUB- ->
</SCRIPT>
二、网页自动刷新
通常HTML文件需要浏览者来选择浏览的内容，如果想自动更换显示的内容一般要用到JavaScript、JAVA或CGI等方法来完成。
其实可以用META实现自动更换显示内容，更换的时间和文件都可以自行设定。语句如下：
<HEAD>
<TITLE>刷新内容</TITLE>
<META HTTP-EQUIV="REFRESH" CONTENT="x; URL=*.*">
</HEAD>
x是刷新的时间，单位是秒。*.*是刷新的文件。
如将一个显示欢迎信息的图像：welcome.gif存放在与HTML文档同一个目录中，则下面的HTML文件在浏览器中显示该图像，10秒钟后将自动跳转到电脑报出版部的主页：http://www.itbook.com.cn
< HTML >
< HEAD >
< TITLE >WELCOME< /TITLE >
< meta http-equiv="Refresh" content="10; url=http://www.itbook.com.cn" >
< /HEAD >
< body >
<img SRC="welcome.gif">
</body>
< /HTML >
多个内容相似而背景不同的页面，让其每隔一定时间自动相互跳转。
三、倒计时
在澳门回归前，我做了一个倒计时牌，当然不是真的了。
在<head></head>之间插入：
<script LANGUAGE="JavaScript">
//澳门回归倒计时代码
var Temp;
var timerID = null;
var timerRunning = false;
function showtime() {
now = new Date();
var CurHour = now.getHours();
var CurMinute = now.getMinutes();
var CurSecond = now.getSeconds();
var ts=parseInt((945619200000-now.getTime())/1000);
var Dateleft =parseInt(ts/86400);
now = null;
Hourleft = 23 - CurHour
Minuteleft = 59 - CurMinute
Secondleft = 59 - CurSecond
if (Dateleft!=1) {var ds="s"} else {var ds=""}
if (Hourleft!=1) {var hs="s"} else {var hs=""}
if (Minuteleft!=1) {var mis="s"} else {var mis=""}
if (Secondleft!=1) {var ss="s"} else {var ss=""}
Temp=Dateleft+“天”+Hourleft+“小时”+Minuteleft+“分钟”+Secondleft+“秒”。
document.frm.left.value=Temp;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
var timerID = null;
var timerRunning = false;
function stopclock() {
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function macauclock() {
stopclock();
showtime();
}
</script>
将body语句改为：
<body Onload="macauclock()">
在<body>和</body>之间插入：
<td width="53%" height="16"><table border="1" width="100%">
<tr>
<td width="100%"><font color="#008000">距</font><font color="#FF0000">12月20日</font><font color="#008000">澳门回归祖国还有</font></td>
</tr>
<tr>
<td width="100%"><form name="frm">
<div align="center"><div align="center"><center><p><input type="textarea" name="left" size="22" value></p>
</center></div></div>
</form>
四、颜色搭配技巧
刚刚做网页的朋友可能更习惯于用一些漂亮的图片做自己网页的背景，但是，更多地浏览一下大型商业网站，你会发现它们更多运用的是白色、蓝色、黄色或其它颜色的搭配，使得网页显得典雅、温馨又不失活泼，更重要的是，这种做法使浏览者大大加快了网页的加载速度，配合网站丰富的内容，使整个网站更具有吸引力。
那么如何搭配颜色才能让自己的主页更加绚丽多彩呢？我们常常遇到的问题其实主要是背景颜色和字体颜色的搭配问题：达到既不显得呆板，又不至于过于亮丽而造成过强刺激的视觉效果。一般说来，普通的底色应柔和些，素一些，淡一些，配上黑字，读起来自然、流畅。而为了追求醒目的视觉效果（如标题），可以使用较深的颜色，然后配上对比鲜明的字体如白字、黄字或蓝字。其实底色与字体的合理搭配要胜过用背景图画，因为背景图画太花哨，有种不安静的感觉。而纯色给人感觉较好，尤其是图片看多了以后!
下面是网页对底色和字体搭配的经典颜色，这些颜色可以做正文底色，也可做标题底色，再配上不同颜色的字体，就有比较不错的效果。希望能对大家有所帮助。
BGCOLOR=“＃f1fafa”//做正文的背景色好，淡雅。
BGCOLOR=“＃E8FFE8”//做标题的背景色好，与上面的颜色搭配很协调。
这两种颜色可以配黑字或FONT COLOR=“＃800080”
bgcolor=“＃E8E8FF”//做正文的背景色好，字体配黑色较好。
bgcolor=“＃8080C0”//上配黄色白色字体较好
bgcolor=“＃E8D098”//上搭配浅蓝色或蓝色字体较好
bgcolor=“＃EFEFDA”//上搭配浅蓝色或红色字体较好
bgcolor=“＃F2F1D7”//配黑字素雅,红字醒目
bgcolor=“＃336699”//配白字做标题较好看
bgcolor=“＃6699CC”和bgcolor=“＃479AC7”和bgcolor=“＃66CCCC”和bgcolor=“＃00B271”和bgcolor=“＃B45B3E”//配白字都较好看，可做标题
bgcolor=“＃FBF8EA”和bgcolor=“＃D5F3F4”和bgcolor=“＃D7FFF0”和bgcolor=“＃F0DAD2”和bgcolor=“＃DDF3FF”//配黑字都较好看一般做正文以上配色方案都比较淡雅。
浅绿底黑字，或白底蓝字都很醒目，但前者突出背景，后者突出前景。红底白字醒目，较深底色配黄字有效果。
五、图形处理
随着Internet的不断发展壮大，Internet上的网页制作成了一门新兴科学。网页中不可避免地包含着一定数量的图形，因为较多的图像在增加吸引力的同时能给访问者提供更多更直接的信息，同时图像也较少受计算机平台、地域和语种的限制，能使网页更多地显示出制作者的创造力。
虽然图像具有上述优势，但是由于图像是在Internet网络上传送，而Internet线路目前的传输速率还不理想，特别是国内大多数用户是通过慢速拨号连入本地的ISP,因此图像的大小在很大程度上影响着网页的下载时间，制作不好的图像文件下载时更会浪费Internet的带宽。
由此可见我们在制作网页时优化图像的大小是非常关键的，优化后的图像也许仅仅减少了几千个字节，但当页面中不只是一幅图像，或不止一个用户且不止一次地访问该页面时，节省的下载时间和带宽将是巨大的。下面我们就浅谈一下制作网页时几种用来优化图形的常用格式。
1.GIF格式
GIF(Graphic Interchange Format图形互换格式)是为跨平台消费市场开发的，当时消费者还没有机会使用“高档”的图形卡，大多数计算机的图形颜色比256色还少，所以256色被作为可显示的最高数目。GIF也是Internet上使用最早、应用最广泛的图像格式。GIF格式储存8位／点至l位／点的图像。其原理是减少每点的存储位数以减小图像文件的大小，这就是我们通常所说的减色抖动dithering。准确地说，GIF减少了图像调色板中的色彩数量，从而在存储时达到减小图像文件大小的目的。该调色板通常并非Windows本身提供的标准凋色板，而是图像优化处理后的调色板。
现在假定我们制作一幅全色图像（用photoshop的术语就是“RGB模式”），原图为120K的“PSD格式”，准备作成一份GIF的文件之前，必须将它用一个相关的颜色图转换成为一个受限制的8位图像（用photoshop的术语说就是工作于“索引颜色模式”），在保持图像尺寸不变的情况下减少图像中每点的色彩数可以减少图像文件的大小。
尽管支持的颜色数目较少，GIF格式仍然因拥有一些在Ｗeb上使用很广泛的特殊效果而留存至今。如：交错效果、透明颜色效果以及GIF89a(动画)效果。
(1）交错
交错即图像下载时从模糊逐渐到清晰的过程。
当你查看一幅本地系统的图像时，通常图像都是一下子就全部显示出来而与用什么方式储存关系不大，但是在Internet网络上就不一样，当通过Internet慢慢地下载一个包括图像的文件，浏览器能边下载边显示收到的内容，此时就可以看到图像文件显示的顺序，GIF默认的存储图像顺序为从上到下、从左到右。当下载到一半时，只显示上半部图像。如果下载得慢而下半部图像是关键部位，则必须等待下半部图像的出现，这对用户来说是相当烦人的。
GIF允许图像进行交错处理，此时不再严格地从上到下、一行像素一行像素地显示，而且每隔八行处理一次，然后再填补其间的空隙直到清晰为止。下载过程好比是一幅粗线条的素描变成色彩分明的图像，交错后的GIF文件容量并不变化。这种效果处理主要用于处理一些尺寸比较大的图像。
(2）GIF89a
GIF89a提供的动画实际上由多幅GIF图像组成，浏览器软件以每幅GIF图像定义的时间间隔顺序显示，形成动画效果。
我们可以把动画分成以下三种常见的类型:
第一种类型是由多幅内容不相干但具有相同尺寸的GIF图像文件组成的动画文件，在质量允许的情况下，采用上述方法把组成GIF89a动画的每幅GIF文件的色彩数尽可能减少，便可以做到缩小文件。
第二种类型，我们仔细观察可以发现大部分动画的第二幅图像只是在第一幅图像的某些区域有一定的变化，因此在第二幅图像中可以只保存不相同区域的内容，这样可以极大地缩小文件。
第三种类型是有固定背景的动画，这样只须保存第二幅图像的前景并设背景为透明就可以了。
对于第二种和第三种类型我们必须保证组成动画的每幅GIF图像都使用相同的调色板进行减色抖动，同时第二幅图像定位必须准确。
如果我们使用一幅200×100(宽×高)点阵作背景，用上面的三种方法分别制作一幅类似于霓虹灯效果的GIF89a动画交替显示“图像”两个字，我们将会发现三种方法的显示效果完全一样，但用第三种方法优化的文件比用第一种方法优化的小50%。
2.JPEG格式
由Joint Photographic Experts Group提出并因此而得名，是在Internet上被广泛支持的图像格式，JPEG支持16M色彩也就是通常所说的24位颜色或真彩色，其典型的压缩比为4:1。由于人类眼睛并不能看出存储在一个全图像文件中的全部信息，可以去掉图像中的某些细节，并对图像中某些相同的色彩进行压缩。JPEG是一种以损失质量为代价的压缩方式，压缩比越高，图像质量损失越大，适用于一些色彩比较丰富的照片以及24位图像。
JPEG只能对具有连续色调或连续灰阶的24位图像进行压缩，对由8位转化成24位的图像没有优势。原因在于8位色彩的图像中相邻点的颜色变化比24位大，JPEG对这类非连续色调图像的压缩将造成一种既占空间又损失图像质量的结果，在这种情况下JPEG的压缩效果可能比Gif更差。
3.GIF与JPEG选择
（1）GIF和JPEG虽然能使图像文件变小，但是对图像的质量均有一定的影响，因此我们在处理图像GIF和JPEG格式之前最好先把图像原件备份。同时JPEG是一种积累压缩的方法，所以我们应尽可能地从原图一次压缩，而不要对已经压缩过的图像再进行压缩。
(2)在GIF和JPEG之间进行选择时，要记住你的目标是在质量可以接受的情况下使图像的容量变为最小，通常是单调的颜色表示你能够大幅度减少颜色的数目，也就是说可以考虑使用GIF压缩。一条用黑与白绘制的线，最适合使用GIF，因为总的颜色数目可以减少。用JPEG处理照片（包括绘画的照片）比较合适，因为它们的阴影与色彩中包含有许多缓和的变化。高对比的“艺术”照片则例外，因为它们里面有单调区域，所以适合用GIF处理。
六、用表格制作突起的按钮效果

看见上面的按钮了吗？其实不是一个真正的按钮“button”，也不是一张图片，这是实实在在的一个表格。
它的实现方法很简单，利用了表格的两个参数：borderColorDark和borderColorLight，分别设定表格的右下和左上四条边框的颜色。利用眼睛的错觉，让你看起来象立体按钮。代码是：
<table border="1" width="100%" cellspacing="0">
<tr>
<td bgColor="#cc3300" borderColorDark="#ff3300" borderColorLight="#990000" width="100%"><p
align="center"><font face="Arial, Helvetica, sans-serif" size="-1"><b>This is table button</b></font></td>
</tr>
</table>
不过只对IE浏览器有效果。
七、中文网页中段落缩进
我们在制作有关文档资料内容的网页时，如果是英文书写格式，段落一般不缩进；如果是中文格式则需要缩进，即段落开头要求空两个汉字的位置。有以下几种方法。
1.预格式(PRE)
用预格式编写的源文件，在显示时照源文件中的排版字样显示，空行和空格都能很清楚地区别开来。如源文件为：
<PRE>
－－预格式显示……
</PRE>
网页显示时在“预格式显示”的前面就会空两个汉字的位置。
2.插入点图或图形
点图是指图片中只有一个或几个像素点，用肉眼看不出来。当我们在段落开头插入这样一个点图，并用HSPACE和VSPACE属性来调整点图的左右和上下的空格，以达到段落缩进。
同样可以插入图形，只不过该图形的颜色需要用网页背景色，这种方式用IMG的WIDTH和HEIGHT属性调整图形大小，以达到缩进。
3.插入没有边框和内容的表格
这种方式与上述的插入图形方式类似，该表格没有边框和内容，是空表格。用TABLE的WIDTH和HEIGHT属性调整表格大小适合缩进的需要。
4.插入特殊的空格字符“&nbsp”
“＆nbsp”代表非显示空格字符。插入若干个“＆nbsp”字符，中间用分号(;)或者空格隔开，也可以实现中文段落缩进。不过在Netscape3.01中只能写小写字母，而在IE中大小写都可以。
(登科)