网页 - 第2页 - 学习日记

JavaScript精简学习4：表单（转帖）

转自：http://www.dvbbs.net/tech/js/2006041949627.asp

JavaScript精简学习4：表单

作者：来源：

阅读 156 人次 , 2006-4-19 16:47:00

43 表单构成

1: <form method=”post” action=”target.html” name=”thisForm”>

2: <input type=”text” name=”myText”>

3: <select name=”mySelect”>

4: <option value=”1”>First Choice</option>

5: <option value=”2”>Second Choice</option>

6: </select>

7: <br>

8: <input type=”submit” value=”Submit Me”>

9: </form>

44 访问表单中的文本框内容

1: <form name=”myForm”>

2: <input type=”text” name=”myText”>

3: </form>

4: <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>

45 动态复制文本框内容

1: <form name=”myForm”>

2: Enter some Text: <input type=”text” name=”myText”><br>

3: Copy Text: <input type=”text” name=”copyText”>

4: </form>

5: <a href=”#” onClick=”document.myForm.copyText.value =

6: document.myForm.myText.value;”>Copy Text Field</a>

46 侦测文本框的变化

1: <form name=”myForm”>

2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>

3: </form>

47 访问选中的Select

1: <form name=”myForm”>

2: <select name=”mySelect”>

3: <option value=”First Choice”>1</option>

4: <option value=”Second Choice”>2</option>

5: <option value=”Third Choice”>3</option>

6: </select>

7: </form>

8: <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>

48 动态增加Select项

1: <form name=”myForm”>

2: <select name=”mySelect”>

3: <option value=”First Choice”>1</option>

4: <option value=”Second Choice”>2</option>

5: </select>

6: </form>

7: <script language=”JavaScript”>

8: document.myForm.mySelect.length++;

9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;

10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;

11: </script>

49 验证表单字段

1: <script language=”JavaScript”>

2: function checkField(field) {

3: if (field.value == “”) {

4: window.alert(“You must enter a value in the field”);

5: field.focus();

6: }

7: }

8: </script>

9: <form name=”myForm” action=”target.html”>

10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>

11: <br><input type=”submit”>

12: </form>

50 验证Select项

1: function checkList(selection) {

2: if (selection.length == 0) {

3: window.alert(“You must make a selection from the list.”);

4: return false;

5: }

6: return true;

7: }

51 动态改变表单的action

1: <form name=”myForm” action=”login.html”>

2: Username: <input type=”text” name=”username”><br>

3: Password: <input type=”password” name=”password”><br>

4: <input type=”button” value=”Login” onClick=”this.form.submit();”>

5: <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>

6: <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>

7: </form>

52 使用图像按钮

1: <form name=”myForm” action=”login.html”>

2: Username: <input type=”text” name=”username”><br>

3: Password: <input type=”password”name=”password”><br>

4: <input type=”image” src=”login.gif” value=”Login”>

5: </form>

6:

53 表单数据的加密

1: <SCRIPT LANGUAGE='JavaScript'>

2: 

17: </SCRIPT>

18: <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>

19: Enter Some Text: <input type=text name=myField><input type=submit>

20: </form>

上面的encryptForm方法把表单中的数据转换为编码，在提交表单之前完成了简单的表单数据加密～

运用javascript制作弹出式表单获取用户输入数据及验证的

有两个主题：

一是接收数据：The JavaScript prompt - Getting user input；

二是验证数据：Create JavaScript Input Text Validation Fields

以"javascript""input"为关健字在google中搜索到这个方法如下：

http://www.webdevelopersnotes.com/tutorials/javascript/javascript_prompt_visitor_inputs.php3

The JavaScript prompt - Getting user input

The JavaScript prompt - Getting user inputGo to The JavaScript prompt - Getting user inputJavaScript TutorialGo to JavaScript TutorialWeb Development TutorialsGo to Web Development TutorialsHomepage

The JavaScript prompt - Getting user input

Welcome mdx

In this session we'll look at the JavaScript prompt. The prompt() is a method of the window object, just like alert() or confirm().

The format for prompt() is similar to alert() or confirm() except for one addition.

prompt("Message", "default value in the text field");

In addition to the "OK" and "Cancel" buttons, a prompt box also has a text field that is employed for gathering visitor input. JavaScript lets you specify a default text for this text field. This is optional, that is you can construct a prompt() without specifing the default text. In such cases, JavaScript displays an ugly "undefined" value in the text field.

The information submitted by the visitor from prompt() can be stored in a variable, just as we had stored the value returned by confirm().

var name = prompt("What is your name", "Type you name here");

Once we have the value, we can write a customized greeting using document.write() as I have done or display an alert box.

var name = prompt("What is your name", "Type you name here");

alert("Hi " + name + "\nHope you are enjoying JavaScript!");

Click here to test the code.

It's important to remember that the value returned by prompt() and subsequently stored in a variable will always be a string data type. This is fine if you are dealing with text, but might present problems to the code if you plan to receive numeric data through prompt(). Javascript provides two functions to convert this string value to a numeric data type; parseInt() and parseFloat().

The parseInt() converts a string to an integer value while parseFloat() parses the string converting it to a floating point number.

Note: An integer is a whole number without any fractional part while floating-point numbers have a decimal part.

Now let's write a small script that takes a number from the visitor, checks whether its odd or even and displays the result through an alert box.

var n = prompt("Check your number", "Type your number here");

n = parseInt(n);

if (n == 0)

   {

   alert("The number is zero");

   }

else if (n%2)

   {

   alert("The number is odd");

   }

else

   {

   alert("The number is even");

   }

Click here to test the code

When parseInt() or parseFloat() encounter alphabet or any non-digit character, parsing (conversion) stops and the functions return NaN, which means Not a Number. The only way to test for NaN is to use isNaN() function.

We can make the code above more user-friendly by introducing one more if statement that checks for valid input.

Click here to test the code.

Assignments

   1. With which object would you associate the prompt() method?

   2. Prompt() takes two arguments. Where are they displayed?

   3. The input from a prompt() is of which data type?

   4. What is the function of parseFloat() and parseInt()?

   5. What will be result if we send "abcd" through a prompt() input and pass it through parseInt()?

   6. What is the use of isNaN()?

如这是测试页面：

<HTML>

<HEAD>

<TITLE>JavaScript</TITLE>

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">



var name = prompt("What is your name", "Type you name here");

alert("Hi " + name + "\nHope you are enjoying JavaScript!");

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

在javascript进行数据有效性的验证：

http://www.codeave.com/javascript/code.asp?u_log=100

Create JavaScript Input Text Validation Fields

Limit the amount of traffic and empty form fields submitted to your site by stopping blank user input before it leaves the client. Server side form validation isn’t always the best answer. Whenever possible it is best to eliminate as much unwanted input as possible. The following script writer aids in that goal. Simply enter the number of text input fields that you need to ensure are not containing blank information, the names of the elements and copy the output code into your document. (Note: Blanks will be converted to the underscore and the use of special characters or numerics as field names will mess up your resultant output)

示例代码：

if (form.password.value == "")

{

alert("Please fill in the password field.");

form.password.focus();

return (false);

}

return (true);

}

//-->

</script>

<form method="post" action="where_ever_you_want.htm" onsubmit="return Blank_TextField_Validator(this)">

<p>

password

<br>

<input type="text" name="password" >

<br>

用DIV标签和CSS技术进行HTML网页设计（转帖2篇）

转自：http://www.blogjava.net/weidy/archive/2006/06/01/49766.html，标题有改变。

不能再等了，快把Table换成DIV吧

用了四五年的Table排版，没觉得有什么不好，这一段时间迷上了Dojo,才发现如今已经到了不用DIV不行的年代。还是赶紧跟上潮流，把Table换成DIV吧! 改了几个页面，发现比想象的简单，更是尝到了用div的甜头。share自己一点浅浅的经验：

1. 先上网搜一下找点前人经验。推荐两篇好文：

http://www.glish.com/css/ "CSS Layout Techniques: for Fun and Profit"

http://www.alistapart.com/articles/practicalcss "Practical CSS Layout Tips, Tricks, & Techniques"

2. 随便找几个用DIV+CSS实现，结构又比较简单的网站，研究一下它的页面结构和CSS。比如我就是主要看了下面几个网站：

      CSS禅花园          http://csszengarden.com/

      Eclipse.org        http://www.eclipse.org/

      mozilla.com        http://www.mozilla.com/

作为世界上CSS高手比武的擂台，CSS禅花园的模板实在多的恐怖，以前都只站在欣赏的角度不觉得，自己研究起来，也就只能是挑了一两个看看，再感慨了一番作者真是好创意好美工。有趣的是Eclipse.org的首页居然基本用的都是mozilla.com的CSS，对比着这两个网站看更能看出端倪。

3. 自己上手干吧，让你的页面内容和显示样式彻底分离，其实并不难。

制作网页过程中有些代码是经常要用到的（转帖）

（转自：http://blog.phpwind.net/blog.php?do=showone&tid=4495）

1. 如何在网页中加入注释

◆代码：< !-- 这是注释 -->

2. 如何在网页中加入EMAIL链接并显示预定的主题

◆代码：< a href="mailto:yourmail at xxx dot xxx?Subject=你好">Send Mail< /a>

3. 如何制作电子邮件表单

◆在<form>中输入Action="youremail at XXX dot XXX" ，提交采用POST方法。

4. 如何避免别人将你的网页放入他的框架（FRAME）中

◆在源代码中的<HEAD>…< /HEAD>之间加入如下代码：

<script language="javascript">< /script>

5. 如何自动加入最后修改日期

◆在源代码中的<BODY>…< /BODY>之间加入如下代码：

< Script Language="javascript">< /Script>

6. 如何让背景图象不滚动

◆代码：<BODY Background="bg.gif" Bgproperties="fixed" >

◆在Dreamweaver中用「Text」-「Custom style」-「Edit style Sheet」-「New」-Redefine HTML Tag中选择Body，然后在Background中的Attachment里选fixed

7. 如何将网页定时关闭

◆在源代码中的<BODY>后面加入如下代码：

< script LANGUAGE="javascript">  < /script>

在代码中的60000表示1分钟，它是以毫秒为单位的。

8. 将网页加入收藏夹

◆请使用如下代码：（注意标点符号）

< a href='#' onclick="window.external.addFavorite('http://hxsd.126.com','【火星时代】hxsd.126.com 各种网页工具教程DW、FLASH、FIREWORKS及CGI教学、聊天交友……')" target="_top">将本站加入收藏夹< /a>

9. 如何定义网页的关键字(KeyWords)

◆格式如下：

< meta name="keywords" content="dreamweaver,flash,fireworks">

content中的即为关键字，用逗号隔开

◆在Dreamweaver中用「Insert」-「Head」-KeyWords命令

10. 如何设置命令来关闭打开的窗口

◆在源代码中加入如下代码：

< a href="/" onclick="javascript:window.close(); return false;">关闭窗口< /a>

11. 如何在网页中加入书签，在页面内任意跳转

◆在源代码中需要插入书签的地方输入，在调用的地方输入Top，其中的top是你设定的书签名字。

◆在Dreamweaver中用菜单的「Insert」-「Name Anchor」命令插入书签，调用时，在Link中输入#top，top为书签名。

12. 如何为不支持框架的浏览器指定内容

◆在源代码中加入下面代码：

< BODY><noframes>本网页有框架结构，请下载新的浏览器观看< /noframes></ BODY>

13. 如何在网页中加入单个或几个空格

◆在源代码中输入，每个之间请用空格分开。

◆在Dreamweaver中用<CTRL>+<SHIFT>+<SPACE>插入空格或任输几个字符，然后将其色彩设成背景的色彩！

14. 如何在网页中加入书签，在多个页面之间任意跳转

◆方法与上面类似，不过做链接时要在书签名前加上网页文件名，如：other.htm#top，这样一来就会跳转到other.htm页面中的top书签处。

15. 如何使表格（TABLE）没有边框线

◆将表格的边框属性：border="0"

16. 如何隐藏状态栏里出现的LINK信息

◆请使用如下代码：

< a href="http://hxsd.126.com";;; onmouseOver="window.status='none'return true">火星时代< /a>

17. 如何定时载入另一个网页内容

◆在源代码中的<HEAD>…< /HEAD> 加入如下代码：

< meta http-equiv="refresh" content="40;URL=http://hxsd.126.com">

40秒后将自动载入http://hxsd.126.com所在的网页

18. 如何为网页设置背景音乐

◆代码：< EMBED src="music.mid" autostart="true" loop="2" width="80" height="30" >

src：音乐文件的路径及文件名；

autostart：true为音乐文件上传完后自动开始播放，默认为false（否）

loop：true为无限次重播，false为不重播，某一具体值（整数）为重播多少次

volume：取值范围为"0-100"，设置音量，默认为系统本身的音量

starttime："分：秒"，设置歌曲开始播放的时间，如，starttime="00:10"，从第10开始播放

endtime： "分：秒"，设置歌曲结束播放的时间

width：控制面板的宽

height：控制面板的高

controls：控制面板的外观

controls="console/smallconsole/playbutton/pausebutton/stopbutton/volumelever"

console：正常大小的面板

smallconsole：较小的面板

playbutton：显示播放按钮

pausebutton：显示暂停按钮

stopbutton：显示停止按钮

volumelever：显示音量调节按钮

hidden：为true时可以隐藏面板

19. 如何去掉链接的下划线

◆在源代码中的<HEAD>…</HEAD>之间输入如下代码：

<style type="text/css">  < /style>

◆在Dreamweaver中用「Text」-「Custom style」-「Edit style Sheet」-「New」-Redefine HTML Tag中选择a，然后在decoration中选中none

20. timeline中的layer走曲线

◆要使得timeline中的layer走曲线，你得先让他走出直线来，然后在最后一frame和第一frame中间的任何一frame上点右键，可以看到有个 add keyframe ，点一下，然后把你的layer移动到你要的位置，dw会自动生成曲线，ok！

21. 打开自定义大小窗口

◆在head中添加代码： <script language="JavaScript" type="text/JavaScript">

function open1(url)

{

var x,y;

x=window.event.screenX-8;

y=window.event.screenY-50;

var ss;

ss="Left=" + x + ",Top=" + y + ",Height=100,width=100,toolbar=no,scrollbars=yes";

window.open(url,"",ss);

}

</script>

*如果是打开两个不互相替换的窗口则添加一个不同名字的function即可，例如：

<script language="JavaScript" type="text/JavaScript">

function open1(url)

{

var x,y;

x=window.event.screenX-8;

y=window.event.screenY-50;

var ss;

ss="Left=" + x + ",Top=" + y + ",Height=100,width=100,toolbar=no,scrollbars=yes";

window.open(url,"",ss);

}

function open2(url)

{

var x,y;

x=window.event.screenX-8;

y=window.event.screenY-50;

var ss;

ss="Left=" + x + ",Top=" + y + ",Height=100,width=100,toolbar=no,scrollbars=yes";

window.open(url,"",ss);

}

</script>

然后在下面要连接的地方写如下代码：

<A href="#"

onclick="open1('路径/连接1.htm')">连接1</A>

<A href="#"

onclick="open2('路径/连接2.htm')">连接2</A>

如是点击Flash按钮，则在显示页的HEAD中写

<script language="JavaScript">

function openNewWindow(URLtoOpen, windowName, windowFeatures) { newWindow=window.open(URLtoOpen, windowName, windowFeatures); }

</script>

在flash 的按钮上写

on (press) {

getURL("javascriptpenNewWindow(要打开的页名.htm','words','height=446,width=720,toolbar=no,scrollbars=no')";

}

22、打开一个没有最大化、最小化，只有关闭按钮的窗口

◆复制代码到head中

function modelesswin(url,mwidth,mheight){

if (document.all&&window.print) //if ie5

eval('window.showModelessDialog(url,"","help:0;resizable:1;dialogWidth:'+mwidth+'px;dialogHeight:'+mheight+'px"')

else

eval('window.open(url,"","width='+mwidth+'px,height='+mheight+'px,resizable=1,scrollbars=1"')

}

//configure URL and window dimensions (width/height)

modelesswin("http://google.com",600,600)

//To load via link, use something like below:

//<a href="javascript:modelesswin('http://yahoo.com',600,400)">Click here</a>

</script>

23、直接点击链接关闭窗口

举个例子比较方便理解````

◆<SCRIPT language=JavaScript>

function shutwin(){

window.close();

return; }

</SCRIPT>

<P align=center><A href="javascript:shutwin();">关闭本窗口</A></P></BODY></HTML>

24、弹启一个全屏窗口

◆window.open('http://www.hxsd.com','example01','fullscreen')

hoho~~~好像触摸屏

25、弹启一个被F11化后的窗口

◆window.open('http://www.hxsd.com','example02','channelmode')

26、弹启一个带有收藏链接工具栏的窗口

◆window.open('http://www.hxsd.com','example03','width=400,height=300,directories')

<html>

<body onload="window.open('http://www.hxsd.com','example03','width=400,height=300,directories');">

<b>www.hxsd.com</b>

</body>

</html>

27. 在打开页面同时弹出无边框全屏窗口

◆ 加入到< body>和< /body>之间

<script>

var tmp=window.open("about:blank","",

"fullscreen=1")

tm　

p.moveTo(100,100)

tmp.resizeTo(600,400)

tmp.focus()

tmp.location="http://hxsd.com（要打开的窗口页文件）"

</script>

28. 鼠标移动到图片上图片渐显效果

◆在<head>到</head>之间插入如下的JAVASCRIPT代码：

<script>

nereidFadeObjects = new Object();

nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta){

if (!document.all)

return

if (object != "[object]"){

setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);

return;

}

clearTimeout(nereidFadeTimers[object.sourceIndex]);

diff = destOp-object.filters.alpha.opacity;

direction = 1;

if (object.filters.alpha.opacity > destOp){

direction = -1;

}

delta=Math.min(direction*diff,delta);

object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){

nereidFadeObjects[object.sourceIndex]=object;

nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);

}

}

</script>

在要插入的图片添加如下代码：

<img onMouseOut=nereidFade(this,50,10,4) onMouseOver=nereidFade(this,100,10,4) style="FILTER: alpha(opacity=50)" src="图片名">

*其中onMouseOver=nereidFade(this,50,10,4)中 style="FILTER: alpha(opacity=50)"表示图片的透明度为50%

29. 背景色渐变

例子：

◆复制下面的代码到的 html 文件的 <head> 和 </head> 之间：

用<body onload="disco()">替换原有的<BODY.>

使用说明：通过修改中的红色字你可以修改你的初始颜色；RGB颜色值

31. 表格的分隔线可以隐藏

◆<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线

<table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线

<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线

32. 表格的分隔线闪烁

◆在BODY区加上

<tr>

<td>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.</td>

</tr>

</table>

<!--

function fla****(){

if (!document.all)

return

if (myexample.style.borderColor=="yellow")

myexample.style.borderColor="lime"

else

myexample.style.borderColor="yellow"

}

setInterval("fla****()", 500)

//-->

</script>

33. 背景音乐可以控制

◆放在 <BODY> 和 </BODY> 之间

<EMBED SRC="001.mid" WIDTH=145　HEIGHT=60>

就会出现一个控制面版让你播放音乐，如果要把音乐当作背景音乐来用，也就是不要显示控制面板。而且一进入画面就要播放，然后一直重复。就要这样写

<EMBED src="ch35.mid" autostart="true" loop="2" width="80" height="30">

关于embed还有很多属性

autostart：true为音乐文件上传完后自动开始播放，默认为false（否）

loop：true为无限次重播，false为不重播，某一具体值（整数）为重播多少次

volume：取值范围为"0-100"，设置音量，默认为系统本身的音量

starttime："分：秒"，设置歌曲开始播放的时间，如，starttime="00:10"，从第10开始播放

endtime： "分：秒"，设置歌曲结束播放的时间

width：控制面板的宽

height：控制面板的高

controls：控制面板的外观

controls="console/smallconsole/playbutton/pausebutton/stopbutton/volumelever"

console：正常大小的面板

smallconsole：较小的面板

playbutton：显示播放按钮

pausebutton：显示暂停按钮

stopbutton：显示停止按钮

volumelever：显示音量调节按钮

hidden：为true时可以隐藏面板

34. 自适应图片大小的弹出窗口

◆实现此功能的最简单作法是用以下HTML代码创建一个图像链接：

　　<a href="fullsize.jpg" target="_blank"><img src="small.jpg"></a>

　　其中<a>标记的href属性指定全尺寸图片的URL，target属性设置为_blank指定在新窗口中显示该图片；<img>标记的src属性指定缩略图的URL。

　　如果想对显示全尺寸图片的窗口的外观进行某些控制（比如希望弹出窗口的高度、宽度能与全尺寸图片的大小匹配时），则可调用 window.open 方法，该方法接收三个参数，分别指定要打开文件的URL，窗口名及窗口特性，在窗口特性参数中可指定窗口的高度、宽度，是否显示菜单栏、工具栏等。以下代码将显示全尺寸图片在一个没有工具栏、地址栏、状态栏、菜单栏，宽、高分别为400、350的窗口中：

<a href="fullsize.jpg" onClick="window.open(this.href,'', 'height=350,width=400,toolbar=no,location=no,status=no,menubar=no');return false"><img src="small.jpg"></a>

如果所有全尺寸图片都具有统一的大小（比如都是400x350），那么以上代码适用于所有的缩略图片链接（只是href属性指向的全尺寸图片文件不同）。但如果全尺寸图片的大小并不统一，还用以上代码则我们需要先取得每幅全尺寸图片的大小，然后在window.open方法的窗口特性参数中一一设置height和width为正确的值，在图片数量较多的情况下，这显然效率太低了。可以使用 DHTML 中的 Image 对象来达到目的，Image 对象可动态装载指定的图片，通过读取其 width 和 height 属性即能获得装入图片的大小，以此来设置弹出窗口的大小，即可实现自适应图片大小的弹出窗口了。下面即是实现代码:

<script language="JavaScript" type="text/JavaScript">

<!--

var imgObj;

function checkImg(theURL,winName){

// 对象是否已创建

if (typeof(imgObj) == "object"){

// 是否已取得了图像的高度和宽度

if ((imgObj.width != 0) && (imgObj.height != 0))

// 根据取得的图像高度和宽度设置弹出窗口的高度与宽度，并打开该窗口

// 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量

OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));

else

// 因为通过 Image 对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查

setTimeout("checkImg('" + theURL + "','" + winName + "')", 100)

}

}

　　使用时将上面的代码放在网页文档的<head></head>标记对中，然后在链接的点击事件中调用OpenFullSizeWindow函数，如<a href="fullsize.jpg" onClick="OpenFullSizeWindow(this.href,'','');return false"><img src="small.jpg"></a>即可。

　　以上代码在IE 5.x－6.0中测试通过：）

35.时间日期代码 ~~~~~~~~~~

001说明数字化的时钟

效果现在时刻：0:12:31

<span id="liveclock" style"=width: 109px; height: 15px"></span>

<SCRIPT language=javascript>

function www_helpor_net()

{

var Digital=new Date()

var hours=Digital.getHours()

var minutes=Digital.getMinutes()

var seconds=Digital.getSeconds()

if(minutes<=9)

minutes="0"+minutes

if(seconds<=9)

seconds="0"+seconds

myclock="现在时刻：<font size='5' face='Arial black'>"+hours+":"+minutes+":"+seconds+"</font>"

if(document.layers){ document.layers.liveclock.document.write(myclock)

document.layers.liveclock.document.close()

}else if(document.all)

liveclock.innerHTML=myclock

setTimeout("www_helpor_net()",1000)

}

www_helpor_net();

//-->

</SCRIPT>

002说明六种风格时间显示,一定有你喜欢的！

效果风格一: 星期三,4月21日,2004年

风格二: 0:12:45上午

风格三: 星期三,4月21日,2004年 0:12:45上午

风格四: 4/21/04

风格五: 0:12:45

风格六: Wed Apr 21 00:12:45 UTC+0800 2004

<SCRIPT language="javascript">

<!--

function initArray()

{

for(i=0;i<initArray.arguments.length;i++)

this=initArray.arguments;

}

var isnMonths=new initArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");

var isnDays=new initArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");

today=new Date();

hrs=today.getHours();

min=today.getMinutes();

sec=today.getSeconds();

clckh=""+((hrs>12)?hrs-12:hrs);

clckm=((min<10)?"0":"")+min;clcks=((sec<10)?"0":"")+sec;

clck=(hrs>=12)?"下午":"上午";

var stnr="";

var ns="0123456789";

var a="";

function getFullYear

{

yr=d.getYear();if(yr<1000)

yr+=1900;return yr; }

document.write("<table>");

//下面各行分别是一种风格，把不需要的删掉即可

document.write("<TR><TD>风格一:</TD><TD>"+isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""+today.getDate()+"日,"+getFullYear(today)+"年");

document.write("<TR><TD>风格二:</TD><TD>"+clckh+":"+clckm+":"+clcks+""+clck+"</TD></TR>");

document.write("<TR><TD>风格三:</TD><TD>"+isnDays[today.getDay()]+","+isnMonths[today.getMonth()]+""+today.getDate()+"日,"+getFullYear(today)+"年 "+clckh+":"+clckm+":"+clcks+""+clck+"</TD></TR>");

document.write("<TR><TD>风格四:</TD><TD>"+(today.getMonth()+1)+"/"+today.getDate()+"/"+(getFullYear(today)+"").substring(2,4)+"</TD></TR>");

document.write("<TR><TD>风格五:</TD><TD>"+hrs+":"+clckm+":"+clcks+"</TD></TR>");

document.write("<TR><TD VALIGN=TOP>风格六:</TD><TD>"+today+"</TD></TR>");

document.write("</table>");

//-->

</SCRIPT>

003说明显示他人在页面停留的时间，而且可以作出提醒

效果您在本站逗留了

您在本站逗留了<input type="text" name="helpor_net" size="15" style="border: 0 ">

<SCRIPT language="javascript">

</SCRIPT>

004说明这个时钟是有影子的，而且还在不停地走着呢

效果 00:14:3300:14:33

<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:'Arial black';color:#cccccc;font-size:20px;top:50px;left:173px"></div>

<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:'Arial black';color:#000000;font-size:20px;top:48px;left:170px"></div>

<div id="mainbody" style="position:absolute; visibility:visible">

</div>

<script language=javaScript>

<!--

function www_helpor_net() {

thistime= new Date()

var hours=thistime.getHours()

var minutes=thistime.getMinutes()

var seconds=thistime.getSeconds()

if (eval(hours) <10) { hours="0"+hours }

if (eval(minutes) < 10) { minutes="0"+minutes }

if (seconds < 10) { seconds="0"+seconds }

thistime = hours+":"+minutes+":"+seconds

if(document.all) {

bgclocknoshade.innerHTML=thistime

bgclockshade.innerHTML=thistime

}

if(document.layers) {

document.bgclockshade.document.write('<div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:20px;top:10px;left:152px">'+thistime+'</div>')

document.bgclocknoshade.document.write('<div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;colorDDDDD;font-size:20px;top:8px;left:150px">'+thistime+'</div>')

document.close()

}

var timer=setTimeout("www_helpor_net()",200)

}

www_helpor_net();

//-->

</script>

005说明年月日都是用全中文显示

效果公元二零零三年四月二十一日

var today1 = new Date()

var month = today1.getMonth()+1

var date = today1.getDate()

var day = today1.getDay()

document.write("公元二零零三年")

number(month)

document.write("月")

number(date)

document.write("日")

//-->

</script>

006美女时钟

</SPAN><SPAN id=_ctl0__ctl10_lblContent style="TABLE-LAYOUT: fixed; FONT-SIZE: 14px; WORD-BREAK: break-all; LINE-HEIGHT: 150%"><EMBED src=http://www.twinsbbs.com/swf/clock.swf type=application/x-shockwave-flash></EMBED></SPAN></TD> </TR></TABLE>

<SCRIPT language=javascript>



</SCRIPT>

<BR>

<TABLE width="100%">

<TBODY>

<TR>

<TD></TD></TR>

<TR>

<TD></TD></TR></TBODY></TABLE>

UBB 语法(转帖)

UBB语法（http://bbs.dvbbs.net/boardhelp.asp?boardid=0&act=3&title=UBB%D3%EF%B7%A8）

论坛可以由管理员设置是否支持UBB标签，UBB标签就是不允许使用HTML语法的情况下，通过论坛的特殊转换程序，以至可以支持少量常用的、无危害性的HTML效果显示。以下为具体使用说明：

文字：在文字的位置可以任意加入您需要的字符，显示为粗体效果。

效果：文字

文字：在文字的位置可以任意加入您需要的字符，显示为斜体效果。

效果：文字

文字：在文字的位置可以任意加入您需要的字符，显示为下划线效果。

效果：文字

文字

：在文字的位置可以任意加入您需要的字符，center位置center表示居中，left表示居左，right表示居右。

效果：文字

HTTP://WWW.ASPSKY.NET

效果：HTTP://WWW.ASPSKY.NET

动网先锋：有两种方法可以加入超级连接，可以连接具体地址或者文字连接。

效果：动网先锋

aspmaster@cmmail.com

效果：aspmaster@cmmail.com

沙滩小子：有两种方法可以加入邮件连接，可以连接具体地址或者文字连接。

效果：沙滩小子

：在标签的中间插入图片地址可以实现插图效果。

效果：

[flash]http://bbs.dvbbs.net/ad/banner02.swf[/Flash]：在标签的中间插入Flash图片地址可以实现插入Flash。

效果：

引用

：在标签的中间插入文字可以实现HTMl中引用文字效果。

效果：

引用

[fly]文字[/fly]：在标签的中间插入文字可以实现文字飞翔效果，类似跑马灯。

效果：

文字

[move]文字[/move]：在标签的中间插入文字可以实现文字移动效果，为来回飘动。

效果：

文字

[glow=255,red,2]文字[/glow]：在标签的中间插入文字可以实现文字发光特效，glow内属性依次为宽度、颜色和边界大小。

效果：

文字

[shadow=255,red,2]文字[/shadow]：在标签的中间插入文字可以实现文字阴影特效，shadow内属性依次为宽度、颜色和边界大小。

效果：

文字

文字：输入您的颜色代码，在标签的中间插入文字可以实现文字颜色改变。

color="#FF0000"效果：文字

文字：输入您的字体大小，在标签的中间插入文字可以实现文字大小改变。

size=5效果：文字

隶书：输入您需要的字体，在标签的中间插入文字可以实现文字字体转换。

效果：文字

[DIR=500,350]http://[/DIR]：为插入shockwave格式文件，中间的数字为宽度和长度

[RM=500,350,1]http://[/RM]：为插入realplayer格式的rm文件，数字分别为宽度、长度、播放模式

[MP=500,350,1]http://[/MP]：为插入为midiaplayer格式的文件，数字分别为宽度、长度、播放模式

[QT=500,350]http://[/QT]：为插入为Quick time格式的文件，中间的数字为宽度和长度

这是对应的源代码：

<table border="0" cellpadding="3" cellspacing="1" class="tableborder1" Style="width:100%;height:100%" align=center>

<tr><th height=23>UBB语法</th></tr>

<tr><td class=tablebody1><br><style type=text/css>

.quote{

margin:5px 20px;border:1px solid #CCCCCC;padding:5px; background:#F3F3F3

}

</style>

<p>论坛可以由管理员设置是否支持UBB标签，UBB标签就是不允许使用HTML语法的情况下，通过论坛的特殊转换程序，以至可以支持少量常用的、无危害性的HTML效果显示。以下为具体使用说明：

<p><font color="red"></font>文字<font color="red"></font>：在文字的位置可以任意加入您需要的字符，显示为粗体效果。<DIV class=quote >效果：<b>文字</b></DIV>

<p><font color="red"></font><i>文字</i><font color="red"></font>：在文字的位置可以任意加入您需要的字符，显示为斜体效果。<DIV class=quote >效果：<i>文字</i></DIV>

<p><font color="red"></font><u>文字</u><font color="red"></font>：在文字的位置可以任意加入您需要的字符，显示为下划线效果。<DIV class=quote >效果：<u>文字</u></DIV>

<p><font color="red">

</font>文字<font color="red">

</font>：在文字的位置可以任意加入您需要的字符，center位置center表示居中，left表示居左，right表示居右。<DIV class=quote align="center">效果：文字</DIV>

<p><font color="red"></font>HTTP://WWW.ASPSKY.NET<font color="red"></font><DIV class=quote >效果：<a href="HTTP://WWW.ASPSKY.NET">HTTP://WWW.ASPSKY.NET</a></DIV>

<p><font color="red"></font>动网先锋<font color="red"></font>：有两种方法可以加入超级连接，可以连接具体地址或者文字连接。<DIV class=quote >效果：<a href="HTTP://WWW.ASPSKY.NET">动网先锋</a></DIV>

<p><font color="red"></font>aspmaster@cmmail.com<font color="red"></font><DIV class=quote >效果：<a href="mailto:aspmaster@cmmail.com">aspmaster@cmmail.com</a></DIV>

<p><font color="red"></font>沙滩小子<font color="red"></font>：有两种方法可以加入邮件连接，可以连接具体地址或者文字连接。<DIV class=quote >效果：<a href="mailto:aspmaster@cmmail.com">沙滩小子</a></DIV>

<p><font color="red"></font>：在标签的中间插入图片地址可以实现插图效果。<DIV class=quote >效果：<img src="http://www.aspsky.net/images/asp.gif" width="88" height="31"></DIV>

<p><font color="red">[flash]</font>http://bbs.dvbbs.net/ad/banner02.swf<font color="red">[/Flash]</font>：在标签的中间插入Flash图片地址可以实现插入Flash。<DIV class=quote >效果：<embed src="http://bbs.dvbbs.net/ad/banner02.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="468" height="60"></embed></DIV>

<p><font color="red">

</font>引用<font color="red">

</font>：在标签的中间插入文字可以实现HTMl中引用文字效果。<DIV class=quote >效果：<DIV class=quote >引用</DIV></DIV>

<p><font color="red">[fly]</font>文字<font color="red">[/fly]</font>：在标签的中间插入文字可以实现文字飞翔效果，类似跑马灯。<DIV class=quote >效果：<marquee behavior="alternate">文字</marquee></DIV>

<p><font color="red">[move]</font>文字<font color="red">[/move]</font>：在标签的中间插入文字可以实现文字移动效果，为来回飘动。<DIV class=quote >效果：<marquee>文字</marquee></DIV>

<p><font color="red">[glow=255,red,2]</font>文字<font color="red">[/glow]</font>：在标签的中间插入文字可以实现文字发光特效，glow内属性依次为宽度、颜色和边界大小。<DIV class=quote >效果：<div style="width:255px;filter:glow(color=red, strength=2)">文字</div></DIV>

<p><font color="red">[shadow=255,red,2]</font>文字<font color="red">[/shadow]</font>：在标签的中间插入文字可以实现文字阴影特效，shadow内属性依次为宽度、颜色和边界大小。<DIV class=quote >效果：<div style="width:255px;filter:shadow(color=red, strength=2);">文字</div></DIV>

<p><font color="red"></font>文字<font color="red"></font>：输入您的颜色代码，在标签的中间插入文字可以实现文字颜色改变。<DIV class=quote ><font COLOR="#0000c0">color=</font>"#FF0000"效果：<font color="#FF0000">文字</font></DIV>

<p><font color="red"></font>文字<font color="red"></font>：输入您的字体大小，在标签的中间插入文字可以实现文字大小改变。<DIV class=quote ><font color="red">size=5</font>效果：<font size="5">文字</font></DIV>

<p><font color="red"></font>隶书<font color="red"></font>：输入您需要的字体，在标签的中间插入文字可以实现文字字体转换。<DIV class=quote >效果：<font face="隶书">文字</font></DIV>

<p><font color="red">[DIR=500,350]</font>http://<font color="red">[/DIR]</font>：为插入shockwave格式文件，中间的数字为宽度和长度<p><font color="red">[RM=500,350,1]</font>http://<font color="red">[/RM]</font>：为插入realplayer格式的rm文件，数字分别为宽度、长度、播放模式<p><font color="red">[MP=500,350,1]</font>http://<font color="red">[/MP]</font>：为插入为midiaplayer格式的文件，数字分别为宽度、长度、播放模式

<p><font color="red">[QT=500,350]</font>http://<font color="red">[/QT]</font>：为插入为Quick time格式的文件，中间的数字为宽度和长度</p></br></td>

</tr></table>

marquee标签的用法（含转帖：会移动的文字(Marquee)）

　　今天，从朋友那里学到了让鼠标指到marquee的内容时，移动的内容即停下来；离开了就继续移动的用法。如下：

　　<marquee scrollamount=3 onmouseover=this.stop(); onmouseout=this.start();>（即本站公告牌的用法）

　　其中，scrollamount是控制内容的移动速度的。onmouseover和onmouseout可能是javascript语法，不懂，可能是在html中所有的元素中都可以使用的语法吧？

　　下面转帖一篇来自网上的介绍marquee用法的完整文章：(转自：http://www.lib.tsinghua.edu.cn/chinese/INTERNET/HTML/Normal/marquee.html)

会移动的文字(Marquee)

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

基本语法

<marquee> ... </marquee>

<marquee>啦啦啦，我会移动耶！</marquee>

啦啦啦，我会移动耶！

文字移动属性的设置

方向 <direction=#> #=left, right

<marquee direction=left>啦啦啦，我从右向左移！</marquee> <P>

<marquee direction=right>啦啦啦，我从左向右移！</marquee>

啦啦啦，我从右向左移！

啦啦啦，我从左向右移！

方式 <bihavior=#> #=scroll, slide, alternate

<marquee behavior=scroll>啦啦啦，我一圈一圈绕着走！</marquee> <P>

<marquee behavior=slide>啦啦啦，我只走一次就歇了！</marquee> <P>

<marquee behavior=alternate>啦啦啦，我来回走耶！</marquee>

啦啦啦，我一圈一圈绕着走！

啦啦啦，我只走一次就歇了！

啦啦啦，我来回走耶！

循环 <loop=#> #=次数；若未指定则循环不止(infinite)

<marquee loop=3 width=50% behavior=scroll>啦啦啦，我只走 3 趟哟！</marquee> <P>

<marquee loop=3 width=50% behavior=slide>啦啦啦，我只走 3 趟哟！</marquee> <P>

<marquee loop=3 width=50% behavior=alternate>啦啦啦，我只走 3 趟哟！</marquee>

啦啦啦，我只走 3 趟哟！

啦啦啦，我只走 3 趟哟！

速度 <scrollamount=#>

<marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>

啦啦啦，我走得好快哟！

延时 <scrolldelay=#>

<marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

啦啦啦，我走一步，停一停！

外观(Layout)设置

对齐方式(Align) <align=#> #=top, middle, bottom

<font size=6>

<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>

</font>

对齐上沿、中间、下沿。

啦啦啦，我会移动耶！对齐上沿。

啦啦啦，我会移动耶！对齐中间。

啦啦啦，我会移动耶！对齐下沿。

底色 <bgcolor=#>

#=rrggbb 16 进制数码，或者是下列预定义色彩：

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,

Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<marquee bgcolor=aaaaee>啦啦啦，我会移动耶！</marquee>

啦啦啦，我会移动耶！

面积 <height=# width=#>

<marquee height=40 width=50% bgcolor=aaeeaa>

啦啦啦，我会移动耶！

</marquee>

啦啦啦，我会移动耶！

空白(Margins)<hspace=# vspace=#>

********************************************<br>

嗨,

<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>啦啦啦，我会移动耶！</marquee>

大家好！<br>

********************************************

********************************************

嗨, 啦啦啦，我会移动耶！大家好！

********************************************

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

HTML Design Guide Main Page

Contents || Page || Font || Text Style || Image || Form || Table || Table Advanced

|| Frames || Marquee || Alternative Inline Elements

Tag Index || What's New

Network Communication Design

http://ncdesign.kyushu-id.ac.jp/

C&P 1994-1996 Yuriko Ienaga v91102@vgenda.kyushu-id.ac.jp

让del.icio.us不影响页面的加载(转帖)

金山词霸有时加载太慢，在网上收索到这个解决的方法。感谢原作者。

让del.icio.us不影响页面的加载（转自：http://blog.osxcn.com/delicious-loading.html）

Published 1 month, 2 weeks ago in WordPress, CSS. Tags: del.icio.us | del.icio.us

del.icio.us linkrolls

del.icio.us提供的linkrolls服务是个好东西，可以把它放在自己的Blog上、网站上，显示你所收藏的美味书签，很多朋友都这样做了。但是由于加载速度的问题让人头痛，所以很多朋友也不得不把它放在页面的最后，来换取速度带来的损失。我在Wordpress上用过Del.icio.us Integrator插件建立一个del.icio.us页面，来解决加载慢的问题，还是不理想。

如果按照我blog的页面布局来说，放在最后就得放在footer的前面，不然，右边的蓝色背景就会受到影响。那么在页面上的显示结果很是不爽，于是我想了一个老办法，使用一小段JS代码来完成这个任务。

道理很简单，就是先在需要放置linkrolls的地方插一个替代图片，等页面加载完成后隐藏图片显示真正的linkrolls代码。这样就可以把那段真正的linkrolls代码放在页面的最后，而不影响页面其他元素的加载。具体怎么实现？看看下面的实际做法就知道了。

1、把下面这段js代码放在之间，放页面其他地方也可以。

<script type="text/javascript">

   function delicious() {

       document.getElementById("delicious_loading").style.display = 'none';

       document.getElementById("delicious_loaded").style.display = 'none';

       document.getElementById("delicious_show").innerHTML=document.getElementById("delicious_loaded").innerHTML;

       document.getElementById("delicious_show").style.display = 'block';

   };

   window.onload = delicious;

</script>

2、把下面这段代码放在你需要显示linkrolls的地方。

(如果你想好看，可以把下面的loading…改成一个GIF动画什么的都可以)

<div id="delicious_loading">loading...</div>

<div id="delicious_show" style="display:none;"></div>

3、把下面这段代码放在页面的最后，例如：/html之前或之后，反正它不会显示出来。

<div id="delicious_loaded" style="display:none">你自己的linkrolls调用代码</div>

完成。效果见本Blog首页右边的“Recent Delicious”。

当然，你也可以把豆瓣收藏秀、Flickr badge、Google的广告或推介，反正一切影响你页面加载的代码都这样弄。如果你有兴趣还可以按照这个思路弄一些WP的插件。

BTW:上面的代码加亮效果使用andot的CoolCode插件

头疼，我搞不懂网页中空格的使用了

　　空格在编程类的网站上比较重要，例如：代码缩排，今天，在网上看了一下有关css样式表的知识。有如下收获：

　　１、网页中连续的空格在网页上只显示一个；

　　２、html文件中的<font face="宋体">宋体字</font>在css文件中相当于{font-family:"宋体"}；

　　但是，处理“学习日记”上的空格把我搞昏了，只得暂时放弃，情况如下：

　　１、原来，把文章格式化成html格式的内容是每行的前导空格用转义字符“＆nbsp;”替换，行中的空格不变，这样，行中如果有超过１个的空格在网页中只会显示一个空格；但是，如果把所有的空格用“＆nbsp;”替换，整个网页中的表格无论是在IE6或Mozilla 1.7中都会严重变形！搞不懂；

　　２、如果把网页的样式单独写成一个css文件，然后在jsp文件中link这个文件，在IE6.0中空格的宽度就会小于一个英文字符的宽度，而在Mozilla 1.7中的两个宽度是一样的；而如果把css样式直接写在jsp文件的<head>与</head>之间，在IE6.0中空格的宽度又和一个英文字符的宽度一样了！搞不懂；

　　头疼，暂时不去管这个事情了，以后有机会找朋友帮忙看看是怎么样一回事。

（转帖）网页色彩、图形的使用（Coloring Your World）

转自：http://www.cntesting.com/bbs/read.php?tid=1343&page=e#a

Coloring Your World

Robert Hess

Microsoft Corporation

July 10, 2000

Contents

Background Check

Graphic Formats

Applying Palettes

Image and color have had a long history on Web pages. But based on some of the questions that people send to me, as well as some of the results I see on far too many professionally designed Web pages, it seems to me that a lot of folks are still confused as to the technical aspects of how to use images and/or color on their pages. So, excuse me if the following is old news to some of you; I expect many people will find the following information useful.

Background Check

First, let me address what must be the simplest aspect of color usage, and possibly one of the most common problems present on many Web sites. When I say simple, I really mean simple. Here it is:

Are you using this on your site? Are you sure? Take a moment to check your browser's default background color setting. If you are like the majority of computer users, you have your default background color set to white. Now, imagine what happens if—as you design Web pages—you constantly see them with a white background, even if you haven't specifically set the background to white. Now imagine that you add some graphics, or other page elements to your site. If you aren't intentionally checking to verify that these will still look fine on any background color, you should be sure to manually set your page's background color, because chances are that your carefully designed Web page won't look quite right if some color besides white comes in for the background.

<body>

</body> <body bgcolor="white">

</body>

Figure 1. The use of transparency in the lefthand image renders the accompanying text virtually unreadable. Also, the shadow around both the fly and the text looks jagged, because it was designed to be used on a white background. In the righthand image, the BGCOLOR attribute was explicitly set to white, so the image shows up as the designer intended.

I have my Web browser set to gray as the default background color, and you would be amazed by the number of sites I run across that weren't expecting to suddenly get a gray background. You would be equally surprised to see who owns some of these sites. Check it out. Change your default background color to something other than white, then browse the Web—starting with your own site.

Graphic Formats

Another fairly simple design issue, but one that I constantly see people struggling with, is the difference between .gif and .jpeg images. The specific issue is which format to use when you prepare images for your Web site.

The simple rule of thumb is that .jpeg images are best used for photographic (also known as "continuous tone") images, and the .gif format is best for images that have large areas of solid color. The reason for this lies in the process these formats use for their compression.

Figure 2. This 4K JPEG image would be 11K if saved as a GIF

Figure 3. This 2K GIF image would be 4K if saved as a JPEG

A .gif is a "lossless" compression model. This means that if you take an uncompressed bitmap image, compress it into a .gif file, then uncompress it back into a bitmap image, you will end up with the identical image. No bits are lost. However, if you were to convert this bitmap to a .jpeg, then bring it back to a bitmap, you would almost certainly lose data—and the tighter the compression, the more data you would lose. The algorithm that .gif uses for image compression works really well when you have a large area of a single color—but it will actually increase the size of the image if every pixel is a different color than the preceding one.

Figure 4. Zooming in on the above GIF image saved as a JPEG

Figure 5. Zooming in on the above GIF image

The only time you might need to use the .gif format for what otherwise might be best implemented as a .jpeg image is when you need transparency in your image. Graphic images are rectangular in form, but the .gif image format supports the notion of treating one of your image colors as trasparent, so that whatever image or color is underneath the image will show through. This is extremely handy for situations in which you want a non-rectangular image on your page. You can see this effect in the above "A Fly in the Ointment" example. The image of the fly and the shadowing are best done in a .jpeg image—but because I wanted to use transparency, I had to turn the image into a .gif.

Okay, there is one other time you would want to turn a .jpeg image into a .gif—when you want animation in your image. The .gif file format supports multiple images in a single file, and Web browsers have leveraged this to allow a .gif file to represent simple animation. However, I highly caution against using this too often.

Applying Palettes

When discussing the usage of .gif and .jpeg images, it is also important to touch upon the aspect of color palettes. A color palette is the definition of colors you will use for your image. The palette is placed and is then referenced by the appropriate color index within the image definition itself. This can allow the image data to be a lot smaller than it would be otherwise, but it also limits the numbers of colors you can use.

For example, let's pretend you had a 640x480 image that uses only 256 colors. If each pixel of the image is stored as a full, 24-bit color value (24 bits is the data storage required for a color value, such as "#99F5A2"), you end up with an image file that is about one megabyte in size. However, if you instead build a 256-entry color palette for each of those 24 bit colors— then, within your image file, use only 8-bit values (8 bits is the data storage required for an index value capable of referencing 256 different locations in a table) to indicate which of those 256 colors you want to use for your image, you end up with an image that is about one third the size. (Note that these calculations are on raw pixel images for discussion purposes only; an actual .gif or .jpeg image with these characteristics would be of considerably different size.)

Understanding the notion of palettes is important, because a .gif image uses palettes for its image definition, but .jpeg does not. This means that a .gif image can contain no more than 256 unique colors, while a .jpeg can contain virtually any color that can be described by a 24-bit value (more than 16 million colors). Most image-editing tools will allow you to customize/optimize the palette used by a .gif image, so that the colors in its palette will be those 256 colors that the image needs. A potential problem arises, however, when users set their display to 256-color mode. In that case, both the image and the display are using a color palette for showing images on the screen—and if an image wants to use a color that isn't contained in the screen's color palette, the nearest color from the screen's palette will be used instead.

While the palette the browser uses to display your image can't be controlled by the Web page being displayed, and, in fact, can't even be known by the Web page, it is possible to optimize a .gif image for display in a browser. You can do this by using a special browser-safe color palette. A long time ago, I wrote an article about this safety palette. Suffice it to say that by optimizing your images to use a specific set of 216 colors, you can exercise a fair amount of control over how your images will look in virtually any browser on any user's screen.

Figure 6. A black-and-white JPEG image that uses only 247 shades of gray

Figure 7. Dithering Mode: the same image, but dithered to use the Safety Palette

Figure 8. Nearest Color: the same image, but reduced to the nearest colors of the Safety Palette

In the example above, I've produced three black-and-white images of a Seattle ferry. The top image is a .jpeg, which will do a good job at reproducing the original black-and-white image. The image in the center is a .gif file to which I have applied the safety palette and a dithering algorithm to closely approximate the original image. If you are viewing this on a display set to 256-color mode, then both the top and center images will have the same grainy look to them. Otherwise, the topmost image will look fine and the center image will look grainy.

The image on the bottom is another .gif, in which I am exaggerating the problem by applying the safety palette and using a nearest-color algorithm. The result produces larger areas of color—true to the .gif format, but splotchy in this image. However, this .gif is smaller than the .jpeg on the top; the dithering of the center image causes it to be the largest of them all.

I've only scratched the surface of proper Web site use of images and color. I hope you have found something here that will help you design your Web sites just a little bit better.

"alt"和"title"属性的使用（转帖两篇）

<TITLE><ALT>里面如何换行（来自http://www.aspx.cn/html/web/DreamWeaver/589/42989.html）

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

<a href="#" title="《杀手无罪》

类型：电影

产地：美国

片长：单本剧

主演：妮芙·坎贝尔唐纳德·萨瑟兰威廉·梅西约翰·瑞特尔特蕾茜·乌尔曼" border="0">鼠标放上去看说明</a>

“title”的使用：来自http://www.w3.org/TR/html4/struct/global.html#h-7.4.3

7.4.3 The title attribute

Attribute definitions

title = text [CS]

This attribute offers advisory information about the element for which it is set.

Unlike the TITLE element, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements. Please consult an element's definition to verify that it supports this attribute.

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:

...some text...

Here's a photo of

<A href="http://someplace.com/neatstuff.gif" title="Me scuba diving">

me scuba diving last summer

</A>

...some more text...

The title attribute has an additional role when used with the LINK element to designate an external style sheet. Please consult the section on links and style sheets for details.

Note. To improve the quality of speech synthesis for cases handled poorly by standard techniques, future versions of HTML may include an attribute for encoding phonemic and prosodic information.

7.4.4 Meta data